📚 بخش 14: رندر کردن داده‌ها در JSX (کامل‌ترین مرجع)

1. مقدمه — چرا این مبحث کلیدی است؟

رندر کردن داده‌ها در JSX یعنی جان بخشیدن به رابط کاربری.
تصور کن اپلیکیشنی داری که:

• لیست محصولات رو از سرور می‌گیره
• موجودی انبار رو بر اساس خریدها کاهش می‌ده
• پیام خوشامد رو برای هر کاربر شخصی‌سازی می‌کنه

تمام این‌ها بدون توانایی «نمایش داده‌ها در JSX» ممکن نیست.

در برنامه‌نویسی سنتی (مثل HTML خالص)، برای تغییر داده باید صفحه رو رفرش می‌کردی یا از DOM Manipulation استفاده می‌کردی.
اما در React تنها با تغییر State/Props، داده‌ها به‌صورت اتوماتیک و بهینه دوباره در JSX رندر می‌شن.

---

2. تعریف “رندر کردن داده‌ها”

رندر کردن داده‌ها یعنی قرار دادن مقادیر پویا (جاوااسکریپت) در درون JSX به‌طوری که مرورگر آن را به HTML قابل‌نمایش تبدیل کند.

📌 در JSX، این کار با استفاده از {}
به‌عنوان Expression Placeholder انجام می‌شود.

---

3. پشت‌صحنه — فرآیند رندر چگونه عمل می‌کند؟

وقتی در JSX می‌نویسیم:

<h1>{name}</h1>

ابزار Babel این رو به کد ساده جاوااسکریپت تبدیل می‌کنه:

React.createElement("h1", null, name);

یعنی:

1. یک h1 ساخته میشه
2. name به فرزند اون اضافه میشه
3. در Virtual DOM ثبت میشه

React بعدش با الگوریتم Reconciliation تغییرات رو پیدا می‌کنه و فقط قسمت‌های تغییر‌یافته رو به‌روزرسانی می‌کنه.

---

4. داده‌های قابل‌نمایش در JSX

• رشته‌ها (String)
• اعداد (Number)
• نتایج محاسبات
• خروجی توابع
• لیست‌ها (Array)
• JSX ذخیره‌شده در متغیر
• نتیجه شرط‌ها

---

5. تکنیک‌های رندر داده‌ها + مثال کامل

---

تکنیک 1 — رندر متغیرها

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

📌 هر نوع متغیر قابل نمایش (string, number) رو میتونی مستقیم بذاری داخل {}.

---

تکنیک 2 — رندر محاسبات

function CartInfo() {
  const price = 48000;
  const tax = 0.09;
  return <p>قیمت نهایی: {price + price * tax} تومان</p>;
}

مزیت: محاسبه بدون تغییر دستی.

---

تکنیک 3 — خروجی توابع

function App() {
  function getTime() {
    return new Date().toLocaleTimeString();
  }
  return <p>ساعت: {getTime()}</p>;
}

هر بار State یا props تغییر کنه تابع دوباره اجرا میشه.

---

تکنیک 4 — رندر شرطی (سه روش)

روش 1 — شرط سه‌تایی

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

روش 2 — عملگر &&

function AdminPanel({ isAdmin }) {
  return (
    <div>
      {isAdmin && <button>حذف کاربر</button>}
    </div>
  );
}

روش 3 — خارج از JSX

function Panel({ isAdmin }) {
  let content;
  if (isAdmin) {
    content = <button>حذف کاربر</button>;
  }
  return <div>{content}</div>;
}

---

تکنیک 5 — رندر آرایه‌ها با map

function ProductList() {
  const products = ["لباس", "کفش", "کلاه"];
  return (
    <ul>
      {products.map((p, i) => <li key={i}>{p}</li>)}
    </ul>
  );
}

📌 حتماً key رو بدی.

---

تکنیک 6 — JSX ذخیره‌شده در متغیر

function PageTitle() {
  const titleJSX = <h1>عنوان صفحه</h1>;
  return (
    <div>{titleJSX}</div>
  );
}

---

تکنیک 7 — استفاده از JSON.stringify

برای نمایش اشیاء:

function ShowObject() {
  const person = { name: "سارا", age: 25 };
  return <pre>{JSON.stringify(person)}</pre>;
}

---

6. قوانین طلایی رندر کردن داده‌ها

قانون 1 — همیشه از {} برای داده‌های پویا استفاده کن

بدون {}، متغیر به عنوان متن ساده شناخته میشه.

قانون 2 — object و boolean رو مستقیم نمایش نده

React نمی‌دونه object رو چطور HTML کنه، باید به string یا JSX تبدیل بشه.

قانون 3 — منطق سنگین رو خارج JSX انجام بده

برای خوانایی و بهبود عملکرد.

قانون 4 — در map همیشه key یکتا بده

برای عملکرد بهتر Virtual DOM.

---

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

function Dashboard() {
  const user = { name: "علی", role: "admin" };
  const tasks = ["پیام", "سفارش", "بروزرسانی"];
  const isPremium = true;

  const taskList = tasks.map((t, index) => <li key={index}>{t}</li>);

  return (
    <div>
      <h2>نام: {user.name}</h2>
      <p>نقش: {user.role}</p>
      {isPremium ? <p>حساب پریمیوم</p> : <p>حساب معمولی</p>}
      <ul>{taskList}</ul>
    </div>
  );
}

📌 نکات:

• object مستقیم نمایش داده نشده، از user.name استفاده شده
• map بیرون JSX نوشته شده
• شرط سه‌تایی استفاده شده
• key داده شده

---

8. اشتباهات رایج

❌ نمایش مستقیم object:

const user = {name: "علی"};
return <p>{user}</p>; // [object Object]

❌ بدون key در map:

items.map(item => <li>{item}</li>)

❌ if مستقیم داخل JSX:

return <p>{ if (isLogin) "سلام" }</p>;

---

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

تمرین 1 — لیست کاربران

const users = ["علی", "سارا", "مریم"];

نمایش در <ul>.

---

تمرین 2 — محاسبه تخفیف

const price = 200000;
const discount = 0.1;

نمایش قیمت نهایی با ۱۰٪ تخفیف.

---

تمرین 3 — شرطی پیشرفته

اگر user.role = “admin” دکمه حذف نمایش داده شه،
اگر “user” فقط پیام خوشامد.

---

تمرین 4 — نمایش API فرضی

const products = [
  {id: 1, name: "کتاب", price: 85000},
  {id: 2, name: "خودکار", price: 5000}
];

نمایش در جدول با قیمت فرمت‌شده.

---

10. جمع‌بندی

• در JSX هر داده پویا داخل {} میره
• object و boolean مستقیم نمایش داده نمیشن
• لیست‌ها رو با map می‌سازیم و key می‌دیم
• منطق سنگین رو خارج JSX تعریف کن
• شرطی‌سازی را با ? : یا && انجام بده