DEV Community

TenE Organization profile image TenE
TenE for TenE Organization

Posted on • Originally published at dev.to

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 (1)

Collapse
 
shehari007 profile image
Muhammad Sheharyar Butt •

Great post Vite really shines when it comes to development speed and overall developer experience.

I’ve also been working with Vite and recently put together a Vite + Ant Design v6 dashboard starter template to help speed up initial setup. It comes with routing, environment configuration, layout structure, menus/sidebars, and responsive behavior preconfigured.

If anyone is interested in a quick starting point for building dashboards, I’m happy to share it here: Link