JSX ist kein HTML innerhalb von JavaScript – es handelt sich um einen Kompilierungsschritt.

Frage 1

Das Eröffnen eines neuen React-Projekts und das Anschauen von App.jsx führt oft zu derselben Überraschung: Die Datei ist in JavaScript geschrieben, enthält aber Markup, das genauso aussieht wie HTML. Ein erster Blick auf ein Komponenten, das einen <h1> zurückgibt, weckt die Frage, ob der Sprachlaufzeitmechanismus irgendwie gelernt hat, Tags zu parsen.

Bevor Sie weiterlesen, entscheiden Sie, ob reines JavaScript dies versteht:

const heading = <h1>Hello World</h1>;

• A) Ja
• B) Nein

Die richtige Antwort ist B) Nein. Ein herkömmlicher JavaScript-Engine verfügt über keine Grammatik für <h1>. Wenn man dieselbe Zeile in eine .js-Datei ohne Transformierungsstufe einfügt, meldet der Parser einen Syntaxfehler.

React sendet JSX niemals direkt an den Browser. In einem Build-Schritt wird das Markup zunächst in gewöhnliche Funktionsaufrufe umgewandelt. Konzeptionell sieht der Ablauf so aus:

You write JSX
      │
      ▼
Compiler (Babel / Vite)
      │
      ▼
JavaScript
      │
      ▼
Browser

Was beim Browser ankommt, ist nur JavaScript. Die von Ihnen eingegebenen Tags erscheinen niemals in der Netzwerkantwort als JSX.

Stellen Sie es sich wie Google Translate vor

Stellen Sie sich vor, Sie schreiben einen Brief auf Französisch für einen Freund, der nur Englisch liest. Der Freund versteht plötzlich kein Französisch – ein Übersetzer steht dazwischen. JSX funktioniert genauso. Sie erstellen die syntaxähnliche Struktur wie im HTML, der Compiler (Babel, SWC oder die Transformation in Vite) wandelt sie in JavaScript um, und erst danach führt der Browser sie aus.

Was ist dann genau JSX?

Anfänger fassen JSX oft als „HTML innerhalb von JavaScript“ zusammen. Dieser Kurzschluss ist falsch. JSX erscheint wie HTML, aber es ist kein HTML. Eine präzisere Definition lautet: JSX ist eine Erweiterung der JavaScript-Syntax, die es ermöglicht, Benutzeroberflächen mit einer HTML-ähnlichen Struktur zu beschreiben. Das entscheidende Wort ist HTML-ähnlich – nicht HTML selbst. Die Attributnamen unterscheiden sich (className anstelle von class), und die umgebenden Ausdrücke gehören zum Wertesystem von JavaScript statt zu einer separaten Markup-Sprache.

Warum wurde JSX erstellt?

Ohne JSX würde derselbe Überschriftstext:

<h1>Hello React</h1>

durch verschachtelte Factory-Aufrufe dargestellt werden:

React.createElement(
  "h1",
  null,
  "Hello React"
);

Eine vollständige Seite, die auf diese Weise geschrieben wird, ist schwer zu überblicken. JSX existiert, damit die Struktur der Benutzeroberfläche lesbar bleibt, während der Compiler im Hintergrund die React.createElement- (oder äquivalenten) Aufrufe erzeugt.

Frage 2

Was wird hier angezeigt?

const name = "Ananya";

function App() {
  return (
    <h1>Hello {name}</h1>
  );
}

• A) Hallo {name}
• B) Hallo Ananya
• C) Syntaxfehler

Die Antwort ist B) Hallo Ananya. Klammern weisen JSX an, den Markup-Modus zu unterbrechen und eine JavaScript-Expression auszuwerten. Der Wert von name wird in die Überschrift eingefügt, sodass die Benutzeroberfläche den String anzeigt und nicht die Klammer-Syntax.

Klammern haben nur eine Aufgabe

Jedes Mal, wenn JSX {…} sieht, bewertet es die darin stehende Expression und fügt das Ergebnis ein. Das ist der gesamte Ablauf: JavaScript ausführen und den Wert einfügen. Es gibt keinen zweiten Modus für Anweisungen oder Blöcke mit Nebeneffekten.

Frage 3

Welche Inhalte in Klammern sind in JSX zulässig?

• A) Eine Variablenreferenz wie {name}
• B) Eine arithmetische Expression wie {10 + 20}

C) ein blockbasiertes if, das innerhalb der Klammern geschrieben wird

D) eine ternäre Bedingung, die zwischen "Adult" und "Minor" basierend auf age wählt

A, B und D funktionieren. C nicht. JSX akzeptiert nur Ausdrücke, die zu einem Wert ausgewertet werden können. Ein einfaches if ist eine Anweisung und liefert nichts, was im Baum platziert werden könnte; eine ternäre Bedingung gibt einen Wert zurück, weshalb die Altersprüfung in D in Ordnung ist, während C abgelehnt wird.

Fazit

JSX kann vom ersten Tag an wie Magie wirken: Es sieht so aus, als wären HTML und JavaScript zu einer einzigen Sprache verschmolzen. Die Mechanik ist einfacher – JSX ist eine Art „Zuckerschicht“ für die Programmierung. Bevor die Anwendung im Browser ausgeführt wird, übersetzt ein Compiler sie in gewöhnliches JavaScript. Sobald dieser Ablauf klar ist, wirkt die Syntax mit Markup in JS nicht mehr verwirrend und wird zu einer verständlichen Art, UI-Strukturen zu beschreiben.