| نویسنده(های) اصلی | جردن واک |
|---|---|
| توسعهدهنده(ها) | متا و جامعه نرمافزاری |
| انتشار اولیه | ۲۹ مه ۲۰۱۳[۱][۲] |
| انتشار(های) پایدار | |
19.2.3[۳] | |
| انتشار(های) آزمایشی | |
19.0.0-rc.1
/ ۱۴ نوامبر ۲۰۲۴[۴] | |
| مخزن | |
| نوشتهشده با | جاوااسکریپت |
| پلتفرم | سکوی وب |
| نوع | کتابخانه جاوااسکریپت |
| مجوز | پروانه امآیتی |
ریاکت (به انگلیسی: React)، که با نامهای 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
۱. پیچیدگی برای مبتدیان
۲. افزایش حجم کد در پروژههای بزرگ
۳. محدودیت در استفاده از برخی فناوریهای جانبی
۴. کمبود منابع آموزشی جامع
۵. نیاز به پیکربندی و تنظیمات زیاد
۶. دشواری در بازبینی کدها
۷. بروزرسانیهای مکرر و تغییرات سریع
پانویس
- ↑ Occhino, Tom; Walke, Jordan (5 August 2013). "JS Apps at Facebook". YouTube. Archived from the original on 31 May 2022. Retrieved 2024-10-12.
- ↑ "Is React a Library or a Framework? Here's Why it Matters". freeCodeCamp.org (به انگلیسی). 2021-04-12. Retrieved 2024-10-12.
- ↑ "Release 19.2.3". 11 دسامبر 2025. Retrieved 13 December 2025.
- ↑ "What's new in React 19". Archived from the original on 2024-05-12. Retrieved 2024-05-12.
- ↑ "React – A JavaScript library for building user interfaces". reactjs.org (به انگلیسی). Archived from the original on April 8, 2018. Retrieved 7 April 2018.
- ↑ "Chapter 1. What Is React? - What React Is and Why It Matters [Book]". www.oreilly.com (به انگلیسی). Archived from the original on May 6, 2023. Retrieved 2023-05-06.
- ↑ "React – A JavaScript library for building user interfaces". reactjs.org (به انگلیسی). Archived from the original on April 8, 2018. Retrieved 7 April 2018.
- ↑ Krill, Paul (May 15, 2014). "React: Making faster, smoother UIs for data-driven Web apps". InfoWorld. Archived from the original on 2018-06-12. Retrieved 2021-02-23.
- ↑ Hemel, Zef (June 3, 2013). "Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews". infoq.com (به انگلیسی). Archived from the original on May 26, 2022. Retrieved 2022-01-11.
- ↑ Dawson, Chris (July 25, 2014). "JavaScript's History and How it Led To ReactJS". The New Stack (به انگلیسی). Archived from the original on Aug 6, 2020. Retrieved 2020-07-19.
- ↑ «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. دریافتشده در ۲۰۱۶-۱۲-۰۳.
- ↑ «Facebook announces React Fiber, a rewrite of its React framework – TechCrunch». techcrunch.com (به انگلیسی). دریافتشده در ۲۰۱۸-۰۵-۰۴.
- ↑ "acdlite/react-fiber-architecture". GitHub (به انگلیسی). Retrieved 2018-05-04.
- ↑ «Meeting Notes». React Discuss. بایگانیشده از اصلی در ۲۲ دسامبر ۲۰۱۵. دریافتشده در ۲۰۱۶-۱۲-۰۴.
- ↑ «facebook/react». GitHub. دریافتشده در ۲۰۱۶-۱۲-۰۴.
- ↑ "React". react.dev (به انگلیسی). Retrieved 2023-06-18.
- ↑ «چگونه یک پروژه عملی با React بسازیم؟ (راهنمای گام به گام)». learnclasico.com. دریافتشده در ۲۰۲۵-۰۸-۰۹.
