В React JSX должен иметь один корневой элемент.
Вспомним, что JSX может возвращаться их функции c помощью ключевого слова return, если вы создаёте функциональный компонент или из метода render(), если вы создаёте классовый компонент.
Так вот первый пример – это валидный JSX, то есть корректный JSX. Ниже отображен не валидный JSX.
В первом примере компоненты h1, p и Footer находятся внутри родительского компонента div, который является корневым компонентом в этом конкретном JSX-коде.
Внизу компоненты h1 и p находятся рядом и у них нет одного, общего родительского элемента и такой JSX-код является не валидным в React.
Почему не валидный? Ответ очень простой
Если вы сконвертируете такой JSX-код в JavaScript-код, то вы получите то, что изображено на изображении выше.
По факту вы просто возвращаете два выражения JavaScript: React.createElement, что не является валидным JavaScript-кодом.
Поэтому вы должны всегда иметь один корневой элемент в любом JSX-коде.
Итоговое правило можно озвучить так:
JSX должен иметь один корневой элемент
