Разделение страницы

Пока что вся страница фестиваля находилась в App. Для заголовка и абзаца это нормально. Но в настоящем приложении есть шапка, список участников, билеты, подвал… и App скоро разрастётся до сотен строк, в которых ничего не найти.

Поэтому React-приложения делят страницу на компоненты, по одному на каждую часть. Вы уже умеете их писать: это функция, имя которой начинается с заглавной буквы и которая возвращает JSX. Вот шапка страницы фестиваля как отдельный компонент:

function Header() {
    return (
        <header>
            <h1>Летние звуки</h1>
            <p>Пятница и суббота, три сцены</p>
        </header>
    );
}

export default function App() {
    return (
        <>
            <Header />
            <Lineup />
        </>
    );
}

Header возвращает свою часть страницы, а App собирает части вместе: <Header /> значит «вызови функцию Header и вставь сюда то, что она вернёт». Страница выглядит точно так же, как раньше. Зато App теперь читается как оглавление: сначала шапка, потом список участников. Когда нужно изменить шапку, вы знаете, где искать. (Lineup пишется так же, и в этом упражнении вы напишете его сами.)

Несколько правил, которые вы уже знаете:

• Имя начинается с заглавной буквы: Header, а не header. <header> с маленькой h — это HTML-элемент, а <Header /> с большой H — ваш компонент.
• Компонент без содержимого между тегами записывается одним самозакрывающимся тегом: <Header />.
• Компонент возвращает один элемент или фрагмент <>…</>, как и App.

Каким должен быть размер компонента? Точного правила нет. Хороший признак — когда его можно назвать одним-двумя словами: шапка, список участников, карточка группы. Если для описания компонента нужно длинное название, скорее всего, он делает слишком много, и его можно разделить ещё раз.