6. What is Vite

⚡ Setting Up a React Project with Vite

What is Vite?

• Vite (means “fast” in French) is a modern build tool for quickly creating web projects.

• Works with React, Vue, Svelte, or even vanilla JavaScript.

• Provides a faster development experience with minimal setup.

🧱 Why Use Vite?

✅ Automatically sets up all required configurations.
✅ Generates only the files you actually need.
✅ Much faster than older tools like Create React App.

🖥️ Creating a New React Project

Step 1: Open your command line (Command Prompt, PowerShell, or Terminal).

Step 2: Run this command:

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

Creates a new React project called my-react-app using Vite’s React template.

⚙️ Installing Dependencies

After the project is created, run:

cd my-react-app
npm install

• cd my-react-app → moves into your project folder.

• npm install → installs all dependencies listed in your package.json file.

📦 Dependencies = external libraries your app needs (like React, ReactDOM, etc.).

📁 Important Files & Folders

• package.json → stores project info, dependencies, and scripts.

• node_modules → contains the actual code for all installed packages.

🚀 Running the Project

Start your local server:

npm run dev

🧩 Editing Your App

• Go to src/App.jsx – this is your main component file.

• Edit and save it → changes appear instantly in your browser (hot reload).

In short:
Vite makes starting a React project super fast and simple.
It handles setup, dependencies, and dev server automatically — so you can focus on building your app, not configuring tools.