JSX و نحوه نگارش آن

JSX چیست و چگونه نوشته می‌شود

در درس‌های قبلی دیدیم که رابط کاربری در React، توصیفی از حالت فعلی برنامه است و این توصیف در قالب کامپوننت‌ها سازمان‌دهی می‌شود. اما این توصیف در عمل با چه نحوی (Syntax) نوشته می‌شود؟ پاسخ، JSX است.

JSX چیست

JSX مخفف JavaScript XML است؛ افزونه‌ای بر روی نحو جاوااسکریپت که اجازه می‌دهد ساختاری شبیه HTML را مستقیماً داخل کد جاوااسکریپت بنویسیم. برای مثال:

const element = <h1>سلام دنیا</h1>;

نکته مهم این است که JSX خودش یک زبان مستقل نیست و مرورگر به‌طور مستقیم آن را نمی‌فهمد. کدهای JSX توسط ابزارهایی مانند Babel به فراخوانی‌های تابع جاوااسکریپت (به‌طور مشخص React.createElement) تبدیل می‌شوند. یعنی کد بالا در واقعیت چیزی شبیه به این اجرا می‌شود:

const element = React.createElement("h1", null, "سلام دنیا");

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

JSX یک Expression است

چون JSX در نهایت به فراخوانی تابع تبدیل می‌شود، می‌توان از آن مانند هر مقدار دیگری در جاوااسکریپت استفاده کرد؛ یعنی می‌توان آن را در یک متغیر ذخیره کرد، به تابعی پاس داد یا از یک تابع بازگرداند.

قوانین مهم نگارش JSX

چند قانون نحوی باید در نوشتن JSX رعایت شود:

۱. بازگرداندن یک ریشه واحد

یک بلوک JSX باید دقیقاً یک عنصر ریشه داشته باشد. کد زیر معتبر نیست، چون دو عنصر مجزا در کنار هم بازگردانده شده‌اند:

// نامعتبر
return (
  <h1>عنوان</h1>
  <p>متن</p>
);

برای رفع این مشکل باید همه عناصر را داخل یک عنصر والد قرار داد:

// معتبر
return (
  <div>
    <h1>عنوان</h1>
    <p>متن</p>
  </div>
);

۲. بسته شدن تمام تگ‌ها

برخلاف HTML، در JSX تگ‌هایی مانند <img> یا <br> که در HTML گاهی بدون بسته شدن نوشته می‌شوند، حتماً باید به شکل خودبسته (Self-closing) نوشته شوند:

<img src="photo.jpg" />
<br />

۳. استفاده از className به‌جای class

چون class یک کلمه رزرو‌شده در جاوااسکریپت است، برای تعیین کلاس CSS در JSX از ویژگی className استفاده می‌شود:

<div className="card">...</div>

یک مثال کامل

در ادامه یک کامپوننت ساده را می‌بینیم که این قوانین را رعایت کرده است. می‌توانید این مثال را اجرا کنید تا خروجی واقعی آن را ببینید:

یک کامپوننت ساده با JSX

function App() {
  return (
    <div className="card">
      <h2>معرفی</h2>
      <p>این یک پاراگراف ساده در JSX است.</p>
    </div>
  );
}

برای دیدن پیش‌نمایش کامپوننت، روی Run بزنید.

جمع‌بندی

JSX نحوی است که به ما اجازه می‌دهد ساختار رابط کاربری را با ظاهری شبیه HTML، اما در دل کد جاوااسکریپت بنویسیم. این کد در نهایت توسط ابزارهایی مانند Babel به فراخوانی تابع جاوااسکریپت تبدیل می‌شود. در درس بعدی به سراغ استفاده از Expressionهای جاوااسکریپت داخل JSX و همچنین Fragment خواهیم رفت.