In the previous video.
This way we left by creating a functional component, but they are more into components.
But let's move step by step as you proceed.
You are going to create a lot of component and after recovered under G6 and CSS, then you can create
more complex components.
For now, let's move step by step.
Okay, cool.
So it is how we create a class, a functional based component.
What about class based component, as the name even implies?
So let's create a new folder here because now we are going to create our custom components, right?
So here inside of our C, let's create a folder and call it as component like that.
And here we are going to create a pattern component, just a pattern.
Remember, it must start with uppercase and then button start dot.
JS So how to create a class based component?
Well, first of all, we need to import react for function, you need it and now we want to do structure
component for its component.
And then from.
React.
Great.
The next step is I need to create my component.
So a class implies use class syntax to create a class based component.
So class and the name of my component called button.
And then I need to extend.
And then component, which is this one.
And then I caught my passing as my object.
And now inside, I need to render something.
So render here inside the class base component.
We have a function or a method called render as a function that then in my basis I start and then inside.
Now we have our return.
So here I'm going to return this apparent element.
So here be an element and I'll call this one.
I mean, register button.
Hey, now I need to export this one.
So export.
Default.
And then my button here.
So how can I use it?
Well, let's go to my index.
Remember that here we are using the app.
So now let's use the button component.
So let's also import the button.
And then from I think I have the auto import and I'm good to go.
So now instead of the app here, let's replace with Button and now have a look.
I have my body component, as you see here.
So the next video, don't worry, you're moving step by step here.
The next video, we are going to improve our skills a little bit by learning what is called gsx.
And then after we learn that one, they may come back to component again and create more complex components.
Well, so let's get rocking in this video, guys.