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
We're going to build a stopwatch into our scoreboard app. It will be a stateful component that counts seconds and allows users to start, stop and reset the time.
Stopwatch snippet
<div className="stopwatch">
<h2>Stopwatch</h2>
<span className="stopwatch-time">0</span>
<button>Start</button>
<button>Reset</button>
</div>
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Let's create the Stopwatch component.
0:00
We'll start by creating a new file in
the components folder, named Stopwatch.js.
0:02
As we usually do,
first import React at the top of the file.
0:10
Our stopwatch will require
two pieces of state,
0:17
a running state and an elapsed time state.
0:21
So we have to determine if there should be
an application state or a component state.
0:24
A case could be made for either,
but in our app we have no need for
0:30
the stopwatch state outside
of the Stopwatch component.
0:35
It's more of a utility than
a core piece of application.
0:39
In that case, we'll consider
the state to be a component state,
0:43
which means our stopwatch
will be a stateful component.
0:48
So let's also import useState from
React and define our function.
0:53
By writing const Stopwatch = () and
an => function,
0:58
and provide a blank return statement.
1:05
As always, let's export the component
with export default Stopwatch.
1:09
Inside the return statement,
we'll build the Stopwatch
1:19
using a div with a className 'stopwatch'.
1:24
Then add a Stopwatch heading
inside the div with an h2 tag.
1:28
Next, we'll display our stopwatch
time in a span tag with the class
1:35
'stopwatch-time', and
add a placeholder value, for now.
1:41
Finally, let's create
the stopwatch buttons.
1:48
I'll write a set of opening and
closing button tags, and
1:51
inside them the text, Start.
1:56
Right below, I'll create a Reset button.
1:59
In our stopwatch,
when the timer is running,
2:03
the Start button will be
replaced by a Stop button.
2:07
We're going to build that
feature in the next video.
2:11
All right, now that the structure
of the stopwatch is complete,
2:14
let's head over to the file,
Header.js, and
2:18
import the Stopwatch component
at the top of the file.
2:21
We'll display the stopwatch
inside the header just below
2:30
the title using the Stopwatch jsx tag.
2:34
Lastly, let's not forget
to save our changes.
2:39
We've built the Stopwatch UI.
2:43
So in the next video, we'll begin
implementing the Stopwatch logic.
2:45
Our Stopwatch component
presents a unique challenge.
2:50
When the Stopwatch is running,
it will need to count seconds and
2:54
update the time displayed each second.
2:58
The only data that changes
in React is state.
3:01
So the state of Stopwatch will need
to be updating constantly, and
3:05
we'll need to keep track of
multiple pieces of state.
3:09
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up