ريأكت

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

تحتفظ الدول بقيم في جميع أنحاء المكون ويمكن تمريرها إلى المكونات الفرعية من خلال الدعائم:

class ParentComponent extends React.Component {
  state = { color: 'red' };
  render() {
    return (
      <ChildComponent color={this.state.color}></div>
    );
  }
}

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

تعتبر أساليب دورة الحياة هي التي تسمح بتنفيذ التعليمات البرمجية في نقاط التعيين خلال عمر المكون.

• يتيح shouldComponentUpdate للمطوّر منع إعادة عرض غير ضروري لأحد المكونات عن طريق إرجاع false إذا كان العرض غير مطلوب. يتم استدعاء componentDidMount بمجرد أن يكون المكون مركبًا (تم إنشاء المكون في واجهة المستخدم، غالبًا عن طريق ربطه بعقد DOM). يُستخدم هذا بشكل شائع لتشغيل تحميل البيانات من مصدر بعيد عبر واجهة برمجة التطبيقات. تقديم هو أسلوب دورة الحياة الأهم وواحد فقط المطلوبة في أي مكون. وعادة ما يطلق عليه في كل مرة يتم تحديث بيانات المكون، مما يعكس التغييرات في واجهة المستخدم.

جافا سكريبت XML (JSX) هو امتداد لبناء جملة لغة JavaScript. تشبه JSX في مظهرها إلى HTML ، وتوفر طريقة لتنظيم عرض المكون باستخدام صيغة مألوفة للعديد من المطورين. عادةً ما يتم كتابة مكونات التفاعل باستخدام JSX ، على الرغم من أنه لا يلزم أن تكون (يمكن كتابة المكونات أيضًا في JavaScript خالصة). يشبه JSX بنية ملحق أخرى تم إنشاؤها بواسطة Facebook لـ PHP ، XHP.

مثال على كود JSX:

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}

العناصر المتداخلة

هناك عناصر متعددة في نفس المستوى تحتاج إلى وضعها في عنصر واحد مثل عنصرالموضح أعلاه، أو يتم إرجاعها كمصفوفة.

السمات

يوفر JSX نطاقًا من سمات العناصر المصممة لمراعاة تلك التي يوفرها HTML. يمكن أيضًا تمرير السمات المخصصة إلى المكون. سيتم استلام كل السمات بواسطة المكون على شكل دعائم.

تعبيرات JavaScript

يمكن استخدام تعبيرات JavaScript (وليس عبارات) داخل JSX مع الأقواس {}:

  <h1>{10+1}</h1>

المثال السابق سوف ينفذ هذه النتيجة:

 <h1>11</h1>

عبارات شرطية

إذا تعذر استخدام عبارات-else داخل JSX ، فيمكن استخدام التعبيرات الشرطية بدلاً من ذلك. سيوضح المثال أدناه {i === 1؟ 'true': 'false'} كسلسلة 'true' لأن i يساوي 1.

class App extends React.Component {
  render() {
    const i = 1;
    return (
      <div>
        <h1>{ i === 1 ? 'true' : 'false' }</h1>
      </div>
    );
  }
}

يمكن استخدام الدالات و JSX في الشروط الشرطية:

class App extends React.Component {
  render() {
    const sections = [1, 2, 3];
    return (
      <div>
        { 
          sections.length> 0
            ? sections.map(n => <div>Section {n}</div>)
            : null
        }
      </div>
    );
  }
}

المثال السابق سوف ينفذ:

<div>
 <div>Section 1</div>
 <div>Section 2</div>
 <div>Section 3</div>
</div>

تتطلب الشفرة المكتوبة في JSX التحويل باستخدام أداة مثل Babel قبل فهمها بواسطة متصفحات الويب. يتم تنفيذ هذه المعالجة بشكل عام أثناء عملية إنشاء برنامج قبل نشر التطبيق.

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

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

يمكن اعتبار تدفق متغير من نمط المراقب.

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

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

مبادئ عمل 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 {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

// 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 الفرعية كانت متوفرة في ويكي المشروع.

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