بخش 12: آشنایی با JSX و مفهوم آن

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

در کدهای React وقتی اولین بار چیزی مثل این می‌بینی:

function HelloWorld() {
  return <h1>سلام دنیا!</h1>;
}

احتمالاً با خودت می‌گویی: «چطور ممکنه وسط کد جاوااسکریپت، HTML بنویسیم؟ 😲»

جواب این راز، چیزی به اسم JSX است.
بدون JSX، باید UI را با کدهای طولانی‌تری بنویسیم که کار را گیج‌کننده می‌کند.

پس JSX یک زبان یا تکنولوژی جدید نیست، بلکه یک سینتکس خاص (Syntax Extension) برای JavaScript است که توسط Babel و ابزارهای build به JavaScript عادی تبدیل می‌شود.

---

2. تعریف و توضیح ساده JSX

به زبان خیلی ساده:

JSX = ترکیب HTML و JavaScript در یک فایل، برای ساخت راحت رابط کاربری

مثال:

const element = <h1>سلام React!</h1>;

در ظاهر شبیه HTML است، ولی در واقع یک قالب (syntax sugar) برای متدی مثل این است:

const element = React.createElement('h1', null, 'سلام React!');

---

3. چرا از JSX استفاده می‌کنیم؟

• خوانایی بالا: شبیه HTML است، پس طراحان و توسعه‌دهندگان راحت می‌فهمند.
• کدنویسی سریع‌تر: بدون JSX، باید از React.createElement برای هر تگ استفاده می‌کردیم.
• ترکیب مستقیم منطق و UI: می‌توانیم متغیرها و توابع را مستقیماً در UI استفاده کنیم.

---

4. جزئیات فنی و نحوه کار JSX

JSX یک سینتکس اضافه‌شده به JavaScript است که توسط Babel یا دیگر ترنسپایلرها تبدیل می‌شود به کد JS استاندارد.

مثال:

const name = "علی";
const element = <h1>سلام {name}!</h1>;

بعد از تبدیل توسط Babel:

const name = "علی";
const element = React.createElement("h1", null, `سلام ${name}!`);

---

5. قوانین اصلی در JSX

قانون ۱: باید یک المان ریشه داشته باشد

غلط ❌

return <h1>سلام</h1><p>خوش آمدید</p>;

درست ✅

return (
  <div>
    <h1>سلام</h1>
    <p>خوش آمدید</p>
  </div>
);

یا با Fragment:

return (
  <>
    <h1>سلام</h1>
    <p>خوش آمدید</p>
  </>
);

---

قانون ۲: استفاده از {} برای درج جاوااسکریپت

در JSX هر جا بخواهی از متغیر یا عبارت JS استفاده کنی، باید آن را بین {} قرار بدهی:

مثال:

const name = "سارا";
return <h1>سلام {name}!</h1>;

حتی توابع:

function getGreeting(name) {
  return `خوش آمدی ${name}`;
}
return <p>{getGreeting("علی")}</p>;

---

قانون ۳: استفاده از className به جای class

چون class یک کلمه رزرو شده در JavaScript است، در JSX برای استایل‌دهی باید از className استفاده کنیم.

مثال:

<h1 className="title">عنوان</h1>

---

قانون ۴: Attributes بر اساس camelCase

برای ویژگی‌هایی که چند کلمه‌ای هستند باید از camelCase استفاده کنیم:

<button onClick={handleClick}>کلیک</button>
<div tabIndex={0}></div>

---

قانون ۵: self-closing برای تگ‌های بدون محتوای داخلی

در HTML می‌توانی بنویسی:

<img src="a.jpg">

ولی در JSX باید اینطور بنویسی:

<img src="a.jpg" />

---

6. مثال‌های عملی JSX

مثال ۱: درج متغیر در متن

function Welcome() {
  const name = "علی";
  return <h1>سلام {name}!</h1>;
}

---

مثال ۲: استفاده از تابع در JSX

function Welcome() {
  function getName() {
    return "سارا";
  }
  return <h1>سلام {getName()}!</h1>;
}

---

مثال ۳: شرط در JSX

به کمک عملگر شرطی ? ::

function UserGreeting({ isLoggedIn }) {
  return <h1>{isLoggedIn ? "خوش آمدید" : "لطفاً وارد شوید"}</h1>;
}

---

مثال ۴: لیست با map

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

---

7. تحلیل خط‌به‌خط یک نمونه JSX

مثال:

function ProfileCard({ name, job }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{job}</p>
    </div>
  );
}

تحلیل:

1. <div className="card"> → یک div با استایل class CSS
2. {name} → درج مقدار props.name
3. {job} → درج مقدار props.job
4. خروجی JSX معادل React.createElement('div', ...) است

---

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

• استفاده از class به جای className
• فراموش کردن المان والد
• بستن نکردن تگ‌ها (مثلاً <img> بدون /)
• درج مستقیم یک شیء یا آرایه بدون پردازش → باعث خطا می‌شود
• نوشتن کدهای منطقی سنگین داخل JSX به جای جدا کردن در متغیر

---

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

1. یک کامپوننت UserInfo بساز که نام و سن را از props گرفته و در JSX نمایش دهد.
2. یک لیست محصولات با استفاده از map بساز.
3. یک پیام خوش‌آمدگویی بساز که اگر کاربر isLoggedIn = true بود، نامش را نمایش دهد.
4. یک دکمه با متن دریافت‌شده از props بساز.

---

10. جمع‌بندی

• JSX یک افزودنی سینتکس برای JS است، نه زبان جدید.
• توسط Babel به React.createElement تبدیل می‌شود.
• قوانین مهم:
• یک المان ریشه
• استفاده از {} برای جاوااسکریپت
• استفاده از className و camelCase
• self-closing برای تگ‌های خالی
• نوشتن رابط کاربری با JSX خواناتر و سریع‌تر از روش بدون JSX است.