دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۳۰
  • تیر

جلسه ۰۴ : آموزش JSX

  • دسته‌بندی‌ها :
جلسه ۰۴ : آموزش JSX

        با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
        با جلسه ای دیگر از سری جلسات دوره آموزش React JS در خدمت شما عزیزان هستیم.
        در این جلسه قصد داریم به آموزش JSX بپردازیم.

        مقدمه

        JSX مخفف JavaScript XML است.

        با استفاده از JSX می‌توانیم کد های html رو داخل React بنویسیم.

        JSX بسیار آسان است.

        آموزش JSX

        با استفاده از JSX می‌توانیم کد ها و المان های html را در جاوا اسکریپت بنویسیم و آن ها را بدون استفاده از توابعی مانند ()createElemet یا ()appendChild در DOM قرار دهیم.

        در واقع JSX تگ های html را به عناصر react تبدیل می‌کند.

        در مثال زیر کد های html را مستقیما در یک متغیر جاوا اسکریپت ذخیره کرده ایم:

        مثال : 

        در مثال زیر نیز از تابع ()createElement برای ذخیره کد های html درون یک متغیر جاوا اسکریپتی استفاده کرده ایم:

        مثال : 

        عبارت ها در JSX

        در JSX می‌توان عبارت ها را داخل {} قرار داد تا پردازش شوند.

        عبارت ها می‌توانند متغیر های جاوا اسکریپت، عبارات ریاضی و محاسباتی و هر عبارت معتبر دیگری در جاوا اسکریپت، باشند.

        مثال:

        مثال : 

        خروجی:

        مثال : 

        کد های بزرگتر در HTML

        اگر کد html شما بیشتر از یک خط است، باید از پرانتز استفاده کنید.

        مثال:

        مثال : 

        نکته: متغیر ها فقط می‌توانند یک تگ یا المان htnl را در خود ذخیره کنند. بنابراین هنگامی که چندین المان html دارید، باید یک المان والد برای آن ها در نظر بگیرید. (مانند تگ div)

        مثال:

        مثال : 

        همچنین توجه داشته باشید که هر تگی که استفاده می‌کنید را ببندید:

        مثال : 

         

        جلسه آموزش JSX نیز به پایان رسید.

        در جلسه بعد آموزش کامپوننت ها در React JS خواهیم پرداخت.

        QR:  جلسه ۰۴ : آموزش JSX
        به اشتراک بگذارید