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

75

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

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