Build a React Counter App: Step-by-Step Implementation Guide

In this module we actually build the Counter App. We set up the environment, create the project structure, and implement the code file by file.

Set up the environment

Initialize the React app. 

Open a terminal and run:

npx create-react-app counter-app

This uses Create React App to generate a new project folder called counter-app. (If you don’t have it, install the latest Node.js which includes npx.)

Start the development server. 

Change into the new directory and start the app:

cd counter-app

npm start

This runs the app in development mode. A browser window will open at http://localhost:3000 showing the default React welcome page. As the Create React App docs show, the commands above (npx create-react-app my-app, cd my-app, npm start) are the quick-start steps for a new project. You can now edit code, and the app will auto-reload.

Create Application Structure (Directory Structure)

After running Create React App, you’ll see a project structure like this (from ls or a file explorer):

counter-app/

├── README.md

├── node_modules/

├── package.json

├── .gitignore

├── public/

│   ├── favicon.ico

│   ├── index.html       ← Single HTML file with a <div id="root">

│   └── manifest.json

└── src/

├── App.css

├── App.js           ← Our main React component

├── index.css

├── index.js         ← Entry point that renders App

└── ...

• The public/index.html file contains the root <div id="root"></div>. Our React app will be injected into that div.
• The src folder is where our React code lives. The key files are:
  • index.js – the JavaScript entry point that renders the root React component.
  • App.js – a sample component we will edit (this is where we’ll put our Counter code).
  • Other files like App.css for styling, which we can modify or replace.

This structure matches the default output shown in the CRA documentation.

Steps Needed to Build the Project

Here we implement the Counter App step by step:

Edit src/index.js: 

We will use the root ReactDOM renderer to display our App component. By default, index.js already looks like:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

This code finds <div id="root"> in the HTML and renders our App component into it.

Edit src/App.js: 

This is where the main logic goes. Replace or modify the existing content with our Counter logic. First, import React and the state hook at the top:

import React, { useState } from 'react';
import './App.css'; // for any styles we add

Then define the App component:

function App() {
  // Initialize state variable "count" to 0
  const [count, setCount] = useState(0);

Next, define the functions that will change count when buttons are clicked:

const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
const reset = () => setCount(0);

Finally, return the JSX to render the UI:

return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Counter App</h1>
      <h2>{count}</h2>  {/* display the current count */}
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}
export default App;

Here <h2>{count}</h2> displays the state value in the UI. Each button has an onClick that invokes one of our functions. The GeeksforGeeks example similarly placed {counter} inside a div to show the count.

Edit src/App.css (optional): 

You can add simple CSS to style the page. For example:

/* App.css */

/* Reset some default margin/padding */
body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Main container */
.App {
  background: #ffffffcc;
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 40px 50px;
  text-align: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Title */
h1 {
  margin-bottom: 20px;
  color: #333;
  font-size: 2rem;
  font-weight: 600;
}

/* Counter display */
h2 {
  font-size: 3rem;
  margin: 20px 0;
  color: #222;
  background: #f1f3f6;
  padding: 15px 40px;
  border-radius: 10px;
  display: inline-block;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
}

/* Buttons */
button {
  margin: 10px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

button:hover {
  transform: translateY(-2px);
}

/* Different button colors */
button:nth-child(1) {  /* Increment */
  background: #4caf50;
  color: #fff;
}
button:nth-child(1):hover {
  background: #43a047;
}

button:nth-child(2) {  /* Decrement */
  background: #f44336;
  color: #fff;
}
button:nth-child(2):hover {
  background: #e53935;
}

button:nth-child(3) {  /* Reset */
  background: #2196f3;
  color: #fff;
}
button:nth-child(3):hover {
  background: #1e88e5;
}

Now, save the files. The development server (from npm start) will hot-reload and show the updated Counter App. You should see the title "Counter App", the number (starting at 0), and the three buttons. Clicking Increment increases the number, Decrement decreases it, and Reset sets it to 0, all in real time.