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

Организатор · 25 Июл 2022

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

Вы изучите основные концепции 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 - это самая популярная библиотека для создания пользовательских интерфейсов в одностраничных приложениях.