This course will be retired on April 12, 2021.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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 easier and faster to implement.
Further Reading
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
You need to sign up for Treehouse in order to download course files.
Sign up