Building a Simple Timer in React

Today we’ll be building a simple countdown timer in React with the following functionality:

• Set start time
• Alert when time runs out
• Pause timer

1. Create React App

Get started by using the create react app package through npm to set up your React application. Type the following into the terminal:

npx create-react-app simple-timer

For more info on create-react-app go here

2. Set up App.js

If you’re familiar with React you’ll know that by default the App.js component acts as the parent component for our application. It comes with a bunch of standard code when you use create-react-app, but for now let’s delete all of the unnecessary code. We also know we’ll need to use state at some point in our application to store and change the time remaining, so let’s also make App.js a class component. At this point it should look something like the following:

import logo from './logo.svg';
import './App.css';
class App extends React.Component() {
  render (){
    return (
      <div className="App">
        Simple Timer App
      </div>
    );
  }
}
export default App;

Now if you type ‘npm start’ into the terminal you’ll see something that looks like this pop up in your browser:

Plain and boring for now but our App is already working!

3. Create our Components

You don’t have to know every single component you’ll need before beginning to build your application, but it helps to have a general idea of the workflow. A common technique is to split your components into presentational and container components. I know for our Timer we will definitely need the following components:

1. Timer (container )
2. Start Button
3. Stop Button
4. Pause Button
5. Number Button (0–9)

4. Timer.js

import React from 'react'
const  Timer = (props) => {
  return(
    <div>
    {props.time}
    </div>
  )
}
export default Timer

5. Number.js

import React from 'react'
 const  Number = (props) => {
    return(
     <button id = {props.num}>
        {props.num} 
     </button>
    )
  }
export default Number

6. Button.js

import React from 'react'
const  Button = (props) => {
  return(
    <button id = {props.action}>
      {props.action}
    </button>
  )
}
export default Button

7. Refactor Timer.js to a class component

React is a process of constantly refactoring your code, and unfortunately I realized after already starting that our Timer should hold state as well. Thus I refactored Timer.js to a class component like so:

import React from 'react'
class  Timer extends React.Component {
  state = {
    time: 0
  }
  render (){
    return(
     <div>
        {this.props.stringTime} Seconds Remaining
      </div>
    )
  }
}
export default Timer

8. Add setTime Function to App.js and pass as Props

class App extends React.Component {
state = {
  time: 0,
  stringTime: ""
}
createNumber = () => {
  return [0,1,2,3,4,5,6,7,8,9].map(ele => {
    return <Number num={ele} setTime={this.setTime}/>
  })
}
setTime = (number) => {
  this.setState({
    stringTime: this.state.stringTime + number
  })
}
render(){
  return (
    <div className="App">
     <h1> Simple Timer App </h1>
     <Timer stringTime = {this.state.stringTime}/>
    <div>
     {this.createNumber()}
    </div>
    <Button action = "Start"/>
    <Button action = "Pause"/>
    <Button action = "Clear"/>
  </div>
);
}
}
export default App;

Now the app should look like this:

A GitHub repo containing the complete code can be found here