JSX: گسترش JavaScript و مثال‌های استفاده

JSX چیست؟

JSX (JavaScript XML) — یک گسترش نحوی برای JavaScript است که اولین بار در React در سال 2013 معرفی شد. این امکان را به توسعه‌دهندگان می‌دهد تا ساختار واسط کاربری را به سبک اعلامی توصیف کنند و نشانه‌گذاری و منطق را در یک فایل ترکیب کنند.

قبل از ظهور JSX، توسعه‌دهندگان از قالب‌های متنی (Mustache، Handlebars) استفاده می‌کردند یا عناصر DOM را به صورت دستی از طریق document.createElement ایجاد می‌کردند. هر دو رویکرد دارای معایبی بودند: قالب‌های متنی از نظر انواع بررسی نمی‌شدند و ایجاد دستی DOM دست و پا گیر و مستعد خطا بود.

React مسیر متفاوتی را انتخاب کرد — جاسازی نشانه‌گذاری مستقیماً در کد. این تصمیم باعث بحث در جامعه شد، اما با گذشت زمان به یک استاندارد تبدیل شد. امروزه JSX نه تنها در React، بلکه در SolidJS، Preact، Qwik و حتی در Vue از طریق پلاگین‌ها استفاده می‌شود.

نحو پایه JSX

عنصر JSX شبیه یک تگ HTML به نظر می‌رسد، اما مستقیماً در JavaScript جاسازی می‌شود. هر عنصر به یک فراخوانی React.createElement با سه آرگومان ترانسپایل می‌شود: نوع عنصر، شیء props و عناصر فرزند. یک عنصر ریشه — یک قانون اجباری: عبارت JSX باید یک عنصر والد یا fragment بازگرداند.

import React from 'react';

// JSX پایه - یک عنصر ریشه
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

Fragment‌ها برای گروه‌بندی

وقتی به یک گره DOM اضافی نیاز نیست، از React.Fragment یا نحو کوتاه <></> استفاده کنید. Fragment‌ها یک عنصر DOM واقعی ایجاد نمی‌کنند، بلکه فقط گره‌های فرزند را گروه‌بندی می‌کنند. این به ویژه در جداول و لیست‌ها مفید است، جایی که یک لفاف اضافی ساختار HTML را مختل می‌کند.

function Columns() {
  return (
    <>
      <td>First</td>
      <td>Second</td>
    </>
  );
}

عبارات و متغیرها در JSX

هر عبارت JavaScript از طریق آکولاد در JSX جاسازی می‌شود { }. در داخل می‌توان از متغیرها، فراخوانی توابع، عملگرهای سه‌تایی و متدهای آرایه استفاده کرد. رندر شرطی از طریق عملگر سه‌تایی یا AND منطقی انجام می‌شود.

function Greeting({ name, isLoggedIn }) {
  const items = ['Red', 'Green', 'Blue'];

  return (
    <div>
      {/* Expression with variable */}
      <h1>Hello, {name}</h1>

      {/* Conditional rendering */}
      {isLoggedIn ?
        <p>Welcome back!</p :
        <button>Login</button>
      }

      {/* Render array */}
      <ul>
        {items.map(item =>
          <li key={item}>{item}</li>
        )}
      </ul>
    </div>
  );
}

محدودیت کلیدی — در داخل آکولادها فقط می‌توان از عبارات استفاده کرد، نه دستورات. نمی‌توان از if/else، for، switch استفاده کرد — فقط عملگر سه‌تایی، عملگرهای منطقی و متدهای آرایه. فراخوانی توابع، از جمله توابع پیکانی، مجاز است.

تفاوت‌های JSX و HTML

JSX از نظر ظاهری شبیه HTML است، اما تفاوت‌های اساسی دارد. ویژگی‌ها به صورت camelCase نوشته می‌شوند — className به جای class، onClick به جای onclick، tabIndex به جای tabindex. این به این دلیل است که JSX به JavaScript ترانسپایل می‌شود، جایی که خط تیره در نام ویژگی مجاز نیست.

یک تفاوت مهم دیگر — تگ‌های خود-بسته. در HTML برخی تگ‌ها (br، hr، input) ممکن است بسته نشوند. در JSX تمام تگ‌های خود-بسته باید اسلش بسته داشته باشند: <br />، <input />. نام ویژگی‌های SVG نیز به camelCase تبدیل می‌شوند: strokeWidth، fillOpacity.

چگونه JSX به JavaScript ترانسپایل می‌شود

مرورگرها JSX را مستقیماً نمی‌فهمند. قبل از اجرا، کد JSX از ترانسپایلر — Babel، TypeScript یا esbuild عبور می‌کند. هر عنصر JSX به یک فراخوانی createElement یا jsx/runtime تبدیل می‌شود.

تبدیل از طریق Babel

// JSX اصلی
const element = <h1 className="title">Hello</h1>;

// پس از ترانسپایل
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

از React 17، یک تبدیل JSX جدید ظاهر شد که نیازی به import React ندارد. import خودکار jsx-runtime امکان نوشتن کامپوننت‌ها را بدون import React from 'react' فراهم می‌کند. Babel و TypeScript این تبدیل را از طریق تنظیم {"runtime": "automatic"} پشتیبانی می‌کنند.

JSX خارج از React: Solid، Preact، Vue

اگرچه JSX با React مرتبط است، فریمورک‌های دیگر نیز از آن استفاده می‌کنند. SolidJS از JSX با کامپایل به گره‌های DOM واقعی، بدون Virtual DOM استفاده می‌کند. Preact — یک جایگزین سبک برای React با پشتیبانی کامل از JSX. Vue از JSX از طریق @vue/babel-plugin-jsx پشتیبانی می‌کند، اگرچه قالب اصلی آن template است.

تفاوت کلیدی — معنای عبارات. در React، عبارات JSX در هر رندر اجرا می‌شوند. در SolidJS، JSX یک بار کامپایل می‌شود و به‌روزرسانی‌ها از طریق سیگنال‌ها ردیابی می‌شوند. این بر عملکرد تأثیر می‌گذارد: SolidJS به Virtual DOM و reconciliaton نیاز ندارد، بنابراین رندر JSX سریع‌تر است.

در TypeScript، JSX در سطح زبان پشتیبانی می‌شود. فایل‌های با پسوند .tsx به طور خودکار نحو JSX را پردازش می‌کنند. تایپ‌سازی props — یکی از مزایای اصلی TypeScript + JSX: IDE ویژگی‌های مورد انتظار، انواع callback و الزام props را نشان می‌دهد.

بهترین روش‌های کار با JSX

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

قاعده تورفتگی — برای عناصر تودرتو تورفتگی رعایت کنید. هر سطح تودرتو یک سطح تورفتگی است. تگ بسته باید در سطح تگ باز باشد. برای ویژگی‌های طولانی از شکست خط استفاده کنید.

از توابع پیکانی inline در props خودداری کنید، اگر در هر رندر ایجاد می‌شوند. در چنین مواردی، callback را در useCallback بپیچید یا تابع را خارج از کامپوننت قرار دهید. کامپوننت‌های پیچیده را به کامپوننت‌های کوچک‌تر تقسیم کنید — هر کامپوننت باید مسئول یک واحد منطقی از رابط باشد.