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

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

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

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

Контент

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

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

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

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

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

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

Іншими словами:

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

---

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

```javascript
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
```

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

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

Тут:

- `Greeting` - це **компонент**;
- `props` - об'єкт з переданими даними;
- повертається JSX -> `<h1>Hello, 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` та ін.).

---

## Компоненти бувають:

### **Прості (презентаційні)**

- відповідають лише за зовнішній вигляд

```javascript
const Title = () => <h2>Welcome!</h2>;
```

### **Контейнерні (розумні)**

- містять стан і логіку

```javascript
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}
```

---

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

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

---

## Структура застосунку

Зазвичай увесь React-застосунок - це **дерево компонентів**:

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

Кожен компонент може:

- містити **інші компоненти** (вкладеність),
- керувати **станом** (`useState`),
- реагувати на події (`onClick`, `onChange`),
- і **оновлювати інтерфейс**, коли дані змінюються.

---

## Підсумок

| Термін | Що означає |
|---|---|
| **Компонент** | Функція (або клас), що повертає JSX |
| **Props** | Дані, що передаються в компонент |
| **State** | Внутрішні дані компонента |
| **JSX** | Синтаксис для опису структури UI |
| **Композиція** | Вкладення компонентів один в одного |

---

**Коротко:**

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

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

Для рев’юера

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

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