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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 50 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online React Router v4

0:00
/
#1: Introduction and Philosophy behind React Router v4

All Course Lessons (50)

#Lesson TitleDurationAccess
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 subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Modern React with Redux [2023 Update]

Modern React with Redux [2023 Update]

Sources: udemy, Stephen Grider
Congratulations! You've found the most popular, most complete, and most up-to-date resource online for learning React and Redux! Thousands of other engineers
37 hours 44 minutes 46 seconds
Microservices with Node JS and React

Microservices with Node JS and React

Sources: udemy, Stephen Grider
Event-Based Architecture? Covered! Server side rendering with React? Yep. Scalable, production-ready code? Its here! Microservices are the number one solution for building and ...
54 hours 13 minutes 19 seconds
React Three Fiber: The Ultimate Guide to 3D Web Developmen

React Three Fiber: The Ultimate Guide to 3D Web Developmen

Sources: Wawa Sensei
3D development is a vast field with many different techniques. This comprehensive guide will provide you with the necessary tools to get started and the...
9 hours 18 minutes 15 seconds
Laravel with React JS - Build Twitter Like Real Time Web App

Laravel with React JS - Build Twitter Like Real Time Web App

Sources: udemy
Do you want to use React Js with Laravel to build powerful web applications? How about building a twitter like real time web app while learning Modern JavaScrip
4 hours 56 minutes 37 seconds