1
00:00:00,000 --> 00:00:04,880
In this video, we're going to create
a stateful component by first defining

2
00:00:04,880 --> 00:00:07,670
an initial state inside the counter class.

3
00:00:07,670 --> 00:00:11,105
You'll learn that in React
state changes over time,

4
00:00:11,105 --> 00:00:13,556
usually in response to users action.

5
00:00:13,556 --> 00:00:18,170
So what part of the counter will
change when users interact with it?

6
00:00:18,170 --> 00:00:22,170
The score will increase or decrease
depending on which button they click.

7
00:00:22,170 --> 00:00:24,020
Score is our state.

8
00:00:24,020 --> 00:00:28,520
So now let's go into our Counter
component and start creating state.

9
00:00:28,520 --> 00:00:31,270
Since state is an object, you create and

10
00:00:31,270 --> 00:00:35,410
initialize state within a class
inside the constructor method.

11
00:00:35,410 --> 00:00:38,200
So first, I'll set up a constructor.

12
00:00:38,200 --> 00:00:42,670
Again, if you're not familiar with classes
and constructor methods, be sure to review

13
00:00:42,670 --> 00:00:45,420
the Tree House videos posted in
the teacher's notes with this video.

14
00:00:46,600 --> 00:00:49,970
Inside the constructor, I'll call super in

15
00:00:49,970 --> 00:00:55,350
order to call the constructor of
the component class that we're extending.

16
00:00:55,350 --> 00:00:58,860
And this needs to be done before
we can use the this keyword

17
00:00:58,860 --> 00:01:00,420
within the constructor.

18
00:01:00,420 --> 00:01:03,640
Then to initialize our component state,

19
00:01:03,640 --> 00:01:07,700
write this.state and
set it equal to an object.

20
00:01:09,321 --> 00:01:14,330
You must name this object state
otherwise this will not work.

21
00:01:14,330 --> 00:01:19,324
Since state is data that changes over
time, we first need to set an initial

22
00:01:19,324 --> 00:01:23,207
state or the state of
the component when it first bounce.

23
00:01:23,207 --> 00:01:28,420
The state in our counter is going to
be the score we want to display for

24
00:01:28,420 --> 00:01:29,526
each player.

25
00:01:29,526 --> 00:01:33,070
I'll call the state score and
set it to 0 by default.

26
00:01:33,070 --> 00:01:37,450
Now that we've initialized state,
over end React dev tools,

27
00:01:37,450 --> 00:01:41,270
select a counter component
inside a player component.

28
00:01:41,270 --> 00:01:45,950
And you should see a new property
called State up here in the right pane.

29
00:01:45,950 --> 00:01:49,970
We see the course state and
it's value is 0.

30
00:01:49,970 --> 00:01:54,862
Next, let's remove the score
prop being passed to

31
00:01:54,862 --> 00:01:58,397
the counter and player components.

32
00:01:58,397 --> 00:02:01,520
Because Counter is now
maintaining its own score state,

33
00:02:01,520 --> 00:02:05,630
it doesn't need the score information
from its parent player component.

34
00:02:06,730 --> 00:02:11,010
You access state in a similar
way to how you access props.

35
00:02:11,010 --> 00:02:14,170
In the Counter components render method,

36
00:02:14,170 --> 00:02:18,481
replace this.props.score
with this.state.score.

37
00:02:18,481 --> 00:02:22,276
You can think of the render
method in a class component

38
00:02:22,276 --> 00:02:26,508
as being a function of not just props,
but props and state.

39
00:02:26,508 --> 00:02:30,343
In other words,
if either props or state changes,

40
00:02:30,343 --> 00:02:36,070
React executes the render method to
update what gets displayed to the user.

41
00:02:36,070 --> 00:02:38,326
Now once we refresh our app,

42
00:02:38,326 --> 00:02:43,687
we see that all the players scores
are set to the initial state of 0.

43
00:02:43,687 --> 00:02:48,206
We can even change the score
state of a counter component

44
00:02:48,206 --> 00:02:53,411
instance in React Dev Tools and
see the score change on the page.

45
00:02:53,411 --> 00:02:57,936
Great, so you've just built your
first stateful react component.

46
00:02:57,936 --> 00:02:59,314
Before we move on,

47
00:02:59,314 --> 00:03:05,270
I want to teach you a second way you can
initialize state inside a React component.

48
00:03:05,270 --> 00:03:06,131
A shortcut,

49
00:03:06,131 --> 00:03:11,520
you'll often see state initialized
inside a class constructor like this.

50
00:03:11,520 --> 00:03:16,060
But you can also initialize state
directly inside the class definition,

51
00:03:16,060 --> 00:03:18,090
using a class property.

52
00:03:18,090 --> 00:03:22,516
You omit the constructor method and
super all together, and

53
00:03:22,516 --> 00:03:26,100
reference the state property directly.

54
00:03:26,100 --> 00:03:30,150
You don't need to write it as this.state,
just state, and

55
00:03:30,150 --> 00:03:31,430
set it equal to the object.

56
00:03:35,672 --> 00:03:39,074
This class properties syntax is a feature
of JavaScript that's currently not

57
00:03:39,074 --> 00:03:40,320
supported in all browsers.

58
00:03:40,320 --> 00:03:44,148
Since we're using the Babel
transpiler in our app,

59
00:03:44,148 --> 00:03:47,895
we don't have to worry
about browser's support.

60
00:03:47,895 --> 00:03:53,090
Babel will transpile our code and add
a constructor for us behind the scenes.

61
00:03:53,090 --> 00:03:55,150
The way you initialize state is up to you.

62
00:03:55,150 --> 00:04:00,390
I prefer the class property syntax because
it allows for a cleaner class component

63
00:04:00,390 --> 00:04:03,890
and I don't have to remember to
setup a constructor and call super.

64
00:04:03,890 --> 00:04:06,550
So that's what I'm gonna
be using moving forward.

65
00:04:06,550 --> 00:04:10,320
All right,
we've moved our score into a state object

66
00:04:10,320 --> 00:04:12,400
instead of getting the score from props.

67
00:04:12,400 --> 00:04:15,210
But so far,
it doesn't seem to have a benefit.

68
00:04:15,210 --> 00:04:18,860
Up next, you'll learn how to modify
state from inside a component,

69
00:04:18,860 --> 00:04:20,600
something you're not
able to do with props.