Hopefully our experts in importing and exporting the six modules so why don't we talk about the class
based components and where because so far we have been covering only the stateless functional components
which have been working out really well for us.
We even finished the project for them or the class based components are gonna be more powerful because
we can do all the same things we were doing with stateless functional components.
However we can also have something called state as well as the life cycle method as you're watching
this tutorial though react just released a react hoax which also give the same functionality to a stateless
Functional Component.
However that doesn't mean the classes are not being used or that reactor hooks are replacing the classes.
You can still use classes.
Classes are very important and quite frankly there is too much code out there for us not to cover the
class.
And again the biggest difference would be that with class based components we can do all the same things
we were doing with stateless functional components.
However we can do to other things extra which would be having a state as well as using the lifecycle
method.
The classes in general NEA 6 are already syntactical sugar and the reason why we're talking about the
class is because in order to create a class based component we all going to have to use the class.
And in short one sentence answer.
The classes would be syntactical sugar for the constructor functions and this allows us to basically
have a simpler syntax because if any of you have been using the constructor of functions you know that
it kind of gets annoying working with the prototypes and all that.
So any S6 we got a syntactical sugar we're under the hood everything still stay the same.
But it's just the implementation is a little bit easier if you need to catch up a little bit with classes.
I would suggest pausing the video and just do a little bit of reading because I'm not going to go into
any more detail since this is not a javascript tutorial horror course.
This is everything that we have to deal with react so that would be my simplest answer that I can give
you in the class.
How in the react this is even more interesting because not only we're gonna be using the six classes.
We're also gonna have to have it as a subclass of a component class.
Now what that would mean is the fact that we all gonna be extending from component class and what that
would mean in real life is we're going to be inheriting the functionality and the component class is
gonna be used to transfer from the basic sixth class to a proper component class.
So why don't we go ahead and do it first and foremost we're going to have to have a different import
or we're gonna have to work with react a little bit differently.
Let me show you how this is gonna work.
So first of all let me come on this out.
Let's say there's gonna be no app and the moment I'm gonna save it.
Obviously my application is gonna break.
However for the class we need to use the class syntax and the keyword would be class.
And that is by the way reason why we need to use energy as sex the class name.
And this is exactly that because we have the keyword for the class.
And then we would need to come up with a name and again I'm just going to call this app and then this
is the interesting part.
In order to just to create a simple class we can just do the curly braces or if we would want to inherit
from the component class then we would need to write extends and then we have two options.
Either you're going to see syntax like this react component so you can do it like this.
So now you have a very powerful class based component or you're gonna see the syntax like this where
we're just extending from component.
However in this case this is important that you also fix your import because in this case here you're
working with the react and everything was working fine but if you're just extending from the component
make sure that you also specifically importing a component and as a side note.
Notice what we're doing here.
We already cover the imports and exports right.
So now we're doing the default export.
We already know that this would be the default export from react which the difference would be that
in this case we were doing some kind of import from our own components or files or modules but in this
case this would be dependent.
So we were already doing in charge of importing and exporting.
However we just didn't notice that because we didn't cover it.
And when I say exporting with technically didn't do the exporting but we for sure did a lot of importing
since we already wrote many times we are now in this case this wouldn't be the default one.
And here we were looking for a name.
So now we specifically need a couple.
Awesome.
So we have our powerful component.
So what's next.
Why don't we look at the method that you're going to is it a lot.
I'm not going to say that.
Maybe this is gonna be the most important method but that's gonna be something that you're going to
use a lot in your class based components.
And that would be the render method because the same way how well we are working with functional components
these stateless ones as we're rendering something we also want to render something with a wrap.
Otherwise it's not going to make sense or any class based component for that matter.
And how do we do that.
Well here we have a specific method.
So the naming here is important so don't follow my example where I always tell you all this doesn't
matter or that doesn't matter.
In this case it does matter it does matter that we call this render and then within the render method
we have our return.
And then within the return this is where we returning it.
So let's say if we're returning the section and we are using not the implicit return that we had already
here we need to use the explosive return and then let's say we're going to set up our present to seize
and we're going to say whatever we would like in the parentheses first so maybe let me come on this
out.
I'm gonna copy and paste it once this is copy and paste it again I'm gonna comment it back out so we're
gonna say something like this and again we have everything working we have our app.
And by the way let me show you something very powerful again with exports and imports.
Where if I'm going to rename this and I'm going to say I've won and I'm going to say that I would like
to export default one even though we are exporting this is has a happy one.
Now our index does not change.
So our application does embrace simple reasons that we are doing the default export.
And in this case we can name this whatever we would like and just use that variable and that would be
just a side note.
And yeah we successfully created our first class based component.
We looked at the render method where we're going to have the returns so all our returns are going to
happen here.
And as a side note all our functionality is basically going to happen here above this render or some
cases we're also gonna look at here above the return.
This is really going to differ depending on the situation.
But again the rules would be exactly the same.
If you're gonna do something that is not allowed within the jail sucks you're gonna get an error.
That's not gonna be a any different.
However now we're using the class based component which we're all gonna give us those two powerful things
state as well as using the lifecycle methods which we wouldn't be able to do it with stateless functional
components.