cosmos
Организатор
- #1
[Udemy] React - Полный Курс по React [Bogdan Stashchuk]
- Ссылка на картинку
Чему вы научитесь
24 разделов • 189 лекций • Общая продолжительность 10 ч 28 мин
Материалы курса
В курсе используется последняя версия React - 18!
Если вы хотите стать успешным React программистом - этот курс для вас. Это лучший курс для понимания React, изучения всех ключевых функций React, а также закрепления всех полученных знаний на практике с помощью десятков задач.
React - это самая популярная библиотека для создания пользовательских интерфейсов в одностраничных приложениях.
- Вы изучите основные концепции 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 - это самая популярная библиотека для создания пользовательских интерфейсов в одностраничных приложениях.
Показать больше