رياكت

من ويكيبيديا، الموسوعة الحرة
اذهب إلى التنقل اذهب إلى البحث
React
React-icon.svg
معلومات عامة
نوع
نظام التشغيل
النموذج المصدري
المطور الأصلي
المطورون
موقع الويب
معلومات تقنية
ضمان الجودة
لغة البرمجة
التوثيق
الإصدار الأول
الإصدار الأخير
المستودع
الرخصة
MIT

رياكت (بالإنجليزية: React)‏، مكتبة برمجية مبنية بلغة جافا سكربت، مفتوحة المصدر مُتخصصة بواجهات المستخدم [3] تم بناؤها من قبل شركة ميتا المعروفة سابقًا بفيسبوك، ريآكت تُقدم طريقة سلسة وقوية لبناء الواجهات المستخدم، تسمح للمطورين بتصميم وتطوير مُكوِّنات واجهة مستخدم تفاعلية (بالإنجليزية: Interactive UI components)‏ ومن ثم إعادة استخدام المكون ذاته عدة مرات في أماكن متعددة.

تهدف رياكت إلى تسهيل دمج المنطق البرمجي مع واجهة المستخدم مباشرةً من أجل تسهيل التعامل مع كل مُكون على حدى.

نظرة عامة[عدل]

تُستخدم مكتبة رياكت في الغالب كأساس في تصميم واجهات المستخدم على الويب، كما تُستخدم رياكت أيضًا في تطوير تطبيقات الهواتف الذكية من خلال ريأكت نيتف (بالإنجليزية: React Native)‏، وبشكل عام تُركز مكتبة رياكت بشكل رئيسي على بناء المكونات ومفهوم إدارة الحالة (بالإنجليزية: State Management)‏ والتعامل مع الحالة ومع التغيرات التي تطرأ عليها ومن ثم تصيير المكون إلى واجهة المستخدم (بالإنجليزية: Render Component)‏، و إعادة تصيير المكون عند تغير الحالة (بالإنجليزية: Re-render)‏.

رياكت في الويب[عدل]

يُشاع استخدام مكتبة رياكت في بناء واجهات المواقع حيث كان الهدف الرئيسي من مكتبة رياكت هو التعامل مع واجهات المستخدم في مواقع الويب، تستخدم رياكت في برمجة واجهات المواقع خصوصًا تلك التي تتبع مفهوم الصفحة الواحدة (بالإنجليزية: Single Page Application)‏. وتقوم رياكت بشكل أساسي بتصيير كامل مكونات الصفحة في جهة العميل على المتصفح.

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

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

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

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

مصطلحات أساسية[عدل]

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

مصطلحات إنجليزية متعلقة بمكتبة ريأكت
المصطلح التّعريف ملاحظة
DOM هي اختصار Document Object Model، وتعني نموذج كائن المستند يقصد بها الهيكل الشجري الخاص بالعناصر في صفحة الويب.
UI Component مُكون واجهة المستخدم، وهو مصطلح يشاع استعماله أثناء مرحلة تصميم واجهة مستخدم رسومية حيث يتم تقسيم الصفحة إلى أقسام وعناصر أساسية ومن ثم تصميمها، بدلًا من التعامل مع الصفحة كقالب واحد كامل بحد ذاته.[4] مثال: الشريط الجانبي في ويكيبيديا يعد مُكونًا منفصلًا يعاد استخدامه في العديد من الصفحات.
React Component مُكون رياكت، مصطلح يقصد به عنصر واجهة مستخدم تم بناءُه باستخدام مكتبة رياكت، وهي الطريقة المستخدمة لفصل كل مكون عن المكون الأخر في رياكت، وهذا المفهوم في علوم الحاسب يطلق عليه فصل الإهتمامات.[4] تُركز رياكت في مفهوم فصل العناصر في الصفحة إلى المُكونات.[4]
JSX اختصار JavaScript Syntax Extension، وهي طريقة للتعبير عن عناصر HTML داخل جافاسكربت، ويتم ترجمتها في ريأكت إلى الوظيفة createElement(). JSX تم ابتكارها من أجل تسهيل برمجة واجهات المستخدم عبر لغة جافاسكربت.[5]
Single Page تطبيق الصفحة الواحدة، أحد الطرق برمجة وتصميم صفحات الويب، وغالبًا ما تعتمد تطبيقات الصفحة الواحدة على مفهوم توليد الصفحة من جهة العميل Client Side Rendering. تستخدم رياكت عادةً في هذا النوع من المواقع.
Rotuing التوجيّه، هو مفهوم في الويب يقصد به التنقل بين صفحة ويب الموجودة في الموقع نفسه، وبما أن تركيز رياكت هو إنشاء موقع بمفهوم الصفحة الواحدة يجب استخدام حلول من أجل التنقل بين الصفحات، فمكتبة رياكت لا تقدم حلًا مباشرًا، وغالبًا ما تتم هذه العملية بمساعدة مكتبات طرف ثالث مثل ReactRouter أو بإنشاء حلول خاصة.
Client Side جهة العميل، أي العمليات التي تجري على المتصفح من خلال جافاسكربت. تعمل رياكت بشكل أساسي في جهة العميل.
Server Side جهة الخادم، العمليات التي تجري في جهة الخادم (سيرفر الويب).
Client Side Rendering التصيير من جهة العميل، يقصد أن الصفحة يتم توليدها في جهة العميل. حيث يقوم المتصفح بنزيل صفحة فارغة مع ملف جافاسكربت يحوي على الموقع، ويتم توليد الصفحة بالكامل من خلال جافاسكربت على المتصفح. بشكل أساسي رياكت تقوم بتوليد الصفحة من جهة المستخدم.
Server Side Rendering التصيير من جهة الخادم، يقصد به توليد الصفحة من جهة الخادوم (سيرفر الويب). حيث يتم إرسال صفحة HTML كاملة البيانات إلى العميل. يستخدم هذا المفهوم لتحسين الظهور في محركات البحث، ومن أجل تسريع عرض الصفحة للمستخدم.

لتوليد الصفحات في جهة الخادم، يتم استخدام أُطر عمل أو مكتبات مساعدة مثل NextJS، أو إنشاء حلول خاصة.

Two Way Data Binding ربط البيانات في كلا الإتجاهين، هو مفهوم في تصميم واجهات المستخدم يهدف لربط المكون الذي يظهر في واجهة المستخدم مع البيانات الموجودة في الكود البرمجي[6]، بحيث لو تغيرت القيمة في الكود أو تلك المعروضة في واجهة المستخدم تتغير القيم في كليهما. غالبًا ما يستخدم هذا النمط البرمجي على صفحات الويب، ولكن جاءت رياكت بمفهوم مُختلف.
Virtual DOM نموذج كائن المستند الظاهري هو مفهوم برمجي وخوارزمية[6] تستخدمها مكتبة رياكت[7] من أجل تتبع التغيرات التي تطرأ في الحالة (State)، لعمل التغيرات اللازمة على مكونات الصفحة، ومن ثم تطبيق التغيرات على نموذج كائن المستند (DOM) الفعلي في الصفحة. تعد رياكت أوائل المكتبات التي استخدمت هذا المفهوم، وقد أُستحدث هذا المفهوم لزيادة أداء وفاعلية مكتبة رياكت كونها تعتمد على مفهوم إعادة التصير (Re-Rendering).
Props أو Prop خصائص/ خاصية، يُستخدم هذا المصطلح إشارةٍ إلى البيانات التي يتم نقلها من مكون إلى آخر وتسمى "بُرُوب/ بُرُوبس" وتعد الطريقة التي تتبعها مكتبة رياكت في التعامل مع البيانات المتبادلة بين مُكون رياكت ومُكون رياكت آخر.
PascalCase باسكال كيس طريقة مُتبعة في التسمية، حيث يجب أن تبدأ كل كلمة حرف لاتيني كبير وتليها الكلمة الاخرى أيضًا بحرف لاتيني كبير بدون مسافات، وهي الطريقة التي تُتبع عادةً أثناء تسمية مُكونات رياكت. مثال UserCard، أو Navbar يعد اسمًا صالحًا لمُكون رياكت.

تاريخ رياكت[عدل]

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

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

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

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

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

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

ما يلي هو مثال مبدئي بسيط لاستخدام React في HTML مع JSX و JavaScript.

// مكون رياكت باستخدام
// JSX
import React from 'react';

const Greeting = () =>{
 return(
    <div className="hello_world">
      <h1> Hello, World! </h1>
    </div>
    )
}

export default Greeting;

الكود أعلاه يُعرف دالة تحمل اسم Greeter تُعبر عن مُكون رياكت مكتوب بالطريقة الوظيفية (بالإنجليزية: React Functional Component)‏ وتقوم بإرجاع JSX.

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

يمكن كتابة نفس الكود أيضًا بدون استخدام JSX بالإعتماد على الوظيفة createElement() بالشكل الآتي:

/*مُكون رياكت بدون استخدام
JSX */
import React from 'react';

const Greeting = () =>{
  return React.createElement("div", 
    {className: "hello_world"},
    React.createElement("h1", null, " Hello, World! ")
    );
}

export default Greeting;

الكود أعلاه يقوم بإرجع وظيفة React.createElement() التي تقوم بصنع عنصر رياكت.

وعند عرضها على متصفح الويب ستكون النتيجة:

<!--االناتج النهائي-->
<div class="hello_world">
  <h1>Hello, World!</h1>
</div>

أبرز المميزات[عدل]

تصريحية (Declarative)[عدل]

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

المُكونات[عدل]

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

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

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

مثال:

مكونات ثابتة[عدل]

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

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

DOM الظاهري[عدل]

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

أساليب دورة الحياة[عدل]

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

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

JSX[عدل]

جافا سكريبت XML يرمز لها اختصارًا (JSX) تعد امتداد لبناء جملة لغة JavaScript. تشبه JSX في مظهرها HTML إلى حد ما، وتوفر طريقة لتنظيم عرض المكون باستخدام صيغة مألوفة للعديد من المطورين. عادةً ما يتم كتابة مكونات رياكت باستخدام JSX ، على الرغم من أنها ليست ضرورية حيث يمكن كتابة أكواد جافاسكربت خالصة بالإعتماد على وظائف رياكت دون استخدام JSX. يشبه JSX بنية مُلحق أخر أنشائته Facebook يُسمى 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 مع الأقواس {}:

{10+1}

المثال أعلاه سوف يُنفذ وستكون النتيجة هي:

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

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

class App extends React.Component {
  render() {
    const i = 1;
    return (
      <div>
= { i === 1 ? 'true' : 'false' } =
      </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 على عناصر canvas مولدة دايناميكيًا[12]، كما تستخدم كل من نتفليكس وبايبال مفهوم التوليد كل من جانب الخادم والعميل لتحسين تجربة المستخدم.[13][14]

راجع أيضًا[عدل]

مراجع[عدل]

  1. ^ الوصول: 5 أكتوبر 2016.
  2. أ ب "18.2.0 (June 14, 2022)"، اطلع عليه بتاريخ 23 يونيو 2022. {{استشهاد ويب}}: تحقق من التاريخ في: |access-date= (مساعدة)
  3. ^ "React – مكتبة JavaScript لبناء واجهات المستخدم"، reactjs.org، مؤرشف من الأصل في 11 أبريل 2022، اطلع عليه بتاريخ 16 مارس 2022.
  4. أ ب ت Pete Hunt: React: Rethinking best practices -- JSConf EU (باللغة الإنجليزية)، مؤرشف من الأصل في 13 مارس 2022، اطلع عليه بتاريخ 13 مارس 2022
  5. ^ "JSX"، facebook.github.io (باللغة الإنجليزية)، مؤرشف من الأصل في 2 أبريل 2022، اطلع عليه بتاريخ 11 أبريل 2022.
  6. أ ب VDOM vs lit-html - HTTP203 (باللغة الإنجليزية)، Google Chrome Developers، 7 نوفمبر 2017، مؤرشف من الأصل في 30 مارس 2021، اطلع عليه بتاريخ 11 أبريل 2022
  7. ^ "Rendering Mechanism | Vue.js"، vuejs.org (باللغة الإنجليزية)، مؤرشف من الأصل في 13 مارس 2022، اطلع عليه بتاريخ 11 أبريل 2022.
  8. ^ مستودع مكتبة FaxJS على غيت هب (باللغة الإنجليزية)، 11 مارس 2022، مؤرشف من الأصل في 16 ديسمبر 2021، اطلع عليه بتاريخ 12 مارس 2022
  9. ^ "منشور فريق مهدسين شركة ميتا عن XHP"، Facebook (باللغة الإنجليزية)، مؤرشف من الأصل في 13 مارس 2022، اطلع عليه بتاريخ 12 مارس 2022.
  10. ^ React.js Conf 2015 Keynote - Introducing React Native (باللغة الإنجليزية)، 29 يناير 2015، مؤرشف من الأصل في 14 فبراير 2022، اطلع عليه بتاريخ 11 أبريل 2022
  11. ^ "New README · facebook/create-react-app@760d32e"، GitHub (باللغة الإنجليزية)، فريق رياكت، 09 يوليو 2019، مؤرشف من الأصل في 8 أبريل 2022، اطلع عليه بتاريخ 06 أبريل 2022.
  12. ^ "Why did we build React? – React Blog"، reactjs.org (باللغة الإنجليزية)، مؤرشف من الأصل في 3 مارس 2022، اطلع عليه بتاريخ 08 مايو 2022.
  13. ^ Account, PayPal Tech Blog Admin (09 يوليو 2018)، "Isomorphic React Apps with React-Engine"، The PayPal Technology Blog (باللغة الإنجليزية)، مؤرشف من الأصل في 8 مايو 2022، اطلع عليه بتاريخ 08 مايو 2022.
  14. ^ Blog, Netflix Technology (19 أبريل 2017)، "Netflix Likes React"، Medium (باللغة الإنجليزية)، مؤرشف من الأصل في 3 مارس 2022، اطلع عليه بتاريخ 08 مايو 2022.

مصادر خارجية[عدل]