عبارت ها در JSX (JSX Expressions)

در این صفحه می خواهیم بفهمیم «عبارت ها در JSX» دقیقا چه هستند. خلاصه اش این است که می توانی تکه های جاوااسکریپت را داخل JSX بنویسی و خروجی آن ها را مستقیم روی صفحه ببینی؛ شبیه وقتی در ماشین حساب مدرسه عدد می زنی و سریع جواب می بینی.

عبارت ها در JSX چیست؟

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

ری اکت این عبارت را محاسبه می کند و نتیجه را در DOM نشان می دهد. DOM همان ساختار درختی صفحه است که مرورگر بر اساس آن صفحه را می سازد؛ مثل نقشه کلاس که همه نیمکت ها را نشان می دهد.

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

اولین حالت، استفاده مستقیم از یک عبارت است؛ مثلا ضرب دو عدد. این دقیقا شبیه حل یک مسئله ساده ریاضی وسط متن است.

مثال: محاسبه اسب بخار با یک عبارت

function Car() {
  return (
    <>
      <h1>My car</h1>
      <p>It has {218 * 1.36} horsepower</p>
    </>
  );
}

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

اینجا 218 قدرت بر حسب کیلووات است و در 1.36 ضرب می شود تا اسب بخار حساب شود. خود متن JSX فقط عبارت {218 * 1.36} را می بیند، اما روی صفحه عدد نهایی نمایش داده می شود.

استفاده از متغیرها در JSX

متغیر (Variable) مثل جعبه ای است که یک مقدار داخلش نگه می داری. در JSX هم متغیر یک عبارت معتبر است، پس می توانی مستقیم داخل آکولاد از آن استفاده کنی.

مثال: ذخیره نتیجه در متغیر و استفاده در JSX

function Car() {
  const hp = 218 * 1.36;
  return (
    <>
      <h1>My car</h1>
      <p>It has {hp} horsepower</p>
    </>
  );
}

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

اینجا یک بار محاسبه را انجام می دهیم و در متغیر hp می ریزیم. بعد همان متغیر را داخل JSX نمایش می دهیم. این روش وقتی محاسبه طولانی تر باشد، کد را تمیزتر می کند.

فراخوانی تابع داخل JSX

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

مثال: تبدیل کیلووات به اسب بخار با تابع

function kwtohp(kw) {
  return kw * 1.36;
}

function Car() {
  return (
    <>
      <h1>My car</h1>
      <p>It has {kwtohp(218)} horsepower</p>
    </>
  );
}

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

تابع kwtohp مقدار کیلووات را می گیرد و در 1.36 ضرب می کند. سپس در JSX فقط می نویسی {kwtohp(218)} و نتیجه آماده است. این کار برای خوانایی و استفاده مجدد از منطق خیلی مفید است.

استفاده از ویژگی های شیء در JSX

شیء (Object) مثل یک کارت اطلاعات است که چند ویژگی مختلف دارد؛ مثلا نام ماشین، مدل، رنگ. در JSX می توانی این ویژگی ها را مستقیم بخوانی.

مثال: نمایش ویژگی های یک شیء داخل JSX

function Car() {
  const myobj = {
    name: "Fiat",
    model: "500",
    color: "white"
  };
  return (
    <>
      <h1>
        My car is a {myobj.color} {myobj.name} {myobj.model}
      </h1>
    </>
  );
}

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

با نقطه گذاری مثل myobj.color به ویژگی های شیء دسترسی داریم. بعد با قرار دادن آن ها داخل آکولاد، یک جمله پویا می سازیم که اگر بعدا رنگ یا مدل عوض شود، متن خودکار به روز می شود.

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

برای اینکه «عبارت ها در JSX» خوب در ذهن بماند، این سه تمرین را انجام بده.

1. یک کامپوننت ساده بساز که داخل JSX عدد 5 را در 7 ضرب کند و نتیجه را در یک تگ h2 نمایش دهد.
2. همان کامپوننت را طوری تغییر بده که اول نتیجه ضرب را در یک متغیر ذخیره کند و بعد متغیر را داخل JSX نشان دهد.
3. یک شیء برای مشخصات دانش آموز بساز و نام، کلاس و معدل را با استفاده از ویژگی های شیء داخل JSX نمایش بده.

اگر مقدمه JSX را ندیده ای، حتما یک بار صفحه مقدمه JSX (JSX Intro) را بخوان تا تصویر کلی هم داشته باشی.

برای ادامه مسیر، بعد از فهمیدن عبارت ها در JSX می توانی به بخش ویژگی ها در JSX (JSX Attributes) سر بزنی و ببینی چطور مقدار ویژگی ها را هم با عبارت های JSX پر می کنیم.

همچنین هر وقت خواستی سریع فقط همین موضوع را مرور کنی، صفحه عبارت ها در JSX یک مرجع جمع وجور برایت می ماند.

جمع بندی سریع

• عبارت ها در JSX داخل آکولاد { } نوشته می شوند.
• می توانی از عملیات، متغیر، تابع و شیء استفاده کنی.
• ری اکت عبارت را حساب می کند و نتیجه را روی صفحه نشان می دهد.
• قرار دادن منطق در تابع یا متغیر، کد را خواناتر می کند.
• عبارت ها در JSX پایه ساخت رابط های کاربری پویا هستند.