[Дмитрий Фокеев] [Stepik] Полный курс по React JS (Redux / Router / Tailwind CSS) (2025)

[Дмитрий Фокеев] [Stepik] Полный курс по React JS (Redux / Router / Tailwind CSS) (2025)

Слив курса Полный курс по React JS (Redux / Router / Tailwind CSS) [stepik] [Дмитрий Фокеев]
Ультимативный курс по React JS + Полное изучение библиотек экосистемы React ( Redux / Router ) Бонус - полный курс по Tailwind CSS

Чему вы научитесь:
- Изучите все аспекты библиотеки React JS
- Изучите библиотеку для управления маршрутами — React Router
- Изучите библиотеку для управления состояниями — React Redux
- Освойте современный синтаксис Redux Toolkit
- Освойте современный синтаксис React Router 6.4+
- Узнайте о последних обновлениях библиотеки React и современных методах разработки
- Научитесь создавать веб-приложения любой сложности
- Изучите фреймворк для стилизации веб-приложений — Tailwind CSS
- Создите несколько приложений, включая планировщик задач и интернет-магазин
- Узнаете как оптимизировать приложение React
- Разберитесь, с тем как React работает “под капотом”
- Изучите все необходимые хуки и методы React JS
- Изучите современные методы разработки веб-приложений
- Научитесь использовать нейросети в разработке веб-приложений на React

Внутри курса вас ждет:
- Весь нативный React — от самых простых вещей до продвинутых концепций, шаг за шагом вместе с преподавателем.
- Полное изучение ключевых библиотек экосистемы React — React Redux и React Router, включая актуальный синтаксис и современные стандарты разработки.
- Более 200 видеоуроков, раскрывающих все нюансы создания веб-приложений на React.
- Более 13 практических заданий на самостоятельное выполнение по каждой теме курса.
- Авторское интерактивное пособие — учебник на более чем 270 страниц.
- Бонусный модуль по разработке с использованием нейросетей.

1) Полное понимание React JS / React Redux / React Router
В этом курсе мы разберемся, как React работает под капотом, чтобы вы понимали его логику и философию, а не просто запоминали методы и функции.

2) Современный курс по React JS
В отличие от многих курсов, основанных на устаревших версиях React, этот курс познакомит вас с самыми современными стандартами разработки, новым синтаксисом, включая React 19 (5 декабря 2024 года), и последними обновлениями библиотек React Redux и React Router, в том числе Redux Toolkit и React Router 6.4+.

3) Бесплатный учебник — пособие к курсу
Вам в помощь я разработал подробное интерактивное пособие на более чем 270 страниц, где собраны все методы и приемы React JS и его экосистемных библиотек.

4) Это пособие — моя отдельная гордость. В нем сотни примеров, объясняющих все нюансы работы React и его библиотек на понятных и доступных примерах.

5) Полный курс по Tailwind CSS
Дополнительно, в качестве бонуса, мы изучим самый современный и востребованный фреймворк для стилизации веб-приложений — Tailwind CSS, который позволит реализовывать любые дизайнерские решения ваших проектов.

6) Практика, практика и только практика
Курс полностью основан на практике. Все темы курса изучаются в процессе разработки множества различных проектов — от табов, переключателей и модальных окон до планировщиков задач, калькуляторов валют и даже интернет-магазина.

7) Блок по необходимым темам JavaScript включен в курс
Для прохождения курса необходимы базовые знания HTML, CSS и JavaScript.
Если вы сомневаетесь в своих знаниях, внутри курса есть отдельный модуль по повторению всего необходимого из нативного JavaScript.

8) Блок по нейросетям в подарок
Мы разберем современные методы разработки, включая разработку с помощью нейросетей.

Программа:

Подготовка
Вспоминаем основное из JS (опционально)

Введение в Реакт. (Props / Components / JSX)
Углубление в основы React (useState & Events)

#01-PROJECT - TaskList - (Level 3)
Важные возможности Props

UseEffect хук
#02-PROJECT-Калькулятор обмена валют

Необходимая теория работы React
useRef хук и создание своего хука

React Router 6.4+ (без подгрузки данных)
Tailwind course & CSS Modules (опциональный блок)

React Router 6.4+ (с погрузкой данных)
Управление state через Context API

Продвинутое управление состоянием - useReducer hook
Библиотека Redux With Thunks

RTK (Redux ToolKit) Современный Redux
Оптимизация проекта

Деплой проекта

Спойлер: Программа подробно:
Подготовка

Добро пожаловать на курс!
Скачиваем материалы к курсу
Подготовка и проверка ПО
Настройка VS Code для курса
Как проходить курс
Вспоминаем основное из JS (опционально)

Как работают функции. Типы функций в JS
Вспоминаем метод find()
Деструктуризация массивов и объектов
Операторы Rest & Spread
`${Template Literals} - шаблонные строки`
If \ else \ Тернарный оператор ? :
Логические операторы &&, ||, ??
Опциональная цепочка?.
Метод Map()
Метод filter()
Метод reduce()
Метод sort()
Асинхронность в JS Промисы
Асинхронность в JS Async / Await
Тест по JS (Опционально. Для самопроверки)
Введение в Реакт. (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)
Углубление в основы 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)
#01-PROJECT - TaskList - (Level 3)

Обзор проекта
Создаем структуру приложения
Условный рендеринг для открытия и закрытия окон
Создаем массив с задачами
Делим массив задач на активные и выполненные
Добавляем функциональность и логику приложению
Настраиваем кнопки сортировки задач
Важные возможности Props

Структура файлов React приложения
Как создать универсальный компонент
Что такое PropTypes и как их использовать
Как работает {children} prop
Что такое проброс Props (Props drilling)
Что такое композиция компонентов
Завершаем создание UI Библиотеки
Явная передача компонента через Props
Подводим итоги секции курса
#5-PRACTICE - Универсальное модальное окно - (Level-2)
Тест по блоку "Важные возможности Props" - (Level-2)
UseEffect хук

Подключаемся к 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)
#02-PROJECT-Калькулятор обмена валют

Обзор проекта
Создаем калькулятор валют часть 1
Создаем калькулятор валют часть 2
Создаем калькулятор валют часть 3
Необходимая теория работы React

Обзор секции
Классовые VS Функциональные компоненты
Компоненты, копии компонентов, элементы
Что такое "Рендеринг" на самом деле
Что такое виртуальный DOM
Что такое Fiber Tree
Разбираем схему рендеринга
Что такое мемоизация и зачем она нужна
Разбираем фазу коммита.
Почему необходимо использовать key prop
Как работает пакетное обновление в реакт
Про Монтирование и Размонтирование компонентов
Различия Frameworks VS Libraries
Тест по блоку "Необходимая теория" - (Level-2)
useRef хук и создание своего хука

Переменные vs useState vs useRef
Используем useRef для доступа к элементам
Итого: useRef
Как создать свой собственный хук
Тест по блоку useRef хук и создание своего хука - (Level 2)
React 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)
Tailwind 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 (Опционально)
React 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)
Управление state через Context API

Подводим итоги всего курса
Как работает Context API
#11-PRACTICE-Context API на проекте Task List (Level-2)
Contect API + Children prop
Небольшая ошибка которую вы могли допустить
Создаем кастомный хук для useContext
Тест по блоку Context API - (Level 2)
Продвинутое управление состоянием - 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)
Библиотека Redux With Thunks

Обзор проекта
Создаем initialState и функцию reducer
Как работает функция createStore и компонент Provider
Как работает функция dispatch
Получения state с помощью useSelector hook
Рефакторинг функции action для dispatch
Создание экшена удаления юзера
Как работает Redux Thunk
Как создавать и использовать несколько редьюсеров
Тест по блоку Redux With Thunk - (Level 2)
RTK (Redux ToolKit) Современный Redux

Устанавливаем 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
Размещение проекта на хостинге