React.JS چیست

React JS یکی از سریع‌ترین و محبوب‌ترین کتابخانه‌ها (Library) جاوا اسکریپت است که توسط فیسبوک اینستاگرام و یک جامعه مستقل از توسعه دهندگان وب مدیریت و نگهداری می‌شود.

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

بیشتر بخوانید:

اکما اسکریپت چیست؟

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

استفاده از React JS در HTML

استفاده از این فریم ورک جاوا اسکریپت در HTML کار چندان مشکلی نیست. برای این کار شما باید از JSX و ECMAScript 2015 استفاده کنید. بنابراین انتظار می‌رود که پیش از استفاده از React دانش کافی از HTML و جاوا اسکریپت داشته باشید. اگر دوست دارید با HTML آشنا شوید، می‌توانید دوره آموزش HTML مقدماتی در لیداوب را مطالعه کنید. برای استفاده از «ری اکت» به کد HTML زیر توجه کنید:

در اینجا، کلاس Greeter یک کامپوننت React است که ویژگی (Property) greeting را می‌پذیرد. پس از آن متد ReactDOM.render مثالی از کامپوننت Greeter ایجاد می‌کند و ویژگی greeting را به عنوان Hello World تبدیل کرده و با شناسه myReactApp ، این کامپوننت را به عنوان المنت فرزند (child) به المنت DOM، رندر می‌کند. بنابراین هنگامی که کد HTML بالا در مرورگر اینترنت نمایش داده شود، نتیجه از این قرار خواهد بود:

چرا React JS اینقدر محبوب است؟

react js

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

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

React چه خصوصیات متمایزی دارد؟

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

JSX

jsx

مطالعه بیشتر در لیداوب:

انگولار جی اس (angular js) چیست ؟

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

React Native

react

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

Virtula Document Objective Model

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

Single-Way Data Flow

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

انتقال داده react

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

حال که تا حدودی با React و کارکرد آن آشنا شدیم، سوال اینجا است که، واقعا چرا با وجود پلتفرم‌هایی مثل انگولار، باید از React JS‌استفاده کنیم؟

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

ری اکت

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

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

منبع

https://www.lydaweb.com/