Логотип Prowid — курсы программирования PROWIDIT Education Academy

React

Курс React — Prowid
Длительность курса
2 мес/ 10 уроков
Индивидуально
В мес 160 AZN
В группе
В мес 130 AZN
При оплате за весь курс в группе
15% скидка
Оплата по частям
50/50
По подписке
от 30 AZN в мес
React — самая популярная JavaScript-библиотека для создания пользовательских интерфейсов. В курсе вы изучите современный React на хуках, с TypeScript и на примере реального проекта.

Идёт набор в новую группу — оставьте заявку, чтобы забронировать место

Записаться на курс Бесплатный пробный урок

Или учитесь сами в личном кабинете → по подписке от 30 AZN в месяц

Программа курса

Введение в React: создание проекта на Vite, JSX
Компоненты, props и фрагменты
Состояние и события: useState
Условный рендеринг, списки и key
Формы: управляемые компоненты, React Hook Form
Стилизация компонентов: CSS Modules, Tailwind CSS
Побочные эффекты и ref: useEffect, useRef, порталы
Context API и useReducer
Пользовательские хуки
React Router: маршрутизация в SPA
Работа с сервером: fetch и TanStack Query
Глобальное состояние: Redux Toolkit и Zustand
React 19: Actions, useActionState, useOptimistic; React Compiler и производительность
React + TypeScript и тесты на Vitest
Классовые компоненты: краткий обзор для legacy-кода
Финальный проект и деплой на Vercel
Как мы учим?

Этапы обучения

01

Вебинар

Студенты подключаются к уроку в прямом эфире. В конце каждого урока студентам отправляется видеозапись занятия.

02

Домашнее задание

Все задания основаны на теме, пройденной на вебинаре. Домашняя работа помогает закрепить материал и лучше его понять.

03

Работа с ментором

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

04

Портфолио

За время курса вы выполните несколько проектов на разные темы — они покажут работодателям ваши навыки.

Самостоятельное обучение

Полная программа в личном кабинете

122 тем с теорией, примерами и практикой. Первые 4 — бесплатно, остальные — по подписке. Интерактивных уроков со слайдами и тренажёрами: 109.

Начать бесплатно Подписка — от 30 AZN в месяц
Знакомство с Reactтем: 6
  1. Что такое React и зачем он нужен
  2. Создание проекта React на Vite
  3. Структура проекта: index.html, main.jsx и createRoot
  4. JSX: разметка в JavaScript и выражения в фигурных скобках
  5. Правила JSX: один корневой элемент, фрагменты и что выводится на экран
  6. Инструменты разработчика: React DevTools и ESLint
Компоненты и propsтем: 7
  1. Функциональные компоненты: создание, вложение, импорт и экспорт
  2. Props: передача данных в компонент
  3. children и композиция компонентов
  4. Условный рендеринг: if, тернарный оператор и &&
  5. Рендеринг списков и ключи (key)
  6. Чистые компоненты и StrictMode
  7. Проект: страница-портфолио из компонентов
События и состояниетем: 10
  1. Обработка событий: onClick, onChange и объект события
  2. Хук useState: состояние компонента
  3. Как React обновляет экран: триггер, рендер и коммит
  4. Состояние как снимок и функция-обновитель
  5. Обновление объектов в состоянии без мутаций
  6. Обновление массивов в состоянии: добавление, удаление, изменение
  7. Как правильно структурировать состояние
  8. Подъём состояния и единый источник истины
  9. Сохранение и сброс состояния: позиция в дереве и key
  10. Проект: счётчик и список задач (Todo)
Формытем: 5
  1. Контролируемые поля: input и textarea
  2. Select, checkbox и radio в React
  3. Отправка формы: onSubmit, preventDefault и FormData
  4. Неконтролируемые поля: defaultValue и загрузка файлов
  5. Валидация форм вручную: ошибки, touched и доступные сообщения
Стилизация компонентовтем: 6
  1. Подключение CSS: className, глобальные и inline-стили
  2. CSS Modules: изолированные стили компонентов
  3. Условные классы и варианты компонентов: clsx
  4. Tailwind CSS: установка в Vite и основы утилит
  5. Переиспользуемые компоненты на Tailwind: cn, варианты и тёмная тема
  6. Проект: каталог товаров с фильтрами и сортировкой
Рефы, эффекты и порталытем: 11
  1. useRef: значения, которые не вызывают перерисовку
  2. Доступ к DOM через ref: фокус, прокрутка и измерения
  3. ref как prop и useImperativeHandle
  4. useEffect: синхронизация с внешними системами
  5. Зависимости эффекта: когда эффект перезапускается
  6. Очистка эффектов: таймеры, подписки и слушатели событий
  7. Загрузка данных в useEffect: загрузка, ошибки и гонки запросов
  8. Когда эффект не нужен: типичные антипаттерны
  9. useEffectEvent: отделяем события от эффектов
  10. Порталы: модальные окна, тултипы и уведомления
  11. Проект: поиск фильмов через публичное API
useReducer, Context и собственные хукитем: 8
  1. useReducer: логика состояния в редьюсере
  2. Context API: передача данных без prop drilling
  3. Context + useReducer: масштабируемое управление состоянием
  4. Производительность контекста и когда его недостаточно
  5. Собственные хуки: вынос и переиспользование логики
  6. Практические хуки: useLocalStorage, useDebounce, useFetch и другие
  7. Паттерны компонентов: compound components, render props и HOC
  8. Проект: приложение-викторина на useReducer и Context
Suspense, границы ошибок и React 19тем: 11
  1. Suspense: запасной интерфейс во время загрузки
  2. Ленивая загрузка компонентов: lazy и разделение кода
  3. Классовые компоненты: обзор для работы с legacy-кодом
  4. Границы ошибок (Error Boundaries)
  5. useTransition: переходы и асинхронные Actions
  6. Actions в формах: проп action и useFormStatus
  7. useActionState: результат и ошибки Action
  8. useOptimistic: оптимистичные обновления интерфейса
  9. API use(): чтение промисов и контекста
  10. Новинки React 19: метаданные документа, Activity и ресурсы
  11. Проект: лента комментариев на Actions и useOptimistic
Маршрутизация: React Router v7тем: 10
  1. React Router v7: установка, режимы и первые маршруты
  2. Навигация: Link, NavLink и useNavigate
  3. Вложенные маршруты, Outlet и layout-маршруты
  4. Динамические сегменты: параметры маршрута и useParams
  5. Параметры строки запроса: useSearchParams и состояние в URL
  6. Загрузка данных маршрута: loader и useLoaderData
  7. Мутации в роутере: action, Form и useFetcher
  8. Обработка ошибок маршрутов: ErrorBoundary и 404
  9. Защищённые маршруты и редиректы
  10. Проект: админ-панель (dashboard) с маршрутизацией
Серверные данные: TanStack Queryтем: 8
  1. API-слой приложения: обёртка над fetch и ошибки HTTP
  2. TanStack Query: серверное состояние и первый useQuery
  3. Ключи запросов и кэш: staleTime, gcTime и повторные запросы
  4. Пагинация и бесконечная прокрутка: placeholderData и useInfiniteQuery
  5. Мутации: useMutation и инвалидация кэша
  6. Оптимистичные обновления в TanStack Query
  7. TanStack Query + React Router: предзагрузка в loader и Suspense
  8. Проект: CRUD-приложение заметок на TanStack Query
Глобальное состояние: Zustand и Redux Toolkitтем: 7
  1. Виды состояния и выбор инструмента
  2. Zustand: простой глобальный стор
  3. Zustand на практике: persist, devtools и слайсы
  4. Redux Toolkit: store, слайсы, useSelector и useDispatch
  5. Асинхронная логика в Redux: createAsyncThunk
  6. RTK Query: загрузка данных в экосистеме Redux
  7. Проект: интернет-магазин с корзиной на глобальном состоянии
TypeScript в Reactтем: 6
  1. TypeScript в React-проекте: шаблон react-ts и tsconfig
  2. Типизация props и children
  3. Типизация состояния и событий
  4. Типизация useRef, useReducer и Context
  5. Дженерик-компоненты и типизация собственных хуков
  6. Проект: перевод интернет-магазина на TypeScript
Формы профессионально: React Hook Form и Zodтем: 6
  1. React Hook Form: register, handleSubmit и ошибки
  2. Zod: схемы валидации и типы данных
  3. React Hook Form + Zod: zodResolver и сообщения об ошибках
  4. Controller и useFieldArray: сторонние компоненты и динамические поля
  5. Отправка формы на сервер: isSubmitting, setError и мутации
  6. Проект: многошаговая форма оформления заявки
Производительностьтем: 7
  1. Почему компонент перерисовывается: причины и лишние рендеры
  2. Профилирование: React DevTools Profiler и Performance tracks
  3. memo и useMemo: пропуск рендеров и кэширование вычислений
  4. useCallback и когда мемоизация не нужна
  5. React Compiler: автоматическая мемоизация
  6. useDeferredValue: отзывчивый интерфейс при тяжёлом рендере
  7. Виртуализация длинных списков
Тестирование: Vitest и React Testing Libraryтем: 6
  1. Vitest: настройка и первые тесты
  2. React Testing Library: рендер и поиск элементов
  3. Взаимодействия в тестах: user-event и моки функций
  4. Асинхронные тесты и мок API с MSW
  5. Тестирование с провайдерами, роутером и собственных хуков
  6. Проект: покрытие тестами интернет-магазина
Продакшен: доступность, авторизация и деплойтем: 8
  1. Доступность (a11y): семантика, ARIA и управление фокусом
  2. Архитектура React-приложения: структура по фичам и алиасы
  3. Переменные окружения в Vite: .env и режимы сборки
  4. Аутентификация с JWT: вход, хранение токена и сессия
  5. Обновление токенов: refresh token и повтор запросов при 401
  6. Сборка и деплой на Vercel и Netlify
  7. Обзор Server Components: мост к Next.js
  8. Финальный проект: полноценное React-приложение

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

Курс React: как записаться

Заполните форму — сообщим дату старта ближайшей группы, расписание и условия оплаты. А можно сначала прийти на бесплатный пробный урок.

+994 77 333 38 36 Или сразу напишите в WhatsApp info@prowid.com

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

WhatsApp