آموزش ری اکت جی اس (React js)

ری اکت جی اس چیست ؟

ری اکت (reactjs) اساسا یک کتابخونه open-source جاوا اسکریپتی برای ساخت رابط کاربری(user interfaces) برای SPA است.این کتابخونه برای مدیریت لایه 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 خیلی جلوتر از بقیه باشید.البته توجه داشته باشید که بین این کتابخونه و فریمورک تفاوت های اساسی وجود دارد.

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 ایجاد می کند و تغییر در هر کامپوننت باعث می شود این گره بروز رسانی شود.

چرا React Js

اکنون،سوال اصلی که پیش روی ما قرار دارد این است که چرا باید یک نفر از ReactJs استفاده کند.تعداد خیلی زیادی کتابخونه و فریمورک open-source برای ساختن front-end  وب اپلیکیشن ها وجود دارد که توسعه را ساده تر می کند.بیایید نگاهی به مزیت هایی که React نسبت به سایر فریمورک ها و تکنولوژی ها دارد.در دنیای front-end که هر روز تغییرات گسترده ای دارد،بسیار سخت است که زمانی را به یاغدگرفتن فریمورک های جدید اختصاص بدهیم به خصوص که عمر خیلی از این فریمورک ها بسیار کوتاه است و نمیتوان روی زمان ریسک کرد.بنابراین اگر شما به دنبال یک تکنولوژی هستید که جزءبهترین های حوزه خودش باشد و ارزش ریسک را داشته باشد،پیشنهاد من صددرصد React است.

سادگی

درک کردن React بسیار ساده است.رویکرد میتنی بر کامپوننت،lifecycle هایی که به بهترین نحو تعریف شده و استفاده از جاوا اسکریپت React را برای یادگیری و ساخت وب اپلیکیشن های حرفه ای آسان می کند.React از یک syntax ویژه با نام JSX  استفاده می کند که اجازه می دهد HTML و جاوا اسکریپت را ترکیب کنید.ضروری نیست که حتما از JSX برای templating  استفاده کنید و برنامه نویس هنوز هم میتواند از جاوا اسکریپت برای اینکار استفاده کند ولی اگر با JSX این کار را انجام دهید،هرگز به دلیل سادگی از جاوا اسکریپت برای templating   استفاده نخواهید کرد.

یادیگیری راحت

هر شخصی با پیش زمینه ای از برنامه نویسی به راحتی می تواند React را یاد بگیرد در حالی که Angular و Ember از یک ‘Domain specific Language’ استفاده می کنند که یادگیری آن سخت است.برای React شما باید یک دانش مختصر در مورد HTML , CSS و جاوا اسکریپت(حرفه ای تر) داشته باشید.

رویکرد Native

همانطور که در چند پاراگرف قبلی اشاره کردم React Native بر پایه جاوا اسکریپت و Reat است.پس تمام ویژگی هایی که برای React بیان کردیم در  React Native هم صدق می کند.به علاوه کد های بین دو پلتفرم Android و IOS مشترک است و کامپوننت هایی که می نویسید میتونید در چندین پروژه استفادش کنید.

عملکرد

هیچ container از پیش ساخته شده برای dependency ندارد.شما می توانید از ماژول های Browserify, Require JS, EcmaScript 6 با استفاده از Babel استفاده کنید که به طور خودکار به  dependencies اضافه می شود.