JSX huwa estensjoni tal-sintassi li tippermettik tikteb markup bhal HTML ġewwa JavaScript. Il-browser ma jifhem JSX — compiler (Babel, SWC, esbuild) jittrasformaha f'sejħat ta' funzjoni normali qabel il-kod jimxi.
el = ;
el = .(
,
{ : },
, name
);
Ir-riżultat huwa oġġett JavaScript sempliċi ("element ta' React") li jiddeskrivi l-UI — għad ma jkunx node DOM reali. React jaqra dak l-oġġett biex jinbena d-DOM Virtwal.
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) għax jmappaw għal JS, mhux HTML.{ } jimbeġġed espressjonijiet (valuri, ternaries, .map()), iżda mhux diċjarazzjonijiet bhal if.JSX huwa biss zokkor għal createElement, għalhekk kwalunkwe ħaġa li tista' tagħmel f'JSX tista' tagħmel f'JS sempliċi — pur u sempliċi jagħmel il-kodiċi tal-UI jleq bhal-markup li jiprodotta, li huwa aktar faċli biex jinqara ħafna aktar minn sejħat ta' funzjoni nested.