Современный React с Нуля (2022)

[admin]

Применение самой популярной JS библиотеки, используя современный подход хуков и функциональных компонентов!


Чему вы научитесь

Как работает React
Создание React компонентов
Создание пользовательских интерфейсов
Что такое props и two-way binding
Cобытия и состояние для создания интерактивных приложений
Как React работает под капотом
Работа со списками и контентом по условию
Способы стилизации компонентов
Хуки






Содержание

Введение
01:35
Предпросмотр05:53
Предпросмотр10:07
Предпросмотр01:57
Альтернативы React (Angular, Vue)
03:40
Обзор Курса
08:06
Настраиваем Инструменты Разработки
04:24

Код Приложения Учёт Расходов
00:06
Предпросмотр05:22
Компоненты - Фундаментальные Блоки Приложений React
08:04
Декларативное Программирование
03:47
Создание Проекта
09:47
Подготовка Проекта
03:27
Обзор Проекта React
11:51
Знакомство с JSX
03:49
Как Работает React
05:10
Создание Компонента
09:00
Более Сложный JSX код
04:33
Добавление CSS Стилей
06:03
Отображение Динамических Данных в JSX
09:16
Передача Данных при Помощи props
14:30
JavaScript Логика в Компонентах
07:21
Разделение Компонента на Несколько Компонентов
11:30
Задание 1
02:46
Задание 1. Решение
06:51
Композиция (props.children)
15:54
Первые Итоги
04:24
Подробнее о JSX
08:15
Организация Файлов Компонентов
03:14
Альтернативный Синтаксис Функций
03:49





Краткий Обзор Раздела
02:30

Прослушивание Событий и Работа с Обработчиками Событий
09:06

Как Выполняются Функции-Компоненты
07:04

Работа с Состоянием
12:21

Подробнее о Хуке useState
06:58

Добавление Формы Ввода
08:32

Прослушивание Ввода Пользователя
05:17

Работа с Несколькими Состояниями
06:56

Использование Одного Состояния
06:01

Обновление Состояния, Зависящего от Предыдущего Состояния
05:42

Обработка Отправки Формы
06:16

Добавление Двустороннего Связывания
03:39

Коммуникация Компонентов Наследник-Родитель (Снизу Вверх)
17:15

Подъём Состояния Вверх
07:32

Задание 2
03:02

Задание 2. Решение
09:15

Компоненты - Контролируемые vs Неконтролируемые, с Состоянием vs без Состояния
07:49



Краткий Обзор Раздела
01:04
Отображение Списков Данных
08:23
Использование Списков с Состоянием
06:06
Keys
07:13
Задание 3
01:32
Задание 3. Решение
06:15
Отображение Контента по Условию
09:15
Возвращение Значения по Условию
07:28
Задание 4
01:22
Задание 4. Решение
07:11
Добавляем Диаграмму Расходов
08:42
Динамические Стили
08:20
Завершаем Разработку Приложения
16:09





Хорошая Новость!
00:09



Краткий Обзор Раздела
06:05
Динамическое Добавление Стилей Inline
09:47
Динамическое Добавление CSS Классов
04:42
Знакомство со Styled Components
09:13
Styled Components и Динамические Props
11:48
Styled Components и Media Queries
02:31
Использование CSS Модулей
06:46
Динамические Стили и CSS Модули
05:47





Краткий Обзор Раздела
02:07

Сообщения об Ошибках в React
06:28

Анализ Кода и Предупреждения
06:42

Работа с Breakpoints
06:09

Использование React DevTools
05:35



Краткий Обзор Раздела
04:46
Добавление Компонента CreateUser
06:17
Добавление Компонента Card
09:33
Добавление Компонента Button
04:55
Управление Состоянием Ввода Данных
06:46
Добавление Валидации и Логики Сброса
05:11
Добавление Компонента UserList
09:58
Управление Списком Пользователей Через Состояние
12:07
Добавление Компонента ErrorModal
09:19
Управление Состоянием Ошибок
09:21





Краткий Обзор Раздела
01:10

Ограничения JSX
06:35

Создание Компонента Обёртки. Фрагменты
05:24

Порталы
06:19

Работа с Порталами
14:23

Работа с refs
13:02



Краткий Обзор Раздела
01:39
Что Такое Побочные Эффекты
07:42
Использование Хука useEffect
13:32
useEffect и Зависимости
07:42
Использование Функции Очистки
09:53
Reducers
09:48
Использование Хука useReducer
16:48
useReducer и useEffect
10:18
useState vs useReducer
03:20
Context
07:04
Использование Context API
09:18
Использование Хука useContext
01:52
Динамический Context
04:30
Кастомный Компонент Context Provider
10:01
Ограничения Context
03:19
Правила Хуков
05:13
Рефакторинг Компонента Input
07:18
forwardRef & useImperativeHandle
14:00





Предпросмотр02:28

Создание Структуры Проекта
04:51

Добавление Компонента Header
06:33

Добавление Компонента HeaderCartButton
05:13

Добавление Компонентов для Отображения Блюд
08:30

Отображение Блюд
09:08

Добавление Формы
08:16

Исправление Небольшого Бага
05:08

Добавление Компонента Cart
05:42

Добавление Модального Окна
06:45

Управление Состоянием Cart и Modal
09:02

Добавление Контекста Cart
07:18

Использование Контекста
05:24

Добавление Reducer в Cart
11:40

Использование refs
12:09

Отображение Элементов Корзины
07:45

Усложнение Логики Reducer
07:08

Добавление Функциональности Удаления Элементов
09:46

Использование useEffect
07:41



Краткий Обзор Раздела
01:46
Как Работает React
07:42
Обновление Компонентов
08:54
Переоценка Дочернего Компонента
13:39
Предотвращение Ненужных Переоценок при Помощи React.memo()
11:41
Предотвращение Пересоздания Функций при Помощи useCallback()
04:58
useCallback & dependencies
08:00
Первые Итоги
05:09
Подробнее о Состоянии и Компонентах
04:06
Планирование Состояний
04:28





Краткий Обзор Раздела
01:54

Что Такое Компоненты на Основе Классов?
03:35

Первый Компонент на Основе Класса
06:55

Работа с Состояниями и Событиями
11:00

Жизненный Цикл Компонентов на Основе Классов
07:41

Life-cycle Методы
11:01

Компоненты на Основе Классов и Контекст
04:11

Компоненты на Основе Классов vs Функциональные Компоненты
02:40

Error Boundaries



www.udemy.com/course/react-np/