JSX (JavaScript XML) ist eine Syntaxerweiterung für JavaScript, die es erlaubt, HTML-artigen Code direkt im JavaScript-Quelltext zu schreiben. Bekannt wurde JSX durch das Framework React — auch wenn React inzwischen nicht mehr zwingend JSX benötigt, ist es dort der Standardweg, um Oberflächen zu beschreiben.
Wie JSX aussieht
const begruessung = <h1>Hallo, Welt!</h1>;Statt document.createElement und langer DOM-Befehle schreibst du die Struktur direkt — sie sieht aus wie HTML, ist aber Ausdruck von JavaScript. JSX lässt sich in geschweiften Klammern mit Variablen und Ausdrücken kombinieren:
const name = "Michael";
const begruessung = <h1>Hallo, {name}!</h1>;Warum JSX nützlich ist
- Die Oberfläche ist im Code sichtbar — du musst nicht zwischen HTML- und JavaScript-Datei wechseln.
- Fehler in der Struktur fallen beim Kompilieren auf, nicht erst im Browser.
- Es funktioniert mit modernen Werkzeugen und dem DOM-Ansatz von React.
Wie JSX verarbeitet wird
Browser verstehen JSX nicht direkt. Ein Compiler (zum Beispiel Babel) wandelt JSX vor dem Ausliefern in normale JavaScript-Funktionsaufrufe um. Dadurch bleibt die Ausgabe schlank und läuft in jedem modernen Browser — ganz ohne zusätzliche Laufzeit. Für TypeScript-Projekte gibt es eigene JSX-Einstellungen, die die Typprüfung auch auf die Templates ausdehnen.
Regeln im Überblick
- Ein Ausdruck braucht genau ein Wurzelelement — mehrere Geschwister müssen in einen Container.
- Attribute heißen in JSX oft anders als in HTML (zum Beispiel
classNamestattclass). - Alle Tags müssen geschlossen werden, auch leere wie
<br />.
Verwandte Grundlagen: JavaScript-Befehle, TypeScript-Befehle, HTML, DOM, Framework, Frontend.