React Router v4
6h 44m 1s
English
Paid
Course description
For good reason, React Router is the most popular 3rd party library in the React ecosystem. If you're using React, odds are you're also using React Router. React Router v4 introduced a new dynamic, component based approach to routing. If you're used to static routing (like in Express, Angular, or Ember), this new paradigm might be difficult to grasp. The goal of this course is to tackle every scenario you might encounter when building an app with React Router so that when the time comes, you're ready.
Read more about the course
With over six hours of video, 18 different routing scenarios, and an entire real world project you'll build, we can confidently say this course is the most comprehensive and effective way to learn React Router.
Pre-Requisites:
A solid understanding of React and ES2015+ or our "React" course.
What you'll learn:
- Philosophy of React Router v4
- URL Parameters
- Client side routing
- Nested Routes
- Programatically navigating
- Redirects (Authentication)
- 404 Pages
- Ambiguous Matches
- Redux Integration
- Passing props to Link
- Sidebars
- Breadcrumbs
- Route Configs
- Custom Link components
- Preventing transitions
- Passing props to Router components
- Query Strings
- Recursive Paths
- Server Rendering
- Code Splitting
- Testing
- Animated Transitions
Who is this course for?
- Newcomers to React Router who want to better understand how to utilize React Router's component based API
- Experienced developers who want to better understand React Router's abstraction
- Advanced developers who are looking how to code split their React and React Router apps
- Developers wanting to leverage URL parameters with React Router
- Developers wanting to understand the differences between different client side routing techniques like hash history and HTML5 history
- Developers looking to learn how to set up nested routes with React Router
- Advanced developers wanting to learn about server rendering a React app with React Router
- Developers looking to create sidebar or breadcrumb navigation with React Router
- Developers wanting to add animated transitions to their routes
- Developers looking how to integrate Redux with React Router
- Developers wanting to how to programatically navigate with React Router and the different use cases of Redirect and history.push
Watch Online
Watch Online React Router v4
0:00
/ #1: Introduction and Philosophy behind React Router v4
All Course Lessons (50)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction and Philosophy behind React Router v4 Demo | 22:26 | |
| 2 | URL Parameters with React Router v4 | 05:07 | |
| 3 | (Solution) URL Parameters | 03:04 | |
| 4 | Nested routes with React Router v4 | 19:34 | |
| 5 | (Solution) Nested Routes | 12:29 | |
| 6 | Pass props to a component rendered by React Router v4 | 04:14 | |
| 7 | (Solution) Passing Props | 02:32 | |
| 8 | Programmatically navigate using React Router v4 | 07:04 | |
| 9 | (Solution) Programmatically Navigate (Declarative) | 02:56 | |
| 10 | (Solution) Programmatically Navigate (Imperative) | 01:58 | |
| 11 | Query Strings with React Router v4 | 05:54 | |
| 12 | (Solution) Query Strings | 03:10 | |
| 13 | Handling 404 pages (catch all routes) with React Router v4 | 06:39 | |
| 14 | (Solution) Catch All Routes | 02:42 | |
| 15 | Ambiguous Matches with React Router v4 | 05:44 | |
| 16 | (Solution) Ambiguous Matches | 03:11 | |
| 17 | Pass props to React Router v4's Link component | 04:19 | |
| 18 | (Solution) Passing Props to Link | 04:19 | |
| 19 | Rendering a Sidebar or Breadcrumbs with React Router v4 | 07:05 | |
| 20 | (Solution) Sidebar | 04:08 | |
| 21 | Customizing your own Link component with React Router v4 | 06:35 | |
| 22 | (Solution) Customizing Link | 02:19 | |
| 23 | Project - Introduction and Starter Files with Create React App | 04:47 | |
| 24 | Project - Given code for Project | 05:14 | |
| 25 | Project - Setting up the initial routes | 05:12 | |
| 26 | Project - Setting up a catch-all (404) route | 01:47 | |
| 27 | Project - Setting up the Home route | 04:03 | |
| 28 | Project - Fetching the players | 14:23 | |
| 29 | Project - Rendering the players | 07:28 | |
| 30 | Project - Fetching the teams | 03:09 | |
| 31 | Project - Rendering the teams | 11:23 | |
| 32 | Project - Setting up the teams page | 15:44 | |
| 33 | Project - Fetching the team's articles | 05:48 | |
| 34 | Project - Rendering the team's articles | 08:06 | |
| 35 | Project - Creating a Loading component | 05:18 | |
| 36 | Animated Transitions with React Router v4 | 22:52 | |
| 37 | (Solution) Animated Transitions | 04:01 | |
| 38 | Project - Adding in Animated Transitions | 04:55 | |
| 39 | Code Splitting with React Router v4 | 15:54 | |
| 40 | (Solution) DynamicImport | 02:45 | |
| 41 | (Solution) React.lazy | 01:41 | |
| 42 | Project - Code Splitting | 07:06 | |
| 43 | Protected routes and authentication with React Router v4 | 18:39 | |
| 44 | (Solution) Protected Routes | 05:09 | |
| 45 | Preventing transitions with React Router v4 | 08:47 | |
| 46 | (Solution) Preventing Transitions | 02:51 | |
| 47 | Route Config with React Router v4 | 10:19 | |
| 48 | (Solution) Route Config | 05:47 | |
| 49 | (Bonus) Server Rendering with React and React Router v4 | 52:40 | |
| 50 | (Bonus) Recursive paths with React Router v4 | 10:44 |
Unlock unlimited learning
Get instant access to all 49 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Advanced React For Enterprise: React for senior engineers
Sources: udemy
Welcome to the React for Senior engineers course !! Knowledge of React is 100% required for this course. I've been working with React.js for over 5 years now,
6 hours 4 minutes 5 seconds
Full-Stack React with GraphQL and Apollo Boost
Sources: udemy
This course is designed for anyone who wants to start building applications with React and GraphQL! In this course, we will build a recipe application from scratch with full aut...
6 hours 54 minutes 31 seconds
Build a Notion Clone with React and TypeScript
Sources: zerotomastery.io
Master React and TypeScript by building a Notion clone. Learn to use Vite for project setup and Supabase for database management. Showcase your skills with a
7 hours 57 minutes 47 seconds
Building a Component Library with Storybook
Sources: learn.handlebarlabs.com
Learn to create a library of components that are easy to use, self documenting, and easily tested. I've found that using Storybook to define my component's API
1 hour 10 minutes 41 seconds
React, NodeJS, Express & MongoDB - The MERN Fullstack Guide
Sources: udemy
Building fullstack applications (i.e. frontend + backend) with the MERN stack is very popular - in this course, you will learn it from scratch at the example of a complete proje...
18 hours 45 minutes 10 seconds