Komponenten in Komponenten

Nicht nur App kann andere Komponenten verwenden: Jede Komponente kann das. Das Programm ist eine Liste von Bands, und jede Band bekommt eine Karte. Die Karte ist eine eigene Komponente, BandKarte, und Programm verwendet sie, so wie App Programm verwendet:

// Programm.jsx
import BandKarte from "./BandKarte.jsx";

export default function Programm() {
    return (
        <section>
            <h2>Programm</h2>
            <div className="karten">
                <BandKarte />
                <BandKarte />
            </div>
        </section>
    );
}

Die Komponenten bilden einen Baum, wie HTML-Elemente, die ineinander stecken: App hat Kopfzeile und Programm, und Programm hat die Karten:

App
├── Kopfzeile
└── Programm
    ├── BandKarte
    └── BandKarte

Jede Datei importiert die Komponenten, die sie verwendet, selbst, und nur diese. Programm.jsx importiert BandKarte, und App.jsx muss nichts davon wissen. Der Pfad "./BandKarte.jsx" beginnt bei der Datei, in der der Import steht, hier Programm.jsx.

Und eine Komponente kannst du so oft verwenden, wie du willst. Jedes <BandKarte /> ruft die Funktion erneut auf und fügt der Seite eine weitere Karte hinzu. Das macht Komponenten so nützlich: Du schreibst die Karte einmal, und wenn du sie änderst, ändern sich alle Karten auf der Seite mit.

Vorerst sind alle Karten gleich, weil die Bands noch nicht bekannt gegeben wurden. In der nächsten Lektion bekommt jede Karte ihre eigene Band.

Diesmal arbeitest du in BandKarte.jsx und Programm.jsx. App.jsx und Kopfzeile.jsx sind fertig.