[Maximilian Schwarzmuller] Now let's take care
about adding such a navigation bar to our application.
And for this I'll go to the components folder
and add a new folder in there.
And I'll name it layout, because it will hold
some general layout components.
So a sub-folder inside of components,
and in there I'll add the main navigation.js file,
which is the file that should hold
this main navigation component.
Now I added it here in the components folder
and not in the pages folder
because this component will not be loaded
as a page with help of the router,
but instead we will embed it
in the content of our other code just as we did before.
Totally unrelated to the router.
Now in this main navigation component file,
we can again define our component function,
MainNavigation, and export it as we're used to.
And then of course return some JSX content here.
And here I wanna return a header,
a header component which in the end will then wrap
all the items that should go into this header.
And here I actually wanna have a div first with my logo,
which in this case will just be some text.
I'll name it React Meetups.
And then next to this div, inside of the header,
I'll add a nav element, and here I'll then add
an unordered list with a couple of list items
where all those list items will be the different links
which we have here.
Now, when it comes to those links,
we typically render links by using the anchor tag.
That's how we do that in standard HTML.
We could do this here as well but using that link component,
that link element, has one big disadvantage.
If we use a link like this, whenever we click it
a new request will be sent to the server.
The server here is the server hosting
this React application, and indeed that server
would then reply with our application,
and there the router would figure out which page to load.
So a link would work but, we send this request first,
which is redundant.
We already are in our running React application,
and it would be great if we don't leave it
just because we wanna navigate somewhere.
Hence sending that extra request
is not something we necessarily wanna do.
That's why instead of this anchor tag,
we instead use another component provided
by the react-router-dom package.
So we again import from react-router-dom,
and we import the Link component here.
The Link component can be wrapped around our link text
just like the anchor tag, and it will render
a anchor tag in the end but, internally,
react-router-dom attaches a click listener
to the anchor tag, and when you click on it,
it will prevent that browser default of sending a request,
and instead just parse the URL you want to go to,
change it in the browser URL bar,
but then not send the request,
but instead load the appropriate component onto the screen
just with React and JavaScript,
so that we stay on this already loaded page,
and we don't send this extra request.
So that's why we add links like this.
Now, of course, here that should not be some link
but a link to all the meetups let's say.
And to make Link aware of the URL it should navigate to,
we have to set the to prop here.
This is one of the expected props on the link component.
And here we set a path in this case just slash nothing,
because that is the path to the AllMeetupsPage.
Now we can replicate this, and add two more list items,
where the second one leads to /new-meetup
and says new meetup or Add New Meetup,
that's up to you, of course.
And on the last link we go to /favorites
and we say favorites, or My Favorites, something like this.
Now we got those links in place
and we got this main navigation component.
We can now use this in the App.js file,
and there we can now import main navigation
from ./components/layout/MainNavigation
and add this above that Switch statement.
Here we can add MainNavigation as a self-closing tag still,
if we want to.
If we save this, we'll see some navigation here.
And if you click those links, they work.
The styling is missing, but we got working links.
We got a working navigation.
Now I want to add some styling,
and for this, we're going to explore a different way
of styling our components.