กฎ JSX: นิพจน์ แอตทริบิวต์ และแฟรกเมนต์
ใช้นิพจน์ JSX กับ { } ใช้แอตทริบิวต์แบบ camelCase (className, onClick) และคืนค่าองค์ประกอบหลายรายการผ่านแฟรกเมนต์
กฎ JSX: นิพจน์ แอตทริบิวต์ และแฟรกเมนต์ เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
สิ่งที่ JSX เพิ่มเข้ามา
เป้าหมาย: เชี่ยวชาญพื้นฐาน JSX — ใช้ { } สำหรับนิพจน์ ใช้แอตทริบิวต์แบบ camelCase และจัดกลุ่มองค์ประกอบพี่น้องด้วยแฟรกเมนต์
นิพจน์และแอตทริบิวต์
นิพจน์ อยู่ภายใน { } และอาจเป็นตัวแปร การเรียกฟังก์ชัน หรือการคำนวณอย่างง่าย ส่วนแอตทริบิวต์ใช้รูปแบบ camelCase เช่น className, htmlFor, onClick
ตัวอย่าง: นิพจน์และแอตทริบิวต์
เรนเดอร์ค่าไดนามิกด้วย { } และใช้ className/title/onClick เป็นแอตทริบิวต์แบบ camelCase
<div id="root"></div>
แฟรกเมนต์สำหรับองค์ประกอบพี่น้อง
ส่งคืนองค์ประกอบพี่น้องหลายรายการโดยใช้แฟรกเมนต์: ใช้ได้ทั้ง <>...</> หรือ <React.Fragment> แฟรกเมนต์ช่วยหลีกเลี่ยง div ที่ใช้ห่อหุ้มเพิ่มเติม
ตัวอย่าง: แฟรกเมนต์
ใช้แฟรกเมนต์แบบสั้น <> เพื่อจัดกลุ่มองค์ประกอบพี่น้อง โดยจะไม่สร้างโหนด DOM เพิ่มเติม
<div id="root"></div>
เคล็ดลับและข้อควรระวัง
เคล็ดลับ:
- ใช้เฉพาะนิพจน์ภายใน { } เท่านั้น ไม่ใช่คำสั่ง
- ใช้ className แทน คลาส
- ควรใช้แฟรกเมนต์แทน div ที่ใช้ห่อหุ้มโดยไม่จำเป็น
กฎนิพจน์ JSX
สรุปทบทวน
สรุปทบทวน: ใส่ค่าแบบไดนามิกไว้ใน { } ใช้แอตทริบิวต์แบบ camelCase และจัดกลุ่มองค์ประกอบพี่น้องด้วยแฟรกเมนต์ เพื่อให้มาร์กอัปดูเป็นระเบียบ
คำถามที่พบบ่อย
บทเรียน “กฎ JSX: นิพจน์ แอตทริบิวต์ และแฟรกเมนต์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “กฎ JSX: นิพจน์ แอตทริบิวต์ และแฟรกเมนต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “กฎ JSX: นิพจน์ แอตทริบิวต์ และแฟรกเมนต์”
ใช้นิพจน์ JSX กับ { } ใช้แอตทริบิวต์แบบ camelCase (className, onClick) และคืนค่าองค์ประกอบหลายรายการผ่านแฟรกเมนต์ คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน
บทเรียน “กฎ JSX: นิพจน์ แอตทริบิวต์ และแฟรกเมนต์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- กฎ JSX: นิพจน์ แอตทริบิวต์ และแฟรกเมนต์
- รายการและคีย์ การเรนเดอร์แบบมีเงื่อนไข
- ตัวเลือกการตกแต่ง: CSS Modules สไตล์แบบอินไลน์ และตัวช่วยคลาส