Omnex.Study
Курсы / Программирование
⚛️

React с нуля

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

Средний уровень40 часов модулей уроковДоступ навсегда
6 99010 990
Начать бесплатно — первый модуль в подарок

Разовая оплата, без подписки. Школьнику курс покупает родитель из кабинета parents.omnex.study.

О КУРСЕ

Ты знаешь JavaScript и готов войти во фронтенд — но вакансии в один голос требуют React, а туториалы либо застряли в 2018 году с классами, либо тонут в теории. Этот курс — прямой маршрут от «знаю JS» до «пишу на React как уверенный джуниор-мидл», без воды и устаревших практик.

Мы стартуем с современного стека: проект на Vite поднимается за пять минут, а не за пять чашек кофе. Дальше — маленькими шагами через компоненты, пропсы, состояние и хуки к настоящим приложениям: список дел, магазин с корзиной на контексте, многостраничный блог и лента постов поверх реального API. Каждый навык ты сразу закрепляешь руками — в курсе десятки практикумов и 4 полноценных проекта для портфолио.

К финалу ты не просто «прошёл React», а собрал и задеплоил рабочее приложение с роутингом, загрузкой данных через TanStack Query, типами на TypeScript и тестами. У тебя на руках публичная ссылка, код на GitHub и понимание, почему всё работает именно так, — ровно то, что спрашивают на собеседованиях.

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

РЕЗУЛЬТАТ

Чему научишься.

ПРОГРАММА

модулей, уроков.

01

Старт в React: мышление и первый экран

Бесплатный модуль

Как думает React, установка на Vite, JSX, компоненты и композиция — собираем первый экран из кирпичиков.

  • Почему React захватил фронтендТеория · 22 мин
  • Ставим проект на Vite за пять минутТеория · 20 мин
  • JSX: разметка, которая дружит с JavaScriptТеория · 24 мин
  • Компонент — кирпичик интерфейсаТеория · 22 мин
  • Композиция: собираем страницу из кирпичиковТеория · 22 мин
  • Практикум: твой первый экранПрактика · 40 мин
  • Квиз по модулю 1Тест · 15 мин
02

Пропсы, списки и условия

Пропсы и их деструктуризация, вывод списков через map с key, условный рендеринг и children — оживляем компоненты данными.

  • Props: как компоненты передают данныеТеория · 22 мин
  • Деструктуризация и значения по умолчаниюТеория · 20 мин
  • Списки через map и зачем нужен keyТеория · 24 мин
  • Условный рендеринг: показать или спрятатьТеория · 22 мин
  • children: слот для вложенного контентаТеория · 20 мин
  • Практикум: каталог карточек товаровПрактика · 45 мин
  • Квиз по модулю 2Тест · 15 мин
03

State и интерактивность

useState и события, иммутабельные обновления, управляемые формы и подъём состояния — собираем первый интерактивный проект.

  • useState: память компонентаТеория · 24 мин
  • События: onClick и его друзьяТеория · 22 мин
  • State иммутабелен: не меняй, а создавай новоеТеория · 24 мин
  • Управляемые формы: input под контролемТеория · 22 мин
  • Подъём состояния: общий родительТеория · 22 мин
  • Проект: интерактивный список делПроект · 70 мин
  • Квиз по модулю 3Тест · 15 мин
04

Эффекты и данные

Побочные эффекты через useEffect, массив зависимостей, загрузка данных с сервера, очистка эффектов и правила хуков.

  • useEffect: выходим во внешний мирТеория · 24 мин
  • Массив зависимостей: сердце useEffectТеория · 22 мин
  • Загружаем данные с сервера через fetchТеория · 26 мин
  • Очистка эффектов: за собой прибираемТеория · 22 мин
  • Правила хуков: почему порядок важенТеория · 20 мин
  • Практикум: виджет загрузки данныхПрактика · 45 мин
  • Квиз по модулю 4Тест · 15 мин
05

Хуки глубже: ref, context, reducer, мемоизация

useRef, useContext, useReducer, useMemo и useCallback плюс кастомные хуки — арсенал уверенного мидла и проект на контексте.

  • useRef: ссылка на DOM и не толькоТеория · 22 мин
  • useContext: данные без пробрасывания пропсовТеория · 24 мин
  • useReducer: порядок в сложном состоянииТеория · 24 мин
  • useMemo и useCallback: точечная оптимизацияТеория · 22 мин
  • Кастомные хуки: своя логика на переиспользованиеТеория · 24 мин
  • Проект: магазин с корзиной и темой на контекстеПроект · 80 мин
  • Квиз по модулю 5Тест · 15 мин
06

Роутинг: многостраничные приложения

Клиентская маршрутизация на React Router: маршруты, ссылки, параметры URL, программная навигация и вложенные страницы.

  • React Router: навигация без перезагрузкиТеория · 22 мин
  • Routes, Route и LinkТеория · 22 мин
  • Динамические маршруты и useParamsТеория · 22 мин
  • Программная навигация и вложенные маршрутыТеория · 24 мин
  • Практикум: многостраничный блогПрактика · 50 мин
  • Квиз по модулю 6Тест · 15 мин
07

Данные с сервера по-взрослому

Валидация форм, async в обработчиках, TanStack Query для чтения и мутаций, аккуратные состояния загрузки — данные с сервера по-взрослому.

  • Формы посерьёзнее: валидацияТеория · 24 мин
  • async/await в обработчиках: отправка данныхТеория · 24 мин
  • TanStack Query: кэш из коробкиТеория · 26 мин
  • Мутации: создаём и обновляем данныеТеория · 24 мин
  • Состояния загрузки и ошибок красивоТеория · 22 мин
  • Проект: лента постов поверх реального APIПроект · 90 мин
  • Квиз по модулю 7Тест · 15 мин
08

Продакшн, инструменты, деплой

Структура проекта, стилизация (CSS Modules, Tailwind), TypeScript, оптимизация, тестирование и деплой финального приложения.

  • Структура проекта, которая не развалитсяТеория · 20 мин
  • Стилизация: CSS Modules и TailwindТеория · 22 мин
  • TypeScript в React: мягкий входТеория · 24 мин
  • Оптимизация: где React тормозит и как чинитьТеория · 24 мин
  • Тестирование компонентов: Vitest и Testing LibraryТеория · 24 мин
  • Финальный проект: приложение и деплойПроект · 120 мин
  • Квиз по модулю 8Тест · 15 мин
ИНСТРУМЕНТЫ

С чем будешь работать.

React (v18+, функциональные компоненты и хуки)Vite — сборщик и dev-серверReact Router (react-router-dom)TanStack Query (@tanstack/react-query)TypeScriptCSS Modules и Tailwind CSSVitest и React Testing LibraryReact DevToolsGit и GitHub, деплой на Vercel или NetlifyVS Code

React с нуля: первый модуль — бесплатно.

Начать бесплатно — первый модуль в подарок
React с нуля | Omnex.Study