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

در این مقاله سعی کردیم توضیح خیلی ساده در رابطه با اینکه ری اکت چیست و چه چیزی باعث می شود که آن را انتخاب کنیم؟ و کاملا توضیح میدهیم که چرا می خواهیم از آن استفاده کنیم و چه نیازهایی را برطرف میکند.

 ری اکت چیست؟

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

بخش اصلی در همه اپ‌های React کامپوننت‌ها هستند. یک کامپوننت ترکیبی از اچ‌تی‌ام‌ال و جاوا اسکریپت است و تمام منطق مورد نیاز برای نمایش قسمت کوچکی از یک رابط کاربری بزرگ‌تر را در خود دارد. هر کدام از این کامپوننت‌ها می‌توانند به بخش‌های پیچیده‌تر یک اپلیکیشن اضافه شوند. همچنین React این امکان رو در اختیار ما قرار میدهد که کامپوننت‌های قابل استفاده مجدد (reusable UI components) رابط کاربری ایجاد کنیم.

ما می توانیم عناصر رابط کاربری مانند یک دکمه یا یک قسمت ورودی را به عنوان یک کامپوننت ری اکت بنویسیم. یک کامپوننت ممکن است یک یا چند کامپوننت دیگر را در خروجی خود داشته باشد.

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

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

بگذارید نگاهی دقیق تر به برخی از ویژگیهای مهم React بیندازیم.

• JSX

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

• React Native

Native React یک فریمورک جاوا اسکریپتی برای توسعه اپ‌های موبایل به صورت native برای ios، اندروید، وب و حتی UWP  (پلتفرمی برای ساخت برنامه‌های تحت ویندوز، ویندوز موبایل،  Xbox و سایر محصولات مایکروسافت) است که در سال 2015 توسط فیس بوک معرفی شد، این فریمورک بر پایه زبان جاوا اسکریپت و کتابخانه React است. یعنی شما با تسلط بر React می توانید در یادگیریReact Native  خیلی جلوتر از بقیه باشید. البته توجه داشته باشید که بین ری‌اکت وNative  React  تفاوت های اساسی وجود دارد.

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

در واقع React Native محیطی را مهیا کرده است که برنامه نویسان وب بتوانند اپلیکیشن‌هایی بسازند که دقیقا شبیه به برنامه‌های نوشته شده به زبان Native رفتار کند.

• Single-Way data flow

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

• Virtual Document Object Model

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

چرا React Js ؟

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

•  سادگی

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

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

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

• رویکرد Native

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

• عملکرد

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

• تست پذیری

برنامه های ReactJS فوق العاده آسان میتوان آنها را تست کرد. بنابراین می‌توانیم توابع و کامپوننت های خودمون رو با پاس دادن پارامترها و state ها و خروجی‌ها رو چک کنیم.

امیدوارم که از این مقاله لذت برده باشید و تونسته باشیم به شما برای انتخاب ری اکت کمک کرده باشیم.