مقدمه JSX (JSX Intro)

در این صفحه یک مقدمه JSX خیلی ساده می بینیم. JSX رو می توانی مثل زبانی فکر کنی که ترکیب جاوااسکریپت و HTML است و کمک می کند رابط کاربری ری اکت را راحت تر و شبیه HTML بنویسی.

JSX چیست؟

واژه JSX کوتاه شده JavaScript XML است. یعنی سینتکسی شبیه HTML اما داخل جاوااسکریپت. با JSX می توانی مستقیما تگ های شبیه HTML را داخل کد ری اکت بنویسی و دیگر لازم نیست دستی از متدهایی مثل createElement() یا appendChild() استفاده کنی.

در نهایت، JSX در مرحله ساخت (Build) به جاوااسکریپت معمولی تبدیل می شود. پس مرورگر هنوز فقط جاوااسکریپت را اجرا می کند، اما تو کد را خواناتر و شبیه HTML می نویسی.

کدنویسی JSX و بدون JSX

اول ببینیم وقتی JSX داریم، تعریف یک عنصر چقدر ساده می شود. در مثال زیر یک تگ h1 مستقیما داخل جاوااسکریپت نوشته شده است.

مثال 1: ساخت عنصر با JSX

const myElement = <h1>I Love JSX!</h1>;

createRoot(document.getElementById('root')).render(
  myElement
);

مشاهده در ادیتور

اینجا myElement دقیقا شبیه یک تگ HTML نوشته شده است. سپس با createRoot(...).render() همان عنصر روی صفحه در محل المان با id برابر با root نمایش داده می شود.

مثال 2: همان کد بدون JSX

حالا همان خروجی را بدون JSX می سازیم. اینجا باید از تابع React.createElement() استفاده کنیم.

const myElement = React.createElement(
  'h1',
  {},
  'I do not use JSX!'
);

createRoot(document.getElementById('root')).render(
  myElement
);

مشاهده در ادیتور

بدون JSX باید نوع تگ، ویژگی ها و متن را جداگانه بدهیم. وقتی ساختار پیچیده تر شود، این روش خیلی شلوغ و سخت خوان می شود. برای همین مقدمه JSX اهمیت زیادی در شروع یادگیری ری اکت دارد.

استفاده از عبارت ها داخل JSX

در JSX می توانی داخل آکولادهای {} هر عبارت جاوااسکریپت معتبر را بنویسی. منظور از عبارت (Expression) چیزی است که یک مقدار برمی گرداند، مثل جمع دو عدد یا مقدار یک متغیر.

مثال: استفاده از عبارت در متن

const myElement = <h1>React is {5 + 5} times better with JSX</h1>;

مشاهده در ادیتور

عبارت 5 + 5 محاسبه می شود و نتیجه، یعنی 10، در متن نمایش داده می شود. همین ایده را بعدا برای نمایش داده های پویا، نتیجه توابع یا مقادیر state استفاده می کنیم.

نوشتن بلوک های بزرگ JSX

وقتی JSX چند خطی می نویسی، معمولا آن را داخل پرانتز قرار می دهیم. این کار خوانایی را بالا می برد و خط شکن خودکار و قالب بندی را قابل پیش بینی تر می کند.

مثال: ساخت یک لیست چندخطی

const myElement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

مشاهده در ادیتور

می توانی این بلوک را مثل یک متغیر ساده به render بدهی یا داخل یک کامپوننت برگردانی. در ظاهر شبیه HTML است، اما در واقع JSX است که بعدا به جاوااسکریپت تبدیل می شود.

الزام وجود یک عنصر ریشه در JSX

در JSX همیشه باید فقط یک عنصر ریشه (Top Level Element) برگردانی. یعنی همه تگ ها باید داخل یک والد قرار بگیرند.

مثال: پیچیدن چند پاراگراف داخل یک div

const myElement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

مشاهده در ادیتور

اگر این دو پاراگراف را بدون div بنویسی، JSX خطا می دهد. چون خروجی تابع کامپوننت باید دقیقا یک ریشه داشته باشد.

نکته: اگر نمی خواهی یک تگ اضافه واقعی مثل div در DOM داشته باشی، می توانی از Fragment استفاده کنی؛ یعنی یک پوسته نامرئی.

مثال: استفاده از Fragment به جای div

const myElement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

مشاهده در ادیتور

Fragment مثل یک جعبه نامرئی عمل می کند. در JSX یک والد داریم، اما در DOM تگ اضافه تولید نمی شود. این کار برای چیدمان های تمیز خیلی مهم است.

الزام بستن همه تگ ها در JSX

JSX قوانین XML را دنبال می کند، پس همه تگ ها باید کامل بسته شوند. حتی تگ های تک خط مثل input باید با /> تمام شوند.

مثال: بستن صحیح تگ input

const myElement = <input type="text" />;

مشاهده در ادیتور

اگر تگ را نبندی، JSX خطای سینتکس می دهد. این موضوع کمک می کند ساختار HTML همیشه تمیز و بدون اشتباه بماند.

ویژگی class در JSX و استفاده از className

در جاوااسکریپت، واژه class یک کلمه رزرو شده برای تعریف کلاس ها است. برای همین در JSX نمی توانی از ویژگی class به طور مستقیم استفاده کنی.

نکته: در JSX به جای class همیشه از className استفاده کن. هنگام تبدیل JSX به HTML، این مقدار دوباره به class تبدیل می شود.

مثال: استفاده از className در JSX

const myElement = <h1 className="myclass">Hello World</h1>;

مشاهده در ادیتور

اگر اشتباهی از class استفاده کنی، ابزارهای ساخت یا خود ری اکت معمولا به تو هشدار می دهند. پس از همین اول عادت کن همیشه className بنویسی.

کامنت نوشتن در JSX

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

مثال: کامنت وسط متن JSX

const myElement = <h1>Hello {/* Wonderful */} World </h1>;

مشاهده در ادیتور

اینجا کلمه Wonderful به صورت کامنت نوشته شده است. مرورگر آن را نمی بیند، اما تو می توانی برای توضیح بخش های حساس JSX از این روش کمک بگیری.

مقدمه JSX در کامپوننت های ری اکت

ری اکت براساس کامپوننت (Component) کار می کند. کامپوننت مثل یک تابع است که در نهایت JSX برمی گرداند. همین JSX بعدا به HTML واقعی تبدیل می شود.

مثال: کامپوننت ساده با JSX

function Car() {
  return (
    <>
      <h2>My Car</h2>
      <p>It is a Ford Mustang.</p>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Car />
);

مشاهده در ادیتور

کامپوننت Car یک تکه JSX شامل عنوان و متن برمی گرداند. با نوشتن <Car /> موقع رندر، این تکه روی صفحه نمایش داده می شود. دقیقا مثل استفاده از یک تگ جدید HTML است.

مثال: استفاده از متغیرها داخل کامپوننت JSX

function Car() {
  const brand = "Ford";
  const model = "Mustang";
  return (
    <>
      <h2>My Car</h2>
      <p>It is a {brand} {model}.</p>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Car />
);

مشاهده در ادیتور

اینجا دو متغیر brand و model داریم. با قرار دادن آنها داخل آکولاد در JSX، متن نهایی به صورت پویا ساخته می شود. همین ایده بعدا برای props و state هم استفاده می شود.

تمرین مرحله به مرحله برای مقدمه JSX

برای اینکه مقدمه JSX واقعا در ذهن بماند، این سه قدم را انجام بده.

1. یک عنصر h1 با JSX بساز که نام خودت را نشان دهد و آن را با createRoot(...).render() روی صفحه نمایش بده.
2. همان خروجی را بدون JSX و با React.createElement() بساز و کدها را از نظر خوانایی مقایسه کن.
3. یک کامپوننت ساده بساز که یک لیست میوه با JSX برگرداند و برای هر آیتم از یک آرایه جاوااسکریپتی استفاده کن.

اگر می خواهی در ادامه بیشتر روی عبارت ها در JSX تمرکز کنی، صفحه عبارت ها در JSX (JSX Expressions) گزینه بعدی عالی است.

همچنین می توانی قبل از این صفحه یا بعد از آن، به بخش رشته های قالبی (Template Strings) (ES6 Template Strings) برگردی تا نحوه ساخت متن های پویا را بهتر ببینی.

برای مرور دوباره این مطلب، خود همین صفحه مقدمه JSX همیشه می تواند شروع خوبی باشد، مخصوصا وقتی بعدا وارد موضوعات پیشرفته تر می شوی.

جمع بندی سریع

• JSX روشی است برای نوشتن رابط کاربری شبیه HTML داخل جاوااسکریپت.
• همیشه فقط یک عنصر ریشه در خروجی JSX داشته باش.
• همه تگ ها در JSX باید کامل بسته شوند.
• به جای class در JSX از className استفاده کن.
• کامپوننت های ری اکت در نهایت JSX برمی گردانند و HTML را می سازند.