JSX er en syntaksudvidelse, der lader dig skrive HTML-lignende markup inde i JavaScript. Browseren forstår ikke JSX — en compiler (Babel, SWC, esbuild) transformerer det til almindelige funktionskald før koden køres.
el = ;
el = .(
,
{ : },
, name
);
Resultatet er et almindeligt JavaScript-objekt (et "React-element"), der beskriver UI'en — det er ikke en rigtig DOM-node endnu. React læser det objekt for at bygge 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), fordi de kortlægges til JS, ikke HTML.{ } integrerer udtryk (værdier, ternære udtryk, .map()), men ikke sætninger som if.JSX er bare syntaksukker for createElement, så alt det du kan gøre i JSX kan du gøre i almindelig JS — det gør simpelthen UI-koden læsbar som det markup den producerer, hvilket er langt mere læseligt end indlejrede funktionskald.