1
00:00:00,050 --> 00:00:00,410
Okay.

2
00:00:00,500 --> 00:00:07,040
And like I mentioned in the previous video, the pages are going to be components, but we do want to

3
00:00:07,040 --> 00:00:08,280
set them up separately.

4
00:00:08,300 --> 00:00:14,510
Basically, there's also going to be a components folder where we'll have components that are being

5
00:00:14,510 --> 00:00:22,790
used in the pages and we'll have the pages directory where we'll only have components that are pages.

6
00:00:22,820 --> 00:00:24,230
Hopefully that is clear.

7
00:00:24,320 --> 00:00:32,270
And in this video, essentially I just want to create a boilerplate for pretty much all of the pages.

8
00:00:32,299 --> 00:00:33,650
How is that going to look like?

9
00:00:33,650 --> 00:00:34,190
Well.

10
00:00:34,790 --> 00:00:39,490
If you navigate to read me, you'll see this create pages.

11
00:00:39,500 --> 00:00:45,950
So essentially we want to create a pages directory in the source and also we want to right away set

12
00:00:45,950 --> 00:00:50,270
up the index js inside of the pages directory.

13
00:00:50,300 --> 00:00:56,660
Now we will add the code in the index JS in the following video because I want to cover why we want

14
00:00:56,660 --> 00:01:03,170
to do that, but effectively we can right away create that index.js in the pages and then also in the

15
00:01:03,170 --> 00:01:08,560
pages we'll set up all of the pages we're going to have in our project.

16
00:01:08,570 --> 00:01:13,490
Again, these are going to be straight up React components, but.

17
00:01:14,390 --> 00:01:18,380
We will use them as pages in our project.

18
00:01:18,410 --> 00:01:20,210
So let me.

19
00:01:21,020 --> 00:01:22,120
And get started.

20
00:01:22,240 --> 00:01:24,460
I want to navigate to the source.

21
00:01:24,880 --> 00:01:26,470
Create a new folder.

22
00:01:26,710 --> 00:01:28,660
Again, we're looking for pages.

23
00:01:29,050 --> 00:01:29,790
Right away.

24
00:01:29,800 --> 00:01:32,290
Create the index JS.

25
00:01:32,710 --> 00:01:35,080
For now, we won't do anything over here.

26
00:01:35,080 --> 00:01:39,400
And then one by one, we want to create all of those pages.

27
00:01:39,550 --> 00:01:41,950
And I guess let's just start with the home one.

28
00:01:42,190 --> 00:01:45,370
And actually, it's not going to be a home page, at least the file name.

29
00:01:45,370 --> 00:01:50,420
It's going to be a home layout and you'll see why a little bit later on.

30
00:01:50,440 --> 00:01:56,110
So let's go with new file and we want to go home layout JS.

31
00:01:57,310 --> 00:02:03,880
Let's create a new component and I'm going to use my extension and I'm just going to set up a heading

32
00:02:03,880 --> 00:02:04,370
one.

33
00:02:04,390 --> 00:02:09,160
Now for now, just this one component I'll import in the app.

34
00:02:09,160 --> 00:02:11,830
JS And showcase that of course.

35
00:02:12,520 --> 00:02:18,070
Our functionality still works, even though technically our component is in a separate file.

36
00:02:18,100 --> 00:02:23,110
But please don't import all of them because in the upcoming video we'll set up the index.

37
00:02:23,650 --> 00:02:27,760
Where we'll simplify the import and export setup.

38
00:02:27,760 --> 00:02:34,030
So for now, let me just navigate to App.jsx and I'm looking for my home layout.

39
00:02:34,060 --> 00:02:40,660
Yep, auto import works and instead of this heading one, I'll simply go with my home layout component.

40
00:02:40,660 --> 00:02:45,700
And if everything is correct again, if I navigate to the home page, what do you know?

41
00:02:45,700 --> 00:02:49,060
I have a home layout heading one.

42
00:02:49,060 --> 00:02:50,050
So now.

43
00:02:50,830 --> 00:02:57,070
Again, let me just navigate to the Readme and take a look at all the files I need to create.

44
00:02:57,100 --> 00:03:04,390
And you know, I will turn off the sound because I don't think there is any need for me to pretty much

45
00:03:04,390 --> 00:03:06,700
repeat the same things.

46
00:03:06,700 --> 00:03:14,620
So yes, you'll need to create a file and then you'll want to set up some kind of boilerplate structure.

47
00:03:14,620 --> 00:03:17,800
So in my case, that is just a heading one with the page name.

48
00:03:17,800 --> 00:03:23,040
So that way when I'm starting to build a page, I know that, hey, listen, everything works.

49
00:03:23,050 --> 00:03:24,880
I can see the specific heading one.

50
00:03:24,880 --> 00:03:30,630
So all the imports and exports and all of my current functionality works.

51
00:03:30,640 --> 00:03:31,930
Hopefully that makes sense.

52
00:03:31,930 --> 00:03:34,990
So again, I will turn off the sound.

53
00:03:34,990 --> 00:03:36,940
I will create all of these files.

54
00:03:36,940 --> 00:03:44,350
I won't import them yet in the app.jsx and in each file, basically there's going to be a heading one

55
00:03:44,350 --> 00:03:46,210
with a specific page name.

56
00:03:46,210 --> 00:03:49,420
And then of course I'm exporting the component.

57
00:03:49,420 --> 00:03:51,350
So let's get started.

58
00:06:58,090 --> 00:07:03,430
And once we have all of the pages in place, we can move on to the next step.