Что такое React?

Что такое React?

React — это JavaScript библиотека с открытым исходным кодом для создания пользовательских интерфейсов, разработанная Facebook. Она использует компонентный подход и Virtual DOM для эффективного обновления интерфейса.

Основные концепции React

• Компоненты — переиспользуемые части пользовательского интерфейса
• JSX — синтаксическое расширение JavaScript для описания UI
• Virtual DOM — виртуальное представление DOM для оптимизации
• Props — данные, передаваемые в компоненты от родителя
• State — внутреннее состояние компонента

Жизненный цикл компонента

• Mounting — компонент создается и добавляется в DOM
• Updating — компонент перерендеривается при изменениях props или state
• Unmounting — компонент удаляется из DOM

React Hooks

• useState — управление локальным состоянием компонента
• useEffect — выполнение побочных эффектов
• useContext — доступ к React контексту
• useMemo — мемоизация вычисляемых значений
• useCallback — мемоизация функций

Экосистема React

• React Router — клиентская маршрутизация
• Redux/Zustand — управление глобальным состоянием
• Next.js — фреймворк для SSR и SSG
• React Native — разработка мобильных приложений

Установка и начало работы

Создание нового React приложения с помощью Create React App:

1
2  # Установка через npm
3  npx create-react-app my-app
4  cd my-app
5  npm start
6
7  # Установка через Poetry (если используешь Python окружение)
8  poetry add react react-dom
9      

Пример простого компонента

 1
 2  import React, { useState } from 'react';
 3
 4  function Counter() {
 5    const [count, setCount] = useState(0);
 6
 7    return (
 8      <div>
 9        <p>Счетчик: {count}</p>
10        <button onClick={() => setCount(count + 1)}>
11          Увеличить
12        </button>
13      </div>
14    );
15  }
16
17export default Counter;

Часто задаваемые вопросы

В чем преимущества Virtual DOM?

Virtual DOM позволяет React эффективно обновлять только измененные части интерфейса, что значительно повышает производительность по сравнению с прямыми манипуляциями DOM.

Стоит ли изучать классовые компоненты или сразу хуки?

Рекомендуется изучать функциональные компоненты с хуками, так как это современный подход в React. Классовые компоненты нужны только для поддержки legacy кода.