Okay.
And like I mentioned in the previous video, the pages are going to be components, but we do want to
set them up separately.
Basically, there's also going to be a components folder where we'll have components that are being
used in the pages and we'll have the pages directory where we'll only have components that are pages.
Hopefully that is clear.
And in this video, essentially I just want to create a boilerplate for pretty much all of the pages.
How is that going to look like?
Well.
If you navigate to read me, you'll see this create pages.
So essentially we want to create a pages directory in the source and also we want to right away set
up the index js inside of the pages directory.
Now we will add the code in the index JS in the following video because I want to cover why we want
to do that, but effectively we can right away create that index.js in the pages and then also in the
pages we'll set up all of the pages we're going to have in our project.
Again, these are going to be straight up React components, but.
We will use them as pages in our project.
So let me.
And get started.
I want to navigate to the source.
Create a new folder.
Again, we're looking for pages.
Right away.
Create the index JS.
For now, we won't do anything over here.
And then one by one, we want to create all of those pages.
And I guess let's just start with the home one.
And actually, it's not going to be a home page, at least the file name.
It's going to be a home layout and you'll see why a little bit later on.
So let's go with new file and we want to go home layout JS.
Let's create a new component and I'm going to use my extension and I'm just going to set up a heading
one.
Now for now, just this one component I'll import in the app.
JS And showcase that of course.
Our functionality still works, even though technically our component is in a separate file.
But please don't import all of them because in the upcoming video we'll set up the index.
Where we'll simplify the import and export setup.
So for now, let me just navigate to App.jsx and I'm looking for my home layout.
Yep, auto import works and instead of this heading one, I'll simply go with my home layout component.
And if everything is correct again, if I navigate to the home page, what do you know?
I have a home layout heading one.
So now.
Again, let me just navigate to the Readme and take a look at all the files I need to create.
And you know, I will turn off the sound because I don't think there is any need for me to pretty much
repeat the same things.
So yes, you'll need to create a file and then you'll want to set up some kind of boilerplate structure.
So in my case, that is just a heading one with the page name.
So that way when I'm starting to build a page, I know that, hey, listen, everything works.
I can see the specific heading one.
So all the imports and exports and all of my current functionality works.
Hopefully that makes sense.
So again, I will turn off the sound.
I will create all of these files.
I won't import them yet in the app.jsx and in each file, basically there's going to be a heading one
with a specific page name.
And then of course I'm exporting the component.
So let's get started.
And once we have all of the pages in place, we can move on to the next step.