همیشه در برنامه‌های تحت وب که در مروگرها اجرا می‌شود برنامه نویس‌ها به دنبال روش‌هایی بوده‌اند که بتوانند رفت و برگشت بین client و server رو به حداقل برسونند که این رفت و برگشت‌ها مدام باعث refresh شدن و Postback شدن صفحه وب نشود و نیاز نباشد هر دفعه مرورگر کل صفحه را از ابتدا بسازد و به کاربر نمایش دهد.

این اتفاق در جاوا اسکریپت به کمک Ajax اتفاق افتاد و رفته رفته با آمدن jQuery بسیار قوت گرفت و در صفحات وب استفاده از ajax بسیار بیشتر شد. با ادامه این روند سبک جدیدی از Web Applicationها مطرح شد که به صفحات وب تک صفحه‌ای یا single page application ها معروف شدند.

 

در SPA ها یک صفحه اصلی داشتیم که سایرصفحات در داخل آن قرار می‌گرفت و به کاربر نمایش داده میشد که با استقبال بسیار خوبی روربرو شد. ولی نکته‌ای که وجود داشت این روش به کمک java script و jquery بود و ساختار درستی نداشت و حجم کدهای زیاد جاوا اسکریپت باعث میشد پروژه بعد از مدتی دچار خطاهای مختلفی به دلیل تاثیر کدهای بخش‌های مختلف روی یکدیگر شود که پیدا کردن و برطرف کردن این خطاها کار دشواری بود.

شرکت‌های بزرگ نرم افزاری در تیم‌های داخلی خودشان روش‌هایی برای تولید Web Application ها به صورت spa طراحی کرده بودند و اولین شرکت گوگل بود که با کتابخانه Angular در سال ۲۰۱۱ وارد این میدان شد. شروع بسیار خوبی هم داشت و به دلیل اینکه رقیب جدی نداشت، بین برنامه نویس‌های وب مورد توجه قرار گرفت.
در سال ۲۰۱۳ فیس بوک با ارائه روش خود با نام React js وارد دنیای SPA ها شد و به دلیل مزیت‌ها و سادگی‌هایی که نسبت به روش Angular داشت توانست به خوبی رشد کند و به سرعت به محبوب ترین روش برای تولید SPA تبدیل شود.

 

React در حین سادگی که شما فقط نیاز به بلد بودن Java Script برای کار با آن را دارید توانست با معرفی امکان تولید Mobile App توسط کتابخانه React با نام React Native مجدد محبوبیت خود را افزایش دهد و از رقبای خود کامل فاصله گرفته و در صدر جدول محبوب ترین روش تولید SPA شود.

 

به ما کمک می کند که از امکانات خوبی برای فرانت اند و رابط کاربری سایت استفاده کنیم و در واقع ابزاری برای توسعه رابط کاربری می باشد که صفحه وب ساخته شده با آن قابلیت ارائه شدن بر اساس برنامه های تک صفحه ای یا همان SPA ها را دارا می باشد.

 

با react شما یک صفحه وب ثابت را مشاهده می کنید که با کاربر تعامل داشته و وقتی اطلاعاتی از آن درخواست شود به جای اینکه صفحه به صورت کامل لود شود صرفا بخش هایی از صفحه اطلاعات را به ما نمایش خواهد داد و کل صفحه تغییری نخواهد کرد. اگر بخواهیم بگوییم که فایده این قابلیت از ریکت چیست باید بگوییم که این تکنیک می تواند یک گزینه ایده آل برای ساخت برنامه های موبایل به صورت PWA باشد و بتوان سایت های تعاملی را با استفاده از آن به خوبی پیاده سازی کرد.

 

ویژگی های react js 

 

از ویژگی هایی که فریمورک react را نسبت به دیگر فریمورک های جاوا اسکریپت از جمله angular و jquery متمایز ساخته است می توان به موارد زیر اشاره کرد.

• سادگی فرایند نوشتن کامپوننت ها با react js
• کتابخانه ها و فریمورک های جاوا اسکریپت از جاوا اسکریپت معمولی استفاده می کنند. اما react از jsx که یک فرمت جاوا اسکریپت ساده است، برای قالب بندی استفاده می کند.
• یادگیری react js بسیار آسان است شما با داشتن دانش کافی از html/css و JS می توانید به راحتی با react کار کنید.
• تست پذیر است؛ بنابراین می توان به راحتی با پاس دادن پارامترها و state های توابع و کامپوننت ها را چک کنیم.
• قابلیت اتصال داده ها و استفاده دوباره از آن؛ این ویژگی بسیار مفید برای برنامه نویسان باعث صرفه جویی در زمان و مدیریت بهتر آن شده است.
• یکی از ویژگی های خوب react این است که المان ها با تغییر داده هایمان بروزرسانی می شوند.
• به دلیل کم حجم بودن کدها سئوی سایت را تقویت می کند.
• تضمین پایداری کدها با استفاده از جریان داده ای

 

دلایل استفاده از React

 

React قابلیت‌های بسیاری دارد که آن را تا این حد محبوب ساخته است که از جمله آن‌ها می‌توان به موارد زیر اشاره کرد:

• React مبتنی بر مفهومی به نام component (کامپوننت) است و این کمک می‌کند تا به راحتی و در زمان کمتری بتوانیم UI را بسازیم.
• ساختن و نوشتن کامپوننت های  React بسیار ساده است و به سادگی تعریف یک تابع می‌توانید یک کامپوننت جدید تعریف کنید.
• استفاده از JSX برای قالب بندی کامپوننت ها به جای جاوا اسکریپت معمولی
• React مبتنی بر جاوا اسکریپت است و برای یادگیری آن نیازی ندارید که یک زبان برنامه نویسی جدید یاد بگیرید.
• یادگیری آسان  React به طوری که اگر html, css , javascript را بلد باشید می‌توانید به راحتی آن را یاد بگیرید.
• امکان تست کردن آسان کامپوننت ها و کل برنامه
• قابلیت استفاده مجدد از داده‌ها و کامپوننت ها که باعث می‌شود کار برنامه نویسان بسیار آسان‌تر شود.
• کدهای  React بسیار کم حجم هستند و این قضیه باعث می‌شود که بتوان به راحتی سئوی سایت را قوی‌تر کرد.
• React از مفهومی به نام Virtual DOM استفاده می‌کند. این قابلیت باعث می‌شود که تغییرات در UI بسیار سریع‌تر و کم هزینه تر انجام شود. یعنی در زمان کمتر و با صرف هزینه پردازشی کمتری می‌توانید UI برنامه خود را تغییر بدهید.

 

• SEO Friendly بودن

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

 

React چگونه کار می کند؟

 

React برای تولید UI و انجام تغییرات در UI استفاده می‌شود. کار کردن  React به این شکل است که مستقیماً با DOM (عناصر موجود در صفحه) کار نمی‌کند بلکه یک DOM مجازی می سازد. هر تغییری که برنامه نویس بخواهد انجام دهد آن را مستقیماً بر روی DOM اعمال نمی‌کند بلکه به  React اعلان می‌کند (برنامه نویسی Declarative) سپس خود React تغییرات را بر روی DOM مجازی اعمال می‌کند و در صورت لزوم و بعد از اتمام کار به صورت یک‌جا بر روی DOM اصلی اعمال می شود. به این شکل برنامه نویس نگران افت کارایی و مشکلات تغییر DOM به صورت دستی نخواهد بود زیرا که React آن را مدیریت می کند.

 

تنها کاری که لازم است برای استفاده از ریکت انجام داد این است که کتابخانه آن را به فریم ورک مورد نظر خود اضافه کنید، این فریم ورک می تواند لاراول، سیمفونی و یا هر فریم ورک دیگری باشد.

برای استفاده از ریکت تنها کاری که لازم است انجام دهید این است که از طریق IDE مورد استفاده خود این کتابخانه را به پروژه خود اضافه کنید و با اضافه کردن آن می توانید از توابع آن در کد های رابط کاربری خود استفاده نمایید. البته باید در نظر داشته باشید که برای گرفتن خروجی مورد نظر از کتابخانه های ریکت لازم است که کتابخانه های دیگری نیز به پروژه شما اضافه شود. به عنوان مثال می توان کتابخانه های مدیریت وضعیت یا همان State Management، کتابخانه مسیریابی URL Mapping و API را از این موارد معرفی کرد.

 

ارتباط React با جاوا اسکریپت 

 

React یک کتابخانه است و زبان جدیدی نیست. یعنی یک بسته کد آماده است که از قبل نوشته شده است. ولی زبانی که این کتابخانه با آن پیاده‌سازی شده است جاوا اسکریپت است. برای استفاده از این کتابخانه نیاز است که به زبان جاوا اسکریپت و نسخه های ES6, ES7 مسلط باشید. چون همه منطق های برنامه در React با استفاده از کدهای جاوا اسکریپت پیاده‌سازی می شوند. پس برای اینکه بتوانید یک برنامه نویس خوب React شوید باید قبل از آن بر زبان جاوا اسکریپت تسلط داشته باشد.

 

معایب React

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

 

سرعت بالای توسعه

یکی از مهمترین مواردی که می تواند تا حدودی برنامه نویسان را گمراه کند سرعت بالای توسعه ریکت است. البته این مورد به معنی توسعه پروژه نیست و منظور ما خود ریکت است. اینکه یک فریم ورک و یا پلتفرم برنامه نویسی به سرعت و به خوبی توسعه پیدا کند خوب است، اما این موضوع می تواند باعث از بین رفتن سازگاری شود. فرض کنید که دوماه پیش  یک پروژه خوب و تمیز را با ریکت تحویل داده اید و اکنون به سراغ آن برگشته تا پروژه بعدی را هم به همان خوبی از آب درآورید اما می بینید که روش برنامه نویسی شما همان جواب سابق را نمی دهد و آنچه که در مورد کارکردن با ریکت می دانسته اید، تغییر کرده است.

 

داکیومنت های ضعیف

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

 

صرفا مربوط به UI بودن

ریکت صرفا مربوط به UI و رابط کاربری است. هر چند که این بخش از جاوا اسکریپت صرفا این کار را انجام می دهد اما اگر شما به سراغ فریم ورک های دیگر جاوا اسکریپت مانند Vue JS و یا Node JS  بروید، می توانید با استفاده از همین زبان بک اند های قدرتمندی را هم طراحی کنید.

 

پیچیدگی های JSX

ریکت برای کار کرد خود از کدهای JSX یا همان جاوا اسکریپت XML استفاده می کند تا پردازش آن سریع شود. اما مسئله ای که باید در نظر داشت این است که این کد ها می تواند ساختار های پیچیده ای را ایجاد کند که هم کار برنامه نویسی با آن به شدت سخت خواهد شد و هم اینکه در بعضی موارد خطایابی و اصلاح آنها کار خواهد برد.

هر چند استفاده از این نوع ساختار به ریکت کمک کرده است که صفحه را بسیار سریعتر لود کرده و کار خود را به درستی انجام دهد. اما باید در نظر داشت که این کدها می توانند هم مسیر توسعه و هم مسیر خطایابی را به شدت پیچیده کرده و بازدهی برنامه نویس را پایین بیاورند.

 

مقایسه React با :

 

ریکت و JQuery

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

در واقع ریکت می تواند در خیلی جهات از جی کوئری سریع تر و ساده تر باشد و برنامه نویسان با آن بیشتر راحتند. همینطور می تواند ویژگی اجرای نیتیو(Native) را به پروژه اضافه کند که باید گفت یکی از مهمترین المان ها در مصرف منابع سرور و در نتیجه بالا بردن سرعت سایت است. پس باید گفت اگر بخواهیم ریکت و جی گوئری را با هم مقایسه کنیمف باید بگوییم که ریکت ساده تر و بهینه تر می باشد. از طرفی  استفاده از امکانات گسترده و کاملی که جی کوئری ارائه می کند برای یک طراحی حرفه ای می تواند به نوعی ضروری باشد اما در صورتی که بخواهیم یک جواب برای این سوال که نتیجه مقایسه JQuery و ریکت چیست ارائه کنیم، می توانیم این مورد را در نظر داشته باشیم که این جریان با برتری ریکت از نظر راحتی در کارکرد، سرعت تحویل برنامه و بهینه بودن برنامه نهایی به پایان می رسد.

ریکت و ویو جی اس

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

 

ریکت و انگولار جی اس

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

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

در واقع باید گفت که ریکت سریعتر و کوچکتر است و کمی بهتر از انگولار عمل می کند. البته باید گفت در پروژه های کوچک ریکت کم خواهد آورد و نیاز به انگولار در اینجا ممکن است حس شود. البته باید در نظر داشته باشید که توانایی استفاده از ریکت در خود انگولار یک امتیاز به حساب می آید و می توان از کامپوننت های ریکت در انگولار هم استفاده کرد.

ما در آکادمی آنلاین قاسمی این امکان را فراهم نموده ایم تا با سبکی کاملا متفاوت و اصولی شما را از آغاز تا پایان دوره طراحی سایت-React همراهی کنیم و موفقیت شما را در این درس شاهد باشیم.