This course will be retired on April 12, 2021.
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
The next component we are going to migrate is AddPlayerForm, which is another logical component, similar to our Stopwatch component.
Further Reading
So far we've migrated three of the four
components that have no component
0:00
dependencies themselves out
of the scoreboard.js file and
0:04
into their own respective modules.
0:07
The next component we're going
to migrate is add player form,
0:09
which is another logical component
similar to our stopwatch component.
0:12
So let's get started.
0:15
By now you should be getting
familiar with this process.
0:17
Let's add a new file called
AddPlayerForm.js to our components folder.
0:20
In the new file add the following import.
0:26
Next, we need to define our AddPlayer form
as a class that extends component and
0:36
make it our default export.
0:41
With export default class
0:43
AddPlayerForm extends Component.
0:47
And we're gonna follow
a similar approach for
0:53
what we did with the stopwatch component
and walk through the AddPlayerForm
0:57
implementation in the scoreboard.js
file step by step.
1:01
So first if we take a look
at the scoreboard.js file,
1:05
you'll notice that AddPlayerForm has an
additional PropTypes property being set.
1:08
Remember, in React prop types document
exactly which properties components take.
1:13
Whether they're required or optional,
and what types they should be.
1:18
So we'll copy these prop types
over to addPlayerForm.js.
1:21
And the way we're going to handle this
in our add a player form class is by
1:27
including the static keyword before
before the prop types definition, and
1:31
be sure to replace the comma
here with a semi-colon.
1:36
Now if the static keyword is
a little confusing don't be alarmed.
1:39
This is a special way of defining
prop types for our class, and
1:42
it's known as a property initializer.
1:45
So be sure to check out
the teacher's notes for
1:47
more information on the static keyword and
property initializers in general.
1:49
Next we need to define our state for
1:53
name similar to how we did
in the stopwatch component.
1:55
So write below the prop types.
1:59
We'll say state =, inside we'll
define name as an empty string.
2:01
And this time we don't have any React
lifecycle events to worry about.
2:05
Over in scoreboard.js we'll see that
we have just a couple of component
2:13
event handlers like onNameChange,
and onSubmit.
2:17
So let's go ahead and copy these and
add them to our add player form
2:21
component right after our prop types and
state definitions.
2:26
And we can update the function
syntax to an error function.
2:33
Finally the render method for
AddPlayerForm can be copied from
2:46
scoreboard.js and pasted at the bottom
of our AddPlayerForm class definition.
2:49
We'll update the render method syntax and
that's it.
2:57
We've now migrated all of our components
that have no component dependencies of
3:01
their own out of scoreboard.js.
3:05
Let's make sure to go back and
3:08
remove the addPlayerForm implementation
defined in the scoreboard.js file.
3:09
And we'll also add an import to our
AddPlayerForm component at the top of
3:15
the file.
3:19
Running your app, you'll see that
it behaves exactly the same but
3:29
with four components defined
in their own modules.
3:33
We're well on our way to migrating our
components into their own modules, so
3:39
the next step is to migrate the player and
header components into their own modules.
3:43
Both are pure components that
depend on other components
3:48
You need to sign up for Treehouse in order to download course files.
Sign up