ريأكت

تاريخ رياكت نيتف

الرياكت(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.
<div id="myReactApp"></div><script type="text/babel">
  class Greeter extends React.Component { 
    render() { 
      return <h1>{this.props.greeting}</h1>
    } 
  }

  ReactDOM.render(<Greeter greeting="Hello World!" ></Greeter>, document.getElementById('myReactApp'));</script>
   فئة Greeter هو مكون React الذي يقبل خاصية الترحيب. يقوم أسلوب ReactDOM.render بإنشاء مثيل لمكون Greeter ، ويقوم بتعيين خاصية الترحيب إلى 'Hello World' ويقوم بإدراج المكون الذي تم تحويله كعنصر فرعي إلى عنصر DOM مع id myActeactApp.
عند عرضه في متصفح الويب ستكون النتيجة
<div id="myReactApp">
  <h1>Hello World!</h1></div>

ربط البيانات في اتجاه واحد مع الدعم

يتم تمرير خصائص (عادةً ، props) إلى مكون من المكون الأساسي. تتلقى المكونات props كـ مجموعة واحدة من القيم غير القابلة للتغيير (كائن JavaScript). كلما تغيرت أي قيمة دعامية ، تسمى render function السماح للمكون بعرض التغيير.

مكونات ثابته

تحتفظ الدول بقيم في جميع أنحاء المكون ويمكن تمريرها إلى المكونات الفرعية من خلال الدعائم:
class ParentComponent extends React.Component {
  state = { color: 'red' };
  render() {
    return (
      <ChildComponent color={this.state.color} ></div>
    );
  }}

 DOM مرئي

ميزة أخرى ملحوظة هي استخدام "نموذج كائن المستند الافتراضي" أو "DOM الظاهري". ينشئ React ذاكرة تخزين مؤقت لبنية البيانات في الذاكرة ، ويحسب الاختلافات الناتجة ، ثم يقوم بتحديث DOM المعروض في المتصفح بكفاءة. يسمح هذا للمبرمج بكتابة الكود كما لو أن الصفحة بأكملها يتم تقديمها في كل تغيير ، بينما تقوم مكتبات React بإعادة تقديم المكونات الفرعية التي تتغير فعليًا.

العمارة بعد HTML

يتم تطبيق البنية الأساسية لـ React بعد تقديم HTML في المستعرض. على سبيل المثال ، يحتوي موقع Facebook على مخططات ديناميكية يتم عرضها على علامات 

التعابير المشتركة

لا يحاول React توفير "إطار عمل تطبيق" كامل. وهي مصممة خصيصًا لبناء واجهات المستخدم ولذلك لا تتضمن العديد من الأدوات التي قد يعتبرها المطورون ضرورية لإنشاء تطبيق. يسمح هذا باختيار المكتبات التي يفضلها المطور لإنجاز المهام مثل تنفيذ الوصول إلى الشبكة أو تخزين البيانات المحلي. ظهرت أنماط الاستخدام الشائعة كلما نضجت المكتبة.

استخدام بنية التدفق

لدعم مفهوم React الخاص بتدفق البيانات أحادي الاتجاه (والذي يمكن مقارنته بتدفق Angular في اتجاه ثنائي الاتجاه) ، تمثل بنية Flux بديلاً عن بنية وحدة تحكم عرض Model الشائعة. يتميز Flux بالإجراءات التي يتم إرسالها من خلال موزع مركزي إلى متجر ، ويتم نشر التغييرات على المتجر مرة أخرى إلى العرض. عند استخدامها مع React ، يتم تحقيق هذا الانتشار من خلال خصائص المكون.
يمكن اعتبار تدفق متغير من نمط المراقب.
لا يجب أن يقوم مكون React تحت بنية Flux مباشرةً بتعديل أي دعامات تم تمريرها إليه ، ولكن يجب تمرير وظائف رد الاتصال التي تقوم بإنشاء إجراءات يرسلها المرسل لتعديل المخزن. الإجراء عبارة عن كائن تتمثل مسؤوليته في وصف ما حدث: على سبيل المثال ، قد يتضمن إجراء يصف مستخدمًا واحدًا يتبع "مستخدم آخر" معرف مستخدم ومعرف مستخدم مستهدف ونوع USER_FOLLOWED_ANOTHER_USER. يمكن للمتاجر (التي يمكن اعتبارها كنماذج) أن تغير نفسها استجابة للإجراءات المتلقاة من المرسل.
يتم التعبير عن هذا النمط أحيانًا على أنه "تدفق الخصائص لأسفل ، تدفق الإجراءات لأعلى". تم إنشاء العديد من تطبيقات Flux منذ إنشائها ، وربما يكون الأكثر شهرة هو Redux الذي يتميز بمتجر واحد ، غالباً ما يسمى مصدر واحد للحقيقة.

 رياكت نيتف React Native

تم الإعلان عن 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 الأصلية.

Hello World

مرحبا ، البرنامج العالمي في React Native يشبه هذا:
 1 import React, { Component } from 'react'; 2 import { AppRegistry, Text } from 'react-native'; 3  4 export default class HelloWorldApp extends Component { 5   render() { 6     return ( 7       <Text>Hello world!</Text> 8     ); 9   }10 }11 12 // Skip this line if using Create React Native App13 AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);14 15 // The ReactJS code can also be imported into another component with the following code:16 17 import HelloWorldApp from './HelloWorldApp';

تطوير المستقبل

يمكن تتبع حالة المشروع من خلال منتدى مناقشة الفريق الأساسي. ومع ذلك تغييرات كبيرة على رد فعل تذهب من خلال مستقبل ريبو ريك ، القضايا وسحب الطلبات. يتيح هذا لمجتمع React تقديم تعليقات حول الميزات الجديدة المحتملة ، واجهات برمجة التطبيقات التجريبية وتحسينات بنية جافا سكريبت.

مشاريع فرعية

حالة مشاريع React الفرعية كانت متوفرة في ويكي المشروع.

Facebook CLA

يتطلب Facebook من المساهمين رد فعل للتوقيع على CLA الخاص بـ Facebook.

نقد ReactJS

أحد الانتقادات من ReactJS هو أنه يحتوي على متطلبات ذاكرة عالية (RAM) ، لأنه يستخدم مفهوم "DOM الظاهري". هذا هو المكان حيث يتم الاحتفاظ "بتمثيل واجهة المستخدم في الذاكرة ومزامنتها مع DOM" الحقيقي من قبل مكتبة مثل <g class="gr_ gr_5 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace" id="5" data-gr-id="5">ReactDOM</g>. "