1 00:00:00,840 --> 00:00:02,460 -: In the last section, we put together 2 00:00:02,460 --> 00:00:05,490 a rudimentary header of sorts. 3 00:00:05,490 --> 00:00:07,260 Let's pull our diagram back up, 4 00:00:07,260 --> 00:00:09,990 for our application our mock up of sorts, 5 00:00:09,990 --> 00:00:11,850 and just make sure that we're on the same page 6 00:00:11,850 --> 00:00:13,440 on where we're trying to go. 7 00:00:13,440 --> 00:00:17,160 We've got the home resources and sign in buttons on here, 8 00:00:17,160 --> 00:00:20,550 just as we have home, resources, and sign in. 9 00:00:20,550 --> 00:00:23,130 So again, the purpose of this sign in button right here 10 00:00:23,130 --> 00:00:24,810 is to flip our users between 11 00:00:24,810 --> 00:00:26,850 a signed in and a signed out state. 12 00:00:26,850 --> 00:00:30,690 So it's really just a testing development client 13 00:00:30,690 --> 00:00:33,270 side button here that we're just gonna use to simulate 14 00:00:33,270 --> 00:00:35,910 whether or not a user is signed in. 15 00:00:35,910 --> 00:00:38,640 The home and the resources buttons, on the other hand, 16 00:00:38,640 --> 00:00:40,380 are here for navigation. 17 00:00:40,380 --> 00:00:43,860 So when a user clicks on home or they click on resources 18 00:00:43,860 --> 00:00:45,990 we're gonna treat that as a route change. 19 00:00:45,990 --> 00:00:47,670 So it's gonna be like the user trying to go 20 00:00:47,670 --> 00:00:50,580 to a different page inside of our application. 21 00:00:50,580 --> 00:00:52,410 So in this section, we're gonna start putting together 22 00:00:52,410 --> 00:00:54,450 the reactor router side of things. 23 00:00:54,450 --> 00:00:56,670 We're gonna make sure that we've got a home route 24 00:00:56,670 --> 00:00:59,970 and make sure that we have a resources route as well. 25 00:00:59,970 --> 00:01:02,250 Now, the first kinda run through that we're gonna do 26 00:01:02,250 --> 00:01:06,660 with React router is not gonna have any sense of navigation 27 00:01:06,660 --> 00:01:08,970 or excuse me, authentication or anything like that. 28 00:01:08,970 --> 00:01:12,210 We're just gonna say the user can visit any route they want, 29 00:01:12,210 --> 00:01:15,330 there's no such thing as authentication right now. 30 00:01:15,330 --> 00:01:17,490 So in this section, we're going to work at setting up 31 00:01:17,490 --> 00:01:19,830 the home route and the resources route. 32 00:01:19,830 --> 00:01:22,500 And if we have enough time, we'll put together kind of 33 00:01:22,500 --> 00:01:24,780 the data that's gonna represent 34 00:01:24,780 --> 00:01:27,183 our protected resource as well. 35 00:01:29,040 --> 00:01:31,080 So with that in mind, I'm gonna flip back over 36 00:01:31,080 --> 00:01:34,260 to my code editor and to set up our router, 37 00:01:34,260 --> 00:01:37,020 we're gonna do so at our most top level component, 38 00:01:37,020 --> 00:01:41,490 which is gonna be inside of source index dot js. 39 00:01:41,490 --> 00:01:42,870 So inside of this file right here, 40 00:01:42,870 --> 00:01:45,900 we're gonna be doing our React Router setup. 41 00:01:45,900 --> 00:01:48,780 The first thing we need to do is import some files 42 00:01:48,780 --> 00:01:50,400 from React Router. 43 00:01:50,400 --> 00:01:54,813 So I'll import router, route, 44 00:01:56,310 --> 00:01:57,490 and browser history 45 00:01:59,520 --> 00:02:02,823 all from, excuse me, react router. 46 00:02:04,410 --> 00:02:06,480 Remember the router is the top level object. 47 00:02:06,480 --> 00:02:09,360 It's what is the actual Router Insider application. 48 00:02:09,360 --> 00:02:10,949 It's what's gonna watch the url. 49 00:02:10,949 --> 00:02:12,810 Whenever the URL gets updated 50 00:02:12,810 --> 00:02:16,380 it's gonna tell its child routes to re-render 51 00:02:16,380 --> 00:02:18,390 with some different components. 52 00:02:18,390 --> 00:02:20,730 Then the browser history is what is responsible 53 00:02:20,730 --> 00:02:23,670 for telling the router how the router should keep track 54 00:02:23,670 --> 00:02:25,023 of the current url. 55 00:02:27,180 --> 00:02:29,460 So our provider call here, everything inside 56 00:02:29,460 --> 00:02:32,100 of it is gonna get a little bit jumbled here. 57 00:02:32,100 --> 00:02:34,950 We're going to remove the existing app tag 58 00:02:34,950 --> 00:02:37,683 and we'll replace it with a router tag. 59 00:02:38,520 --> 00:02:40,683 And we'll also pass in the history. 60 00:02:46,320 --> 00:02:47,460 There's our router 61 00:02:47,460 --> 00:02:49,890 and then we'll define our top level route 62 00:02:49,890 --> 00:02:52,740 whose path is just gonna be forward slash. 63 00:02:52,740 --> 00:02:54,990 And whenever a user is at that route, 64 00:02:54,990 --> 00:02:58,983 we wanna show them the app component, like so. 65 00:03:00,630 --> 00:03:02,160 All right, So this is pretty much all we need 66 00:03:02,160 --> 00:03:04,320 to show our app right now. 67 00:03:04,320 --> 00:03:06,690 I'm gonna go ahead and save this file. 68 00:03:06,690 --> 00:03:08,310 Let's flip back over to the browser 69 00:03:08,310 --> 00:03:10,530 and make sure everything is still working 70 00:03:10,530 --> 00:03:14,763 and yep, looks good, no errors, everyone's happy. 71 00:03:16,740 --> 00:03:18,960 Let's add in our second route now, 72 00:03:18,960 --> 00:03:21,570 the one for the protected resources. 73 00:03:21,570 --> 00:03:23,940 So inside of the forward slash route 74 00:03:23,940 --> 00:03:27,300 inside of this route, we'll add another route. 75 00:03:27,300 --> 00:03:30,573 And this one's path is gonna be just resources. 76 00:03:31,920 --> 00:03:36,090 And whenever a user navigates to forward slash resources 77 00:03:36,090 --> 00:03:39,540 we will want to show the component resources. 78 00:03:39,540 --> 00:03:41,010 Now, we haven't defined that just yet. 79 00:03:41,010 --> 00:03:42,510 We're gonna do that right now. 80 00:03:43,470 --> 00:03:44,490 So at the top 81 00:03:44,490 --> 00:03:46,470 let's get that import statement outta the way. 82 00:03:46,470 --> 00:03:49,110 Even though we haven't created the file yet. 83 00:03:49,110 --> 00:03:53,163 We'll import resources from components, 84 00:03:54,090 --> 00:03:57,210 resources like so, and then 85 00:03:57,210 --> 00:03:59,940 in our source components directory, 86 00:03:59,940 --> 00:04:03,093 will make resources dot js. 87 00:04:05,430 --> 00:04:06,960 All right, so in here, again 88 00:04:06,960 --> 00:04:08,430 this component that we're making 89 00:04:08,430 --> 00:04:10,470 it is just kind of presentational. 90 00:04:10,470 --> 00:04:11,910 It's just for testing. 91 00:04:11,910 --> 00:04:13,230 We're just gonna have it show some kind 92 00:04:13,230 --> 00:04:15,060 of dummy text of sorts. 93 00:04:15,060 --> 00:04:17,730 The component itself is gonna have no idea 94 00:04:17,730 --> 00:04:18,930 of authentication. 95 00:04:18,930 --> 00:04:21,540 That's the whole idea of a higher order component. 96 00:04:21,540 --> 00:04:24,330 The higher order component's job is to implement this kind 97 00:04:24,330 --> 00:04:25,800 of shared logic 98 00:04:25,800 --> 00:04:29,490 in a reusable fashion over many different components. 99 00:04:29,490 --> 00:04:31,410 So when we make resources right now, 100 00:04:31,410 --> 00:04:33,600 it's gonna be essentially just dumb as heck. 101 00:04:33,600 --> 00:04:35,670 It's gonna have no idea what's going on, 102 00:04:35,670 --> 00:04:38,220 no idea that authentication is even present 103 00:04:38,220 --> 00:04:39,603 inside of our application. 104 00:04:40,525 --> 00:04:42,270 And to make that really clear and really evident, 105 00:04:42,270 --> 00:04:43,103 we're gonna make 106 00:04:43,103 --> 00:04:46,623 the most simple pot react component possible. 107 00:04:47,550 --> 00:04:50,860 At the top, we'll import react 108 00:04:52,170 --> 00:04:55,080 and then we'll export default, our component 109 00:04:55,080 --> 00:04:57,300 which is gonna be a functional component. 110 00:04:57,300 --> 00:05:00,870 And like I said, it's gonna be very simple. 111 00:05:00,870 --> 00:05:02,733 We're gonna return a div, 112 00:05:04,560 --> 00:05:06,490 and the div is gonna contain nothing 113 00:05:09,120 --> 00:05:10,653 but some static text. 114 00:05:13,020 --> 00:05:15,570 So that your mark up in here can be 115 00:05:15,570 --> 00:05:16,680 absolutely anything you want. 116 00:05:16,680 --> 00:05:19,530 I'm just gonna pretend that I'm making a recipe of sorts. 117 00:05:20,400 --> 00:05:23,400 And since it's super and special 118 00:05:23,400 --> 00:05:26,010 and let's say it's also secret, 119 00:05:26,010 --> 00:05:28,110 we never would want a user to see this 120 00:05:28,110 --> 00:05:30,060 if they're not authenticated to see it. 121 00:05:33,720 --> 00:05:38,640 And the recipe is gonna be awfully ridiculous. 122 00:05:38,640 --> 00:05:43,640 One cup sugar, one cup pepper, one cup salt. 123 00:05:43,830 --> 00:05:46,247 I can't even imagine what that would taste like (chuckles). 124 00:05:47,250 --> 00:05:49,050 All right, let's save this 125 00:05:49,050 --> 00:05:50,640 and see what we have in the browser now. 126 00:05:50,640 --> 00:05:51,930 So I'm gonna save everything 127 00:05:51,930 --> 00:05:55,371 flip back over to the browser, refresh. 128 00:05:55,371 --> 00:05:58,170 And now I should be able to click on resources. 129 00:05:58,170 --> 00:05:59,220 And when I click on resources 130 00:05:59,220 --> 00:06:00,810 you'll see that the route changes 131 00:06:00,810 --> 00:06:02,310 and I don't get any error message here, 132 00:06:02,310 --> 00:06:05,580 but our special component doesn't show up on the screen. 133 00:06:05,580 --> 00:06:06,570 And the reason for that is 134 00:06:06,570 --> 00:06:09,780 that we have not yet told app how to render children 135 00:06:09,780 --> 00:06:12,480 if it gets handed a nested route. 136 00:06:12,480 --> 00:06:14,940 So remember, this is one of the gotchas and react router. 137 00:06:14,940 --> 00:06:18,420 We need to flip back over to App and say, Hey, app 138 00:06:18,420 --> 00:06:20,583 if you ever get past any children, 139 00:06:22,470 --> 00:06:23,670 make sure you show them. 140 00:06:24,990 --> 00:06:27,120 So this line right here, the this dot props 141 00:06:27,120 --> 00:06:30,480 dot children as reminder, this is part of React Router. 142 00:06:30,480 --> 00:06:35,010 It means if our app component ever has any children 143 00:06:35,010 --> 00:06:37,500 and the user visits a route that matches 144 00:06:37,500 --> 00:06:40,260 up to those children, app needs to be responsible 145 00:06:40,260 --> 00:06:42,000 for showing those children as well. 146 00:06:42,000 --> 00:06:45,123 And we do that by displacing this dot props dot children. 147 00:06:46,710 --> 00:06:48,660 Okay, now we got that line in place. 148 00:06:48,660 --> 00:06:50,310 Let's refresh the page. 149 00:06:50,310 --> 00:06:52,170 And I'm on the resources tab right here. 150 00:06:52,170 --> 00:06:53,490 I'm on the resources route 151 00:06:53,490 --> 00:06:57,750 and we see our very simple text based component pop up. 152 00:06:57,750 --> 00:06:59,823 And if I go back to home, it goes away. 153 00:07:01,170 --> 00:07:02,370 All right, So this looks pretty great. 154 00:07:02,370 --> 00:07:05,340 This forms the very core of our application. 155 00:07:05,340 --> 00:07:07,440 We've got all the content we need. 156 00:07:07,440 --> 00:07:09,810 We have the ability to show some, you know 157 00:07:09,810 --> 00:07:12,600 nonsensical kind of empty view right here, 158 00:07:12,600 --> 00:07:15,030 that in theory maybe we would be 159 00:07:15,030 --> 00:07:18,390 prompting the user to log in or something like that. 160 00:07:18,390 --> 00:07:22,230 And then once the user clicks on the resources tab or button 161 00:07:22,230 --> 00:07:26,550 at the top, we show them our in theory, secret component. 162 00:07:26,550 --> 00:07:29,190 Now there's absolutely no authentication right now. 163 00:07:29,190 --> 00:07:31,500 The sign in button does absolutely nothing. 164 00:07:31,500 --> 00:07:32,400 So in the next section, 165 00:07:32,400 --> 00:07:34,818 let's work at wiring up this sign-in button somehow. 166 00:07:34,818 --> 00:07:36,003 I'll see you there.