React. Реакт. Тестовая задача 011. Что это за пустой тег?

---

Что это за пустой тег?

Разберёмся, что здесь происходит:

  <script src="/js/react/react.development.js"></script>
  <script src="/js/react/react-dom.development.js"></script>
  <script src="/js/react/babel.min.js"></script>
  ...
  <script type="text/babel">
    const { useState, createElement } = React;
    const { createRoot } = ReactDOM;

createRoot(document.getElementById('root')).render(
  <>
    <div id="myElement">Один элемент</div>
    <div id="myAnotherElement">Другой элемент</div>
  </>
); 

Иногда в JSX используется тег <>...</>. Дело в том, что блок JSX-кода по правилам должен содержать только один элемент верхнего уровня.

В примере используются сразу два элемента, которые находятся на одном уровне: #myElement и #myAnotherElement. Чтобы JSX-код работал правильно, мы оборачиваем эти два элемента во фрагмент.

Фрагменты не обладают дополнительной функциональностью и могут восприниматься как своеобразные обрамляющие скобки в JSX-коде. Вместо них можно использовать обычный <div>, но тогда в DOM создадутся лишние элементы. А это уже напрасная трата ресурсов, которая вызовет дополнительные сложности с вёрсткой. Например, если в коде выше у элемента #root есть свойство display: flex, дочерние элементы встанут в строку.

А если вместо <> использовать <div>, элементы выстроятся в колонку, так как на них будет распространяться позиционирование div, в который они обёрнуты.