Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
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