JSX چیست؟

11 تیر, 1402

بدون دیدگاه

JSX چیست، برای چه استفاده می شود و چرا برای کاربران ReactJS مفید است؟

JSX مخفف Javascript XML است و ابزار بسیار مفیدی برای توسعه دهندگان React است. همچنین یک برنامه افزودنی از زبان جاوا اسکریپت است که راهی برای ساختار رندر کامپوننت با استفاده از نحوی شبیه به HTML فراهم می کند. این ابزار به ما این امکان را می دهد که عناصر HTML را در جاوا اسکریپت بنویسیم و آنها را در DOM با تبدیل تگ های HTML به عناصر React بدون نیاز به روش های دیگری مانند ()createElement یا ()appendChild قرار دهیم. این ترکیب جاوا اسکریپت و HTML منجر به برنامه‌های قدرتمندتر با عملکرد بهتر می‌شود.

birhosting jsx2 — این یک قطعه کد JSX است که یک <H1> از «This is JSX!» را به DOM خروجی می‌دهد.

این قطعه کد نمونه ای از آنچه برای خروجی <H1> از "This is JSX!" به DOM خود با استفاده از نحو JSX میباشد.

birhosting jsx3 — این مثال همچنین یک <H1> را به DOM خروجی می دهد. این بار می گوید "This is not JSX" زیرا از نحو JSX استفاده نمی کند.

این قطعه کد دوم نمونه ای از نحوه انجام همان کار اول اما بدون استفاده از این ابزار است. همانطور که می بینید، و اکثر مردم موافق هستند، اولین مثالی که از جاوااسکریپت XML استفاده می کند، کد بسیار تمیزتر و واضح تری است که خواندن، ویرایش و اشکال زدایی آن در زمان مناسب آسان تر خواهد بود.

همچنین می توانید چندین خط HTML را با این تکنولوژی نشان دهید. با این حال، همیشه باید یک عنصر سطح بالا وجود داشته باشد که بقیه کد شما در داخل آن قرار گرفته باشد.

React از این واقعیت آگاه است و هنگام اشاره به مواردی مانند نحوه تغییر وضعیت در طول زمان، نحوه نمایش داده‌ها و نحوه مدیریت رویدادها، منطق UI با منطق رندر همراه است. چیزی که React را منحصربه‌فرد و قدرتمند می‌کند این واقعیت است که آن‌ها از چیزی به نام جداسازی نگرانی‌ها با جفت کردن واحدها در داخل مؤلفه‌هایی که حاوی نشانه‌گذاری و منطق هستند، به جای قرار دادن آنها در فایل‌های جداگانه استفاده می‌کنند.

یکی دیگر از موارد استفاده محبوب این ابزار، توانایی آن در ارائه طیف وسیعی از ویژگی‌های عنصر است که برای منعکس کردن ویژگی‌های ارائه شده توسط HTML طراحی شده‌اند. ویژگی های سفارشی را می توان به کامپوننت منتقل کرد و تمام ویژگی ها توسط کامپوننت به عنوان props دریافت خواهند شد.

ممکن است از خود بپرسید مرورگر چگونه JSX را می‌فهمد و می‌خواند؟ آنها نمی کنند. توسعه دهندگان React معمولاً از Babel استفاده می کنند، که یک ترانسپایلر محبوب، رایگان و منبع باز جاوا اسکریپت است که JSX شما را ابتدا قبل از ارسال به مرورگر به اشیاء جاوا اسکریپت معمولی تبدیل می کند. این تکنولوژی یکی از بسیاری از ویژگی های کلیدی و ارزشمند React است که آن را به ابزاری قدرتمند و محبوب برای توسعه دهندگان فرانت اند تبدیل کرده است.