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

Программа подробно:

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

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

• Как создать новый проект 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)
  
• Contect 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
  
• Размещение проекта на хостинге