Create the Vite Project

In this section, you will scaffold a new React project using Vite and clean up the generated boilerplate. This is the same process you followed for the Counter app, but this time with TypeScript.

Creating the Vite Project

Run the following command to create a new Vite project with the React TypeScript template. Make sure you are in the dice-roller-app directory you cloned in the previous section.

pnpm create vite . --template react-ts

Vite will tell you that the current directory is not empty; choose “Ignore files and continue” to proceed. (If asked about experimental features, you can choose “No”.)

You used --template react for the Counter. This time, react-ts gives you the same setup with TypeScript support added. You will see .tsx files instead of .jsx.

Install the dependencies to make sure everything is set up correctly:

pnpm install

Cleaning Up the Boilerplate

Remove the files we do not need:

rm public/vite.svg src/assets/react.svg src/App.css
rmdir src/assets
echo > src/index.css

Create a new file /public/dice.svg with this content:

<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="18" height="18" x="3" y="3" rx="2" ry="2" fill="#3b82f6" stroke="#1e40af"/>
  <circle cx="9" cy="9" r="1.5" fill="white" stroke="none"/>
  <circle cx="15" cy="9" r="1.5" fill="white" stroke="none"/>
  <circle cx="9" cy="15" r="1.5" fill="white" stroke="none"/>
  <circle cx="15" cy="15" r="1.5" fill="white" stroke="none"/>
</svg>

Replace the content of index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/dice.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dice Roller</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Replace the content of src/App.tsx:

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

export default App;

Replace the content of README.md:

# Dice Roller

A simple React app for rolling dice. Click individual dice to roll them independently, or use the "Roll Both" button to roll all at once.

## Run locally

* Clone this repository.
* Navigate to the project directory.
* Install dependencies using `pnpm install`.
* Start the development server with `pnpm run dev`.
* Open your browser and navigate to `http://localhost:5173`.

Run the development server to test the app:

pnpm run dev

Navigate to http://localhost:5173 to see the app.

Screenshot of the Dice Roller

Explore the React Project

The project structure follows the same pattern you saw in the Counter app: index.html loads main.tsx, which calls createRoot to render <App /> into the <div id="root"> container. The flow is the same. The only difference is that the file extensions are .tsx instead of .jsx, because this project uses TypeScript.

Open src/main.tsx and you will see the same bootstrap code: createRoot, StrictMode, and the <App /> render call.

Checkpoint: Commit your progress.

git add .
git commit -m "dice-01: Create Vite project and clean up boilerplate"
git push