ما هي React؟ التعريف والوظيفة والتطبيقات

ما هي React؟

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

طور جوردان ووك React أثناء العمل مع Facebook كمهندس برمجيات. كان متاحًا للجمهور في عام 2011 على Facebook ولاحقًا في عام 2012 على Instagram. تركز React بشكل أساسي على بناء تطبيقات تفاعلية وجذابة وطبيعية. علاوة على ذلك ، يمكن أن يوفر لك أفضل أداء للعرض مع الترميز الأساسي فقط.

يتيح React للمطورين إنشاء تطبيق ويب شامل يمكنه تحويل البيانات دون إعادة تحميل الصفحة. يمكنك عرض هذا في قالب MVC ويمكن استخدامه من خلال دمج أطر عمل JavaScript أخرى. استخدمت العديد من الشركات الكبرى مثل Airbnb و Netflix و New York Times و Instagram React. لقد كان أيضًا مفيدًا لأطر مثل Angular.js.

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

إذا كنت جديدًا في إطار عمل React أو مجرد تحديث مفاهيمك الأساسية ، فنحن هنا لتزويدك بجميع أساسيات مكتبة React. لمعرفة المزيد ، قد ترغب في قراءة المزيد!

الميزات الرئيسية لـ React

تتمتع React JavaScript بقاعدة جماهيرية ضخمة في مجتمع المطورين لميزاتها القوية. ومن سماته المميزة:

1. DOM الظاهري

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

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

وبالتالي ، تساعد React في جعل عملية التطوير فعالة من حيث التكلفة وسريعة للمطورين.

2. جافا سكريبت XML

يُعرف JavaScript XML شعبياً باسم JSX. إنه بناء جملة مشابه تمامًا لـ HTML. يتم استخدامه بشكل أساسي لوصف مظهر واجهة مستخدم التطبيق. إنها إحدى الميزات الهامة التي يقدمها ReactJS للمطورين. يقوم بحقن مكونات مماثلة لـ HTML في صفحة الويب لإنشاء بناء الجملة.

يساعد هذا في جعل كتابة اللبنات الأساسية في ReactJS سهلة. كما يسمح للمطورين بإنشاء بناء الجملة بسهولة أكبر.

3. ربط البيانات في اتجاه واحد

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

يستخدم ReactJS Flux (تطبيق JavaScript) لأداء التحكم في البيانات من نقطة مركزية. وبالتالي ، يمكن للمطورين إدارة تطبيقات الهاتف المحمول والويب بسهولة. علاوة على ذلك ، فهو يعزز الكفاءة ويجعل التطبيق أكثر مرونة.

4. رد الفعل الأصلي

تم تخصيص React Native لاستخدام مكونات أصلية بدلاً من مكونات الويب. بالإضافة إلى ذلك ، فإنه يعرض تنسيقًا أصليًا لرد الفعل لـ ReactJS. لذلك ، يجب أن يكون المرء دقيقًا ودقيقًا للغاية مع مفاهيم ReactJS لاكتساب فهم ومبادئ React Native. وتشمل هذه الدعائم والحالة و jsx والمكونات.

يقوم React Native بتغيير كود التفاعل لجعله متوافقًا مع أنظمة iOS و Android. ويهدف أيضًا إلى توفير الوصول إلى الميزات الأصلية لهذا النظام الأساسي للمطورين.

5. واجهة المستخدم التعريفي

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

تتيح هذه الميزة جعل الكود أكثر قابلية للقراءة مع تبسيط تصحيح الأخطاء أيضًا.

6. العمارة القائمة على المكونات

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

تعلن العمارة القائمة على المكونات أن React مكتوبة بلغة JavaScript وليس باستخدام قالب. لذلك ، يمكن للمطورين تصفح التطبيق دون التأثير على DOM.

المكون والدعائم والحالة

1. المكونات

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

يتم تصنيف المكونات إلى مجالين رئيسيين ، وهما كالتالي:

• مكون وظيفي

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

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

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

مثال على المكون الوظيفي:

const Greeting = () => <h1> مرحبًا ، أنا مكون غبي! </ h1> ؛

• مكون الفصل

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

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

مكونات الفصل لها ترميز كبير وهي عكس المكونات الوظيفية. إذا كنت تستخدمها أكثر مما هو مطلوب ، فقد يؤثر ذلك على أداء قابلية اختبار الكود وقابليته للقراءة.

أبسط شكل من أشكال مكون الطبقة:

تمدّد تحية الفئة React.Component {

يقدم - يجعل(){

return <h1> مرحبًا ، أنا مكون ذكي! </ h1> ؛

}

2. الدعائم

تعمل الدعائم على تمكين مكونات ReactJS لتكون ديناميكية وقابلة للتخصيص بسهولة. إنها طريقة لتوفير البيانات من جهاز كمبيوتر إلى آخر - إنه تدفق بيانات أحادي الاتجاه. يمكن للمكونات قبول عناصر React المخصصة وإرجاعها استنادًا إلى الدعائم المتلقاة.

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

3. الدولة

الحالة هي عنصر React متكامل يستخدم يحتوي على معلومات أو بيانات حول المكون. بمرور الوقت يمكن تغيير حالة المكون ؛ كلما تغير ، فإنه يؤدي إلى تقديم المكون.

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

تغليف

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

إذا كنت ترغب في إتقان التفاصيل الدقيقة لـ React وغيرها من أدوات الصناعة الشائعة ، فيجب عليك بالتأكيد مراجعة دورات upGrad's Software Technology . تعد upGrad بالتطوير الشامل المدعوم من التعلم من نظير إلى نظير عبر قاعدة متعلمين عالمية تضم أكثر من 40.000 طالب. بصرف النظر عن المنهج المنظم جيدًا ، يتمتع المتعلمون بجلسات تفاعلية حية مع كبار المدربين وخبراء الصناعة.