JSX ni nyongeza ya sintaksia inayokuruhusu kuandika alama (markup) zinazofanana na HTML ndani ya JavaScript. Kivinjari hakielewi JSX — kikusanyaji (Babel, SWC, esbuild) hukibadilisha kuwa miito ya kawaida ya function kabla ya msimbo kuendeshwa.
el = ;
el = .(
,
{ : },
, name
);
Matokeo ni kitu cha kawaida cha JavaScript ("React element") ambacho kinaeleza UI — bado si node halisi ya DOM. React husoma kitu hicho ili kujenga 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) kwa sababu zinaunganishwa na JS, si HTML.{ } huingiza expressions (thamani, ternaries, .map()), lakini si statements kama if.JSX ni sukari tu kwa ajili ya createElement, hivyo chochote unachoweza kufanya katika JSX unaweza kufanya katika JS ya kawaida — inafanya tu msimbo wa UI usomeke kama alama (markup) anazozalisha, jambo ambalo linasomeka kwa urahisi zaidi kuliko miito ya function iliyopangwa kwa kuendelezana.