1 00:00:00,820 --> 00:00:04,950 In the last section we discuss the API that we're going to be using for application. 2 00:00:04,950 --> 00:00:07,740 Again we're not going to make use of that API right away. 3 00:00:07,770 --> 00:00:11,510 So just kind of hold onto that knowledge in your head for just a little bit. 4 00:00:11,520 --> 00:00:17,610 It's going to be a lot easier to cover it right now rather than break up our concentration later on. 5 00:00:17,610 --> 00:00:19,010 So back to the task at hand. 6 00:00:19,080 --> 00:00:23,070 I want to take a look at our up again and talk about one other big challenge that we're going to have 7 00:00:23,070 --> 00:00:24,770 inside this application. 8 00:00:25,170 --> 00:00:26,880 OK so here is our mockup. 9 00:00:26,880 --> 00:00:31,230 You'll notice that at the top of each of these diagrams are these separate pages. 10 00:00:31,230 --> 00:00:37,010 We indicated the route that the user would be navigating to or the route that they would be visiting. 11 00:00:37,020 --> 00:00:41,290 So it's a look at the list of all different posts that the user has created. 12 00:00:41,430 --> 00:00:46,190 They might be going to you or l like my post dot com slash. 13 00:00:46,230 --> 00:00:52,470 So just the very route route or the home route of our application and then we had said that if a user 14 00:00:52,470 --> 00:01:00,670 goes to pose slash Phife we want to show them the post with ID 5 on the screen and notice how the you 15 00:01:00,950 --> 00:01:06,330 the UI that we're showing for this is distinctly different than the full list of posts over here. 16 00:01:06,390 --> 00:01:12,330 Finally if a user goes to post slash new we want to show them a form to create a new post. 17 00:01:12,630 --> 00:01:17,030 So it's very clear that based on the you are that the user is looking at. 18 00:01:17,130 --> 00:01:23,520 We want to somehow show a different set of re-act components on the screen and not only show a different 19 00:01:23,520 --> 00:01:31,290 set of Riak components but we also want to say maybe fetch a particular blog post or we might want to 20 00:01:31,290 --> 00:01:33,760 fetch a big list of blog posts. 21 00:01:33,810 --> 00:01:41,280 So clearly the you are has a tremendous impact on exactly what our application is doing now to help 22 00:01:41,280 --> 00:01:46,890 us kind of manage this connection between the normal and the behavior of our application. 23 00:01:46,890 --> 00:01:51,450 We're going to make use of a library called re-act router in this section. 24 00:01:51,450 --> 00:01:54,440 We're just going to install it and we'll take a quick pause. 25 00:01:54,450 --> 00:01:59,970 Well it installs and come back in the next section and discuss exactly what it's doing for us. 26 00:01:59,970 --> 00:02:05,390 So I'm going to flip over to my terminal and I'm going to install the re-act router library. 27 00:02:05,400 --> 00:02:12,750 We're going to run NPM install desktops save re-act router and we're going to install a very particular 28 00:02:12,750 --> 00:02:14,010 version of re-act router. 29 00:02:14,050 --> 00:02:19,430 We're going to say at four point zero point zero like so. 30 00:02:19,620 --> 00:02:23,700 So do make sure that you get the correct version on here when you run the installation. 31 00:02:23,910 --> 00:02:28,690 The reactor our API is kind of notorious for changing over time. 32 00:02:28,710 --> 00:02:31,250 There have been a lot of breaking changes to the API. 33 00:02:31,440 --> 00:02:36,290 So it's really important to make sure that you and I are working on the same version of this library. 34 00:02:36,360 --> 00:02:40,260 Now you might see a little bit of a message on here about an unmet peer dependency. 35 00:02:40,270 --> 00:02:42,180 That's totally fine if you see some like that. 36 00:02:42,180 --> 00:02:43,410 Don't sweat it. 37 00:02:43,950 --> 00:02:44,260 OK. 38 00:02:44,280 --> 00:02:48,480 So while I'm going to let this thing you know your insulation might take a little bit longer than mine. 39 00:02:48,480 --> 00:02:49,800 So let's take a quick break. 40 00:02:49,800 --> 00:02:54,820 We're going to come back and talk about exactly what this library is doing for us and discussions can 41 00:02:54,820 --> 00:02:55,700 be really long. 42 00:02:55,700 --> 00:02:59,940 And so yeah we're going to tackle that inside the next section so I'll see in just a second.