Setting Up a React Project

Let’s start fresh with a React project. Navigate to the parent directory of your vanilla counter and scaffold a new React project with Vite:

cd ..
pnpm create vite@latest counter-react --template react

Navigate to the project directory and install dependencies:

cd counter-react
pnpm install

Cleaning Up the Boilerplate

Vite scaffolds a demo app with SVG logos, sample CSS, an ESLint config, and other files we do not need.

Delete the demo assets and ESLint config:

rm -rf public src/assets src/index.css eslint.config.js README.md

We removed:

  • public/ — contained a Vite SVG logo
  • src/assets/ — contained a React SVG logo
  • src/index.css — global styles from the demo
  • eslint.config.js — linting config (useful in real projects, but not needed for learning)
  • README.md — we already have it at our repo root

Now update package.json to remove the ESLint-related dependencies and the lint script. Your package.json should look like this:

{
  "name": "counter-react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.2.0",
    "react-dom": "^19.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^5.1.1",
    "vite": "^7.3.1"
  }
}

Run pnpm install again so the lockfile updates and the changes take effect.

Next, update index.html to remove the Vite favicon and set a proper title:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Counter</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Update src/main.jsx to remove the index.css import:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Finally, empty out src/App.css. We will add our own styles later. Then replace src/App.jsx with a simple placeholder:

export default function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

What is Left

After cleanup, your project should have these files:

counter-react/
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── main.jsx
    ├── App.jsx
    └── App.css

These are the essential files for a React + Vite project:

  • index.html — the single HTML page that loads React
  • package.json — project metadata and dependencies
  • vite.config.js — tells Vite to use the React plugin
  • src/main.jsx — the entry point that mounts React into the DOM
  • src/App.jsx — the root React component
  • src/App.css — styles for the App component

Start the development server:

pnpm run dev

Open http://localhost:5173 in your browser. You should see “Hello, World!” on a blank page.

React Hello World

Checkpoint: Commit your progress.

git init -b master
git add .
git commit -m "counter-03: Create React project with Vite"