Complete Intro to React, v3 (feat. Redux, Router & Flow) HashRouter

[00:00:00]
>> Brian Holt: So okay. So now let's talk about HashRouter. HashRouter is what we're gonna call a higher order component in that it doesn't actually render anything itself out, right? You don't expect your router to render markup itself, right? What it does is it does routing and then you tell what markup to render.

[00:00:19] So it's higher order in the sense that it introduces behavior, right? It's taking care of routing for you, but it's not actually rendering any sort of markup out of it. That's what we call a higher order component. Now we're gonna use this one and we're gonna use more of them but there's nothing to stop us ourselves from writing them.

[00:00:36] In fact, later on we'll actually be writing a couple higher order components ourselves. So this is actually a kind of an advanced use case for React,
>> Brian Holt: But I think it's one worth knowing. It's one of the more powerful parts about using React. Any questions about high order components?

[00:00:54]
>> Brian Holt: So they encapsulate behavior but they do not necessarily encapsulate silo markup.
>> Brian Holt: So right now we have a really lame router system because we only have one route, but let's go ahead and make sure that it works anyway. So make sure you're,
>> Brian Holt: Did I put dev in there?

[00:01:18] I did not. So let's go ahead and go back to our package.json. We're gonna put another thing in here, and it's just going to be dev, which is going to be webpack-dev-server,
>> Brian Holt: Just that line right there, we don't have to pass it anything because it's already gonna read that from the webpack config.

[00:01:54]
>> Brian Holt: Okay, and now if we go run yarn dev, it'll run our server for us.
>> Speaker 2: So that's equivalent to npm start, right?
>> Brian Holt: I mean, yeah, sort of. So npm start would typically be just, the answer to your question is it can be whatever you want it to be, right?

[00:02:17] npm start, to me, semantically means how you'd start your production server, whereas npm run dev is how I'd run my own developer environment, but I guess that's just a choice I made. I don't even know if that's necessarily best practices, but. Did I sufficiently vaguely answer your question?

[00:02:35] Okay, cool.
>> Brian Holt: Okay, so I want you to take note of one thing really quick. Notice this weird hash is suddenly showing up in our URL. How many of you have seen that before, right? Really common way of being lazy about doing single page applications. The reason why is that your server doesn't have to care about any of the routes, right?

[00:03:01] Basically what you say on your server is go to this page if you see any URL that looks remotely like this, and then the client side code is gonna take care of all the routing for you. So it's super lazy and don't do it, right? [LAUGH] Like take the time to actually go and set up your server correctly.

[00:03:19] But what is actually doing that is HashRouter. So if we're gonna migrate momentarily here to BrowserRouter, but I'm gonna show you, we're gonna build one more route first.
>> Brian Holt: So make a new file, call it search.jsx, and we're just gonna make the most bare bones things possible. So import React from 'react.

[00:03:54]
>> Brian Holt: So in Search,
>> Brian Holt: What I want you to do really quick is just make like the most bare bones thing possible.
>> Brian Holt: I'm highly paid for my abilities to create fine UIs. Export default Search.
>> Brian Holt: Okay, so just something dumb, cuz we just wanna test real quick that we can route correctly.

[00:04:39]
>> Brian Holt: And go back to client app,jsx.
>> Brian Holt: And import Search from './Search. And we're gonna create another Route,
>> Brian Holt: And this is not going to be exact, doesn't need to be. /search, so anytime they go to /search, the component is going to be, as you may have guessed, Search.

[00:05:23]
>> Brian Holt: Okay, so now we have two routes. Now if you refresh so landing still works, now I'm just gonna URL hack up here and type in Search at the end of that. Of you refresh, sorry, hit Enter on that, you should see your second route. And now we can go back and forth.

[00:05:46]
>> Speaker 3: Can you go back to Search?
>> Brian Holt: Now it's just as bare bone as possible. So this is using a library called History underneath it. What's really nice about History is it's directly interacting with the dom's history API. Which means if you're just building with React router you get all, like the back button, forward button, opening links with Cmd+click and all that stuff.

[00:06:12] That all just works for free, which is really good. So again, if I hit Forward on here you can see I get forward, backwards, all that stuff just works automatically.
>> Speaker 3: I'm getting the router's not defined.
>> Brian Holt: In client app?
>> Brian Holt: I would imagine that's problematic.
>> Brian Holt: In landing, it'd be better if we didn't necessarily have the Browse All button, actually took us to the Search page, right?

[00:06:51] So luckily, if we go to landing,
>> Brian Holt: What we can do here is we can import a link component from 'react-router-dom. And we can just replace this Browse All,
>> Brian Holt: Replace that Link with a link and that goes to /search.
>> Brian Holt: And what Link is going to do, is all it's gonna do it's gonna generate an anchor tag, an A tag with the correct URL to go to.

[00:07:39]
>> Brian Holt: So if we Refresh, notice that the UI hasn't changed, it looks exactly like it did because it just went from being an anchor tag to being an anchor tag. However, if I click on it, it will take me to Search.
>> Brian Holt: And again, because it's an anchor tag I can Cmd+Click, and notice that it opened a new tab and it works just fine.

[00:08:04] So as long as you don't mess up the browser, don't use event click listeners that do window.location to forward you on to somewhere else. As long as you don't do any of that shenanigans you just get all the browser functionality built for free. And your site's a ton more accessible, so all good things.