JSX este o extensie de sintaxă care îți permite să scrii markup asemănător HTML-ului în interiorul JavaScript-ului. Browserul nu înțelege JSX — un compilator (Babel, SWC, esbuild) îl transformă în apeluri de funcții obișnuite înainte ca codul să se execute.
el = ;
el = .(
,
{ : },
, name
);
Rezultatul este un obiect JavaScript simplu (un "element React") care descrie interfața - nu este încă un nod DOM real. React citește acel obiect pentru a construi Virtual DOM-ul.
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) pentru că se mapează la JS, nu la HTML.{ } încorporează expresii (valori, ternare, .map()), dar nu instrucțiuni precum if.JSX este doar zahăr sintactic pentru createElement, deci orice poți face în JSX poți face și în JS simplu — doar că face codul UI să citească ca markup-ul pe care îl produce, ceea ce este mult mai ușor de citit decât apelurile de funcții imbricate.