How to create a simple counter Using ReactJS?
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:

Project Structure
Example: This example demonstrate a simple counter app using useState hook, and the count increase and descrease on click.
// 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.
