Inhalt zwischen Tags

Die Kästen auf der Festivalseite haben alle denselben Rahmen: weiß, mit runden Ecken und einem Schatten. Die Bandkarten haben ihn, und die Tickets sollen genauso aussehen. Statt überall dasselbe div mit derselben Klasse zu schreiben, kannst du eine Komponente machen, die nur der Rahmen ist, und alles Mögliche hineinsetzen, so wie du Text und Elemente zwischen die Tags eines div setzt:

<Karte>
    <h3>Camping</h3>
    <p>Der Zeltplatz öffnet am Freitag.</p>
</Karte>

Was zwischen dem öffnenden und dem schließenden Tag einer Komponente steht, übergibt React ihr als Prop mit einem besonderen Namen: children. Die Komponente setzt es dorthin, wo sie es haben will:

export default function Karte({ children }) {
    return <div className="karte">{children}</div>;
}

Die Seite bekommt also dies:

<div class="karte">
    <h3>Camping</h3>
    <p>Der Zeltplatz öffnet am Freitag.</p>
</div>

children kann alles sein, was du in JSX schreiben kannst: Text, Elemente, andere Komponenten. Und eine Komponente kann children zusammen mit anderen Props nehmen. <Karte titel="Camping">…</Karte> bekommt sowohl titel als auch children.

Komponenten wie diese, die ihrem Inhalt nur einen Rahmen oder ein Layout geben, sind in React-Apps üblich: eine Karte, ein Dialog, ein Abschnitt einer Seite mit Überschrift. Eine Komponente bestimmt, wie der Rahmen aussieht, und der Rest der App füllt ihn.