راه‌اندازی پروژه React با Vite – شروع سریع، ساختار مدرن، و تمرکز بر یادگیری

مقدمه

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 تمرکز کنند.