How to Create a React App with Vite

To create a React app with Vite, you run one command and answer a few prompts. Vite is a fast build tool that scaffolds the project, installs dependencies, and starts a development server on your machine. This guide uses JavaScript, and the same flow works for the TypeScript template.

If you are new to React, start with the guide on what React is. Then come back here to create your first project.

Prerequisites

You need Node.js installed before you begin. Vite requires Node.js 20.19 or newer, or 22.12 or newer.

Check your version with this command:

bash

node --version

If the printed version is older, or the command is not found, install or upgrade Node.js before continuing.

Here is the whole setup at a glance, before the detail on each part:

Scaffold the project

Run the scaffold command in the terminal, inside the folder where you keep your projects:

bash

npm create vite@latest

The tool asks for a project name, then shows a list of frameworks. Select React, and answer the prompts that follow:

• Variant: choose JavaScript for this guide. TypeScript works the same way, and the React Compiler variants turn that compiler on for you.
• Linter: Oxlint is the default, and ESLint is offered for the plain React templates.
• Install and start now: answer no if you want to run the install and dev commands yourself, as the next section does.

You can also name the project and pick the variant up front, which skips the framework and variant prompts:

bash

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

This creates a folder named my-app with the React JavaScript template.

Install and run

Move into the project folder and install the packages Vite listed in package.json:

bash

cd my-app
npm install

The install command reads package.json and downloads every dependency the template listed. It can take a minute on the first run.

Now start the development server:

bash

npm run dev

The terminal prints a local URL, usually http://localhost:5173. Open it in your browser and you should see the starter page with the Vite and React logos.

Edit your first component

Open the project in your editor and replace the contents of src/App.jsx with a simple component:

App.jsx

function App() {
  return <h1>Hello from React</h1>;
}
 
export default App;

Save the file. The browser updates almost instantly because Vite replaces only the changed module, a feature called hot module replacement. You do not need to refresh the page manually.

The guide on the React project structure explains every file this template created and where your future components should live.

Troubleshooting

• If npm reports an unsupported Node version, upgrade Node to 20.19 or newer.
• If the port is already in use, run npm run dev -- --port 5174 to pick another.
• If the page is blank, check that src/main.jsx still calls createRoot on the element with id root.

What to learn next

Now that the app runs, build your first interactive component with the guide on your first React component. Then read the project structure guide to learn where each piece belongs and where your own files should live.