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

Sign up for Treehouse

Create a Component as a Class

4:00 with Guil Hernandez

Class components offer a more powerful way to build components because they're the only type of components that let you use state.

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