بخش 6: معرفی ابزارهای مورد نیاز برای شروع کار (Node.js، npm/yarn)

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

برای شروع کار با React، فقط دانستن جاوااسکریپت کافی نیست. به یکسری ابزار پایه نیاز داریم که:

• محیط برنامه‌نویسی ما را آماده کنند
• کدهای ما را اجرا و مدیریت کنند
• کتابخانه‌ها را نصب کنند
• و در نهایت امکان ساخت خروجی قابل انتشار را بدهند

دو ابزار اصلی که باید حتماً با آن‌ها آشنا شوید:

1. Node.js
2. مدیر بسته‌ها (Package Manager): مثل npm یا yarn

---

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

2.1. Node.js چیست؟

• Node.js یک مفسر جاوااسکریپت سمت سرور است.
• باعث می‌شود بتوانیم کد جاوااسکریپت را خارج از مرورگر اجرا کنیم.
• برای اجرای ابزارهایی مثل Vite یا Create React App لازم است.
• بدون Node.js شما نمی‌توانید پکیج‌ها را نصب یا پروژه React را اجرا کنید.

به زبان ساده: Node جاییه که پروژه React شما “زندگی” می‌کنه قبل از اینکه به مرورگر ارسال شود.

---

2.2. npm چیست؟

• npm مخفف Node Package Manager است.
• همراه با نصب Node.js به صورت پیش‌فرض روی سیستم شما نصب می‌شود.
• وظیفه‌اش نصب و مدیریت کتابخانه‌ها و ابزارهاست.
• برای مثال برای نصب React کافی است:

npm install react

---

2.3. yarn چیست؟

• yarn هم یک مدیر بسته است که توسط Meta (فیسبوک) ساخته شده.
• سریع‌تر و با مدیریت بهتر در نسخه‌های اولیه نسبت به npm شناخته شد.
• انتخاب بین npm و yarn به سلیقه شماست؛ هر دو کار یکسانی می‌کنند.

---

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

3.1. ارتباط بین Node.js و React

وقتی با React کار می‌کنید، شما کدهایی به زبان JSX و JavaScript ES6/ESNext می‌نویسید. مرورگر این کدها را مستقیم نمی‌فهمد.
Node.js به کمک ابزارهایی مثل Vite یا Webpack کد شما را:

1. باندل (bundle) می‌کند (همه فایل‌ها را جمع می‌کند)
2. ترنسپایل (transpile) می‌کند (ESNext → ES5)
3. روی یک سرور محلی اجرا می‌کند تا در حین توسعه تغییرات را لایو ببینید

---

3.2. چرا به npm/yarn نیاز داریم؟

فرض کنید می‌خواهید از کتابخانه axios استفاده کنید.

• به جای دانلود دستی، فایل‌ها و قرار دادن در پروژه،
• با npm install axios یا yarn add axios،
• کد به طور خودکار در پوشه node_modules/ ذخیره می‌شود و متن‌باز جهانی است.

---

3.3. ساختار package.json

وقتی پروژه React می‌سازید، یک فایل package.json ایجاد می‌شود که لیست همه وابستگی‌ها و اطلاعات پروژه در آن است:

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "react": "^18.0.0"
  }
}

---

4. نصب و آماده‌سازی

4.1. نصب Node.js

1. به سایت رسمی بروید: https://nodejs.org
2. دو نسخه می‌بینید:

• LTS (پایدار): برای پروژه‌هایی که نیاز به ثبات دارند.
• Current (جدیدترین ویژگی‌ها): بیشتر برای تست.

1. LTS را دانلود و نصب کنید.

---

4.2. بررسی موفقیت نصب

بعد از نصب، در ترمینال بنویسید:

node -v

خروجی، نسخه Node.js است:

v20.10.0

همچنین:

npm -v

نسخه npm را نمایش می‌دهد.

---

4.3. نصب yarn (اختیاری)

npm install --global yarn

بررسی نسخه:

yarn -v

---

5. مثال‌های متعدد

ایجاد یک پروژه آزمایشی Node.js:

mkdir test-node
cd test-node
npm init -y

این دستور یک package.json خالی با تنظیمات پیش‌فرض ایجاد می‌کند.
حالا یک فایل index.js بسازید:

console.log("Hello from Node.js");

اجرا کنید:

node index.js

خروجی:

Hello from Node.js

---

6. تحلیل و بررسی کد و ابزار

• Node.js → محیط اجرایی جاوااسکریپت سمت سرور
• npm/yarn → مدیر بسته‌ها برای نصب و به‌روزرسانی کتابخانه‌ها
• package.json → دفترچه مشخصات پروژه

---

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

1. نصب نکردن Node.js و تلاش برای اجرای پروژه React.
2. عدم بررسی نسخه‌ها (برخی کتابخانه‌ها نسخه قدیمی Node را ساپورت نمی‌کنند).
3. استفاده همزمان از npm و yarn در یک پروژه (باعث اختلاف در lockها می‌شود).
4. پاک کردن پوشه node_modules بدون نصب مجدد (npm install).

---

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

1. Node.js را روی سیستم نصب و نسخه آن را بررسی کنید.
2. یک پروژه خالی ایجاد کنید و با npm init آن را پیکربندی کنید.
3. کتابخانه‌ای مثل lodash را نصب و در یک فایل ساده استفاده کنید.

---

9. جمع‌بندی

• Node.js قلب تپنده توسعه React است.
• npm یا yarn ابزار مدیریت کتابخانه‌ها و پکیج‌ها هستند.
• بدون این‌ها، اجرای محیط توسعه و نصب کتابخانه‌ها غیرممکن است.
• انتخاب بین npm و yarn به سلیقه و تیم شما بستگی دارد، ولی بهتر است در یک پروژه فقط از یکی استفاده کنید.