🚀 Setting Up a React Project with Vite

🧰 Prerequisites

Before we begin, make sure you have the following installed:

• Node.js (version 14.18+, 16+ recommended)
• npm or Yarn
• A code editor like VS Code

⚙️ Step 1: Create a Vite Project

Open your terminal and run the following command to scaffold a new Vite + React project:

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

Or with Yarn:

yarn create vite my-react-app --template react

Replace my-react-app with your desired project name.

📁 Step 2: Navigate and Install Dependencies

After the project is scaffolded:

cd my-react-app
npm install

Or with Yarn:

cd my-react-app
yarn

🧪 Step 3: Run the Development Server

To start the dev server:

npm run dev

Or:

yarn dev

You’ll see something like this:

VITE vX.X.X  ready in XXX ms

  ➜  Local:   http://localhost:5173/

Open that URL in your browser to see your new React app in action!

📦 Step 4: Build for Production

When you’re ready to deploy, build the optimized production version:

npm run build

This will create a dist/ folder containing the static files.

To preview the production build locally:

npm run preview

🧹 Bonus: Project Structure Overview

Vite gives you a clean and minimal setup. Here’s what your folder structure looks like:

my-react-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── index.html
├── package.json
├── vite.config.js
└── README.md

🔌 Optional: Add TypeScript

If you prefer TypeScript:

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

Or:

yarn create vite my-react-app --template react-ts

🚀 Why Use Vite?

• Fast cold starts – Instant server startup using native ES modules.
• Hot Module Replacement (HMR) – Lightning-fast updates during development.
• Optimized builds – Uses Rollup under the hood for production.
• Out-of-the-box React support – No extra configuration needed.

📚 Next Steps

Now that your React app is up and running, here are a few things you can do next:

• Add Tailwind CSS or MUI for styling
• Set up React Router for navigation
• Connect to an API with Axios or Fetch
• Deploy with Vercel, Netlify, or GitHub Pages