1

00:00:01,100  -->  00:00:06,200
In the last section we discussed the API that we'll be using for our application.

2

00:00:06,210  -->  00:00:08,420
Again we're not going to make use of it right away.

3

00:00:08,430  -->  00:00:10,940
So just hold that knowledge in your head for a little bit.

4

00:00:10,950  -->  00:00:16,500
It's really a lot easier to cover now rather than to break our concentration later on.

5

00:00:16,500  -->  00:00:18,280
So back to the task at hand.

6

00:00:18,620  -->  00:00:25,470
I'm going to pull our blog post mock up open again one of the topics that we discussed about this application

7

00:00:25,740  -->  00:00:31,350
is how we need to give the user the ability to navigate to different pages within our application in

8

00:00:31,380  -->  00:00:37,560
particular when we navigate around the URL at the top of the page you know in the address bar needs

9

00:00:37,560  -->  00:00:41,550
to be updated to reflect our current location within the app.

10

00:00:41,550  -->  00:00:49,170
What's more is that when a user navigates to a particular you are l like say post slash 5 as we see

11

00:00:49,170  -->  00:00:50,220
right here.

12

00:00:50,220  -->  00:00:56,340
We need not only make sure that we show the correct components to the user on the screen but we need

13

00:00:56,340  -->  00:00:59,400
to show them the correct content as well.

14

00:00:59,400  -->  00:01:05,580
So in this case I'm expected to load the blog post with ID 5 and show it to the user.

15

00:01:05,740  -->  00:01:12,100
And when the user say bookmarks that you are l and two weeks later navigates back to this page they're

16

00:01:12,120  -->  00:01:16,670
going to expect to see the exact same blog post pop up on the screen.

17

00:01:16,710  -->  00:01:23,130
So we need to make sure that our URLs are consistent in not only showing the same components on the

18

00:01:23,130  -->  00:01:25,860
screen but also the same data.

19

00:01:26,700  -->  00:01:32,400
So to help us build our app in this manner we're going to make use of a library called re-act router

20

00:01:32,410  -->  00:01:32,850
.

21

00:01:33,390  -->  00:01:38,590
So we're going to start off this application by just immediately start installing the library.

22

00:01:38,670  -->  00:01:44,580
So I'm at the command line inside of our project directory and I'm going to install this package by

23

00:01:44,580  -->  00:01:52,110
running NPM install dash dash save re-act router and then we're going to install a very particular version

24

00:01:52,110  -->  00:01:55,140
of it so don't hit enter just yet.

25

00:01:55,140  -->  00:02:05,280
So we're going to do an at sign and then two point zero point zero dash RC 5 OK.

26

00:02:05,610  -->  00:02:11,850
So it's you know unfortunately we have to install a very particular version of re-act router.

27

00:02:11,940  -->  00:02:18,300
But the unfortunate truth is that we are forever in the past has had a pretty bumpy API where their

28

00:02:18,350  -->  00:02:21,470
API kind of changes from version of version a lot.

29

00:02:21,960  -->  00:02:24,950
And you know it kind of breaks between different versions.

30

00:02:24,990  -->  00:02:30,150
So just to make sure that we're on the same version we're going to get the you know install a very specific

31

00:02:30,150  -->  00:02:31,370
version right here.

32

00:02:31,740  -->  00:02:32,250
OK.

33

00:02:32,250  -->  00:02:35,740
Now that we've got this installed Let's go ahead and continue in the next section.