JSX – ساده و دلنشین

JSX – ساده و دلنشین

464 176 سینا

JSX

شاید در ابتدا استفاده از jsx برای برنامه نویسان کمی گنگ به نظر بیاید. اما پس از مدتی از استفاده از آن لذت خواهید برد. ری اکت به صورت پیش فرض از JSX به جای جاوا اسکریپت معمولی استفاده می کند. استفاده از JSX اجباری نیست اما توصیه می شود از آن استفاده کنید زیرا دارای سرعت بیشتری است و همچنین بسیاری از ارورهای سینتکسی شما به کمک JSX آشکار می شود. برای استفاده از jsx توصیه می شود از ویرایشگرهایی استفاده کنید که از jsx پشتیبانی می کنند. (مانند webstorm)

jsx بسیار شبیه HTML است و کسانی که با HTML آشنایی دارند به راحتی می توانند از آن استفاده کنند. نگاهی به فایل App.jsx ساخته شده در آموزش قبلی می اندازیم. (ممکن است در طول زمان و با تغییرات فریمورک React فایل ایجاد شده برای شما با این فایل متفاوت باشد). در آموزش قبلی شباهت بین HTML و JSX را مشاهده کردیم.

 

المنت های تو در تو

فقط 1 المنت برگردانید

این جمله را همیشه به یاد داشته باشید. در کامپوننت های jsx شما می بایست فقط 1 المنت را نهایت برگردانید. در نتیجه زمانی که میخواهید المنت های تو در تو را به عنوان خروجی کامپوننت بر گردانید باید در نهایت آن ها را داخل یک المنت قرار دهید. معمولا این المنت div خواهد بود. این نکته یکی از نکاتی است که در ابتدا ممکن است بارها و بارها شما را به اشتباه بیاندازد و کد های شما کار نکنند.

برای مثال در کامپوننت زیر ما المنت های h1، h2 و p را در یک المنت <div> قرار داده و return  کرده ایم.

مشخصه ها (attributes)

در JSX محدودیتی برای attribute ها وجود ندارد و شما می توانید مشخصه های خاص خودتان را به المنت ها بدهید. مانند خط زیر :

برخی از مشخصه های HTML نیز در JSX متفاوت هستند. مانند مشخصه class که در JSX به شکل className نوشته می شود و یا مشخصه for که به شکل htmlFor نوشته می شود. به تدریج با این تفاوت ها نیز آشنا خواهیم شد.

 

Expressions های جاوا اسکریپت

expression های جاوا اسکریپت درون کدهای JSX قابل اجرا هستند. برای اجرای آن ها کافی است عبارت مورد نظر خود را درون براکت { } قرار دهید. مانند مثال زیر:

همانطور که در مثال بالا مشاهده می کنید درون تگ h1 ما از {1 + 1} استفاده کرده ایم. عباراتی که درون براکت قرار می گیرند توسط جاوا اسکریپت اجرا می شوند و در نتیجه در خروجی ما عدد 2 ظاهر می شود.

 

نکته : شما از عبارات if و else در JSX نمی توانید استفاده کنید. (منظور از JSX فقط بخشی است که در تابع render به شکل html بازگشت داده می شود.) برای نوشتن کدهای شرطی به شکل 1 خطی باید عمل کنید. مانند مثال زیر:

در مثال بالا متغیر i مقدار 1 دارد. در نتیجه درون تگ h1 عبارت True نوشته خواهد شد.

برای تعریف متغیرها از این به بعد به جای var از let استفاده خواهیم کرد.

 

ادامه آشنایی با JSX را در آموزش بعدی خواهیم داشت.