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