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