Что нужно знать до React: проверьте себя по списку

28 августа 2026 · 8 минут · Dediu Pavel

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

Короткий ответ: почему «React без вёрстки» не бывает

React не заменяет HTML и CSS, он их порождает. Компонент — это функция, которая возвращает описание разметки; в браузер в итоге попадают те же теги и те же классы. Если вы не понимаете, почему блок съехал, то в React вы не будете понимать этого ровно так же — только теперь между вами и разметкой окажется ещё и сборщик.

Второе: React не решает задач раскладки. Внутри компонента всё равно нужны flex и grid, состояния кнопки, порядок фокуса, поведение на узком экране. Ни один хук ничего из этого не делает.

Как это выглядит на практике: человек без базы застревает не на React, а на языке — и не понимает этого. Ошибка «Rendered fewer hooks than expected» читается как проблема фреймворка, а означает ранний return выше вызова хука. Бесконечный рендер выглядит как капризность React, а на деле это объект, созданный в теле компонента и попавший в зависимости. Без базы такие вещи отлаживаются наугад, с базой — за минуту.

И третье, самое неприятное для тех, кто хочет перепрыгнуть: без базового JavaScript React выглядит как набор заклинаний. Массивы, объекты, ссылки, промисы — не «дополнение», а материал, из которого сделан любой компонент. Человек, который не понимает разницу между копией объекта и ссылкой на него, будет неделями ловить ошибку «состояние поменял, а экран прежний».

Что из HTML и CSS нужно обязательно и почему именно это

Список короче, чем кажется, и каждый пункт в нём отрабатывает сразу.

Семантические теги. Нужно уметь выбрать между section, article, button и div. В React соблазн собрать всё из div с обработчиком клика особенно велик, а настоящая кнопка бесплатно даёт фокус с клавиатуры и срабатывание по Enter.

Блочная модель и поток. Почему блок получил именно такие размеры, что делает box-sizing: border-box, откуда берётся горизонтальная прокрутка. Это ровно те же вопросы, что и без React, но отлаживать их в дереве компонентов сложнее. Если тема ощущается зыбкой, начните с разбора почему блок шире, чем вы задали.

Flexbox и Grid. Не наизусть свойства, а умение выбрать: ряд или таблица, кто распределяет свободное место. В React вёрстка каталога живёт в CSS-файле и никуда не девается.

Состояния и доступность по минимуму. :hover, :focus-visible, disabled, видимое кольцо фокуса, связка label и поля. Формы — второй по объёму модуль любого React-проекта, и всё это там сразу понадобится.

Критерий «знаю вёрстку» стоит формулировать не через список тем, а через результат: вы берёте чужой макет и повторяете его без правок на глаз, а на вопрос «почему этот блок такой ширины» отвечаете расчётом, а не пожиманием плечами. Если до этого пока далеко, React ничего не ускорит.

Что можно не знать: анимации, препроцессоры, CSS-in-JS, тонкости шрифтов. Это добирается позже и за вечер.

Что из JavaScript нужно: деструктуризация, map, промисы, async/await, модули

Тоже не «весь язык». Нужен набор, который встречается в каждом втором компоненте.

Деструктуризация. Запись function Card({ product }) — это она, и пропсы без неё читать больно. Плюс раскладка массива: const [value, setValue] = useState(1) — обычная деструктуризация массива, а не магия хука.

Методы массивов. map для рендера списка, filter для фильтра каталога, find, some, reduce для суммы корзины. Ключевое — они возвращают новый массив и не меняют исходный.

Копирование через spread. { ...order, qty: 2 } и [...items, product]. В React состояние обновляют только новым значением: push и присваивание в поле меняют объект на месте, ссылка остаётся прежней, React сравнивает через Object.is, видит совпадение и пропускает рендер.

Функции и замыкания. Стрелочные функции, функция как аргумент, понимание того, что функция, созданная в теле компонента, — каждый раз новая. Без этого невозможно разобраться в зависимостях эффекта.

Промисы, async/await и fetch. Запрос к серверу, ожидание ответа, обработка ошибки. Плюс try/catch и JSON.parse.

Модули. import и export, разница между экспортом по умолчанию и именованным. Проект на React — это два-три десятка файлов, связанных импортами.

Чего из JavaScript можно не знать перед стартом: прототипы и this, классы, генераторы, работа с датами, регулярные выражения, тонкости событийного цикла. Это не значит, что они не нужны никогда — это значит, что до первого компонента они не понадобятся ни разу.

Выражения против инструкций. Тернарный оператор и && вместо if внутри разметки. Это не стиль: в разметку подставляется значение, а у if значения нет.

Чек-лист самопроверки: семь задач, которые вы должны уметь решить

Критерий простой: каждую задачу вы делаете сами, без готового решения перед глазами, и можете объяснить каждую строку. Время на все семь — вечер.

• Сверстать ряд карточек, который на узком экране перестраивается в один столбец, и объяснить, почему выбран flex или grid.
• Найти в чужой странице причину горизонтальной прокрутки и починить её, не подбирая проценты.
• Написать функцию, которая принимает массив товаров и возвращает новый массив только с товарами дешевле 30, отсортированный по цене; исходный массив после вызова не изменился.
• Получить копию объекта с изменённым одним полем и объяснить, чем это отличается от order.qty++.
• Загрузить данные с любого открытого API через fetch и async/await, вывести список, показать сообщение об ошибке при обрыве сети и индикатор во время загрузки — на чистом JavaScript, без библиотек.
• Повесить обработчик события на document, снять его и объяснить, зачем снимать.
• Разложить код по двум файлам, экспортировать функцию из одного и импортировать в другой, запустить это в браузере.

Что делать с результатом чек-листа

Проверяйте себя честно: без готового решения в соседней вкладке, без подсказки нейросети, с первого раза. Задача считается решённой, если вы можете объяснить вслух, зачем в ней каждая строка, и починить её, когда она сломается. Иначе это не навык, а узнавание.

Прошли все семь — можно начинать React, и следующие месяцы уйдут на то, чтобы научиться думать состоянием, а не на борьбу с языком.

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

Прошли вёрстку, но споткнулись на задачах с третьей по седьмую — добирайте JavaScript точечно по списку выше, а не «весь язык с начала».

Если чек-лист пройден целиком, дальше подходит курс «React на практике» — 26 часов, требование к входу у него так и записано: нужна вёрстка. Начинается он со сборки проекта на Vite и разбора макета каталога на компоненты, а заканчивается магазином с корзиной, оплатой и выкладкой в сеть — то есть теми задачами, ради которых React вообще берут.

Чего знать НЕ нужно (и на чём новички зря теряют месяцы)

TypeScript. Полезен, но добавляет второй язык поверх незнакомого первого. Берите после двух-трёх проектов на JavaScript.

Redux и другие менеджеры состояния. В современном React их место занимают useState, контекст и useReducer; внешнее хранилище имеет смысл, когда своими руками почувствуете, чего не хватает.

Next.js и серверный рендеринг. Отдельный инструмент со своими правилами. Учить его вместо React — гарантированная каша.

Классовые компоненты и методы жизненного цикла. Они остались в старом коде, и это не тема для входа.

Настройка webpack и Babel. Vite делает сборку одной командой. Конфигурация сборщика — задача, которая появится через год, если вообще появится.

Алгоритмы и задачи с собеседований. К умению собирать интерфейс они отношения не имеют.

Тестирование, паттерны, архитектура. Всё это ложится на опыт. На пустом месте они превращаются в правила без причин.

Почему не стоит начинать с копирования большого проекта из ютуба

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

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

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

Рабочая замена: маленькие задачи, которые вы формулируете сами, плюс намеренные поломки. Собрали счётчик количества товара — сломайте его: сделайте прибавление двух через два вызова сеттера подряд и посмотрите, почему прибавляется один. Написали эффект с подпиской — уберите функцию очистки и посмотрите, как после пяти открытий модалки Escape срабатывает пять раз. Такие поломки запоминаются лучше любого объяснения, потому что вы сами видите причину и следствие.

Порядок тем внутри самого React

Последовательность, в которой темы не мешают друг другу, выглядит так: сборка проекта и JSX; компоненты и пропсы; состояние через useState; списки, ключи и условный рендеринг; формы и валидация; эффекты и загрузка данных с сервера; состояния загрузки и ошибки; маршрутизация; общее состояние — контекст и useReducer; производительность и лишние рендеры; тесты; сборка и деплой.

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

Второе — зависимости эффекта. React сравнивает их через Object.is: примитивы по значению, объекты, массивы и функции — по ссылке. Объект, созданный прямо в теле компонента, на каждом рендере новый, сравнение проваливается, и эффект запускается снова и снова. Отсюда растёт большинство бесконечных циклов, и понимание ссылок из чек-листа окупается именно здесь.

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

Отдельно стоит знать заранее: в режиме разработки React монтирует компонент дважды, поэтому эффект отрабатывает два раза. Это не баг и не повод убирать StrictMode — это проверка того, что ваш эффект правильно за собой убирает.

React, Vue или что-то ещё: короткий честный ответ

Разница между ними для новичка меньше, чем разница между «знаю вёрстку» и «не знаю». Компоненты, пропсы, состояние, списки с ключами, эффекты — есть везде, и второй фреймворк после первого даётся за пару недель.

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

Тот же ответ и про «модный стек». Vue, Svelte, Solid, Angular меняют синтаксис и набор договорённостей, но не меняют задач: разложить интерфейс на части, хранить состояние в одном месте, показать загрузку и ошибку, не сломать вёрстку на узком экране. Всё это переносится между инструментами почти без потерь, а вот пробелы в вёрстке и языке не переносятся никуда.

И не переключайтесь, пока не довели до конца два-три собственных проекта. Смена инструмента почти всегда переносит момент, когда становится трудно, а не убирает его: трудно будет ровно на том же месте — на состоянии, данных с сервера и крайних случаях.