Client Side React Router 4

React Router 4 offers a new dynamic paradigm for routing in React.js applications. This course shows the strength of dynamic routing and the possibilities of changing how you write React.js code when a Route becomes a first-class React component.
Course info
Rating
(30)
Level
Intermediate
Updated
Mar 2, 2018
Duration
1h 59m
Table of contents
Description
Course info
Rating
(30)
Level
Intermediate
Updated
Mar 2, 2018
Duration
1h 59m
Description

Routing in single page applications like those written in React.js helps to display the right content and components, but static routing can be very limiting. In this course, Client Side React Router 4, you'll learn how react-router-4 offers far more capability with dynamic routing and provides a unique model for routing in React.js applications. First, you'll learn the fundamentals of routing in react-router-4. Next, you'll begin to put react-router to work and by nesting and testing routes. Finally, you'll dive deep into advanced route handling techniques with React.js and even handle routing state in redux. By the end of this course, you'll have a very good working grasp of React Router 4 and its new dynamic programming model, which will change the way you write React code.

About the author
About the author

David Starr is Director of Technical Learning at GoDaddy, Inc. He specializes in agile software development practices, patterns and practices, and judicious application of various technologies within development teams. He is a 5 time Microsoft MVP in Visual Studio and a technical instructor with Pluralsight where he focuses on the software development practices and developer tooling curricula. David blogs at ElegantCode.com, is a frequent contributor at conferences and a frequent writer. He has successfully led many product development teams and is a technical learning professional.

More from the author
Getting Started with IntelliJ CE
Beginner
2h 47m
1 Sep 2017
Big Scrum
Intermediate
2h 47m
22 Apr 2015
More courses by David Starr
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone, my name is David Starr, and welcome to my course on React Router 4. You can find me at ElegantCode. com. React is the fastest growing JavaScript framework for single-page applications today. As any React application grows in complexity, introducing routing is a great way to organize and modularize the components in your application. Even if you've used React Router's previous versions, you're in for a new world with React Router 4. This course is a must for anyone using routing or who thinks they might want to use routing in their next React application. React developers moving up from previous router versions will definitely want to code their way through this course because React routing is no longer static, it's dynamic. Dynamic routing is a whole new paradigm, and this course shows it in full effect. Some of the major topics that we'll cover include static versus dynamic routing, routes as components, nested routes and parameters, storing routing data in a Redux store, recursive routes, and by the end of this course you'll be ready to tackle your next React web app with confidence and organize it cleanly using React Router 4. Before beginning the course, you should be familiar with basic React web apps, webpack, and npm. I hope you'll join me on this journey to learn cutting-edge React skills with the Client Side React Router 4 course, at Pluralsight.

React Router 4 Is Different
Welcome to this course on React Router 4. My name is David Starr, and you can find me at ElegantCode. com or @elegantcoder on Twitter. For this course, I'm going to assume that you're already familiar with building basic React. js applications. We'll explore React Router 4, a new technology to use in your React apps. React Router 4 is different than React Router 3, and different from pretty much any client-side routing system you may have seen. Combining the problem of routing with the power of React components will enable you to build sweet apps, like this one. I'm kidding of course. We'll use this application framework throughout the course and gradually add features to the application as we go.

Dynamic Routing
Hello, this is David Starr. We're going to start diving into Dynamic Routing with React Router 4.

Client and Server Routing
Hello, this is David Starr back again talking React Router, this time focusing on the differences between server and client-side routing. Now this is going to be a very short module examining how client and server-side routing must often coexist for our application to work. It's worth spending a few minutes on this topic because it's so easy to make this complex and it doesn't have to be. We already saw the difference between static and dynamic routing in single applications in an earlier module, but there are implications for routing that might typically occur on the server as well. Let's have a look.

Examining react-router Components
Hello, this is David Starr back talking React Router 4. Now we're going look at some other functionality included in React Router that just makes life easier. Some of the techniques you'll see are new React Router 4 components and others are new capabilities of the route component itself. Let's jump in.

Putting react-router to Work
Hello, this is David Starr back again to talk about React Router 4. This module is going to be very demo-heavy, and we'll look at creating some custom links and routes. You'll also get a look at how we might handle log in or security in a React application with the help of React Router. Let's dive in.

Nesting Routes
Hello, and welcome to the Nesting Routes module of the React Router 4 course. This is David Starr, and I'll be discussing how we extract arguments from routes and pass them throughout our applications. This is pretty quick and easy, but it is the heart and soul of route parsing, so let's get started.

Integrating Routing with Redux
I'm back. David Starr here talking React Router 4, and this time we're going to be integrating our React Router state with Redux. After all, if Redux gives us a place to store all of our state data, isn't our routing data just as valid to be in the Redux store? One of the main reasons people want to store their React Router state in the Redux store is for debugging, time travel, and other things provided by the Redux DevTool's plugin browser that we'll be using. Let's get started.

Routing Tips and Tricks
David Starr back for our very last module of the React Router 4 course. This module shows a few techniques that you can use or expand upon to do even cooler things. For these examples, the idea is to get the idea, not to use the samples as they are. Here's what's coming up in this module. We're going to be looking at what happens when we use routes in a recursive model, and then, although we visited it, we're going to take another look at redirection and how we might use it a bit differently. And finally, how to smoothly transition between routes, which is just a cool technique to have under your belt. So let's get started.