JSX-Regeln

JSX sieht aus wie HTML, ist aber strenger und hat ein paar andere Regeln. Hier sind die vier wichtigsten.

Ein Wurzelelement

Eine Komponente kann nur ein einziges Element zurückgeben. In HTML ist das kein Problem — du kannst beliebig viele Geschwister-Elemente nebeneinander schreiben:

<!-- HTML: Funktioniert -->
<img src="dan.jpg" alt="Dan Abramov" />
<p>Fachrichtung: Informatik</p>

In JSX führt das zu einem Fehler:

// Fehler! Zwei Wurzelelemente
function StudentCard() {
  return (
    <img src="dan.jpg" alt="Dan Abramov" />
    <p>Fachrichtung: Informatik</p>
  );
}

Du musst alles in ein umschließendes Element packen, zum Beispiel ein <div>:

function StudentCard() {
  return (
    <div>
      <img src="dan.jpg" alt="Dan Abramov" />
      <p>Fachrichtung: Informatik</p>
    </div>
  );
}

Wenn du kein zusätzliches <div> im DOM haben willst, kannst du ein Fragment verwenden (<>...</>):

function StudentCard() {
  return (
    <>
      <img src="dan.jpg" alt="Dan Abramov" />
      <p>Fachrichtung: Informatik</p>
    </>
  );
}

Fragmente verschwinden im fertigen HTML — sie gruppieren nur die Elemente für React, ohne ein echtes DOM-Element zu erzeugen.

Alle Tags schließen

JSX ist näher an XML als an HTML. Jedes Tag muss explizit geschlossen werden — auch selbstschließende Tags, die in HTML kein / brauchen:

HTML	JSX
`<img>`	`<img />`
`<br>`	`<br />`
`<input>`	`<input />`
`<hr>`	`<hr />`

In HTML funktioniert ein Bild ohne schließendes /:

<!-- HTML: Funktioniert -->
<img src="dan.jpg" alt="Dan Abramov">

In JSX muss das Tag geschlossen werden:

// JSX: Slash am Ende ist Pflicht
<img src="dan.jpg" alt="Dan Abramov" />

Das gilt auch für Tags mit Inhalt — sie brauchen immer ein schließendes Tag:

<p>Fachrichtung: Informatik</p>   {/* Richtig */}
<p>Fachrichtung: Informatik       {/* Fehler! */}

camelCase statt HTML-Attribute

JSX-Attribute setzen nicht HTML-Attribute, sondern DOM-Eigenschaften (Properties). Das ist ein wichtiger Unterschied: Wenn der Browser HTML parst, erstellt er daraus DOM-Objekte — und deren Eigenschaftsnamen folgen der camelCase-Konvention aus JavaScript. JSX setzt diese Properties direkt.

Ein gutes Beispiel ist for vs. htmlFor: Das HTML-Attribut for auf einem <label> heißt als DOM-Property htmlFor — und genau diesen Namen verwendest du in JSX.

HTML-Attribut	DOM-Property / JSX
`class`	`className`
`for`	`htmlFor`
`tabindex`	`tabIndex`

So sieht eine StudentCard mit JSX-Attributen aus:

function StudentCard() {
  return (
    <div className="card">
      <label htmlFor="student-name">Name</label>
      <img src="dan.jpg" alt="Dan Abramov" />
      <p>Fachrichtung: Informatik</p>
    </div>
  );
}

Kommentare

HTML-Kommentare () funktionieren in JSX nicht. Stattdessen verwendest du geschweifte Klammern mit der JavaScript-Kommentarsyntax:

function StudentCard() {
  return (
    <div className="card">
      {/* Profilbild des Studenten */}
      <img src="dan.jpg" alt="Dan Abramov" />
      {/* TODO: Fachrichtung dynamisch machen */}
      <p>Fachrichtung: Informatik</p>
    </div>
  );
}

Die geschweiften Klammern öffnen ein JavaScript-Fenster innerhalb von JSX — darin kannst du /* */ für Kommentare verwenden. Was geschweifte Klammern in JSX alles können, lernst du in einem späteren Kapitel.