Complete Intro to React, v2 (feat. Router v4 and Redux) Routing in React

[00:00:00]
>> Brian Holt: What we're gonna talk about now is actually that primarily I rewrote this workshop, the primary reason, React Router V4. Which is still in alpha, so this is my big disclaimer at this point in time. Please heed my words that again, we are using the alpha version. I've been following the repo, I've been bugging the maintainers, to make sure that the alpha is not gonna change a lot to what the final release is gonna be.

[00:00:27] But this is software, stuff still changes. But I've been pretty much assured that while there might be some minor API changes from alpha to the final release, the concepts here are kinda universal. So the one thing that I will definitely, definitely do is on the webpage for this particular workshop, I will include an errata of like here are all the things that have changed between alpha and release.

[00:00:54] So in the future when you are watching this you can just kinda make sure, like, okay here are the things that have changed. But other than that, these should be relatively the same. Cool. So React router. What a tumultuous history the React router has. It's a great, great library written by people much smarter than I am.

[00:01:17] But it has had API thrash, like no one's business. Like some libraries can survive going through major re-writes like rails being one of the infamous one. Was it two to three that was just insane?
>> Speaker 2: Two to three was huge.
>> Brian Holt: Yeah. So React router in it's two year history, two-ish year history has done it like three times.

[00:01:38] Three times?
>> Brian Holt: Two, at least twice anyway. And basically so there was, anyway. So React Router Four is a total rewrite. The entire library has almost completely changed. And everyone's kinda mad about it, understandably so. It's not fun rewriting your app but I would also argue that React Router 4 got so much better that it's worth it.

[00:02:05] It got so much more simple. It's not kind of emulating React anymore. It is actually just using React in a good way, so I'm a fan. It's cool. So that's what we're gonna do now is we're actually going to implement React router into our app. And we're gonna have multiple pages in like a single page app kind of faction.

[00:02:31]
>> Brian Holt: So they had API thrash from zero to one, from one to two slash three and from two to three to four. Which is crazy, but they have assured us that this is the last major thrash, but who knows? [LAUGH] Famous last words. So let's move our landing page to its own component, because we're gonna make client app actually like the routing part of our app.

[00:02:56] And we're gonna make landing more of like the actual page that goes there. So go to your client app. So we're gonna yank all of this code right here, so basically everything inside of app. So cut, copy, however you wanna do that. And then, we're gonna make a new page called landing.js.

[00:03:18] Inside of the JS directory. When it import React from 'react', import React from 'react'.
>> Brian Holt: That's fine, we don't need that. I'm gonna say const Landing = React.createClass,
>> Brian Holt: render () and return that pasted mark-up.
>> Brian Holt: And then, export default Landing.
>> Speaker 2: There's a question about, is Version 3x gonna be still supported?

[00:04:12]
>> Brian Holt: They just released 3x formally last week, so [CROSSTALK]. No, I mean, I can assert that as yes. Ryan who is a former Frontend Master, a current Frontend Master I guess. [LAUGH] He is a Frontend Master in all senses of the word, has assured me that they will support one, two, and three until people stop using them, so.

[00:04:35]
>> Speaker 2: They want me to press you a little bit more on what the difference is between versions two, three, and four are? And why you would choose one of the other?
>> Brian Holt: The API is totally different in the way you should do it. And I would assert strongly that four is the simplest at the top of my head I really couldn't articulate very well the differences but what I can say is that I have this version of the workshop which is in v4 and then I have the other version of workshop which is in v1.

[00:05:12] And so, that would be pretty telling to see two different apps were, is in the different versions of software so how to go check out the v1 versions workshop. If you're interested in comparing. And there was a pretty big difference in two and three. And we didn't do another workshop for two or three.

[00:05:32] Nor have I written much with it, so I don't really know too much of the difference. Any questions? Excuse me. [COUGH]
>> Brian Holt: So landing is okay, so you can say that now. And here in cline app,
>> Brian Holt: Do a couple more things here. Let's put it up here.

[00:06:07] Import, hash router and match
>> Brian Holt: From react-router. So if you're following my notes here, my notes here are a little messed up. So fair warning.
>> Brian Holt: And we're gonna return here. So first thing the route of this particular component is gonna be the HashRouter.
>> Brian Holt: And then, we're gonna have the div inside of that.

[00:06:50] And then, inside of the div you're gonna have Match exactly pattern,
>> Brian Holt: ='/',
>> Brian Holt: component={Landing}, and looks just like that.
>> Brian Holt: Okay, so save that. Make sure your lint isn't yelling at you or make sure it's running. npn run dev.
>> Brian Holt: So I do have one. Landing is not defined.

[00:07:35] That's a good reason. Import Landing from ./Landing,
>> Brian Holt: New line required
>> Brian Holt: So in Landing, go give it a new line. I probably should just turn that on in my, in fact, I might.
>> Brian Holt: [INAUDIBLE], let's see. New line, ensure new line at the save, that's what I want.

[00:08:26]
>> Brian Holt: And now, my editor will take care of it. So now, I don't have to keep doing that. So let's kinda pick apart what has gone on here, let's make sure it still works. You should see relatively the same thing. That's the idea. Except the only thing that you might notice up here is you got the hash slash, and I'll explain that momentarily where that weird looking artifact came from.