Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
The functional components we have been building are very easy to reason about, but sometimes we need more flexibility. We will learn how to create component classes that can contain their own internal states.
New Terms
Stateless Functional Component: A component defined as a function. It takes only props as an argument and returns a virtual DOM.
Component Class: A component definition that can include things like state, helper methods and other advanced hooks into the page’s DOM
Links
-
0:00
[MUSIC]
-
0:04
[SOUND] So we've far we've built our application using functional components.
-
0:08
These functions took in some properties and returned a virtual DOM tree
-
0:12
representing what the UI should look like for that component.
-
0:15
Our app is missing some critical functionality right now.
-
0:18
We can't update any of the data.
-
0:21
We can't change the scores for a player, and we can't add or remove a player.
-
0:26
Our UI is static because our data's static.
-
0:29
What we need to do now is add some state.
-
0:32
The way we have been writing components is in a style called stateless functional
-
0:35
components, or SFC.
-
0:38
As the name implies, this form isn't suited for
-
0:40
handling state before we can start using state in our components.
-
0:45
We need to rewrite them as a component class.
-
0:48
A component class is a powerful way to build a component but
-
0:51
with that power comes complexity.
-
0:54
That is why I always start with a stateless functional component
-
0:57
whenever I build an application.
-
0:59
These are much easier to write and reason about than component classes.
-
1:03
Let's convert one of our components into a component class.
-
1:08
I'm going to demonstrate a component class by refactoring the Counter component.
-
1:12
We currently have our Counter component as a stateless functional class but
-
1:16
will be writing it now as a component class by first doing this.
-
1:19
Create variable called Counter, and
-
1:24
we'll do React.createClass, and
-
1:29
this takes in an object.
-
1:35
So the object that createClass takes is an object that will define the methods of
-
1:39
our class.
-
1:40
There are some methods defined by React which serve special purposes, but
-
1:44
we can add our own methods as needed to build our component.
-
1:47
The only required method for us to define is the render method.
-
1:51
This method is much like the stateless functional components that we've been
-
1:55
writing, in that it returns a virtual DOM representation for components.
-
1:59
So we'll write that now by typing and render: and it'll be a function.
-
2:04
It takes no arguments.
-
2:06
And this will be returning our virtual DOM.
-
2:09
We can actually cut the content out of our old component and
-
2:14
paste it into our render method.
-
2:18
And we'll fix the indentation.
-
2:22
And we can go ahead and remove our old Counter function.
-
2:28
Now this will almost work, but here where we display our score,
-
2:31
we need to replace props.score with this.props.score.
-
2:36
In a component class, props is actually a property of the class itself.
-
2:42
It does not get passed into the render function like it does
-
2:45
in a stateless functional component.
-
2:47
This is a pretty quick change to make.
-
2:49
So we can do this.props.score.
-
2:53
So let's save it and let's go and check it out.
-
2:57
Let's refresh.
-
3:00
And it looks like our code is pretty much the same.
-
3:02
We can dive into it.
-
3:05
We see applications.
-
3:06
Inside players, we still see a counter.
-
3:09
Now, we can't really tell that it's a different type of component from here, but
-
3:12
we can see that the code is still working as expected.
-
3:15
We haven't really changed much.
-
3:18
One more thing we wanna do when translating our stateless functional
-
3:21
component into a component class is to change how we define our prop types.
-
3:26
The current way we're doing it will work, however when doing a component class,
-
3:30
it's actually much easier to do prop types as a property of our class.
-
3:35
So let me fix this typo here.
-
3:38
Make sure to add a comma between each of our definitions within this object.
-
3:43
So, we can just define prop.types.
-
3:45
We can give it the same format we were using before.
-
3:49
We'll save it there.
-
3:52
Or move this line right here.
-
3:55
And we'll double check to make sure everything's still working fine.
-
4:00
We don't have any errors.
-
4:01
Everything seems to be rendering correctly.
-
4:04
So now we've done a fairly simple operation.
-
4:06
Changing our Counter stateless functional component into a component class.
-
4:11
Functionally, we haven't changed anything.
-
4:13
We're preparing to add state to our counter component,
-
4:16
which requires us to use a component class.
-
4:18
This operation of translating a functional component into a component class
-
4:23
is pretty common when working in React.
-
4:25
We generally prefer to use these stateless functional components but
-
4:28
when it becomes apparent that state will be needed,
-
4:31
being able to translate from one to the other is really important.
-
4:35
Now we've seen how to use a component class.
-
4:38
Next, we'll add state to our component.
-
4:40
But first, let's go over the differences between the two forms in a quiz.
You need to sign up for Treehouse in order to download course files.
Sign up