دوره ساخت پیام رسان تحت وب مشابه Telegram با Laravel و ReactJs و WebSocket به صورت Spa

در این مقاله ما یاد می گیریم که ReactJs چیه و چرا ما باید از اون به جای فریمورک های دیگه جاوا اسکریپت مثل angular استفاده کنیم.

ری اکت (reactjs) اساسا یک کتابخونه open-source جاوا اسکریپتی برای ساخت رابط کاربری(user interfaces) برای single page applications(اپلیکیشن های تک صفحه ای) است.این کتابخونه برای مدیریت لایه View برای وب استفاده می شود.همچنین React این امکان رو در اختیار ما میذاره که reusable UI components(کامپوننت های قابل استفاده مجدد رابط کاریری) ایجاد کنیم.React  در ابتدا توسط Jordan Walke یکی از مهندسین ارشد فیسبوک ایجاد شد.React ابتدا در سال 2011 در فیسبوک مورد استفاده قرار گرفت و سپس در سال 2012 در اینستاگرام استفاده شد.

ری اکت این امکان را در اختیار توسعه دهندگان می گذارد که وب اپلیکیشن های خیلی بزرگ که می تواند date را تغییر بدهد،بدون reload صفحه ایجاد کنند.مهم ترین اهداف React را میتوان سادگی،سرعت و مقیاس پذیر بودن دانست.تمرکز اصلی React بر روی رابط کاربری است و فقط در لایه View در معماری MVC مطابقت دارد.این کتابخانه می تواند با کتابخانه های و فریمورک های دیگر جاوا اسکریپت مثل Angular ترکیب و مورد استفاده قرار گیرد.

ویژگی های React Js چیست

بیایید نگاهی به ویژگی های مهم React بیاندازیم:

JSX

در React به جای استفاده از جاوا اسکریپت معمولی،از JSX برای templating استفاده می شود.jsx یک فرمت جاوا اسکریپتی برای ایجاد DOM های HTML در قالب یک کامپوننت است

React Native

یک فریمورک جاوا اسکریپتی برای توسعه اپلیکیشن های موبایل به صورت Native برای دو سیستم عامل Android و  ios است که در سال 2015 معرفی شد.این فریمورک بر پایه زبان جاوا اسکریپت و کتابخانه React است.یعنی شما با تسلط بر React می توانید در یادگیریReact Native خیلی جلوتر از بقیه باشید.البته توجه داشته باشید که بین این کتابخونه و فریمورک تفاوت های اساسی وجود دارد که برای درک این تفاوت های پیشنهاد می کنم مقاله تفاوت های اصلی بین React و React Native را بخوانید.

Single-Way data flow

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

Virtual Document Object Model

ری اکت React یک ساختار کش in-memory ایجاد می کند. در این ساختار اگر تغییری رخ داده باشد DOM را بروزرسانی می کند.این ویژگی برنامه نویس را قادر می سازد درحالی که در یک wtpi تغییرات ایجاد میشود تنها کامپوننتی rerender شود که تغییر پیدا کرده است.Virtual DOM ی مانند DOM یک درخت از گره هایی هست که شامل element ها و attributes هایشان و محتوا به عنوان objects است.متدrender() یک درخت از کلمپوننت های React ایجاد می کند و تغییر در هر کامپوننت باعث می شود این گره بروز رسانی شو