How to Create a Counter Project in React With Vite

Creating a counter project in React JS is an excellent way to understand the fundamentals of React, including components, state, and event handling.

This tutorial will guide you through building a simple counter application step by step.

Prerequisites

Before starting, ensure you have the following installed on your system:

1. Node.js: Download and install from Node.js official website.
2. npm or yarn: These come bundled with Node.js for package management.
3. Code Editor: Use a code editor like Visual Studio Code.

Setting Up the Project with Vite

• Open your terminal and run the following command to create a new React app using Vite:

npm create vite@latest counter-app --template react

This command sets up a new React application in a folder named counter-app using Vite.

• Navigate to the project directory:

cd counter-app

• Install dependencies:

npm install

• Start the development server:

npm run dev

• Your terminal will display a local development URL: (e.g., http://localhost:5173/).Open it in your browser to see the default React template.

Project Structure

After setting up the project, your directory structure will look like this:

counter-app/
├── node_modules/      # Installed dependencies
├── public/            # Static assets
├── src/               # Source files
│   ├── App.css        # Styling for the App component
│   ├── App.jsx        # Main App component
│   ├── Counter.css    # Styling for the Counter component
│   ├── Counter.jsx    # Counter component
│   ├── main.jsx       # Entry point for the app
├── .gitignore         # Files and directories to ignore in Git
├── index.html         # HTML template
├── package.json       # Project configuration and dependencies
├── README.md          # Project documentation
├── vite.config.js     # Vite configuration

Building the Counter Component

1. Open the project in your code editor.
2. In the src folder, create a new file named Counter.jsx.
3. Add the following code to define the Counter component:

import { useState } from "react";

function Counter() {
	let [counter, setCounter] = useState(10);

	const addvalue = () => {
		if (counter < 20) {
			setCounter(counter + 1);
		}
		if (counter === 20) {
			alert("Counter is already at 20. Can't go above 20");
		}
	};

	const removevalue = () => {
		if (counter > 0) {
			setCounter(counter - 1);
		}
		if (counter === 0) {
			alert("Counter is already at 0. Can't go below 0");
		}
	};

	return (
		<>
			<h1>Recat Counter</h1>
			<p> Counter value is: {counter} </p>
			<button onClick={addvalue}> add value</button>
			<button onClick={removevalue}> remove value</button>
		</>
	);
}

export default Counter;

	

Integrating the Counter Component

Open src/App.jsx.

• Replace the existing code with the following:

import Counter from './Counter';

function App() {
    return (
        <div>
            <Counter />
        </div>
    );
}

export default App;

Save the file. Your development server should automatically update, displaying your counter application.

Enhancing the Counter

To make your counter project more visually appealing, you can add CSS styling:

• Create a new file named Counter.css in the src folder.

• Add the following styles:

div {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: inline-block;
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

• Import the CSS file in Counter.jsx: import './Counter.css';

Final Thoughts

• Congratulations! You’ve successfully created a counter project in React JS using Vite.
• This simple project demonstrates how to manage state, handle events, and apply basic styling in React.
• As a next step, try extending the functionality—for example, add input fields to set the counter value or change the increment step size.