Complete Intro to React, v2 (feat. Router v4 and Redux) Creating the Search Page Route

[00:00:00]
>> Brian: So let's go make a second route that routes to our search page. So create a new file called search.js, and inside that search.js, we're just gonna put almost like hello world here. But import react from react, and right after I finish this, I will push up a new branch.

[00:00:23] Const search equals react.create class. Render. Return.
>> Brian: Whatever you want to put in here. It doesn't really matter because we'll change it. Search page. [COUGH] Bless you. And export default. Search.
>> Speaker 2: Question. Do you consider it bad practice to comment like that within your component with JSX?
>> Brian: I mean, I guess if I had a good reason to.

[00:01:05]
>> Speaker 3: Depends on if you're sitting in a workshop or not.
>> Brian: [LAUGH] Yeah it's great for if you need to leave notes on some research project. I don't I guess is the best answer I have.
>> Speaker 2: Okay.
>> Brian: If someone leaves a comment in there I don't know if I'm gonna be mad about it but I don't really comment in my code that much.

[00:01:22]
>> Speaker 2: Does webpack get rid of that kind of stuff, delete it?
>> Brian: I go with firewall just because it's an empty object. It's not used for anything.
>> Speaker 2: Check at optimize [INAUDIBLE].
>> Brian: Mm-hm.
>> Speaker 2: Another comment not a question. That you can use dangerous HTML to put in HTML style comments if you want them, obviously to render into the result.

[00:01:43]
>> Brian: That would be how you would do it. There is a API within react called dangerously set inner HTML. It is purposely poorly named and longly named so that you don't do it. But it's like unsanitized, directly I'll put this to the dom. And if it's you doing it and you control exactly the string going out there, it's fine, no problem.

[00:02:07] However, it's user generated content. It's a huge XSS vulnerability. So the answer to that question is, don't use it.
>> Speaker 2: It kind of raises of an interesting point. When you do want comments to show up in the source, right. What would that be useful for?
>> Brian: I mean we don't put any on Netflix's website.

[00:02:27]
>> Speaker 2: No.
>> Brian: Some people do code off.
>> Speaker 2: Well you want your cute logo with the bunny hop in it right?
>> Brian: I guess. Something like that. Logo or I mean, I would include the authorship stuff inside of the JavaScript, as a JavaScript comment, right?
>> Brian: But, so yeah, that is available if you need that.

[00:02:53]
>> Brian: Okay, so save your search page. Go to client app.js Import landing from landing. Sorry, import search from search, rather.
>> Brian: ./search.
>> Brian: And then, we're gonna put another match here.
>> Brian: And we wanna get rid of the exactly. Then we put /search. Then we want to go to search instead of landing.

[00:03:27] So as you can see here, adding new routes, not really a big deal. Pretty easy to do.
>> Speaker 2: This is the latest version of the router?
>> Brian: Yes. This is view four.
>> Speaker 2: This might be an OS or something, Tom was saying I'm getting there are multiple modules with names that only differ in casing error.

[00:03:50] Though it works fine. What's this about?
>> Brian: I've never seen that error before but it sounds like he has multiple modules named the same thing.
>> Speaker 2: Well, it's like, uppercase.
>> Brian: [LAUGH] That error sounds descriptive, I guess would be the best way to put that.
>> Speaker 3: Listen to it.

[00:04:06]
>> [LAUGH]
>> Brian: God damn you.
>> Brian: Great, so now if we save, refresh our page. And just URL hack to go to the search page.
>> Brian: We should see search page.
>> Brian: Now remember you still need the #/, right cuz we're using the hash router.
>> Brian: Questions?
>> Brian: I'll just go ahead and push this real quick.

[00:05:06]
>> Brian: So there it goes, v2-7.
>> Brian: Anyone have any questions or problems?
>> Speaker 2: Are we gonna be covering testing today or tomorrow?
>> Brian: Tomorrow probably.
>> Speaker 3: When it comes to the router, are we going to cover a nested child state?
>> Brian: Nope. It's not terribly difficult to do but you can definitely nest routes.

[00:05:38]
>> Brian: It's a useful thing to do. But in my limited example it just didn't come up.
>> Speaker 3: Okay.
>> Brian: My last workshop does though so. It's the older API but it's relatively similar. So you can check out the old one.
>> Brian: Cool. So let's make browser router work because this HashRouter business is stupid.

[00:06:05] So, all you have to do is go to web pack config, and you have to give it one more option, which is historyApiFallback:true. Which is basically telling the dev server. Hey, if you don't match something here, the browser probably will know what to do with it. So just send it on down anyway.

[00:06:36] So that's really all that does. It's just saying, reroute 404s to the homepage.
>> Brian: Okay. And then go to ClientApp.js. Where it says HashRouter, change that to be BrowserRouter.
>> Brian: That's kind of an aside. What's cool about learning things like react-router, react-router works perfectly well in React Native.

[00:07:19] The same API, doing the same things. Everything still works. So that's why this kind of react idea of learn once, write anywhere. So it's not write once, run anywhere, right? That's kind of the pipe dream in my opinion. That's never gonna really truly work because you have to embrace the differences of platforms.

[00:07:41] But the idea that you learn one paradigm, which is how to write react, and then you can write it in a bunch of different places. An example, actually I gave a talk in Iceland this past year about. I wrote react to run in the command line, then I wrote it to run in the browser.

[00:07:56] And then I wrote it to run on an Arduino, and then I wrote it to run in VR. With relatively the similar code. Right, now I had to have a different code. Right, because what you write for the command line or in Arduino is very different than what you write to run in VR.

[00:08:12] However it's the same paradigms, right. And something like ReactRouter could work on potentially on all of those platforms. Cuz the idea of routing is, as long as you have some sort of URL schema, it's gonna work almost everywhere. If we go back to our homepage here, we wanna make this browse all be link rather than just be a button.

[00:08:36] Before I move on, does anyone have any questions about anything we've talked about so far?
>> Brian: Okay, so go back to landing real quick. And up here, we're just gonna say, import, link, from react-router. Link is a component that basically lets us make links within our app. And then we're going to say link to /search.

[00:09:16] We just replaced the a here to be a link tag instead. Now you could just make this an a tag and that would work just fine, right? Cuz that link would still work. However one that won't work in react native or anything else like that. And the other thing is it won't, if I decided to change from browser router to hash router or hash router to browser router, those links are going to change, right?

[00:09:44] The URL structuring is going to change. So, just use link it's a lot easier that way. It takes care of all that dirty work for you. To, I meant to put equals not space. So, make sure, to make sure that's an equal and not a space.
>> Brian: Okay, so save that.

[00:10:11] Come back over here and refresh your page. And now, if you look down at the bottom, kind of hard to see down there. But this is now actually like a real link. So if I click browse all, I go to the search page. I can go back. I can go forward.

[00:10:26] I can open it in a new tab. Like, this all works like a normal browser should. So, it's good.
>> Brian: Any questions about link or anything like that?
>> Speaker 2: Can you show the code again?
>> Brian: Sure. So I just imported link up here. And I just did a link to, right there.

[00:10:55]
>> Brian: Great. So, let's go back to talking about props.
>> Brian: We already talked about them a little bit, right? Cuz we did this.props.title and this.props.color. We're just gonna kind of expand on that.
>> Brian: What we are gonna do is we're gonna go back to webpack config for just a second.

[00:11:15] Go ahead.
>> Speaker 2: Quick question. I think. Is index route gone from version four?
>> Brian: Yes, thankfully.
>> Brian: That's a v1, v2 way of doing routes. Yeah, now it's just match.
>> Brian: Match and miss, I guess. Match, miss, and redirect, those are the three that you have to worry about.

[00:11:37] But I think all of those make sense, right?