Building the Stats and Counter Pure Component

Okay, so in this video, we're going to build the next set of components for 0:00 our app, the stats and counter components. 0:04 Both are pure or stateless components, so they will be much easier and 0:06 faster to implement. 0:10 Let's start by adding a file called Stats.js to our components folder. 0:12 In Stats.js, we'll add import React, 0:18 { PropTypes } from 'react';. 0:22 You'll notice that this time we're not importing component here. 0:26 This is because we're not going to be extending a class and 0:31 we'll instead be defining this component as a pure function. 0:33 So if we open up the file Scoreboard.js and 0:36 take a look at the stats implementation here about line 81. 0:39 You'll notice that it's already defined as a function. 0:42 In fact, if we copy the entire stats implementation 0:46 including its prop types and paste it into our Stats.js file. 0:50 There are only a couple of modifications we'll need to make. 0:55 First, we'll update the function 0:58 syntax to const Stats = props => {. 1:02 And at the end of the file, we need to make sure we export 1:07 our stats function with export default Stats;. 1:13 So that's it for the stats component. 1:19 So let's do the same thing for the counter component. 1:20 Once again, I'll start by adding a new file inside the components folder. 1:23 This time, I'll name the file Counter.js. 1:28 Inside the new file, I'll add, 1:32 import React, { PropTypes } from 'react';. 1:35 Next, just like we did with the stats component, 1:43 we're going to copy the counter implementation including the prop 1:47 types from Scoreboard.js, paste it into the Counter.js file. 1:52 And we'll change the function syntax to const Counter = props => {. 1:58 And then let's export our counter, just like we did with stats, 2:06 at the bottom of the file with export default Counter;. 2:09 And that's it. 2:15 But let's go back and clean up our Scoreboard.js file. 2:16 We're going to remove the stats and counter implementations from this file. 2:20 Once again, if you run the application now, it won't work because the scoreboard 2:34 component doesn't know how to resolve the stats or counter components. 2:38 So let's be sure to import them just like we 2:42 did earlier with the stopwatch component. 2:44 At the top of Scoreboard.js, we'll first import Counter. 2:47 Then we'll import the stats component. 3:00 So now, we should be able to fire up the dev server and 3:07 our application should work, just like it did before, but with our counter and 3:10 stats component implemented as their own separate modules. 3:14 So, in the next video, we'll implement the last component that doesn't have any 3:17 component dependencies, the Add Player form component. 3:20