1 00:00:00,170 --> 00:00:00,470 Okay. 2 00:00:00,680 --> 00:00:05,750 And once we have all of the pages in place now let's set up index.js. 3 00:00:05,780 --> 00:00:11,270 And first, let's see why we want to set up Index.js in the first place. 4 00:00:11,600 --> 00:00:17,000 And in order to showcase that, first of all, I will clean my workspace. 5 00:00:17,000 --> 00:00:19,100 So effectively I'll remove all of the tabs. 6 00:00:19,100 --> 00:00:23,210 I find them quite annoying and I'll also collapse everything. 7 00:00:23,210 --> 00:00:24,980 So I'll start from scratch. 8 00:00:24,980 --> 00:00:31,400 I want to navigate to app JS and notice this import for home layout of course, in order to get those 9 00:00:31,400 --> 00:00:39,140 pages to app JS And yes, eventually all of our pages are going to be rendered in here in this app. 10 00:00:39,140 --> 00:00:44,330 JS Effectively we just want to copy and paste and of course it doesn't really matter which page you 11 00:00:44,330 --> 00:00:44,600 use. 12 00:00:44,600 --> 00:00:47,630 Let's say you go here with register. 13 00:00:48,800 --> 00:00:50,570 Technically everything is correct. 14 00:00:50,600 --> 00:00:53,480 You have this register page in the app. 15 00:00:54,020 --> 00:01:00,710 But notice that pretty much for every page we'll need to add another line of import. 16 00:01:00,710 --> 00:01:09,050 And a better approach is following where we navigate to the index JS inside of the pages one. 17 00:01:09,110 --> 00:01:13,470 And from this file we right away export all of the pages. 18 00:01:13,490 --> 00:01:17,480 So then where we want to use the pages in our case app. 19 00:01:17,480 --> 00:01:26,210 JS We can just set them up as named imports and you'll see in a second what I'm talking about if some 20 00:01:26,210 --> 00:01:27,730 of this sounds iffy. 21 00:01:27,740 --> 00:01:31,520 And as a result we just have less lines of code. 22 00:01:31,700 --> 00:01:36,980 And as a quick side note, we'll use the same setup for our components folder as well. 23 00:01:37,640 --> 00:01:39,080 So let's get started. 24 00:01:39,110 --> 00:01:43,350 We're going to navigate to Index.js and then the syntax is following. 25 00:01:43,370 --> 00:01:44,990 We want to go with export. 26 00:01:45,020 --> 00:01:48,350 Then we'll set up a default keyword. 27 00:01:48,470 --> 00:01:50,180 We need to come up with a name. 28 00:01:50,180 --> 00:01:52,670 So in my case it's going to be Dashboard. 29 00:01:53,530 --> 00:01:54,340 And layout. 30 00:01:54,400 --> 00:01:56,710 That's going to be the first one from. 31 00:01:56,710 --> 00:02:00,340 And now we want to look for the dashboard layout page. 32 00:02:00,490 --> 00:02:05,050 And again, same deal we want to repeat for all of the pages. 33 00:02:05,050 --> 00:02:09,580 So let me first copy and paste because we'll just need to change the values around. 34 00:02:09,789 --> 00:02:13,840 I'll probably add a few too many and then I'll just remove them. 35 00:02:13,840 --> 00:02:16,480 So the second one is going to be a landing one. 36 00:02:16,480 --> 00:02:18,400 And again, the logic is following. 37 00:02:18,400 --> 00:02:24,950 We pretty much take everything that's coming from the landing and we export as landing and in our app.jsx 38 00:02:25,600 --> 00:02:31,300 we'll use the named import and as a result we'll just have less lines of code. 39 00:02:31,890 --> 00:02:34,200 So after landing, we have the home layout. 40 00:02:34,960 --> 00:02:36,370 Home layout. 41 00:02:36,430 --> 00:02:38,680 Then we have the register one. 42 00:02:42,690 --> 00:02:45,810 After that we have the login one. 43 00:02:49,100 --> 00:02:51,260 Then we want to go with. 44 00:02:56,430 --> 00:02:58,770 After that, we have stats. 45 00:03:01,620 --> 00:03:05,070 Then we want to set up the all jobs. 46 00:03:07,680 --> 00:03:09,570 After that we want to go with Agile. 47 00:03:12,090 --> 00:03:12,870 Then. 48 00:03:13,950 --> 00:03:14,840 At a job. 49 00:03:20,070 --> 00:03:20,970 Profile. 50 00:03:24,020 --> 00:03:25,070 And admin. 51 00:03:25,070 --> 00:03:27,610 Hopefully I'm not missing any pages. 52 00:03:27,650 --> 00:03:33,070 If that's the case, then of course we'll just need to add extra code in the index.js. 53 00:03:33,080 --> 00:03:37,400 So now I can remove these extra export statements. 54 00:03:37,550 --> 00:03:39,890 I want to navigate back to the app JSX. 55 00:03:41,230 --> 00:03:42,400 And instead of. 56 00:03:43,150 --> 00:03:45,400 The import for every page. 57 00:03:45,400 --> 00:03:46,930 We're just going to go with import. 58 00:03:46,930 --> 00:03:50,470 Then we need to come up with the name and where is it coming from? 59 00:03:50,470 --> 00:03:53,080 And now we just want to point to the pages. 60 00:03:53,380 --> 00:04:01,960 So Index.js is going to be a main entry point, so we don't need to write specifically which file we're 61 00:04:01,960 --> 00:04:02,740 looking for. 62 00:04:03,490 --> 00:04:06,980 By default, Index.js is going to be the main entry point. 63 00:04:07,000 --> 00:04:13,510 So in here we just need to provide which pages we want and we'll start with home layout, landing register, 64 00:04:13,510 --> 00:04:17,260 login and dashboard layout as well as the error. 65 00:04:17,529 --> 00:04:19,630 Again, eventually we'll have all of the pages. 66 00:04:19,630 --> 00:04:20,560 But you know what? 67 00:04:20,589 --> 00:04:22,570 For now, let's just grab home layout. 68 00:04:22,600 --> 00:04:24,610 Then we want to get the landing one. 69 00:04:24,640 --> 00:04:26,410 Then we want to get the register. 70 00:04:26,410 --> 00:04:28,090 One the. 71 00:04:28,880 --> 00:04:29,750 Log in one. 72 00:04:29,780 --> 00:04:35,150 The dashboard layout one and also the error page as well. 73 00:04:35,270 --> 00:04:39,710 And as a side note, let me just double check whether I created. 74 00:04:39,710 --> 00:04:40,220 Yep. 75 00:04:40,400 --> 00:04:41,690 I created the error page. 76 00:04:41,690 --> 00:04:43,730 For some reason I thought that I missed that one. 77 00:04:43,730 --> 00:04:51,290 And then where we have the router, essentially we just want to set up more pages and we'll change some 78 00:04:51,290 --> 00:04:55,130 things around as well because there is actually no about Page. 79 00:04:55,160 --> 00:04:57,680 This was just to showcase the basic router. 80 00:04:57,680 --> 00:05:02,360 So we have a path forward slash that's going to be our home layout. 81 00:05:02,450 --> 00:05:03,560 And then. 82 00:05:04,400 --> 00:05:09,430 Right after that, let's set up the register login and dashboard. 83 00:05:09,760 --> 00:05:13,450 Let's copy and paste three times as far as the route. 84 00:05:13,450 --> 00:05:20,010 In this case, we're going to go with a register and in here we want to showcase the register page. 85 00:05:20,020 --> 00:05:22,990 Then we have the login one. 86 00:05:24,300 --> 00:05:26,010 And we'll look for the. 87 00:05:26,860 --> 00:05:29,440 Login component or the login page. 88 00:05:29,590 --> 00:05:32,500 And then we also have the dashboard. 89 00:05:33,960 --> 00:05:39,630 And as far as the dashboard page, well, we have our dashboard layout component. 90 00:05:39,660 --> 00:05:47,520 So now if we go to the URL bar and let's say type register, we should see the register page. 91 00:05:47,640 --> 00:05:51,540 And if you have the same setup, we can move on to the next step.