JSX je razširitev sintakse, ki vam omogoča pisanje HTML-podobnih oznak znotraj JavaScripta. Brskalnik ne razume JSX — prevajalnik (Babel, SWC, esbuild) ga pretvori v navadne klice funkcij pred izvajanjem kode.
el = ;
el = .(
,
{ : },
, name
);
Rezultat je preprost JavaScript objekt ("React element"), ki opisuje UI — še ni pravi DOM vozlišče. React prebere ta objekt, da sestavi 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), ker se preslikavajo na JS, ne na HTML.{ } vgrajuje izraze (vrednosti, trojne operatorje, .map()), vendar ne stavke kot if.JSX je zgolj "sladkor" za createElement, zato je vse, kar lahko naredite v JSX, mogoče narediti v navadnem JS — to preprosto naredi UI kodo bolj berljivo, saj je videti kot označevanje, ki ga proizvaja, kar je precej bolj razumljivo kot ugnjezdeni klici funkcij.