Awesome once we recovered the folder structure.
Let's start.
Nice and easy.
By setting up our roads.
So if you're going to check out the finished project you're going to see that we have multiple pages
on each and every time we navigate that page.
We go there without refreshing the page and the package we're gonna use for that is react around or
down so all the pages that we had within the pages folder we're gonna display.
And the moment we navigate there again we're gonna go there without a page refresh.
And if you'd would like to find out more about the package and how to properly install it.
And by the way again it is already installed for you but I just want to show you where you can get more
info than just type within the search of React router and then Dom and the first link that's gonna pop
up it is gonna be their home page where you can again see multiple things you can see how you can install
it as well as how you can use it.
So just in case let's say you are not happy with my explanations.
You can just head over here and just check or double check if you don't completely understand everything.
And then again in order to install the package you would just need to run npm install and react a router
down again in your case since you already have the package.
You don't have to do it but just because I would want to show you that nothing is gonna break or fail
if we run this command I'm going to install this one more time so I'm going to run npm install react
rather numb and then of course now we have installed our package and in this video we're simply going
to get all our pages within our app Jess so we're going to import them there and then we're going to
also do the imports for whatever we're looking for from the reactor.
And the next video we're gonna start setting up our pages.
So let me start up the server.
So PMs start that I'm going to close the terminal and then open up the sidebar.
I don't need a hero at this point and probably I'm gonna make this a bit smaller then let's look for
our app Jess and then I would want to import each and every page that we have within the pages folder
so everything starting with about and all the way to a product and also like I said we're going to do
our imports from react or around or down.
And I guess we can start with react Rotterdam imports.
So right after the react let's add maybe a comment on it.
So I'm going to close the sidebar where I'm gonna say import import and we're gonna look for browser
router browser router and we're right away.
Gonna Rename it when I said that this is just gonna be our order then we're gonna have a switch component
and then we're also gonna have a root component and all that is coming from a react router down.
So those are the things we need from reactor number down.
What we also need to have our pages.
Like I said so we're gonna go with import.
And then one by one we're just gonna import all our pages so we're going to start with about then we're
looking from the pages folder.
So that is sitting right next to us.
So we have the pages folder and then we're looking for the about page.
And now I'm just gonna copy and paste it and of course we're just gonna change these values.
So let me select two cursors and we're just gonna delete it where the name of the page is gonna be card.
And of course since we're importing the Jess files we don't need to have the extensions same deal instead
of about we're gonna import the.
Check out page check out page then we have the error page.
So essentially a page if let's say our user is navigating to a page that doesn't exist.
So we're gonna go with error.
Then we have the home and logged in.
So let's rename this one to home.
And this one too.
And log in.
And then we have products as well as the product details.
So product details is going to be the page that displays each and every product.
And by mistake I saved it.
So now of course I have an issue where the identifier about has been already declared so I still need
to rename the EU.
So let's write this as product.
So we're gonna have a product.
Sorry.
Products.
And then you know what.
This one needs to be deleted.
And here I need a space.
And lastly we would want a product details.
So again let's select two cursors let's write product details like so not the page we're looking for
and you should have one two three four eight pages imported from the pages folder.
Again all the files that we have within the pages should be imported within the app and in here you
know what I'm going to say react or out or down.
That's going to be my comment.
And here we gonna have eight pages because later on we're gonna have some global components.
The headers and all that.
So we're just gonna say Here components components that's going to be our comments.
And once we're done with our imports we can start working on our ReACT router Dom setup.