Project Setup
Vite, MODERN, React PROJECTS ke liye, MOST, POPULAR, BUILD TOOL hai — EXTREMELY, FAST, DEV SERVER (Hot Module Replacement SE, INSTANT, UPDATES), aur, OPTIMIZED, PRODUCTION BUILDS DETA hai. Create React App (CRA), PURANA, TOOL tha, JO, AB, OFFICIALLY, DEPRECATED hai.
npm create vite@latest my-app -- --template react, EK, NAYA, React PROJECT, SECONDS mein, SETUP kar DETA hai — package.json, INDEX.HTML, aur, BASIC, PROJECT STRUCTURE, AUTOMATICALLY, GENERATE ho jaati hai.
# Naya React project (Vite se):
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev # Dev server, localhost:5173 par
# Production build:
npm run build # Optimized, static files, dist/ folder mein- Vite = MODERN, FAST, build tool, React projects ke liye (CRA REPLACE kar chuka hai)
- npm create vite@latest = SECONDS mein, naya project, SETUP
- npm run dev = fast dev server, HMR (Hot Module Replacement) ke SAATH
npm create vite@latest my-app -- --template react-ts, EK, TypeScript-ENABLED, React, PROJECT, SETUP, KARTA, hai — .jsx, FILES, KE, BAJAYE, .tsx, FILES, USE, HOTI, HAIN, aur, PROPS, KO, INTERFACE/TYPE, SE, DEFINE, KIYA, JAATA, hai.
npm create vite@latest my-app -- --template react-tsVite, MEIN, ENVIRONMENT, VARIABLES, VITE_ PREFIX, KE, SAATH, DEFINE, HOTE, HAIN (.env, FILE, MEIN), aur, import.meta.env.VITE_API_URL, SE, ACCESS, KIYE, JAATE, HAIN — process.env (CRA, KA, TAREEKA) SE, DIFFERENT, hai.
// .env file:
// VITE_API_URL=https://api.example.com
// Code mein:
const apiUrl = import.meta.env.VITE_API_URL;