JSX yra sintaksės plėtinys, leidžiantis rašyti HTML panašią žymę JavaScript viduje. Naršyklė nesupranta JSX — kompiliatorius (Babel, SWC, esbuild) jį transformuoja į įprastos funkcijos iškvietimus prieš paleidžiant kodą.
el = ;
el = .(
,
{ : },
, name
);
Rezultatas yra paprastas JavaScript objektas ("React elementas"), kuris aprašo UI — tai dar ne tikras DOM mazgas. React skaito tą objektą, norėdamas sukurti 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), nes jie susieti su JS, o ne HTML.{ } įterpia išraiškas (reikšmes, ternarus, .map()), bet ne teiginius, kaip if.JSX yra tik cukraus sintaksė createElement, todėl bet ką, ką galite daryti JSX, galite daryti paprastame JS — tai tiesiog daro UI kodą skaitytinu žymei, kurią jis sukuria, o tai yra daug labiau skaitytina nei nuodugnūs funkcijų iškvietimai.