[Udemy] React Полный Курс по React [Bogdan Stashchuk]

Описание

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

Вы изучите основные концепции React, такие как Компоненты (Components), JSX (JavaScript Syntax Extension), Свойства (Props) и Состояние (State)
Поймете, как React работает изнутри, как работают функциональные компоненты и как JSX конвертируется в JavaScript с помощью компилятора Babel
Создадите много различных проектов, начиная с простых, направленных на использование отдельных функций React и заканчивая сложными с разными функциями React

Вы изучите: Create React App, переиспользование компонентов, условный рендеринг, метод map, контролируемые поля ввода.

Материалы курса
24 разделов • 189 лекций • Общая продолжительность 10 ч 28 мин
Материалы курса

Предпросмотр01:15
Скачайте архив с проектами
00:41
Введение в React
00:47
Предварительные требования к курсу
03:15
Предпросмотр02:44
Преимущества и недостатки одностраничных приложений
04:38

Основы React и взаимодействие с DOM
07:05
Ключевые понятия в React
00:44
Компоненты
04:22
Иерархия и переиспользование компонентов
02:48
Из чего состоят компоненты React
00:41
Функциональные и классовые компоненты
02:06
Предпросмотр05:13
Встроенные и пользовательские компоненты
01:50
Корневой элемент в JSX
01:56
Свойства и состояние компонентов
02:19
Родительские и дочерние компоненты
02:02
Принципы изменения свойств и состояния
03:00
Ререндеринг компонентов
00:49
Резюме по ключевым понятиям в React
01:38
React Hooks
00:50

Программы для курса
02:11
Установка и настройка расширения Prettier
02:20

Проект с Vanilla JS
03:49
Запуск приложения с помощью Live Server
01:29
Замена текста кнопки при нажатии с помощью JS
03:36
Добавление стилей CSS в HTML файле
02:01
Изменение стилей кнопки при нажатии
02:46
Анализ HTML страницы в инструментах разработчика Google Chrome
01:44
Подведение итогов по примеру с Vanilla JS
02:18

Ссылки для подключения React, React DOM и Babel
00:05
Пример с подключением React в файл HTML
02:50
Создание h1 элемента с помощью React
05:35
Подключение библиотеки react-dom
02:04
Добавление div для монтирования React приложения
00:46
Монтирование приложения React в DOM с помощью react-dom
02:44
Проверка успешного добавления React компонента в DOM
00:56
Проект по добавлению h1 с помощью Vanilla JS
03:22
Сравнения результатов добавления h1 с React и без него
03:07

Проект с использованием JSX
02:32
Почему код JSX не запустился в веб браузере
01:41
Для чего нужен Babel
03:51
Трансформация кода JSX с помощью Babel
05:12
Попытка сконвертировать код JSX без общего корневого тега
05:39
Подведение итогов по Babel
01:43
Подключение Babel в файле HTML
02:36
Задание типа для JavaScript кода для корректной трансформации Babel
00:39
Запуск приложения с JSX при подключенном Babel
01:43
Подведение итогов по проекту с JSX и Babel
00:46
Обзор сайта с документацией по React
01:23

Проект с React с таким же функционалом как в первом проекте
03:14
Создание кнопки с помощью React
01:01
Почему в JSX нужно использовать className вместо class
01:39
Предпросмотр00:42
Перенос JavaScript кода в отдельный файл
01:26
Запуск проекта React с помощью Live Server
06:32
Использование JavaScript в коде JSX
02:21
Добавление обработчика при нажатии на кнопку
01:24
Проверка замены текста на кнопке при нажатии
03:19
Перенос кода JSX в функциональный компонент React
04:10

Добавление состояния компонента с помощью хука useState
04:54
Перезаписывать значения переменных из состояния непрямую нельзя
01:26
Изменение состояния с помощью вызова функции
00:46
Предпросмотр01:29
Чистые функции и функции с побочными эффектами
02:47
Функции с побочными эффектами в React
02:06
Изменение стилей кнопки при нажатии с помощью React
04:50
Подведение итогов по проекту с изменением кнопки с помощью React
03:43
Добавление свойства для компонента
05:54
ЗАДАНИЕ — Передать дополнительное свойство
00:11
РЕШЕНИЕ — Передать дополнительное свойство
02:06

Курс по предварительным требованиям
04:10
HTML
04:36
CSS
05:55
Переменные в JavaScript
01:57
Функции
03:33
Стрелочные функции
02:40
Операторы
03:38
Логические операторы
02:21
Spread оператор
02:01
Деструктуризация объектов
02:44
Деструктуризация массивов
01:31
Деструктуризация параметров функции
02:28
Тернарный оператор
02:42
Метод массивов map
03:47
Модули ES6
02:59
Классы
04:15
Промисы и fetch
02:16
Async и await
02:28
Именование переменных в React
02:49
NPM
03:18
Семантическое управление версиями
04:16
Скрипты NPM
01:06
Резюме для курса по предварительным требованиям
00:21

Create React App
04:15
Создание приложения с помощью Create React App
09:39
Обзор содержимого проекта React
16:45
Переустановка всех зависимостей NPM
02:26
Запуск приложения с помощью npm start
02:52
Анализ файлов приложиения React
13:35
Создание production версии с помощью npm run build
06:18
Пересоздание версии для production
07:52
Тестирование приложения с помощью npm test
06:04
Отключение react-scripts с помощью npm run eject
10:23
Запуск приложения после npm run eject
07:23

Создание шаблона для последующих проектов
04:33
Изменения CSS файлов в шаблонном проекте
04:45
Модификация html файла в шаблонном проекте
01:09
Замена favicon в шаблонном проекте
05:10
Подведение итогов по очистке шаблонного приложения
01:05
Отключение Git в проекте
05:21

Проект по переиспользованию компонентов
04:53
Вынос компонента в отдельный файл
02:44
Что будет если название компонента будет с маленькой буквы
02:33
ЗАДАНИЕ — Создание еще одного компонента
00:31
РЕШЕНИЕ — Создание еще одного компонента
01:34

Проект по использованию props
06:19
ЗАДАНИЕ — Добавление свойства для компонента
00:14
РЕШЕНИЕ — Добавление свойства для компонента
00:57
Деструктуризация свойств
03:07

Проект по условному возврату JSX
07:45
Значение true для свойств можно опускать
01:14
Тернарный оператор в JSX
03:14
Резюме по проекту с условным возвратом JSX
02:53

Проект с состоянием компонента
08:03
Добавление состояния для компонента RandomNum
03:49
Создание функции по генерации случайного числа
03:36
Генерирование нового случайного числа при нажатии на кнопку
07:36
ЗАДАНИЕ — Вынести функцию в отдельный модуль
00:56
РЕШЕНИЕ — Вынести функцию в отдельный модуль
02:22
ЗАДАНИЕ — Добавление свойства для случайных чисел
02:15
РЕШЕНИЕ — Добавление свойства для случайных чисел
03:21
Резюме по проекту с генерированием случайных чисел
03:41

Проект по передаче состояния через свойства
07:34
В состоянии какого компонента сохранять счетчик кликов
02:06
Добавление состояния со счетчиком кликов
02:25
ЗАДАНИЕ — Передача счетчика в компонент Counter
00:13
РЕШЕНИЕ — Передача счетчика в компонент Counter
01:58
Изменение состояния в дочернем компоненте
03:57
Изолирование состояния в родительском компоненте
06:50
Резюме по проекту передачи состояния через свойства
02:14
Очередность рендеринга компонент
03:04
Обновление состояния происходит асинхронно
02:29
Расширение React для Google Chrome
04:30
Завершение проекта по изменению состояния из дочерних компонент
00:35

Отображение данных из массивов
06:15
Пример с методом массивов map
09:22
Добавление key при использовании метода map
04:20

Проект с итерацией по массиву объектов
01:40
Генерация случайных данных для проекта
03:41
Добавление массива объектов в проект
03:44
Итерация по массиву объектов
03:33
ЗАДАНИЕ — Передача всех свойств объекта в компонент
00:46
РЕШЕНИЕ — Передача всех свойств объекта в компонент
04:40
Использование spread оператора для передачи свойств
06:25
Отображение данных из объекта в интерфейсе
03:29
ЗАДАНИЕ — Создание компонента Persons
00:38
РЕШЕНИЕ — Создание компонента Persons
03:48
Добавление стилей CSS для карточек
04:54
Подведение итогов по проекту с массивом объектов
04:52

Использование оператора И в JSX коде
03:10
Добавление стилей с помощью свойства style
02:44
Добавление обработчика нажатия на кнопку Reset
02:11
Условное отображение блока JSX с помощью оператора И
04:46
Использование двойного оператора НЕ в JSX
01:51
Резюме по проекту с оператором И
00:55

Проект по использованию React Fragment
04:06
Добавление пустого тега JSX
02:47
Почему React не нужно импортировать
02:30
Резюме по использованию React Fragment
01:08

Проект по неконтролируемым полям ввода
07:04
Получение значений из полей ввода
06:21
Подведение итогов по проекту с неконтролируемыми полями ввода
02:50

Проект по контролируемым полям ввода
04:19
Добавление обработчиков изменений в полях ввода
03:10
ЗАДАНИЕ — Контролируемое поле для ввода пароля
00:11
РЕШЕНИЕ — Контролируемое поле для ввода пароля
00:41
Данные из полей ввода теперь находятся в состоянии
02:44
Резюме по проекту с контролируемыми полями ввода
00:40
Сохранения объекта в состоянии компонента
08:40

Проект с использованием свойства children
05:46
Добавление других свойств для компонента Wrapper
03:55
Резюме по проекту со свойством children
02:11

Проект по использованию fetch в компонентах
06:45
Проблема с изменением состояния при использовании fetch
05:10
Выполнение асинхронных действий с помощью useEffect
05:11
Добавление зависимостей в useEffect
01:48
Отображение данных от удаленного сервера в интерфейсе
02:07
Резюме по проекту с использованием useEffect
03:24

Описание
В курсе используется последняя версия React — 18!
Если вы хотите стать успешным React программистом — этот курс для вас. Это лучший курс для понимания React, изучения всех ключевых функций React, а также закрепления всех полученных знаний на практике с помощью десятков задач.
React — это самая популярная библиотека для создания пользовательских интерфейсов в одностраничных приложениях.