Building a Simple Counter App with React, Vite, Git, and GitHub

This tutorial assumes you have basic knowledge of HTML, CSS, and JavaScript and are ready to take the next step with React..

Prerequisites

Before we get started, make sure you have the following tools installed:

• Node.js (version 18+ recommended, includes npm) — Download and install from nodejs.org
• Git — Download and install from git-scm.com
• VS Code (or your preferred code editor) — Download from code.visualstudio.com

Step 1: Setting Up the Project

1.1 Create the React App with Vite

Vite is a modern build tool that provides a faster and leaner development experience for React projects. It offers instant server start, lightning-fast hot module replacement (HMR), and optimized builds.

1. Open your terminal (or command prompt).
2. Navigate to the directory where you want to create the project.
3. Run the following command to create a new React app with Vite:

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

This command will create a folder named counter-app with all the files needed for a React project powered by Vite.

4. Move into the project directory:

cd counter-app

5. Install the dependencies:

npm install

1.2 Project Structure

After installation, your project structure will look like this:

counter-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md

Note: Unlike Create React App, Vite places index.html in the project root, not in a public folder. This is the entry point to your application.

1.3 Start the Development Server

To check that everything is set up correctly, run:

npm run dev

Your terminal will display a local URL (typically http://localhost:5173). Open it in your browser to see the default Vite + React app.

💡 Notice how fast the server starts! This is one of Vite's main advantages over older tools.

Step 2: Initialize Git and Create a GitHub Repository

2.1 Initialize Git

In your terminal, inside the counter-app directory, initialize Git:

git init

This will create a .git folder, which Git uses to track changes.

Note: Vite includes a .gitignore file by default that ignores node_modules, dist, and other unnecessary files from being tracked by Git.

2.2 Create a New Repository on GitHub

1. Go to GitHub and log in.
2. Click New repository and name it counter-app.
3. Leave the repository empty (no README, .gitignore, or license) since these files are already in your local project.
4. Click Create repository.
5. Copy the repository URL.

2.3 Link Local Project to GitHub Repository

In your terminal, add the GitHub repository as a remote for your local Git repository:

git remote add origin 

Replace <your-repository-url> with the URL you copied from GitHub, e.g.:

git remote add origin https://github.com/yourusername/counter-app.git

2.4 Make Your First Commit

1. Stage all files to be included in the first commit:

git add .

2. Commit the files with a message:

git commit -m "Initial commit"

3. Push to GitHub:

git push -u origin main

Step 3: Building the Counter Component

Now, let's build the core of our app — a simple counter that can be incremented and decremented.

3.1 Create a Counter Component

1. In the src folder, create a new folder named components.
2. Inside the components folder, create a file named Counter.jsx.

Note: Vite uses the .jsx extension for files containing JSX syntax. While .js works too, .jsx is the recommended convention.

3. In Counter.jsx, add the following code:

import { useState } from 'react';
import './Counter.css';

function Counter({ title }) {
  const [count, setCount] = useState(0);

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

  return (
    
      {title}
      Count: {count}
      
        Increment
      
      
        Decrement
      
    
  );
}

export default Counter;

This component:

• Accepts a title prop to display a custom title.
• Uses React's useState hook to manage the count state.
• Provides two buttons to increment and decrement the count.

💡 Learn more about the useState hook in the official React documentation.

3.2 Use the Counter Component in App.jsx

1. Open App.jsx in the src folder.
2. Replace its contents with the following:

import './App.css';
import Counter from './components/Counter';

function App() {
  return (
    
      Counter App
      
    
  );
}

export default App;

Now, if you check your browser (the dev server should still be running), you should see your counter component. Thanks to Vite's hot module replacement, changes appear instantly without a full page reload.

Step 4: Styling the Counter Component

To make our counter look nice, let's add some custom styles.

4.1 Create Counter.css

1. In the src/components folder, create a file named Counter.css.
2. Add the following CSS code:

/* Main container styling */
.counter-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f9f9f9;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 220px;
  margin: 1rem auto;
}

/* Title styling */
.counter-title {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 0.5rem;
}

/* Counter display styling */
.counter-display {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 1rem;
}

/* Button styling */
.counter-button {
  font-size: 1rem;
  padding: 0.5rem 1.5rem;
  margin: 0.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  color: white;
}

/* Increment button styling */
.counter-button.increment {
  background-color: #4caf50;
}

.counter-button.increment:hover {
  background-color: #45a049;
}

/* Decrement button styling */
.counter-button.decrement {
  background-color: #f44336;
}

.counter-button.decrement:hover {
  background-color: #e53935;
}

This CSS styles the container, title, display, and buttons to create a clean and visually appealing look.

4.2 Update App Styles

To center the main app and add some background color, replace the contents of App.css with:

.App {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #e0f7fa;
  font-family: Arial, sans-serif;
}

h1 {
  color: #00796b;
  font-size: 2rem;
  margin-bottom: 1rem;
}

4.3 Clean Up Global Styles (Optional)

Vite's default index.css includes some base styles. You can either keep them or replace the file contents with a simple CSS reset:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Step 5: Commit and Push Your Changes to GitHub

5.1 Stage and Commit

After making changes, stage and commit them:

git add .
git commit -m "Added Counter component and styles"

5.2 Push to GitHub

git push origin main

Now your project is updated on GitHub!

Bonus: Build for Production

When you're ready to deploy your app, Vite makes it easy to create an optimized production build:

npm run build

This creates a dist folder containing your optimized, minified application ready for deployment.

To preview the production build locally:

npm run preview

Conclusion

You've successfully built a simple counter app in React using Vite, styled it, and used Git to version-control your code. You've also learned how to push your work to GitHub for others to see.

This process introduces many fundamental concepts in React, Git, and GitHub that you can expand on as you develop more complex projects. Vite's fast development experience will serve you well as your projects grow in complexity. 🎉