Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Class components offer a more powerful way to build components because they're the only type of components that let you use state.
Resources
Related content
There are two ways to create a component
in React, a function and a class.
0:00
So far, we focused on defining components
with functions in a style called
0:05
stateless functional components.
0:09
As the name implies,
0:11
these are components written as
functions that do not humble state.
0:13
These components are only receiving
input through props and rendering UI.
0:18
We started with stateless functional
components because they´re easier to
0:24
write, read, and understand.
0:27
They just take in props and return JSS.
0:29
But sometimes we need to do
more with a component like
0:33
Class components offer a more
powerful way to build components.
0:37
Because they´re the only type of
components that let you use state.
0:41
So before we can start
using state in our app,
0:45
we'll need to convert some of
our components to classes.
0:47
For example, the counter will display
data that changes over time, a score.
0:51
Users will interact with the counter
by clicking the plus and
0:56
minus buttons to increase and
decrease the score.
0:59
So let's start by converting
the counter function to a class using
1:02
the ES2015 class syntax.
1:07
If you're not familiar with classes,
be sure to have a look at the Treehouse
1:09
videos and resources I've posted in
the teacher's notes with this video.
1:13
First, I'll use the class keyword
1:16
to create a class with the same name,
1:21
counter that extends React.Component.
1:26
In JavaScript classes, the extends
keyword is used to create a subclass,
1:33
or a child of another class.
1:38
In this case, we're extending from
React.Component which is part of
1:40
React's API for
component class definition.
1:45
The only method you need to define in
a class component is called render.
1:48
Next, I'll move the return statement
into the render method and that's it.
1:56
You use a class component just like
a functional component by including
2:05
its JSX tag wherever
you want to display it.
2:10
So there's nothing we need to
change inside the player component.
2:13
However, there is one important change
we need to make in the JSX expression.
2:16
Instead of accessing props with
pops.propname, for example,
2:21
props.score, classes need to
access props with this.props.
2:27
So make sure that you change
it to this.props.score.
2:32
In class components,
2:37
props are not accessed through arguments
like they are in functional components.
2:38
Props are a property of
the component itself.
2:42
So this refers to the component instance.
2:46
So what we have now is equivalent to our
previous stateless functional component.
2:50
We're not using any new functionality.
2:56
And as you can see, the counter still
looks and behave in the same way.
2:58
In fact, we could have written each of
our components as classes from the start.
3:03
So when do you use a class
versus a function?
3:08
Well, if a component is only
receiving input through props and
3:11
rendering UI, it's best to use a function
or a stateless functional component.
3:15
Functions are a little bit easier
to write, read and understand, and
3:20
you can think of a stateless functional
component as just the render method
3:24
from a class component with
props passed in as an argument.
3:29
Now when you want to add state,
that's when you use a class component.
3:33
However, you can also create
stateless components as classes,
3:37
there's really nothing
wrong with that approach.
3:41
One benefit of that approach is that if
you ever need to convert the component
3:43
from stateless to stateful, you'll
already have a class defined for it.
3:47
All right, now that you've learned how
to define and use class components,
3:52
in the next video,
we'll add state to our counter component.
3:56
You need to sign up for Treehouse in order to download course files.
Sign up