نوشتن ساختار با JSX

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

چیزهایی که در این درس یاد می‌گیرید:

• چرا React منطق کدنویسی و ساختار ظاهر (Markup) را با هم ترکیب می‌کند؟

• تفاوت‌های اصلی JSX با HTML چیست؟

• چگونه با رعایت قوانین ۳گانه JSX، کدهای بدون خطا بنویسیم؟

چرا منطق برنامه و ظاهر سایت یک‌جا مدیریت می‌شوند؟

در وب سنتی، رسم بر این بود که محتوا در فایل HTML، طراحی در فایل CSS و منطق برنامه در فایل JavaScript به صورت کاملاً جداگانه نگهداری می‌شدند.

اما با تعاملی‌تر شدن وب، عملاً این منطق جاوااسکریپت بود که تعیین می‌کرد چه محتوایی به کاربر نشان داده شود (جاوااسکریپت کنترل HTML را به دست گرفت!). به همین دلیل در React، منطق رندر (Rendering Logic) و ساختار ظاهر (Markup) در یک مکان واحد به نام کامپوننت در کنار هم زندگی می‌کنند.

نگهداری منطق و ظاهر یک دکمه در کنار هم، تضمین می‌کند که با هر تغییر، این دو بخش همیشه با یکدیگر هماهنگ (Sync) باقی بمانند. در مقابل، بخش‌های بی‌ارتباط به هم (مثل ظاهر دکمه و ظاهر منوی کناری) از یکدیگر ایزوله هستند و تغییر یکی، دیگری را خراب نمی‌کند.

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

تله بزرگ: چرا کدهای HTML مستقیم در React کار نمی‌کنند؟

فرض کنید یک کد HTML کاملاً سالم دارید و می‌خواهید آن را داخل کامپوننت خود قرار دهید:

<h1>برنامه‌های هدی لامار</h1>
<img src="photo.jpg" alt="Hedy Lamarr" class="photo">
<ul>
    <li>اختراع چراغ راهنمایی جدید
    <li>تمرین یک سکانس فیلم
</ul>

اگر این کد را مستقیماً داخل کلمه کلیدی return در کامپوننت کپی کنید، برنامه ارور داده و متوقف می‌شود. چرا؟ چون JSX بسیار سخت‌گیرتر از HTML است و قوانین مشخصی دارد.

قوانین ۳ گانه و حیاتی JSX

برای تبدیل بدون نقص کدهای HTML به JSX، رعایت ۳ قانون زیر الزامی است:

۱. بازگرداندن یک المان ریشه واحد (Single Root Element)

یک کامپوننت برای رندر کردن چند المان همسایه، حتماً باید آن‌ها را داخل یک تگ والد واحد بسته‌بندی کند. مثلاً می‌توانید همه را داخل یک <div> بگذارید.

اگر تمایلی ندارید که یک تگ <div> اضافه به ساختار کدهای مرورگرتان تزریق شود، می‌توانید از تگ‌های خالی <> و </> استفاده کنید که به آن Fragment می‌گویند:

<>
  <h1>برنامه‌های هدی لامار</h1>
  <img src="photo.jpg" alt="Hedy Lamarr" className="photo" />
  <ul>...</ul>
</>

📘 چرا تگ‌های JSX نیاز به یک والد دارند؟ در پشت صحنه، کدهای JSX تبدیل به اشیاء (Objects) استاندارد جاوااسکریپت می‌شوند. همان‌طور که یک تابع جاوااسکریپتی نمی‌تواند بدون آرایه، دو شیء را همزمان برگشت (Return) دهد، یک تابع کامپوننت نیز نمی‌تواند دو تگ مجزا را بدون داشتن یک تگ والد برگرداند.

۲. بستن تمام تگ‌ها (Close All Tags)

در HTML معمولی، بستن برخی تگ‌ها اختیاری بود (مثل رها کردن انتهای تگ <li> یا <img >). اما در JSX تمام تگ‌ها باید به صورت صریح بسته شوند.

• تگ‌های خودبسته (Self-closing) مثل عکس‌ها باید یک اسلش در انتها داشته باشند: <img />

• تگ‌های دوبرابری باید حتماً جفت پایانی داشته باشند: <li>شکلات</li>

۳. استفاده از شتری‌نویسی برای ویژگی‌ها (camelCase)

کدهای JSX در نهایت به جاوااسکریپت تبدیل می‌شوند و ویژگی‌های (Attributes) نوشته شده در JSX، تبدیل به کلیدهای (Keys) یک شیء جاوااسکریپتی خواهند شد. از آنجا که جاوااسکریپت محدودیت‌هایی برای نام‌گذاری کلیدها دارد (مثلاً نام کلید نمی‌تواند شامل خط تیره - باشد یا از کلمات رزرو شده مثل class استفاده کند)، بیشتر ویژگی‌ها در راکت به صورت camelCase نوشته می‌شوند.

• به جای stroke-width از strokeWidth استفاده می‌شود.

• به جای کلمه رزرو شده class از className استفاده می‌شود (برگرفته از اموال واقعی DOM).

<img 
  src="photo.jpg" 
  className="photo" //  به جای class
/>

⚠️ استثنای تاریخی: ویژگی‌های مربوط به دسترسی‌پذیری (aria-*) و داده‌های سفارشی (data-*) از این قاعده مستثنی هستند و دقیقاً مشابه HTML استاندارد، با همان خط تیره نوشته می‌شوند.

خروجی نهایی و استاندارد کامپوننت

با اعمال تمام قوانین بالا، کدهای HTML اولیه ما به یک کامپوننت JSX استاندارد، بهینه و بدون خطا تبدیل می‌شوند:

// App.js
export default function TodoList() {
  return (
    <>
      <h1>برنامه‌های هدی لامار</h1>
      <img
        src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
        alt="Hedy Lamarr"
        className="photo" // قانون ۳: شتری‌نویسی و className
      />
      <ul>
        {/* قانون ۲: بستن کامل تگ‌های li */}
        <li>اختراع چراغ راهنمایی جدید</li>
        <li>تمرین یک سکانس فیلم</li>
        <li>بهبود تکنولوژی فرکانس‌ها</li>
      </ul>
    </> // قانون ۱: استفاده از Fragment به عنوان ریشه واحد
  );
}

💡 پیشنهاد حرفه‌ای: تبدیل دستی ویژگی‌های حجم زیادی از کدهای HTML یا طرح‌های SVG به JSX کار خسته‌کننده‌ای است. برای راحتی کار در پروژه‌های واقعی، همیشه می‌توانید از ابزارهای آنلاین HTML to JSX Converter استفاده کنید تا کدهایتان را آنی و بی‌نقص به ساختار راکت تبدیل کنند.