Базовые элементы

До сих пор App делал всё. Реальные приложения React разбивают страницу на множество маленьких компонентов, и использование одного из них выглядит точно так же, как использование тега HTML:

function Header() {
    return <h1>My Blog</h1>;
}

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

Когда React видит <Header />, он вызывает вашу функцию и отрисовывает всё, что она возвращает. Два правила:

• Имена компонентов начинаются с Заглавной буквы: именно так React отличает <Header /> (ваш компонент) от <header> (HTML-тег)
• Используйте его как самозакрывающийся тег: <Header />

Зачем это нужно? Потому что страница, состоящая из именованных блоков (<Header />, <Menu />, <Footer />), читается как оглавление, и каждый блок можно использовать повторно где угодно.