DEV Community

Cover image for ⚡ How to Create a React App Using Vite (Step by Step Guide)
SoftwareDev
SoftwareDev

Posted on

⚡ How to Create a React App Using Vite (Step by Step Guide)

#react #vite #javascript #beginners

If you've ever felt that create-react-app takes too long to set up or runs a bit slow, you're not alone. That's where Vite comes in.

Vite (pronounced "veet") is a modern build tool that makes React development blazing fast. In this post, I'll show you how to create a React app using Vite in simple steps.

✅ Step 1: Install Node.js

Make sure you have Node.js installed on your system.

To check, run:

node -v
Enter fullscreen mode Exit fullscreen mode

If you don't have it, download it from nodejs.org.

✅ Step 2: Create a Vite Project

Open your terminal and run:

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

Here's what happens:

  • vite@latest → downloads the latest Vite template
  • my-app → this is your project folder (you can name it anything)

Vite will then ask you to select:

  • Framework → Choose React
  • Variant → Choose JavaScript or TypeScript (your choice)

✅ Step 3: Move Into the Project Folder 

cd my-app
Enter fullscreen mode Exit fullscreen mode

✅ Step 4: Install Dependencies 

npm install
Enter fullscreen mode Exit fullscreen mode

This downloads all the required packages.

✅ Step 5: Start the Development Server 

npm run dev
Enter fullscreen mode Exit fullscreen mode

🎉 That's it! Vite will start a local server and give you a link (usually http://localhost:5173) where your React app is running.

🛠️ Bonus: Useful Tips

To build for production:

npm run build
Enter fullscreen mode Exit fullscreen mode

To preview the production build locally:

npm run preview
Enter fullscreen mode Exit fullscreen mode

Pro Tip: If you're using VS Code, install the ES7+ React/Redux snippets extension for faster coding.

🚀 Why Vite Over CRA?

  • Faster startup → Uses native ES modules
  • Hot Module Replacement (HMR) → Instant updates when you save changes
  • Lightweight → No extra configs unless you need them

🎯 Conclusion

That's it! You've created a React app using Vite in just a few minutes.

No waiting for long builds, no heavy configs — just fast React development.

Now you can start building components and working on your project!

🏷️ Tags: #react #vite #javascript #beginners #tutorial

Top comments (0)