JSX — это JavaScript

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

const heading = <h1>Летние звуки</h1>;

превращается, если коротко, вот в это:

const heading = jsx("h1", { children: "Летние звуки" });

Функция jsx() приходит из React. Она создаёт объект, который описывает элемент: его тег и то, что находится внутри, — его дочерние элементы. Затем React строит настоящие элементы на странице из этих объектов. Вы никогда не будете писать jsx() сами, но знание о том, что он есть, объясняет правила JSX, о которых говорится в этом уроке.

Первое правило: компонент возвращает один элемент. Функция возвращает одно значение, а два элемента рядом — это два вызова рядом, jsx("h1", …) jsx("ul", …), а это уже не JavaScript. Поэтому красное сообщение под предпросмотром гласит JSX expressions must have one parent element. Поместите элементы в один, например в main, — и получится одно значение.

Иногда лишний элемент на странице не нужен. Компонент, который возвращает несколько пунктов списка, не может обернуть их в div, потому что внутри ul должны быть только элементы li. Для этого в JSX есть фрагмент — пустой тег <>…</>. Он объединяет элементы в коде, но ничего не добавляет на страницу:

function SaturdayBands() {
    return (
        <>
            <li>Совиный хор, 16:00</li>
            <li>Жестяные роботы, 21:00</li>
        </>
    );
}

<SaturdayBands /> внутри ul помещает два элемента li прямо в список.