How to Create a Counter App With React

Introduction

React, a JavaScript library is popular among developers worldwide. It allows you to compose complex, and interactive user interfaces(UIs) from reusable code blocks called “components”.

This article is beginner-friendly. It offers detailed step-by-step procedures on how to create a basic counter app with the React.js library.

What you will learn

At the end of this article, readers will be able to build a counter app using React.js.

Getting Started

• First, you install Nodejs.

• Install and run your React app, on your terminal with the command below.

npx create-react-app counter-app

NPX is a Node Package Manager. It manages node packages for your application. The folder will be named counter-app, in which the React.js app will be installed. The folder name can be changed.

• Change the directory on your terminal line to the counter app.

    cd counter-app
  

• Run the command below on your terminal line.

    npm run start
  

After running the command on your terminal, it will set up a webpage on your local browser on port 3000.

Create a Functional Component

In this article, you will create a functional component and name it App. It will be structured as

import { React } from "react";
const App = () => {
return (
<></>
);
};
export default App;

You will need three buttons on your counter app in the App component. An increment button(+), a Decrement button(-), and a reset button. You will also use a div tag to display the output.

import { React } from "react";
const App = () => {
return (
<>
<div className="container">
<h2 className="header"> My Counter App </h2>
<div className="counter">
You've liked this article {} times.
</div>
<div className="btn-wrapper">
<button className="btn">+</button>
<button className="btn">-</button>
</div>
<button className="reset">Reset</button>
</div>
</>
);
};
export default App;

Getting started.

Introduction of the useState Hook

For a counter to be functional, a React Hook is needed, to update the state of the current value of the counter. We introduce a React Hook called useState.

What is useState Hook?

A hook is a special React function that lets you hook into React features. A useState hook is a unique React hook that lets you track the state in a component.

How to Use the useState Hook

To use the useState hook, you import the useState hook from React.

import {React, useState} from "react";

Introduce the useState Hook

Now, use the useState hook to declare the state count, and a function setCount to set the count value.

const [counter, setCounter] = useState(0);

The value of the counter is initially set to 0, while the setCounter function will be used to update the value of the counter. Note that counter and setCounter are variable names and can be changed.

Every time the user clicks on the increment, decrement, or reset button, the value or state of the value will change. The value will be displayed in a div tag. There will be three functions used to control the value.

Functions

Here, we will write out the functions, enabling us to carry out increment, decrement, and reset actions.

const handleIncrement = (e) => {
  e.preventDefault();
  setCounter(count => count + 1);
  };
     //increases counter by 1.


  const handleDecrement = (e) => {
    e.preventDefault();
    setCounter(count => count - 1);
  };
    //decreases counter by 1.

  const handleReset = () =>{
    setCounter(0)
  };
    //resets counter to 0.

The function handleIncrement(), increases the value of the counter by one. It does that with the setCounter function, updating the value of the state.

The function handleDecrement(), decreases the value of the counter by one. It also uses the setCounter function, to update the value of the state.

The function handleReset(), sets the value of the counter to 0.

Now, you call the functions using the onClick() event handler, to listen for a click event on the button.

import { React, useState } from "react";

const App = () => {

const [counter, setCounter] = useState(0);

const handleIncrement = (e) => {
  e.preventDefault();
  setCounter(count => count + 1);
  };
     //increases counter by 1.

 const handleDecrement = (e) => {
    e.preventDefault();
    setCounter(count => count - 1);
  };

    //decreases counter by 1.
const handleReset = () =>{
    setCounter(0)
  };
  //resets counter to 0.

return (
<>
<div className="container">
<h2 className="header"> My Counter App </h2>
<div className="counter">
You've liked this article <span>{counter}</span> times.
</div>
<div className="btn-wrapper">
<button className="btn" onClick={handleIncrement}>+</button>
<button className="btn" onClick={handleDecrement}>-</button>
</div>
<button className="reset" onClick={handleReset}>Reset</button>
</div>
</>
);
};
export default App;

Now, the onClick event handler listens for the click action and runs the associated function.

Great, you have successfully built your Counter App. On your browser window, it should look like this.

Styling Counter App

The counter app is now functional, but it is not presentable. We can create a CSS file and style the Counter App for great aesthetics.

First, we create a CSS file named styles and import it to the App.js component.

import "./styles.css";

This imports the CSS file into the App.js component. Next, style the Counter App.

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
text-align: center;
row-gap: 20px;
margin: 30px auto;
}
.header {
color: rgb(16, 0, 54);
font-size: 80px;
font-family: cursive;
}
.counter {
font-size: 40px;
color: rgb(116, 7, 7);
}
span {
color: rgb(16, 0, 54);
font-family: cursive;
font-size: 55px;
}
btn-wrapper {
display: flex;
justify-content: center;
flex-direction: row;
column-gap: 20px;
}
.btn {
font-size: 20px;
padding: 20px 30px;
background-color: transparent;
color: rgb(16, 0, 54);
border: 1px solid rgb(16, 0, 54);
cursor: pointer;
transition: 0.9s ease-in-out;
border-radius: 20%;
margin: 10px;
}
.btn:hover {
background-color: rgb(16, 0, 54);
color: rgb(255, 255, 255);
border: 1px solid rgb(16, 0, 54);
}
.reset {
width: 110px;
font-size: 18px;
font-weight: 600;
padding: 20px 30px;
background-color: transparent;
color: rgb(16, 0, 54);
border: 1px solid rgb(16, 0, 54);
cursor: pointer;
transition: 0.9s ease-in-out;
border-radius: 10%;
}
.reset:hover {
background-color: rgb(16, 0, 54);
color: rgb(255, 255, 255);
border: 1px solid rgb(16, 0, 54);
}

Great! The counter app has been styled and is now presentable. It should look like this.

React Counter App after styling

CodeSandbox

You can go use the CodeSandbox link to view the live app.

Conclusion

You now have a working idea of how the counter works. Have you ever wondered, how likes on social media platforms work, with the click of a button? Now you have an idea. Remember that with consistent practice, the odds are forever in your favour. Happy coding!