JSX คือส่วนขยายของไวยากรณ์ที่ให้คุณเขียนมาร์กอัปคล้าย HTML ภายใน JavaScript ได้ เบราว์เซอร์ไม่เข้าใจ JSX โดยตรง — คอมไพเลอร์ (Babel, SWC, esbuild) จะแปลงมันให้เป็นการเรียกฟังก์ชันธรรมดาก่อนที่โค้ดจะทำงาน
el = ;
el = .(
,
{ : },
, name
);
ผลลัพธ์ที่ได้คือออบเจกต์ JavaScript ธรรมดา ("React element") ที่ อธิบาย UI เอาไว้ — มันยังไม่ใช่ DOM node จริง React จะอ่านออบเจกต์นั้นเพื่อสร้าง Virtual DOM
function Card({ user }) {
return (
<> {/* Fragment: one root without an extra <div> */}
<h2 className="name">{user.name}</h2> {/* camelCase: className, not class */}
{user.isAdmin && <Badge />} {/* {} embeds any JS expression */}
</>
);
}
className, onClick) เพราะมันแมปไปยัง JS ไม่ใช่ HTML{ } ฝัง expression ได้ (ค่า, ternary, .map()) แต่ไม่ใช่ statement อย่าง ifJSX เป็นเพียง syntactic sugar ของ createElement ดังนั้นสิ่งใดที่ทำได้ใน JSX ก็ทำได้ด้วย JavaScript ธรรมดา — มันเพียงทำให้โค้ด UI อ่านได้เหมือนมาร์กอัปที่มันสร้างออกมา ซึ่งอ่านง่ายกว่าการเรียกฟังก์ชันซ้อนกันมาก