JSX är en syntaxutökning som låter dig skriva HTML-liknande markup inuti JavaScript. Webbläsaren förstår inte JSX — en kompilator (Babel, SWC, esbuild) omvandlar det till vanliga funktionsanrop innan koden körs.
el = ;
el = .(
,
{ : },
, name
);
Resultatet är ett vanligt JavaScript-objekt (ett "React-element") som beskriver användargränssnittet — det är inte en verklig DOM-nod ännu. React läser det objektet för att bygga 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) eftersom de mappar till JS, inte HTML.{ } bäddar in uttryck (värden, ternärer, .map()), men inte satser som if.JSX är bara syntaktisk socker för createElement, så allt du kan göra i JSX kan du göra i vanlig JS — det gör helt enkelt UI-koden läsbar som den markup den producerar, vilket är mycket mer läsligt än kapslade funktionsanrop.