JSX er en syntaksutvidelse som lar deg skrive HTML-lignende markup inne i JavaScript. Nettleseren forstår ikke JSX — en kompilator (Babel, SWC, esbuild) transformerer det til vanlige funksjonskall før koden kjøres.
el = ;
el = .(
,
{ : },
, name
);
Resultatet er et vanlig JavaScript-objekt (et "React-element") som beskriver brukergrensesnittet — det er ikke en faktisk DOM-node ennå. React leser det objektet for å bygge 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) fordi de tilsvarer JS, ikke HTML.{ } innebygger uttrykk (verdier, ternærer, .map()), men ikke setninger som if.JSX er bare sukker for createElement, så hva som helst du kan gjøre i JSX kan du gjøre i vanlig JS — det gjør ganske enkelt at UI-kode leses som markupen den produserer, noe som er langt mer lesbart enn nestede funksjonskall.