ری‌اکت

ری‌اکت

نویسنده(های) اصلی	جردن واک
توسعه‌دهنده(ها)	فیس‌بوک، اینستاگرام و انجمن
انتشار اولیه	مارس ۲۰۱۳؛ ۱۱ سال پیش (۲۰۱۳}})
انتشار پایدار	۱۶٫۲٫۰ / ۲۸ نوامبر ۲۰۱۷؛ ۶ سال پیش (۲۰۱۷-28}})[۱]
مخزن	github.com/facebook/react
نوشته‌شده با	جاوااسکریپت
پلت‌فرم	چندسکویی
حجم	109 KiB production 710 KiB development
نوع	کتابخانه جاوااسکریپت
مجوز	پروانه ام‌آی‌تی
وبگاه	fa.reactjs.org

ری‌اکت (به انگلیسی: React)، یک کتابخانه^[۲] متن‌باز جاوا اسکریپت برای ساخت رابط‌های کاربری و اجزای صفحات وب است.

ری‌اکت در دو نسخه ری‌اکت جی اس (به انگلیسی: React.js) و ری‌اکت نیتیو (به انگلیسی: React Native) ارائه شده‌است. ری‌اکت جی اس برای دسکتاپ و ری‌اکت نیتیو برای طراحی برنامه‌های موبایل می‌باشد. از دیگر کتابخانه‌های مشابه می‌توان به انگولار و ویو اشاره کرد. این کتابخانه‌های جاوا اسکرپت با هدف ساختن صفحات وب در صفحه مرورگر مقصد به جای ساخته شدن صفحات در سمت سرور تولید شده‌اند. بدین مفهوم که پس از ارتباط اولیه کلاینت با سرور، ابتدا این کتابخانه‌ها بر روی کلاینت بارگزاری می‌شوند و سپس از طریق ارتباط با API محتوای متغیر درون صفحه به صورت جداگانه بارگیری شده و صفحه وب در سمت مقصد سرهم می‌شود.

درست شدن صفحات وب در سمت مقصد با این روش این امکان را فراهم می‌کند که بتوان برنامه‌هایی با سرعت بالا و پر قدرت برای صفحات نوشت که در گذشته امکان‌پذیر نبود.

این کتابخانه توسط فیس‌بوک و جامعه‌ای از توسعه‌دهندگان و شرکت‌ها به صورت انفرادی توسعه و نگه‌داری می‌شوند.^[۳] براساس آنالیزهای جاوااسکریپت سرویس لیبسکور، ری‌اکت در حال حاضر در سایت‌های نت‌فلیکس، ایمجر، بلیچر رپورت، فیدلی، ایر بی‌ان‌بی و … مورد استفاده قرار می‌گیرد.

به دلیل بهینه بودن ری‌اکت برای دریافت اطلاعاتی که با سرعت تغییر می‌کنند، می‌توان از آن برای توسعه برنامه تک‌صفحه‌ای(SPA) یا برنامه‌های موبایل استفاده کرد. هرچند دریافت اطلاعات، ابتدایی‌ترین بخش در یک صفحهٔ وب است و برنامه‌های پیچیده ری‌اکت معمولاً به کتابخانه‌های اضافه‌ای برای مدیریت وضعیت (به انگلیسی: State Management)،مسیریابی (URL mapping)، و اتصال به رابط برنامه‌نویسی کاربردی (API) نیاز دارند.

ری‌اکت و ری‌اکت نیتیو از جمله پروژه‌های متن‌باز شرکت فیس‌بوک هستند که در صدر محبوب‌ترین پروژه‌های وبگاه گیت‌هاب قرار دارند.^[۴]

ری اکت اساساً یک کتابخانه متن باز جاوااسکریپتی برای ساخت رابط کاربری (User Interfaces) برای اپلیکیشن‌های تک‌صفحه‌ای (Single Page Applications) است. همچنین ری‌اکت این امکان رو در اختیار ما می‌گذارد که اجزای قابل استفاده مجدد رابط کاربری (Reusable UI Components) را ایجاد کنیم. ری‌اکت در ابتدا توسط جردن واک یکی از مهندسین ارشد فیسبوک ایجاد شد. ری‌اکت ابتدا در سال ۲۰۱۱ در فیسبوک مورد استفاده قرار گرفت و سپس در سال ۲۰۱۲ در اینستاگرام از آن استفاده شد.

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

تاریخچه

ری‌اکت توسط جردن واک، یک مهندس نرم‌افزار در فیس‌بوک، ساخته شده‌است. او از 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

اصطلاحات رایج

ری اکت تلاش نمی‌کند یک کتابخانه کامل ارائه بدهد. بلکه به‌طور خاص برای ساخت رابط‌های کاربری طراحی شده‌است.^[۱۰]

پروانه نرم‌افزاری

پانویس

1. "Releases - facebook/react". GitHub.
2. "React – A JavaScript library for building user interfaces". reactjs.org (به انگلیسی). Retrieved 2020-08-07.
3. «Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews». InfoQ. بایگانی‌شده از اصلی در ۸ مارس ۲۰۱۶. دریافت‌شده در ۲۰۱۶-۱۲-۰۳.
4. «Open source in 2015: A year of growth». Facebook Code. دریافت‌شده در ۲۰۱۶-۱۲-۰۳.
5. «Bill Fisher's answer to How was the idea to develop React conceived and how many people worked on developing it and implementing it at Facebook? - Quora». www.quora.com. دریافت‌شده در ۲۰۱۶-۱۲-۰۳.
6. «Facebook announces React Fiber, a rewrite of its React framework – TechCrunch». techcrunch.com (به انگلیسی). دریافت‌شده در ۲۰۱۸-۰۵-۰۴.
7. "acdlite/react-fiber-architecture". GitHub (به انگلیسی). Retrieved 2018-05-04.
8. «Meeting Notes». React Discuss. بایگانی‌شده از اصلی در ۲۲ دسامبر ۲۰۱۵. دریافت‌شده در ۲۰۱۶-۱۲-۰۴.
9. «facebook/react». GitHub. دریافت‌شده در ۲۰۱۶-۱۲-۰۴.
10. "React". react.dev (به انگلیسی). Retrieved 2023-06-18.