Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Чому JSX вимагає один кореневий елемент?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

### Коротка відповідь

JSX вимагає **один кореневий елемент**, тому що **React-компонент повинен повертати одне єдине значення** - а компіляція JSX перетворює розмітку на **виклик** `React.createElement()`, який повертає **один об'єкт** (React-елемент).

Якщо JSX містить **кілька елементів на одному рівні**, React не знає,
що вважати "головним результатом" функції.

---

### Приклад проблеми

Помилка:

```javascript
function App() {
  return (
    <h1>Привіт</h1>
    <p>Як справи?</p>
  );
}
```

Помилка:

> "Adjacent JSX elements must be wrapped in an enclosing tag."

Чому?
Тому що це перетворюється на щось на кшталт:

```javascript
return (
  React.createElement("h1", null, "Привіт"),
  React.createElement("p", null, "Як справи?")
);
```

Але `return` може повернути **лише одне значення**, а не два елементи підряд.

---

### Як правильно

1. **Обгортаємо елементи у спільний контейнер:**

```javascript
  function App() {
    return (
      <div>
        <h1>Привіт</h1>
        <p>Як справи?</p>
      </div>
    );
  }
  ```
2. **Або використовуємо фрагмент (без зайвого тега в DOM):**

```javascript
  function App() {
    return (
      <>
        <h1>Привіт</h1>
        <p>Як справи?</p>
      </>
    );
  }
  ```
Це еквівалент:

```javascript
  return React.createElement(React.Fragment, null,
    React.createElement("h1", null, "Привіт"),
    React.createElement("p", null, "Як справи?")
  );
  ```

---

### Навіщо це обмеження взагалі потрібне?

React повинен побудувати **дерево компонентів (Virtual DOM)**,
і кожен компонент повинен мати **рівно одну "кореневу ланку"**.

Інакше React не зможе:

- коректно визначити, **де починається і закінчується компонент**;
- **оновлювати** або **видаляти** компонент цілком;
- **пов'язувати стан** і життєвий цикл з одним вузлом у дереві.

---

### Аналогія

Уяви, що в тебе є дерево:

```javascript
App
 ┣ Header
 ┗ Footer
```

Якщо компонент `App` поверне **два корені** (Header і Footer окремо),
то дерево стане "з двома стовбурами" - і React не зможе коректно їх обробити.

---

### Підсумок

JSX вимагає один кореневий елемент, тому що:

- `return` може повернути лише **одне значення**;
- React будує **ієрархічне дерево компонентів** (Virtual DOM);
- один корінь гарантує, що компонент = один вузол дерева.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати297 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.