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

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

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

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

Контент

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

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

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

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

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

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

---

### Простіше кажучи:

Компонент - це **функція (або клас)**, яка **приймає дані (props)** і **повертає JSX (опис UI)**.

---

### Приклад простого компонента:

```javascript
function Greeting(props) {
  return <h1>Привіт, {props.name}!</h1>;
}
```

Використання:

```javascript
<Greeting name="Alex" />
```

Тут:

- `Greeting` - компонент;
- `props.name` - вхідні дані;
- результат - шматочок інтерфейсу: `<h1>Привіт, Alex!</h1>`.

---

### Типи компонентів

1. **Функціональні компоненти (Function Components)**
Це звичайні функції, що повертають JSX:

```javascript
  function Button({ text }) {
    return <button>{text}</button>;
  }
  ```
2. **Класові компоненти (Class Components)**
Використовувалися раніше, до появи хуків:

```javascript
  class Button extends React.Component {
    render() {
      return <button>{this.props.text}</button>;
    }
  }
  ```

Сьогодні 99% нових проєктів використовують **функціональні компоненти** з **хуками** (`useState`, `useEffect` тощо).

---

### Компоненти можуть бути:

- **Простими (презентаційними)** - відображають UI, без логіки:

```javascript
  const Title = () => <h2>Ласкаво просимо!</h2>;
  ```
- **Контейнерними (розумними)** - керують станом і поведінкою:

```javascript
  function Counter() {
    const [count, setCount] = useState(0);
    return (
      <div>
        <p>Лічильник: {count}</p>
        <button onClick={() => setCount(count + 1)}>+</button>
      </div>
    );
  }
  ```

---

### Навіщо потрібні компоненти

- Розділяють інтерфейс на **дрібні, незалежні частини**.
- Спрощують **підтримку** і **тестування**.
- Дозволяють **перевикористовувати** елементи UI (наприклад, кнопку, картку товару, модалку).

---

### Уся сторінка = дерево компонентів

Наприклад:

```javascript
<App>
 ┣ Header
 ┣ Main
 ┃ ┣ ProductCard
 ┃ ┣ ProductCard
 ┃ ┗ ProductCard
 ┗ Footer
```

Кожен елемент - це **компонент**, який може містити **інші компоненти**.

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

Для рев’юера

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

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