1

00:00:01,380  -->  00:00:05,580
Now that we've got a better idea of how re-act router works let's start picking up the pace and putting

2

00:00:05,580  -->  00:00:10,710
our act together in this section we're going to start scaffolding out the main index view that will

3

00:00:10,710  -->  00:00:14,040
show a list of blog posts.

4

00:00:14,040  -->  00:00:17,820
Looking back at the mockup here the index view is pretty darn straightforward.

5

00:00:17,820  -->  00:00:24,540
It just needs to show a list of posts to the user whenever they're looking out the forward slash route

6

00:00:24,560  -->  00:00:24,600
.

7

00:00:24,630  -->  00:00:28,930
So just the route route for our application.

8

00:00:28,970  -->  00:00:34,890
Back in the code editor I'm going to find my component's directory and create a new file and they're

9

00:00:35,580  -->  00:00:39,300
called posts underscore index dot JS.

10

00:00:39,330  -->  00:00:46,400
And this is going to serve as the center of our index route for showing blog posts to the user.

11

00:00:46,710  -->  00:00:51,730
Inside this file We're going to go ahead right now and throw in some of our user usual boilerplate.

12

00:00:52,070  -->  00:00:59,870
So we'll say import re-act from reacts and we'll define a functional component right here just have

13

00:00:59,880  -->  00:01:03,030
something to show up on the screen so we'll say export default

14

00:01:06,690  -->  00:01:10,120
and we will return DIVX

15

00:01:13,590  -->  00:01:16,180
and it will just say list of blog posts.

16

00:01:16,320  -->  00:01:19,700
Right now we'll just pretend.

17

00:01:20,830  -->  00:01:26,720
OK let's go back over to routes and think about you know when do we want those components.

18

00:01:27,150  -->  00:01:30,420
Well looking back at our route here are our Mock's excuse me.

19

00:01:30,690  -->  00:01:35,520
We want to show the index route whenever the user is looking at the route route for applications.

20

00:01:35,520  -->  00:01:41,190
So this is basically if they want to say a blog post dot com forward slash you know they just typed

21

00:01:41,190  -->  00:01:43,880
in Blog Post dot com and they navigated here.

22

00:01:44,190  -->  00:01:47,100
That's what we want to show this index component right.

23

00:01:47,250  -->  00:01:48,260
Makes sense.

24

00:01:48,570  -->  00:01:53,890
Here's the thing right now app is shown whenever the user is looking at forward slash.

25

00:01:54,000  -->  00:01:55,990
And we really don't want to change this.

26

00:01:56,010  -->  00:02:03,420
We want to keep app around as like the root container of our application by having a single component

27

00:02:03,510  -->  00:02:06,240
always be the root of our application here.

28

00:02:06,270  -->  00:02:11,820
It allows us to do really easy things in the future like say Adshead or component or add a foot or component

29

00:02:11,830  -->  00:02:12,110
.

30

00:02:12,360  -->  00:02:17,250
The app can always show a header and can always show a footer and we don't really want to change that

31

00:02:17,250  -->  00:02:18,580
out.

32

00:02:18,630  -->  00:02:25,560
So rather than changing our route component right here we'll make use of another feature of re-act router

33

00:02:26,040  -->  00:02:32,940
the index route the index route is a helper that behaves like a route but it will be shown whenever

34

00:02:32,940  -->  00:02:39,990
the Eurail matches up with a path defined by the parent but not one of the children.

35

00:02:40,020  -->  00:02:42,190
So that's kind of confusing in words.

36

00:02:42,390  -->  00:02:46,340
Let's go ahead and try it out and see what happens.

37

00:02:46,350  -->  00:02:50,720
I'm going to go ahead and import our posts index in here.

38

00:02:52,230  -->  00:03:00,350
So imported from component's slash post index and then we'll define our index route.

39

00:03:00,600  -->  00:03:11,810
So as a child this route will say Index routes components post index and it doesn't need a path.

40

00:03:11,820  -->  00:03:22,830
So now what we're saying is if the route is forward slash show app and show posts index if it's slash

41

00:03:22,920  -->  00:03:30,270
greets or greet two or three show app and greeting that's the difference between a route and an index

42

00:03:30,270  -->  00:03:30,890
route.

43

00:03:31,110  -->  00:03:36,960
If the route only matches the parent then hey go ahead and show this index or this kind of default route

44

00:03:36,960  -->  00:03:38,340
for us.

45

00:03:38,340  -->  00:03:45,150
One thing that I want to mention is that the terminology here of index route in our component name posts

46

00:03:45,210  -->  00:03:47,170
index are not related.

47

00:03:47,220  -->  00:03:52,790
It just so happens that our post index component right here happens to be named post index.

48

00:03:52,830  -->  00:03:53,940
That's all.

49

00:03:54,600  -->  00:03:59,080
OK so I'm going to say this and let's give it a shot in the browser.

50

00:03:59,910  -->  00:04:02,440
So now you'll see I've got a list of blog posts.

51

00:04:02,460  -->  00:04:10,980
Even though I'm at my root directory right here if I go to say greeds you'll see that now it says hey

52

00:04:10,980  -->  00:04:11,590
there.

53

00:04:11,940  -->  00:04:15,770
That's because we successfully matched against the greeting component.

54

00:04:15,810  -->  00:04:20,500
So we're showing greeting instead of the index route.

55

00:04:21,840  -->  00:04:22,250
OK.

56

00:04:22,290  -->  00:04:24,420
So this is a good start for our application.

57

00:04:24,420  -->  00:04:29,400
This is exactly the behavior we want when the user comes to just forward slash we want to show them

58

00:04:29,400  -->  00:04:33,560
a list of our posts not say you know a greeting company phone or what have you.

59

00:04:33,570  -->  00:04:39,180
So let's go ahead and do some code cleanup now and remove this testing grading components.

60

00:04:39,180  -->  00:04:45,180
I'm going to delete the greeting component and then we'll delete the route's behind it as well.

61

00:04:45,180  -->  00:04:51,960
So now we've just got our route route with its index route to show Post index.

62

00:04:52,160  -->  00:04:55,830
I'm going to do a quick refresh to make sure everything still works.

63

00:04:55,850  -->  00:05:00,510
Looks like I'm still on great let's go back to the redirector see and I've got my list of blog posts

64

00:05:00,510  -->  00:05:00,870
.

65

00:05:00,900  -->  00:05:01,540
Cool.

66

00:05:01,800  -->  00:05:04,030
Let's go ahead and move onto the next section