React в 2026: как начать и почему не create-react-app

О проверке кода. Проект не собирался, команды не запускались — в отличие от материалов по Node.js с фактическим выводом. Код и команды даны по документации React, Vite и Next.js. Говорим прямо, а не ставим бейдж «проверено».

React — библиотека для построения интерфейсов, и вопрос «как её установить» за девять лет сменил ответ дважды. Разберём актуальный.

Что такое React

React отвечает на один вопрос: как держать интерфейс в соответствии с данными. Вы описываете, как выглядит UI при данном состоянии, а React берёт на себя обновление DOM, когда состояние меняется.

Ключевое слово — компонент: функция, которая по данным возвращает разметку.

function Greeting({ name }) {
  return <h1>Привет, {name}!</h1>;
}

Это не HTML в JavaScript, а JSX — синтаксис, который сборщик превращает в вызовы функций. Браузер JSX не понимает; его всегда компилируют.

Важно: React — библиотека, а не фреймворк. Он занимается только интерфейсом и намеренно не диктует, как собирать проект, как маршрутизировать страницы, где хранить состояние. Отсюда и весь зоопарк инструментов вокруг — и путаница «с чего начать».

Как НЕ надо начинать: create-react-app

Если вы гуглили React до 2023 года, первый совет везде был npx create-react-app. Сегодня это неверный совет.

Команда React официально убрала CRA из рекомендаций. Причины накопились: он медленный на старте и сборке, давно не обновлялся, тянет за собой устаревшие зависимости с уязвимостями. Проект, начатый с CRA в 2026, стартует с техдолга.

Если вы видите туториал, начинающийся с create-react-app, — он устарел, каким бы свежим ни выглядел.

Как надо: Vite или Next.js

Vite — для одностраничного приложения:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Next.js — когда React нужен как основа сайта, а не виджета:

npx create-next-app@latest my-app

Правило выбора простое: нужен ли серверный рендеринг и SEO? Приложение за логином (дашборд, админка) — Vite. Сайт, который должен индексироваться и быстро показывать контент, — Next.js. Для контентного сайта, кстати, React может быть и вовсе избыточен — но это отдельный разговор.

Компоненты: функции, а не классы

Второе, что переворачивает старые туториалы. React 2017 года учил классовым компонентам:

// ❌ так писали до 2019, сегодня не нужно
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return <button onClick={() => this.setState({ count: this.state.count + 1 })}>
      {this.state.count}
    </button>;
  }
}

Современный React — это функции и хуки:

// ✅ то же самое сегодня
import { useState } from 'react';

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

Разница не косметическая. Хуки (useState, useEffect и другие) убрали классы, this, bind и путаницу с контекстом — ту самую, из-за которой в 2017-м везде мелькало this.handleClick = this.handleClick.bind(this). Это та же история со стрелками и this, только на уровне архитектуры.

Классы всё ещё работают ради старого кода, но новый React на них не пишут. Туториал с extends React.Component — признак, что он устарел.

Состояние: не всегда Redux

Ещё один сдвиг. В 2017-м связка «React + Redux» подавалась почти как обязательная — отсюда и старые адреса /react-redux/, ведущие на эту страницу.

Сегодня иерархия такая:

• локальное состояние компонента — useState, ничего больше не нужно;
• общее на несколько компонентов — Context API, встроенный в React;
• сложное глобальное — лёгкие библиотеки (Zustand, Jotai) или Redux Toolkit.

Redux не умер, но перестал быть выбором по умолчанию. Для большинства приложений он избыточен — та же история, что с фреймворками «всё из коробки»: мощный инструмент, который берут по привычке там, где хватило бы малого.

Что было на этой странице в 2017 году

Первая версия вышла 16 июля 2017 года и учила ставить React через create-react-app, писать классовые компоненты и связывать с Redux. Для 2017 года — абсолютно правильный набор.

Сегодня устарел каждый из трёх пунктов:

• create-react-app — официально не рекомендован, заменён Vite и Next.js;
• классовые компоненты — вытеснены хуками в 2019-м;
• Redux как обязательный — стал одним из вариантов, и не главным.

Это редкий случай, когда устарел не синтаксис языка, а вся экосистема вокруг. Сам React жив и активно развивается — но способ с ним работать сменился целиком. Поэтому мы не стали чинить старый туториал, а написали актуальный: старые адреса /react-redux/ ведут сюда именно потому, что тем, кто по ним приходит, нужен сегодняшний ответ, а не музейный.

Смежные темы: что такое JavaScript; ECMAScript 6 — JSX и стрелки родом отсюда; что такое Node.js — на нём работает сборка. Полный список — в уроках JavaScript.