آموزش کامنت‌گذاری در JSX – روش صحیح نوشتن توضیحات در ری‌اکت

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

چرا کامنت‌گذاری در JSX متفاوت است؟

JSX در واقع ترکیبی از جاوااسکریپت و HTML است، اما کامنت‌های HTML معمولی (<!-- -->) در JSX کار نمی‌کنند، زیرا JSX توسط Babel به کد جاوااسکریپت تبدیل می‌شود. بنابراین باید از سینتکس کامنت‌های جاوااسکریپت داخل آکولاد {} استفاده کنیم.

روش‌های کامنت‌گذاری در JSX

۱. کامنت تک‌خطی (Single-line)

برای کامنت تک‌خطی در JSX، از // داخل {} استفاده می‌کنیم:

{/* این یک کامنت تک خطی در JSX است */}

۲. کامنت چندخطی (Multi-line)

برای کامنت‌های چندخطی، از /* */ داخل {} استفاده می‌کنیم:

{/* 
  این یک کامنت چند خطی است
  می‌توانید توضیحات بیشتری بنویسید
  و کد خود را مستند کنید
*/}

کامنت در بخش‌های مختلف JSX

کامنت در بخش return (داخل JSX)

تنها جایی که باید از {/* */} استفاده کنید، داخل بخش JSX (درون return) است:

function MyComponent() {
  return (
    <div>
      {/* این کامنت داخل JSX است */}
      <h1>متن اصلی</h1>
      {/* کامنت بعد از تگ */}
    </div>
  );
}

کامنت در بخش جاوااسکریپت (خارج از JSX)

در بخش‌های جاوااسکریپتی (خارج از return)، مانند بقیه کدهای جاوااسکریپت کامنت می‌نویسیم:

function MyComponent() {
  // این یک کامنت جاوااسکریپتی است
  const name = "علی";
  
  /*
    این هم یک کامنت چند خطی
    در بخش جاوااسکریپت
  */
  
  return (
    <div>
      <h1>سلام {name}</h1>
    </div>
  );
}

بهترین شیوه‌های کامنت‌گذاری

• کامنت‌های مفید بنویسید: دلیل کد را توضیح دهید، نه خود کد را.
• از کامنت برای توضیح منطق پیچیده استفاده کنید.
• کامنت‌های اضافی حذف کنید تا کد تمیز بماند.
• از کامنت برای TODO و کارهای آینده استفاده کنید:

{/* TODO: اضافه کردن اعتبارسنجی فرم */}

جمع‌بندی

کامنت‌گذاری در JSX با سینتکس {/* کامنت */} انجام می‌شود و کامنت‌های HTML معمولی در آن کار نمی‌کنند. در بخش‌های جاوااسکریپت (خارج از JSX)، از کامنت‌های معمولی جاوااسکریپت (// و /* */) استفاده می‌کنیم. با رعایت این نکات، کدهای خود را خوانا، مستند و قابل نگهداری کنید.