React: Современная Frontend-разработка
Освойте создание высокопроизводительных веб-приложений на React с использованием актуального стека: Vite, TypeScript и R... Показать полностью
Освойте создание высокопроизводительных веб-приложений на React с использованием актуального стека: Vite, TypeScript и Redux Toolkit. Курс охватывает путь от основ JSX и работы с хуками до продвинутой оптимизации, тестирования и настройки CI/CD. Вы научитесь не просто писать код, а проектировать масштабируемую архитектуру, работать с серверными данными через RTK Query и внедрять лучшие практики индустрии. Свернуть
4 учащихся
Язык: Русский
Уровень: Средний
О курсе
Этот курс — комплексная программа подготовки по React, ориентированная на требования современного рынка. Вы начнете с основ: декларативного подхода, Virtual DOM и настройки окружения на Vite и TypeScript. Вы научитесь создавать функциональные компоненты, передавать данные через пропсы и управлять состоянием. Особое внимание уделено хукам — от базовых до мемоизации и создания кастомных решений. Вы освоите Redux Toolkit для глобального стейта и RTK Query для работы с API и кэшированием. Также в программе: React Router, архитектура запросов и стилизация через CSS-in-JS или UI-библиотеки. В финале вы разберете тестирование на Vitest, сборку проекта и деплой через Docker и CI/CD. К концу обучения вы сможете самостоятельно разрабатывать и развертывать масштабируемые веб-приложения, готовые к реальному продакшену.
Модули курса
-
Введение в экосистему и основы JSX
- Введение
- Что такое React: декларативный подход и Virtual DOM.
- Настройка окружения (Vite, TypeScript, ESLint).
- Синтаксис JSX: правила, выражения и вложенность.
- Рендеринг элементов и фрагменты.
-
Компоненты и Props
- Функциональные компоненты: структура и чистота.
- Передача данных через Props: типизация и деструктуризация.
- Рендеринг списков (map) и важность уникальных ключей (key).
- Условный рендеринг (тернарные операторы, логическое «И»).
-
Состояние и управление событиями
- Хук useState: инициализация и обновление состояния.
- Обработка событий в React (синтетические события).
- Поднятие состояния (Lifting State Up).
- Работа с формами: управляемые и неуправляемые компоненты.
-
Жизненный цикл и побочные эффекты
- Хук useEffect: синхронизация компонента с внешними системами...
- Очистка эффектов (Cleanup function) и предотвращение утечек ...
- Массив зависимостей: типичные ошибки и бесконечные циклы.
- Жизненный цикл компонента в функциональном стиле.
-
Продвинутые хуки и оптимизация
- useRef: доступ к DOM-узлам и хранение изменяемых значений.
- Мемоизация вычислений с useMemo.
- Стабилизация ссылок на функции с useCallback.
- Создание собственных (Custom) хуков для переиспользования ло...
-
Управление глобальным состоянием
- Context API: когда использовать и в чем ограничения.
- Введение в Redux Toolkit (RTK): Store, Slices, Reducers.
- Работа с асинхронностью в RTK (createAsyncThunk).
- Альтернативные подходы (Zustand или Recoil).
-
Навигация в приложении
- Настройка React Router: Routes, Route, Link.
- Динамические пути и параметры (params, query string).
- Программная навигация и защищенные роуты (Protected Routes).
- Ленивая загрузка компонентов (React.lazy, Suspense).
-
Взаимодействие с API и данными
- Архитектура запросов: Fetch API и Axios.
- Работа с серверным состоянием через RTK Query (или TanStack ...
- Обработка состояний загрузки (Loading) и ошибок (Error Bound...
- Паттерны кэширования данных.
-
Стилизация и дизайн-системы
- CSS-модули и компонентный подход к стилям.
- Styled Components и Emotion (CSS-in-JS).
- Работа с библиотеками компонентов (на примере Ant Design или...
- Адаптивная верстка в React: сетки (Grid/Flex) и хуки для Bre...
-
Тестирование и деплой
- Юнит-тестирование компонентов (Vitest, React Testing Library...
- Интеграционные тесты и мокирование запросов (MSW).
- Сборка проекта для Production.
- CI/CD и стратегии развертывания (Vercel, Docker).
