Eine Komponente ist eine Funktion

App ist eine Komponente: eine JavaScript-Funktion, die zurückgibt, was auf der Seite stehen soll. React ruft die Funktion auf und setzt das Ergebnis in #root ein. Das nennt man Rendern: React rendert die Komponente. Der Name einer Komponente beginnt mit einem Großbuchstaben, so wie App.

Die Funktion gibt JSX zurück. Das sieht aus wie HTML, ist aber Teil des JavaScript-Codes. Es stehen keine Anführungszeichen darum, denn es ist kein Text.

Eine Seite besteht aus mehr als einer Überschrift, deshalb darf JSX mehrere Zeilen lang sein. Setze es dann in Klammern hinter return und alles zusammen in ein einziges Element, zum Beispiel main:

export default function App() {
    return (
        <main>
            <h1>Sommerklang</h1>
            <p>Zwei Tage Musik im Wald.</p>
        </main>
    );
}

Darin schreibst du die Tags wie in HTML: Elemente in Elementen, jede Ebene um vier weitere Leerzeichen eingerückt.

Typische Fehler:

• Eine vergessene Klammer: return steht allein in seiner Zeile, das JSX darunter. JavaScript beendet return am Zeilenende, die Funktion gibt also nichts zurück, und die Seite bleibt leer, ohne Fehlermeldung.
• Zwei Elemente nebeneinander ohne etwas drumherum, etwa <h1> und <p> direkt nach return (. Die App läuft dann nicht, und unter der Vorschau steht eine rote Meldung: JSX expressions must have one parent element. Warum das so ist, erfährst du in der nächsten Lektion, JSX.