Let's now put this header together.
The headers can be very basic.
We'll show anchor elements to direct the user to the appropriate URLs to show all of our different components.
So back inside of my editor, I'll find the components directory and I'll make a new file inside.
They're called Header Dot J.S..
At the very top, we'll import react.
Well, then make a hetero component.
And export it at the bottom.
Going to return a multi-line jay, a sex expression, and then inside of your place, a div with a class
name of UI secondary pointing menu.
And then inside that, I will show four separate anchor elements, one for each of the different pages
that we want our user to navigate to.
So we'll put in an anchor element within a trap of forward slash and a class name of item.
And I'll give that one the text accordion.
So we're going to essentially do the same thing for different times.
But each of them is going to have a different atrip and some different text inside.
All right.
I'm going to copy that.
And then one, two, three, four copies.
On the second anchor element, I will change the draft to slash list and the text to search.
On the third one, I'll change it to slash dropdown and the text to dropdown.
And then finally flash translate and translate.
Let's save our header component now and then show it inside of our app component.
So I'll go back to my app Dodgiest File.
I'm going to import.
The header at the very top.
And then I will show it inside the app component's.
So right inside that did right there.
I'll put in the header, by the way, while we're inside of this app Dodgiest file, we could probably
clean up all these different show component functions we put together a moment ago.
So I'm going to highlight all for those and delete them.
OK.
Let's now save this with the header component.
Look back over to our application and now we've got the nice header up here so I can click on some of
these different links and navigate around my application.
Well, looks like this definitely works, even though it looks like it works.
However, there is a really big downside to this approach.
Let's take a pause right here and I'll show you a couple of diagrams in the next video to help you understand
why this current implementation is not quite as good as it could be.