JSX egy szintaxis-kiterjesztés, amely lehetővé teszi, hogy HTML-szerű jelölést írjon a JavaScripten belül. A böngésző nem érti a JSX-et — egy fordító (Babel, SWC, esbuild) rendszeres függvényhívásokká alakítja a kód futtatása előtt.
el = ;
el = .(
,
{ : },
, name
);
Az eredmény egy egyszerű JavaScript objektum (egy "React elem"), amely leírja a felhasználói felületet — még nem valódi DOM csomópont. A React beolvassa ezt az objektumot a Virtual DOM felépítéséhez.
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) használatát alkalmazzák, mivel JS-re térképeznek, nem HTML-re.{ } kifejezéseket ágyaz be (értékeket, ternary-kat, .map()), de nem utasításokat, például if.A JSX csak cukorsöpörgetés a createElement-hez, tehát bármit, amit JSX-ben megtehetsz, megtehetsz egyszerű JS-ben is — egyszerűen az felhasználói felület kódját úgy teszi olvashatóvá, mint a jelölést, amelyet előállít, amely sokkal olvashatóbb, mint a beágyazott függvényhívások.