JSX: Syntax und Transpilierung
Schreiben Sie JSX, verstehen Sie, wie Babel es in Aufrufe von React.createElement kompiliert, und wenden Sie die Regeln an: ein Root-Element, className und selbstschließende Tags.
JSX: Syntax und Transpilierung ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist JSX?
JSX (JavaScript XML) ist eine Syntaxerweiterung, mit der Sie HTML-ähnliches Markup in JavaScript schreiben können. JSX ist keine Browserfunktion – Babel oder TypeScript wandeln es vor der Ausführung in JavaScript-Funktionsaufrufe um.
JSX-Transpilierung
Babel wandelt JSX in Aufrufe von React.createElement() um. Bei der neuen JSX-Transformation (React 17+) müssen Sie React nicht importieren – Babel fügt die erforderlichen Importe automatisch ein.
// JSX:
const element = <h1 className="title">Hello</h1>;
// Compiled to (new transform):
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello' });JSX-Regeln: Ein Root-Element
JSX-Ausdrücke müssen genau ein Root-Element enthalten. Umschließen Sie Geschwisterelemente mit einem <div> oder verwenden Sie Fragments (<></> oder <React.Fragment>), um keine zusätzlichen DOM-Knoten hinzuzufügen.
// Error: adjacent elements need a wrapper
return (
<h1>Title</h1>
<p>Body</p>
);
// Use Fragment:
return (
<>
<h1>Title</h1>
<p>Body</p>
</>
);className und htmlFor
JSX-Attribute verwenden camelCase. Da class und for reservierte JavaScript-Schlüsselwörter sind, verwenden Sie stattdessen className und htmlFor.
<div className="card active">
<label htmlFor="email">Email</label>
<input id="email" type="email" />
</div>Selbstschließende Tags
In JSX müssen alle Tags korrekt geschlossen werden. Elemente ohne untergeordnete Elemente müssen einen selbstschließenden Schrägstrich verwenden: <img />, <br />, <input />.
Ausdrücke in JSX: {}
Betten Sie jeden JavaScript-Ausdruck mit geschweiften Klammern in JSX ein. Variablen, Funktionsaufrufe, Ternary-Operatoren und arithmetische Ausdrücke funktionieren. Anweisungen wie if und for hingegen nicht.
const name = 'Alice';
const count = 5;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You have {count} messages.</p>
<p>Double: {count * 2}</p>
{isLoggedIn ? <Dashboard /> : <Login />}
</div>
);JSX und Strings
Benachbarter Text und JSX-Ausdrücke werden automatisch verkettet. Sie können Text und Ausdrücke innerhalb eines Elements frei miteinander kombinieren.
<p>Welcome, {user.name}! You joined on {formatDate(user.createdAt)}.</p>Nichts rendern: null und false
Geben Sie null oder false zurück, um nichts zu rendern. Beide sind gültige JSX-Werte, die keine DOM-Ausgabe erzeugen. Das ist für bedingtes Rendern nützlich.
function Banner({ show }: { show: boolean }) {
if (!show) return null; // renders nothing
return <div className="banner">Important notice!</div>;
}Style-Attribut — Objektsyntax
Inline-Styles in JSX verwenden ein Objekt und keinen String. Eigenschaftsnamen werden in camelCase geschrieben.
<div style={{ backgroundColor: '#f7fafc', padding: '16px', borderRadius: '8px' }}>
Styled box
</div>JSX ist JavaScript
Da JSX in JavaScript kompiliert wird, können Sie JSX in Variablen speichern, aus Funktionen zurückgeben, als Props übergeben und in Arrays speichern. React-Elemente sind einfache JavaScript-Objekte.
const elements = ['apple', 'banana', 'cherry'].map(fruit => (
<li key={fruit}>{fruit}</li>
));
return <ul>{elements}</ul>;TypeScript und JSX: .tsx-Dateien
Verwenden Sie die Erweiterung .tsx für TypeScript-Dateien, die JSX enthalten. TypeScript prüft JSX auf Typfehler und erkennt so bereits beim Kompilieren falsche Prop-Typen und fehlende Props.
Schnelltest
Warum verwenden wir className statt class in JSX?
Zusammenfassung: JSX
JSX ist syntaktischer Zucker für React.createElement(). Pro Ausdruck ist ein Root-Element oder Fragment erforderlich. Verwenden Sie className und htmlFor für Attribute, die reservierte Wörter enthalten. Schließen Sie alle Void-Elemente selbst. Betten Sie Ausdrücke mit {} ein. Geben Sie null/false zurück, um nichts zu rendern. Inline-Styles verwenden eine camelCase-Objektsyntax. JSX ist JavaScript – behandeln Sie es als Wert.
Häufig gestellte Fragen
Ist die Lektion „JSX: Syntax und Transpilierung“ kostenlos?
Ja — der vollständige Text von „JSX: Syntax und Transpilierung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „JSX: Syntax und Transpilierung“?
Schreiben Sie JSX, verstehen Sie, wie Babel es in Aufrufe von React.createElement kompiliert, und wenden Sie die Regeln an: ein Root-Element, className und selbstschließende Tags. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „JSX: Syntax und Transpilierung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- JSX: Syntax und Transpilierung
- Funktionale Komponenten und Props
- useState-Hook: State und erneute Renderings
- Listen, Keys und bedingtes Rendern