I think we're clear on styled components, at least the general sense at the end of the day, we really
just need to add the wrapper to our component.
That's all we have to do since I already included all the styling.
So now we can finally start working on our app.
And I think I'm going to start by setting up the router so we'll have home page about page products
page, single product page, that is, if we click on a product as we navigate over here.
Also, we're going to have a cart at the checkout and of course, the area now as we're setting up of
the reactor, I'll also show you some nifty setup when it comes to index Jayesh.
But for now, we'll just navigate.
Yes, I think I can remove the testing succah.
I don't think we need it here.
Let's save it.
And also, I can delete that file as well.
So it's been deleted.
And I'm sorry.
That's not obvious.
That's how you move the trash.
And once I'm here, remember when we were setting up the router or we needed we need a browser router
and of course, we gave it an alias as a router.
Then also we needed a switch and arrow.
I remember I mentioned that all my roots are right now in the pages directory.
And of course, every component just reflect the page.
And in order to render them, of course, I would need to import.
So previously we have done something like this where we go with import and then of course I'm going
to come up with nine, for example.
This is going to be about Page and I'm going to be getting it from and I'm looking for the pages and
the about page.
And in order to get all the pages, I would do something like this where I copy and paste and then change
the values.
However, there is a better setup if you don't like this one, because the problem with this one, if
you just have multiple files like that one where you're importing well, your file just gets giant.
Correct.
If I have 15 imports like this, then 15 imports from the other file.
As you can see, the file gets quite big, somewhat fast.
And a better setup is using the index, because if you notice here with the components, I have import
and then I specifically say what I'm importing from the components folder and notice here how I don't
have this extra.
So this doesn't get me from the specific file.
It just gets me from the components folder.
So, again, it's not going to affect the functionality.
It's just going to affect how the file where we're importing is going to look like.
So when I have a big project, I rather prefer this setup where I'm using the index.
So how it would work?
Well, first of all, I'm going to remove all these inputs.
I'm not going to need them.
And here in the pages folder, the directory setup index.
Yes, of course.
I already set up that file for you.
But in general, if you have your own project and if you want to set up this type of import, you need
to have in the sense it's going to be the entry point in the directory.
The moment you create a file with the name of the year, that's going to be the main entry point.
And in this index, just what I would want is actually set up the imports.
So in next year, now I'm going to import files from this directory and that's very important.
You technically can import from different directories, but that's not what we want.
I want only import files from this directory and then export it the way it's going to look like.
I'm going to go here, import and then home and I'm going to right away give them different names.
So notice, of course, the file name is Home Page, but I'm going to name them home and I'm going to
say that I would like to import file from the home page and I will write away in the Energous export
as well.
So say export, and I'll say that I would want to export home.
And essentially what that means that in the app just now, I can do the same thing like I have with
components where I write a way, say, hey, I would want to grab the Navar sideband for.
And please keep in mind these are named exports right now in here.
I'm exporting as default, meaning I'm importing as default from the home because of course, in the
home page I'm exporting as default like so so in the images I'm importing as default.
But when I'm exporting, I'm actually exporting as the name export.
Now you can add Alia's if you want, you could add as and whatever.
But in my case, I'm just going to leave the same name as I have right now for the home.
So in the objets, what I would need to do is go with import and then set up curlee.
Since my imports are named and I'm going to go with import home, since that is the name from and then
I just need to point to the directory, that's all I have to do the same like I have with components
certain here.
Now I'm just going with the pages where it is now I import and in order to start out, I'm just going
to go at home and once I render my component, I should see home page.
So everything works.
So now in the index, just I just need to import all these pages and then export and then wherever I
would want to use those components.
I simply go with pages since I have the energy that is my entry.
And then I specifically say, well, which components out one?
And if you take a look at the components and of course we have way more files now, I didn't export
all of them since it wasn't necessary.
There are some files that I'm using only here locally within the components.
But you'll also notice that this export is pretty giant, correct.
So next year I'm importing all of these of these components and then I write or export them.
So that way, wherever I need it in my app.
I can simply go to components and say, hey, listen, get me no, let me sidebar, get me four or whatever
component you want.
Again, this is a setup thing.
Doesn't mean the functionality will change.
Of course, you can do the multiple lines of imports, but it just makes your file to look a bit cleaner,
in my opinion.
Again, that is your choice.
So in my case, I'm going to go to index year in the pages.
And by the way, since technically this is a node thing and if you find this annoying, where you have
a bunch of inaccuracies, let's imagine a scenario where you have a bunch of directories with that.
You can also set up a different name.
Now, I'm not going to cover that since I think it's a bit out of the scope of discourse.
Just keep in mind that if you find having a bunch of these index just as annoying, there is a way how
you can actually name it differently.
For example, I don't know, you could name it pages and then you just need to set up the packages on,
I believe it was where you just point to that file as the main one.
Again, a little bit out of the scope.
Definitely.
You can Google that one for now, since we have only two directories that do that.
I'm just going to stick with that index.
Just approach since by default index jazz will be the main entry point.
So I'm going to navigate back to the pages and one by one, I'm just going to import those files.
And I believe I have eight of them.
One, two, three, four, five, six, seven, eight.
I think I have it now.
I have seven one more here.
And then, of course, I'll just channel this one around.
So let me select all of these and I'll delete them.
And the same is going to go here for the homepage and then I'll just use two casters or, you know,
and we cannot use the cursor since of course I'll name them differently.
So products on line here will go with products page like.
So then the next one is a single product and we're going to go with a single page.
And again, this is an example of why I don't want to do the imports together.
So of course, yeah, we're doing it right now since I wanted to showcase the jazz.
But in general I just find it somewhat redundant if we have to type it together.
That's why for the rest of the project, you'll have all your imports already in place about and then
about page.
Of course, the next one is Kaat.
And by the way, I have all uppercase a card and one card page, then I would want to get error.
And not council log, so we're going to go with error, that's going to be the name of my component
and that is coming from the error page.
Then we've got a check out.
And as you can see, I'm just removing that page thing, so check out Page.
And lastly, we have a private route which we're going to do all the way at the end.
And this is just going to prevent nonusers going to the checkout page.
So we're going to go here with a private route.
And of course, I just need to export them.
So I'm going with products.
Then I would want to go with a single product than about horse cart error.
And you get to just checkout and finally arrive at route and you're not in this case, I shouldn't name
it exactly the same.
So private private route.
And once we've got this export in place now, of course, we can just navigate to abcess and just grab
all of them.
So let me go here and I'm going to say that I don't want to get home single product, product and all
that so I can go with a single product here and cart.
And and check out also the error.
About about and products and of course, the private around and now it's finally set up our Outer Circle
here, I'm returning it there at the moment, which, of course is something that I'm going to change.
So we're going to go with a router and eventually I'll add all my footers and have bars and sidebars.
But let's just wait a second.
First, let's set up the router where we're going to have a switch and have this type of switch.
So we're going to go with switch component, of course, and learn instead of the switch component out.
And I set up my roots.
I'm going to start with my home one so out.
And then I remember we had the exact problem.
We just made sure that we only navigate here if the path matches.
Exactly.
And of course, now I would want to set up my home road, hopefully remember how we were setting up
of the router since I'm not going to spend too much time on that.
So we have a route.
And now, of course, I would want to set up the rest of my route as well.
Now, the only one that's going to be I don't know, I don't want to say tricky again, since we have
covered that quite a few times.
But remember, a single product will have to use some kind of boram.
But let's just start with the simple setup where I'm going to copy and paste.
And you're not in this project.
I will exact for all the pages.
So not just for the forward slash, meaning the home page.
I'll add that exact for all of them just in case.
And here, of course, we are looking for.
About, about.
And then I would want to copy and paste this one as well, and we're looking for the card, so it's
just this one around card.
And this is going to be a card component because then I would want to copy this sucker as well.
And we're going to have the product set up.
So product.
And this is going to be a product component, so and then we have one for single product, one for checkout
and one for error.
So I'm here right after the product.
I'm going to go with that single product.
And this one is going to be a bit different where we're going to go with Path.
And, you know, OK, I also set up the exact there.
I'm going to say path is equal to and we're looking for product again.
That's my choice.
If you want to just go with forwards and then you can definitely do it.
In my case, I'm going to go with products.
So that's just going to mean that I'm signaling that this is going to be a product and then the real
problem is going to be idee.
And then remember, we need to have eight children prop at least in reactor five and then which component
we would run around, or of course, that is going to be a single product and then we close out the
like.
So then we've got a check out.
In this case, I can just copy and paste right after this one.
And I'm just going to call this check out.
Now, Check is going to be one that is going to be wrapped eventually in a private room, but not for
now.
I don't want to deal with that right now.
So I'll just say path check out.
And of course, I would want to run or check out like so.
So we're going to go with checkout component.
And then lastly, I would also want to have a page.
If the user navigates to the page, that doesn't exist, would you say path online?
Remember, Star Central is just going to match any path and we're going to go with our error component.
Now we're almost almost done.
But then remember that there's going to be some components that are displayed on all the pages.
And in our case, it's going to be three components.
It's going to be no component.
It is going to be a footer.
And Wood will also be the sidebar here.
So sidebar will be only displayed on small screen because we'll just keep the button on a small screen
of here.
But I don't want to render on all the pages.
So this is going to be our sidebar.
That's why in here I have important no sidebar and the in the folder.
So I would want to play the number and the sidebar here on top.
And as far as the sidebar, we're going to use position fixed.
So technically you can place it wherever you would like.
But in my case, I just like to keep the same structure.
So sidebar.
And then below it.
Below the switch.
I'm going to go with my photo here, so save it.
And now it's navigate to the bigger screen.
And let's just start out whether we have everything.
So I have the map, our sidebar homepage and Twitter.
So that looks about right.
And now let's navigate to the page.
And of course, I have the car page.
Now, let's go quickly to sorry localhost and then we're going to try out products, products like so
so now we're in a product page and then I'm going to add one more forward slash and then whatever value
add.
Now, in this case, it already has cached one of the ads that I used, but you can simply use one just
to see whether we're navigating to that single product page.
And there is, of course, now we're here.
Now, if I'm going to go to some kind of page that doesn't exist, for example, if I'm going to go
to hello, because I should see the error page.
So that should be our basic setup as far as the recruiter against something that we have already done
quite a few times.
That's why we kind of moved swiftly.
I guess the most interesting thing in this setup was the fact that we can use the indicators again,
that was something new and hopefully that is clear why it is somewhat nifty to use it.
And of course, we can proceed to our next step.