JSX در ReactJS – آموزش ReactJS

  • یکشنبه ۵ اسفند ۱۳۹۷
  • بازدید ۲۵۳ نفر

reactjs jsx 6090 تصویر

JSX در ReactJS

React از JSX به جای جاوا اسکریپت معمولی استفاده می کند. استفاده از آن الزامی نیست، اما جوانب مثبت زیر را دارد.

  • JSX سریعتر است زیرا در هنگام کامپایل کد به جاوا اسکریپت کدها را بهینه سازی می کند.
  • type-safe است و بیشتر خطاهای موقع کامپایل را می توان پیدا و رفع کرد.
  • اگر با HTML آشنا باشید، ساده تر و سریعتر می توانید قالب مورد نظرتان را بنویسید.

استفاده از JSX

JSX بسیار شبیه به HTML معمولی است. ما در بخش آماده سازی محیط ReactJS از آن استفاده کردیم. به محتوای فایل App.js که یک div را باز میگرداند توجه کنید.

با اینکه JSX شبیه به HTML است اما هنگام استفاده از آن باید به چند نکته توجه داشته باشید.

عناصر تو در تو

اگر بخواهیم عناصر بیشتری را باز گردانیم، باید آن ها را در داخل یک عنصر دیگر (Container) قرار دهیم. برای نمونه در مثال زیر ما عناصر h1، h2 و p را در داخل یک عنصر div قرار داده و باز میگردانیم.

خروجی:

reactjs jsx 6090 1 تصویر

صفات (Attributes)

ما می توانیم صفات سفارشی خود را به صفات و خاصیت های HTML اضافه کنیم. برای اضافه کردن صفت سفارشی جدید باید از پیشوند data استفاده کنیم. برای نمونه در مثال زیر ما صفت data-myattribute را به عنصر p اضافه کرده ایم.

عبارات جاوا اسکریپت

در JSX می توانیم از عبارات جاوا اسکریپت نیز استفاده کنیم. برای اینکار باید عبارت را بین دو {} بنویسم. برای نمونه در مثال زیر دو عدد ۱ با هم جمع شده و نتیجه در خروجی چاپ می شود.

خروجی:

reactjs jsx 6090 2 تصویر

توجه داشته باشید که در داخل {} نمی توانید از if else استفاده کنید. به جای آن می توان از ? : استفاده کرد. در مثال زیر مقدار متغیر i بررسی می شود و اگر برابر با ۱ باشد، مقدار true و در غیر این صورت مقدار false چاپ می شود.

خروجی:

reactjs jsx 6090 3 تصویر

استایل دادن

React توصیه می کند که از استایل inline استفاده کنیم. زمانی که از استایل دهی inline استفاده می کنیم، باید از سینتکس camelCase استفاده شود. در مثال زیر استایل تعریف شده در متغیر MyStyle به عنصر h1 اضافه می شود.

خروجی:

reactjs jsx 6090 4 تصویر

کامنت گذاری

برای کامنت گذاری در بخش های فرزند باید از {} استفاده کنیم. مثال زیر نحوه کامنت گذاری در JSX را نشان می دهد:

قوانین نامگذاری

تگ های HTML همیشه به صورت lowercase نوشته می شوند. اما اجزای React به صورت Uppercase نامگذاری می شوند.

نکته! به جای استفاده از class و for باید از className و htmlFor استفاده کنید. زیرا آن ها جزء کلمات کلید جاوا اسکریپت هستند.

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است