1 00:00:00,480 --> 00:00:01,380 Narrator: Our application 2 00:00:01,380 --> 00:00:02,850 is looking pretty darn good right now. 3 00:00:02,850 --> 00:00:06,030 We have the ability to sign in, sign up, and sign out. 4 00:00:06,030 --> 00:00:09,000 We also have the ability to protect individual routes. 5 00:00:09,000 --> 00:00:11,070 One quick little breather task in here 6 00:00:11,070 --> 00:00:12,210 that we need to take care of 7 00:00:12,210 --> 00:00:13,860 that we haven't really gotten to just yet 8 00:00:13,860 --> 00:00:16,590 is that when we're sitting on the root route right here, 9 00:00:16,590 --> 00:00:18,030 we don't really see anything on the screen, 10 00:00:18,030 --> 00:00:20,340 which is, eh, you know, a little bit weird. 11 00:00:20,340 --> 00:00:21,750 It'd be really nice if we had an area 12 00:00:21,750 --> 00:00:24,240 to kind of put a little bit of, say, marketing language 13 00:00:24,240 --> 00:00:25,560 or something like that. 14 00:00:25,560 --> 00:00:26,393 So in other words, 15 00:00:26,393 --> 00:00:28,590 whenever a user is sitting at the root route, 16 00:00:28,590 --> 00:00:30,420 we wanna show some content 17 00:00:30,420 --> 00:00:33,213 inside of our applications body right here. 18 00:00:34,590 --> 00:00:38,190 If you recall talking about React Router in the past, 19 00:00:38,190 --> 00:00:40,300 whenever we are visiting a route 20 00:00:41,760 --> 00:00:44,640 that does not match any child routes, 21 00:00:44,640 --> 00:00:46,590 if we wanna show some content on the screen, 22 00:00:46,590 --> 00:00:49,140 kind of like some default content, so to speak, 23 00:00:49,140 --> 00:00:51,540 we can set up an index route. 24 00:00:51,540 --> 00:00:54,150 So we've already in included or imported 25 00:00:54,150 --> 00:00:56,547 the IndexRoute helper from React Router. 26 00:00:56,547 --> 00:00:59,920 All we have to do is declare our IndexRoute 27 00:01:01,980 --> 00:01:06,063 underneath our root route that shows "App" right now. 28 00:01:07,380 --> 00:01:09,570 An IndexRoute, of course, does not need a path 29 00:01:09,570 --> 00:01:13,770 because it's only matched when only the parent is matched. 30 00:01:13,770 --> 00:01:15,750 So we can add on here a component 31 00:01:15,750 --> 00:01:18,417 and I'm just gonna call this component "Welcome." 32 00:01:19,950 --> 00:01:21,060 And so the purpose of Welcome 33 00:01:21,060 --> 00:01:23,820 is just gonna be to show some simple text to the user. 34 00:01:23,820 --> 00:01:25,170 Just something to say "hi." 35 00:01:26,430 --> 00:01:28,140 We haven't created Welcome just yet. 36 00:01:28,140 --> 00:01:31,290 So I'm going to import it into this file 37 00:01:31,290 --> 00:01:34,053 and then we'll create the file for the component. 38 00:01:36,510 --> 00:01:37,830 Then inside of components, 39 00:01:37,830 --> 00:01:40,023 I'm gonna make a new file called Welcome. 40 00:01:41,790 --> 00:01:44,520 And this is gonna be just dead simple. 41 00:01:44,520 --> 00:01:47,860 We are going to import React from react 42 00:01:50,010 --> 00:01:52,740 and then we'll export default a fat arrow function 43 00:01:52,740 --> 00:01:57,273 that just contains a div and it should simply say, 44 00:01:58,777 --> 00:02:02,220 "Welcome to our slice of paradise." 45 00:02:02,220 --> 00:02:05,310 So just a very simple greeting for our users. 46 00:02:05,310 --> 00:02:08,009 I'm gonna save this, let's test it out in the browser. 47 00:02:08,880 --> 00:02:10,919 And now when we're on the root route, 48 00:02:10,919 --> 00:02:14,190 only we see the text, "Welcome to our slice of paradise." 49 00:02:14,190 --> 00:02:15,570 But I'm sure you could definitely imagine 50 00:02:15,570 --> 00:02:18,300 how we might want to turn this into a big welcoming page 51 00:02:18,300 --> 00:02:20,400 or a marketing page of sorts 52 00:02:20,400 --> 00:02:22,590 and, you know, tell people about what our product does 53 00:02:22,590 --> 00:02:24,060 and why they should sign up for it. 54 00:02:24,060 --> 00:02:26,460 So definitely a lot of different applications to take 55 00:02:26,460 --> 00:02:28,530 with this well component. 56 00:02:28,530 --> 00:02:29,910 Okay, so nice little breather here. 57 00:02:29,910 --> 00:02:33,030 Let's get back into the little bit more challenging stuff 58 00:02:33,030 --> 00:02:34,293 inside the next section.