React: что это, где применяется и как освоить

Главное, что меняет React, — способ думать об интерфейсе. На чистом JavaScript вы находите элемент и меняете его: вставляете текст, прячете блок, добавляете класс. На React вы описываете, как выглядит экран при каждом состоянии, а обновление берёт на себя библиотека. Поэтому знание JSX мало что даёт, пока не научишься решать, где хранить данные и какой компонент за них отвечает.

Что делает человек, который пишет на React

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

Сам React отвечает только за отрисовку. Маршруты, запросы и общее хранилище данных решают дополнительные библиотеки или фреймворки вроде Next.js, поэтому программа «по React» почти всегда включает и соседние инструменты.

Кому React пригодится, кроме фронтенд-разработчика

Профессию фронтенд-разработчика мы разбирали отдельно. Здесь речь о тех, кто берёт React в дополнение к основной работе.

Верстальщик. Если проект написан на React, вёрстку всё равно встраивают в компоненты. Верстальщик, который понимает props и состояние, сдаёт не набор HTML-файлов, а готовые блоки: кнопку с вариантами, карточку, модальное окно. Разработчикам не приходится переписывать разметку и терять при переносе отступы и состояния.

Бэкенд-разработчик. Серверному программисту React нужен, чтобы самому сделать интерфейс к своему API: внутреннюю админку, форму загрузки, страницу для проверки сценария. Анимации ему ни к чему, зато пригодится умение обработать ошибку запроса и не отправить форму дважды.

Дизайнер интерфейсов. Варианты компонента в Figma по сути соответствуют props, а «наведение», «ошибка», «загрузка» — состоянию. С таким пониманием проще договориться с командой о дизайн-системе, а прототип на React показывает поведение на настоящих данных.

Мобильный разработчик. React Native использует ту же модель: компоненты, props, состояние, хуки. Меняются строительные блоки: вместо div и span — View и Text, вместо CSS — стили в объектах JavaScript, плюс правила платформ и магазинов приложений.

React не нужен для лендинга, сайта на конструкторе или страницы с парой интерактивных элементов: там хватит HTML, CSS и немного JavaScript. Библиотека окупается, когда в интерфейсе много состояний, повторяющихся блоков и данных, меняющихся без перезагрузки.

Учебный пример: переключатель тарифов

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

function Pricing({ plans }) {
  const [yearly, setYearly] = useState(false);
  return (
    <>
      <label>
        <input type="checkbox" checked={yearly}
          onChange={e => setYearly(e.target.checked)} />
        Оплата за год
      </label>
      {plans.map(p => (
        <PlanCard key={p.id} title={p.title}
          price={yearly ? p.month * 10 : p.month} />
      ))}
    </>
  );
}

Здесь видны три базовые идеи. Список тарифов приходит через props, и компонент его не меняет. Состояние одно — yearly, всё остальное из него вычисляется. У каждой карточки есть key, по которому React различает элементы списка; если взять вместо него номер в массиве, при сортировке карточки начнут путаться.

Компилятор и ручная мемоизация

В старых учебниках такой пример дописывают: цену оборачивают в useMemo, обработчик — в useCallback, а PlanCard — в React.memo, чтобы не пересчитывать лишнее. Это мемоизация, то есть запоминание результата, и долго её расставляли вручную.

7 октября 2025 года команда React выпустила React Compiler 1.0 — инструмент сборки, который делает мемоизацию автоматически. По словам разработчиков, в большинстве случаев она не менее точна, чем ручная, и для нового кода стоит полагаться на компилятор. useMemo и useCallback остаются запасным выходом для точного контроля: например, чтобы эффект не запускался заново из-за формально нового значения. Для существующего кода совет обратный: ручную мемоизацию оставить или убирать только после тестов, потому что её удаление меняет результат компиляции. Компилятор работает с React 17 и новее, в Expo SDK 54 и шаблонах create-vite он включается при создании проекта.

Тому, кто учится сейчас, отсюда следуют два вывода. Не стоит тратить недели на искусство расставлять useMemo — важнее понять, когда он действительно нужен. И компилятор опирается на правила React: при одинаковых данных компонент возвращает одинаковый результат и не меняет props и состояние напрямую. Если код нарушает правила незаметно для анализа, мемоизация может дать неожиданный результат. Поэтому разработчики советуют включать линтер eslint-plugin-react-hooks, а при слабых тестах закреплять точную версию компилятора, например 1.0.0. Директиву «use no memo», отключающую компилятор для функции, документация называет временным средством отладки.

В каком порядке осваивать React

Порядок идёт от простого к тому, что опирается на предыдущий шаг. Без уверенного JavaScript непонятно, почему состояние нельзя менять напрямую. Без состояния не на чем строить загрузку данных, а маршруты нужны, только когда экранов становится несколько:

1. JavaScript: массивы, объекты, стрелочные функции, деструктуризация, промисы.
2. Первый проект через Vite: компоненты, JSX, props, списки с key. Утилиту Create React App с февраля 2025 года официально считают устаревшей, так что уроки, которые начинаются с неё, лучше не брать за образец.
3. Состояние и события: useState, формы, поднятие состояния в общий родительский компонент.
4. Загрузка данных: запрос к API, состояния загрузки и ошибки, useEffect.
5. Маршруты, контекст и общее хранилище — когда экранов несколько.
6. TypeScript и тесты компонентов.

Первые четыре шага можно пройти по документации на react.dev, где есть интерактивные примеры и задания. Систематическая программа нужна ради обратной связи на код и законченного проекта. Например, онлайн-курс React от Skillbox рассчитан на три месяца и на тех, кто уже уверенно пишет на JavaScript: TypeScript, состояние и Redux, тесты на Jest и Vitest, сборка на Webpack и Vite, знакомство с Next и Nuxt, 15 практических заданий, среди них каталог фильмов и аудиоплеер.

Упражнения и как проверить результат

Хорошие упражнения добавляют по одной новой идее. Сначала счётчик и переключатель темы: одно состояние, одно событие. Потом список задач с фильтром: появятся key и вычисляемые данные. Затем поиск по открытому API с индикатором загрузки и сообщением об ошибке. Дизайнеру полезно собрать кнопки и поля своего макета со всеми состояниями, бэкендеру — форму к собственному API.

Проверяйте поведение, а не то, что код запустился. В React Developer Tools посмотрите, какие компоненты перерисовываются при вводе текста. Проверьте, что будет при медленном ответе сервера или ошибке. Пройдите форму с клавиатуры: доступность React сам не обеспечивает, это задача разметки.

Ошибки новичков повторяются. Состояние меняют напрямую, через push, и экран не обновляется. Хранят в состоянии то, что можно вычислить, и получают рассинхрон. Пишут useEffect там, где значение можно посчитать при отрисовке. Растягивают компонент на сотни строк вместо того, чтобы выделить части.

Когда упражнения даются легко, нужен проект, где всё собирается вместе. На курсе «React-разработчик» в Яндекс Практикуме это приложение для заказа бургеров: за три месяца к нему добавляют конструктор с перетаскиванием, авторизацию, Redux Toolkit, TypeScript, ленту заказов через WebSocket и тесты. От поступающих ждут базовых HTML, CSS и JavaScript, знакомства с Git и npm, есть вступительная проверка.

Как навык влияет на доход

Верстальщику, бэкендеру или дизайнеру React редко даёт отдельную строку в зарплате, зато расширяет круг задач: вёрстка в готовые React-проекты, небольшие сервисы целиком, работа над дизайн-системой. Для фронтенд-разработчика React обычно входит в обязательные требования вакансии.

Ориентир — калькулятор зарплат «Хабр Карьеры»: это анкеты специалистов о фактической зарплате, а не предложения работодателей; Россия без фильтра по городу, данные открыты в сентябре 2026 года. Медиана у фронтенд-разработчиков, указавших React, — 273 483 ₽ по 1 136 анкетам, у всех фронтенд-разработчиков — 225 000 ₽ по 2 869 анкетам. На уровне Junior — 107 083 ₽ по 78 анкетам против 86 666 ₽ по 298. Выборка младших специалистов мала, и разница не доказывает надбавку именно за React: его чаще указывают те, кто работает в продуктовых командах с современным стеком. По бэкендерам с React в калькуляторе лишь 25 анкет, выводы делать рано.

Как выбрать обучение

Сопоставьте программу со своей целью. Верстальщику и дизайнеру важны компоненты, props и состояния, бэкендеру — загрузка данных, формы и ошибки, будущему мобильному разработчику — путь к React Native после основ. Проверьте требования на входе: большинство онлайн-курсов по React рассчитаны на тех, кто уже знает JavaScript.

Если нужна короткая программа, посмотрите онлайн-курс «React-разработчик + ИИ» в Eduson Academy. Он рассчитан на два месяца: компоненты и хуки, React Router и Context API, основы TypeScript, тестирование и выкладка, Git и нейросетевые помощники, итоговый проект — приложение списка желаний. Новичкам без JavaScript в обзоре советуют начать с более широкой программы.

Обратите внимание на актуальность материалов. Если в программе нет хуков, а проект создают через Create React App, её давно не обновляли. Хорошо, если есть TypeScript, тесты и ревью кода: без обратной связи прямое изменение состояния годами остаётся незамеченным.

Сравнить школы по формату, практике и поддержке можно в рейтинге онлайн-школ с обучением React. А до записи попробуйте пройти первые разделы документации на react.dev и собрать переключатель тарифов из примера: если модель «интерфейс описывается через состояние» покажется понятной, учёба пойдёт быстрее и вы будете знать, какие темы для вас главные.