JSX është një zgjerim sintaksore që ju lejon të shkruani markup të ngjashëm me HTML brenda JavaScript. Shfletuesi nuk kupton JSX — një kompajler (Babel, SWC, esbuild) e transformon atë në thirrje të rregullta të funksioneve përpara se kodi të ekzekutohet.
el = ;
el = .(
,
{ : },
, name
);
Rezultati është një objekt i thjeshtë JavaScript (një "element React") që përshkruan UI-in — nuk është ende një nyje e vërtetë DOM. React e lexon atë objekt për të ndërtuar Virtual DOM-in.
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) sepse hartojnë në JS, jo në HTML.{ } integron shprehje (vlera, ternarë, .map()), por jo deklarata si if.JSX është thjesht sheqer për createElement, kështu që çdo gjë që mund të bëni në JSX mund ta bëni në JS të thjeshtë — ajo thjesht e bën kodin UI të lexueshëm si markup-i që prodhon, i cili është shumë më lexueshëm sesa thirrjet e funksioneve të mbivendosura.