بخش 7: نصب ابزار Vite یا Create React App

1. مقدمه کوتاه

قبل از اینکه شروع به کدنویسی React کنیم، باید یک محیط توسعه (Development Environment) داشته باشیم که:

• فایل‌ها رو به فرمت قابل فهم برای مرورگر تبدیل کنه (کد JSX به جاوااسکریپت استاندارد)
• تغییرات رو به صورت Live Reload نمایش بده
• و پروژه رو برای انتشار Build کنه

دو ابزار محبوب برای شروع پروژه React:

1. Create React App (CRA) → قدیمی‌تر و رسمی.
2. Vite → سریع‌تر و مدرن‌تر.

---

2. تعریف و توضیح مفهومی

2.1. Create React App چیست؟

• ساخته تیم رسمی React
• همه ابزارهای لازم مثل Babel، Webpack، ESLint و …
• راه‌اندازی آسان با یک دستور
• ولی کندتر در اجرا و build نسبت به ابزارهایی مثل Vite

---

2.2. Vite چیست؟

• ساخته‌شده توسط Evan You (خالق Vue.js)
• بسیار سریع (هم در اجرای اولیه و هم در live reload)
• استفاده از ESBuild در حین توسعه و Rollup برای build
• از ابتدا برای مدرن‌ترین ویژگی‌های جاوااسکریپت ساخته شده

---

3. جزئیات فنی و نکات عمیق‌تر

ویژگی	Create React App (CRA)	Vite
موتور Build	Webpack	ESBuild + Rollup
سرعت Start	کند‌تر	بسیار سریع
اندازه خروجی	معمولی	کوچکتر و بهینه‌تر
رسمی بودن	بله (توسط تیم React)	خیر (جامعه متن‌باز)
یادگیری	ساده‌تر برای تازه‌کاران	نیاز به کمی آشنایی بیشتر

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

---

4. نصب Create React App

4.1. نصب با npm

npx create-react-app my-app

بعد:

cd my-app
npm start

---

4.2. نکات مهم نصب CRA

• npx باعث می‌شود همیشه آخرین نسخه را دانلود کنید و نیازی به نصب global نباشد.
• پوشه node_modules را پاک نکنید مگر اینکه بخواهید دوباره npm install بزنید.
• اجرای npm start پروژه را روی http://localhost:3000 باز می‌کند.

---

5. نصب Vite

5.1. نصب با npm

npm create vite@latest my-app

سپس:

• انتخاب React یا React + TypeScript
• رفتن به پوشه پروژه:

cd my-app
npm install
npm run dev

پروژه روی http://localhost:5173 باز می‌شود.

---

5.2. نصب با yarn

yarn create vite my-app

---

6. مثال‌های نصب و اجرای پروژه

نمونه با Vite (React + JavaScript)

npm create vite@latest my-vite-app
✔ Project name: … my-vite-app
✔ Select a framework: › React
✔ Select a variant: › JavaScript
cd my-vite-app
npm install
npm run dev

در این حالت Vite ساختار پروژه رو ایجاد می‌کنه و با سرعت زیاد اجرا می‌شه.

---

7. تحلیل و بررسی

• CRA:
• مزیت: رسمی بودن، منابع آموزشی زیاد
• عیب: سرعت کمتر، build سنگین‌تر
• Vite:
• مزیت: سرعت بسیار بالا، استفاده مدرن از ESM
• عیب: منابع آموزشی نسبت به CRA کمتر (ولی رو به افزایش)

---

8. اشتباهات رایج مبتدیان

1. نصب global CRA (npm install -g create-react-app) که توصیه نمی‌شود.
2. نصب و استفاده همزمان از npm و yarn در یک پروژه.
3. انتخاب نسخه اشتباه در Vite (مثلاً React + TypeScript برای کسی که TypeScript بلد نیست).
4. تغییر پوشه node_modules به صورت دستی.

---

9. تمرین‌های پیشنهادی

1. با CRA یک پروژه ساده ایجاد کنید و تغییر در App.js بدهید تا Live Reload را تجربه کنید.
2. با Vite یک پروژه مشابه بسازید و سرعت اجرا را با CRA مقایسه کنید.
3. ساخت هر دو پروژه و بررسی تفاوت تنظیمات در فایل‌ها.

---

10. جمع‌بندی

• هر دو ابزار می‌توانند پروژه React را بسازند، اما Vite معمولاً سریع‌تر است.
• CRA برای کسانی که تازه‌کار هستند و منابع آموزشی رسمی می‌خواهند، مناسب‌تر است.
• توصیه من: اگر پروژه جدید و سرعت مهم است → Vite را انتخاب کنید.