React JSX sieht aus wie HTML – es wird in JavaScript kompiliert.

JSX sieht in einer Komponentendatei wie HTML aus, wird aber zu JavaScript kompiliert – und diese Tatsache erklärt fast alle Syntaxregeln.

In früheren Kapiteln wurde die Markup-Sprache, die eine Komponente zurückgibt – beispielsweise <h1>Hello</h1> – oft als informeller „Markup“ bezeichnet. Der eigentliche Name ist JSX. Das Ziel hier ist einfach: JSX als JavaScript betrachten, das zufällig wie HTML aussieht. Sobald das klar ist, wirkt die meisten der oberflächlichen Syntaxregeln nicht mehr willkürlich.

Warum JSX – Markup und Logik zusammen

Bei klassischer Frontend-Entwicklung wurden die Struktur in HTML-Dateien und das Verhalten in JavaScript-Dateien aufbewahrt. In der Praxis ist es schwierig, das Aussehen eines Buttons von seinem Klick-Handler zu trennen. React bringt beides in einer Einheit unter – der Komponente – daher benötigt es eine Möglichkeit, Markup innerhalb von JavaScript zu schreiben. Diese Syntax ist JSX.

Visuell ähnelt es HTML. Da der Compiler JSX in JavaScript umwandelt, sind die Regeln strenger als bei HTML. Beginnen Sie mit den drei Regeln, die Anfänger am meisten betreffen.

Die drei Regeln von JSX

Regel 1 – ein Wurzelelement

Ein Komponente darf nur einen JSX-Baum zurückgeben. Mehrere Geschwisterelemente müssen unter einem einzigen Elternelement liegen.

// 🔴 two siblings side by side — error
return (
  <h1>Title</h1>
  <p>Content</p>
);

// ✅ wrapped in one
return (
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
);

Falls ein zusätzliches <div> den DOM überladen würde, packen Sie die Geschwisterelemente in ein Fragment (<>...</>) ein.

return (
  <>
    <h1>Title</h1>
    <p>Content</p>
  </>
);

Warum nur ein Wurzelelement? JSX wird zu einem JavaScript-Wert. Eine Funktion kann ohne Verpackung nicht gleichzeitig zwei Werte zurückgeben; derselbe Grundsatz gilt auch für JSX. Die Vorstellung „Das ist JavaScript, nicht HTML“ macht diese Regel verständlich.

Regel 2 – jedes Tag muss geschlossen werden

HTML erlaubt einige Tags wie <img> oder <br> ohne schließendes Tag. In JSX muss jedes Tag geschlossen werden. Tags ohne Kinder verwenden die selbstschließende Form />.

// 🔴 an HTML habit — error
<img src="logo.png">
<input type="text">

// ✅ self-closing
<img src="logo.png" />
<input type="text" />

Regel 3 – camelCase-Attribute

JSX-Attribute werden zu Schlüsseln in einem JavaScript-Objekt, daher folgen die Namen den Konventionen von JavaScript (camelCase), nicht den ursprünglichen HTML-Names. Es treten ständig Kollisionen mit reservierten Wörtern auf:

• class → className (class ist in JavaScript reserviert)
• for → htmlFor (for ist ebenfalls reserviert)

// 🔴 straight from HTML
<div class="card">
  <label for="email">Email</label>
</div>

// ✅ the JSX way
<div className="card">
  <label htmlFor="email">Email</label>
</div>

Dieselbe Zuordnung wandelt onclick in onClick und tabindex in tabIndex um. Es ist nicht notwendig, die vollständige Liste auswendig zu lernen: Die Editor-Vervollständigung sowie TypeScript korrigieren falsche Namen schnell.

Klammern {} – JavaScript innerhalb von JSX

Dort hört JSX auf, ein statisches Template zu sein. Da JSX JavaScript ist, fügen die Klammern {} an dieser Stelle einen JavaScript-Wert ein. HTML kann nur festen Text enthalten; JSX kann Ausdrücke auswerten.

function Greeting() {
  const name = 'Jane';
  return <h1>Hello, {name}!</h1>; // inside the braces is JavaScript
}

{name} wird durch den Wert von name ('Jane') ersetzt. Die Klammern können jeden Ausdruck aufnehmen – Code, der einen Wert ergibt – und nicht nur einfache Variablen.

function Bill() {
  const price = 12000;
  const count = 3;
  return (
    <div>
      <p>Unit price: {price} won</p>
      <p>Quantity: {count}</p>
      <p>Total: {price * count} won</p>          {/* arithmetic works too */}
      <p>{new Date().getFullYear()} receipt</p>  {/* function calls work too */}
    </div>
  );
}

Klammern werden auch in Attributwerten verwendet. In diesem Fall werden die Klammern ohne Anführungszeichen geschrieben.

function Avatar() {
  const user = { name: 'Jane Kim', imageUrl: '/me.png' };
  return <img src={user.imageUrl} alt={user.name} />;
}

• src="..." – Anführungszeichen bedeuten eine literale Zeichenkette.
• src={...} – Klammern bedeuten einen JavaScript-Wert.

Nur Ausdrücke sind zulässig

In den Klammern können Sie einen Ausdruck platzieren, der einen Wert erzeugt. Sätze wie if, for oder const sind nicht zulässig.

// 🔴 an if statement isn't an expression, so this fails
<p>{if (count > 0) 'in stock'}</p>

// ✅ the ternary operator is an expression, so it works
<p>{count > 0 ? 'in stock' : 'out of stock'}</p>

Konditionale Benutzeroberflächen mit Ternären, && und ähnlichen Mustern gehören in ein eigenes Kapitel über die bedingte Darstellung. Vorerst gilt die Regel: Nur code, der einen Wert erzeugt, darf in geschweifte Klammern gesetzt werden.

Doppelte Klammern {{ }} – ein Objekt in den Klammern

Muster wie {{ }}, die häufig in JSX vorkommen, sind keine eigenständige Sprachfunktion. Es handelt sich dabei um ein JavaScript-Objekt { }, das innerhalb der äußeren Klammern eingebettet ist. Inline-Stile sind ein gängiges Beispiel dafür.

// outer { } = "I'm putting JavaScript here"
// inner { } = the object itself
<div style={{ color: 'tomato', fontSize: 20 }}>styled</div>

HTML würde eine Zeichenkette wie style="color: tomato" verwenden. JSX übermittelt hingegen ein Objekt; daher lauten die Eigennamen im CamelCase-Format (fontSize anstelle von font-size) und die Werte sind in der Regel Zeichenketten oder Zahlen. Falls die doppelten Klammern unklar erscheinen, sollten sie zunächst in eine benannte Variable aufgeteilt werden.

const cardStyle = { color: 'tomato', fontSize: 20 };
<div style={cardStyle}>styled</div>   // exactly the same as above

Die äußere Klammer bedeutet „Füge hier einen JavaScript-Wert ein“; das innere Objekt ist dieser Wert.

Wie man Kommentare schreibt

Kommentare innerhalb von JSX verwenden ebenfalls Klammern: ein Blockkommentar in JavaScript, der in {} eingebettet ist.

return (
  <div>
    {/* this is a comment inside JSX */}
    <h1>Title</h1>
  </div>
);

Alles zusammenfassen

Die oben genannten Regeln passen in ein einzelnes Produktkarten-Element.

// src/ProductCard.tsx
function ProductCard() {
  const product = {
    name: 'Mechanical Keyboard',
    price: 89000,
    inStock: true,
    imageUrl: "https://picsum.photos/200/300",
  };

  return (
    <div className="card" style={{ padding: 16 }}>
      {/* image: self-closing + brace attributes */}
      <img src={product.imageUrl} alt={product.name} />

      <h2>{product.name}</h2>
      <p>Price: {product.price.toLocaleString()} won</p>

      {/* show stock with an expression (ternary) — more in the next chapter */}
      <p>{product.inStock ? 'In stock' : 'Out of stock'}</p>
    </div>
  );
}

export default ProductCard;

In diesem Beispiel werden alle drei strukturellen Regeln (eine Wurzel, geschlossene Tags, className) sowie jedes gängige Klammernmuster (Texteinschub, Attribute, Arithmetik, ternäre Logik, Style-Objekte) verwendet.

Zusammenfassung

• JSX ist JavaScript, nicht HTML – deshalb ist die Syntax strenger als bei HTML.
• Drei strukturelle Regeln: Geschwister-Elemente in eine Wurzel einbetten (ein Fragment reicht aus), jedes Tag schließen und Attribute im camelCase-Format verwenden (class→className, for→htmlFor).
• Klammern {} enthalten eine JavaScript-Expression, sei es im Text oder in Attributen.
• Nur werterzeugende Expressions dürfen in Klammern stehen – keine Anweisungen wie if oder for.

{{ }} ist keine neue Syntax; es handelt sich dabei um ein Objekt innerhalb von Klammern. Inline-Stile sind das klassische Beispiel.

Der natürliche nächste Schritt besteht darin, Daten von außen in das Komponentenobjekt einzuspeisen – Props. Das Härtecodieren eines product-Objekts innerhalb der Komponente eignet sich für eine Demo; mit Props kann dieselbe ProductCard-Komponente viele Produkte anzeigen, und genau hier wird die Typisierung mit TypeScript am wichtigsten.

Referenzen

• React-Dokumentation zu Markup mit JSX
• React-Dokumentation zur Einbettung von Ausdrücken