ريأكت (React)، هي مكتبة مبنية للبرمجة بلغة جافا سكربت متخصصة بواجهات المستخدم تم بناؤها من قبل شركة فيسبوك، حيث تقدم طريقة سلسلة وقوية في الوقت ذاته لبناء واجهات المواقع الالكترونية، فهي تسمح للمطورين ببناء مُكوِّن صفحات الوب مرة واحدة بحيث يمكن إعادة استخدامه عدة مرات.
| نوع | |
|---|---|
| نظام التشغيل | |
| موقع الويب |
(الإنجليزية) reactjs.org |
| المطورون |
|
|---|---|
| لغة البرمجة | |
| الإصدار الأول |
29 مايو 2013 |
| الإصدار الأخير |
16.13.0 (26 فبراير 2020)[1] |
| المستودع | |
| الرخصة |
ويمكن استخدام الريأكت كقاعدة في تطوير تطبيقات صفحة واحدة أو الهاتف المحمول. تتطلب تطبيقات الريأكت المعقدة عادة استخدام مكتبات إضافية للإدارة والتوجيه والتفاعل مع واجهة برمجة التطبيقات.
تاريخ رياكت نيتف
الرياكت(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 بإعادة تقديم المكونات الفرعية التي تتغير فعليًا.
أساليب دورة الحياة
تعتبر أساليب دورة الحياة هي التي تسمح بتنفيذ التعليمات البرمجية في نقاط التعيين خلال عمر المكون.
- يتيح shouldComponentUpdate للمطوّر منع إعادة عرض غير ضروري لأحد المكونات عن طريق إرجاع false إذا كان العرض غير مطلوب. يتم استدعاء componentDidMount بمجرد أن يكون المكون مركبًا (تم إنشاء المكون في واجهة المستخدم، غالبًا عن طريق ربطه بعقد DOM). يُستخدم هذا بشكل شائع لتشغيل تحميل البيانات من مصدر بعيد عبر واجهة برمجة التطبيقات. تقديم هو أسلوب دورة الحياة الأهم وواحد فقط المطلوبة في أي مكون. وعادة ما يطلق عليه في كل مرة يتم تحديث بيانات المكون، مما يعكس التغييرات في واجهة المستخدم.
JSX
جافا سكريبت 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 قبل فهمها بواسطة متصفحات الويب. يتم تنفيذ هذه المعالجة بشكل عام أثناء عملية إنشاء برنامج قبل نشر التطبيق.
العمارة بعد 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 App 13 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>. "
مراجع
- Release 16.13.0 — تاريخ الاطلاع: 27 فبراير 2020 — تاريخ النشر: 26 فبراير 2020
- React v16.0
- Change license and remove references to PATENTS