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.