1 00:00:00,570 --> 00:00:02,640 Instructor: Our app test file and our app component 2 00:00:02,640 --> 00:00:03,719 are both complete. 3 00:00:03,719 --> 00:00:06,300 So we're now ready to move forward with our application. 4 00:00:06,300 --> 00:00:07,590 In this section, we're gonna start working 5 00:00:07,590 --> 00:00:09,480 on our CommentBox component 6 00:00:09,480 --> 00:00:12,416 which is placed inside the CommentBox.js file. 7 00:00:12,416 --> 00:00:15,150 You'll recall that the CommentBox is responsible 8 00:00:15,150 --> 00:00:17,040 for this text area at the top 9 00:00:17,040 --> 00:00:19,680 along with the submit button right underneath it. 10 00:00:19,680 --> 00:00:21,540 So putting this component together is gonna be pretty 11 00:00:21,540 --> 00:00:22,680 straightforward. 12 00:00:22,680 --> 00:00:24,750 Remember, we're going to eventually work 13 00:00:24,750 --> 00:00:26,820 in Redux to this application. 14 00:00:26,820 --> 00:00:30,480 We haven't added it in just yet, but we will very shortly. 15 00:00:30,480 --> 00:00:31,410 So for right now 16 00:00:31,410 --> 00:00:34,020 we're just gonna start to put together the component itself. 17 00:00:34,020 --> 00:00:35,910 We'll write out a test or two around it 18 00:00:35,910 --> 00:00:37,860 and then eventually we'll come back up 19 00:00:37,860 --> 00:00:40,680 come back around and hook redux up to the component. 20 00:00:40,680 --> 00:00:42,210 So let's get to it. 21 00:00:42,210 --> 00:00:43,560 I'm gonna get started by making sure 22 00:00:43,560 --> 00:00:46,508 that I have my CommenBox.js file open 23 00:00:46,508 --> 00:00:48,060 and inside of here 24 00:00:48,060 --> 00:00:50,910 I'm going to replace the functional component 25 00:00:50,910 --> 00:00:54,840 that I've created with a class-based component instead. 26 00:00:54,840 --> 00:00:56,610 This component is going to be responsible 27 00:00:56,610 --> 00:00:58,890 for watching input from a user. 28 00:00:58,890 --> 00:01:01,080 And so we definitely want to make it class-based 29 00:01:01,080 --> 00:01:03,060 so that we have access to component level state 30 00:01:03,060 --> 00:01:07,350 and can easily add callback methods to it as well. 31 00:01:07,350 --> 00:01:09,780 So I'm going to delete the entire function we had in there 32 00:01:09,780 --> 00:01:14,700 and replace it with class CommentBox extends react 33 00:01:14,700 --> 00:01:16,650 or excuse me, component. 34 00:01:16,650 --> 00:01:19,230 I was gonna say let's not forget to import component 35 00:01:19,230 --> 00:01:21,783 from React as well, like so. 36 00:01:22,770 --> 00:01:25,653 So then inside of here, I'll place my render function. 37 00:01:27,060 --> 00:01:28,353 I'm going to return. 38 00:01:29,820 --> 00:01:32,373 Right now. How about just a form tag? 39 00:01:34,020 --> 00:01:36,610 And inside there we'll put down an h4 40 00:01:37,920 --> 00:01:41,193 with the text of add a comment. 41 00:01:43,020 --> 00:01:48,020 I'll put down a textarea and I'll put down a 42 00:01:48,240 --> 00:01:52,770 div that contains a button as well. 43 00:01:52,770 --> 00:01:56,370 And I'll make that button say something like submit comment. 44 00:01:56,370 --> 00:01:58,500 I think that's reasonable. 45 00:01:58,500 --> 00:02:00,630 And then finally, at the very bottom of the file 46 00:02:00,630 --> 00:02:03,850 I'm going to export default the CommentBox 47 00:02:05,850 --> 00:02:07,860 All right, so that looks pretty reasonable right now. 48 00:02:07,860 --> 00:02:09,270 I'm gonna save this file. 49 00:02:09,270 --> 00:02:11,430 One quick thing I wanted to point out to you at this point 50 00:02:11,430 --> 00:02:14,100 of time is you'll notice now that the CommentBox 51 00:02:14,100 --> 00:02:16,260 component no longer has the text. 52 00:02:16,260 --> 00:02:19,290 I am a CommentBox being displayed. 53 00:02:19,290 --> 00:02:21,450 It doesn't say anything about a CommentBox. 54 00:02:21,450 --> 00:02:23,100 Yeah, it says comment, but it doesn't say anything 55 00:02:23,100 --> 00:02:23,950 about CommentBox. 56 00:02:24,990 --> 00:02:26,940 And so going back to that discussion we were having just 57 00:02:26,940 --> 00:02:29,790 a moment ago about making sure that we write our test to 58 00:02:29,790 --> 00:02:32,550 make sure that a given test file does not try to 59 00:02:32,550 --> 00:02:34,440 make assertions about the inner workings 60 00:02:34,440 --> 00:02:36,030 of other components. 61 00:02:36,030 --> 00:02:39,120 You'll notice if we go back over to the app.test.js file 62 00:02:39,120 --> 00:02:41,700 we do not have to make any modification to 63 00:02:41,700 --> 00:02:44,700 this test file now before it had a reference 64 00:02:44,700 --> 00:02:48,270 to the actual contents of the CommentBox component. 65 00:02:48,270 --> 00:02:49,170 But we remove that. 66 00:02:49,170 --> 00:02:52,710 So now we don't have to go back and modify our app test file 67 00:02:52,710 --> 00:02:54,663 in any way, which is definitely good. 68 00:02:55,800 --> 00:02:57,330 Okay, so inside the CommentBox 69 00:02:57,330 --> 00:02:58,560 I'll very quickly flip back over 70 00:02:58,560 --> 00:03:01,290 To my browser and open up the React application. 71 00:03:01,290 --> 00:03:03,030 And it looks like I've now got my text area 72 00:03:03,030 --> 00:03:06,300 on here along with the submit comment button as well. 73 00:03:06,300 --> 00:03:07,500 So this is a good start. 74 00:03:07,500 --> 00:03:08,850 Let's continue in the next section 75 00:03:08,850 --> 00:03:11,280 and we're going to hook up a couple of event handlers 76 00:03:11,280 --> 00:03:14,310 to this thing and then get started on a test around it. 77 00:03:14,310 --> 00:03:16,760 So quick break and I'll see you in just a minute.