تبلیغات
تبلیغات

کتابخانه ReactJS جاوا اسکریپت برای ساخت UI

کتابخانه ReactJS جاوا اسکریپت برای ساخت UI


React یا ReacJS (ری‌اکت جی‌اس = React.js)، یکی از معروف‌ترین و پراستفاده‌ترین کتابخانه‌های جاوا اسکریپتی می‌باشد که معمولا در بیشتر فرم‌های استخدامی، از آن به عنوان مهارت مورد نیاز نیز یاد می‌شود. اجازه دهید تا توضیحات مفصلی را در خصوص این کتابخانه خدمت شما بیان کنیم.

تعریف
React باعث می‌شود تا بتوانید بدون دردسر، رابط کاربری‌های تعاملی ایجاد کنید. این کتابخانه که توسط فیسبوک، اینستاگرام و جامعه‌ای از توسعه‌دهندگان دیگر توسعه و نگهداری می‌شود، براساس آنالیزهای جاوا اسکریپتی سرویس Libescore، این کتابخانه در حال حاظر در سایت‌‌های معروف نت‌فلیکس، Imgur، بلیچر رپورت، فیدلی، ایر بی‌ان‌بی و … مورد استفاده قرار گرفته است.
تاریخچه
ری‌اکت توسط جردن واک، یک مهندس نرم‌افزار در فیس‌بوک، ساخته شده‌است. او از XHP که یک چارچوب فریم‌ورک HTML برای PHP است، تأثیر گرفته‌است. اولین نسخه‌ای که او در سال ۲۰۱۱ توسعه داد، در بخش اخبار فیس‌بوک و بعدها در سال ۲۰۱۲ در سرویس اینستاگرام مورد استفاده قرار گرفت. در سال ۲۰۱۳ در جریان کنفرانس آمریکا JSConf این کتابخانه متن‌باز اعلام شد.

ReactNative، که امکان توسعه برنامه‌های مبتنی بر Android, IOS و UWP را با React فراهم میکند، در فوریه ۲۰۱۵ در React.js Conf فیسبوک معرفی شد و در مارس ۲۰۱۵ به صورت رایگان عرضه شد.

در ۱۸ آوریل ۲۰۱۷ فیسبوک اعلام کرد React Fiber، یک الگوریتم اصلی جدید React library برای ایجاد رابط کاربری است. React Fiber پایه و اساس هرگونه پیشرفت‌های آینده و ویژگی‌های چارچوب React خواهد بود.

چرا React JS محبوب است؟

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

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

ویژگی‌های مهم React

کتابخانه‌ای که به این حد از محبوبیت در بین توسعه‌دهندگان رسیده است، قطعا بایستی ویژگی‌های جالبی داشته باشد؛ در ادامه این خصوصیات را بررسی می‌کنیم.


ویژگی JSX

در ری‌اکت، برای ایجاد قالب یا تم، از JSX (JavaScript Syntax Edition) به جای جاوا اسکریپت عادی استفاده می‌شود. در واقع، JSX، یک نوع جاوا اسکریپت ساده‌ای است که به شما اجازه می‌دهد تا کدهای HTML را درون ساختارش قرار دهید! این کدهای HTML؛ در ساختار JSX و در هنگام اجرا، به کدهای جاوا اسکریپتی رندر می‌شوند. البته این قابلیت نیز وجود دارد که کدها را بدون استفاده از HTML و به صورت جاوا اسکریپتی نوشت؛ که در این صورت، دیگر به دانش JSX نیازی نخواهد بود.

در React، برای پروسه Templating از JSX یا JavaScript Syntax Edition به جای جاوا اسکریپت عادی استفاده شود. JSX نوعی جاوا اسکریپت ساده است که شما اجازه می‌دهد تا کدهای html را درون ساختارش قرار دهید. این کدهای HTML در ساختار JSX در هنگام اجرا به کدهای جاوا اسکریپتی رندر می‌شوند. البته این امکان وجود دارد که کدها را بدون استفاده از HTML و به صورت جاوا اسکریپت هم بنویسید. در این صورت دیگر نیازی به دانش JSX نیست.


React Native

React، یک سری کتابخانه‌های بومی (Native) دارد که در سال ۲۰۱۵ و توسط فیسبوک، به دست توسعه‌دهندگان اپلیکیشن موبایل رسید. این کتابخانه‌های بومی، یک معماری ارائه می‌دهند که با استفاده از آن بتوان اپلیکیشن اندروید بومی و اپلیکشن iOS بومی توسعه داد.

نکته مهم
هدف React Native برخلاف فریمورک‌‌هایی مثل PhoneGap، یک بار بنویس و همه جا اجرا کن نیست،بلکه هدف آن، یک بار یاد بگیر و همه جا بنویست می‌باشد.

Virtual Document Object Model

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


Single-way Data flow

در React، یک سری مقدار (Value) تغییر ناپذیر به عوامل رندر کننده‌ی کامپوننت‌ها داده می‌شود. این مقدارها دقیقا مثل ویژگی تگ HTML هر رندر کننده است. در این حالت، کامپوننت‌ها نمی‌توانند به صورت مستقیم هیچ ویژگی را دستکاری کنند؛ اما می‌توانند از یک عملکرد call back استفاده کنند تا به کمک آن تغییرات را انجام دهند. به این فرایند، «properties flow down; action flow up» می‌گویند.

چرا باید از React استفاده کرد؟!

چرا با وجود فریمورک‌هایی مثل AngularJS و …، باید از ReactJS استفاده کرد؟!

دنیای طراحی رابط کاربری و froon-end هر روز با تکنولوژی‌ها و فریمورک‌های جدید غافلگیر می‌شود. در این وضعیت، بهتر است وقت خود را برای یاد گرفتن تکنولوژی‌های جدیدی که ممکن است خیلی زود به پایان عمرشان برسند، تلف نکنیم. اما اگر دلتان می‌خواهد یک تکنولوژی جدید یاد بگیرید که در تمام دوران حرفه‌ای خود از دانستن آن به خود ببالید، به شما توصیه می‌کنیم ReactJS را بررسی کنید.

این کتابخانه‌ی جاوا اسکریپت، در عین سادگی، برای یادگیری نیز بسیار ساده است و با روش React Native نیز برای توسعه‌ی اپلیکیشن، گزینه‌ی بسیار خوبی هم در مقابل طراحان وب و هم در مقابل توسعه‌دهندگان اپلیکیشن موبایل قرار داده است. بنابراین،  اگر به دنبال ایجاد یک رابط کاربری فوق العاده برای وبسایت یا اپلیکیشن موبایل خود هستید، خیلی زود ReactJS را یاد بگیرید. هنگام استفاده از React، عملکرد سریع و فوق العاده و کاربرد آسان آن، باعث شگفت زده شدن شما خواهد شد.

شروع به کار

گرچه برای کار با ReactJS بهتر است از NodeJS و ابزار NPM آن استفاده کنیم، اما همچنان می‌توانیم آن را به راحتی و همانند دیگر اسکریپت‌ها، به صفحه‌ی HTML خود تزریق کنیم. کار درNodeJS را بعدا و در پست‌های دیگری توضیح خواهیم داد.

برای شروع به کار، می‌توانید فایل را از انتهای مطلب دانلود کنید و یا اینکه، از CND های زیر استفاده کنید که شامل React و ReactDOM می‌باشد.

ورژن توسعه دهنده (عادی):

ورژن فشرده (مخصوص محصول نهایی):

برای بارگزای ورژن دلخواه خود، مقدار عدد 16 را در لینک‌های بالا، با ورژن مورد نظرتان تغییر دهید.

ویژگی crossorigin

اگر از یک CDN برای وارد کردن React به پروژه‌ی خود استفاده می‌کنید، از ویژگی crossorigin نیز استفاده کنید. به صورت زیر:

مثال Hello World

مثل همیشه، اجازه دهید تا مثال Hello World را بنویسیم:

برای اینکه بتوان از JSX استفاده کرد، کامپایلر Babel به صفحه اضافه شده است. و همچنین type اسکریپت را برابر text/babel قرار داده‌ایم تا کامپایلر بابل آن را تشخیص دهد.

صفحات رسمی ReactJS

می‌توانید سورس‌کد ورژن‌های مختلف این کتابخانه را از «این صفحه» از سایت گیت‌هاب دانلود کنید.
تمامی ماطلب منتشر شده در فول که برای ReactJS را می‌توانید در «این‌لینک» مشاهده کنید.
ایجاد پروژه ReactJS در NodeJS
کانال تلگرام فول کده
تبلیغات

درباره نویسنده

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک‌گذاری اطلاعات در هر زمینه‌ای
برنامه‌نویس فول استک

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات ثبت شده بدون دیدگاه