JSX چیست؟ آموزش فرمت ترکیبی جاوااسکریپت و HTML در ری‌اکت

JSX که مخفف JavaScript XML است، یک فرمت نوشتاری و افزونه‌ی نحوی (Syntax Extension) برای زبان جاوااسکریپت می‌باشد که توسط تیم فیسبوک برای استفاده در کتابخانه ری‌اکت (React) معرفی شده است. این فرمت به شما اجازه می‌دهد تا کدهای HTML را مستقیماً درون فایل‌های جاوااسکریپت بنویسید و آنها را با منطق جاوااسکریپت ترکیب کنید.

در واقع JSX یک سینتکس شکر (Syntactic Sugar) است که در نهایت توسط ابزارهایی مانند Babel به کد استاندارد جاوااسکریپت تبدیل می‌شود. اگرچه استفاده از JSX در ری‌اکت اجباری نیست، اما به دلیل شباهت زیاد به HTML و خوانایی بالا، به روش غالب و توصیه‌شده برای نوشتن کامپوننت‌های ری‌اکت تبدیل شده است.

چرا از JSX استفاده کنیم؟ (مزایا)

۱. خوانایی بالا و شباهت به HTML ابزار JSX ظاهری بسیار شبیه به HTML دارد، بنابراین توسعه‌دهندگان به راحتی می‌توانند ساختار رابط کاربری را درک کنند. این ویژگی باعث می‌شود که کد ری‌اکت خوانا، قابل‌درک و نگهداری آسان‌تر باشد.

۲. ترکیب منطق و نمایش (Logic + UI) در JSX می‌توانید مستقیماً از کدهای جاوااسکریپت (مانند متغیرها، توابع و حلقه‌ها) درون ساختار HTML استفاده کنید. این کار باعث می‌شود که رابط کاربری به صورت پویا (Dynamic) و بر اساس داده‌ها تغییر کند.

۳. تشخیص خطا در زمان کامپایل از آنجایی که JSX در نهایت به کد جاوااسکریپت تبدیل می‌شود، بسیاری از خطاهای تایپی و ساختاری در همان مرحله کامپایل شناسایی شده و از بروز خطاهای زمان اجرا (Runtime) جلوگیری می‌شود.

۴. امنیت بیشتر (XSS Prevention) ابزار JSX به طور پیش‌فرض از حملات تزریق کد (مانند XSS) جلوگیری می‌کند؛ زیرا مقادیر درج شده در JSX به صورت خودکار ایسکیپ (Escaped) می‌شوند.

قوانین و نکات کلیدی در JSX

• استفاده از برای کد جاوااسکریپت: برای نوشتن کد جاوااسکریپت درون JSX، باید آن را داخل آکولاد {} قرار دهید.

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

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

  <div className="container">محتوا</div>

• همه تگ‌ها باید بسته شوند: تگ‌های خودبسته‌شونده مانند <img> و <input> باید با اسلش بسته شوند: <img />.

• خروجی تنها یک عنصر ریشه: هر کامپوننت فقط می‌تواند یک عنصر والد داشته باشد. برای گروه‌بندی بدون اضافه کردن عنصر اضافی به DOM، از Fragment (یا <>...</>) استفاده کنید.

• نام‌گذاری CamelCase برای ویژگی‌ها: ویژگی‌های HTML مانند onclick به onClick و tabindex به tabIndex تغییر می‌کنند.

مثال عملی JSX

function App() {
  const title = "سلام دنیا!";
  const isLoggedIn = true;

  return (
    <>
      <div className="header">
        <h2>{title}</h2>
        {isLoggedIn ? <p>خوش آمدید!</p> : <p>لطفاً وارد شوید</p>}
      </div>
      <div>
        <p>این یک متن ساده است</p>
      </div>
    </>
  );
}

تفاوت JSX با HTML خالص

جمع‌بندی

ابزار JSX یک ابزار قدرتمند و ضروری در اکوسیستم ری‌اکت است که با ترکیب زیبای HTML و جاوااسکریپت، تجربه کدنویسی را لذت‌بخش‌تر و توسعه رابط‌های کاربری را سریع‌تر می‌کند. با یادگیری قوانین ساده JSX، می‌توانید کامپوننت‌های پویا، خوانا و قابل‌استفاده مجدد بسازید و از تمام توانایی‌های ری‌اکت بهره‌مند شوید.