Hi everyone.
In this video we're going to talk about class based components in React native.
Before we dive into that, let's talk a bit about what classes are
in general because I'm not sure that you have ever interacted with classes.
So in object opened programming, a class is a blueprint for creating objects.
Let's say you want to create
an application that manages people's information.
You could define a person class that has
properties like name, age and email address and behaviors like
updating their information and sending them notifications.
By defining a person class, you're creating a blueprint for creating
objects that represent people in your application.
You can create multiple instances of this
person class, each with their own name, age and email address and each with their
own behaviors for updating information and receiving notifications.
All you need to do for this is create one
class, give it the information for different persons,
and then you have the objects of these persons with which you can get information
about the persons or do some kind of an action that updates their
information or makes them receive notifications.
Okay, so now that we understand what
classes are, what objects are, and how it makes it easier for you
to create one blueprint and then have instances of different objects where you
could have different information provided for those objects, let's talk about React.
Before the introduction of hooks that we
have seen so far, react components were mainly implemented using classes.
Class basic components are created
by defining a class that extends the React component class.
So what is a component class
in React?
A component is a small reusable piece
of code that can be use to build larger components or applications.
We already know this and it encapsulates some specific functionality or behavior
that can be reused across different parts of your application.
When we define a class in React,
we're going to have to change our implementation a little bit.
So this is how functional components look.
Now, if we were to transform this into a class based components,
we're actually going to have to use a class keyword.
And class keyword is not a function, it is a blueprint, right?
So we can't just return something from here.
We're going to have to use a different approach here.
So first of all, we're going to have to import a component
class from React and we're going to have to say that it extends the component.
And once we do that,
we're going to have to change our return statement and actually use a specific
function that makes us able to render our components on this component.
So this function is called Render and we could use our return here, inside here,
so that we render the Hello World application.
Now, if I were to save this, you'll see that nothing really changed.
So this is how class based components would look like.
But here we don't really use any kind
of props because this is the root of our application.
But what if this was a components where we wanted to use props?
If we wanted to use props, we're going to have to create a class constructor.
So a constructor is a special method
that gets called when a new object is created from a class.
It is used to initialize the object's
properties and set up any initial state and it is a specific function called
constructor and it can't be created multiple times.
It's used for a specific use case that I just described.
And when we use the constructor,
we essentially set the initial state and bind event handlers to our class.
We can also use it to set props that are passed to the component.
And we know that props are like arguments that are passed to a function,
but in this case they are passed to a component as attributes.
So if you wanted to set props for a class,
you would actually have to use another important function inside it called super.
So if I just define a constructor here,
I will automatically get the super function inside here.
I can't bypass it.
And if I were to delete this and save it
like that, you're going to see that I get an error.
This hasn't been initialized.
Super hasn't been called.
So what is super? In the context of React classbased components
we use super in the constructor of our component class to call the constructor
of the parent class which in this case is React component class.
This is necessary to ensure that our component class has access to all
the functionality provided by React components class such as lifecycle methods
and state management that we're soon going to talk about in the upcoming videos.
This super function is available to us because it's built in into the JavaScript
language and is used for inheritance between classes.
So we're going to inherit some of the functionalities from the component
class that has been defined inside the React component class.
So when we define a class that extends
another class, we automatically inherit the super function from the parent class.
So here if we wanted to use props, we would actually have to say
that constructor is expecting a props attribute and the super function is going
to grab these props and set our props for our use inside the components.
So this is what would make you able to use props in a class based components.
If you have a class based component and you don't define this constructor
and super method, you're not actually going to have access
to your properties that might have been passed to your class based component.
So to sum up, a class based component is
a way to create reusable components in React native
by defining a class that extends the React component class.
We can use the constructor to set initial state, bind event handlers and set props.
And we need to call super the constructor
to properly set up the components, props and other internal values.
That's it for this video.
Thanks so much for watching.
Happy coding and I'll see you in the next one.