Bummer! You have been redirected as the page you requested could not be found.

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

    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 up

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

      Sign up