1 00:00:00,570 --> 00:00:01,200 Welcome back. 2 00:00:01,500 --> 00:00:07,320 I know I know we want to get coding one last set up before we start building our first component. 3 00:00:08,160 --> 00:00:15,660 I want you to change this function app and do something that I'll explain as we go through the course. 4 00:00:15,960 --> 00:00:19,050 You see, this is called a functional component. 5 00:00:20,110 --> 00:00:27,970 I want to change this into a class in the way we do this is, we say class app extends. 6 00:00:29,700 --> 00:00:32,670 React dot component. 7 00:00:34,570 --> 00:00:35,860 We're going to remove. 8 00:00:36,800 --> 00:00:38,660 This since it's not a component. 9 00:00:40,450 --> 00:00:45,460 And then we're going to return this in a render method. 10 00:00:46,660 --> 00:00:48,850 So this what you see here. 11 00:00:50,760 --> 00:00:51,960 You make sure I had. 12 00:00:53,520 --> 00:00:54,690 The proper brackets. 13 00:00:59,620 --> 00:01:02,350 Like this, I'm going to save this. 14 00:01:04,700 --> 00:01:10,580 I get react is not defined because I have to import react. 15 00:01:11,820 --> 00:01:14,490 From React. 16 00:01:14,790 --> 00:01:19,320 And why did I get that, because I'm using React Dot component here. 17 00:01:19,470 --> 00:01:20,430 So if I save that? 18 00:01:21,520 --> 00:01:23,790 I get OK app is defined, but never use. 19 00:01:23,800 --> 00:01:25,510 That's because of the index. 20 00:01:25,990 --> 00:01:27,250 Dot js file. 21 00:01:27,940 --> 00:01:30,820 Let's just for now use app again. 22 00:01:34,480 --> 00:01:40,240 Everything is good, so I've created a class component, let's just make sure this works before I explain 23 00:01:40,240 --> 00:01:40,660 it to you. 24 00:01:42,350 --> 00:01:42,830 Look at that. 25 00:01:42,890 --> 00:01:50,630 Everything works as expected, so I didn't change anything, but I did convert this into a class. 26 00:01:51,970 --> 00:01:58,360 Now, I want us to start off like this, because back in the day when Create React app got started. 27 00:01:58,630 --> 00:02:02,950 This is how the default app dodges file was like. 28 00:02:03,930 --> 00:02:09,930 And as you'll see, we'll have to convert this into a class to create what we call a class component 29 00:02:09,930 --> 00:02:12,240 versus a functional component. 30 00:02:12,990 --> 00:02:20,280 Again, don't worry about the naming, but essentially what I'm doing is I'm using the React package 31 00:02:20,430 --> 00:02:23,490 that we installed using Dart component. 32 00:02:23,970 --> 00:02:30,960 This extends or gives us the power that comes inside of the React package. 33 00:02:31,350 --> 00:02:38,400 So I make an app and I say, Hey, I want the power of React component that I've installed in this React 34 00:02:38,490 --> 00:02:42,300 component automatically detects this render method. 35 00:02:42,660 --> 00:02:48,090 Usually, you want to add a render method because automatically part of the functionality is that it's 36 00:02:48,090 --> 00:02:50,640 going to run the render and return. 37 00:02:50,650 --> 00:02:53,670 Something returns some sort of view. 38 00:02:54,940 --> 00:03:01,930 In here, so if you're wondering how all this magic is happening, it's all in the React dot component. 39 00:03:02,870 --> 00:03:07,190 Again, something we'll going to dive deeper and deeper into. 40 00:03:07,400 --> 00:03:13,910 But as a starting point, I want us to start off with the class extends React component, and then from 41 00:03:13,910 --> 00:03:17,480 there we're going to dive deeper and deeper now. 42 00:03:17,480 --> 00:03:22,910 The final thing is that when we go into the next lesson, you might see some things different. 43 00:03:22,910 --> 00:03:29,510 You might not see this react US trick mode create React app is constantly updating, so they add new 44 00:03:29,510 --> 00:03:35,000 nice features that doesn't really affect us immediately, but just makes things simpler. 45 00:03:35,180 --> 00:03:41,030 So react off strict mode just gives us extra protection that again, we don't need to worry about. 46 00:03:41,030 --> 00:03:46,340 So you won't see that in the next video and you won't see things like report web vitals. 47 00:03:46,340 --> 00:03:51,110 In the next video, you might see something like Register Service Worker, which used to be part of 48 00:03:51,110 --> 00:03:57,050 Cory React app, but once again, we're going to ignore that we're going to focus on what I said the 49 00:03:57,050 --> 00:03:59,600 source folder and building out our components. 50 00:04:00,440 --> 00:04:02,030 So let's get started.