DEV Community

TenE
TenE

Posted on

Setting Up a React Project with Vite

#react #vite

Why Set Up a React Project?

React needs a build tool to manage dependencies, compile JSX, and optimize performance. The two most popular ways to set up a React project are:

  1. Create React App (CRA) – Official but slower and its now Sunset
  2. Vite – Faster, modern alternative

Setting Up React with Vite

Vite is a modern build tool that offers:

  • Faster development server.
  • Better performance with ES modules.
  • Optimized production build.

Steps to Create a React App with Vite

1. Open Terminal & Run:

npm create vite@latest my-app --template react
Enter fullscreen mode Exit fullscreen mode

or using Yarn:

yarn create vite@latest my-app --template react
Enter fullscreen mode Exit fullscreen mode

or using pnpm:

pnpm create vite@latest my-app --template react
Enter fullscreen mode Exit fullscreen mode

2. Navigate to the project folder:

cd my-app
Enter fullscreen mode Exit fullscreen mode

3. Install dependencies:

npm install
Enter fullscreen mode Exit fullscreen mode

4. Start the development server:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Vite For

Feature Vite 🚀 CRA 🐢
Startup Speed ⚡ Instant 🐌 Slow
Build Speed 🔥 Fast 🚶‍♂️ Moderate
Uses Webpack? ❌ No (ES Modules) ✅ Yes
Production Build ✅ Optimized ⚠️ Heavier
Plugins Support ✅ Excellent (Rollup-based) ✅ Good (Webpack-based)

Top comments (0)