In this video, we're going to update the Scoreboard container component to be consistent with how we implemented our other components.
In this studio, we're going to update our Scoreboard container component to be 0:00 consistent with how we implemented our other components. 0:04 You should notice that the Scoreboard.js file is looking pretty bare compared to 0:07 what it used to, which is exactly what we want. 0:11 We now have all of our components being imported at the top of our file, but 0:14 there are still a few bits of syntax we should update. 0:18 First, I'll update the React import statement 0:20 to import React component from 'react'. 0:24 Next, let's define the Scoreboard component as 0:28 a class that extends component and make it our default 0:33 export with export default class Scoreboard extends Component. 0:39 And since we're now exporting the component here in our class definition, 0:48 we can remove export default Scoreboard from the bottom of the file. 0:53 Next, let's move our initial state into the Scoreboard class, 1:00 And change const INITIAL_STATE to just state. 1:09 We can remove the getInitialState method. 1:16 Next, we'll go through each method here, 1:20 and define them, using the ES2015 error function syntax. 1:22 So first, we'll update onScoreChange, 1:26 Then onAddPlayer, And finally, onRemovePlayer. 1:32 Next, we'll update the render method syntax by removing 1:44 the function keyword and column, and that's it. 1:48 Now, let's fire up the dev server, and verify that everything looks good and 1:51 behaves just like it did before. 1:55 And it looks like it does, great. 2:00 Well, that wraps up this stage, but let's recap some of the key things you learned. 2:03 First, breaking your components into modules will make 2:07 isolating responsibilities, testing and debugging much easier. 2:10 Plus modules make your application easier to scale, and as you'll soon learn, 2:14 it will make implementing Redux much easier. 2:18 For instance, imagine an application that starts with a handful of components, 2:21 all defined within one file. 2:25 Sure, adding one or two more isn't a big deal, but what happens when an application 2:27 starts to push the 100 component range, a very common scenario in a react-app. 2:31 You now have 100 components written in one large file. 2:36 Now, imagine that you have a team of people working with this file. 2:40 That means everyone is always working with one file, and for those of you familiar 2:43 with source control, that means dealing with a number of much headaches. 2:47 Now, add Redux into the equation, and 2:50 it becomes even more difficult to figure out where or when and how to implement it. 2:53 So modularizing your app makes it easier for you and 2:57 your team to collaborate on an application, and 3:00 to organize your application in a logical way that aligns with your business goals. 3:02 Speaking of Redux, in the next stage, we'll be focusing entirely on 3:07 implementing some key Redux features like actions and reducers, so stay tuned. 3:10
You need to sign up for Treehouse in order to download course files.Sign up