There are two ways to create a component in React, a function and a class.

So far, we focused on defining components with functions in a style called

stateless functional components.

As the name implies,

these are components written as functions that do not humble state.

These components are only receiving input through props and rendering UI.

We started with stateless functional components because they´re easier to

write, read, and understand.

They just take in props and return JSS.

But sometimes we need to do more with a component like

Class components offer a more powerful way to build components.

Because they´re the only type of components that let you use state.

So before we can start using state in our app,

we'll need to convert some of our components to classes.

For example, the counter will display data that changes over time, a score.

Users will interact with the counter by clicking the plus and

minus buttons to increase and decrease the score.

So let's start by converting the counter function to a class using

the ES2015 class syntax.

If you're not familiar with classes, be sure to have a look at the Treehouse

videos and resources I've posted in the teacher's notes with this video.

First, I'll use the class keyword

to create a class with the same name,

counter that extends React.Component.

In JavaScript classes, the extends keyword is used to create a subclass,

or a child of another class.

In this case, we're extending from React.Component which is part of

React's API for component class definition.

The only method you need to define in a class component is called render.

Next, I'll move the return statement into the render method and that's it.

You use a class component just like a functional component by including

its JSX tag wherever you want to display it.

So there's nothing we need to change inside the player component.

However, there is one important change we need to make in the JSX expression.

Instead of accessing props with pops.propname, for example,

props.score, classes need to access props with this.props.

So make sure that you change it to this.props.score.

In class components,

props are not accessed through arguments like they are in functional components.

Props are a property of the component itself.

So this refers to the component instance.

So what we have now is equivalent to our previous stateless functional component.

We're not using any new functionality.

And as you can see, the counter still looks and behave in the same way.

In fact, we could have written each of our components as classes from the start.

So when do you use a class versus a function?

Well, if a component is only receiving input through props and

rendering UI, it's best to use a function or a stateless functional component.

Functions are a little bit easier to write, read and understand, and

you can think of a stateless functional component as just the render method

from a class component with props passed in as an argument.

Now when you want to add state, that's when you use a class component.

However, you can also create stateless components as classes,

there's really nothing wrong with that approach.

One benefit of that approach is that if you ever need to convert the component

from stateless to stateful, you'll already have a class defined for it.

All right, now that you've learned how to define and use class components,

in the next video, we'll add state to our counter component.