JSX

Jede Webseite besteht aus zwei Zutaten. Die eine beschreibt, was zu sehen ist: Überschriften, Absätze, Knöpfe, Bilder. Die andere beschreibt, was passiert, wenn jemand klickt oder tippt. Diese beiden Zutaten wurden früher in getrennten Dateien geschrieben. JSX führt sie zusammen: Man notiert den sichtbaren Aufbau mitten im Programmtext, in einer Schreibweise mit spitzen Klammern wie <button>Kaufen</button>. Vor dem Ausführen wandelt ein Hilfsprogramm diese Schreibweise automatisch in gewöhnlichen Programmcode um, den jeder Browser versteht.

Warum Oberfläche und Logik zusammengehören

Ein Knopf auf einer Webseite ist selten nur ein Knopf. Er hat eine Beschriftung, er kann grau und nicht anklickbar sein, er zeigt manchmal einen Ladekreis. All das hängt vom Zustand des Programms ab. Trennt man Aussehen und Logik in zwei Dateien, muss man beim Lesen ständig hin und her springen. JSX legt beides nebeneinander.

Der zweite Vorteil ist die Wiederverwendung. Man kann eine Produktkachel einmal beschreiben und sie danach hundertmal einsetzen, jedes Mal mit anderen Daten. Solche wiederverwendbaren Bausteine heißen Komponenten. Eine Komponente ist im Kern eine ganz normale Funktion, die JSX zurückgibt. Damit lässt sich eine große Oberfläche aus kleinen, überschaubaren Teilen zusammensetzen.

Der Ansatz war anfangs umstritten. Viele Entwickler hielten die Vermischung für einen Rückschritt. Heute ist JSX die Standardschreibweise in den verbreitetsten Werkzeugen für Weboberflächen. Wer Stellenanzeigen für Webentwicklung liest, stößt fast zwangsläufig darauf.

Vom spitzen Klammer-Text zum lauffähigen Code

Browser verstehen JSX nicht. Deshalb läuft vor der Veröffentlichung ein Übersetzungsschritt, den Werkzeuge wie Babel oder Vite übernehmen. Aus <button>Kaufen</button> wird dabei ein normaler Funktionsaufruf, etwa createElement('button', null, 'Kaufen'). JSX ist also reine Bequemlichkeit für Menschen. Technisch entsteht am Ende nichts, was man nicht auch von Hand tippen könnte — es wäre nur viel unleserlicher.

Innerhalb von JSX kann man jederzeit auf Programmcode zurückgreifen. Alles in geschweiften Klammern wird ausgerechnet und dann eingesetzt. So ergibt <h1>Hallo </h1> je nach Wert der Variablen eine andere Überschrift. Auch Listen entstehen so: Aus einem Array von Produkten macht eine Schleife automatisch zwanzig Kacheln.

Ein typischer Stolperstein sind die kleinen Abweichungen von HTML. Weil class in JavaScript bereits eine andere Bedeutung hat, schreibt man className. Jedes Element muss ordentlich geschlossen werden, auch ein Bild: <img /> statt <img>. Solche Regeln wirken schikanös, verhindern aber, dass der Übersetzer raten muss.

JSX in Projekten, Stellenanzeigen und Firmenmeldungen

Am häufigsten begegnet JSX zusammen mit React, einer von Meta entwickelten Bibliothek für Weboberflächen. Große Teile von Facebook, Instagram, Netflix und unzähligen Onlineshops sind so gebaut. Auch Next.js, ein weit verbreitetes Aufbauwerkzeug für Webseiten, setzt darauf. Wer eine Datei mit der Endung .jsx oder .tsx sieht, hat es mit dieser Schreibweise zu tun.

In Nachrichten taucht JSX selten direkt auf, wohl aber in Stellenausschreibungen und technischen Diskussionen. Streit gibt es regelmäßig um die Frage, ob React mit JSX oder Konkurrenten wie Vue und Svelte der bessere Weg sind. Diese Alternativen nutzen eigene Schreibweisen, folgen aber demselben Grundgedanken aus wiederverwendbaren Bausteinen.

Ein verbreiteter Irrtum ist, JSX sei eine eigene Programmiersprache. Das stimmt nicht. Es ist eine Zusatzschreibweise für JavaScript, vergleichbar mit einer Kurzschrift. Man lernt sie in wenigen Stunden. Der eigentliche Aufwand steckt darin, das Werkzeug dahinter zu verstehen — also etwa React selbst.