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

React Components

Well done!

You have completed React Components!

Sign up for Treehouse Back to Library

Designing the Stopwatch

3:13 with Laura Coronel

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 up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    We'll start by creating a new file in the components folder, named Stopwatch.js. 0:00
    As we usually do, first import React at the top of the file. 0:01
    Our stopwatch will require two pieces of state, 0:08
    a running state and an elapsed time state. 0:12
    So we have to determine if there should be an application state or a component state. 0:15
    A case could be made for either, but in our app we have no need for 0:21
    the stopwatch state outside of the Stopwatch component. 0:26

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up