ui.dev (ex. Tyler McGinnis)
Tyler McGinnis делает обучающее видео по AngularJS, React, D3 и многих других важных современных веб-технологий.
Продолжительность
6 ч 44 мин
Категория
React.jsКоличество уроков
50 Видео
Дата добавления
19 февр. 2018 г., 21:08
Язык
Английский
Дата выхода
6 дек. 2017 г., 00:00
Дата обновления
28 апр. 2026 г., 23:37
React Router v4 — это мощный инструмент для создания современного клиентского роутинга. Этот курс поможет вам уверенно разобраться в динамическом, компонентном подходе маршрутизации, освоить ключевые API и научиться строить гибкие, масштабируемые маршруты для реальных приложений.
О курсе
React Router v4 стал значительным шагом вперёд благодаря переходу от статической конфигурации к декларативным компонентам. Такой подход открывает больше возможностей, но может вызвать трудности у тех, кто привык к классической маршрутизации. Этот курс подробно объясняет каждую концепцию, подкрепляя теорию практическими сценариями и реальным проектом.
Почему это важно
Роутинг — основа любого SPA-приложения. Понимание того, как правильно организовать навигацию, работать с параметрами, защищать маршруты и оптимизировать загрузку, напрямую влияет на качество пользовательского опыта и архитектуру приложения.
Чему вы научитесь
Курс охватывает ключевые аспекты и практические сценарии применения React Router v4.
Ключевые навыки
- Работа с динамическими URL и параметрами.
- Построение вложенных маршрутов.
- Создание программируемых переходов.
- Реализация приватных маршрутов и редиректов.
- Обработка 404 страниц.
- Передача props в маршруты и ссылки.
- Использование Query Strings.
- Построение breadcrumbs и sidebar-навигации.
- Настройка Route Configs.
- Создание кастомных компонентов ссылок.
- Предотвращение переходов между страницами.
- Работа с рекурсивными маршрутами.
- Code splitting для оптимизации загрузки.
- Server-side rendering с React Router.
- Интеграция Redux.
- Тестирование роутинга.
- Создание анимированных переходов.
Кому подойдёт курс
Материал будет полезен как новичкам, так и опытным React-разработчикам.
- Тем, кто только начинает знакомство с React Router и хочет разобраться в его API.
- Разработчикам, желающим понять философию и преимущества компонентного роутинга.
- Тем, кто использует URL-параметры, вложенные маршруты и динамические сегменты.
- Тем, кто хочет освоить различные методы клиентской навигации: hash history и HTML5 history.
- Разработчикам, работающим над приложениями с сайдбарами, breadcrumb-навигацией и сложной структурой маршрутов.
- Тем, кто планирует SSR, интеграцию Redux или анимированные переходы.
Преимущества курса
Свыше шести часов видео, десятки практических сценариев и создание полноценного проекта делают этот курс эффективным способом освоить React Router v4. Вы не просто изучите основы — вы научитесь применять их в реальных условиях.
Почему курс выделяется
- Подробное разъяснение всех ключевых концепций роутинга.
- Практика, ориентированная на реальные задачи.
- Глубокие разборы сценариев, недоступных в базовых гайдах.
- Фокус на лучших практиках и архитектурных подходах.
- Урок 1.00:22:26Introduction and Philosophy behind React Router v4
- Урок 2.00:05:07URL Parameters with React Router v4
- Урок 3.00:03:04(Solution) URL Parameters
- Урок 4.00:19:34Nested routes with React Router v4
- Урок 5.00:12:29(Solution) Nested Routes
- Урок 6.00:04:14Pass props to a component rendered by React Router v4
- Урок 7.00:02:32(Solution) Passing Props
- Урок 8.00:07:04Programmatically navigate using React Router v4
- Урок 9.00:02:56(Solution) Programmatically Navigate (Declarative)
- Урок 10.00:01:58(Solution) Programmatically Navigate (Imperative)
- Урок 11.00:05:54Query Strings with React Router v4
- Урок 12.00:03:10(Solution) Query Strings
- Урок 13.00:06:39Handling 404 pages (catch all routes) with React Router v4
- Урок 14.00:02:42(Solution) Catch All Routes
- Урок 15.00:05:44Ambiguous Matches with React Router v4
- Урок 16.00:03:11(Solution) Ambiguous Matches
- Урок 17.00:04:19Pass props to React Router v4's Link component
- Урок 18.00:04:19(Solution) Passing Props to Link
- Урок 19.00:07:05Rendering a Sidebar or Breadcrumbs with React Router v4
- Урок 20.00:04:08(Solution) Sidebar
- Урок 21.00:06:35Customizing your own Link component with React Router v4
- Урок 22.00:02:19(Solution) Customizing Link
- Урок 23.00:04:47Project - Introduction and Starter Files with Create React App
- Урок 24.00:05:14Project - Given code for Project
- Урок 25.00:05:12Project - Setting up the initial routes
- Урок 26.00:01:47Project - Setting up a catch-all (404) route
- Урок 27.00:04:03Project - Setting up the Home route
- Урок 28.00:14:23Project - Fetching the players
- Урок 29.00:07:28Project - Rendering the players
- Урок 30.00:03:09Project - Fetching the teams
- Урок 31.00:11:23Project - Rendering the teams
- Урок 32.00:15:44Project - Setting up the teams page
- Урок 33.00:05:48Project - Fetching the team's articles
- Урок 34.00:08:06Project - Rendering the team's articles
- Урок 35.00:05:18Project - Creating a Loading component
- Урок 36.00:22:52Animated Transitions with React Router v4
- Урок 37.00:04:01(Solution) Animated Transitions
- Урок 38.00:04:55Project - Adding in Animated Transitions
- Урок 39.00:15:54Code Splitting with React Router v4
- Урок 40.00:02:45(Solution) DynamicImport
- Урок 41.00:01:41(Solution) React.lazy
- Урок 42.00:07:06Project - Code Splitting
- Урок 43.00:18:39Protected routes and authentication with React Router v4
- Урок 44.00:05:09(Solution) Protected Routes
- Урок 45.00:08:47Preventing transitions with React Router v4
- Урок 46.00:02:51(Solution) Preventing Transitions
- Урок 47.00:10:19Route Config with React Router v4
- Урок 48.00:05:47(Solution) Route Config
- Урок 49.00:52:40(Bonus) Server Rendering with React and React Router v4
- Урок 50.00:10:44(Bonus) Recursive paths with React Router v4
Автор - ui.dev (ex. Tyler McGinnis)
Комментарии
ilya-1974Don't buy. Music video instead of a course here.