This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Route Parameters" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Brian: Let's start talking about marshalling data in React. So, we're gonna create another route, and we're gonna call it details search.jsx.
>> Brian: Inside of the JS folder. Okay, and we'll bring in react.
>> Brian: And let's do this one of the JSX class because, why not? [LAUGH] So, you can see both of the both ways of doing it.
[00:00:55]
>> Brian: ClassName Equals container. You know what, actually we don't even need, we do need container. Yeah, that's right. Yeah, and we're just going to put, you can put anything in here. Just going to do that for now, and then make sure you export at the bottom, okay? About the most basic ES6 class component you can do.
[00:01:37] To address Brit's question there, what about the browser five version of hot module reload? All I know is it's just starting to exist, that's about the best thing I can say about it. That browser five's new version has some concept of it or it might even be a plug in the browser five.
[00:01:56] Anyway Webpack has been doing it since the inception of Webpack. And I think browser fires, either via the community or via the project itself just catching up and doing it. It's valid I can say but I've never personally done it so can't really much tell you.
>> Brian: Okay, so let's go use our new route details.
[00:02:21] Sorry excuse me in the client app.JSX.
>> Brian: We'll pull that in here as well. Const details equals require.slash details, and down here, I'm going to say route path equals slash details slash colon ID. We'll talk about that here momentarily, component equals details, okay? So, what are we doing here?
[00:03:08] This, for those who do have written the service side routing code, this might look like familiar syntax for you. Definitely this is the way you do it in Express, and I think lots of other frameworks choose to do display as well. This is basically saying that I'm gonna have details which is going to be like that the name of the route trade details And then calling ID.
[00:03:31] Basically says something else is going to come here. It's going to be some sort of ID. So if I go to http://localhost:8080/details/15 it's actually gonna be like tt123456. Right, that's this right here is going to be the details and that's going to be passed into my router. And that's the basic just of what's going on there.
[00:04:03] So this is just saying that you're gonna pass something in here And that will be passed under the route and the route can deal with it. Why this is useful slash important is that these details pages we're going to make a individual detail page for each one of our movies and we are, TV shows rather.
[00:04:24] And we want to be able to make that page flexible enough to handle any one of the TV shows. We don't make an individual route for every single one We're doing, so let's just adds some flexibility to our router.
>> Speaker 2: Question, since we're using hash history. How does it know not to substitute the hash with the ID?
[00:04:45]
>> Brian: How does it know not to substitute the hash with your idea. I'm not sure that I follow your question.
>> Speaker 2: Whenever we go to search something and then and add hashtag something?
>> Brian: Right. So it's actually in All right. It's gonnalike this, something like that, right. Is that sidestep your question sufficiently?
[00:05:13] [LAUGH] Yeah.
>> Brian: Yeah, good question.
>> Brian: Okay, so let's go actually try that now. Make sure first of all your Webpack is still running. Mine still is right? But just make sure that's running in the background, hopefully you are not getting a ton of glinting errors.
>> Brian: So come in here.
[00:05:47] Refresh your page and change this to be details Slash one two three four which doesn't really matter what's there and you should see a new route here over with whatever you put in.
>> Brian: Most people seen this.
>> Brian: Cool.
>> Brian: So again we just added this new route here And then we just added the basically the most basic component here possible here in details.
[00:06:33]
>> Brian: Okay. So I wanna show you everything that's getting passed down to your route. So this is the details are route, right? So replace whatever you put here with. Precode and put in here, we've done this before, JSON.stringify(this.props, null, 4) By the way, I totally stole this. I did not think of this like this little debugging technique here, from Ryan Florence who's the author of react router.
[00:07:11] So also don't give me credit for that one. Okay. So refresh your page now and you should see a lot of stuff right, like this get a lot of stuff is getting passed down to your route from the router.
>> Brian: The most interesting thing that you wanna find And here is params, right here.
[00:07:37] I'll make it bigger so you can see it. Notice that I put in 12345 up here. I can change it to be,
>> Brian: Right? This allows you access to this id that we put in up here. So whatever we change to be up here
>> Brian: Right that's gonna be passed down to your route.
[00:08:04] That's, the important thing that I want you to get out of this.
>> Brian: If you want to make this look a little bit nicer you can say, style equals, text align [INAUDIBLE] Text align left,
>> Brian: And that should make this look nice there you go.
>> Speaker 3: So will you pass the id into the route?
[00:08:40] As a property.
>> Brian: Yeah. A react router does it for you automatically. And it's exposed via the params. Great. This is an awesome way to debug state 2, by the way. It's actually, it's probably even more compelling to debug state that way.
>> Speaker 4: You can make a debug component.
[00:09:14]
>> Brian: That's actually not a bad idea.
>> Speaker 4: Then just pass it a JSON
>> Brian: Yeah, definitely could. The nice thing about doing with state is you can actually like if you click something you immediately see the state reflected to the way that reactor renders itself every single time.
[00:09:31] Yeah, pretty compelling.
>> Speaker 5: You recommend using the React browser plugin.
>> Brian: Yeah, actually there's a whole section on that in here. Yeah.
>> Brian: I mean my personal opinion is that writing code is more about debugging and maintainability than actually writing new feature code. And so I'm trying to give you every tool I can to debug your code.