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

Складчина: Полный курс по 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) Блок по нейросетям в подарок
Мы разберем современные методы разработки, включая разработку с помощью нейросетей.

Программа

1. Подготовка
   
2. Вспоминаем основное из JS (опционально)
   
3. Введение в Реакт. (Props / Components / JSX)
   
4. Углубление в основы React (useState & Events)
   
5. #01-PROJECT - TaskList - (Level 3)
   
6. Важные возможности Props
   
7. UseEffect хук
   
8. #02-PROJECT-Калькулятор обмена валют
   
9. Необходимая теория работы React
   
10. useRef хук и создание своего хука
    
11. React Router 6.4+ (без подгрузки данных)
    
12. Tailwind course & CSS Modules (опциональный блок)
    
13. React Router 6.4+ (с погрузкой данных)
    
14. Управление state через Context API
    
15. Продвинутое управление состоянием - useReducer hook
    
16. Библиотека Redux With Thunks
    
17. RTK (Redux ToolKit) Современный Redux
    
18. Оптимизация проекта
    
19. Деплой проекта

Спойлер: Подробная программа

Подготовка

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

Вспоминаем основное из JS (опционально)

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 (Опционально. Для самопроверки)

Введение в Реакт. (Props / Components / JSX)

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)

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)

1. Обзор проекта
2. Создаем структуру приложения
3. Условный рендеринг для открытия и закрытия окон
4. Создаем массив с задачами
5. Делим массив задач на активные и выполненные
6. Добавляем функциональность и логику приложению
7. Настраиваем кнопки сортировки задач

Важные возможности Props

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 хук

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-Калькулятор обмена валют

1. Обзор проекта
2. Создаем калькулятор валют часть 1
3. Создаем калькулятор валют часть 2
4. Создаем калькулятор валют часть 3

Необходимая теория работы React

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 хук и создание своего хука

1. Переменные vs useState vs useRef
2. Используем useRef для доступа к элементам
3. Итого: useRef
4. Как создать свой собственный хук
5. Тест по блоку useRef хук и создание своего хука - (Level 2)

React Router 6.4+ (без подгрузки данных)

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 (опциональный блок)

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+ (с погрузкой данных)

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

1. Подводим итоги всего курса
2. Как работает Context API
3. #11-PRACTICE-Context API на проекте Task List (Level-2)
4. Contect API + Children prop
5. Небольшая ошибка которую вы могли допустить
6. Создаем кастомный хук для useContext
7. Тест по блоку Context API - (Level 2)

Продвинутое управление состоянием - useReducer hook

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

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

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)

Оптимизация проекта

1. Вкладка profiler в devTools
2. Как работает хук useMemo()
3. Как работает хук useCallBack()
4. Использование children вместо мемоизации
5. Ленивая загрузка компонентов
6. Компонент Suspense для статуса загрузки
7. Тест по блоку Оптимизация проекта - (Level 2)

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

1. Хэширование изображений
2. Запускаем npm run build
3. Размещение проекта на хостинге

Цена 2290 рублей
Скрытая ссылка