1 00:00:01,070 --> 00:00:07,830 In the last section we focused our post index component and implemented the fetch posts action creator 2 00:00:07,830 --> 00:00:08,430 . 3 00:00:08,430 --> 00:00:13,290 We verified that we were getting data back but we really don't have a lot of data to show just yet because 4 00:00:13,290 --> 00:00:15,090 we haven't created any blog posts. 5 00:00:15,360 --> 00:00:20,880 So we're going to pause our work on the Post's index component and instead we're going to work on giving 6 00:00:20,880 --> 00:00:24,400 our users the ability to create new posts. 7 00:00:24,430 --> 00:00:31,570 So let's review our mockup just real quick here. 8 00:00:32,970 --> 00:00:38,640 So we're going to tackle the ability to create new posts in a couple of different steps. 9 00:00:38,640 --> 00:00:44,720 Remember users should be able to create a title categories and contents. 10 00:00:45,490 --> 00:00:50,250 There's several steps to putting this form together but you're going see that it's going to be a pretty 11 00:00:50,250 --> 00:00:51,950 darn reproducible process. 12 00:00:51,960 --> 00:00:55,340 Whenever we create a new feature with re-act router. 13 00:00:55,830 --> 00:01:00,180 So first we're going to scaffold out the component that will be used to show the form. 14 00:01:00,180 --> 00:01:06,400 So essentially our kind of our POWs new or post create component we're going to scaffold that out. 15 00:01:06,630 --> 00:01:14,100 Second we're going to add our component to the routes file as a new URL that the user can navigate to 16 00:01:14,110 --> 00:01:14,380 . 17 00:01:14,640 --> 00:01:21,820 So there's going to be you know the expectation that a user can navigate to post slash new third. 18 00:01:21,900 --> 00:01:29,040 We need to implement a button in the post index component that allows a user to navigate to that create 19 00:01:29,050 --> 00:01:36,270 form and we want them to be able to actually have an easy way to navigate over their Forth wherein add 20 00:01:36,450 --> 00:01:39,950 the actual form to the post-New component. 21 00:01:40,230 --> 00:01:46,170 So we're going to come back in a component and we're going to put the form together whenever the user 22 00:01:46,170 --> 00:01:49,410 submits the form it should call an action creator. 23 00:01:49,440 --> 00:01:53,130 That makes a request to actually save the blog post. 24 00:01:53,130 --> 00:01:59,280 Fifth and finally we will go ahead and create the action creer and update or reduce error. 25 00:01:59,310 --> 00:02:04,450 So five step process in putting this feature together. 26 00:02:04,650 --> 00:02:09,170 So let's go ahead and get started on that process. 27 00:02:09,180 --> 00:02:10,760 Let's start by scaffolding out. 28 00:02:10,770 --> 00:02:14,190 Our posts create or post new component 29 00:02:17,580 --> 00:02:19,200 in the components directory. 30 00:02:19,350 --> 00:02:21,840 We'll go ahead and make a new file. 31 00:02:22,410 --> 00:02:30,720 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 00:02:30,720 --> 00:02:32,620 boilerplate that we just went through. 33 00:02:32,940 --> 00:02:42,250 So we'll import reacts and components from react and then we'll declare our class. 34 00:02:42,800 --> 00:02:43,990 Whoops. 35 00:02:44,870 --> 00:02:49,530 Post-New extends component. 36 00:02:49,980 --> 00:02:52,560 Do make sure you take careful note. 37 00:02:52,560 --> 00:02:56,290 We've got posts new you know don't drop off the s there. 38 00:02:56,340 --> 00:02:58,410 Or if you decide that you don't want to have to ask. 39 00:02:58,410 --> 00:03:01,480 You don't have your post to me when I have just post-New. 40 00:03:01,500 --> 00:03:02,730 Let's just be consistent. 41 00:03:02,730 --> 00:03:05,980 Otherwise you're going to obviously run into some errors. 42 00:03:06,720 --> 00:03:09,990 So we'll do our render method inside of here. 43 00:03:09,990 --> 00:03:17,840 What would turn a div that just shows create form. 44 00:03:17,920 --> 00:03:18,410 Right now. 45 00:03:18,450 --> 00:03:19,660 Nice and simple. 46 00:03:20,220 --> 00:03:27,840 And at the bottom we will exports default posts new. 47 00:03:27,990 --> 00:03:34,380 Now we want users to be able to see this component whenever they navigate to the you or I'll post slash 48 00:03:34,470 --> 00:03:38,870 new just like this right here post slash new. 49 00:03:39,240 --> 00:03:43,110 So that means that we need to define a new route mapping on our router 50 00:03:46,200 --> 00:03:53,370 inside of our route start just file will open it up and then we will import the component that we just 51 00:03:53,370 --> 00:03:54,310 created. 52 00:03:54,600 --> 00:04:06,050 So import pose new from components pose new like so. 53 00:04:06,390 --> 00:04:09,150 And then we'll create a new route mapping for it. 54 00:04:09,450 --> 00:04:15,600 So remember our route mapping is saying hey when a user visits this route please show this component 55 00:04:16,500 --> 00:04:28,460 so we'll say route and the path is going to be posts new component is going to be posts now. 56 00:04:29,760 --> 00:04:34,830 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 00:04:34,830 --> 00:04:35,130 . 58 00:04:35,160 --> 00:04:37,110 They are great. 59 00:04:37,140 --> 00:04:41,530 I mean to refresh and we don't yet have a link that we can click to go there. 60 00:04:41,550 --> 00:04:44,920 But we can always type in the URL manually. 61 00:04:45,030 --> 00:04:51,240 So we'll just type and pose new and we get our create forms showing up right here. 62 00:04:51,240 --> 00:04:58,440 Perfect just so we need our new route is definitely working here so we can now visit either post-New 63 00:04:58,890 --> 00:05:05,210 or just forward slash which takes us back to our list of blog posts. 64 00:05:05,790 --> 00:05:06,090 OK. 65 00:05:06,090 --> 00:05:07,470 So that's steps 1 and 2. 66 00:05:07,500 --> 00:05:12,020 We did our scaffolding and we added our component as a separate route. 67 00:05:12,270 --> 00:05:18,210 Let's go ahead and tackle step number three in which will implement a button on our list view that the 68 00:05:18,210 --> 00:05:21,670 user can click to go over to the new post component. 69 00:05:21,780 --> 00:05:23,130 I'll catch you over there.