Die Seite aufteilen

Bisher stand die ganze Festivalseite in App. Für eine Überschrift und einen Absatz ist das in Ordnung. Aber eine echte App hat eine Kopfzeile, ein Programm, Tickets, eine Fußzeile … und App würde bald hunderte Zeilen lang, in denen man nichts mehr findet.

Deshalb teilen React-Apps die Seite in Komponenten auf, eine für jeden Teil. Du weißt schon, wie man eine schreibt: eine Funktion, deren Name mit einem Großbuchstaben beginnt und die JSX zurückgibt. Hier ist die Kopfzeile der Festivalseite als eigene Komponente:

function Kopfzeile() {
    return (
        <header>
            <h1>Sommerklang</h1>
            <p>Freitag und Samstag, drei Bühnen</p>
        </header>
    );
}

export default function App() {
    return (
        <>
            <Kopfzeile />
            <Programm />
        </>
    );
}

Kopfzeile gibt ihren Teil der Seite zurück, und App setzt die Teile zusammen: <Kopfzeile /> heißt „Rufe die Funktion Kopfzeile auf und setze hier ein, was sie zurückgibt“. Die Seite sieht genauso aus wie vorher. Aber App liest sich jetzt wie ein Inhaltsverzeichnis: erst die Kopfzeile, dann das Programm. Wenn du die Kopfzeile ändern willst, weißt du, wo du suchen musst. (Programm schreibst du genauso, und in dieser Übung machst du das selbst.)

Ein paar Regeln, die du schon kennst:

• Der Name beginnt mit einem Großbuchstaben: Kopfzeile, nicht kopfzeile. <header> mit kleinem h ist das HTML-Element, <Kopfzeile /> mit großem K ist deine Komponente.
• Eine Komponente ohne Inhalt zwischen ihren Tags schreibst du als ein einziges selbstschließendes Tag: <Kopfzeile />.
• Eine Komponente gibt ein Element zurück oder ein Fragment <>…</>, genau wie App.

Wie groß sollte eine Komponente sein? Dafür gibt es keine genaue Regel. Ein gutes Zeichen ist, dass du sie in ein oder zwei Wörtern benennen kannst: eine Kopfzeile, ein Programm, die Karte einer Band. Wenn du einen langen Namen bräuchtest, um zu sagen, was eine Komponente tut, macht sie wahrscheinlich zu viel und lässt sich weiter aufteilen.