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

Топикстартер · 23 май 2022

Складчина: Современный React с Нуля (2022)
Применение самой популярной 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

Скрытая ссылка