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 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>
[MUSIC]
0:00
Now we're going to build a stopwatch
into our scoreboard app.
0:04
It will be a stateful component
that counts seconds, and
0:08
allows users to start,
stop, and reset the time.
0:11
Which could be useful in games for
limiting a player's turn length.
0:15
We'll create a button to stop and
start the timer.
0:18
If the time is stopped and
0:21
started again, it will continue
counting from where it left off.
0:23
And hitting the reset button
will return the timer to 0.
0:27
We'll start by building
the stopwatch component and
0:31
its elements, then we'll use State
to make the stopwatch timer run, and
0:35
write functions to let users start,
stop, and reset the stopwatch.
0:39
Let's get coding.
0:43
Start by creating a new file in
the Components folder named Stopwatch.js.
0:44
As we usually do first,
0:50
let's import React at the top of
the file with import React from 'react'.
0:52
Our stopwatch will require
three pieces of state.
0:58
A running state,
an elapsed time state, and
1:01
a previous time state to let us
calculate how much time has passed.
1:04
So we have to determine if this should be
application state or components state.
1:08
A case could be made for either,
but in our app we have no need for
1:12
the stopwatch state outside
of the stopwatch component.
1:16
It's more of a utility than
a core piece of the application.
1:19
So in that case, we'll consider
the state to be component state,
1:22
which means our stopwatch
will be a stateful component.
1:25
So let's also import
Component from 'react' and
1:28
define our class with class
Stopwatch extends Component.
1:32
Inside the class,
we'll add the render method, and
1:40
inside that the return keyword,
followed by a set of parentheses.
1:44
And as always, let's export the Component
with export default, Stopwatch.
1:48
Inside the return statement, we'll build
1:54
the Stopwatch using a div with
the class name Stopwatch,
1:58
then add a Stopwatch heading
inside the div with an h2.
2:03
Next we'll display our stopwatch time in
2:11
a span with the class stopwatch-time, and
2:15
at a placeholder value for
now, let's say zero.
2:20
Finally, let's create
the stopwatch buttons.
2:26
I'll write a set of opening and
closing button tags and
2:29
inside them the text Start.
2:33
Right below I'll create
a reset button with a set of
2:35
button tags and the text Reset.
2:40
In our stopwatch when
the timer is running,
2:43
the start button will be
replaced by a stop button.
2:46
We're going to build that
feature in the next video.
2:49
All right, now that the structure
of the stopwatch is complete.
2:51
Let's head over to the file Header.js and
import the Stopwatch
2:54
component at the top of the file with
import stopwatch from ./Stopwatch.
3:00
And will display the stopwatch
inside the header just
3:07
below the title using
the Stopwatch.jsx tag.
3:11
All right, we've built the stopwatch UI.
3:15
So in the next video, we will begin
implementing the stop watch logic.
3:17
Now our stop watch component
presents a unique challenge.
3:22
When the stopwatch is running,
it will need to count seconds and
3:25
update the time display each second.
3:29
The only data that changes
in React is state, so
3:32
the state of the stopwatch will
need to be updating constantly and
3:34
will need to keep track of
multiple pieces of state.
3:38
You need to sign up for Treehouse in order to download course files.
Sign up