Компонент — это функция

App — это компонент: функция JavaScript, которая возвращает то, что должно быть на странице. React вызывает функцию и помещает то, что она вернула, в #root. Это называется отрисовкой: React отрисовывает компонент. Имя компонента начинается с заглавной буквы, как у App.

Функция возвращает JSX. Он похож на HTML, но это часть кода JavaScript. Кавычек вокруг него нет, потому что это не текст.

На странице не только заголовок, поэтому JSX может занимать несколько строк. Тогда заключите его в круглые скобки после return и поместите всё в один элемент, например в main:

export default function App() {
    return (
        <main>
            <h1>Летние звуки</h1>
            <p>Два дня музыки в лесу.</p>
        </main>
    );
}

Внутри вы пишете теги, как в HTML: элементы внутри элементов, и каждый уровень сдвинут ещё на четыре пробела.

Типичные ошибки:

• Забытая скобка: return стоит один на своей строке, а JSX — под ним. JavaScript заканчивает return в конце строки, поэтому функция ничего не возвращает, и страница остаётся пустой — без всякой ошибки.
• Два элемента рядом, и вокруг них ничего нет: например, <h1> и <p> сразу после return (. Приложение не запускается, а красное сообщение под предпросмотром гласит JSX expressions must have one parent element. Почему так, вы узнаете в следующем уроке, «JSX».