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

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

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!

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)
import React from 'react'const  Timer = (props) => {  return(    <div>    {props.time}    </div>  )}export default Timer
import React from 'react' const  Number = (props) => {    return(
<button id = {props.num}>
{props.num}
</button>
)
}
export default Number
import React from 'react'const  Button = (props) => {
return(
<button id = {props.action}>
{props.action}
</button>
)
}
export default Button

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
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

NYC based SWE

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store