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.
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.
David Starr has worked in technology leadership positions for over 20 years. 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.
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.