All language subtitles for 012 Class Components_en

We know that we can write functions that return HTML, but we can also write classes that return HTML

and the reason why we would want to use a class is because REACT has given us the ability to write classes

that have a lot more functionality on them versus a function that returns some HTML.

Now let me show you this.

So in order to write a class, we've got a first import component.

And instead of this function app, I'm going to convert this into a class, so class app extends this

component that we get from react and as a result, we now have access to this render method inside of

our app class and the render method returns any time I want.

So let's return that HTML we had before inside of our function and we'll see.

That it's actually the same.

And to prove it, I'm going to change this to this text here.

And we should see an update, right?

Hello, Iowa.

So this is great.

So it's pretty much the exact same at this point as are functional.

App that we had before, right, our function app that returned this block of HTML, but the reason

why we would want to use this kind of thing is if we wanted, say, instead to display this static string

of Hello U'wa.

What if I wanted?

Something like, let's say, instead of an attack dog, we had a button.

And whenever you click this button.

It would change the text to something else, right, we would change this Hellewell, to something else.

Well.

The thing about that is that by using a class component, we actually get access to this thing called

state.

What state is is it some object write a JavaScript object with properties that we can access at any

point inside of our class.

And the way we would do this is we would actually call the constructor keyword here.

And inside of a constructor we want to call super right, and what super does is it calls the constructor

method on the component class.

And what that does is it gives us access to this Stotz state.

Right.

This state property now exists on our class app and we can set it to something.

So this is the default value I want to set it to first.

So let's say I want to set it to the string that we have right now.

Right.

I want to set some property on our state, object to Hello EOWA.

And then I want to render that instead of hello, halloa, the static string, how would I do that?

Well, I would first use these curly braces, which Jesse lets us do, and it tells the star that anything

between these curly braces is going to be JavaScript.

So I want you to render JavaScript, right.

So we want to do this dot state, dot string.

And now between these P tags, we actually don't see anything change because it's the same string.

But just to prove it, I'm going to say hello.

You're saying right there we see that it's looking at the state, looking at this property string and

rendering that here instead.

So that's awesome, because now I can do this in multiple places, right?

I can use this as many times as I want and I'm going to see multiple versions of it.

Right.

What if I wanted to change this value while the way I would do it is this class app that extends component,

this component also gives us this method called set state.

And what sets it does is it lets us modify this state object right on every single HTML element.

We now have access to this method, this property called UNCLICK, which takes a function that gets

called when ever this element gets clicked.

So lets pass in this function and in this function we're going to say this dot set state.

And what sets day takes is an object with all of the properties that you want to change on your state

as well as the new values that they have.

So I want to change the property string to Hello, Andre.

Now, when I click this button.

We see that it changed, right?

And that's really awesome, because this gives us a lot of control over what we want our components

to display.

So this will be really, really useful later when we don't know where we're going to get some of the

information that we actually want to display inside of our HTML.

But I'm going to show you in the next lesson why this is really useful.