[MUSIC]

[SOUND] So we've far we've built our application using functional components.

These functions took in some properties and returned a virtual DOM tree

representing what the UI should look like for that component.

Our app is missing some critical functionality right now.

We can't update any of the data.

We can't change the scores for a player, and we can't add or remove a player.

Our UI is static because our data's static.

What we need to do now is add some state.

The way we have been writing components is in a style called stateless functional

components, or SFC.

As the name implies, this form isn't suited for

handling state before we can start using state in our components.

We need to rewrite them as a component class.

A component class is a powerful way to build a component but

with that power comes complexity.

That is why I always start with a stateless functional component

whenever I build an application.

These are much easier to write and reason about than component classes.

Let's convert one of our components into a component class.

I'm going to demonstrate a component class by refactoring the Counter component.

We currently have our Counter component as a stateless functional class but

will be writing it now as a component class by first doing this.

Create variable called Counter, and

we'll do React.createClass, and

this takes in an object.

So the object that createClass takes is an object that will define the methods of

our class.

There are some methods defined by React which serve special purposes, but

we can add our own methods as needed to build our component.

The only required method for us to define is the render method.

This method is much like the stateless functional components that we've been

writing, in that it returns a virtual DOM representation for components.

So we'll write that now by typing and render: and it'll be a function.

It takes no arguments.

And this will be returning our virtual DOM.

We can actually cut the content out of our old component and

paste it into our render method.

And we'll fix the indentation.

And we can go ahead and remove our old Counter function.

Now this will almost work, but here where we display our score,

we need to replace props.score with this.props.score.

In a component class, props is actually a property of the class itself.

It does not get passed into the render function like it does

in a stateless functional component.

This is a pretty quick change to make.

So we can do this.props.score.

So let's save it and let's go and check it out.

Let's refresh.

And it looks like our code is pretty much the same.

We can dive into it.

We see applications.

Inside players, we still see a counter.

Now, we can't really tell that it's a different type of component from here, but

we can see that the code is still working as expected.

We haven't really changed much.

One more thing we wanna do when translating our stateless functional

component into a component class is to change how we define our prop types.

The current way we're doing it will work, however when doing a component class,

it's actually much easier to do prop types as a property of our class.

So let me fix this typo here.

Make sure to add a comma between each of our definitions within this object.

So, we can just define prop.types.

We can give it the same format we were using before.

We'll save it there.

Or move this line right here.

And we'll double check to make sure everything's still working fine.

We don't have any errors.

Everything seems to be rendering correctly.

So now we've done a fairly simple operation.

Changing our Counter stateless functional component into a component class.

Functionally, we haven't changed anything.

We're preparing to add state to our counter component,

which requires us to use a component class.

This operation of translating a functional component into a component class

is pretty common when working in React.

We generally prefer to use these stateless functional components but

when it becomes apparent that state will be needed,

being able to translate from one to the other is really important.

Now we've seen how to use a component class.

Next, we'll add state to our component.

But first, let's go over the differences between the two forms in a quiz.