Now that we've got a better idea of how re-act router works let's start picking up the pace and putting 2
our act together in this section we're going to start scaffolding out the main index view that will 3
show a list of blog posts. 4
Looking back at the mockup here the index view is pretty darn straightforward. 5
It just needs to show a list of posts to the user whenever they're looking out the forward slash route 6
. 7
So just the route route for our application. 8
Back in the code editor I'm going to find my component's directory and create a new file and they're 9
called posts underscore index dot JS. 10
And this is going to serve as the center of our index route for showing blog posts to the user. 11
Inside this file We're going to go ahead right now and throw in some of our user usual boilerplate. 12
So we'll say import re-act from reacts and we'll define a functional component right here just have 13
something to show up on the screen so we'll say export default 14
and we will return DIVX 15
and it will just say list of blog posts. 16
Right now we'll just pretend. 17
OK let's go back over to routes and think about you know when do we want those components. 18
Well looking back at our route here are our Mock's excuse me. 19
We want to show the index route whenever the user is looking at the route route for applications. 20
So this is basically if they want to say a blog post dot com forward slash you know they just typed 21
in Blog Post dot com and they navigated here. 22
That's what we want to show this index component right. 23
Makes sense. 24
Here's the thing right now app is shown whenever the user is looking at forward slash. 25
And we really don't want to change this. 26
We want to keep app around as like the root container of our application by having a single component 27
always be the root of our application here. 28
It allows us to do really easy things in the future like say Adshead or component or add a foot or component 29
. 30
The app can always show a header and can always show a footer and we don't really want to change that 31
out. 32
So rather than changing our route component right here we'll make use of another feature of re-act router 33
the index route the index route is a helper that behaves like a route but it will be shown whenever 34
the Eurail matches up with a path defined by the parent but not one of the children. 35
So that's kind of confusing in words. 36
Let's go ahead and try it out and see what happens. 37
I'm going to go ahead and import our posts index in here. 38
So imported from component's slash post index and then we'll define our index route. 39
So as a child this route will say Index routes components post index and it doesn't need a path. 40
So now what we're saying is if the route is forward slash show app and show posts index if it's slash 41
greets or greet two or three show app and greeting that's the difference between a route and an index 42
route. 43
If the route only matches the parent then hey go ahead and show this index or this kind of default route 44
for us. 45
One thing that I want to mention is that the terminology here of index route in our component name posts 46
index are not related. 47
It just so happens that our post index component right here happens to be named post index. 48
That's all. 49
OK so I'm going to say this and let's give it a shot in the browser. 50
So now you'll see I've got a list of blog posts. 51
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
there. 53
That's because we successfully matched against the greeting component. 54
So we're showing greeting instead of the index route. 55
OK. 56
So this is a good start for our application. 57
This is exactly the behavior we want when the user comes to just forward slash we want to show them 58
a list of our posts not say you know a greeting company phone or what have you. 59
So let's go ahead and do some code cleanup now and remove this testing grading components. 60
I'm going to delete the greeting component and then we'll delete the route's behind it as well. 61
So now we've just got our route route with its index route to show Post index. 62
I'm going to do a quick refresh to make sure everything still works. 63
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
. 65
Cool. 66
Let's go ahead and move onto the next section