JSX: ไวยากรณ์และการแปลงโค้ด
เขียน JSX ทำความเข้าใจว่า Babel คอมไพล์เป็นการเรียก React.createElement อย่างไร และใช้กฎต่าง ๆ ได้แก่ ต้องมีองค์ประกอบรากหนึ่งรายการ ใช้ className และแท็กปิดตัวเอง
JSX: ไวยากรณ์และการแปลงโค้ด เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
JSX คืออะไร
JSX (JavaScript XML) คือส่วนขยายไวยากรณ์ที่ทำให้คุณเขียนมาร์กอัปคล้าย HTML ภายใน JavaScript ได้ JSX ไม่ใช่คุณสมบัติของเบราว์เซอร์ แต่ Babel หรือ TypeScript จะแปลง JSX เป็นการเรียกฟังก์ชัน JavaScript ก่อนนำไปทำงาน
การแปลง JSX
Babel จะแปลง JSX เป็นการเรียก React.createElement() ด้วยการแปลง JSX รูปแบบใหม่ (React 17 ขึ้นไป) คุณไม่จำเป็นต้องนำเข้า React เพราะ Babel จะเติมการนำเข้าที่จำเป็นให้อัตโนมัติ
// JSX:
const element = <h1 className="title">Hello</h1>;
// Compiled to (new transform):
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello' });กฎของ JSX: องค์ประกอบรากหนึ่งรายการ
นิพจน์ JSX ต้องมีองค์ประกอบรากเพียงหนึ่งรายการพอดี ให้ห่อองค์ประกอบพี่น้องด้วย <div> หรือใช้ Fragment (<></> หรือ <React.Fragment>) เพื่อหลีกเลี่ยงการเพิ่มโหนด DOM ที่ไม่จำเป็น
// Error: adjacent elements need a wrapper
return (
<h1>Title</h1>
<p>Body</p>
);
// Use Fragment:
return (
<>
<h1>Title</h1>
<p>Body</p>
</>
);className และ htmlFor
แอตทริบิวต์ JSX ใช้รูปแบบ camelCase เนื่องจาก class และ for เป็นคำสงวนของ JavaScript จึงต้องใช้ className และ htmlFor แทน
<div className="card active">
<label htmlFor="email">Email</label>
<input id="email" type="email" />
</div>แท็กแบบปิดตัวเอง
ใน JSX แท็กทั้งหมดต้องปิดอย่างถูกต้อง องค์ประกอบที่ไม่มีเนื้อหาย่อยต้องใช้เครื่องหมายทับเพื่อปิดตัวเอง ได้แก่ <img />, <br /> และ <input />
นิพจน์ใน JSX: {}
ฝังนิพจน์ JavaScript ใด ๆ ใน JSX ได้ด้วยวงเล็บปีกกา ตัวแปร การเรียกฟังก์ชัน นิพจน์สามส่วน และการคำนวณล้วนใช้งานได้ แต่คำสั่งอย่าง if และ for ใช้ไม่ได้
const name = 'Alice';
const count = 5;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You have {count} messages.</p>
<p>Double: {count * 2}</p>
{isLoggedIn ? <Dashboard /> : <Login />}
</div>
);JSX และสตริง
ข้อความที่อยู่ติดกันและนิพจน์ JSX จะถูกรวมต่อกันโดยอัตโนมัติ คุณสามารถผสมข้อความกับนิพจน์ได้อย่างอิสระภายในองค์ประกอบ
<p>Welcome, {user.name}! You joined on {formatDate(user.createdAt)}.</p>การไม่แสดงผล: null และ false
คืนค่า null หรือ false เพื่อไม่แสดงผลสิ่งใด ทั้งสองค่าเป็นค่าที่ใช้ได้ใน JSX และจะไม่สร้างผลลัพธ์ใน DOM เหมาะสำหรับการแสดงผลตามเงื่อนไข
function Banner({ show }: { show: boolean }) {
if (!show) return null; // renders nothing
return <div className="banner">Important notice!</div>;
}แอตทริบิวต์ style — รูปแบบอ็อบเจ็กต์
สไตล์แบบอินไลน์ใน JSX ใช้อ็อบเจ็กต์ ไม่ใช่สตริง ชื่อคุณสมบัติใช้รูปแบบ camelCase
<div style={{ backgroundColor: '#f7fafc', padding: '16px', borderRadius: '8px' }}>
Styled box
</div>JSX คือ JavaScript
เนื่องจาก JSX ถูกคอมไพล์เป็น JavaScript คุณจึงสามารถใส่ JSX ในตัวแปร คืนค่าจากฟังก์ชัน ส่งเป็นพร็อพส์ และเก็บไว้ในอาร์เรย์ได้ องค์ประกอบ React เป็นอ็อบเจ็กต์ JavaScript ธรรมดา
const elements = ['apple', 'banana', 'cherry'].map(fruit => (
<li key={fruit}>{fruit}</li>
));
return <ul>{elements}</ul>;TypeScript และ JSX: ไฟล์ .tsx
ใช้นามสกุล .tsx สำหรับไฟล์ TypeScript ที่มี JSX TypeScript จะตรวจสอบชนิดข้อมูลของ JSX และตรวจจับข้อผิดพลาดของชนิดข้อมูลพร็อพส์รวมถึงพร็อพส์ที่ขาดหายไปขณะคอมไพล์
ตรวจสอบอย่างรวดเร็ว
เหตุใดเราจึงใช้ className แทน class ใน JSX
สรุป: JSX
JSX เป็นไวยากรณ์ย่อสำหรับ React.createElement() แต่ละนิพจน์ต้องมีองค์ประกอบรากหรือ Fragment หนึ่งรายการ ใช้ className และ htmlFor สำหรับแอตทริบิวต์ที่เป็นคำสงวน แท็กองค์ประกอบว่างทั้งหมดต้องปิดตัวเอง ฝังนิพจน์ด้วย {} คืนค่า null หรือ false เพื่อไม่แสดงผล สไตล์แบบอินไลน์ใช้รูปแบบอ็อบเจ็กต์ camelCase JSX คือ JavaScript จึงควรปฏิบัติต่อ JSX เสมือนค่าอย่างหนึ่ง
คำถามที่พบบ่อย
บทเรียน “JSX: ไวยากรณ์และการแปลงโค้ด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “JSX: ไวยากรณ์และการแปลงโค้ด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “JSX: ไวยากรณ์และการแปลงโค้ด”
เขียน JSX ทำความเข้าใจว่า Babel คอมไพล์เป็นการเรียก React.createElement อย่างไร และใช้กฎต่าง ๆ ได้แก่ ต้องมีองค์ประกอบรากหนึ่งรายการ ใช้ className และแท็กปิดตัวเอง คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “JSX: ไวยากรณ์และการแปลงโค้ด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- JSX: ไวยากรณ์และการแปลงโค้ด
- คอมโพเนนต์แบบฟังก์ชันและ Props
- Hook useState: สถานะและการเรนเดอร์ซ้ำ
- รายการ คีย์ และการเรนเดอร์ตามเงื่อนไข