1 00:00:00,960 --> 00:00:02,340 -: In the last section, we spoke about 2 00:00:02,340 --> 00:00:04,350 how we're going to approach figuring out 3 00:00:04,350 --> 00:00:06,960 what we need to test inside of our application. 4 00:00:06,960 --> 00:00:08,760 So in this video, we're gonna get started 5 00:00:08,760 --> 00:00:10,800 on our actual implementation of our app 6 00:00:10,800 --> 00:00:13,680 and then very quickly start writing some tests around it. 7 00:00:13,680 --> 00:00:16,740 The first thing we're going to work on is our app component. 8 00:00:16,740 --> 00:00:20,160 So we're going to put together a very basic app component. 9 00:00:20,160 --> 00:00:21,660 We're going to put together kind of 10 00:00:21,660 --> 00:00:24,390 a boiler plate or very quick implementation 11 00:00:24,390 --> 00:00:26,580 of our CommentBox and CommentList, 12 00:00:26,580 --> 00:00:28,350 and make sure that these two components 13 00:00:28,350 --> 00:00:30,540 show up inside the app. 14 00:00:30,540 --> 00:00:32,610 And then we will be able to write our tests that say, 15 00:00:32,610 --> 00:00:35,610 Yep, the CommentBox and the CommentList are visible 16 00:00:35,610 --> 00:00:38,310 or displayed within the App Component. 17 00:00:38,310 --> 00:00:39,210 So let's get to it. 18 00:00:39,210 --> 00:00:41,100 We're gonna flip back over to our code editor 19 00:00:41,100 --> 00:00:44,883 and start working on the App, CommentBox and CommentList. 20 00:00:45,900 --> 00:00:47,190 All right, so once over here 21 00:00:47,190 --> 00:00:49,590 I'm back inside my code editor. 22 00:00:49,590 --> 00:00:51,720 Inside my code editor you'll recall that 23 00:00:51,720 --> 00:00:53,670 I have this src directory here 24 00:00:53,670 --> 00:00:54,990 with a couple of different files 25 00:00:54,990 --> 00:00:57,450 that were generated by Create React app. 26 00:00:57,450 --> 00:01:00,390 Now, anytime that I get started with Create React app 27 00:01:00,390 --> 00:01:04,140 I really don't care to use all this pre-generated code. 28 00:01:04,140 --> 00:01:07,890 So what I usually do is I delete the entire src directory 29 00:01:07,890 --> 00:01:09,090 and I start from scratch. 30 00:01:09,090 --> 00:01:10,830 And I really recommend you do the same 31 00:01:10,830 --> 00:01:12,120 cuz it's gonna give you a better idea 32 00:01:12,120 --> 00:01:13,860 of how we set all this stuff up 33 00:01:13,860 --> 00:01:16,080 without any prior implementation 34 00:01:16,080 --> 00:01:18,990 or copy pasting or anything like that. 35 00:01:18,990 --> 00:01:21,120 So I'm gonna find the src directory 36 00:01:21,120 --> 00:01:23,020 and I'm gonna delete the entire thing. 37 00:01:24,720 --> 00:01:27,540 I'll then immediately recreate the src folder. 38 00:01:27,540 --> 00:01:28,830 So inside the route directory 39 00:01:28,830 --> 00:01:30,530 I'll make a new folder called src. 40 00:01:31,740 --> 00:01:33,660 And then inside of here, we're gonna very quickly 41 00:01:33,660 --> 00:01:36,960 create a couple of different files and folders. 42 00:01:36,960 --> 00:01:41,730 I'm gonna first make a new file called index.js. 43 00:01:41,730 --> 00:01:44,760 So this file right here is gonna serve as the absolute route 44 00:01:44,760 --> 00:01:47,700 or kind of boot up location of our application. 45 00:01:47,700 --> 00:01:50,310 Anytime you run a Create React app project 46 00:01:50,310 --> 00:01:52,260 it always assumes that you've got a file 47 00:01:52,260 --> 00:01:55,650 inside the src directory called index.js. 48 00:01:55,650 --> 00:01:58,083 So this is a required file right here. 49 00:01:59,430 --> 00:02:02,710 Then inside the src directory, I'm gonna make a new folder 50 00:02:03,630 --> 00:02:05,823 and I'm going to call it components. 51 00:02:07,080 --> 00:02:08,639 Inside the components directory 52 00:02:08,639 --> 00:02:12,180 I'll make a new file called App.js. 53 00:02:12,180 --> 00:02:13,050 As you might imagine 54 00:02:13,050 --> 00:02:15,963 this is gonna house all the code for our App Component. 55 00:02:18,180 --> 00:02:19,680 Then inside the components directory 56 00:02:19,680 --> 00:02:21,570 I will also create two files 57 00:02:21,570 --> 00:02:25,650 for our CommentBox component in the comment list. 58 00:02:25,650 --> 00:02:30,330 So I will first make a new file for CommentBox.js, 59 00:02:30,330 --> 00:02:31,263 so there's one. 60 00:02:32,490 --> 00:02:37,490 And then also CommentList.js, and there's two. 61 00:02:39,990 --> 00:02:42,000 Okay, so that looks good. 62 00:02:42,000 --> 00:02:43,320 Let's take a quick pause right here. 63 00:02:43,320 --> 00:02:44,153 When we come back, 64 00:02:44,153 --> 00:02:45,870 we'll start putting together some boiler plate 65 00:02:45,870 --> 00:02:48,283 for the CommentBox and the CommentList.