قوانین نگارشی JSX و تفاوت آن با HTML

سینتکس JSX در عمل

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

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

یکی از مهم‌ترین قوانینی که باید به خاطر بسپارید این است که یک کامپوننت React تنها می‌تواند یک عنصر ریشه (root element) را برگرداند. شما نمی‌توانید چندین عنصر را به صورت هم‌سطح برگردانید.

کد نادرست

JAVASCRIPT (Incorrect JSX)

// This will cause an error
return (
  <h1>My App</h1>
  <p>Welcome to the application.</p>
);

راه‌حل: استفاده از یک تگ دربرگیرنده یا Fragment

برای حل این مشکل، باید تمام عناصر خود را در داخل یک تگ والد مشترک، مانند یک <div>، قرار دهید.

JAVASCRIPT (Correct JSX)

return (
  <div>
    <h1>My App</h1>
    <p>Welcome to the application.</p>
  </div>
);

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

JAVASCRIPT (Using Fragments)

return (
  <>
    <h1>My App</h1>
    <p>Welcome to the application.</p>
  </>
);

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

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

JAVASCRIPT (JSX)

// Correct way to write an image tag in JSX
<img src="path/to/image.jpg" alt="description" />

// Correct way to write a line break
<br />

۳. اتریبیوت‌ها در JSX

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

className به جای class

مهم‌ترین تفاوت، اتریبیوت class است. از آنجایی که class یک کلمه کلیدی برای تعریف کلاس‌ها در جاوااسکریپت است، در JSX باید از className برای اختصاص دادن کلاس‌های CSS به یک عنصر استفاده کنید.

JAVASCRIPT (JSX)

// Use className instead of class
const element = <div className="container">Hello</div>;

نام‌گذاری camelCase

به طور کلی، تمام اتریبیوت‌های HTML که از چند کلمه تشکیل شده‌اند (مانند onclick یا tabindex)، در JSX با استفاده از سبک نام‌گذاری camelCase نوشته می‌شوند. برای مثال، اتریبیوت for در تگ <label> به htmlFor تبدیل می‌شود.

در این درس، با قوانین اصلی و تفاوت‌های کلیدی سینتکس JSX در مقایسه با HTML آشنا شدیم. به خاطر سپردن این قوانین (بازگرداندن یک عنصر واحد، بستن تمام تگ‌ها، و استفاده از className و camelCase برای اتریبیوت‌ها) به شما کمک می‌کند تا از بسیاری از خطاهای رایج جلوگیری کنید. در درس بعدی، به «درج داده‌های داینامیک در JSX» خواهیم پرداخت و خواهیم دید که چگونه می‌توانیم مقادیر متغیرها و عبارات جاوااسکریپت را مستقیماً در ساختار UI خود نمایش دهیم.