1 00:00:00,680 --> 00:00:04,910 We spent quite a bit of time talking about exactly how we're going to build this application. 2 00:00:04,920 --> 00:00:08,100 So some of them actually put pen to paper and start writing some code. 3 00:00:08,370 --> 00:00:12,750 Let's get started by opening up our code editor and starting up our development server. 4 00:00:12,780 --> 00:00:17,760 I've already opened up my own code editor so I'm going to start up the server by running NPM run start 5 00:00:17,850 --> 00:00:23,970 inside of our project directory and then inside of my code editor I'm going to find my index dot js 6 00:00:23,970 --> 00:00:27,690 file inside of the SIRC directory and open it up. 7 00:00:28,050 --> 00:00:32,650 OK so the first thing I want to do is I want to just play around a little bit with re-act router. 8 00:00:33,000 --> 00:00:38,550 The end goal I want to have just inside the section is to create two different routes that a user can 9 00:00:38,550 --> 00:00:40,460 visit inside of our application. 10 00:00:40,740 --> 00:00:46,200 And based on the route or the URL that the user is visiting I want to see slightly different content 11 00:00:46,290 --> 00:00:48,030 appear on the screen. 12 00:00:48,150 --> 00:00:52,950 So the first thing that we're going to do to make this happen is we're going to create two very small 13 00:00:52,980 --> 00:00:58,010 components that we're just going to make right now and then eventually delete very shortly after. 14 00:00:58,020 --> 00:01:02,580 So inside the index on G-S file right above it the react on Dot render call. 15 00:01:02,580 --> 00:01:07,580 I'm going to create these two separate components that we're just going to use for testing purposes. 16 00:01:08,010 --> 00:01:10,410 We're going to make both of them class based components. 17 00:01:10,410 --> 00:01:20,130 So will say class halo extends react on components and will define just the render method inside of 18 00:01:20,130 --> 00:01:20,530 your. 19 00:01:20,670 --> 00:01:26,360 So we return a div that contains the text Hello. 20 00:01:27,180 --> 00:01:30,760 Now I'm going to duplicate the same exact thing. 21 00:01:30,800 --> 00:01:32,280 Paste it right beneath. 22 00:01:32,280 --> 00:01:36,250 Now I'm going to change the text inside of this to be goodbye. 23 00:01:36,420 --> 00:01:41,700 So I change the class name to goodbye and I change the div inside of it to contain the text goodbye 24 00:01:41,700 --> 00:01:42,540 as well. 25 00:01:42,900 --> 00:01:48,390 OK so those are two very small test components at this point we've done absolutely nothing specific 26 00:01:48,390 --> 00:01:49,560 to react router. 27 00:01:49,770 --> 00:01:54,390 So now we're going to start talking about exactly what we have to add to get react rudder started up 28 00:01:54,390 --> 00:01:56,330 inside of our application. 29 00:01:56,490 --> 00:02:00,840 We're going to first start off by importing a couple of different pieces of code from re-act router 30 00:02:01,170 --> 00:02:05,440 and then we're going to wire each of those up inside the react arm don't render call. 31 00:02:05,760 --> 00:02:08,510 So let's go to the top of the file and get started. 32 00:02:09,030 --> 00:02:15,150 I'm going to flip up to the top of the file and then we're going to add in an import statement. 33 00:02:15,670 --> 00:02:21,080 We're going to import a couple different items from re-act router dom. 34 00:02:21,420 --> 00:02:25,470 The first thing we're going to grab is Browser router. 35 00:02:25,740 --> 00:02:31,110 This browser router object right here is what interacts with the history library and decides exactly 36 00:02:31,110 --> 00:02:34,580 what to do based on a change inside the RL. 37 00:02:34,650 --> 00:02:41,580 The term browser router in particular is saying I want re-act router to look at the entire You Arel 38 00:02:41,610 --> 00:02:44,910 when deciding what different components to show on the screen. 39 00:02:44,910 --> 00:02:48,240 And we'll definitely talk about some of the different aspects of this router later on. 40 00:02:48,240 --> 00:02:54,210 So right now we're going to say that this is a piece of code that interacts with that history library. 41 00:02:54,210 --> 00:03:03,150 The next thing that we're going to import is the route component so route right here is the real workhorse 42 00:03:03,150 --> 00:03:04,980 of all things re-act router. 43 00:03:05,370 --> 00:03:11,000 This real route object right here is a re-act component that we can render inside of any other Riyadh's 44 00:03:11,010 --> 00:03:14,070 component that we put together inside of our application. 45 00:03:14,070 --> 00:03:20,370 The purpose of the router component is to provide that configuration that will say hey if the U r l 46 00:03:20,370 --> 00:03:23,330 looks like this then I want to show this component. 47 00:03:23,460 --> 00:03:27,200 And if the u r l looks like that then I want to show that component. 48 00:03:27,330 --> 00:03:33,810 So again the route object or the route component is all about providing some customization or configuration 49 00:03:34,020 --> 00:03:35,480 to react router. 50 00:03:36,090 --> 00:03:41,340 Now that we've imported these two objects and we've created our two components let's wire them all up 51 00:03:41,350 --> 00:03:45,560 inside the react on that render call at the bottom of the file. 52 00:03:45,680 --> 00:03:48,530 So I'm going to go back down to the bottom of the file. 53 00:03:48,690 --> 00:03:51,490 I'm going to delete the entire app tagged right now. 54 00:03:51,540 --> 00:03:53,540 So I don't want to show the app component at all. 55 00:03:53,610 --> 00:04:02,670 It's going to take it all the way out I'm going to replace it instead with browser router and I'll close 56 00:04:02,670 --> 00:04:07,910 off browser router like so. 57 00:04:08,000 --> 00:04:12,680 Next we're going to create that configuration that I've mentioned a couple of times now by making the 58 00:04:12,680 --> 00:04:19,760 two route components and mapping two instances of the road component up to each of the two test components 59 00:04:19,760 --> 00:04:20,960 that we put together. 60 00:04:21,380 --> 00:04:27,590 So I'm going to create an instance of route and another instance of route. 61 00:04:27,620 --> 00:04:32,930 Now there's two very particular and very important and required properties that we pass through every 62 00:04:32,930 --> 00:04:35,490 single route component that we create. 63 00:04:35,510 --> 00:04:38,190 The first is a prop called path. 64 00:04:38,510 --> 00:04:45,960 And the second is the prop called component path is almost always going to end up being a string. 65 00:04:46,010 --> 00:04:53,390 So it'll be a string that says if the user goes to this route then I want to show this component. 66 00:04:53,390 --> 00:04:56,770 And so in practice the API really does make a lot of sense right. 67 00:04:56,780 --> 00:05:02,330 OK if I go to this particular you Arel or this particular route I want to show this component on the 68 00:05:02,330 --> 00:05:08,440 screen if the route that the user is looking at does not match up with this path right here then. 69 00:05:08,490 --> 00:05:13,160 Hey don't show this component so let's fill out the implementation right here and see what it looks 70 00:05:13,160 --> 00:05:15,430 like inside in practice. 71 00:05:15,600 --> 00:05:19,010 So I got to say that if a user goes to a route called slash. 72 00:05:19,010 --> 00:05:23,690 Hello I want to show the helo component. 73 00:05:24,260 --> 00:05:31,720 And if a user goes to the path Good bye then I want to show the component. 74 00:05:32,020 --> 00:05:33,410 Goodbye. 75 00:05:34,090 --> 00:05:34,360 OK. 76 00:05:34,370 --> 00:05:38,810 So that's really all the setup that we have to do for re-act router to at least be able to test it inside 77 00:05:38,810 --> 00:05:40,040 the browser. 78 00:05:40,040 --> 00:05:42,100 So I'm going to flip over to the browser now. 79 00:05:42,600 --> 00:05:48,790 I've already opened up and navigated to local host AT&T. 80 00:05:48,830 --> 00:05:54,650 So right now if we go to localhost ADHD you might see a big error message on here says that we may only 81 00:05:54,650 --> 00:05:55,830 have one child element. 82 00:05:55,850 --> 00:05:59,920 I made a small mistake we're going to flip back over you see the browser router right here. 83 00:05:59,930 --> 00:06:03,980 So the error message that we just saw said hey you can only have one child element. 84 00:06:04,040 --> 00:06:09,440 And so really what that's saying is we just have to wrap this entire thing with a standard div like 85 00:06:09,440 --> 00:06:17,080 so OK so I just added a divin and it's wrapping both of the two routes that we just defined. 86 00:06:17,660 --> 00:06:22,680 So let's flip back over now or refresh again and you'll notice that absolutely nothing appears on the 87 00:06:22,680 --> 00:06:23,490 screen. 88 00:06:23,550 --> 00:06:25,730 And this actually makes a pretty good amount of sense. 89 00:06:25,830 --> 00:06:30,690 If you look at the code that we have right now we've defined two separate routes and in each route we 90 00:06:30,690 --> 00:06:37,350 said okay if the user goes to slash hello or slash goodbye then show a component. 91 00:06:37,350 --> 00:06:42,620 Otherwise essentially do nothing at all show no content on the screen whatsoever. 92 00:06:42,990 --> 00:06:46,780 So let's try going to one of those two routes and see what happens. 93 00:06:46,800 --> 00:06:54,210 I'm going to go up to the address bar and I'll change it to slash hello and when I do so the application 94 00:06:54,210 --> 00:06:59,350 loads up re-act router looks set to you or L or I should say the History Library looks at you or else 95 00:06:59,640 --> 00:07:06,480 it passes that route over to react router re-act router says OK it looks like the route is slash hello 96 00:07:06,780 --> 00:07:09,210 and that maps up to the helical Hello component. 97 00:07:09,210 --> 00:07:11,630 So I'm going to show hello on the screen. 98 00:07:11,910 --> 00:07:18,870 So in very similar fashion we can also go to good bye and now we show the goodbye component on the screen 99 00:07:18,870 --> 00:07:20,050 instead. 100 00:07:20,400 --> 00:07:23,880 We can navigate to just about any other route you could possibly imagine. 101 00:07:23,880 --> 00:07:29,100 So we can put in some jibberish here and when we do so react riders are just going to say well I don't 102 00:07:29,100 --> 00:07:30,240 know what to do with this route. 103 00:07:30,240 --> 00:07:33,360 I don't have any configuration that matches this jibberish up here. 104 00:07:33,420 --> 00:07:38,020 And so I'm going to decide to just show absolutely nothing at all. 105 00:07:38,040 --> 00:07:40,400 So it's pretty much re-act router in a nutshell. 106 00:07:40,800 --> 00:07:46,320 Whenever we go through the setup process we place the browser router tag and then we define some number 107 00:07:46,320 --> 00:07:52,920 of Route components inside that that pair up or match a given path to a particular component to show 108 00:07:52,920 --> 00:07:54,690 on the screen. 109 00:07:54,720 --> 00:08:00,120 Now if we wanted to if we want to show other content on here maybe a head or something like that we're 110 00:08:00,120 --> 00:08:07,620 still free to mix in as much components or text or anything we could possibly imagine in here along 111 00:08:07,620 --> 00:08:09,840 with these raw components that we've defined. 112 00:08:09,840 --> 00:08:15,360 So maybe if I always want to show a header to the user I could just hardcoded a header right above these 113 00:08:15,360 --> 00:08:19,970 two route components so I can just put in the text that says Hetter. 114 00:08:20,210 --> 00:08:23,080 Let's go to slash alone now. 115 00:08:24,530 --> 00:08:28,610 And I get my head appearing on the screen and the text that says hello. 116 00:08:28,970 --> 00:08:34,240 And if I go to goodbye I still see the header but I also see a goodbye. 117 00:08:34,250 --> 00:08:41,450 So essentially we use that route component to just show or hide a child component depending on the you 118 00:08:41,480 --> 00:08:42,640 Arel. 119 00:08:43,490 --> 00:08:48,100 OK so in this section we've gone over the basics of re-act router with some dummy components. 120 00:08:48,110 --> 00:08:50,330 Just very simple test components. 121 00:08:50,330 --> 00:08:54,560 Let's take a quick break and then we're going to come back and talk about how to apply this new knowledge 122 00:08:54,710 --> 00:08:57,500 to our particular application in the next section.