1 00:00:01,030 --> 00:00:02,200 In the previous video. 2 00:00:02,200 --> 00:00:09,330 This way we left by creating a functional component, but they are more into components. 3 00:00:09,340 --> 00:00:12,590 But let's move step by step as you proceed. 4 00:00:12,610 --> 00:00:19,000 You are going to create a lot of component and after recovered under G6 and CSS, then you can create 5 00:00:19,000 --> 00:00:20,490 more complex components. 6 00:00:20,500 --> 00:00:22,750 For now, let's move step by step. 7 00:00:23,080 --> 00:00:23,560 Okay, cool. 8 00:00:23,560 --> 00:00:27,000 So it is how we create a class, a functional based component. 9 00:00:27,010 --> 00:00:30,250 What about class based component, as the name even implies? 10 00:00:30,460 --> 00:00:36,490 So let's create a new folder here because now we are going to create our custom components, right? 11 00:00:36,490 --> 00:00:43,600 So here inside of our C, let's create a folder and call it as component like that. 12 00:00:43,600 --> 00:00:47,560 And here we are going to create a pattern component, just a pattern. 13 00:00:47,590 --> 00:00:51,760 Remember, it must start with uppercase and then button start dot. 14 00:00:51,760 --> 00:00:56,080 JS So how to create a class based component? 15 00:00:56,080 --> 00:01:03,550 Well, first of all, we need to import react for function, you need it and now we want to do structure 16 00:01:03,550 --> 00:01:08,110 component for its component. 17 00:01:08,380 --> 00:01:10,420 And then from. 18 00:01:12,240 --> 00:01:13,350 React. 19 00:01:13,650 --> 00:01:14,580 Great. 20 00:01:14,820 --> 00:01:19,680 The next step is I need to create my component. 21 00:01:19,680 --> 00:01:24,660 So a class implies use class syntax to create a class based component. 22 00:01:24,870 --> 00:01:29,310 So class and the name of my component called button. 23 00:01:30,150 --> 00:01:33,000 And then I need to extend. 24 00:01:33,950 --> 00:01:37,130 And then component, which is this one. 25 00:01:38,130 --> 00:01:42,060 And then I caught my passing as my object. 26 00:01:42,060 --> 00:01:46,380 And now inside, I need to render something. 27 00:01:46,380 --> 00:01:50,070 So render here inside the class base component. 28 00:01:50,160 --> 00:02:00,150 We have a function or a method called render as a function that then in my basis I start and then inside. 29 00:02:00,150 --> 00:02:01,970 Now we have our return. 30 00:02:01,980 --> 00:02:05,190 So here I'm going to return this apparent element. 31 00:02:05,190 --> 00:02:09,750 So here be an element and I'll call this one. 32 00:02:09,900 --> 00:02:13,470 I mean, register button. 33 00:02:14,130 --> 00:02:18,090 Hey, now I need to export this one. 34 00:02:18,090 --> 00:02:19,770 So export. 35 00:02:20,640 --> 00:02:21,600 Default. 36 00:02:22,530 --> 00:02:25,140 And then my button here. 37 00:02:25,740 --> 00:02:27,450 So how can I use it? 38 00:02:27,480 --> 00:02:30,690 Well, let's go to my index. 39 00:02:30,720 --> 00:02:33,890 Remember that here we are using the app. 40 00:02:33,900 --> 00:02:38,100 So now let's use the button component. 41 00:02:38,190 --> 00:02:42,060 So let's also import the button. 42 00:02:42,060 --> 00:02:46,650 And then from I think I have the auto import and I'm good to go. 43 00:02:46,890 --> 00:02:53,110 So now instead of the app here, let's replace with Button and now have a look. 44 00:02:53,130 --> 00:02:57,720 I have my body component, as you see here. 45 00:02:58,320 --> 00:03:03,360 So the next video, don't worry, you're moving step by step here. 46 00:03:03,390 --> 00:03:10,380 The next video, we are going to improve our skills a little bit by learning what is called gsx. 47 00:03:10,380 --> 00:03:17,370 And then after we learn that one, they may come back to component again and create more complex components. 48 00:03:17,610 --> 00:03:20,790 Well, so let's get rocking in this video, guys.