JSX ialah sambungan sintaks yang memungkinkan anda menulis markup seperti HTML di dalam JavaScript. Pelayar tidak memahami JSX — penyusun (Babel, SWC, esbuild) mengubahnya menjadi panggilan fungsi biasa sebelum kod berjalan.
el = ;
el = .(
,
{ : },
, name
);
Hasilnya ialah objek JavaScript biasa ("elemen React") yang menjelaskan UI — ia bukan nod DOM sebenar lagi. React membaca objek itu untuk membina DOM Virtual.
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) kerana ia memetakan ke JS, bukan HTML.{ } menyisipkan ungkapan (nilai, ternari, .map()), tetapi bukan pernyataan seperti if.JSX hanyalah gula untuk createElement, jadi apa pun yang anda boleh lakukan dalam JSX anda boleh lakukan dalam JS biasa — ia hanya membuat kod UI dibaca seperti markup yang dihasilkannya, yang jauh lebih mudah dibaca daripada panggilan fungsi bersarang.