JSX yaiku kembangan sintaks sing ngidini sampeyan nulis markup kaya HTML ing jerone JavaScript. Browser ora ngerti JSX — sawijining compiler (Babel, SWC, esbuild) ngowahi dadi pemanggilan fungsi biasa sadurunge kode mlaku.
el = ;
el = .(
,
{ : },
, name
);
Hasilé yaiku obyek JavaScript biasa ("React element") sing nerangake UI — durung dadi DOM node nyata. React maca obyek kasebut kanggo mbangun 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) amarga pemetaan menyang JS, ora HTML.{ } nglebokake ekspresi (nilai, ternaries, .map()), nanging ora pernyataan kaya if.JSX mung gula kanggo createElement, mula apa-apa sing bisa sampeyan gawe ing JSX bisa gawe ing JS biasa — iku mung nggawak kode UI kebaca kaya markup sing dihasilake, kang luwih keterbacaan tinimbang pemanggilan fungsi bersarang.