ريأكت
ويمكن استخدام الرياكت(React) كقاعدة في تطوير تطبيقات صفحة واحدة أو الهاتف المحمول. تتطلب تطبيقات الرياكت(React) المعقدة عادة استخدام مكتبات إضافية للإدارة  والتوجيه والتفاعل مع واجهة برمجة التطبيقات.
الرياكت(React) تم إنشاؤه من قبل Jordan Walke ، مهندس برامج في Facebook. تأثر XHP ، وهو إطار مكون HTML ل PHP. تم نشره لأول مرة على Facebook في 2011 وفي وقت لاحق على Instagram.com. تم فتحه في JSConf US في مايو 2013.
تم الإعلان عن React Native ، التي تعمل على تمكين Android و iOS و UWP مع React ، على Facebook React.js Conf في شباط 2015 وتم فتحها في مارس 2015.
في 18 أبريل 2017 ، أعلن فيسبوك React Fiber ، وهو خوارزمية أساسية جديدة من مكتبة إطار React لبناء واجهات المستخدم. كانت React Fiber هي الأساس لأي تحسينات مستقبلية وتطوير سمة لإطار React.
ما يلي هو مثال أولي لاستخدام React في HTML مع JSX و JavaScript.   فئة Greeter هو مكون React الذي يقبل خاصية الترحيب. يقوم أسلوب ReactDOM.render بإنشاء مثيل لمكون Greeter ، ويقوم بتعيين خاصية الترحيب إلى 'Hello World' ويقوم بإدراج المكون الذي تم تحويله كعنصر فرعي إلى عنصر DOM مع id myActeactApp.
عند عرضه في متصفح الويب ستكون النتيجة
يتم تمرير خصائص (عادةً ، props) إلى مكون من المكون الأساسي. تتلقى المكونات props كـ مجموعة واحدة من القيم غير القابلة للتغيير (كائن JavaScript). كلما تغيرت أي قيمة دعامية ، تسمى render function السماح للمكون بعرض التغيير.
تحتفظ الدول بقيم في جميع أنحاء المكون ويمكن تمريرها إلى المكونات الفرعية من خلال الدعائم:
class ParentComponent extends React.Component {
ميزة أخرى ملحوظة هي استخدام "نموذج كائن المستند الافتراضي" أو "DOM الظاهري". ينشئ React ذاكرة تخزين مؤقت لبنية البيانات في الذاكرة ، ويحسب الاختلافات الناتجة ، ثم يقوم بتحديث DOM المعروض في المتصفح بكفاءة. يسمح هذا للمبرمج بكتابة الكود كما لو أن الصفحة بأكملها يتم تقديمها في كل تغيير ، بينما تقوم مكتبات React بإعادة تقديم المكونات الفرعية التي تتغير فعليًا.
تعتبر أساليب دورة الحياة هي التي تسمح بتنفيذ التعليمات البرمجية في نقاط التعيين خلال عمر المكون.جافا سكريبت XML (JSX) هو امتداد لبناء جملة لغة JavaScript. تشبه JSX في مظهرها إلى HTML ، وتوفر طريقة لتنظيم عرض المكون باستخدام صيغة مألوفة للعديد من المطورين. عادةً ما يتم كتابة مكونات التفاعل باستخدام JSX ، على الرغم من أنه لا يلزم أن تكون (يمكن كتابة المكونات أيضًا في JavaScript خالصة). يشبه JSX بنية ملحق أخرى تم إنشاؤها بواسطة Facebook لـ PHP ، XHP.
مثال على كود JSX:
class App extends React.Component {هناك عناصر متعددة في نفس المستوى تحتاج إلى وضعها في عنصر واحد مثل عنصرالموضح أعلاه ، أو يتم إرجاعها كمصفوفة.يوفر JSX نطاقًا من سمات العناصر المصممة لمراعاة تلك التي يوفرها HTML. يمكن أيضًا تمرير السمات المخصصة إلى المكون. سيتم استلام كل السمات بواسطة المكون على شكل دعائم.يمكن استخدام تعبيرات JavaScript (وليس عبارات) داخل JSX مع الأقواس {}:
المثال السابق سوف ينفذ هذه النتيجة:إذا تعذر استخدام عبارات-else داخل JSX ، فيمكن استخدام التعبيرات الشرطية بدلاً من ذلك. سيوضح المثال أدناه {i === 1؟ 'true': 'false'} كسلسلة 'true' لأن i يساوي 1.
class App extends React.Component {
يمكن استخدام الدالات و JSX في الشروط الشرطية:
class App extends React.Component {
المثال السابق سوف ينفذ:تتطلب الشفرة المكتوبة في JSX التحويل باستخدام أداة مثل Babel قبل فهمها بواسطة متصفحات الويب. يتم تنفيذ هذه المعالجة بشكل عام أثناء عملية إنشاء برنامج قبل نشر التطبيق.
يتم تطبيق البنية الأساسية لـ React بعد تقديم HTML في المستعرض. على سبيل المثال ، يحتوي موقع Facebook على مخططات ديناميكية يتم عرضها على علامات
لا يحاول React توفير "إطار عمل تطبيق" كامل. وهي مصممة خصيصًا لبناء واجهات المستخدم ولذلك لا تتضمن العديد من الأدوات التي قد يعتبرها المطورون ضرورية لإنشاء تطبيق. يسمح هذا باختيار المكتبات التي يفضلها المطور لإنجاز المهام مثل تنفيذ الوصول إلى الشبكة أو تخزين البيانات المحلي. ظهرت أنماط الاستخدام الشائعة كلما نضجت المكتبة.
لدعم مفهوم React الخاص بتدفق البيانات أحادي الاتجاه (والذي يمكن مقارنته بتدفق Angular في اتجاه ثنائي الاتجاه) ، تمثل بنية Flux بديلاً عن بنية وحدة تحكم عرض Model الشائعة. يتميز Flux بالإجراءات التي يتم إرسالها من خلال موزع مركزي إلى متجر ، ويتم نشر التغييرات على المتجر مرة أخرى إلى العرض. عند استخدامها مع React ، يتم تحقيق هذا الانتشار من خلال خصائص المكون.
يمكن اعتبار تدفق متغير من نمط المراقب.
لا يجب أن يقوم مكون React تحت بنية Flux مباشرةً بتعديل أي دعامات تم تمريرها إليه ، ولكن يجب تمرير وظائف رد الاتصال التي تقوم بإنشاء إجراءات يرسلها المرسل لتعديل المخزن. الإجراء عبارة عن كائن تتمثل مسؤوليته في وصف ما حدث: على سبيل المثال ، قد يتضمن إجراء يصف مستخدمًا واحدًا يتبع "مستخدم آخر" معرف مستخدم ومعرف مستخدم مستهدف ونوع USER_FOLLOWED_ANOTHER_USER. يمكن للمتاجر (التي يمكن اعتبارها كنماذج) أن تغير نفسها استجابة للإجراءات المتلقاة من المرسل.
يتم التعبير عن هذا النمط أحيانًا على أنه "تدفق الخصائص لأسفل ، تدفق الإجراءات لأعلى". تم إنشاء العديد من تطبيقات Flux منذ إنشائها ، وربما يكون الأكثر شهرة هو Redux الذي يتميز بمتجر واحد ، غالباً ما يسمى مصدر واحد للحقيقة.
تم الإعلان عن React Native من خلال Facebook في عام 2015 ، مع تطبيق بنية React على تطبيقات Android و iOS وتطبيقات UWP الأصلية.
في عام 2012 ، علّق مارك زوكربيرج قائلاً: "أكبر خطأ ارتكبناه كشركة كان يراهن كثيرًا على HTML5 مقارنة بالأصليين". ووعد بأن يقدم Facebook قريبًا تجربة جوّال أفضل.
داخل Facebook ، عثر Jordan Walke على طريقة لإنشاء عناصر واجهة المستخدم لنظام التشغيل iOS من مؤشر ترابط جافا سكريبت في الخلفية. قرروا تنظيم هاكاثون داخلي لإتقان هذا النموذج الأولي من أجل أن يكونوا قادرين على بناء التطبيقات المحلية مع هذه التكنولوجيا ..
بعد بضعة أشهر من التطوير ، أصدر Facebook النسخة الأولى من برنامج React.js Conf لعام 2015. خلال حديث تقني ، أوضح كريستوفر Chedeau أن Facebook يستخدم بالفعل React Native في الإنتاج لتطبيقهم الجماعي وتطبيق إعلانات الإدارة.
مبادئ عمل React Native هي في الأساس نفس ردة الفعل إلا أنها لا تتلاعب بالـ DOM عبر VirtualDom لكن بعض وجهات النظر المحلية. يتم تشغيله في عملية الخلفية (التي تفسر جافا سكريبت المكتوبة من قبل المطورين) مباشرة على الجهاز النهائي ويتواصل مع النظام الأساسي الأصلي عبر جسر متسلسل وغير متزامن ومدفوع.
يمكن ملاحظة أن Facebook قد صحح الخطأ الذي ذكره Mark Zuckerberg في 2012: React Native لا يعتمد على HTML5 على الإطلاق ، كل شيء مكتوب بلغة JavaScript ، ويعتمد على حزم SDK الأصلية.
مرحبا ، البرنامج العالمي في React Native يشبه هذا:
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
export default class HelloWorldApp extends Component {
// Skip this line if using Create React Native App
AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);
// The ReactJS code can also be imported into another component with the following code:
import HelloWorldApp from './HelloWorldApp';
يمكن تتبع حالة المشروع من خلال منتدى مناقشة الفريق الأساسي. ومع ذلك تغييرات كبيرة على رد فعل تذهب من خلال مستقبل ريبو ريك ، القضايا وسحب الطلبات. يتيح هذا لمجتمع React تقديم تعليقات حول الميزات الجديدة المحتملة ، واجهات برمجة التطبيقات التجريبية وتحسينات بنية جافا سكريبت.
حالة مشاريع React الفرعية كانت متوفرة في ويكي المشروع.
يتطلب Facebook من المساهمين رد فعل للتوقيع على CLA الخاص بـ Facebook.
أحد الانتقادات من ReactJS هو أنه يحتوي على متطلبات ذاكرة عالية (RAM) ، لأنه يستخدم مفهوم "DOM الظاهري". هذا هو المكان حيث يتم الاحتفاظ "بتمثيل واجهة المستخدم في الذاكرة ومزامنتها مع DOM" الحقيقي من قبل مكتبة مثل ReactDOM. "