Complete Intro to React v4 Complete Intro to React v4

Refactor Components for Adding Routing

Check out a free preview of the full Complete Intro to React v4 course:
The "Refactor Components for Adding Routing" Lesson is part of the full, Complete Intro to React v4 course featured in this preview video. Here's what you'd learn in this lesson:

Brian chose Reach Router for its accessibility features. Refactor the application to use a Results model to display the pets, and create a simple Details page module.

Get Unlimited Access Now

Transcript from the "Refactor Components for Adding Routing" Lesson

[00:00:00]
>> Brian Holt: Let's talk about routing, so previous versions of this course I've taught react router all three times. To be honest with you still I would consider react router to be kind of the de facto standard. It's the one that everyones used, we used it at Netflix, I've used it at several places now.

[00:00:20] It's a great piece of technology and React Router v4 is really great. If you're interested in React Router, v3 of this course teaches React Router v4. Which is still the current version so feel free to go take a look at that. I also taught p1, I think in one of the courses as well, so I have several of them there.

[00:00:42] Today, we're gonna be talking about Reach Router, Reach Router was written by one of the authors of React router, so it's already written with a lot of experience. And, if you have written React Router before, it still feels pretty familiar. In fact, I'm not even gonna really show you many of the advance features of Reach Router.

[00:01:02] But it does some really, really compelling stuff, so I invite you to check out the documentation, it's quite compelling, so given that, why am I choosing to teach it? I do think it's a better library, personally, the accessibility, the amount of thought about accessibility that has gone into Reach Router is amazing.

[00:01:22] One thing that reach router does for you, and you don't have to do anything for, is it manages the focus of where things go really really well. So with React Router, when a route changed from one thing to the other, typically what a screen reader would expect is that you would focus on the thing that changed, right.

[00:01:39] Unfortunately react router, with the way that it was programmed, it just really couldn't do it. So with Reach Router, Ryan Florence re-architected it so that he was able to make it focus on the thing that change. So that's, to me, the biggest win why, on top of other things, there's a bunch of just little niceties, it does relative paths, which the previous one didn't do.

[00:02:00] There's a lot of things that are really convenient, so that's what we're gonna be talking about today is Reach Router. But again it's really simular you could interchange them and almost work. So what we wanna do now is we're gonna make this rather than just one page right, if we go over here this is just one page.

[00:02:20] We're gonna separate this into multiple different pages, we're gonna make a single page application. Now not everything that you do needs to be a single page application. You need to be asking yourself, am I building a single page application? Don't just assume that everything should be a single page application.

[00:02:35] If you have multiple distinct pages, those are fine to stay as separate HTML requests, right? So you need to ask yourself am I building an app, or am I building just like a normal website? And those can be distinct things, just make conscientious decisions, don't just assume. But I'm going to teach you how to do a single page application cause that's a common thing that people wanna do.

[00:02:58]
>> Brian Holt: So, let's go and split this page into a route, so right now we have everything kinda living inside of app, we're gonna make a new page here called "results". So save, inside of source "results.js" and basically what we're gonna do is we're gonna take almost everything from

[00:03:30]
>> Brian Holt: From app and move it into results.js, we're not gonna take react DOM, so you can delete that part. Delete this down here at the bottom and we're going to export default results.
>> Brian Holt: I mean we'll call this results as well.
>> Brian Holt: Let me get make sure I get all the mark up right.

[00:04:10]
>> Brian Holt: So we're gonna get rid of this top level div here and the Adopt Me part cuz that'll live inside of the app and we'll get rid of this div down here. So now it's just gonna be a div with all the pets stuff rendering inside of it.

[00:04:27] And we're gonna give this a className of search. [NOISE] Other than that pretty sure it's almost the same.
>> Brian Holt: Now let's go to app.js.
>> Brian Holt: And we can just rewrite all this pretty much.
>> Brian Holt: So we'll leave the import at the top and the render at the bottom.

[00:05:02] We'll still have to import render from react- dom and now we'll have to import results as well. Import results from dot/results, okay then we're gonna have class app extends reacts dot component and with a render method return div H1, adopt me and results.
>> Brian Holt: So so far the only thing that we've done is refactored this to be in a separate component.

[00:06:05] This should look exactly the same otherwise, other than adding some styling, cuz we added the search form. So if we go over here and refresh, yeah, you should see a white background now but otherwise it should look relatively the same.
>> Brian Holt: Now we have the Results route, which means we can switch to a different route.

[00:06:26] So we're gonna make just a really quick third page called details.js. This one's gonna be super simple too, import React from React and class Details extends React.Component render. And for now we're just gonna have it just return something really dumb. [SOUND] And then down here at the bottom export default Details.

[00:07:04]
>> Brian Holt: Like the simplest react component you can think of.