In the last section we focused our post index component and implemented the fetch posts action creator 2
. 3
We verified that we were getting data back but we really don't have a lot of data to show just yet because 4
we haven't created any blog posts. 5
So we're going to pause our work on the Post's index component and instead we're going to work on giving 6
our users the ability to create new posts. 7
So let's review our mockup just real quick here. 8
So we're going to tackle the ability to create new posts in a couple of different steps. 9
Remember users should be able to create a title categories and contents. 10
There's several steps to putting this form together but you're going see that it's going to be a pretty 11
darn reproducible process. 12
Whenever we create a new feature with re-act router. 13
So first we're going to scaffold out the component that will be used to show the form. 14
So essentially our kind of our POWs new or post create component we're going to scaffold that out. 15
Second we're going to add our component to the routes file as a new URL that the user can navigate to 16
. 17
So there's going to be you know the expectation that a user can navigate to post slash new third. 18
We need to implement a button in the post index component that allows a user to navigate to that create 19
form and we want them to be able to actually have an easy way to navigate over their Forth wherein add 20
the actual form to the post-New component. 21
So we're going to come back in a component and we're going to put the form together whenever the user 22
submits the form it should call an action creator. 23
That makes a request to actually save the blog post. 24
Fifth and finally we will go ahead and create the action creer and update or reduce error. 25
So five step process in putting this feature together. 26
So let's go ahead and get started on that process. 27
Let's start by scaffolding out. 28
Our posts create or post new component 29
in the components directory. 30
We'll go ahead and make a new file. 31
And let's go ahead and call it pose new dot J us and inside of here we'll go ahead and do the usual 32
boilerplate that we just went through. 33
So we'll import reacts and components from react and then we'll declare our class. 34
Whoops. 35
Post-New extends component. 36
Do make sure you take careful note. 37
We've got posts new you know don't drop off the s there. 38
Or if you decide that you don't want to have to ask. 39
You don't have your post to me when I have just post-New. 40
Let's just be consistent. 41
Otherwise you're going to obviously run into some errors. 42
So we'll do our render method inside of here. 43
What would turn a div that just shows create form. 44
Right now. 45
Nice and simple. 46
And at the bottom we will exports default posts new. 47
Now we want users to be able to see this component whenever they navigate to the you or I'll post slash 48
new just like this right here post slash new. 49
So that means that we need to define a new route mapping on our router 50
inside of our route start just file will open it up and then we will import the component that we just 51
created. 52
So import pose new from components pose new like so. 53
And then we'll create a new route mapping for it. 54
So remember our route mapping is saying hey when a user visits this route please show this component 55
so we'll say route and the path is going to be posts new component is going to be posts now. 56
OK let's go ahead and test this out in the browser now so I can make sure that all my files are saved 57
. 58
They are great. 59
I mean to refresh and we don't yet have a link that we can click to go there. 60
But we can always type in the URL manually. 61
So we'll just type and pose new and we get our create forms showing up right here. 62
Perfect just so we need our new route is definitely working here so we can now visit either post-New 63
or just forward slash which takes us back to our list of blog posts. 64
OK. 65
So that's steps 1 and 2. 66
We did our scaffolding and we added our component as a separate route. 67
Let's go ahead and tackle step number three in which will implement a button on our list view that the 68
user can click to go over to the new post component. 69
I'll catch you over there.