So now that we picked up those
important React basics, it's time to dig a bit deeper
to dive into some advanced concepts like routing
sending HTTP requests and application wide state management
and what all these things are.
We're going to explore that.
And for this, we're going to leave this basic project
this basic demo we worked on.
Instead, we're going to build this
meet up demo application
I showed you earlier already.
And for that, I cleaned up my project.
I removed basically all the imports and all the content
from this app file here and index css has some new content.
You'll find my updated project attached.
So there you all to find the updated index css file.
And I deleted all the components.
Now, as I just said
you'll find this updated starting state attached
and you can therefore then start with that same project.
In the end here,
once you downloaded it, you need to run NPM install again.
Then one step done.
You can NPM start this project again to bring
up that development server again.
And that will give you a blank page.
Because now we're going to build this project
from the ground up.
And this project will now involve more components
than the previous one.
And it will involve the important concept of routing.
Now, what does routing mean, considered is Netflix example
from before again.
There I went to the
my list page to view the items I added to my list.
Now it looks like I visited a totally different page
but if you watch this refresh icon in the top left corner
you see that it never changes.
It never goes into that loading mode
because actually we never fetched a new HTML page.
The page loaded by the browser never changed.
We always stay on that single page.
And that's the case for Netflix
because they also have such a single page application.
It should also be the case for our project now.
I wanna give the user the illusion
of having different pages to which we can navigate
whilst actually staying on one
and the same page and leaving it up to react, to change
what's visible on the page.
The advantage of this approach is
that we never have to wait for a new page to be loaded.
Instead, we can always stay fast, stay reactive
because everything is handled by client side Java script
which is faster than sending a new request to a server.
And that can really enhance the user experience.
Now, therefore we wanna add something which is
called routing to our project.
We wanna add a router, a special tool
which actually watches changes
in the URL and then changes what's visible
on the screen based on the URL.
So, which basically gives us a way
of giving our users this illusion of routing.
And for this
I'll actually quit this development server again
and install a new dependency,
a new third party package into this project.
We do this with NPM install with the NPM install command
but now not just executed like this
but instead we now add a package name thereafter.
The name of the package, which should be installed
so download it into this project here.
And that's the react dash router dash dom package.
That's a package which as the name kind of implies
allows us to add routing functionality to react.
So it allows us to handle URLs and change.
What's visible on the screen
without fetching new HTML pages.
Simply hit Enter and this package will be installed.
And in package dot json
you'll see that a new entry was added.
So that file was automatically updated
which means that if you now share this project again
without a node modules folder
and someone then runs just NPM install again
that newly added package will also be picked
up and installed because it is part of this package.
json file.
Now we don't need to do this here
because we just did install it.
So we can run NPM start again to bring up
that development server again.
And now we can add routing, but what does this mean?
What does add routing mean?
In the end it means that we need
to add this routing tool to our code
so that we have this thing watching for URL changes.
And we need to let this thing
this tool know which component should be loaded
as a page for which route, for which URL.
And for this all start by adding a new folder next
to the components folder inside the src folder
and that's the pages folder.
You don't have to add to this folder
and you don't have to name it pages, but in the end here
this is a good way of differentiating
and of separating our components that are embedded
in other components, which will be stored
in the components folder,
from the components that will be loaded as pages.
Technically we'll build components in the same way
no matter how we use them,
but for as a developer, to have an easier time to
quickly find the right components we wanna work on,
I'll separate them into these two folders.
And in the pages folder, we're now going to add a couple
of react components, which again
will be built just like all the other components
but which will be loaded by this router,
we just installed when certain URLs are visited.
And here for this application for this project
we're building here, I'll add all meet-ups js file.
So a component that will be responsible
for loading and displaying all the meetups we have.
I'll add a new meetup js file and I'll add a favorites
js file.
New meetup will allow us to add a new meetup later
and favorites js will allow us to view our favorite meetups
because we'll add a functionality that allows us to
bookmark, to favorite a meet-up as a user.
But step-by-step for the moment, I'll just set up
some dummy components in these three files.
And I'll start with all meet-ups and I'll name
this component function, all meetups page.
You can name it however you want.
I'll just choose this name to make it clear
that this component will be used as a page
that's loaded by this router.
Now, just as all the other components we built
before this component has to be exported
and it needs to returns some JSX code.
And for the moment, I'll just return a div where
I say all meetups page, that's of course not
the final content, but some starting content for now.
Then we can copy this and add it into favorites file here.
So this is the favorites page
and we wanna export the favorites page.
And here I'll then say favorites page, and then save this
and copy this into new meetup and named his new meetup page
and also use that name for exporting.
And here we say, new meetup page.
Now we've got these free page components.
Now we need to use that router package to
define when which page should be loaded.
And for this be first of all, need to go to index js
and to wrap our app component, which you render here
with another component.
For this, we need to import something
from react dash router dash dom and that
something which we import is the browser router, like this.
Now it turns out
that browser router is in the end a component itself
and therefore we can use it as a HTML element, opening
and closing tags, and wrap those tags
around the app component.
Now that is something we haven't seen
up to this point that a non-standard component.
So a non HTML component would be wrapped around something
but it is something we can do.
And it is something we are doing here.
We're going to learn how we make our own components
wrappable a little bit later in this course.
So now we initialize this router package.
We make it aware of this app
and we ensure that it watches our URL so to say.
Now, as a next step
we need to define the URLs we wanna support
and which pages should be loaded for the different URLs.
And we do this in the app component now.
So in this wrapped component.
In there we return a div and we can leave it like this.
But now in this div
I wanna return or use other components
which are also imported from react router dom.
So we also import react router dom here and here
we import the route component.
So just like browser router route is a component
and we use it like a component, but the job
of the route component is to define different paths
in the URL we wanna listen to
and which component should be loaded
for these different paths.
And therefore I will also already import
my three page components here
that all meetups page from dot slash pages, all meetups.
And then the new meetup page from dot pages, new meetup.
And of course also the favorites page component
from dot slash pages, favorites.
And now in this div here, we can use the route component
which I'm importing from react router dom
and give it a path prop, a path attribute.
Now path takes a string
and that will be the path in the URL after your domain.
So in our case
our domain is for example, local hosts:3000.
That's our domain, of course
on a real server after deployment.
That would be something like my page.com.
And now the part
after the domain is the path that can be just a slash
so no path at all in the end
or it can be something like slash favorites
or slash products or anything like that.
So the part after the domain is the path and here we define
for which path, which component should be loaded.
And here we can start
with slash nothing to handle the default path
that we just visited our domain slash nothing.
And then between these route tags,
we actually do now add the component that should be loaded,
like the all meetups page like this,
because that should be the starting page actually.
We can add another route here for, let's say
slash new dash meetup and the path it's up to you.
If we now visit my domain.com/new-meetup
then the component which we render
between these route tags will be loaded.
And that could be the new meetups page.
And last but not least
we can also define a route for the path slash favorites
and then render the favorites page like this.
Now we're defining three routes
and instead of this content here
the actual page component will be rendered
if that route determines
that the current URL matches this path.
So if we are on my domain.com/new-meetup
this new meetup page component would be rendered
and not the favorites page, for example.
So if we save this and we go back and reload
localhost:3000, we should see the all meetups page here.
But if we go to favorites, for example
we see favorites page as well, but wait a second,
is this the desired result that we see it as well?
Well, it depends in some applications, depending
on what you build, you might want such a nested page
so that the page for just slash slash nothing is rendered
but also this specific page for slash favorites.
We see this output because by default
react router matches all your paths and it simply checks
if the current path includes these paths here
and slash favorites includes both slash favorites, as well
as just slash, which is why both components are rendered.
Again, that could be what you want, but often it's not.
That's why there is another component provided
by react router dom, which helps us.
And that's the switch component.
We can use the switch component to wrap all our
route components like this.
And with that, we tell a react router
that only one of these routes should be active.
So at most one of these pages should be rendered.
If we do that and save this,
we don't see two components being rendered
but we don't see the correct component
being rendered either.
Instead for a slash favorites,
we now see all meetups.
And the reason for this is now how your routes
are matched.
React router by default checks if the path
of the current URL starts with the path to find here
and because of switch
it will then stop looking at the other routes as soon
as it has a hit, as soon as it finds a match.
Now, of course, slash favorites starts with just slash
and then because of switch, it doesn't look any further,
and therefore all meetups is rendered.
That's not what we want.
And we can prevent this by adding the exact prop here
on route and setting this to true.
Though you can also shorten this
and if you have a prop
which you just want to set to a true the value
you can just add the prop name like this.
So we add the exact prop
and set it to true to this first route.
And the exact prop tells react, router that for this route
it should not check if the path begins with this path
but if the full path matches this path and that's now
of course not the case for slash favorites.
So this will not create a match and it will continue looking
and it will ultimately find this route four slash favorites.
So now we see the favorites page or a new dash meetup,
we see the new meetup page and for just local hosts:3000
we see the all meetups page
and that's how we can add routing.
But of course at the moment
we're just navigating around by entering URLs manually.
And that's not very realistic.
In reality, we would probably want some, some header,
some navigation bar at the top
which provides different links
and therefore that is what we're going to add next.