All language subtitles for 003 Adding a First Class-based Component_en

Now to dive into class-based components,

I got another starting project for you.

And you'll find it attached to this lecture of course.

Simply download it, extract it, run npn install,

and then npn start,

and you will see this simple demo app here.

Here we've got a button,

where we can toggle this list of users.

Now that's all not too fancy.

And it's simply built by, in the end,

using two components and the app component.

We've got the users component with some dummy users.

And there we got the toggle user handler function.

And then in the end here,

we simply create our list of users,

by replicating the user component.

And we got a button which triggers that function

which changes the state with user state,

which controls whether that users list is visible or not.

And inside the user component

I simply render a list item with some styling

and I'm using props.

So that's all not too fancy.

And that's of course,

all something you learn throughout this course.

Now let's learn how we could write

this user component as a class-based component.

So how we can transform this to a class-based component.

And for this, we start with the class keyword.

Which again,

just to make this really clear is built into JavaScript.

It's not a React concept.

Modern JavaScript supports classes.

Now here, we would define a class named user.

And when we define a class in Java script,

it looks like this.

class, then the name of the class,

and then curly braces in which we define the class now.

And inside of these curly braces,

we can now start adding methods to this class.

And for example, we can add a constructor method.

Here, we could do some initialization work

and I'll come back to this in a second,

but actually I got no initialization work in this component.

So I will just remove the constructor.

Instead, we should add a render method.

Now, theoretically,

we can add as many methods as we want to a class

and we can name them however we want.

Render just is a specific method expected by React,

which React will call when it finds a component being used

in JS X code.

Like we're doing it here.

And then React will call the render method

to find out what should be rendered to the screen.

So the render method in a clause in the end,

is your equivalent to your return statement

in a functional component, you could say.

And in the render method,

you then also need to return the result,

that should be rendered.

So that's now how we can rebuild this.

Though, one important thing is missing here.

And that would be the props.

In the function component,

we receive props as a parameter.

Automatically passed in by React.

In the class based component, that's not the case.

Here, the render method does not receive props.

Instead though we need to do something else.

Not just for props,

but to make the class based component work in general.

We need to import component from React.

And then we need to extend component here,

which is also a built in concept in modern Java script.

You can build classes which extend other classes.

So which inherit from other classes.

And now our custom user class,

inherits from the component class

which is defined by React.

Now this component class,

adds important functionality,

to make your class work as a component.

And that's the important part for us.

Now, it also adds a couple of important properties.

For example, the props property,

which we can now access with this props.

This is only possible because we extend component.

Because of that,

there will be a props property in our clause

which we can access through this keyword.

And that contains all the props data

we received for our component.

And now we've got the class-based equivalent

to our functional component,

which we can now remove or comment out.

And I'll do the latter,

so that we still see both in side by side comparison.

As you can tell,

the functional component is a bit leaner,

which is one of the main reasons why they are more popular.

But other than that it is the same now.

We also still export user and now we can save this.

And if I reload, we get the same app as before

and it works and looks like before.

And that is also a very important takeaway here.

Class-based components can work together

with functional components.

Users is a functional component, but it renders user,

which is a class-based component.

And that is absolutely no problem.

A class-based component could also render

a functional component that would also work.

In the end, these are just components,

and you can mix and match them as you want.

In reality, you will most likely build a project

by either sticking to just functional

or to just class-based components though.

You can mix and match, but that will mostly matter

if you are working on an existing application

and you're adding new features

and you may be also step by step migrate,

from class-based to functional.

If you're starting a brand new project,

you will probably go with your favorite approach,

whatever that is and then stick to it.

But you can mix and match it.

And that is how you build class-based components.

Now, however, I did mention that,

we had to use them in the past,

when it came to managing state,

like we're doing it here in the user's JS file.

Therefore let's find out how that works,

with class-based components now.