У попередньому розділі ми розглянули основи JSX. Тепер поглибимо знання та навчимося створювати складніші JSX-елементи.

Правило одного батьківського елемента

Важливе правило при роботі з вкладеним JSX полягає в тому, що він повинен повертати лише один батьківський елемент. Цей батьківський елемент обгортає всі інші рівні вкладених елементів. Це правило гарантує, що React зможе коректно відображати та керувати структурою вашого JSX. Ось практичний приклад для ілюстрації цього правила:

Валідний JSX:

<div>
  <h1>Welcome to My Website</h1>
  <p>Explore amazing content:</p>
  <ul>
    <li>Article 1</li>
    <li>Article 2</li>
    <li>Article 3</li>
  </ul>
</div>

Невалідний JSX (Не буде транспільовано):

<h1>Welcome to My Website</h1>
<p>Explore amazing content:</p>
<ul>
  <li>Article 1</li>
  <li>Article 2</li>
  <li>Article 3</li>
</ul>

Примітка

При рендерингу декількох елементів таким чином, можна обгорнути їх у дужки () для зручності читання, але це не є обов'язковим. Також пам'ятайте, що ця концепція застосовується при поверненні JSX-елементів у React-компонентах.

Приклад

const JSX = (
  <div>
    <h1>Welcome to My Website</h1>
    <p>Explore amazing content:</p>
    <ul>
      <li>Article 1</li>
      <li>Article 2</li>
      <li>Article 3</li>
    </ul>
  </div>
);