Компоненты внутри компонентов

Использовать другие компоненты может не только App, а любой компонент. Список участников — это список групп, и у каждой группы своя карточка. Карточка — отдельный компонент BandCard, и Lineup использует его так же, как App использует Lineup:

// Lineup.jsx
import BandCard from "./BandCard.jsx";

export default function Lineup() {
    return (
        <section>
            <h2>Участники</h2>
            <div className="cards">
                <BandCard />
                <BandCard />
            </div>
        </section>
    );
}

Компоненты образуют дерево, как HTML-элементы, вложенные друг в друга: в App есть Header и Lineup, а в Lineup — карточки:

App
├── Header
└── Lineup
    ├── BandCard
    └── BandCard

Каждый файл сам импортирует компоненты, которые использует, и только их. Lineup.jsx импортирует BandCard, а App.jsx знать о нём не нужно. Путь "./BandCard.jsx" отсчитывается от файла, в котором написан импорт, то есть от Lineup.jsx.

А использовать компонент можно сколько угодно раз. Каждый <BandCard /> снова вызывает функцию и добавляет на страницу ещё одну карточку. Поэтому компоненты так удобны: вы пишете карточку один раз, а когда меняете её, меняются все карточки на странице.

Пока все карточки одинаковые, потому что группы ещё не объявлены. В следующем уроке у каждой карточки будет своя группа.

На этот раз вы работаете в BandCard.jsx и Lineup.jsx. App.jsx и Header.jsx готовы.