Okay, so in this video, we're going to build the next set of components for

our app, the stats and counter components.

Both are pure or stateless components, so they will be much easier and

faster to implement.

Let's start by adding a file called Stats.js to our components folder.

In Stats.js, we'll add import React,

{ PropTypes } from 'react';.

You'll notice that this time we're not importing component here.

This is because we're not going to be extending a class and

we'll instead be defining this component as a pure function.

So if we open up the file Scoreboard.js and

take a look at the stats implementation here about line 81.

You'll notice that it's already defined as a function.

In fact, if we copy the entire stats implementation

including its prop types and paste it into our Stats.js file.

There are only a couple of modifications we'll need to make.

First, we'll update the function

syntax to const Stats = props => {.

And at the end of the file, we need to make sure we export

our stats function with export default Stats;.

So that's it for the stats component.

So let's do the same thing for the counter component.

Once again, I'll start by adding a new file inside the components folder.

This time, I'll name the file Counter.js.

Inside the new file, I'll add,

import React, { PropTypes } from 'react';.

Next, just like we did with the stats component,

we're going to copy the counter implementation including the prop

types from Scoreboard.js, paste it into the Counter.js file.

And we'll change the function syntax to const Counter = props => {.

And then let's export our counter, just like we did with stats,

at the bottom of the file with export default Counter;.

And that's it.

But let's go back and clean up our Scoreboard.js file.

We're going to remove the stats and counter implementations from this file.

Once again, if you run the application now, it won't work because the scoreboard

component doesn't know how to resolve the stats or counter components.

So let's be sure to import them just like we

did earlier with the stopwatch component.

At the top of Scoreboard.js, we'll first import Counter.

Then we'll import the stats component.

So now, we should be able to fire up the dev server and

our application should work, just like it did before, but with our counter and

stats component implemented as their own separate modules.

So, in the next video, we'll implement the last component that doesn't have any

component dependencies, the Add Player form component.