Свой компонент

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

function Welcome() {
    return <p>Добро пожаловать на фестиваль!</p>;
}

export default function App() {
    return (
        <main>
            <h1>Летние звуки</h1>
            <Welcome />
            <Welcome />
        </main>
    );
}

App использует Welcome как HTML-тег: <Welcome />. Косая черта перед > сразу закрывает тег, потому что внутри ничего нет. React вызывает функцию Welcome и подставляет то, что она вернула, на её место — столько раз, сколько вы её использовали. Тогда на странице окажется такой HTML:

<main>
    <h1>Летние звуки</h1>
    <p>Добро пожаловать на фестиваль!</p>
    <p>Добро пожаловать на фестиваль!</p>
</main>

Тега <Welcome> на странице нет — только то, что вернула функция. Компонент — это ваш собственный кусочек страницы, который можно использовать везде, где нужно. В уроке «Пропсы» один компонент будет показывать разные группы, каждую со своим названием.

Имя должно начинаться с заглавной буквы: так React отличает ваши компоненты от HTML-тегов. <main> — это HTML-элемент, а <Welcome /> — компонент.

export default есть только у App, потому что main.jsx нужен только App. Welcome используется лишь в этом файле.