بخش 13: قوانین اصلی نوشتن JSX

1. مقدمه — چرا دانستن این قوانین مهمه؟

وقتی تازه وارد دنیای React و JSX میشی، خیلی از ارورهایی که در مرورگر می‌بینی، بخاطر رعایت نکردن قواعد JSX هستن.
مثلاً:

• «Adjacent JSX elements must be wrapped in an enclosing tag» ❌
• «Unexpected token» ❌
• یا حتی ظاهر نشدن UI بدون هیچ پیام خطای واضح

این مشکلات معمولاً به دلیل اشتباهات کوچک ولی کلیدی در کدنویسی JSX پیش میان.
پس این قوانین در واقع یک چک‌لیست لازم برای هر کد JSX هستن.

---

2. تعریف JSX و محل اجرای قوانین

ما تو بخش 12 یاد گرفتیم JSX در واقع یه سینتکس ترکیب HTML + JavaScript هست که در نهایت به متد React.createElement تبدیل میشه.
اینجا، قوانین رو بر اساس تجربه عملی و مستندات رسمی React بررسی می‌کنیم.

---

3. قوانین اصلی JSX به تفکیک + مثال‌های واقعی

قانون 1 — یک المان ریشه (Root Element)

در JSX هر return باید دقیقاً یک المان والد داشته باشه.

❌ اشتباه:

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

✅ درست:

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

یا استفاده از Fragment:

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

📌 علت: JSX بعد از کامپایل به یک فراخوانی تابع واحد تبدیل می‌شود و نمی‌تواند دو عنصر مجزا را مستقیماً برگرداند.

---

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

هر وقت خواستی متغیر، مقدار محاسباتی، تابع یا حتی آرایه رو داخل JSX نمایش بدی، باید از {} استفاده کنی.

✅ مثال:

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

همین {} رو می‌تونی داخل attributeها استفاده کنی:

<img src={imageUrl} alt="عکس" />

📌 ولی نمی‌تونی if درون JSX مستقیم بنویسی! باید با شرط سه‌تایی یا جداش کنی.

---

قانون 3 — استفاده از className به جای class

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

✅ مثال درست:

<div className="container">متن</div>

❌ اشتباه:

<div class="container">متن</div>

این باعث خطای تجزیه (Parsing error) میشه.

---

قانون 4 — نام‌گذاری ویژگی‌ها به صورت camelCase

تمام attributeها که بیش از یک کلمه‌اند باید به سبک camelCase باشن.

مثال‌ها:

• HTML: tabindex → JSX: tabIndex
• HTML: maxlength → JSX: maxLength
• HTML: onclick → JSX: onClick

❌ اشتباه:

<button onclick={handleClick}>کلیک</button>

✅ درست:

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

---

قانون 5 — بستن همه تگ‌ها حتی void elements

در HTML میشه نوشت:

<img src="photo.jpg">

ولی در JSX باید Self-close بشه:

<img src="photo.jpg" />

📌 این شامل همه‌ی تگ‌ها میشه (br, input, meta, hr و …).

---

قانون 6 — عدم استفاده مستقیم از Object/Boolean در JSX

اگر این کار رو بکنی:

return <p>{true}</p>

هیچ چیزی نمایش داده نمیشه! چون React مقادیر boolean یا object رو نمایش نمیده.
برای دیدن آبجکت باید stringify کنی:

const obj = {name: "علی"};
return <p>{JSON.stringify(obj)}</p>

---

قانون 7 — جلوگیری از منطق سنگین داخل JSX

بهتره محاسبات سنگین رو خارج JSX انجام بدی:
✅ خوب:

const total = items.reduce((sum, item) => sum + item.price, 0);
return <p>جمع قیمت: {total}</p>;

❌ بد:

return <p>جمع قیمت: {items.reduce((sum, item) => sum + item.price, 0)}</p>;

---

قانون 8 — استفاده از key در لیست‌ها

وقتی با map لیست تولید می‌کنی، React به key نیاز داره تا مدیریت بهتری روی تغییرات انجام بده.

✅ درست:

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

❌ بد:

<ul>
  {users.map(user => <li>{user.name}</li>)}
</ul>

---

4. تحلیل یک نمونه رعایت همه قوانین

مثال:

function ProductList({ products }) {
  return (
    <div className="product-list">
      {products.length > 0 ? (
        <ul>
          {products.map(product => (
            <li key={product.id}>
              <h3>{product.name}</h3>
              <p>قیمت: {product.price} تومان</p>
            </li>
          ))}
        </ul>
      ) : (
        <p>محصولی یافت نشد</p>
      )}
    </div>
  );
}

📌 در این نمونه:

• یک والد اصلی داریم (<div>)
• متغیرها داخل {} استفاده شدن
• className استفاده شده
• map با key درست نوشته شده
• شرط به کمک ? : داخل JSX نوشته شده

---

5. اشتباهات رایج مبتدی‌ها

1. نبودن Root Element
2. استفاده از class به جای className
3. فراموش کردن بستن تگ‌ها
4. دادن attribute با اسم HTML به جای camelCase
5. استفاده از index به عنوان key در map وقتی id یکتا داریم
6. نوشتن منطق سنگین داخل JSX

---

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

1. یک کامپوننت TodoList بساز که لیست وظایف رو با map نمایش بده و برای هر آیتم key مناسب بگذاره.
2. یک کارت محصول با نام و تصویر بساز که نام کلاسش (className) درست باشه.
3. یک جمله خوشامدگویی بساز که نام کاربر رو از props بگیره و داخل {} نمایش بده.
4. یک input با onChange در camelCase بنویس و مقدارش رو در console.log چاپ کن.

---

7. جمع‌بندی

• JSX قوانین خاصی داره که کمی با HTML فرق می‌کنه.
• همیشه یک Root Element داشته باش.
• از {} برای درج جاوااسکریپت استفاده کن.
• className و camelCase رو رعایت کن.
• همه‌ی تگ‌ها رو ببند.
• منطقت رو خارج JSX آماده کن.
• برای لیست‌ها key یکتا بذار.