Komponenty v komponentách

Jiné komponenty nemusí používat jen App, umí to každá komponenta. Program festivalu je seznam kapel a každá kapela dostane kartu. Karta je samostatná komponenta KartaKapely a Program ji používá stejně, jako App používá Program:

// Program.jsx
import KartaKapely from "./KartaKapely.jsx";

export default function Program() {
    return (
        <section>
            <h2>Program</h2>
            <div className="karty">
                <KartaKapely />
                <KartaKapely />
            </div>
        </section>
    );
}

Komponenty tak tvoří strom, podobně jako prvky HTML vložené do sebe: App obsahuje Hlavicka a Program a Program obsahuje karty:

App
├── Hlavicka
└── Program
    ├── KartaKapely
    └── KartaKapely

Každý soubor si sám importuje komponenty, které používá, a jen ty. Program.jsx importuje KartaKapely a App.jsx o ní vědět nemusí. Cesta "./KartaKapely.jsx" se počítá od souboru, ve kterém import je, tady od Program.jsx.

A jednu komponentu můžete použít, kolikrát chcete. Každé <KartaKapely /> zavolá funkci znovu a přidá na stránku další kartu. Právě v tom jsou komponenty tak užitečné: kartu napíšete jednou, a když ji změníte, změní se s ní všechny karty na stránce.

Zatím jsou všechny karty stejné, protože kapely ještě nejsou oznámené. V další lekci, Props, dostane každá karta svou kapelu.

Tentokrát budete pracovat v KartaKapely.jsx a Program.jsx. App.jsx a Hlavicka.jsx jsou hotové.