JSX (расширение Javascript для HTML в файле JS) не будет понято браузером напрямую, поэтому нам нужно преобразовать его в те (HTML, CSS, Javascript), которые браузер может понять с помощью помощника babel.

Теперь скажем, что у нас есть синтаксис JSX с таким же уровнем

Это потому, что мы не можем преобразовать его в React.createElement, если у нас нет родительского элемента.

Вышеупомянутые операторы будут транспилированы в

Рендеринг - это функция, отвечающая за рендеринг в пользовательский интерфейс. Приведенное выше утверждение не является допустимым оператором javascript, мы также не можем разделять запятыми, так как функция рендеринга будет принимать только один параметр, если мы добавим запятую, второй элемент попадет во второй параметр.

Теперь, когда мы переносимся в родителя, только один элемент, который является родителем, может быть отправлен в метод рендеринга, а третий аргумент createElement может вкладывать столько дочерних элементов, сколько нам нужно.

Поэтому нам нужна оболочка родительского элемента, чтобы его нельзя было легко преобразовать в чистый javascript