JSX adalah perpanjangan sintaks yang memungkinkan Anda menulis markup seperti HTML di dalam JavaScript. Browser tidak memahami JSX — compiler (Babel, SWC, esbuild) mengubahnya menjadi panggilan fungsi biasa sebelum kode berjalan.
el = ;
el = .(
,
{ : },
, name
);
Hasilnya adalah objek JavaScript biasa (sebuah "React element") yang mendeskripsikan UI — belum merupakan simpul DOM nyata. React membaca objek tersebut untuk membangun 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) karena memetakan ke JS, bukan HTML.{ } menyematkan ekspresi (nilai, ternary, .map()), tetapi bukan pernyataan seperti if.JSX hanya gula untuk createElement, jadi apa pun yang dapat Anda lakukan di JSX dapat Anda lakukan di JS biasa — ini hanya membuat kode UI terlihat seperti markup yang dihasilkannya, yang jauh lebih mudah dibaca daripada panggilan fungsi bersarang.