Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що повинен повертати компонент?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Компонент у React повинен повертати **JSX** - тобто опис того, як має виглядати інтерфейс (UI). **Ключове:** компонент повертає опис інтерфейсу, а не змінює DOM напряму - React сам вирішує, як саме це відобразити.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Коротка відповідь **Компонент у React повинен повертати JSX** - тобто **опис того, як має виглядати інтерфейс (UI)**. Або, точніше: > Компонент повинен повертати **React-елемент** - об'єкт, який React потім перетворює на реальні DOM-елементи. --- ## Приклад: ```javascript function Greeting() { return <h1>Hello, world!</h1>; } ``` Тут компонент `Greeting` повертає **JSX**, який React під капотом перетворює у виклик: ```javascript React.createElement("h1", null, "Hello, world!"); ``` А цей виклик повертає **React-елемент**, наприклад: ```javascript { type: "h1", props: { children: "Hello, world!" } } ``` React потім **рендерить** цей об'єкт у реальний `<h1>` у DOM. --- ## Що саме можна повертати Компонент може повертати: | Тип значення, що повертається | Приклад | Опис | |---|---|---| | **JSX** | `<div>Hello</div>` | Стандартний випадок | | **React-елемент** | `React.createElement('h1', null, 'Hello')` | Те саме, що й JSX | | **Масив елементів** | `[<li>A</li>, <li>B</li>]` | Кілька елементів підряд | | **null** | `return null;` | Компонент нічого не рендерить | | **false / undefined** | `return false;` | Аналогічно - нічого не виводить | | **Фрагмент** | `return <>...</>` | Повернення кількох елементів без обгортки | | **Портал** | `return createPortal(<Modal />, domNode)` | Рендер поза кореневим DOM | | **Текст або число** | `return 'Hello'` | React відрендерить як текстовий вузол | --- ## Не можна повертати Кілька елементів без спільного батька: ```javascript // Помилка! return ( <h1>Heading</h1> <p>Text</p> ); ``` Потрібно обгорнути: ```javascript return ( <> <h1>Heading</h1> <p>Text</p> </> ); ``` --- ## Чому саме JSX / React-елемент? React працює не напряму з DOM, а з **Virtual DOM** - віртуальним представленням інтерфейсу в пам'яті. Коли компонент повертає JSX, React: 1. Перетворює JSX -> об'єкт (React-елемент); 2. Будує з таких об'єктів Virtual DOM; 3. Порівнює його з попередньою версією (diffing); 4. Вносить мінімальні зміни в реальний DOM. --- ## Приклад: компонент, що повертає нічого ```javascript function HiddenMessage({ show }) { if (!show) return null; return <p>Secret message!</p>; } ``` > Це нормальна практика - повертати `null`, > якщо компонент тимчасово не повинен нічого відображати. --- ## Підсумок | Повертає | Що робить | |---|---| | JSX / React-елемент | Описує, що потрібно відрендерити | | null / false | Не відображає нічого | | Масив елементів | Відображає кілька вузлів підряд | | Фрагмент | Групує елементи без зайвого DOM | | createPortal | Рендерить поза батьком | --- **Головна думка:** > Компонент у React повинен повертати **опис інтерфейсу**, > а не змінювати DOM напряму. React сам вирішує, *як саме* це відобразити.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.