Современный 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