ری‌اکت

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

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

براساس آنالیزهای جاوااسکریپت سرویس لیبسکور، ری‌اکت در حال حاضر در سایت‌های نت‌فلیکس، ایمجر، بلیچر رپورت، فیدلی، ایر بی‌ان‌بی و … مورد استفاده قرار می‌گیرد.

 تاریخچه 
ری‌اکت توسط جردن واک، یک مهندس نرم‌افزار در فیس‌بوک، ساخته شده‌است. او از XHP که یک چارچوب فریم‌ورک HTML برای PHP است، تأثیر گرفته‌است. اولین نسخه‌ای که او در سال ۲۰۱۱ توسعه داد در بخش اخبار فیس‌بوک و بعدها در سال ۲۰۱۲ در سرویس اینستاگرام مورد استفاده قرار گرفت. در سال ۲۰۱۳ در جریان کنفرانس آمریکا JSConf این کتابخانه متن‌باز اعلام شد.

ReactNative، که امکان توسعه برنامه‌های مبتنی بر Android, IOS و UWP را با React فراهم می‌کند، در فوریه ۲۰۱۵ در React.js Conf فیسبوک معرفی شد و در مارس ۲۰۱۵ به صورت رایگان عرضه شد.

در ۱۸ آوریل ۲۰۱۷ فیسبوک اعلام کرد React Fiber، یک الگوریتم اصلی جدید React library برای ایجاد رابط کاربری است. React Fiber پایه و اساس هرگونه پیشرفت‌های آینده و ویژگی‌های چارچوب React خواهد بود.

 ویژگی‌های قابل توجه 
 جریان داده‌ای یک سویه 
 DOM مجازی 
وقتی صفحه وبی بارگذاری می‌شود مرورگر یک مدل شی گرا از المان‌های موجود در صفحه می‌سازد. این مدل Dom یا Document Object Model نام دارد. این نمودار یک نمودار درختی از اشیا موجود در صفحه است. برنامه‌هایی مانند جاوااسکریپت با استفاده از این مدل یک صفحه Html را به صورت پویا ایجاد می‌کنند.

در تکنولوژیReact.js از مفهومی به نام Dom مجازی (Virtual DOM) استفاده می‌شود و به این صورت کار می‌کند که برای هر شی Dom که ویژگی جدیدی قرار است برای آن ساخته شود نیازی نیست که آن شی دوباره ساخته شود بلکه تنها نیاز است که آن ویژگی مورد نظر را تغییر داد یا افزود.

 جی‌اس‌ایکس (JSX) 
جی‌اس‌ایکس یک نسخه گسترش یافته از جاوااسکریپت است که این امکان را می‌دهد تا بتوان در کنار کدهای جاوااسکریپت از کدهای اچ‌تی‌ام‌ال نیز بهره برد که به موجب آن کامپوننت‌های ری‌اکت معمولاً در قالب جی‌اس‌ایکس نوشته می‌شوند. همچنین ممکن است توسعه دهندگان تنها از جاوااسکریپت خالص استفاده کنند. جی‌اس‌ایکس مشابه XHP در PHP است.

 معماری فراتر از HTML 
 ری‌اکت نیتیو(React Native) 
ری‌اکت نیتیو یک فریم‌ورک جاواسکریپت است که برای طراحی برنامه‌های بومی موبایل و برای سیستم عامل‌های اندروید و iOS ساخته شده‌است. React Native بر پایهٔ کتاب‌خانهٔ جاوا اسکریپت فیسبوک یعنی همان ReactJs ساخته شده‌است، اما به‌جای هدف قرار دادن مرورگر، این‌بار پلتفرم‌های موبایل را مورد هدف قرار داده‌است.

به‌عبارتی حالا توسعه دهندههای وب می‌توانند برنامه‌هایی برای موبایل بنویسند که کاملاً بومی یا اپلیکیشن نیتیو به نظر برسند و همگی از کتابخانه React نوشته شده باشند.

برخی از اپلیکیشن‌هایی که با ری‌اکت نیتیو ساخته شده‌اند:Instagram - Facebook - Facebook Ads Manager - f8 - Skype , ...

 آینده توسعه 
وضعیت توسعه پروژه را می‌توان در انجمن تیم اصلی توسعه دهندگان آن دنبال کرد. هرچند تغییرات جزئی، مشکلات و درخواست ادغام آن در مخزن آینده ری‌اکت(Feture of React) دنبال می‌شوند.

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

ری اکت جی‌اس یکی از کتاب‌خانه‌های جاوا اسکریپت است، اما React Native یکی از فریمورک‌های جاوا اسکریپت است که از React Js استفاده می‌کند.

برای توسعه اپلیکیشن‌های سیستم عامل اندروید از زبان جاوا و برای توسعه اپلیکیشن‌های سیستم عامل iOS از زبان سوییفت (Swift) استفاده می‌شود. در حالی‌که React Native می‌تواند در توسعه هر دو سیستم عامل مورد استفاده قرار گیرد.

 توافق‌نامه مجوز مؤلف فیس‌بوک 
فیس‌بوک مشارکت کنندگان ری‌اکت را مجاب به پذیرش توافق‌نامه مجوز مؤلف می‌داند.

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

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

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

 جی‌اس‌ایکس (JSX) برای خوانایی بهتر 
React با استفاده از JSX، ترکیبی از جاوااسکریپت و مارکاپ مانند HTML، به توسعه‌دهندگان این امکان را می‌دهد تا کامپوننت‌های خود را به‌صورت واضح‌تر و خوانایی بالاتری توصیف کنند. این امر، فهم و نگهداری کد را تسهیل می‌بخشد و به توسعه‌دهندگان اجازه می‌دهد تا با سرعت بیشتری بر روی ساخت رابط کاربری تمرکز کنند.

 جمع‌بندی 
React با ارائه راهکارهای نوآورانه در زمینه مدیریت وضعیت، جریان داده‌ای یک‌سویه، استفاده از DOM مجازی و ساده‌سازی توسعه با JSX، اصول مهندسی نرم‌افزار را در توسعه برنامه‌های وب و موبایل به‌کار می‌گیرد. این ویژگی‌ها، React را به ابزاری قدرتمند برای ساخت رابط‌های کاربری پویا و کارآمد تبدیل کرده‌اند.

 نصب ReactJS 
به ۳ روش امکان نصب ری اکت جی اس وجود دارد اما بهترین راه استفاده از بسته create-react-app است که به راحتی توسط npm قابل نصب می‌باشد.

برای نصب و استفاده مراحل زیر توسط npm انجام می‌شود:

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

 اصطلاحات رایج 
ری اکت تلاش نمی‌کند یک کتابخانه کامل ارائه بدهد. بلکه به‌طور خاص برای ساخت رابط‌های کاربری طراحی شده‌است.

اگر میخواهید دانش خود را به یک پروژه ملموس تبدیل کنید، در سایت learnclassico.ir میتوانید بصورت مرحله ای یک پروژه عملی با React بسازید و اولین پروژه خود را راه اندازی کنید. لینک مستقیم مقاله https://learnclasico.com/articles/softdev/how-to-create-a-react-project

 مزایا و معایب React 

 مزایای React 
۱. سرعت بالا در اجرا و رندر صفحات

۲. سازگاری با سایر فریم‌ورک‌ها و کتابخانه‌ها

۳. قابلیت استفاده مجدد و نگهداری آسان

۴. جامع و چندمنظوره بودن

 معایب React 
۱. پیچیدگی برای مبتدیان

۲. افزایش حجم کد در پروژه‌های بزرگ

۳. محدودیت در استفاده از برخی فناوری‌های جانبی

۴. کمبود منابع آموزشی جامع

۵. نیاز به پیکربندی و تنظیمات زیاد

۶. دشواری در بازبینی کدها

۷. بروزرسانی‌های مکرر و تغییرات سریع

 پانویس 

رده:ای‌جکس
رده:برنامه‌های کاربردی وب
رده:چارچوب‌های نرم‌افزاری اینترنت
رده:کتابخانه‌های جاوااسکریپت
رده:نرم‌افزارهای ۲۰۱۵ (میلادی)
رده:نرم‌افزارهای دارای اجازه‌نامه ام‌آی‌تی
رده:نرم‌افزارهایی که از پروانه بی‌اس‌دی استفاده می‌کنند
رده:ویکی‌سازی رباتیک