The next component we are going to migrate is AddPlayerForm, which is another logical component, similar to our Stopwatch component.
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