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

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

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

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

Контент

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

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

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

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

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

**React** - це **бібліотека JavaScript** для створення **користувацьких інтерфейсів (UI)**. Її розробила компанія **Facebook (Meta)**, і вона використовується для побудови **інтерактивних веб-застосунків**, де інтерфейс оновлюється динамічно при зміні даних - **без перезавантаження сторінки**.

---

### Основні особливості React:

1. **Компонентний підхід**
Застосунок у React будується з **дрібних, незалежних компонентів** - блоків інтерфейсу (наприклад, кнопка, форма, картка товару).
Кожен компонент:
  - має своє **стан (state)**;
  - приймає **вхідні дані (props)**;
  - і **описує, як має виглядати UI**.
2. **Віртуальний DOM (Virtual DOM)**
React не змінює реальний DOM напряму.
Замість цього він створює **віртуальну копію DOM**, порівнює її з попередньою версією (diffing) і **оновлює лише змінені частини інтерфейсу** - це робить React швидким та ефективним.
3. **Односпрямований потік даних (One-way data flow)**
Дані в React **передаються згори вниз** - від батьківського компонента до дочірніх через `props`. Це робить логіку застосунку більш передбачуваною.
4. **JSX (JavaScript XML)**
Це спеціальний синтаксис, який дозволяє **писати HTML-подібний код прямо всередині JavaScript**:

```javascript
  function Hello() {
    return <h1>Hello, world!</h1>;
  }
  ```
JSX потім перетворюється на звичайні виклики JS `React.createElement()`.
5. **React Hooks (хуки)**
Сучасний спосіб працювати зі станом та життєвим циклом компонентів **без класів**:

```javascript
  import { useState } from "react";

function Counter() {
    const [count, setCount] = useState(0);
    return (
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    );
  }
  ```

---

### Переваги React:

- Висока продуктивність (через Virtual DOM)
- Повторне використання компонентів
- Велика екосистема (React Router, Redux, Next.js)
- Активна спільнота та підтримка Meta

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

Для рев’юера

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

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