How to Create React App Using Vite Quickly and Easily

To create a React app using vite, run npm create vite@latest my-react-app -- --template react in your terminal. Then, navigate to the app folder and run npm install followed by npm run dev to start the development server.

Syntax

The basic command to create a React app with Vite is:

• npm create vite@latest <project-name> -- --template react: Creates a new React project using Vite's React template.
• cd <project-name>: Moves into the project folder.
• npm install: Installs all dependencies.
• npm run dev: Starts the development server to preview your app.

bash

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

Example

This example shows how to create a React app named my-react-app using Vite, install dependencies, and start the development server. After running these commands, your browser will open at http://localhost:5173/ showing the default React welcome page.

bash

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

Output

  VITE v4.4.9  ready in 300 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Common Pitfalls

Some common mistakes when creating a React app with Vite include:

• Forgetting the --template react flag, which results in a vanilla JavaScript project instead of React.
• Not running npm install before npm run dev, causing missing dependencies errors.
• Running the commands without Node.js and npm installed, which are required.
• Using an outdated version of Vite; always use npm create vite@latest to get the latest stable version.

bash

Wrong:
npm create vite@latest my-app
cd my-app
npm install
npm run dev

Right:
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Quick Reference

Summary tips for creating a React app with Vite:

• Always specify --template react to get React setup.
• Use npm create vite@latest to ensure the latest Vite version.
• Run npm install before starting the dev server.
• Start the app with npm run dev and open the shown URL in your browser.

Key Takeaways

Use npm create vite@latest my-app -- --template react to create a React app with Vite.

Always run npm install before starting the development server.

Start your app with npm run dev and open the local URL to see it in action.

Make sure Node.js and npm are installed before running these commands.

Using the latest Vite version ensures you get the newest features and fixes.