Create a React App with Vite: Step-by-Step Guide

Creating a React Application with Vite

What is Vite?

Vite is a build tool that sets up a React project and runs a fast development server. It is the current standard way to start a React project.

You may see older tutorials using create-react-app. That tool is deprecated and no longer recommended by the React team. Use Vite.

Syntax

npm create vite@latest project-name

Example

Let's create a project called student-dashboard.

npm create vite@latest student-dashboard

Vite will ask you a few questions in the terminal:

• Select a framework: choose React
• Select a variant: choose JavaScript

Then run:

cd student-dashboard
npm install
npm run dev

How It Works

• npm create vite@latest student-dashboard — downloads the project template into a new folder.
• cd student-dashboard — moves your terminal into that folder.
• npm install — downloads React and all other required libraries into node_modules.
• npm run dev — starts the development server.

Output

The terminal prints a local address, usually:

  ➜  Local:   http://localhost:5173/

Open that link in your browser and you will see the default Vite + React starter page with a spinning React logo and a counter button.

Leave this terminal running while you work. It watches your files and refreshes the browser automatically when you save.

Common Mistakes Beginners Make

• Forgetting npm install. Without it, node_modules does not exist and npm run dev fails.
• Running commands in the wrong folder. You must cd into the project folder first.
• Closing the terminal and expecting the site to stay up. The dev server only runs while that terminal is open.