JSX je rozšíření syntaxe, které vám umožňuje psát HTML-podobný markup uvnitř JavaScriptu. Prohlížeč nerozumí JSX — kompilátor (Babel, SWC, esbuild) jej transformuje na běžné volání funkcí před spuštěním kódu.
el = ;
el = .(
,
{ : },
, name
);
Výsledkem je obyčejný objekt JavaScriptu ("React element"), který popisuje UI — zatím není skutečným uzlem DOM. React čte tento objekt a vytváří 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), protože se mapují na JS, ne na HTML.{ } vkládá výrazy (hodnoty, ternární operátory, .map()), ale ne příkazy jako if.JSX je jen syntaktický cukr pro createElement, takže vše, co můžete dělat v JSX, můžete dělat v běžném JS — jednoduše díky tomu vypadá kód UI jako markup, který produkuje, což je daleko čitelnější než vnořená volání funkcí.