Что такое React
React — JavaScript-библиотека для создания пользовательских интерфейсов. Её основной ход простой: интерфейс описывается как дерево компонентов, а каждый компонент получает данные через props, хранит локальное состояние при необходимости и возвращает разметку. Когда данные меняются, React пересчитывает нужную часть UI и обновляет экран.
Репозиторий facebook/react появился на GitHub в мае 2013 года, а React был открыт Facebook в тот же период. В отличие от “полного” framework, React долго оставался ядром для UI-слоя: он даёт компонентную модель и runtime, но оставляет маршрутизацию, data fetching, стили, forms и build stack на выбор проекта или фреймворка поверх React.
Именно эта граница стала частью популярности. Команда может использовать React для виджета на старой странице, для SPA, для server rendering через Next.js или для native-интерфейсов через React Native. React не пытается быть всем приложением, но вокруг него выросла огромная экосистема.
Минимальный компонент с состоянием
Пример показывает базовую форму React: состояние хранится через useState, событие меняет это состояние, JSX описывает итоговую разметку.
import { useState } from "react";
export function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}
Как React используют на практике
В реальном продукте React обычно отвечает за композицию экранов: маленькие компоненты собираются в формы, таблицы, карточки, модалки, редакторы, dashboards и сложные интерактивные состояния. Данные идут сверху вниз через props, локальное состояние живёт рядом с interaction logic, а общие данные выносят в parent components, context, state managers или server/cache libraries.
Сильная сторона React — предсказуемость мышления. Компонент можно читать как функцию UI от данных: вот вход, вот состояние, вот что должно появиться на экране. Это не убирает сложность приложения, но делает её более явной.
Список и ключи
Ключи помогают React понимать, какие элементы списка сохранились, добавились или изменились при следующем render.
function TodoList({ todos }) {
return (
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
);
}
Почему React популярен
React оказался удачным компромиссом между простотой ядра и силой экосистемы. Его можно внедрять постепенно, под него много библиотек, специалистов, документации, UI kits, testing tools и production-фреймворков. Для бизнеса это снижает риск выбора: легче нанимать людей, легче найти ответы, легче строить длинную продуктовую линию.
Ещё одна причина — переносимость модели. Даже если стек меняется, компонентное мышление, props, state, composition и declarative rendering остаются полезными. React повлиял на язык, на дизайн UI-фреймворков и на ожидания разработчиков от frontend-инструментов.
Ограничения
React не решает всё приложение сам. Серьёзному продукту всё равно нужны routing, server rendering, data loading, cache invalidation, forms, permissions, analytics, accessibility, performance budgets и deployment. Поэтому часто выбирают не “React или нет”, а “какой React stack”: Next.js, Remix/React Router, Vite SPA, React Native или внутренняя платформа.
JSX и близость markup к логике тоже не всем нравятся. Для маленьких компонентов это удобно, но большие файлы быстро становятся тяжёлыми. React даёт хорошие primitives, однако архитектурная дисциплина остаётся обязанностью команды.