JSX

آیا تا به حال به این فکر کرده اید که چگونه توسعه دهندگان وب مولفه هایی را ایجاد می کنند که به طور یکپارچه منطق رندر و نشانه گذاری را یکپارچه می کنند؟ دیگر تعجب نکنید! JSX را وارد کنید، ابزاری که به بخشی جدایی ناپذیر از توسعه React تبدیل شده است. JSX به توسعه دهندگان این امکان را می دهد که اجزاء را با منطق رندر و نشانه گذاری با هم در یک فایل بنویسند و روشی سازماندهی شده و کارآمدتر برای مدیریت کد نسبت به روش های سنتی جداسازی جاوا اسکریپت، HTML و CSS به فایل های جداگانه ارائه می دهد. در حالی که JSX شبیه به HTML به نظر می رسد، برخی از تفاوت های کلیدی وجود دارد که باید هنگام کار با آن به خاطر داشت. بیایید در منشا، سودمندی و تفاوت های آن با HTML غوطه ور شویم.

JSX چیست؟
JSX یک پسوند نحوی جاوا اسکریپت است که به توسعه دهندگان اجازه می دهد از نشانه گذاری “مانند HTML” استفاده کنند در داخل فایل های جاوا اسکریپت آنها JSX مخفف JavaScript XML (Extensible Markup Language) است. MDN XML را به عنوان “یک زبان نشانه گذاری شبیه به HTML، اما بدون برچسب های از پیش تعریف شده برای استفاده” تعریف می کند. اگر بخواهیم از JSX به جای HTML استفاده کنیم، به نظر می رسد که این منطقی است.

از کجا آمده؟
جردن واک با ایجاد JSX (و React) در زمانی که در فیس‌بوک بود و آنها را با هم در سال 2013 راه‌اندازی کرد. بله، یک تن تبلیغات

چه چیزی JSX را مفید می کند؟
وقتی در مورد JSX سوال می کنید، باید React را نیز در نظر بگیرید. توسعه دهندگان وب به طور سنتی از فایل های جداگانه برای جاوا اسکریپت، HTML و CSS استفاده می کردند. منطق، محتوا و نگرانی های طراحی/طراحی به ترتیب در این فایل ها تقسیم شدند. این بدان معنی است که برای یافتن همه کدهای مربوط به یک “کامپوننت” خاص، باید در هر سه فایل جستجو کرد. ایده جردن این بود که نگرانی ها را به اجزاء تقسیم کند. با حفظ منطق رندر و نشانه گذاری با هم، می توانید اطمینان حاصل کنید که حتی پس از ویرایش ها همگام هستند. JSX در اینجا وارد عمل می شود. می توان آن را به عنوان نمایشی «مانند HTML» که در داخل جاوا اسکریپت شما قرار می گیرد، مشاهده کرد. در اینجا یک مثال است.

این مثال نشان می‌دهد که چگونه JSX می‌تواند در جاوا اسکریپت جاسازی شود تا مؤلفه‌های سازماندهی شده بر اساس نگرانی‌های منطقی و نشانه‌گذاری ایجاد شود.

تفاوت در JSX و HTML؟
در حالی که JSX شبیه HTML است، HTML نیست. یک تفاوت اصلی این است که در JSX، شما باید یک عنصر والد واحد را برگردانید تا بتواند کامپایل شود. این یک روش معمول است که همه چیز را در یک div یا یک قطعه “<>” بپیچید. تفاوت کلیدی دیگر این است که در JSX، می‌توانید عبارات جاوا اسکریپت را مستقیماً با استفاده از بریس‌های فرفری جاسازی کنید. HTML به تگ اسکریپت و فایل جاوا اسکریپت خارجی نیاز دارد. شما از className به جای class برای تعریف کلاس های CSS استفاده می کنید و از camelCase به جای kebab-case برای تعریف ویژگی ها استفاده می کنید. یکی دیگر از جنبه های منحصر به فرد JSX، استایل درون خطی است. با تنظیم style={styleObject} در یک عنصر می‌توان به استایل‌سازی دست یافت. شی استایل را می توان در بالا تعریف کرد و به عنوان یک متغیر ارسال کرد، یا می توان آن را مستقیماً در داخل بریس های فرفری تعریف کرد. به یاد داشته باشید، برای جاسازی جاوا اسکریپت خود به یک مجموعه اولیه از بریس های فرفری نیاز دارید. در اینجا مثالی از نحوه انجام این کارها آورده شده است.

چگونه از جاوا اسکریپت در JSX استفاده کنم؟
برای استفاده از جاوا اسکریپت در JSX، می توانید عبارات جاوا اسکریپت را مستقیماً با استفاده از پرانتزهای مجعد {} جاسازی کنید. این به شما امکان می دهد محتوای پویا را وارد کنید یا منطق جاوا اسکریپت را در نشانه گذاری خود اجرا کنید. به عنوان مثال، متغیرها را می توان به عنوان props به کامپوننت ها منتقل کرد و سپس در JSX استفاده کرد. علاوه بر این، می‌توانید از توابع جاوا اسکریپت برای رندر کردن شرطی عناصر یا نگاشت روی آرایه‌ها و ایجاد چندین عنصر استفاده کنید. به یاد داشته باشید، هر کد جاوا اسکریپت معتبر را می توان در JSX استفاده کرد. این بدان معناست که شما می توانید از حلقه ها، دستورات شرطی و هر قابلیت دیگر جاوا اسکریپت در کد JSX خود استفاده کنید. به طور کلی، توانایی استفاده از جاوا اسکریپت در داخل JSX آن را به یک دارایی ارزشمند در هنگام ایجاد اجزای پویا و قابل استفاده مجدد در React تبدیل می کند.
این یک مثال ساده است که در آن متغیر نام به JSX h1 ما منتقل شده و نمایش داده می شود.

JSX ابزار قدرتمندی است که به توسعه دهندگان این امکان را می دهد که اجزایی را با منطق رندرینگ و نشانه گذاری با هم در یک فایل بنویسند. نسبت به روش‌های سنتی جداسازی جاوا اسکریپت، HTML و CSS به فایل‌های مجزا، روشی سازمان‌یافته‌تر و کارآمدتر برای مدیریت کد ارائه می‌دهد. اگرچه JSX شبیه به HTML به نظر می رسد، اما تفاوت های کلیدی وجود دارد که باید هنگام کار با آن در نظر داشت. به طور کلی، JSX به بخشی جدایی ناپذیر از توسعه React تبدیل شده است و به طور گسترده در توسعه وب مدرن استفاده می شود.

https://react.dev/learn/writing-markup-with-jsx

https://react.gg/

https://www.w3schools.com/react/react_jsx.asp#:~:text=JSX%20stands%20for%20JavaScript%20XML,and%20add%20HTML%20in%20React.

https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction

https://en.wikipedia.org/wiki/JSX_(JavaScript)

https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/

https://www.freecodecamp.org/news/html-vs-jsx-whats-the-difference/#:~:text=HTML%20is%20a%20very%20important,a%20syntactic%20sugar%20for%20React.