JSX ist eine Syntaxerweiterung, mit der Sie HTML-ähnliches Markup in JavaScript schreiben können. Der Browser versteht JSX nicht — ein Compiler (Babel, SWC, esbuild) transformiert es in reguläre Funktionsaufrufe vor der Codeausführung.
el = ;
el = .(
,
{ : },
, name
);
Das Ergebnis ist ein einfaches JavaScript-Objekt (ein "React-Element"), das die Benutzeroberfläche beschreibt — es ist noch kein echter DOM-Knoten. React liest dieses Objekt, um das Virtual DOM zu erstellen.
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), weil sie auf JS abgebildet werden, nicht auf HTML.{ } bettet Ausdrücke ein (Werte, ternäre Operatoren, .map()), aber keine Anweisungen wie if.JSX ist nur syntaktischer Zucker für createElement, daher können Sie in JSX alles tun, was Sie in reinem JavaScript tun können — es macht einfach den UI-Code lesbar wie das Markup, das er produziert, was viel lesbarer ist als verschachtelte Funktionsaufrufe.