Темная тема
The Ultimate React Course - React, Redux & More
01. Добро пожаловать!
001 - План курса и проекты
002 - Создание нашего первого React-приложения!
003 - Посмотрите перед началом!
004 - Загрузка материалов курса
02. Часть 1
005 - Введение
03. Первый взгляд на React
006 - Обзор раздела
007 - Почему существуют фронтенд-фреймворки
008 - React против чистого JavaScript
009 - Что такое React
010 - Настройка среды разработки
011 - Чистый React
012 - Краткий обзор официальной документации React
013 - Создание нового React-проекта
014 - Создание проекта с помощью Create React App
04. Повторение основ JavaScript
015 - Обзор раздела
016 - Деструктуризация объектов и массивов
017 - Оператор Rest, Spread
018 - Шаблонные строки
019 - Тернарные операторы вместо if, else
020 - Стрелочные функции
021 - Короткое замыкание и логические операторы
022 - Опциональная цепочка (Optional Chaining)
023 - Метод массива map
024 - Метод массива filter
025 - Метод массива reduce
026 - Метод массива sort
027 - Работа с иммутабельными массивами
028 - Асинхронный JavaScript - Promises
029 - Асинхронный JavaScript - Async, Await
05. Компоненты, props и JSX
030 - Обзор раздела
031 - Рендеринг корневого компонента и Strict Mode
032 - Перед тем как начать кодить - Отладка
033 - Компоненты как строительные блоки
034 - Создание и повторное использование компонента
035 - Что такое JSX
036 - Создание большего количества компонентов
037 - JavaScript-логика в компонентах
038 - Разделение ответственности
039 - Стилизация React-приложений
040 - Передача и получение props
041 - Props, иммутабельность и однонаправленный поток данных
042 - Задание - Карточка профиля
043 - Правила JSX
044 - Рендеринг списков
045 - Условный рендеринг с помощью &&
046 - Условный рендеринг с помощью тернарных операторов
047 - Условный рендеринг с несколькими return
048 - Вынос JSX в отдельный компонент
049 - Деструктуризация props
050 - React-фрагменты
051 - Условная установка классов и текста
052 - Итоги раздела
053 - Задание- Карточка профиля
06. Состояние, события и формы
054 - Обзор раздела
055 - Создаём компонент Steps
056 - Обработка событий
057 - Что такое состояние (state) в React
058 - Создание переменной состояния с useState
059 - Не изменяйте state вручную!
060 - Механика состояния
061 - Добавление ещё одного состояния
062 - React Developer Tools
063 - Обновление состояния на основе текущего состояния
064 - Дополнительные мысли о state
065 - Реализация на чистом JavaScript
066 - Задание - Счётчик дат
067 - Новый проект - Список путешествий
068 - Построение макета
069 - Рендеринг списка элементов
070 - Создание формы и обработка отправки
071 - Управляемые элементы
072 - State против Props
073 - Задание - Флеш-карточки
074 - Задание - Счётчик дат
07. Управление состоянием
075 - Обзор раздела
076 - Думать по-React
077 - Основы управления состоянием
078 - Размышления о состоянии и подъём состояния вверх
079 - Повторение подъёма состояния
080 - Удаление элемента
081 - Обновление элемента
082 - Производное состояние
083 - Вычисление статистики как производного состояния
084 - Сортировка элементов
085 - Очистка списка
086 - Перенос компонентов в отдельные файлы
087 - Задание - Компонент Аккордеон
088 - Prop children - Создание переиспользуемой кнопки
089 - Больше переиспользуемости с prop children
090 - Задание - Компонент Аккордеон
091 - Задание - Калькулятор чаевых
08. Проект Eat-N-Split
092 - Обзор раздела
093 - Настройка проекта
094 - Создание статического приложения - Список друзей
095 - Создание статического приложения - Формы
096 - Отображение формы добавления нового друга
097 - Добавление нового друга
098 - Выбор друга
099 - Создание управляемых элементов
100 - Разделение счёта
09. Часть 2
101 - React среднего уровня
10. Компоненты, композиция, переиспользуемость
102 - Обзор раздела
103 - Настройка проекта usePopcorn
104 - Как разбить интерфейс на компоненты
105 - Практическое разделение компонентов
106 - Категории компонентов
107 - Prop drilling
108 - Композиция компонентов
109 - Устранение prop drilling
110 - Создание переиспользуемого контейнера
111 - Передача элементов как props
112 - Создание переиспользуемого компонента
113 - Создание звёзд
114 - Обработка событий наведения
115 - Props как API компонента
116 - Переиспользуемость с помощью props
117 - PropTypes
118 - Задание - Компонент Расширитель текста
11. Как работает React
119 - Обзор раздела
120 - Настройка проекта и обзор
121 - Компоненты, экземпляры и элементы
122 - Экземпляры и элементы на практике
123 - Как работает рендеринг - Обзор
124 - Как работает рендеринг - Фаза render
125 - Как работает рендеринг - Фаза commit
126 - Как работает алгоритм сравнения (diffing)
127 - Правила diffing на практике
128 - Prop key
129 - Сброс состояния с помощью prop key
130 - Использование prop key для исправления приложения
131 - Правила логики рендера - Чистые компоненты
132 - Пакетирование обновлений состояния
133 - Пакетирование обновлений состояния на практике
134 - Как работают события в React
135 - Библиотеки против фреймворков и экосистема React
136 - Итоги раздела и практические выводы
12. Эффекты и загрузка данных
137 - Обзор раздела
138 - Жизненный цикл компонента
139 - Как не нужно загружать данные в React
140 - useEffect приходит на помощь
141 - Первый взгляд на эффекты
142 - Использование async-функции
143 - Добавление состояния загрузки
144 - Обработка ошибок
145 - Массив зависимостей useEffect
146 - Синхронизация запросов с данными фильмов
147 - Выбор фильма
148 - Загрузка деталей фильма
149 - Добавление просмотренного фильма
150 - Добавление нового эффекта
151 - Функция очистки useEffect
152 - Очистка заголовка
153 - Очистка загрузки данных
154 - Отслеживание нажатия клавиши
155 - Задание - Конвертер валют
13. Хуки, refs и состояния
156 - Обзор раздела
157 - Хуки React и их правила
158 - Правила хуков на практике
159 - Дополнительные детали useState
160 - Инициализация состояния с помощью колбэка
161 - Итоги по useState
162 - Как не нужно выбирать DOM-элементы в React
163 - Знакомство с ещё одним хуком - useRef
164 - Refs для выбора DOM-элементов
165 - Refs для сохранения данных между рендерами
166 - Что такое пользовательские хуки и когда их создавать
167 - Создание нашего первого пользовательского хука
168 - Создание useLocalStorageState
169 - Создание useKey
170 - Задание - useGeolocate
14. React до появления хуков
171 - Обзор раздела
172 - Наш первый классовый компонент
173 - Работа с обработчиками событий
174 - Классовые компоненты против функциональных
175 - Начинаем приложение Classy Weather
176 - Загрузка данных о погоде
177 - Отображение погоды
178 - Удаление шаблонного кода с помощью полей класса
179 - Связь от дочернего компонента к родительскому
180 - Методы жизненного цикла
15. Часть 3
181 - Продвинутый React + Redux
16. Продвинутый хук useReducer
182 - Обзор раздела
183 - Ещё один хук
184 - Управление связанными частями состояния
185 - Управление состоянием с помощью useReducer
186 - Приложение React Quiz
187 - Загрузка вопросов из фейкового API
188 - Обработка состояний загрузки, ошибки и готовности
189 - Начало новой викторины
190 - Отображение вопросов
191 - Обработка новых ответов
192 - Переход к следующему вопросу
193 - Отображение прогресса
194 - Завершение викторины
195 - Перезапуск викторины
196 - Настройка таймера с помощью useEffect
197 - Итоги раздела - useState vs useReducer
198 - Задание - Создание банковского счёта с useReducer
17. React Router, создание SPA
199 - Обзор раздела
200 - Создание первого приложения с Vite
201 - Маршрутизация и одностраничные приложения
202 - Реализация основных страниц и маршрутов
203 - Навигация между маршрутами с помощью Link и NavLink
204 - Варианты стилизации React-приложений
205 - Использование CSS-модулей
206 - Создание страниц
207 - Создание макета приложения
208 - Вложенные маршруты и индексный маршрут
209 - Реализация списка городов
210 - Реализация списка стран
211 - Хранение состояния в URL
212 - Динамические маршруты с параметрами URL
213 - Чтение и установка query-параметров
214 - Программная навигация с useNavigate
215 - Программная навигация с Navigate
18. Состояние - Context API
216 - Обзор раздела
217 - Задание - Разбор приложения Atomic Blog
218 - Что такое Context API
219 - Создание и предоставление контекста
220 - Использование контекста
221 - Собственный Provider и хук
222 - Продвинутое управление состоянием
223 - Возвращаемся к WorldWise
224 - Использование CitiesContext
225 - Завершение страницы города
226 - Добавление карты с библиотекой Leaflet
227 - Отображение маркеров городов на карте
228 - Взаимодействие с картой
229 - Установка позиции карты с помощью геолокации
230 - Загрузка данных о городе в форме
231 - Создание нового города
232 - Удаление города
233 - System Context + useReducer
234 - Добавление фейковой аутентификации - Настройка контекста
235 - Добавление фейковой аутентификации - Реализация входа
236 - Добавление фейковой аутентификации - Защита маршрута
237 - Задание - Рефакторинг React Quiz
19. Оптимизация и useEffect
238 - Обзор раздела
239 - Оптимизация производительности и лишние рендеры
240 - Инструмент разработчика Profiler
241 - Неожиданный приём оптимизации с children
242 - memo
243 - memo на практике
244 - useMemo и useCallback
245 - useMemo на практике
246 - useCallback на практике
247 - Оптимизация повторных рендеров контекста
248 - Возвращаемся к приложению WorldWise
249 - Оптимизация размера бандла с помощью разделения кода
250 - Не оптимизируйте преждевременно!
251 - Правила и лучшие практики useEffect
252 - Задание - Исправление проблем производительности
253 - Установка состояния на основе других обновлений состояния
254 - Использование вспомогательных функций в эффектах
255 - Замыкания в эффектах
20. Redux и Toolkit (с Thunks)
256 - Обзор раздела
257 - Введение в Redux
258 - Создание reducer банковского счёта
259 - Создание Redux-хранилища
260 - Работа с action creators
261 - Добавление состояния - Клиент
262 - Профессиональная структура файлов Redu
263 - Подключение Redux-приложения к React
264 - Отправка (dispatch) действий из React-приложения
265 - Устаревший способ подключения компонентов к Redux
266 - Redux middleware и thunks
267 - Выполнение API-запроса с помощью Redux thunks
268 - Redux DevTools
269 - Что такое Redux Toolkit (RTK)
270 - Создание хранилища с помощью RTK
271 - Создание slice для аккаунта
272 - Возвращаемся к thunks
273 - Создание slice для клиента
274 - Redux против Context API
21. Часть 4
275 - Профессиональная разработка на React
22. React Router с загрузкой данных
276 - Обзор раздела
277 - Настройка нового проекта
278 - Планирование приложения
279 - Настройка профессиональной структуры файлов
280 - Новый способ реализации маршрутов
281 - Создание макета приложения
282 - Загрузка данных с помощью loaders React Router
283 - Отображение индикатора загрузки
284 - Обработка ошибок с помощью error elements
285 - Загрузка заказов
286 - Отправка данных с помощью actions React Router
287 - Обработка ошибок в form actions
23. Экспресс-курс по Tailwind
288 - Обзор раздела
289 - Что такое Tailwind CSS
290 - Настройка Tailwind CSS
291 - Работа с цветами
292 - Стилизация текста
293 - Блочная модель - Отступы, границы и отображение
294 - Адаптивный дизайн
295 - Использование Flexbox
296 - Использование CSS Grid
297 - Стилизация кнопок - Состояния элементов и переходы
298 - Стилизация элементов форм
299 - Повторное использование стилей с помощью @apply
300 - Повторное использование стилей с помощью React-компонентов
301 - Абсолютное позиционирование, z-index и другое
302 - Настройка собственного семейства шрифтов
303 - Стилизация меню
304 - Стилизация корзины
305 - Стилизация формы заказа
306 - Стилизация обзора заказа
24. Добавление Redux и React Router
307 - Обзор раздела
308 - Моделирование состояния пользователя - Redux Toolkit
309 - Чтение и обновление состояния пользователя
310 - Моделирование состояния корзины
311 - Добавление позиций меню в корзину
312 - Создание обзора корзины с Redux selectors
313 - Создание страницы корзины
314 - Удаление товаров из корзины
315 - Обновление количества товаров в корзине
316 - Использование корзины для новых заказов
317 - Redux thunks с createAsyncThunk
318 - Интеграция геолокации
319 - Загрузка данных без навигации - useFetcher
320 - Обновление данных без навигации
25. Настройка проекта
321 - Обзор раздела
322 - Планирование приложения
323 - Настройка проекта The Wild Oasis
324 - Введение в Styled Components
325 - Глобальные стили с Styled Components
326 - Props styled-компонентов и функция CSS
327 - Создание более переиспользуемых styled-компонентов
328 - Настройка страниц и маршрутов
329 - Создание макета приложения
330 - Создание сайдбара и основной навигации
26. Экспресс-курс по Supabase
331 - Обзор раздела
332 - Что такое Supabase
333 - Создание новой базы данных
334 - Моделирование состояния приложения
335 - Создание таблиц
336 - Связи между таблицами
337 - Добавление политик безопасности (RLS)
338 - Подключение Supabase к нашему React-приложению
339 - Настройка storage-бакетов
27. React Query
340 - Обзор раздела
341 - Что такое React Query
342 - Настройка React Query
343 - Загрузка данных о домиках (cabins)
344 - Мутации - Удаление домика
345 - Отображение toast-уведомлений
346 - Знакомство с библиотекой React Hook Form
347 - Создание нового домика
348 - Обработка ошибок формы
349 - Загрузка изображений в Supabase
350 - Редактирование домика
351 - Абстрагирование React Query в пользовательские хуки
352 - Дублирование домиков
353 - Загрузка настроек приложения
354 - Обновление настроек приложения
28. Продвинутые паттерны React
355 - Обзор раздела
356 - Обзор переиспользуемости в React
357 - Настройка примера
358 - Паттерн Render Props
359 - Higher-Order Components (HOC)
360 - Паттерн составных компонентов (Compound Components)
361 - Создание модального окна с помощью React Portal
362 - Преобразование модального окна в составной компонент
363 - Определение клика вне модального окна
364 - Подтверждение удаления домика
365 - Создание переиспользуемой таблицы
366 - Применение паттерна Render Props
367 - Создание переиспользуемого контекстного меню
29. Реализация дополнительных функций
368 - Обзор раздела
369 - Фильтрация на стороне клиента
370 - Сортировка на стороне клиента
371 - Создание таблицы бронирований
372 - Загрузка тестовых данных
373 - Фильтрация на стороне API
374 - Сортировка на стороне API
375 - Создание переиспользуемого компонента пагинации
376 - Пагинация на стороне API
377 - Prefetching с React Query
378 - Создание страницы отдельного бронирования
379 - Заселение по бронированию (check-in)
380 - Добавление дополнительного завтрака
381 - Выселение по бронированию (check-out)
382 - Удаление бронирования
383 - Аутентификация - Вход пользователя через Supabase
384 - Авторизация - Защита маршрутов
385 - Выход пользователя
386 - Исправление важной ошибки
387 - Создание формы регистрации
388 - Регистрация пользователя
389 - Авторизация в Supabase - Защита базы данных (RLS)
390 - Создание заголовка приложения
391 - Обновление данных пользователя и пароля
392 - Реализация тёмной темы с помощью CSS-переменных
393 - Создание макета панели управления
394 - Вычисление недавних бронирований и проживаний
395 - Отображение статистики
396 - Отображение линейного графика с библиотекой Recharts
397 - Отображение круговой диаграммы
398 - Отображение заселений за текущий день
399 - Error Boundaries
400 - Финальные штрихи
30. Деплой с Netlify и Vercel
401 - Обзор раздела
402 - Деплой на Netlify
403 - Настройка Git и GitHub-репозитория
404 - Деплой на Vercel
31. Часть 5
405 - Full-stack React c Next.js
32. Обзор Next.js с App Router
406 - Обзор раздела
407 - Обзор серверного рендеринга (SSR)
408 - SSR с React DOM + Node.js
409 - Недостающий элемент - Гидратация
410 - Реализация гидратации
411 - Что такое Next.js
412 - Настройка проекта Next.js
413 - Определение маршрутов и страниц
414 - Навигация между страницами
415 - Создание layout
416 - Что такое React Server Components (RSC)
417 - Загрузка данных на странице
418 - Добавление интерактивности
419 - Отображение индикатора загрузки
420 - Как работает RSC
421 - RSC vs SSR - Как они связаны
33. Сайт Wild Oasis
422 - Обзор раздела
423 - Планирование проекта
424 - Организация проекта
425 - Стилизация с помощью Tailwind CSS
426 - Добавление метаданных страницы и favicon
427 - Загрузка и оптимизация шрифтов
428 - Улучшение навигации и корневого layout
429 - Оптимизация изображений с помощью компонента Image
430 - Создание главной страницы
431 - Создание страницы About с адаптивными изображениями
432 - Добавление вложенных маршрутов и страниц
433 - Добавление вложенного layout
34. Кэширование и рендеринг
434 - Обзор раздела
435 - Настройка Supabase
436 - Загрузка и отображение списка домиков
437 - Потоковая загрузка сегментов маршрутов
438 - Что такое React Suspense
439 - Потоковый UI с Suspense
440 - Динамические сегменты маршрутов
441 - Генерация динамических метаданных
442 - Обработка ошибок - Настройка Error Boundaries
443 - Обработка ошибок - Ошибки Not Found
444 - Типы рендеринга - SSR, статический и динамический рендеринг
445 - Анализ рендеринга в нашем приложении
446 - Динамические страницы как статические
447 - Статическая генерация сайта (SSG)
448 - Частичный предварительный рендеринг
449 - Как Next.js кэширует данные
450 - Эксперименты с кэшированием и ISR
451 - Задание - Получение количества домиков
35. Взаимодействие клиента и сервера
452 - Обзор раздела
453 - Размывание границы между сервером и клиентом
454 - Клиентские компоненты внутри серверных компонентов
455 - Подсветка активной ссылки в боковой навигации
456 - Совместное состояние клиента и сервера
457 - Серверные компоненты в клиентских компонентах
458 - Стратегии загрузки данных для раздела бронирования
459 - Использование Context API для управления состоянием
460 - Создание API-эндпоинта с помощью Route Handlers
36. Аутентификация с NextAuth
461 - Обзор раздела
462 - Настройка NextAuth
463 - Получение пользовательской сессии
464 - Что такое middleware в Next.js
465 - Защита маршрутов с помощью middleware NextAuth
466 - Создание кастомной страницы входа
467 - Создание кастомной кнопки выхода
468 - Создание нового гостя при первом входе
37. Мутации с Server Actions
469 - Обзор раздела
470 - Что такое Server Actions
471 - Обновление профиля с помощью Server Action
472 - Ручная ревалидация кэша
473 - Отображение индикатора загрузки - Хук useFormStatus
474 - Создание страницы бронирований гостя
475 - Удаление бронирования
476 - Ещё один индикатор загрузки - Хук useTransition
477 - Задание - Обновление бронирования
478 - Мгновенное удаление бронирований - Хук useOptimistic
479 - Возвращаемся к странице домика
480 - Создание нового бронирования
38. Деплой с Vercel
481 - Обзор раздела
482 - Настройка GitHub-репозитория
483 - Деплой на Vercel
484 - Обновление переменных окружения и OAuth-учётных данных
39. Устаревший Next.js
485 - Обзор раздела
486 - Настройка ещё одного проекта
487 - Маршруты, страницы и навигация
488 - Динамические маршруты
489 - Создание layout с помощью Custom App
490 - Создание страниц
491 - Определение заголовка страницы и favicon
492 - Загрузка данных с getStaticProps (SSG)
493 - Загрузка данных с getServerSideProps (SSR)
494 - API-маршруты
495 - Обработка отправки форм
40. Завершение