کتابخانه ی ReactJS چیست و چه کارهایی می توان با آن انجام داد؟

در سال ۲۰۱۱ این کتابخانه را تحت تاثیر XHP که یک کامپوننت Html برای زبان برنامه نویسی PHP‌ است، ایجاد شده است و در همین سال React روی قسمت News Feed شبکه اجتماعی فیسبوک به کار گرفته شد و ۲ سال بعد، یعنی در سال ۲۰۱۳ هم استفاده از آن توسط فیسبوک به اینستاگرام تعمیم پیدا کرد.

ری اکت یک کتابخانه متن باز (Open source) جاوا اسکریپت است که به دلیل بهینه بودن React.js برای دریافت اطلاعاتی که با سرعت تغییر می‌کنند، می‌توان از آن برای توسعه برنامه ی تک صفحه ایی(SPA) یا برنامه‌های موبایل استفاده کرد, یکی از سریع‌ترین و محبوب‌ترین کتابخانه‌ها (Library) جاوا اسکریپت است که توسط فیسبوک اینستاگرام و یک جامعه مستقل از توسعه دهندگان وب مدیریت و نگهداری می‌شود.

براساس آنالیزهای جاوااسکریپت سرویس لیبسکور، ری‌اکت در حال حاضر در سایت‌های نت فلکس، ایمجر، بلیچر ریپورت، فیدلی، ایر بی ان بی و … مورد استفاده قرار می‌گیرد.

نکته مهم در کاربرد React.js سادگی و یادگیری آسان آن است و همچنین این کتابخانه صرفا در الگوی طراحی MVC، عهده‌دار بخش View است. View یا اینترفیس در واقع مرتبط با نمایش اجزا هست و طبعا React.js به جای پرداختن به الگوی MVC به وظایفی می‌پردازد که مربوط به نمایش اجزا است.

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

حال برخی از ویژگی های React.js را بررسی می کنیم:

جی اس ایکس(jsx) در React.js

در React.js ، برای قالب بندی به جای استفاده از جاوا اسکریپت معمولی از JSX استفاده می شود. JSX یک جاوا اسکریپت ساده است که از HTML پیروی می کند و از این دستورات تگ HTML برای ارائه زیر کامپوننت ها در React استفاده می کند. زبان HTML به منظور پاسخ به فراخوانی های جاوا اسکریپت از سوی کتابخانه ی React پردازش شده است. در اینجا ما حتی می توانیم به زبان خالص قدیمی جاوا اسکریپت نیز کد بنویسیم.

جریان اطلاعات تک خطی در React.js

در React.js ، مجموعه ای از متغیرهای غیرقابل تغییر به عنوان مشخصه هایی در تگ های HTML خود به ارائه دهنده کامپوننت ها منتقل می شوند. کامپوننت ها نمی توانند به طور مستقیم هر خواصی را تغییر دهند اما می توانند بازگشتی یک تابع فراخوانی شده را قبول کنند بدین ترتیب ما می توانیم تغییرات خود را اعمال کنیم. تمام این فرآیند ها به شرح فوق شناخته شده اند: “جریان خاصیت ها کاهش می یابد ، جریان واکنش ها افزایش می یابد”.

پراپس ها در React.js

پراپس ها باعث می شوند که مجموعه کامپوننت ها بتوانند از داده های سفارشی استفاده کنند. پراپس ها در React.js این امکان را فراهم می کنند تا داده های سفارشی به یک UI سفارشی انتقال خاصی انتقال پیدا کنند.

ری اکت جی اس از DOM مجازی برای سرعت بخشیدن به برنامه استفاده می کند

این ساختار که به اختصار Virtual DOM نامیده می‌شود، ابتدا تغییرات انجام شده را محاسبه کرده و سپس مرورگر کاربر را آپدیت می‌کند. این ویژگی به طراح سایت و توسعه دهنده این امکان را می‌دهد که به گونه‌ای کد نویسی کند که انگار تمام صفحه با هر تغییر رندر می‌شود، در حالی که در واقع کتابخانه React تنها کامپوننت‌هایی را رندر می‌کند که واقعا تغییر کرده‌اند.

ویژگی Single-Way data flow

در React.js، مجموعه‌ای از value های تغییر ناپذیر بین کامپوننت‌ها به عنوان ویژگی‌هایی(properties) در برچسب‌های HTML منتقل می‌شوند. کامپوننت‌ها به طور مستقیم نمی‌توانند هیچ یک از ویژگی‌ها (properties) را تغییر دهند اما میتوان آن‌ها را به call back function انتقال دهند و به کمک آن‌ها تغییرات را انجام دهند. این فرآیند به طور کامل با “properties flow down; actions flow up” شناخته می‌شود.

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