1
00:00:01,660 --> 00:00:02,990
We're all done with our final widget.

2
00:00:03,070 --> 00:00:06,070
So we're now going to start to work on this header inside the header.

3
00:00:06,100 --> 00:00:07,570
We're gonna have a couple of different links.

4
00:00:07,630 --> 00:00:11,230
And as user clicks on them, we're going to show some different widgets on the screen.

5
00:00:12,070 --> 00:00:15,250
This entire process is referred to as navigation.

6
00:00:15,880 --> 00:00:19,750
So we say that we are going to navigate a user around or implement navigation.

7
00:00:20,080 --> 00:00:24,600
We are saying that we are going to show different components to the user based upon the current your

8
00:00:24,630 --> 00:00:24,810
L.

9
00:00:24,940 --> 00:00:25,750
That they are visiting.

10
00:00:26,510 --> 00:00:30,820
If you look really closely at these mockups, you might notice that I've got some addresses inside of

11
00:00:30,850 --> 00:00:31,330
each of them.

12
00:00:31,900 --> 00:00:37,360
So, for example, whenever a user goes to an address of local host three thousand slash dropdown,

13
00:00:37,670 --> 00:00:42,430
we're going to show the dropdown component on the screen whenever they go to Flash translate.

14
00:00:42,460 --> 00:00:45,130
We'll show the translate component and so on.

15
00:00:46,400 --> 00:00:50,570
Our root roots or the home page, whenever user goes there, we will show the accordion.

16
00:00:52,140 --> 00:00:57,300
Now, to implement navigation instead of react up, we usually make use of a very popular library called

17
00:00:57,360 --> 00:00:58,320
React Router.

18
00:00:58,710 --> 00:01:02,700
This is the absolute standard library for implementing navigation.

19
00:01:03,450 --> 00:01:06,720
However, only tell you a few things about react router.

20
00:01:07,290 --> 00:01:12,000
I've been making use of react water for many, many years now since almost the very first version.

21
00:01:12,480 --> 00:01:18,000
And in that time, on average, just about every year you're going to find there are some breaking changes

22
00:01:18,240 --> 00:01:19,770
coming out inside this library.

23
00:01:20,220 --> 00:01:23,460
So in other words, I personally have not learned to react or one time.

24
00:01:23,520 --> 00:01:27,830
I've learned it many times because it has had many breaking changes.

25
00:01:28,930 --> 00:01:31,900
Now for you, I could show you how to use react router very easily.

26
00:01:32,200 --> 00:01:36,580
But by the time you go and use it on a professional project, there might already be another set of

27
00:01:36,580 --> 00:01:41,920
breaking changes rather than just focusing on how you specifically make use of react router.

28
00:01:42,280 --> 00:01:47,710
In this application, I want you to instead understand some of the ideas and theory of navigation.

29
00:01:48,470 --> 00:01:54,160
We're going to implement some navigation stuff from scratch without using the react router library at

30
00:01:54,160 --> 00:01:54,400
all.

31
00:01:55,120 --> 00:01:58,090
Having said that, understanding reactor water is very important.

32
00:01:58,120 --> 00:02:03,940
So we will make use of react router later on in this course and really understand it 100 percent.

33
00:02:04,420 --> 00:02:06,790
But for right now, we're not going worry about reactor water too much.

34
00:02:07,000 --> 00:02:11,260
We're just going to implement a couple of very small navigation elements on our own.

35
00:02:11,410 --> 00:02:15,820
And it's going to really help us understand what react router is doing when we finally cover it.

36
00:02:17,340 --> 00:02:17,540
OK.

37
00:02:17,620 --> 00:02:22,390
So then mind, let's take a pause right here and start to build out the first step of navigation in

38
00:02:22,390 --> 00:02:23,020
the next video.