This course will be retired on March 29, 2021.
It's time to work our way up the component tree and move onto the next set of components. In this video, we'll move the Player and Header pure components out of Scoreboard.js and into their own respective files.
So we finished migrating some of our components, 0:00 specifically those that have no component dependencies. 0:03 So now it's time to work our way up the component tree and 0:05 move on to the next set of components, the player and header components. 0:08 In this video, we'll move the player and 0:11 header components out of Scoreboard.js and into their own respective files. 0:13 Now player and header are both pure components, so 0:17 you'll find that they're easy to implement. 0:21 And the biggest difference we'll see with these components is that they depend on 0:23 other components we've all ready written, so we'll need to import them accordingly. 0:26 Let's start by adding a file called Player.js to our components folder. 0:30 In Player.js, we'll import React and PropTypes from React. 0:37 Now if you remember, each player component renders a counter component, 0:47 as you can see here in Scoreboard.js. 0:51 So we need to add an import to our Player.js file that imports Counter. 0:54 And much like we did earlier with the stats and counter pure components, 1:05 we can copy the player implementation in in Scoreboard.js and 1:10 paste it into our Player.js file under our imports. 1:15 But there are still a couple of changes we'll need to make to get our 1:19 component working. 1:21 First, we'll change the function syntax to const 1:23 Player = props, followed by the arrow token. 1:28 And at the end of the file, we need to make sure we export 1:35 our player function with export default Player. 1:40 That's it for the player component, so let's do the same thing for 1:45 the header component. 1:49 We'll add a new file to the components folder named Header.js. 1:50 And Header.js, we'll import React and PropTypes. 1:57 Now header requires two of the components that we moved into modules. 2:05 The stats component and the stopwatch component. 2:10 So let's import them in Header.js with import Stats from './Stats'. 2:14 And import Stopwatch from './Stopwatch'. 2:22 Next, just like we did with the player component, 2:29 we'll copy the header implementation from the Scoreboard.js file into 2:32 Header.js right after the import statements. 2:37 Then we'll change function header to const Header = props, 2:41 arrow, then export our header function at the bottom of the file with, 2:48 export default Header. 2:54 And that's it. 2:58 But let's go back and clean up our Scoreboard.js file. 2:59 Let's remove the Player and Header implementations first. 3:02 Next, at the top of the file, we'll add imports for Player and Header. 3:10 Since Player and Header now import the Stats, 3:32 counter and Stopwatch components from within their files. 3:35 We can remove the Stopwatch, Counter and Stats imports from Scoreboard.js. 3:39 All right, so now, we should be able to fire up the dev server, and 3:45 our application should work just like it did before. 3:48 But with our Player and Header components implemented as their own separate modules. 3:51 Finally, since we're now explicitly importing PropTypes from React 3:55 in some components, 4:00 instead of accessing PropTypes as a property on React with React.PropTypes. 4:02 You have the option to simply define them as PropTypes. 4:07 So here were saying PropTypes.string, PropTypes.number and so on. 4:12 I prefer the shorter syntax so I'll update the rest of my PropTypes. 4:16 Go ahead and update yours if you'd like. 4:21 And I'll see you in the next video where we'll complete our modularization of our 4:22 Scoreboard app by cleaning up the Scoreboard.js file. 4:26
You need to sign up for Treehouse in order to download course files.Sign up