ui.dev (ex. Tyler McGinnis)
Tyler McGinnis делает обучающее видео по AngularJS, React, D3 и многих других важных современных веб-технологий.
Продолжительность
3 ч 15 мин
Категория
React.jsКоличество уроков
41 Видео
Дата добавления
22 окт. 2022 г., 23:15
Язык
Английский
Дата обновления
29 апр. 2026 г., 16:18
React Router — это мощный инструмент для создания динамичных маршрутов и навигации в приложениях на React. В этом курсе вы постепенно и без перегрузки освоите ключевые концепции, научитесь применять их на практике и сможете уверенно строить архитектуру сложных интерфейсов.
Что вы изучите в этом курсе
Курс выстроен линейно, чтобы каждая новая тема логично опиралась на предыдущую. Такой подход помогает легко усваивать даже самые сложные аспекты навигации.
- Основы маршрутизации в React
- Nested routes и продвинутая вложенность
- Загрузка данных и маршрутизация, основанная на данных
- Работа с динамическими параметрами
- Защищённые маршруты
- Переадресации и обработка ошибок
Почему этот курс эффективен
Мы используем метод пошагового обучения — как если бы рядом сидел опытный разработчик, который объясняет каждую концепцию простым языком и показывает, как применить её в реальном коде.
Практический подход
Каждая тема сопровождается примерами, задачами и мини‑проектами, чтобы вы не просто прочитали теорию, но и закрепили её в действии.
Современные подходы
Материалы курса соответствуют актуальной версии React Router и включают новые методы работы с данными, маршрутизацией и навигацией.
Для кого подходит этот курс
- Начинающих разработчиков, знакомых с основами React
- Frontend‑разработчиков, желающих систематизировать знания о маршрутизации
- Тех, кто переходит на современные версии React Router
Какие навыки вы получите
По окончании курса вы сможете создавать полноценные интерфейсы со сложной навигацией и продуманной логикой маршрутов.
- Проектирование структуры приложения
- Оптимизация загрузки данных
- Настройка защищённых и публичных маршрутов
- Создание компонентов навигации
- Обработка ошибок и нестандартных состояний
Итог
React Router — это фундаментальный инструмент для любого современного React‑приложения. Освоив его шаг за шагом, вы получите мощный навык, который сделает ваши проекты быстрее, удобнее и масштабируемее.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 1. 00:07:21The Fundamentals
- Урок 2. 00:02:48(Solution) The Fundamentals
- Урок 3. 00:04:39(Project) Introduction
- Урок 4. 00:05:07(Project) Initial Routes
- Урок 5. 00:09:34URL Parameters
- Урок 6. 00:02:28(Solution) URL Parameters
- Урок 7. 00:05:52(Project) Home
- Урок 8. 00:04:31Query Strings
- Урок 9. 00:02:45(Solution) Query Strings
- Урок 10. 00:14:20(Project) Team Page
- Урок 11. 00:03:33Customizing React Router's Link Component
- Урок 12. 00:01:34(Solution) Customizing Link
- Урок 13. 00:11:11(Project) Players
- Урок 14. 00:05:19Nested Routes
- Урок 15. 00:03:24(Solution) Nested Routes
- Урок 16. 00:04:10(Solution) Nested Routes - Outlet
- Урок 17. 00:08:21Project - Player
- Урок 18. 00:09:04(Project) Team
- Урок 19. 00:08:56(Project) Articles
- Урок 20. 00:13:20(Project) Loading
- Урок 21. 00:04:03Programmatically Navigate
- Урок 22. 00:02:39(Solution) Programmatically Navigate (Declarative)
- Урок 23. 00:01:50(Solution) Programmatically Navigate (Imperative)
- Урок 24. 00:05:59(Project) Navigate
- Урок 25. 00:05:34Code Splitting
- Урок 26. 00:01:30(Solution) React.lazy
- Урок 27. 00:01:54(Project) Code Splitting
- Урок 28. 00:04:20Route Configs
- Урок 29. 00:02:33(Solution) Route Config
- Урок 30. 00:05:59(Project) Config
- Урок 31. 00:07:53Protected Routes
- Урок 32. 00:03:46(Solution) Protected Routes
- Урок 33. 00:01:02Handling 404 Pages
- Урок 34. 00:02:21(Solution) Catch All Routes
- Урок 35. 00:02:34Passing Props to Link
- Урок 36. 00:01:32(Solution) Passing Props to Link
- Урок 37. 00:03:29Sidebars
- Урок 38. 00:02:57(Solution) Sidebar
- Урок 39. 00:01:17Passing Props to React Router Components
- Урок 40. 00:03:30Recursive Paths
- Урок 41. 00:00:28Outro + Next Steps
Автор - ui.dev (ex. Tyler McGinnis)
Комментарии
https://codesandbox.io/s/pt6vlg?file=%2FApp.js&from-sandpack=true
(SOLUTION) THE FUNDAMENTALS
https://codesandbox.io/s/is3zsv?file=%2FApp.js&from-sandpack=true
https://github.com/uidotdev/react-router-course/tree/1-starter-code
https://github.com/uidotdev/react-router-course/tree/2-initial-routes
(PRACTICE) URL PARAMETERS
https://codesandbox.io/s/p8nf3f?file=%2FApp.js&from-sandpack=true
(SOLUTION) URL PARAMETERS
https://codesandbox.io/s/zjuzn3?file=%2FApp.js&from-sandpack=true
https://github.com/uidotdev/react-router-course/tree/3-home
(PRACTICE) QUERY STRINGS
https://codesandbox.io/s/5vmjgz?file=%2FApp.js&from-sandpack=true
(SOLUTION) QUERY STRINGS
https://codesandbox.io/s/l97vtz?file=%2FApp.js&from-sandpack=true
(PROJECT) TEAM PAGE
https://github.com/uidotdev/react-router-course/tree/e2acc2ae314ef280f36713bfb9302e606e38567c
(PRACTICE) CUSTOMIZING LINK
https://codesandbox.io/s/82iche?file=%2FApp.js&from-sandpack=true
(SOLUTION) CUSTOMIZING LINK
https://codesandbox.io/s/59sr0n?file=%2FApp.js&from-sandpack=true
(PROJECT) PLAYERS
https://github.com/uidotdev/react-router-course/tree/5-players
(PRACTICE) NESTED ROUTES
https://codesandbox.io/s/p1gppv?file=%2FApp.js&from-sandpack=true
(SOLUTION) NESTED ROUTES
https://codesandbox.io/s/gourz8?file=%2FApp.js&from-sandpack=true
(PRACTICE) NESTED ROUTES - OUTLET
https://codesandbox.io/s/t4xbxk?file=%2FApp.js&from-sandpack=true
(SOLUTION) NESTED ROUTES - OUTLET
https://codesandbox.io/s/2kcsyh?file=%2FApp.js&from-sandpack=true
PROJECT - PLAYER
https://github.com/uidotdev/react-router-course/tree/6-player
(PROJECT) TEAM
https://github.com/uidotdev/react-router-course/tree/7-team
(PROJECT) ARTICLES
https://github.com/uidotdev/react-router-course/tree/8-articles
(PROJECT) LOADING
https://github.com/uidotdev/react-router-course/tree/9-loading
(PRACTICE) PROGRAMMATICALLY NAVIGATE - DECLARATIVE
https://codesandbox.io/s/hslkcz?file=%2FApp.js&from-sandpack=true
(SOLUTION) PROGRAMMATICALLY NAVIGATE (DECLARATIVE)
https://codesandbox.io/s/t0j6jo?file=%2FApp.js&from-sandpack=true
(PRACTICE) PROGRAMMATICALLY NAVIGATE - IMPERATIVE
https://codesandbox.io/s/gbzxsz?file=%2FApp.js&from-sandpack=true
(SOLUTION) PROGRAMMATICALLY NAVIGATE (IMPERATIVE)
https://codesandbox.io/s/6khlfn?file=%2FApp.js&from-sandpack=true
(PROJECT) NAVIGATE
https://github.com/uidotdev/react-router-course/tree/10-navigate
(PRACTICE) REACT.LAZY
https://codesandbox.io/s/q00xxg?file=%2FApp.js&from-sandpack=true
(SOLUTION) REACT.LAZY
https://codesandbox.io/s/p506mg?file=%2FApp.js&from-sandpack=true
(PROJECT) CODE SPLITTING
https://github.com/uidotdev/react-router-course/tree/11-split
(PRACTICE) ROUTE CONFIGS
https://codesandbox.io/s/41z0h7?file=%2FApp.js&from-sandpack=true
(SOLUTION) ROUTE CONFIG
https://codesandbox.io/s/cdx0vb?file=%2FApp.js&from-sandpack=true
(PROJECT) CONFIG
https://github.com/uidotdev/react-router-course/tree/12-config
(PRACTICE) PROTECTED ROUTES
https://codesandbox.io/s/5fs1v8?file=%2FApp.js&from-sandpack=true
(SOLUTION) PROTECTED ROUTES
https://codesandbox.io/s/tn0qf2?file=%2FApp.js&from-sandpack=true
(PRACTICE) CATCH ALL ROUTES
https://codesandbox.io/s/b7ekcs?file=%2FApp.js&from-sandpack=true
(SOLUTION) CATCH ALL ROUTES
https://codesandbox.io/s/vezye6?file=%2FApp.js&from-sandpack=true
(PRACTICE) PASSING PROPS TO LINK
https://codesandbox.io/s/n859dr?file=%2FApp.js&from-sandpack=true
(SOLUTION) PASSING PROPS TO LINK
https://codesandbox.io/s/qdzh68?file=%2FApp.js&from-sandpack=true
(PRACTICE) SIDEBARS
https://codesandbox.io/s/oio5m3?file=%2FApp.js&from-sandpack=true
(SOLUTION) SIDEBAR
https://codesandbox.io/s/zeiuiz?file=%2FApp.js&from-sandpack=true