Nice, and once we're done discussing the general concept of reactor hour, of course, let's get to
work and set it up in our own application.
And first, of course, we would need to navigate you objets.
Then we're looking for folder number 11, and you can probably already guess that we're going to go
with the set up folder and you would be correct.
So we navigate tutorial and we're looking for folder number 11 and then we're looking for to set up
again.
I have there the index.
So the main entry point.
So we don't need to show specific file.
And then, of course, instead of there's a random text, the reactor one, we're going to go with a
set up component.
Awesome.
Now it's going to display the same text.
So you're not hallucinating.
But now, of course, I would want to navigate there.
And most of the files that you'll find in a setup folder are going to be our pages.
Now, if that is a bit confusing, don't worry.
Once we set up the router, you'll see how it works.
But essentially we have about error.
We have also the home as well, not bother people on person.
So everything apart from index where we're setting up our reactor powder and then in that bar where
we display the links, those are going to be our pages.
OK, hopefully that is clear and that once we have that out of the way now let's navigate to the next
year and notice how I'm importing all the pictures.
So once we set up the router.
Depending on the euro, we'll display that specific component.
For example, there's going to be a home page as well as a single person page now in order to get up
and running with a recruiter will need to import from the package, from the reactor or down the browser
router.
And a common practice is giving it, unless in this case we are giving it an alias overorder and then
around as well as the switch.
So one by one, of course, will cover what each of them does in this case.
Let's start by setting up our return, and this is the part where we would want to wrap all our index
return into the router as a side note.
Normally, when you work with the recruiter, you're up your whole application again.
In this case, since we have a separate folder for each and every example.
That's why we're wrapping the return of Energous.
Just keep in mind, when we will be working on our project will go over how we wrap our whole application.
So essentially, the set up is going to be exactly the same.
But the difference is going to be that we're out there.
We'll wrap our objets already in the intelligence.
Doesn't matter whichever place you pick, as long as it is a root component, because that way, of
course, your whole application can access the reactor and can use it in.
This is only the set up folder.
Of course, the final one where we have the final code can use the reactor Rotterdam.
So with our router in place now, we need to set up the routes.
And essentially it just means that in the euro, when we navigate whether or not it is the home page
about, well, then we display that specific component.
Like I said, these are just components.
But I gave it a comment of pages.
So these are just components that will become our pages and the way we set them up as pages.
We're going to go here with Hérault, then we have a path, Propp, and this is a specific prop, so
make sure you name it exactly the same.
And then this is where we showcase what is going to be our YORO.
And the first one I would want to showcase is the homepage.
Now for the homepage, we just go with four words.
That just means the domain name because of course our domain is localhost three thousand.
But then normally you have CNN dot com or Google dot com or whatever.
Just think of the domain for your application, whatever is going to be.
So that is going to be the homepage.
And then once we have the world component inside that rocket component, this is where we display whichever
component we would want.
So keep in mind, technically, if you want.
You can place whichever component your heart desires, because even though this says that, yeah, it
is going to be a home page, you can easily place here people component as well.
Keep that in mind.
But of course, in my case, since it is a home page, I also have a home page component, meaning the
component by the name of home.
And then of course, I'm displaying it now in order to make it a bit more interesting.
I'm going to copy and paste one too.
And then of course, I'll add about as well as people now 40, about what is going to be my.
Well, if the forward slash is the home page.
Let's say that 40 about page, I'm going to go with four.
But again, you are in charge.
If you want to write about shake and bake, that just means that this is going to be the page where
you navigate.
OK, keep that in mind that you are always in charge of what is going to be your URL nonmarket.
I'm just going to with forward and about.
And of course, in order to showcase my about page, I'm going to say that once we navigate there,
I'm going to display the about component.
And finally, I'm going to go also with a people and you can probably already guess.
That we're going to be going to a people page now, the moment we refresh Norrish, now I have the homepage
now, why do I have it?
Well, check it out.
If we now get you a home address, our home component.
This is what we have.
So if I'll go here and say shake and bake, you can probably already guess that we'll just play the
paragraph with that specific text.
So hopefully that is clear.
We have our home page and of course, in the euro bar, since we haven't set up the nav bar yet, if
we go forward slash and then about, we should and let me emphasize something, because there's one
Gotcher we should see the about page.
And once I press yeah, I can see the about page, but there's a tiny issue where I can also see the
homepage.
Now let's try it out with people.
So in the URL bar go here and so slash and line people and let's see what we're going to get.
And again, same thing.
I can see that I have the content from the people page, and if you want to check it out, here it is
essentially I have my data here.
I set up the state variable and I'm just iterating over.
And don't worry, it's going to make sense once we get to you are all parameters why we have this specific
set up.
Most importantly, what is happening here?
Why we have homepage with Shake and Bake and on the people page, even though technically we are in
the people page when you see what's happening by default, when it comes to react rather.
If the path matches, it's going to display both components and as you can see by the URL, well, for
the home page, it also matches the about correct and that it also matches the people.
That's why when we now get people to about or whatever page we will set up, it will also display the
homepage because technically the path matches.
Now, in order to fix that, we would need to add another prop where we say exact.
So once we say you'll notice that now only the exact path matches, whether that is people or whether
that is about or whatever you Aurélio set up.
And only once I go back to my domain, then of course I can see the homepage.
Now, if you want, you can have this exact path to every route.
That is totally up to you, but in this case, since I don't have any nested pages, so there's not
going to be about four slash and something else, I'm just going to avoid that.
Just keep in mind, you're not limited to adding this exact to only the homepage.
You can add it to every route, and that way only the exact match will be displayed.
So that would be a basic setup for a recruiter where we have a ruler, we wrap our whole up being in
this case, of course, it is just the index in the setup.
But normally you would wrap the component and then you have routes online for each and every route that
you have.
You just set up a component.
Whatever you will place in that component in return is going to be displayed.
And that we need to remember about the path problem where essentially we say, well, what is going
to be the URL as far as the home page is just going to be a portal slash and then you can come up with
your own components, of course.
And once the old display as well as the you are, I'll just go with Slash and then whatever the name
you choose.
And then in order to set up an exact match, you just need to have this exact prop.