-
Урок 1.
00:01:16
План расширения курса
-
Урок 2.
00:00:42
Скачайте архив с проектами (ОБНОВЛЯЕТСЯ при расширении курса)
-
Урок 3.
00:00:48
Введение в React
-
Урок 4.
00:03:16
Предварительные требования к курсу
-
Урок 5.
00:02:45
Одностраничные приложения
-
Урок 6.
00:04:39
Преимущества и недостатки одностраничных приложений
-
Урок 7.
00:07:06
Основы React и взаимодействие с DOM
-
Урок 8.
00:00:45
Ключевые понятия в React
-
Урок 9.
00:04:23
Компоненты
-
Урок 10.
00:02:49
Иерархия и переиспользование компонентов
-
Урок 11.
00:00:42
Из чего состоят компоненты React
-
Урок 12.
00:02:07
Функциональные и классовые компоненты
-
Урок 13.
00:05:14
JSX - JavaScript Syntax Extension
-
Урок 14.
00:01:51
Встроенные и пользовательские компоненты
-
Урок 15.
00:01:57
Корневой элемент в JSX
-
Урок 16.
00:02:20
Свойства и состояние компонентов
-
Урок 17.
00:02:03
Родительские и дочерние компоненты
-
Урок 18.
00:03:01
Принципы изменения свойств и состояния
-
Урок 19.
00:00:50
Ререндеринг компонентов
-
Урок 20.
00:01:39
Резюме по ключевым понятиям в React
-
Урок 21.
00:00:51
React Hooks
-
Урок 22.
00:02:12
Программы для курса
-
Урок 23.
00:02:21
Установка и настройка расширения Prettier
-
Урок 24.
00:03:50
Проект с Vanilla JS
-
Урок 25.
00:01:30
Запуск приложения с помощью Live Server
-
Урок 26.
00:03:37
Замена текста кнопки при нажатии с помощью JS
-
Урок 27.
00:02:02
Добавление стилей CSS в HTML файле
-
Урок 28.
00:02:47
Изменение стилей кнопки при нажатии
-
Урок 29.
00:01:45
Анализ HTML страницы в инструментах разработчика Google Chrome
-
Урок 30.
00:02:19
Подведение итогов по примеру с Vanilla JS
-
Урок 31.
00:02:51
Пример с подключением React в файл HTML
-
Урок 32.
00:05:36
Создание h1 элемента с помощью React
-
Урок 33.
00:02:05
Подключение библиотеки react-dom
-
Урок 34.
00:00:47
Добавление div для монтирования React приложения
-
Урок 35.
00:02:45
Монтирование приложения React в DOM с помощью react-dom
-
Урок 36.
00:00:57
Проверка успешного добавления React компонента в DOM
-
Урок 37.
00:03:23
Проект по добавлению h1 с помощью Vanilla JS
-
Урок 38.
00:03:08
Сравнения результатов добавления h1 с React и без него
-
Урок 39.
00:02:33
Проект с использованием JSX
-
Урок 40.
00:01:42
Почему код JSX не запустился в веб браузере
-
Урок 41.
00:03:52
Для чего нужен Babel
-
Урок 42.
00:05:13
Трансформация кода JSX с помощью Babel
-
Урок 43.
00:05:40
Попытка сконвертировать код JSX без общего корневого тега
-
Урок 44.
00:01:44
Подведение итогов по Babel
-
Урок 45.
00:02:37
Подключение Babel в файле HTML
-
Урок 46.
00:00:40
Задание типа для JavaScript кода для корректной трансформации Babel
-
Урок 47.
00:01:44
Запуск приложения с JSX при подключенном Babel
-
Урок 48.
00:00:47
Подведение итогов по проекту с JSX и Babel
-
Урок 49.
00:01:24
Обзор сайта с документацией по React
-
Урок 50.
00:03:15
Проект с React с таким же функционалом как в первом проекте
-
Урок 51.
00:01:02
Создание кнопки с помощью React
-
Урок 52.
00:01:40
Почему в JSX нужно использовать className вместо class
-
Урок 53.
00:00:43
Свойства для кнопки в React
-
Урок 54.
00:01:27
Перенос JavaScript кода в отдельный файл
-
Урок 55.
00:06:33
Запуск проекта React с помощью Live Server
-
Урок 56.
00:02:22
Использование JavaScript в коде JSX
-
Урок 57.
00:01:25
Добавление обработчика при нажатии на кнопку
-
Урок 58.
00:03:20
Проверка замены текста на кнопке при нажатии
-
Урок 59.
00:04:11
Перенос кода JSX в функциональный компонент React
-
Урок 60.
00:04:55
Добавление состояния компонента с помощью хука useState
-
Урок 61.
00:01:27
Перезаписывать значения переменных из состояния непрямую нельзя
-
Урок 62.
00:00:47
Изменение состояния с помощью вызова функции
-
Урок 63.
00:01:30
Как меняется реальный DOM при использовании React
-
Урок 64.
00:02:48
Чистые функции и функции с побочными эффектами
-
Урок 65.
00:02:07
Функции с побочными эффектами в React
-
Урок 66.
00:04:51
Изменение стилей кнопки при нажатии с помощью React
-
Урок 67.
00:03:44
Подведение итогов по проекту с изменением кнопки с помощью React
-
Урок 68.
00:05:55
Добавление свойства для компонента
-
Урок 69.
00:00:12
ЗАДАНИЕ - Передать дополнительное свойство
-
Урок 70.
00:02:07
РЕШЕНИЕ - Передать дополнительное свойство
-
Урок 71.
00:04:11
Курс по предварительным требованиям
-
Урок 72.
00:04:37
HTML
-
Урок 73.
00:05:56
CSS
-
Урок 74.
00:01:58
Переменные в JavaScript
-
Урок 75.
00:03:34
Функции
-
Урок 76.
00:02:41
Стрелочные функции
-
Урок 77.
00:03:39
Операторы
-
Урок 78.
00:02:22
Логические операторы
-
Урок 79.
00:02:02
Spread оператор
-
Урок 80.
00:02:45
Деструктуризация объектов
-
Урок 81.
00:01:32
Деструктуризация массивов
-
Урок 82.
00:02:29
Деструктуризация параметров функции
-
Урок 83.
00:02:43
Тернарный оператор
-
Урок 84.
00:03:48
Метод массивов map
-
Урок 85.
00:03:00
Модули ES6
-
Урок 86.
00:04:16
Классы
-
Урок 87.
00:02:17
Промисы и fetch
-
Урок 88.
00:02:29
Async и await
-
Урок 89.
00:02:50
Именование переменных в React
-
Урок 90.
00:03:19
NPM
-
Урок 91.
00:04:17
Семантическое управление версиями
-
Урок 92.
00:01:07
Скрипты NPM
-
Урок 93.
00:00:22
Резюме для курса по предварительным требованиям
-
Урок 94.
00:04:16
Create React App
-
Урок 95.
00:09:40
Создание приложения с помощью Create React App
-
Урок 96.
00:16:46
Обзор содержимого проекта React
-
Урок 97.
00:02:27
Переустановка всех зависимостей NPM
-
Урок 98.
00:02:53
Запуск приложения с помощью npm start
-
Урок 99.
00:13:36
Анализ файлов приложения React
-
Урок 100.
00:06:19
Создание production версии с помощью npm run build
-
Урок 101.
00:07:53
Пересоздание версии для production
-
Урок 102.
00:06:05
Тестирование приложения с помощью npm test
-
Урок 103.
00:10:24
Отключение react-scripts с помощью npm run eject
-
Урок 104.
00:07:24
Запуск приложения после npm run eject
-
Урок 105.
00:04:34
Создание шаблона для последующих проектов
-
Урок 106.
00:04:46
Изменения CSS файлов в шаблонном проекте
-
Урок 107.
00:01:10
Модификация html файла в шаблонном проекте
-
Урок 108.
00:05:11
Замена favicon в шаблонном проекте
-
Урок 109.
00:01:06
Подведение итогов по очистке шаблонного приложения
-
Урок 110.
00:05:22
Отключение Git в проекте
-
Урок 111.
00:04:54
Проект по переиспользованию компонентов
-
Урок 112.
00:02:45
Вынос компонента в отдельный файл
-
Урок 113.
00:02:34
Что будет если название компонента будет с маленькой буквы
-
Урок 114.
00:00:32
ЗАДАНИЕ - Создание еще одного компонента
-
Урок 115.
00:01:35
РЕШЕНИЕ - Создание еще одного компонента
-
Урок 116.
00:06:20
Проект по использованию props
-
Урок 117.
00:00:15
ЗАДАНИЕ - Добавление свойства для компонента
-
Урок 118.
00:00:58
РЕШЕНИЕ - Добавление свойства для компонента
-
Урок 119.
00:03:08
Деструктуризация свойств
-
Урок 120.
00:07:46
Проект по условному возврату JSX
-
Урок 121.
00:01:15
Значение true для свойств можно опускать
-
Урок 122.
00:03:15
Тернарный оператор в JSX
-
Урок 123.
00:02:54
Резюме по проекту с условным возвратом JSX
-
Урок 124.
00:08:04
Проект с состоянием компонента
-
Урок 125.
00:03:50
Добавление состояния для компонента RandomNum
-
Урок 126.
00:03:37
Создание функции по генерации случайного числа
-
Урок 127.
00:07:37
Генерирование нового случайного числа при нажатии на кнопку
-
Урок 128.
00:00:57
ЗАДАНИЕ - Вынести функцию в отдельный модуль
-
Урок 129.
00:02:23
РЕШЕНИЕ - Вынести функцию в отдельный модуль
-
Урок 130.
00:02:16
ЗАДАНИЕ - Добавление свойства для случайных чисел
-
Урок 131.
00:03:22
РЕШЕНИЕ - Добавление свойства для случайных чисел
-
Урок 132.
00:03:42
Резюме по проекту с генерированием случайных чисел
-
Урок 133.
00:07:35
Проект по передаче состояния через свойства
-
Урок 134.
00:02:07
В состоянии какого компонента сохранять счетчик кликов
-
Урок 135.
00:02:26
Добавление состояния со счетчиком кликов
-
Урок 136.
00:00:14
ЗАДАНИЕ - Передача счетчика в компонент Counter
-
Урок 137.
00:01:59
РЕШЕНИЕ - Передача счетчика в компонент Counter
-
Урок 138.
00:03:58
Изменение состояния из дочернего компонента
-
Урок 139.
00:06:51
Изолирование состояния в родительском компоненте
-
Урок 140.
00:02:15
Резюме по проекту передачи состояния через свойства
-
Урок 141.
00:03:05
Очередность рендеринга компонент
-
Урок 142.
00:02:30
Обновление состояния происходит асинхронно
-
Урок 143.
00:04:31
Расширение React для Google Chrome
-
Урок 144.
00:00:36
Завершение проекта по изменению состояния из дочерних компонент
-
Урок 145.
00:06:16
Отображение данных из массивов
-
Урок 146.
00:09:23
Пример с методом массивов map
-
Урок 147.
00:04:21
Добавление key при использовании метода map
-
Урок 148.
00:01:41
Проект с итерацией по массиву объектов
-
Урок 149.
00:03:42
Генерация случайных данных для проекта
-
Урок 150.
00:03:45
Добавление массива объектов в проект
-
Урок 151.
00:03:34
Итерация по массиву объектов
-
Урок 152.
00:00:47
ЗАДАНИЕ - Передача всех свойств объекта в компонент
-
Урок 153.
00:04:41
РЕШЕНИЕ - Передача всех свойств объекта в компонент
-
Урок 154.
00:06:26
Использование spread оператора для передачи свойств
-
Урок 155.
00:03:30
Отображение данных из объекта в интерфейсе
-
Урок 156.
00:00:39
ЗАДАНИЕ - Создание компонента Persons
-
Урок 157.
00:03:49
РЕШЕНИЕ - Создание компонента Persons
-
Урок 158.
00:04:55
Добавление стилей CSS для карточек
-
Урок 159.
00:04:53
Подведение итогов по проекту с массивом объектов
-
Урок 160.
00:03:11
Использование оператора И в JSX коде
-
Урок 161.
00:02:45
Добавление стилей с помощью свойства style
-
Урок 162.
00:02:12
Добавление обработчика нажатия на кнопку Reset
-
Урок 163.
00:04:47
Условное отображение блока JSX с помощью оператора И
-
Урок 164.
00:01:52
Использование двойного оператора НЕ в JSX
-
Урок 165.
00:00:56
Резюме по проекту с оператором И
-
Урок 166.
00:04:07
Проект по использованию React Fragment
-
Урок 167.
00:02:48
Добавление пустого тега JSX
-
Урок 168.
00:02:31
Почему React не нужно импортировать
-
Урок 169.
00:01:09
Резюме по использованию React Fragment
-
Урок 170.
00:07:05
Проект по неконтролируемым полям ввода
-
Урок 171.
00:06:22
Получение значений из полей ввода
-
Урок 172.
00:02:51
Подведение итогов по проекту с неконтролируемыми полями ввода
-
Урок 173.
00:04:20
Проект по контролируемым полям ввода
-
Урок 174.
00:03:11
Добавление обработчиков изменений в полях ввода
-
Урок 175.
00:00:12
ЗАДАНИЕ - Контролируемое поле для ввода пароля
-
Урок 176.
00:00:42
РЕШЕНИЕ - Контролируемое поле для ввода пароля
-
Урок 177.
00:02:45
Данные из полей ввода теперь находятся в состоянии
-
Урок 178.
00:00:41
Резюме по проекту с контролируемыми полями ввода
-
Урок 179.
00:08:41
Сохранения объекта в состоянии компонента
-
Урок 180.
00:05:47
Проект с использованием свойства children
-
Урок 181.
00:03:56
Добавление других свойств для компонента Wrapper
-
Урок 182.
00:02:12
Резюме по проекту со свойством children
-
Урок 183.
00:06:46
Проект по использованию fetch в компонентах
-
Урок 184.
00:05:11
Проблема с изменением состояния при использовании fetch
-
Урок 185.
00:05:12
Выполнение асинхронных действий с помощью useEffect
-
Урок 186.
00:01:49
Добавление зависимостей в useEffect
-
Урок 187.
00:02:08
Отображение данных от удаленного сервера в интерфейсе
-
Урок 188.
00:03:25
Резюме по проекту с использованием useEffect
-
Урок 189.
00:07:14
Проект с массивом постов
-
Урок 190.
00:00:50
ЗАДАНИЕ - Получение массива постов через API
-
Урок 191.
00:06:27
РЕШЕНИЕ - Получение массива постов через API
-
Урок 192.
00:01:49
Добавление обработки ошибок при запросе на сервер
-
Урок 193.
00:01:06
ЗАДАНИЕ - Отображение массива постов в интерфейсе
-
Урок 194.
00:06:02
РЕШЕНИЕ - Отображение массива постов в интерфейсе
-
Урок 195.
00:02:21
Добавление CSS стилей для постов
-
Урок 196.
00:03:52
Отображение возможных ошибок в интерфейсе
-
Урок 197.
00:04:51
Добавление индикации загрузки данных
-
Урок 198.
00:00:41
Добавления заголовка перед списком постов
-
Урок 199.
00:00:30
ЗАДАНИЕ - Перенос индикатора загрузки на место постов
-
Урок 200.
00:01:48
РЕШЕНИЕ - Перенос индикатора загрузки на место постов
-
Урок 201.
00:04:42
Подведение итогов по проекту с массивом постов
-
Урок 202.
00:03:53
Проект с async await в useEffect
-
Урок 203.
00:05:59
Передача async функции в useEffect
-
Урок 204.
00:05:09
Почему в useEffect нельзя передавать асинхронную функцию
-
Урок 205.
00:01:52
Создание отдельной async функции
-
Урок 206.
00:01:55
Использование IIFE - Immediately Invoked Function Expression
-
Урок 207.
00:05:45
Подведение итогов по проекту с async await
-
Урок 208.
00:02:22
Проект с модулями CSS
-
Урок 209.
00:06:06
Импорт файла с CSS стилями
-
Урок 210.
00:05:14
Создание и подключение модуля CSS
-
Урок 211.
00:07:09
Использование классов из CSS модуля
-
Урок 212.
00:03:19
Подведение итогов по проекту с модулями CSS
-
Урок 213.
00:05:19
Обзор финальной версии Todo App
-
Урок 214.
00:00:53
Первая версия проекта Todo App
-
Урок 215.
00:04:38
Организация файлов в папке components
-
Урок 216.
00:02:57
ЗАДАЧИ для первой итерации Todo App
-
Урок 217.
00:06:08
Создание заготовок для всех компонентов Todo
-
Урок 218.
00:00:33
Функционал добавления новой задачи
-
Урок 219.
00:08:50
Создание и использования состояния с массивом задач
-
Урок 220.
00:11:19
Добавление задач с помощью формы
-
Урок 221.
00:02:06
Проверка добавления и отображения задач
-
Урок 222.
00:03:42
Подведение итогов по первой итерации Todo App
-
Урок 223.
00:08:16
Добавление стилей CSS для компонента TodoForm
-
Урок 224.
00:05:33
Добавление стилей CSS для компонента Todo
-
Урок 225.
00:00:18
ЗАДАЧА - Отображение текста об отсутствии задач
-
Урок 226.
00:01:39
РЕШЕНИЕ - Отображение текста об отсутствии задач
-
Урок 227.
00:07:48
Завершение задачи двойным кликом
-
Урок 228.
00:05:13
Добавление иконки возле каждой задачи
-
Урок 229.
00:05:28
Подведение итогов по созданию первой версии Todo App
-
Урок 230.
00:02:12
Проект по созданию второй версии Todo App
-
Урок 231.
00:05:37
Изменение структуры данных на массив объектов
-
Урок 232.
00:05:34
Генерация уникальных id для задач
-
Урок 233.
00:07:39
Завершение рефакторинга с массивом объектов
-
Урок 234.
00:08:33
Добавление и стилизация кнопок удаления и завершения задач
-
Урок 235.
00:01:41
Удаление отдельных задач
-
Урок 236.
00:10:33
Завершение отдельных задач
-
Урок 237.
00:04:08
Условное добавление классов CSS
-
Урок 238.
00:00:56
Подведение итогов по удалению и завершению задач
-
Урок 239.
00:02:11
Добавление блока с кнопками для всех задач
-
Урок 240.
00:08:35
Создание компонента Button
-
Урок 241.
00:06:21
Удаление всех или завершенных задач
-
Урок 242.
00:00:47
ЗАДАЧА - Скрытие блока с кнопками при отсутствии задач
-
Урок 243.
00:00:50
РЕШЕНИЕ - Скрытие блока с кнопками при отсутствии задач
-
Урок 244.
00:06:29
Отключение кнопки удаления завершенных задач
-
Урок 245.
00:05:57
Использование Button в TodoForm
-
Урок 246.
00:02:55
Отображение текста с количеством завершенных задач
-
Урок 247.
00:04:24
Подведение итогов по созданию второй версии Todo App
-
Урок 248.
00:09:37
Обзор React Router
-
Урок 249.
00:08:39
Что такое URL
-
Урок 250.
00:04:45
Методы HTTP
-
Урок 251.
00:09:45
Обзор навигации на моём сайте
-
Урок 252.
00:03:16
Обзор документации по React Router
-
Урок 253.
00:03:42
Инсталяция пакета react-router-dom
-
Урок 254.
00:09:59
Использование BrowserRouter
-
Урок 255.
00:05:05
Использование компонентов Route и Routes
-
Урок 256.
00:01:01
Добавление маршрутов about и contacts
-
Урок 257.
00:02:07
Маршрут по умолчанию
-
Урок 258.
00:05:37
Создание компонентов с помощью React Snippets
-
Урок 259.
00:03:24
Свойства компонентов Routes и Route
-
Урок 260.
00:05:42
Добавление ссылок на другие страницы
-
Урок 261.
00:04:40
Создание компонента Menu
-
Урок 262.
00:04:15
Вложенные маршруты и компонент Outlet
-
Урок 263.
00:02:34
Создание компонента с общей разметкой
-
Урок 264.
00:02:24
Маршруты со свойством index
-
Урок 265.
00:06:07
Итоги по роутингу и относительные пути
-
Урок 266.
00:04:10
Компонент NavLink и класс active
-
Урок 267.
00:04:27
Использование className для NavLink
-
Урок 268.
00:03:43
Использование style для NavLink
-
Урок 269.
00:03:12
Создание данных для курсов
-
Урок 270.
00:02:56
ЗАДАНИЕ - Создание страниц Courses и SingleCourse с навигацией
-
Урок 271.
00:06:05
РЕШЕНИЕ - Создание страниц Courses и SingleCourse
-
Урок 272.
00:09:35
РЕШЕНИЕ - Добавление ссылок на отдельные курсы
-
Урок 273.
00:03:25
РЕШЕНИЕ - Использование параметров в маршрутах и хук useParams
-
Урок 274.
00:09:30
РЕШЕНИЕ - Добавление информации на странице курса
-
Урок 275.
00:01:34
РЕШЕНИЕ - Подведение итогов
-
Урок 276.
00:03:55
Отображение компонента NotFound если курс не найден
-
Урок 277.
00:10:07
Перенаправление с помощью хука useNavigate
-
Урок 278.
00:05:07
Объект location и хук useLocation
-
Урок 279.
00:01:47
ЗАДАНИЕ - Сортировка курсов на основании строки запроса
-
Урок 280.
00:08:27
РЕШЕНИЕ - Сортировка курсов на основании строки запроса
-
Урок 281.
00:10:10
РЕШЕНИЕ - Функция для сортировки курсов
-
Урок 282.
00:02:33
РЕШЕНИЕ - Проверка сортировки при наличии строки запроса
-
Урок 283.
00:08:24
РЕШЕНИЕ - Перенаправление на страницу курсов
-
Урок 284.
00:03:03
РЕШЕНИЕ - Перенаправление при отсутствии параметра sort
-
Урок 285.
00:03:12
Подведение итогов по задаче с сортировкой курсов
-
Урок 286.
00:06:41
Введение в Context API
-
Урок 287.
00:07:28
Создание контекста
-
Урок 288.
00:05:50
Что такое props render в React
-
Урок 289.
00:01:30
Итоги по Context Provider и Consumer
-
Урок 290.
00:03:56
Использование хука useContext
-
Урок 291.
00:05:24
Как React находит Context Provider
-
Урок 292.
00:05:24
Контекст в виде объекта
-
Урок 293.
00:05:02
Изменение контекста
-
Урок 294.
00:02:02
Структура контекста
-
Урок 295.
00:07:41
Подведение итогов по Context API
-
Урок 296.
00:04:10
Введение в HTML
-
Урок 297.
00:10:26
Что такое HTML и как клиенты взаимодействуют с серверами
-
Урок 298.
00:05:22
Теги HTML
-
Урок 299.
00:03:46
Иерархическая структура HTML
-
Урок 300.
00:06:15
Закрывающие HTML теги и атрибуты тегов
-
Урок 301.
00:06:17
Установка програм для курса по HTML
-
Урок 302.
00:05:16
Создание HTML файла
-
Урок 303.
00:05:26
Открытие HTML файла в веб браузере
-
Урок 304.
00:10:25
Инструменты разработчика в Google Chrome
-
Урок 305.
00:08:28
Добавление изображений, заголовков, параграфов и кнопок
-
Урок 306.
00:11:06
Подключение библиотеки стилей Bootstrap
-
Урок 307.
00:16:57
Использование стилей Bootstrap
-
Урок 308.
00:09:33
Добавление внешних ссылок
-
Урок 309.
00:09:11
Создание собственного стиля CSS
-
Урок 310.
00:12:27
Добавление навигационного меню сверху HTML страницы
-
Урок 311.
00:06:49
Добавление собственного логотипа для веб сайта
-
Урок 312.
00:11:50
Создание второй HTML страницы для веб сайта
-
Урок 313.
00:16:31
Адаптивность отображения карточек
-
Урок 314.
00:07:35
Изменение стилей Bootstrap
-
Урок 315.
00:04:18
Добавление favicon для веб сайта
-
Урок 316.
00:03:44
Резюме курса по HTML
С Уважением!