1
00:00:00,280 --> 00:00:04,020
So far we've migrated three of the four
components that have no component

2
00:00:04,020 --> 00:00:07,080
dependencies themselves out
of the scoreboard.js file and

3
00:00:07,080 --> 00:00:09,160
into their own respective modules.

4
00:00:09,160 --> 00:00:12,040
The next component we're going
to migrate is add player form,

5
00:00:12,040 --> 00:00:15,370
which is another logical component
similar to our stopwatch component.

6
00:00:15,370 --> 00:00:16,060
So let's get started.

7
00:00:17,270 --> 00:00:20,110
By now you should be getting
familiar with this process.

8
00:00:20,110 --> 00:00:24,573
Let's add a new file called
AddPlayerForm.js to our components folder.

9
00:00:26,913 --> 00:00:29,162
In the new file add the following import.

10
00:00:36,305 --> 00:00:41,416
Next, we need to define our AddPlayer form
as a class that extends component and

11
00:00:41,416 --> 00:00:43,262
make it our default export.

12
00:00:43,262 --> 00:00:47,863
With export default class

13
00:00:47,863 --> 00:00:53,923
AddPlayerForm extends Component.

14
00:00:53,923 --> 00:00:57,680
And we're gonna follow
a similar approach for

15
00:00:57,680 --> 00:01:01,460
what we did with the stopwatch component
and walk through the AddPlayerForm

16
00:01:01,460 --> 00:01:05,390
implementation in the scoreboard.js
file step by step.

17
00:01:05,390 --> 00:01:08,720
So first if we take a look
at the scoreboard.js file,

18
00:01:08,720 --> 00:01:13,535
you'll notice that AddPlayerForm has an
additional PropTypes property being set.

19
00:01:13,535 --> 00:01:18,760
Remember, in React prop types document
exactly which properties components take.

20
00:01:18,760 --> 00:01:21,661
Whether they're required or optional,
and what types they should be.

21
00:01:21,661 --> 00:01:27,596
So we'll copy these prop types
over to addPlayerForm.js.

22
00:01:27,596 --> 00:01:31,832
And the way we're going to handle this
in our add a player form class is by

23
00:01:31,832 --> 00:01:36,353
including the static keyword before
before the prop types definition, and

24
00:01:36,353 --> 00:01:39,570
be sure to replace the comma
here with a semi-colon.

25
00:01:39,570 --> 00:01:42,410
Now if the static keyword is
a little confusing don't be alarmed.

26
00:01:42,410 --> 00:01:45,390
This is a special way of defining
prop types for our class, and

27
00:01:45,390 --> 00:01:47,710
it's known as a property initializer.

28
00:01:47,710 --> 00:01:49,360
So be sure to check out
the teacher's notes for

29
00:01:49,360 --> 00:01:53,340
more information on the static keyword and
property initializers in general.

30
00:01:53,340 --> 00:01:55,970
Next we need to define our state for

31
00:01:55,970 --> 00:01:59,430
name similar to how we did
in the stopwatch component.

32
00:01:59,430 --> 00:02:01,730
So write below the prop types.

33
00:02:01,730 --> 00:02:05,895
We'll say state =, inside we'll
define name as an empty string.

34
00:02:05,895 --> 00:02:13,030
And this time we don't have any React
lifecycle events to worry about.

35
00:02:13,030 --> 00:02:17,666
Over in scoreboard.js we'll see that
we have just a couple of component

36
00:02:17,666 --> 00:02:21,430
event handlers like onNameChange,
and onSubmit.

37
00:02:21,430 --> 00:02:26,341
So let's go ahead and copy these and
add them to our add player form

38
00:02:26,341 --> 00:02:31,002
component right after our prop types and
state definitions.

39
00:02:33,078 --> 00:02:37,562
And we can update the function
syntax to an error function.

40
00:02:46,179 --> 00:02:49,395
Finally the render method for
AddPlayerForm can be copied from

41
00:02:49,395 --> 00:02:53,591
scoreboard.js and pasted at the bottom
of our AddPlayerForm class definition.

42
00:02:57,737 --> 00:03:01,580
We'll update the render method syntax and
that's it.

43
00:03:01,580 --> 00:03:05,660
We've now migrated all of our components
that have no component dependencies of

44
00:03:05,660 --> 00:03:08,650
their own out of scoreboard.js.

45
00:03:08,650 --> 00:03:09,910
Let's make sure to go back and

46
00:03:09,910 --> 00:03:15,400
remove the addPlayerForm implementation
defined in the scoreboard.js file.

47
00:03:15,400 --> 00:03:19,321
And we'll also add an import to our
AddPlayerForm component at the top of

48
00:03:19,321 --> 00:03:19,904
the file.

49
00:03:29,918 --> 00:03:33,582
Running your app, you'll see that
it behaves exactly the same but

50
00:03:33,582 --> 00:03:36,469
with four components defined
in their own modules.

51
00:03:39,930 --> 00:03:43,590
We're well on our way to migrating our
components into their own modules, so

52
00:03:43,590 --> 00:03:48,210
the next step is to migrate the player and
header components into their own modules.

53
00:03:48,210 --> 00:03:50,550
Both are pure components that
depend on other components