مقدمه
Vite ابزاری سریع و مدرن برای راهاندازی پروژههای React است. با تنظیمات پیشفرض و قابلیت توسعهپذیری بالا، Vite به توسعهدهندگان اجازه میدهد بدون درگیر شدن با ابزارهای پیچیده، روی یادگیری React تمرکز کنند.
مزایای Vite
- سرور توسعه برای اجرای پروژه بهصورت محلی
- باندلر برای تولید فایلهای بهینهشده جهت انتشار نهایی
- پشتیبانی از افزونهها برای SVG، TypeScript، SSR و موارد دیگر
ایجاد پروژه React با Vite
برای شروع، ترمینال را باز کرده و به پوشهٔ موردنظر بروید. سپس دستور زیر را وارد کنید:
npm create vite@latest hacker-stories -- --template reactمیتوانید نام پروژه را تغییر دهید. اگر به TypeScript مسلط هستید، میتوانید از قالب react-ts استفاده کنید.
نصب و اجرای پروژه
cd hacker-stories
npm install
npm run devپس از اجرای npm run dev، آدرس محلی پروژه در مرورگر نمایش داده میشود. آن را باز کرده و صحت اجرای پروژه را بررسی کنید.
ارتقاء نسخهٔ React
اگر میخواهید از آخرین نسخهٔ React استفاده کنید:
npm install react@latest react-dom@latestدر پروژههای TypeScript نیز باید نوعهای مربوطه را بهروزرسانی کنید:
npm install --save-dev @types/react@latest @types/react-dom@latestساختار پروژه
پس از باز کردن پروژه در VSCode (با دستور code .)، ساختار زیر را مشاهده خواهید کرد:
hacker-stories/
├── node_modules/
├── public/
│ └── vite.svg
├── src/
│ ├── assets/
│ │ └── react.svg
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── README.md
└── vite.config.jsتوضیح فایلهای کلیدی
- package.json: لیست وابستگیها و تنظیمات پروژه
- node_modules: پوشهٔ کتابخانههای نصبشده (نباید تغییر داده شود)
- .gitignore: فایلهایی که نباید در مخزن git قرار گیرند
- vite.config.js: تنظیمات مربوط به Vite و افزونهها
- public: فایلهای استاتیک مانند favicon
- index.html: نقطهٔ ورود HTML پروژه
- src/App.jsx: محل پیادهسازی کامپوننتهای اصلی React
- src/main.jsx: نقطهٔ ورود به دنیای React
جمعبندی
Vite راهی سریع و ساده برای شروع پروژههای React است. با ساختار منظم، تنظیمات پیشفرض، و قابلیت ارتقاء آسان، این ابزار به توسعهدهندگان کمک میکند تا بدون دغدغهٔ ابزارهای پیچیده، روی یادگیری و توسعهٔ React تمرکز کنند.