1
00:00:01,800 --> 00:00:03,690
Let's now put this header together.

2
00:00:03,780 --> 00:00:05,100
The headers can be very basic.

3
00:00:05,250 --> 00:00:11,220
We'll show anchor elements to direct the user to the appropriate URLs to show all of our different components.

4
00:00:12,030 --> 00:00:16,530
So back inside of my editor, I'll find the components directory and I'll make a new file inside.

5
00:00:16,530 --> 00:00:18,330
They're called Header Dot J.S..

6
00:00:19,660 --> 00:00:21,280
At the very top, we'll import react.

7
00:00:23,000 --> 00:00:24,710
Well, then make a hetero component.

8
00:00:26,360 --> 00:00:28,460
And export it at the bottom.

9
00:00:30,800 --> 00:00:37,110
Going to return a multi-line jay, a sex expression, and then inside of your place, a div with a class

10
00:00:37,110 --> 00:00:41,160
name of UI secondary pointing menu.

11
00:00:43,010 --> 00:00:48,130
And then inside that, I will show four separate anchor elements, one for each of the different pages

12
00:00:48,130 --> 00:00:49,690
that we want our user to navigate to.

13
00:00:50,410 --> 00:00:56,080
So we'll put in an anchor element within a trap of forward slash and a class name of item.

14
00:00:57,970 --> 00:01:00,410
And I'll give that one the text accordion.

15
00:01:01,670 --> 00:01:04,300
So we're going to essentially do the same thing for different times.

16
00:01:04,330 --> 00:01:08,110
But each of them is going to have a different atrip and some different text inside.

17
00:01:09,010 --> 00:01:09,220
All right.

18
00:01:09,280 --> 00:01:10,480
I'm going to copy that.

19
00:01:10,690 --> 00:01:13,870
And then one, two, three, four copies.

20
00:01:15,920 --> 00:01:22,940
On the second anchor element, I will change the draft to slash list and the text to search.

21
00:01:25,070 --> 00:01:28,850
On the third one, I'll change it to slash dropdown and the text to dropdown.

22
00:01:29,990 --> 00:01:33,650
And then finally flash translate and translate.

23
00:01:37,600 --> 00:01:41,500
Let's save our header component now and then show it inside of our app component.

24
00:01:42,160 --> 00:01:44,080
So I'll go back to my app Dodgiest File.

25
00:01:45,360 --> 00:01:46,500
I'm going to import.

26
00:01:49,020 --> 00:01:50,340
The header at the very top.

27
00:01:54,820 --> 00:01:56,860
And then I will show it inside the app component's.

28
00:01:58,910 --> 00:02:00,290
So right inside that did right there.

29
00:02:00,350 --> 00:02:05,030
I'll put in the header, by the way, while we're inside of this app Dodgiest file, we could probably

30
00:02:05,030 --> 00:02:08,730
clean up all these different show component functions we put together a moment ago.

31
00:02:09,310 --> 00:02:11,690
So I'm going to highlight all for those and delete them.

32
00:02:14,320 --> 00:02:14,440
OK.

33
00:02:14,700 --> 00:02:16,300
Let's now save this with the header component.

34
00:02:17,230 --> 00:02:21,700
Look back over to our application and now we've got the nice header up here so I can click on some of

35
00:02:21,700 --> 00:02:24,670
these different links and navigate around my application.

36
00:02:25,730 --> 00:02:29,460
Well, looks like this definitely works, even though it looks like it works.

37
00:02:29,480 --> 00:02:32,450
However, there is a really big downside to this approach.

38
00:02:32,930 --> 00:02:37,010
Let's take a pause right here and I'll show you a couple of diagrams in the next video to help you understand

39
00:02:37,010 --> 00:02:40,700
why this current implementation is not quite as good as it could be.