1
00:00:00,000 --> 00:00:05,272
There are two ways to create a component
in React, a function and a class.

2
00:00:05,272 --> 00:00:09,715
So far, we focused on defining components
with functions in a style called

3
00:00:09,715 --> 00:00:11,909
stateless functional components.

4
00:00:11,909 --> 00:00:13,398
As the name implies,

5
00:00:13,398 --> 00:00:18,210
these are components written as
functions that do not humble state.

6
00:00:18,210 --> 00:00:24,014
These components are only receiving
input through props and rendering UI.

7
00:00:24,014 --> 00:00:27,969
We started with stateless functional
components because they´re easier to

8
00:00:27,969 --> 00:00:29,680
write, read, and understand.

9
00:00:29,680 --> 00:00:33,417
They just take in props and return JSS.

10
00:00:33,417 --> 00:00:37,319
But sometimes we need to do
more with a component like

11
00:00:37,319 --> 00:00:41,536
Class components offer a more
powerful way to build components.

12
00:00:41,536 --> 00:00:45,473
Because they´re the only type of
components that let you use state.

13
00:00:45,473 --> 00:00:47,886
So before we can start
using state in our app,

14
00:00:47,886 --> 00:00:51,510
we'll need to convert some of
our components to classes.

15
00:00:51,510 --> 00:00:56,450
For example, the counter will display
data that changes over time, a score.

16
00:00:56,450 --> 00:00:59,928
Users will interact with the counter
by clicking the plus and

17
00:00:59,928 --> 00:01:02,872
minus buttons to increase and
decrease the score.

18
00:01:02,872 --> 00:01:07,665
So let's start by converting
the counter function to a class using

19
00:01:07,665 --> 00:01:09,899
the ES2015 class syntax.

20
00:01:09,899 --> 00:01:13,371
If you're not familiar with classes,
be sure to have a look at the Treehouse

21
00:01:13,371 --> 00:01:16,860
videos and resources I've posted in
the teacher's notes with this video.

22
00:01:16,860 --> 00:01:21,600
First, I'll use the class keyword

23
00:01:21,600 --> 00:01:26,498
to create a class with the same name,

24
00:01:26,498 --> 00:01:32,194
counter that extends React.Component.

25
00:01:33,207 --> 00:01:38,470
In JavaScript classes, the extends
keyword is used to create a subclass,

26
00:01:38,470 --> 00:01:40,484
or a child of another class.

27
00:01:40,484 --> 00:01:45,347
In this case, we're extending from
React.Component which is part of

28
00:01:45,347 --> 00:01:48,625
React's API for
component class definition.

29
00:01:48,625 --> 00:01:56,810
The only method you need to define in
a class component is called render.

30
00:01:56,810 --> 00:02:05,317
Next, I'll move the return statement
into the render method and that's it.

31
00:02:05,317 --> 00:02:10,143
You use a class component just like
a functional component by including

32
00:02:10,143 --> 00:02:13,127
its JSX tag wherever
you want to display it.

33
00:02:13,127 --> 00:02:16,807
So there's nothing we need to
change inside the player component.

34
00:02:16,807 --> 00:02:21,996
However, there is one important change
we need to make in the JSX expression.

35
00:02:21,996 --> 00:02:27,455
Instead of accessing props with
pops.propname, for example,

36
00:02:27,455 --> 00:02:32,950
props.score, classes need to
access props with this.props.

37
00:02:32,950 --> 00:02:37,150
So make sure that you change
it to this.props.score.

38
00:02:37,150 --> 00:02:38,258
In class components,

39
00:02:38,258 --> 00:02:42,350
props are not accessed through arguments
like they are in functional components.

40
00:02:42,350 --> 00:02:46,085
Props are a property of
the component itself.

41
00:02:46,085 --> 00:02:50,814
So this refers to the component instance.

42
00:02:50,814 --> 00:02:56,002
So what we have now is equivalent to our
previous stateless functional component.

43
00:02:56,002 --> 00:02:58,403
We're not using any new functionality.

44
00:02:58,403 --> 00:03:03,490
And as you can see, the counter still
looks and behave in the same way.

45
00:03:03,490 --> 00:03:08,290
In fact, we could have written each of
our components as classes from the start.

46
00:03:08,290 --> 00:03:11,150
So when do you use a class
versus a function?

47
00:03:11,150 --> 00:03:15,810
Well, if a component is only
receiving input through props and

48
00:03:15,810 --> 00:03:20,840
rendering UI, it's best to use a function
or a stateless functional component.

49
00:03:20,840 --> 00:03:24,780
Functions are a little bit easier
to write, read and understand, and

50
00:03:24,780 --> 00:03:29,350
you can think of a stateless functional
component as just the render method

51
00:03:29,350 --> 00:03:33,030
from a class component with
props passed in as an argument.

52
00:03:33,030 --> 00:03:37,430
Now when you want to add state,
that's when you use a class component.

53
00:03:37,430 --> 00:03:41,020
However, you can also create
stateless components as classes,

54
00:03:41,020 --> 00:03:43,110
there's really nothing
wrong with that approach.

55
00:03:43,110 --> 00:03:47,751
One benefit of that approach is that if
you ever need to convert the component

56
00:03:47,751 --> 00:03:52,335
from stateless to stateful, you'll
already have a class defined for it.

57
00:03:52,335 --> 00:03:56,885
All right, now that you've learned how
to define and use class components,

58
00:03:56,885 --> 00:04:00,596
in the next video,
we'll add state to our counter component.