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

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

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

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

Контент

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

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

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

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

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

## Що таке компонентний підхід

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

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

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

---

## Приклад

```javascript
function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

function App() {
  return (
    <div>
      <Button label="Зберегти" onClick={() => alert('Збережено!')} />
      <Button label="Видалити" onClick={() => alert('Видалено!')} />
    </div>
  );
}
```

> Ми описали **один** компонент `Button`,
> але можемо використовувати його **багато разів** з різними даними.

---

## Чому React обрав компонентний підхід

### 1. Повторне використання (Reusability)

Кожен компонент можна переюзати в різних частинах застосунку.
Це знижує кількість дублювання коду і помилок.

---

### 2. Ізоляція і передбачуваність

Компоненти незалежні: у кожного - свій стан, логіка і UI.
Це означає:

- помилка в одному компоненті не ламає інші;
- код простіше тестувати і підтримувати.

---

### 3. Композиція (Composition over Inheritance)

У React інтерфейс **збирається з компонентів**, як з кубиків LEGO.

```javascript
<App>
  <Header />
  <Content>
    <Sidebar />
    <Article />
  </Content>
  <Footer />
</App>
```

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

---

### 4. Розділення відповідальності (Separation of Concerns)

Замість розділення "за технологіями" (HTML, CSS, JS),
React розділяє **за функціональністю**:

> Один компонент = вся логіка, структура і стиль конкретного блока.

```javascript
function UserCard({ user }) {
  return (
    <div className="card">
      <img src={user.avatar} />
      <h3>{user.name}</h3>
    </div>
  );
}
```

> Тут і структура, і логіка, і візуальне представлення - все разом,
> що робить компонент автономним і зрозумілим.

---

### 5. Спрощення масштабування

Коли проєкт росте, компонентний підхід дозволяє:

- розбити код на модулі,
- працювати над різними частинами паралельно,
- підключати дизайн-системи і бібліотечні UI-компоненти.

---

### 6. Узгодженість інтерфейсу

Використовуючи одні й ті самі компоненти (наприклад, `<Button />`, `<Input />`),
ти гарантуєш **єдиний стиль і поведінку** по всьому застосунку.

---

## Підсумок

| Перевага | Що дає |
|---|---|
| Повторне використання | Один компонент - безліч застосувань |
| Ізоляція | Мінімум побічних ефектів |
| Композиція | Легко збирати складні інтерфейси |
| Чистота | Кожен компонент робить одну справу |
| Масштабованість | Команда може працювати над різними частинами незалежно |
| Консистентність | Єдиний стиль і UX |

---

**Головна ідея:**

> React бачить інтерфейс не як "сторінку", а як **дерево компонентів**,
> де кожен компонент - маленький, передбачуваний і незалежний шматочок UI.

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

Для рев’юера

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

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