JSX در ReactJS – آموزش ReactJS

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

تصویر reactjs-jsx_6090 JSX در ReactJS - آموزش ReactJS

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 JSX در ReactJS - آموزش ReactJS

صفات (Attributes)

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

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

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

خروجی:

تصویر reactjs-jsx_6090_2 JSX در ReactJS - آموزش ReactJS

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

خروجی:

تصویر reactjs-jsx_6090_3 JSX در ReactJS - آموزش ReactJS

استایل دادن

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

خروجی:

تصویر reactjs-jsx_6090_4 JSX در ReactJS - آموزش ReactJS

کامنت گذاری

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

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

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

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

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

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