У попередньому розділі ми розглянули основи 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>
);