JSX is een syntax-extensie waarmee je HTML-achtige markup in JavaScript kunt schrijven. De browser begrijpt JSX niet — een compiler (Babel, SWC, esbuild) transformeert het in normale functieaanroepen voordat de code wordt uitgevoerd.
el = ;
el = .(
,
{ : },
, name
);
Het resultaat is een gewoon JavaScript-object (een "React element") dat de UI beschrijft — het is nog geen echte DOM-knooppunt. React leest dat object om de Virtual DOM op te bouwen.
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) omdat ze naar JS verwijzen, niet naar HTML.{ } voegt expressies in (waarden, ternaries, .map()), maar geen statements zoals if.JSX is slechts syntactisch suiker voor createElement, dus alles wat je in JSX kunt doen kun je in gewone JS doen — het maakt UI-code alleen leesbaar als de markup die het oplevert, wat veel beter leesbaar is dan geneste functieaanroepen.