رياكت

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

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

DOM الظاهري

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

الرخصة

وفي هذا السياق، صدر الإصدار الأول من رياكت في مايو 2013 بموجب رخصة أباتشي 2.0. وفي أكتوبر 2014، غُيّرت الرخصة في الإصدار رياكت 0.12.0 إلى رخصة بي اس دي ذات الثلاثة بنود، وأُضيف كذلك ملف نصي منفصل باسم PATENTS يتناول براءات الاختراع التابعة لشركة فيسبوك والمرتبطة بالبرنامج.

علاوةً على ذلك، وفي 26 سبتمبر 2017، صُدِرَ رياكت 16.0.0 بموجب رخصة إم آي تي. وطبق تغيير رخصة إم آي تي على إصدار 15.x مع React 15.6.2.

• انظر كذلك
• تطوير الواجهات الأمامية
• مُحزم الوحدات ويب باك
• مُحزم الوحدات فيت جي اس
• تطبيق الصفحة الواحدة
• رياكت نيتف
• ريدوكس
• مراجع
• مصادر خارجية

11عبارات شرطية

• class App extends React.Component {
• render {
• const i = 1;

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

render {

• const sections = [1, 2, 3]؛
• return (
• {

sections.length> 0

• ? sections.map(n => Section {n})
• : null
• }
• );

ربط البيانات أُحادي الأتجاه

مثال:

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

المُكونات

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

تعبيرات JavaScript

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

{10+1}المثال أعلاه سوف يُنفذ وستكون النتيجة هي:

مصطلحات أساسية

وفي السياق ذاته، قاموس لمجموعة مصطلحات إنجليزية تتعلق بمكتبة رياكت مع تعريفها:

التوثيق العربي الرسمي للمكتبة

وفي هذا السياق، الإطلاق الأول لمشروع مكتبة رياكت مفتوحة المصدر في مؤتمر JSConf US 2013 (مقطع فيديو على يوتيوب)

وفي السياق ذاته، رياكت: إعادة التفكير في العادات الحسنة في مؤتمر JSConf EU 2013 (مقطع فيديو على يوتيوب)

السمات

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

export default Greeting;

• الكود أعلاه يقوم بإرجع وظيفة React.createElement التي تقوم بصنع عنصر رياكت.
• وعند عرضها على متصفح الويب ستكون النتيجة:<!--االناتج النهائي-->
• Hello, World!

أساليب دورة الحياة

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

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

JSX

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

• مثال على كود JSX:
• class App extends React.Component {
• render {
• return (
• Header
• Content
• Footer
• );
• }
• }

أبرز المميزات

تصريحية (Declarative)

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

مكونات ثابتة

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

• class ParentComponent extends React.Component {
• state = { color: 'red' };
• render {
• return ;
• }
• }

تاريخ رياكت

أمثلة على الاستخدام

كذلك، في 18 أبريل 2017، أعلنت فيسبوك عن React Fiber ، وهي عبارة عن إعادة هيكلة لرياكت بخوارزمية أساسية جديدة لمكتبة React، لبناء واجهات المستعمل. وأُعتبرت React Fiber الأساس لأي تحسينات مستقبلية وتطوير سِمة لإطار React.

وفي السياق ذاته، أُعلن عن React Native، والتي تجعل مكتبة رياكت تعمل على مختلف المنصات يشمل ذلك أجهزة أندرويد وآي أو أس وUWP، جرى ذلك في حدث Facebook React.js Conf شباط 2015 واصبحت متاحة للعلن في مارس 2015.

وفي هذا الصدد، في 2016 قامت شركة فيسبوك بإطلاق "Create React App" بعد نمو وإنتشار رياكت الكبير، وهي عبارة عن أداة تساعد المطورين على تهيئة بيئة عمل رياكت، دون القيام بتهيئتها بأنفسهم، حيث تقوم الأداة بتنزيل أغلب المكتبات الضرورية مثل React و React DOM ومكتبة Babel التي تقوم بترجمة JSX إلى جافاسكربت عادية وتقوم بعملية تحسين الكود Code Optimization، ويتم تجميع وربط كل المكتبات مع بعضها من خلال WebPack.

ومن جهة أخرى، قام Jordan Walke وهو مهندس برمجيات سابق في فيسبوك، بإبتكار مكتبة رياكت React، وقد أطلق عليها اسم "FaxJS" حينما كانت لا تزال تحت مرحلة التطوير الأولية، أُستلهمت الفكرة من مكتبة XHP، المبنية بلغة PHP التي تهدف إلى تبسيط طريقة صنع مُكونات HTML ، أُستعملت رياكت في فيسبوك على صفحة آخر الأخبار عام 2011، ومن ثم على انستجرام عام 2012، لتصبح مفتوحة المصدر في مايو عام 2013 في مؤتمر JSConf في الولايات المتحدة الامريكية.

نظرة عامة

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

رياكت في الويب

وفي السياق ذاته، عند العمل على مشروع ويب مُتكامل غالبًا ما يتم استخدام مكتبات أُخرى بجانب رياكت أو كتابة كود مخصص، من أجل إتمام الوظائف الإضافية مثل إضافة تنقلات بين الصفحات "Routing"، وجلب البيانات "Data Fetching" أو باقي الوظائف الأخرى الضرورية في تطبيق الويب التي لا تعتمد بشكل كامل على واجهة المستعمل، حيث أن رياكت لا توفر هذه الخيارات بشكل افتراضي، يعمل المجتمع على توفير الكثير من المكتبات والإضافات لتعمل مع رياكت دون الحاجة لإجاد حلول يدوية بكتابة كود مخصص.

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

كذلك، يُشاع استخدام مكتبة رياكت في بناء واجهات المواقع حيث كان الهدف الرئيسي من مكتبة رياكت هو التعامل مع واجهات المستعمل في مواقع الويب، تستعمل رياكت في برمجة واجهات المواقع خصوصًا تلك التي تتبع مفهوم الصفحة الواحدة .

كذلك، قامت شركة فيسبوك (معروفة باسم شركة ميتا في الوقت الحالي) بتطوير تقنية رياكت نيتف حيث تسمح للمطورين باستخدام رياكت لبرمجة تطبيقات متعددة المنصات تعمل على أنظمة الهواتف مثل نظام iOS و Android بحيث تستند هذه التقنية على مبدأ مُشبه لرياكت في الويب وبطريقة الكتابة ذاتها ولكن بدلًا من التعامل مع DOM كما هو الحال في المتصفح، يتم تصيير المكونات إلى ما يقابلها في نظام التشغيل نفسه.

في هذا الإطار، وتقوم رياكت بشكل أساسي بتصيير كامل مكونات الصفحة في جهة العميل على المتصفح.

تطوير التطبيقات متعددة المنصات (Cross Platform)

{className: "hello_world"},

• React.createElement("h1", null, " Hello, World! ")
• );
• }

}

• }المثال السابق سوف ينفذ:
• Section 1
• Section 2

هيكلة ما بعد HTML

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

مُكون رياكت مكتوب بالطريقة الوظيفية باستخدام JSX

• ما يلي هو مثال مبدئي بسيط لاستخدام React في HTML مع JSX و JavaScript.
• // مكون رياكت باستخدام
• // JSX
• import React from 'react';
• const Greeting = =>{

export default Greeting;

• /*مُكون رياكت بدون استخدام
• JSX */
• import React from 'react';
• const Greeting = =>{
• return React.createElement("div",

ومن جهة أخرى، يمكن كتابة نفس الكود كذلك بدون استخدام JSX بالإعتماد على الوظيفة createElement بالشكل الآتي:

من جهة ثانية، الكود أعلاه يُعرف دالة تحمل اسم Greeter تُعبر عن مُكون رياكت مكتوب بالطريقة الوظيفية وتقوم بإرجاع JSX.

مُكون رياكت مكتوب بالطريقة الوظيفية من دون JSX

Section 3

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

return(

• Hello, World!
• )
• }

}

من جهة ثانية، }يمكن استخدام الدالات و JSX في الشروط الشرطية:class App extends React.Component {

return (

{ i === 1 ? 'true' : 'false' }

);