JSX ist JavaScript

JSX sieht aus wie HTML, aber Browser verstehen es nicht. Bevor dein Code läuft, verwandelt ein Werkzeug jedes Stück JSX in einen gewöhnlichen Funktionsaufruf. (In einem Projekt auf deinem Computer ist dieses Werkzeug Vite; hier übernimmt es die Seite der Übung.) Diese Zeile:

const heading = <h1>Sommerklang</h1>;

wird, kurz gesagt, zu dieser:

const heading = jsx("h1", { children: "Sommerklang" });

Die Funktion jsx() kommt von React. Sie erzeugt ein Objekt, das das Element beschreibt: sein Tag und das, was darin steht, seine Kinder (children). React baut aus diesen Objekten dann die echten Elemente auf der Seite. Du schreibst jsx() nie selbst, aber wenn du weißt, dass es existiert, verstehst du die Regeln von JSX, um die es in dieser Lektion geht.

Die erste: Eine Komponente gibt ein Element zurück. Eine Funktion gibt einen Wert zurück, und zwei Elemente nebeneinander wären zwei Aufrufe nebeneinander, jsx("h1", …) jsx("ul", …), und das ist kein JavaScript. Deshalb steht in der roten Meldung unter der Vorschau JSX expressions must have one parent element. Setze sie in ein Element, etwa main, und sie sind ein Wert.

Manchmal willst du kein zusätzliches Element auf der Seite. Eine Komponente, die mehrere Listeneinträge zurückgibt, kann sie nicht in ein div setzen, denn in einem ul sollen nur li-Elemente stehen. Dafür hat JSX das Fragment, ein leeres Tag <>…</>. Es hält die Elemente im Code zusammen, fügt der Seite aber nichts hinzu:

function SamstagBands() {
    return (
        <>
            <li>Eulenchor, 16:00</li>
            <li>Blechroboter, 21:00</li>
        </>
    );
}

<SamstagBands /> in einem ul setzt zwei li-Elemente direkt in die Liste.