Deine eigene Komponente

Eine Seite aus einer einzigen großen Komponente wäre bald unübersichtlich. Deshalb teilst du sie in kleinere Komponenten auf, jede mit eigenem Namen und eigener Aufgabe. Hier ist eine zweite Komponente, Willkommen, in derselben Datei wie App:

function Willkommen() {
    return <p>Willkommen beim Festival!</p>;
}

export default function App() {
    return (
        <main>
            <h1>Sommerklang</h1>
            <Willkommen />
            <Willkommen />
        </main>
    );
}

App verwendet Willkommen wie ein HTML-Tag: <Willkommen />. Der Schrägstrich vor > schließt das Tag sofort, weil nichts darin steht. React ruft die Funktion Willkommen auf und setzt ihr Ergebnis an die Stelle des Tags, so oft du es verwendest. Die Seite hat dann dieses HTML:

<main>
    <h1>Sommerklang</h1>
    <p>Willkommen beim Festival!</p>
    <p>Willkommen beim Festival!</p>
</main>

Ein <Willkommen> steht nicht auf der Seite, nur das, was die Funktion zurückgegeben hat. Eine Komponente ist dein eigener Baustein der Seite, den du überall verwenden kannst, wo du ihn brauchst. In der Lektion Props zeigt eine Komponente verschiedene Bands an, jede mit ihrem eigenen Namen.

Der Name muss mit einem Großbuchstaben beginnen: So unterscheidet React deine Komponenten von HTML-Tags. <main> ist ein HTML-Element, <Willkommen /> ist eine Komponente.

Nur App hat export default, denn main.jsx braucht nur App. Willkommen wird nur in dieser Datei verwendet.