In the last section we spoke a little bit about the different route configuration that we'll have for
each of our different screens and our application.
I want to take this time now to start working on our first screen.
So we're going to create a post index component and associated with the route of our application for
it.
Now the Post's index component that we're going to make is just going to contain a little bit of boilerplate.
So we're not going to put any special configuration or GSX inside of there just yet.
We're going to take care of the routing first and then come back to that side of things.
So let's get to it inside of my code editor.
I'm going to find my component's directory and I'm going to make a new file in there to house my posts
index component.
So I'll say PPOs index Dot.
Yes.
As a new file and then inside of your will import react in the Component class.
Create our component and then export it.
So import reacts and components from react within create our POWs index components.
Which is going to extend the component class and then again for right now we don't really need any specially
special implementation.
I just want to return something that lets me know that this component showing up on the screen.
So how about a div that says Post index like so that I'm at the bottom the file we can export default
posts index.
OK so that looks like something that we can at least get started with for now I'm going to close this
file out now and we're going to go back to the index dot G-S file.
Now before we actually import that post index component I want to do a little bit of cleanup inside
of this file.
So I want to clean up some of the test code that we added in in the previous section.
I'm going to start by cleaning up the two test components that we create inside of here which is the
hello and goodbye components.
So let's take care of both of those.
Then inside of the browser router tag you can find that div.
Here it is right here.
And I'm going to delete the hard coded header text and the two existing routes that we have.
So let's take those out like so.
Now one last piece of wrap up or clean up I should say that I want to do inside of here.
You'll notice that we're still importing this app component.
So in the past we used the app component as a sort of wrapper or main location of bootstrapping or starting
up our application.
Now that we have re-act router we don't really have any central single component going on.
So I don't really need this app component anymore so I'm going to do a little bit of cleanup by removing
the import statement for it and then I'm also going to delete the output of J.S. file and delete that
as well.
OK.
So it looks good.
So now we can start by importing the Post's index component and all place that import statement right
underneath the import statement of our reducers still say import posts index from component's slash
PPOs index OK.
So now here comes the hard part at least as far as re-act writer is concerned.
We want to associate the post index component with the slash path in our application so to do so we're
going to start off by defining a route.
I'll say when every user goes to the path of just slash by itself just slash.
I want to show the component component posts index and I'll close the tag off at the end as well.
OK so this looks like a good start.
At least something we can test out inside the browser and make sure that we are able to navigate to
the root root of our application and see this component appear on the screen.
Now before we go any further before we do anything else I want to tell you that the way that we're putting
together our routing right now is going to introduce a very subtle very small little bug guy so I know
it's really frustrating when I show you something that's like not the way to do it right.
Because when you're sitting there like well what's the right way what's the wrong way.
The reason that I'm going to let this bug kind of display itself or appear in a later section is that
this is something that I guarantee you you're going to run into yourself the first time you use re-act
router.
And so I want to walk through this very common mistake that everyone runs into when they first use re-act
router.
So again I tell you something that we're doing here is just slightly just very very slightly off but
we're going to fix it in a later section once it becomes apparent what that problem is.
And just to kind of cut to the chase here it's really just one additional word that we're going to provide
as a prompt to this route component right here.
So it's going to be a very small change.
But again I really want to just very naturally run into this problem so that you know what to do when
you see it on your own application.
OK.
So with that little caveat or disclaimer out of the way let's flip back to the browser and test the
thing out.
So let's go back to browser.
I'm going to refresh the page.
You'll notice that I'm on localhost 80 80 right now.
And so if we're just ADHD by itself re-act Roger interprets this as being really localhost ADHD slash
and so the only route character that's in there is slash right now.
And so that matches up correctly against the post index component.
Okay.
So it looks like we're at least off to a good start for putting together our first route inside of our
application.
We're going to kind of pause on re-act router for now and we're going to work on the post index page
and make sure that we wire up the redux side of things correctly from here on out.
So we're going to take a little bit of break on the reactor router side.
We're going to take care of some of the data fetching stuff and then we're going to come back and finish
up some of the other route definitions inside of this file right here.
So I'll see in the next section where we're going to start doing a little bit more work on the post
inducts component.