Полный курс по React JS (Redux / Router / Tailwind CSS)
Подробнее
Что нужно для старта
- Для курса необходимы базовые знания JavaScript / HTML / CSS
Что вы получите
- Изучите все аспекты библиотеки React JS
- Изучите библиотеку для управления маршрутами — React Router
- Изучите библиотеку для управления состояниями — React Redux
- Освойте современный синтаксис Redux Toolkit
- Освойте современный синтаксис React Router 6.4+
- Узнайте о последних обновлениях библиотеки React и современных методах разработки
- Научитесь создавать веб-приложения любой сложности
- Изучите фреймворк для стилизации веб-приложений — Tailwind CSS
- Создите несколько приложений, включая планировщик задач и интернет-магазин
- Узнаете как оптимизировать приложение React
- Разберитесь, с тем как React работает “под капотом”
- Изучите все необходимые хуки и методы React JS
- Изучите современные методы разработки веб-приложений
- Научитесь использовать нейросети в разработке веб-приложений на React
Для кого этот курс
- Для Front End Web разработчиков
Программа курса
- Добро пожаловать на курс!
- Скачиваем материалы к курсу
- Подготовка и проверка ПО
- Настройка VS Code для курса
- Как проходить курс
- Оставайтесь со мной на связи!
- Как работают функции. Типы функций в JS
- Вспоминаем метод find()
- Деструктуризация массивов и объектов
- Операторы Rest & Spread
- `${Template Literals} - шаблонные строки`
- If \ else \ Тернарный оператор ? :
- Логические операторы &&, ||, ??
- Опциональная цепочка?.
- Метод Map()
- Метод filter()
- Метод reduce()
- Метод sort()
- Асинхронность в JS Промисы
- Асинхронность в JS Async / Await
- Тест по JS (Опционально. Для самопроверки)
- Обзор нейросетей
- Лучшие модели искусственного интеллекта на сегодня
- Как оплатить подписку на Chat GPT
- Обзор тарифов Chat GPT
- Программа Chat GPT на разные операционные системы
- Используем Chat GPT для обучения
- Используем Chat GPT для программирования
- Где еще полезен Chat GPT
- Как показывать экран чату GPT
- Генерация изображений с помощью Chat GPT и не только
- Advanced Voice mode в Chat GPT
- Как работает Copilot от GitHub
- Как создать новый проект React
- Hello React! Структура приложения React
- Знакомство с компонентами
- Как создается компонент "под капотом" (CreateReactElemt)
- Как работает JSX
- Условный рендеринг JSX. Отображение части компонента
- Как работает CSS в React
- Как работают пути к файлам и папкам в проекте vite
- Правила JSX. Промежуточный итог
- Что такое Props
- #1-PRACTICE. Работа с Props - (Level 2)
- Подводим итоги. Работа с Props
- Рендеринг компонентов с помощью метода map()
- Деструктуризация Props
- Что такое <> React Fragment
- 3 типа условного рендеринга
- Доп практика с тернарным оператором ? :
- #2-PRACTICE. Работа с Props часть 2 - (Level 2)
- Тест по блоку "Введение в React" - (Level 2)
- Как работают события в React
- Первый Хук - useState()
- Обновление состояния на основе прошлого состояния
- Разница state и переменных
- Что значат декларативный и императивный подход
- Условный рендеринг с useState()
- onMouseEnter c useState. Наведение на элемент
- Устанавливаем React DevTools
- #3-PRACTICE - StateTabs (Level 2)
- #4-PRACTICE - StateCalculator (Level 2)
- Тест по блоку "Углубление в основы React" - (Level 2)
- Обзор проекта
- Создаем структуру приложения
- Условный рендеринг для открытия и закрытия окон
- Создаем массив с задачами
- Делим массив задач на активные и выполненные
- Добавляем функциональность и логику приложению
- Настраиваем кнопки сортировки задач
- Структура файлов React приложения
- Как создать универсальный компонент
- Что такое PropTypes и как их использовать
- Как работает {children} prop
- Что такое проброс Props (Props drilling)
- Что такое композиция компонентов
- Завершаем создание UI Библиотеки
- Явная передача компонента через Props
- Подводим итоги секции курса
- #5-PRACTICE - Универсальное модальное окно - (Level-2)
- Тест по блоку "Важные возможности Props" - (Level-2)
- Подключаемся к Weather API
- Используем useState в логике рендера функции
- Знакомство с useEffect() хуком
- Подробнее про useEffect()
- Обработка ошибок часть 1
- Обработка ошибок часть 2
- Используем данные полученные от API
- Как работает массив зависимостей в useEffect()
- Что будет если не использовать массив зависимостей в useEffect
- Добавляем условную логику
- Добавляем функциональность геолокации
- Что такое Side Effects? Примеры Side Effects
- Как работает функция отчистки в useEffect()
- Что такое гонка состояний?
- Как с помощью обработчиков событий работать с Side Effects
- #6-PRACTICE-Калькулятор обмена валют (Level-2)
- #7-PRACTICE-Добавляем таймер в проект Task List (Level-2)
- Тест по блоку "useEffect" - (Level-2)
- Обзор проекта
- Создаем калькулятор валют часть 1
- Создаем калькулятор валют часть 2
- Создаем калькулятор валют часть 3
- Обзор секции
- Классовые VS Функциональные компоненты
- Компоненты, копии компонентов, элементы
- Что такое "Рендеринг" на самом деле
- Что такое виртуальный DOM
- Что такое Fiber Tree
- Разбираем схему рендеринга
- Что такое мемоизация и зачем она нужна
- Разбираем фазу коммита.
- Почему необходимо использовать key prop
- Как работает пакетное обновление в реакт
- Про Монтирование и Размонтирование компонентов
- Различия Frameworks VS Libraries
- Тест по блоку "Необходимая теория" - (Level-2)
- Переменные vs useState vs useRef
- Используем useRef для доступа к элементам
- Итого: useRef
- Как создать свой собственный хук
- Тест по блоку useRef хук и создание своего хука - (Level 2)
- Настраиваем проект
- Создаем страницы с помощью React Router
- Как создать ссылки в React Router с помощью
- Как создать навигационное меню с помощью NavLink
- Разница между компонентами и страницами
- Абсолютный vs относительный путь в ссылках
- Второй вариант использования компонента на странице
- Как работает компонент Outlet
- Что такое атрибут index в параметрах маршрута
- Как работает useParams хук
- Условный рендеринг продуктов
- Как работает useSearchParams хук
- Используем Query string в проекте
- Как работает useLocation хук
- Как работает useNavigate хук
- Как работает компонент Navigate
- Дополнительные атрибуты ссылок
- Итог: Link vs Navigate vs useNavigate
- Сравнение старого и нового синтаксиса React Router
- #8-PRACTICE-React Router (Level-2)
- Тест по блоку React Router 6.4+ - (Level 2)
- Обзор блока курса
- Как работают CSS модули
- Настраиваем Tailwind
- Работа с цветами в Tailwind
- Как создавать собственные палитры цветов
- Работа с текстовыми стилями в Tailwind
- Padding & Margin & Height & Weight в Tailwind
- Свойство Display и отступы у дочерних элементов
- FlexBox в Tailwind
- CSS Grid в Tailwind
- Абсолютное позиционирование в Tailwind
- Работа с градиентом и кастомизация темы Tailwind
- Объединение классов используя директиву @apply
- Создания UI компонента вместо @apply
- Работа с объектом state NavLink
- Подключаем свои шрифты в проект
- Как работает адаптивный дизайн Tailwind
- Псевдо классы и класс group:
- Как работает класс peer:
- Как работают animation в Tailwind
- Как работают плагины вTailwind
- #9-PRACTICE Заканчиваем проект часть 1 (Level-2)
- Заканчиваем проект часть 2 (Опционально)
- Заканчиваем проект часть 3 (Опционально)
- Как происходила работа с API в React Router до версии 6.4.
- Cовременный способ загрузки данных параметром loader
- Cовременный способ обработки ошибок React Router 6.4+
- Хук useNavigation для получения данных компонентом
- Отправка данных параметром маршрута action
- #10-PRACTICE-Router Data Loading p1 (Level-2)
- #10-PRACTICE-Router Data Loading p2 (Level-2)
- #10-PRACTICE-Router Data Loading p3 (Level-2)
- Тест по блоку React Router 6.4+ Data Loading - (Level 2)
- Подводим итоги всего курса
- Как работает Context API
- #11-PRACTICE-Context API на проекте Task List (Level-2)
- Context API + Children prop
- Небольшая ошибка которую вы могли допустить
- Создаем кастомный хук для useContext
- Тест по блоку Context API - (Level 2)
- Как работает оператор switch
- Варианты использования useState
- Знакомство с useReducer Hook
- Работа useReducer шаг за шагом
- Как работает функция dispatch.
- Объект в начальном состоянии вместо примитива
- Дополнительно о useReducer
- #12-PRACTICE - useReducer хук (Level-2)
- useReducer с загрузкой данных часть 1
- useReducer с загрузкой данных часть 2
- useReducer с загрузкой данных часть 3
- useReducer с загрузкой данных часть 4
- useReducer с загрузкой данных часть 5
- Тест по блоку useReducer хук - (Level 2)
- Обзор проекта
- Создаем initialState и функцию reducer
- Как работает функция createStore и компонент Provider
- Как работает функция dispatch
- Получения state с помощью useSelector hook
- Рефакторинг функции action для dispatch
- Создание экшена удаления юзера
- Как работает Redux Thunk
- Как создавать и использовать несколько редьюсеров
- Тест по блоку Redux With Thunk - (Level 2)
- Устанавливаем RTK в проект
- Создаем файл store
- Создаем "слайс"
- Используем "экшены" из "слайса"
- #13-PRACTICE - Добавьте функционал-(Level-2)
- Redux Dev Extension для браузера
- createAsyncThunk. Подгрузка пользователей
- Обработка ошибок в createAsyncThunk
- Дополнительные возможности createAsyncThunk
- #13-Practice-Завершите приложение-(Level-2)
- Тест по блоку RTK - (Level 2)
- Вкладка profiler в devTools
- Как работает хук useMemo()
- Как работает хук useCallBack()
- Использование children вместо мемоизации
- Ленивая загрузка компонентов
- Компонент Suspense для статуса загрузки
- Тест по блоку Оптимизация проекта - (Level 2)
- Хэширование изображений
- Запускаем npm run build
- Размещение проекта на хостинге
- До встречи на уроках!
- Новые хуки React 19
01Подготовка
- Добро пожаловать на курс!
- Скачиваем материалы к курсу
- Подготовка и проверка ПО
- Настройка VS Code для курса
- Как проходить курс
- Оставайтесь со мной на связи!
02Вспоминаем основное из JS (Опционально)
- Как работают функции. Типы функций в JS
- Вспоминаем метод find()
- Деструктуризация массивов и объектов
- Операторы Rest & Spread
- `${Template Literals} - шаблонные строки`
- If \ else \ Тернарный оператор ? :
- Логические операторы &&, ||, ??
- Опциональная цепочка?.
- Метод Map()
- Метод filter()
- Метод reduce()
- Метод sort()
- Асинхронность в JS Промисы
- Асинхронность в JS Async / Await
- Тест по JS (Опционально. Для самопроверки)
03Мини-курс по ChatGPT для обучения и работы (Опционально)
- Обзор нейросетей
- Лучшие модели искусственного интеллекта на сегодня
- Как оплатить подписку на Chat GPT
- Обзор тарифов Chat GPT
- Программа Chat GPT на разные операционные системы
- Используем Chat GPT для обучения
- Используем Chat GPT для программирования
- Где еще полезен Chat GPT
- Как показывать экран чату GPT
- Генерация изображений с помощью Chat GPT и не только
- Advanced Voice mode в Chat GPT
- Как работает Copilot от GitHub
04Введение в Реакт. (Props / Components / JSX)
- Как создать новый проект React
- Hello React! Структура приложения React
- Знакомство с компонентами
- Как создается компонент "под капотом" (CreateReactElemt)
- Как работает JSX
- Условный рендеринг JSX. Отображение части компонента
- Как работает CSS в React
- Как работают пути к файлам и папкам в проекте vite
- Правила JSX. Промежуточный итог
- Что такое Props
- #1-PRACTICE. Работа с Props - (Level 2)
- Подводим итоги. Работа с Props
- Рендеринг компонентов с помощью метода map()
- Деструктуризация Props
- Что такое <> React Fragment
- 3 типа условного рендеринга
- Доп практика с тернарным оператором ? :
- #2-PRACTICE. Работа с Props часть 2 - (Level 2)
- Тест по блоку "Введение в React" - (Level 2)
05Углубление в основы React (useState & Events)
- Как работают события в React
- Первый Хук - useState()
- Обновление состояния на основе прошлого состояния
- Разница state и переменных
- Что значат декларативный и императивный подход
- Условный рендеринг с useState()
- onMouseEnter c useState. Наведение на элемент
- Устанавливаем React DevTools
- #3-PRACTICE - StateTabs (Level 2)
- #4-PRACTICE - StateCalculator (Level 2)
- Тест по блоку "Углубление в основы React" - (Level 2)
06#01-PROJECT - TaskList - (Level 3)
- Обзор проекта
- Создаем структуру приложения
- Условный рендеринг для открытия и закрытия окон
- Создаем массив с задачами
- Делим массив задач на активные и выполненные
- Добавляем функциональность и логику приложению
- Настраиваем кнопки сортировки задач
07Важные возможности Props
- Структура файлов React приложения
- Как создать универсальный компонент
- Что такое PropTypes и как их использовать
- Как работает {children} prop
- Что такое проброс Props (Props drilling)
- Что такое композиция компонентов
- Завершаем создание UI Библиотеки
- Явная передача компонента через Props
- Подводим итоги секции курса
- #5-PRACTICE - Универсальное модальное окно - (Level-2)
- Тест по блоку "Важные возможности Props" - (Level-2)
08UseEffect хук
- Подключаемся к Weather API
- Используем useState в логике рендера функции
- Знакомство с useEffect() хуком
- Подробнее про useEffect()
- Обработка ошибок часть 1
- Обработка ошибок часть 2
- Используем данные полученные от API
- Как работает массив зависимостей в useEffect()
- Что будет если не использовать массив зависимостей в useEffect
- Добавляем условную логику
- Добавляем функциональность геолокации
- Что такое Side Effects? Примеры Side Effects
- Как работает функция отчистки в useEffect()
- Что такое гонка состояний?
- Как с помощью обработчиков событий работать с Side Effects
- #6-PRACTICE-Калькулятор обмена валют (Level-2)
- #7-PRACTICE-Добавляем таймер в проект Task List (Level-2)
- Тест по блоку "useEffect" - (Level-2)
09#02-PROJECT-Калькулятор обмена валют
- Обзор проекта
- Создаем калькулятор валют часть 1
- Создаем калькулятор валют часть 2
- Создаем калькулятор валют часть 3
10Необходимая теория работы React
- Обзор секции
- Классовые VS Функциональные компоненты
- Компоненты, копии компонентов, элементы
- Что такое "Рендеринг" на самом деле
- Что такое виртуальный DOM
- Что такое Fiber Tree
- Разбираем схему рендеринга
- Что такое мемоизация и зачем она нужна
- Разбираем фазу коммита.
- Почему необходимо использовать key prop
- Как работает пакетное обновление в реакт
- Про Монтирование и Размонтирование компонентов
- Различия Frameworks VS Libraries
- Тест по блоку "Необходимая теория" - (Level-2)
11useRef хук и создание своего хука
- Переменные vs useState vs useRef
- Используем useRef для доступа к элементам
- Итого: useRef
- Как создать свой собственный хук
- Тест по блоку useRef хук и создание своего хука - (Level 2)
12React Router 6.4+ (Без подгрузки данных)
- Настраиваем проект
- Создаем страницы с помощью React Router
- Как создать ссылки в React Router с помощью
- Как создать навигационное меню с помощью NavLink
- Разница между компонентами и страницами
- Абсолютный vs относительный путь в ссылках
- Второй вариант использования компонента на странице
- Как работает компонент Outlet
- Что такое атрибут index в параметрах маршрута
- Как работает useParams хук
- Условный рендеринг продуктов
- Как работает useSearchParams хук
- Используем Query string в проекте
- Как работает useLocation хук
- Как работает useNavigate хук
- Как работает компонент Navigate
- Дополнительные атрибуты ссылок
- Итог: Link vs Navigate vs useNavigate
- Сравнение старого и нового синтаксиса React Router
- #8-PRACTICE-React Router (Level-2)
- Тест по блоку React Router 6.4+ - (Level 2)
13Tailwind course & CSS Modules (Опциональный блок)
- Обзор блока курса
- Как работают CSS модули
- Настраиваем Tailwind
- Работа с цветами в Tailwind
- Как создавать собственные палитры цветов
- Работа с текстовыми стилями в Tailwind
- Padding & Margin & Height & Weight в Tailwind
- Свойство Display и отступы у дочерних элементов
- FlexBox в Tailwind
- CSS Grid в Tailwind
- Абсолютное позиционирование в Tailwind
- Работа с градиентом и кастомизация темы Tailwind
- Объединение классов используя директиву @apply
- Создания UI компонента вместо @apply
- Работа с объектом state NavLink
- Подключаем свои шрифты в проект
- Как работает адаптивный дизайн Tailwind
- Псевдо классы и класс group:
- Как работает класс peer:
- Как работают animation в Tailwind
- Как работают плагины вTailwind
- #9-PRACTICE Заканчиваем проект часть 1 (Level-2)
- Заканчиваем проект часть 2 (Опционально)
- Заканчиваем проект часть 3 (Опционально)
14React Router 6.4+ (С подгрузкой данных)
- Как происходила работа с API в React Router до версии 6.4.
- Cовременный способ загрузки данных параметром loader
- Cовременный способ обработки ошибок React Router 6.4+
- Хук useNavigation для получения данных компонентом
- Отправка данных параметром маршрута action
- #10-PRACTICE-Router Data Loading p1 (Level-2)
- #10-PRACTICE-Router Data Loading p2 (Level-2)
- #10-PRACTICE-Router Data Loading p3 (Level-2)
- Тест по блоку React Router 6.4+ Data Loading - (Level 2)
15Управление state через Context API
- Подводим итоги всего курса
- Как работает Context API
- #11-PRACTICE-Context API на проекте Task List (Level-2)
- Context API + Children prop
- Небольшая ошибка которую вы могли допустить
- Создаем кастомный хук для useContext
- Тест по блоку Context API - (Level 2)
16Продвинутое управление состоянием - useReducer hook
- Как работает оператор switch
- Варианты использования useState
- Знакомство с useReducer Hook
- Работа useReducer шаг за шагом
- Как работает функция dispatch.
- Объект в начальном состоянии вместо примитива
- Дополнительно о useReducer
- #12-PRACTICE - useReducer хук (Level-2)
- useReducer с загрузкой данных часть 1
- useReducer с загрузкой данных часть 2
- useReducer с загрузкой данных часть 3
- useReducer с загрузкой данных часть 4
- useReducer с загрузкой данных часть 5
- Тест по блоку useReducer хук - (Level 2)
17Библиотека Redux With Thunks
- Обзор проекта
- Создаем initialState и функцию reducer
- Как работает функция createStore и компонент Provider
- Как работает функция dispatch
- Получения state с помощью useSelector hook
- Рефакторинг функции action для dispatch
- Создание экшена удаления юзера
- Как работает Redux Thunk
- Как создавать и использовать несколько редьюсеров
- Тест по блоку Redux With Thunk - (Level 2)
18RTK (Redux ToolKit) Современный Redux
- Устанавливаем RTK в проект
- Создаем файл store
- Создаем "слайс"
- Используем "экшены" из "слайса"
- #13-PRACTICE - Добавьте функционал-(Level-2)
- Redux Dev Extension для браузера
- createAsyncThunk. Подгрузка пользователей
- Обработка ошибок в createAsyncThunk
- Дополнительные возможности createAsyncThunk
- #13-Practice-Завершите приложение-(Level-2)
- Тест по блоку RTK - (Level 2)
19Оптимизация проекта
- Вкладка profiler в devTools
- Как работает хук useMemo()
- Как работает хук useCallBack()
- Использование children вместо мемоизации
- Ленивая загрузка компонентов
- Компонент Suspense для статуса загрузки
- Тест по блоку Оптимизация проекта - (Level 2)
20Деплой проекта
- Хэширование изображений
- Запускаем npm run build
- Размещение проекта на хостинге
21До новых встреч!
- До встречи на уроках!
22Обновление React 19
- Новые хуки React 19
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Полный курс по React JS (Redux / Router / Tailwind CSS)» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.

Stepik 

















