How to create a simple counter Using ReactJS?

Last Updated : 09 Jan, 2025

React counter app is a program that allows users to interact with a numerical counter value. It demonstrates basic state management and user interaction within a user interface.

Prerequisites:

Approach:

Building a simple counter application is a great way to practice your React skills. Now, to create a simple counter app in React:

Create a useState variable named count and setCount() to update the state.
Create buttons named increment and decrement that modify the count state +1 and -1 respectively.
Link the buttons with setCount using event handlers.

We'll be creating a simple application where we have 2 buttons one to increment and one to decrement.

Steps to Create React Application:

Step 1: Create a React application using the following command:

npx create-react-app counter

Step 2: After creating your project folder i.e. counter, move to it using the following command:

cd counter

Project Structure:

Example: This example demonstrate a simple counter app using useState hook, and the count increase and descrease on click.

JavaScript

// Filename - App.js  import React, { useState } from "react";  // Importing app.css is css file to add styling import "./App.css";  const App = () => {     //  Counter is a state initialized to 0     const [counter, setCounter] = useState(0);      // Function is called everytime increment button is clicked     const handleClick1 = () => {         // Counter state is incremented         setCounter(counter + 1);     };      // Function is called everytime decrement button is clicked     const handleClick2 = () => {         // Counter state is decremented         setCounter(counter - 1);     };      return (         <div             style={{                 display: "flex",                 flexDirection: "column",                 alignItems: "center",                 justifyContent: "center",                 fontSize: "300%",                 position: "absolute",                 width: "100%",                 height: "100%",                 top: "-15%",             }}         >             Counter App             <div                 style={{                     fontSize: "120%",                     position: "relative",                     top: "10vh",                 }}             >                 {counter}             </div>             <div className="buttons">                 <button                     style={{                         fontSize: "60%",                         position: "relative",                         top: "20vh",                         marginRight: "5px",                         backgroundColor: "green",                         borderRadius: "8%",                         color: "white",                     }}                     onClick={handleClick1}                 >                     Increment                 </button>                 <button                     style={{                         fontSize: "60%",                         position: "relative",                         top: "20vh",                         marginLeft: "5px",                         backgroundColor: "red",                         borderRadius: "8%",                         color: "white",                     }}                     onClick={handleClick2}                 >                     Decrement                 </button>             </div>         </div>     ); };  export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: This output will be visible on the http://localhost:3000/ on the browser window.