ما هي React ؟
React هي واحدة من مكتبات JavaScript الأمامية الأكثر شيوعًا في مجال تطوير الويب. تتم صيانته بشكل أساسي بواسطة Facebook ومجتمع كبير من المطورين. يستخدمه عدد من الشركات الكبيرة الراسخة (Netflix و Instagram و Airbnb ، على سبيل المثال لا الحصر) لبناء واجهات المستخدم ومكونات واجهة المستخدم الخاصة بهم. سواء كنت جديدًا في ReactJS أو تريد فقط تحديثًا سريعًا لمفاهيمها الأساسية ، فإن هذا البرنامج التعليمي ReactJS سيمنحك مقدمة عن أساسيات React وميزاتها ومكوناتها.
لماذا تستخدم ReactJS ؟
الهدف الرئيسي لـ ReactJs هو تطوير واجهات المستخدم التي تعزز سرعة وأداء التطبيقات باستخدام DOM الظاهري.
ميزات React.JS
- JSX - هو امتداد لـ ReactJS ، وهو ليس إلزاميًا للاستخدام ولكنه مفيد جدًا إذا تم استخدامه لأنه سهل الاستخدام للغاية.
- المكون: المكونات تشبه وظائف جافا سكريبت البحتة ، وهي تعمل على تبسيط الكود عن طريق فصل الوظيفة إلى كود مستقل يمكن إعادة استخدامه. يمكن استخدام المكونات كوظائف وكفئات. تحتوي المكونات أيضًا على حالة ودعائم تعمل على تبسيط الحياة. يتم الاحتفاظ بحالة كل عنصر داخل فئة.
- DOM الظاهري: يُنشئ React DOM ظاهريًا ، وهو عبارة عن ذاكرة تخزين مؤقت لهيكل البيانات في الذاكرة. تم تحديث تحديثات DOM النهائية فقط في DOM بالمتصفح.
- تعبيرات جافا سكريبت: يمكن استخدام الأقواس المتعرجة ، على سبيل المثال ، لإدراج تعبيرات JS في ملفات JSX.
مزايا ReactJS
- يستخدم ReactJS نطاقًا ظاهريًا ، والذي يستخدم ذاكرة تخزين مؤقت لهيكل البيانات في الذاكرة ، ويتم تحديث أحدث التعديلات فقط في نطاق المتصفح . هذا يسرع التطبيق .
- باستخدام ميزة مكون التفاعل ، يمكنك تصميم مكونات من اختيارك . المكونات قابلة لإعادة الاستخدام ومفيدة لصيانة التعليمات البرمجية .
- نظرًا لأن Reactjs هي مكتبة جافا سكريبت مفتوحة المصدر ، فمن السهل تعلمها .
- اكتسب ReactJS شعبية سريعًا وهو مدعوم من Facebook و Instagram. تستخدمه العديد من الشركات المعروفة ، بما في ذلك Apple و Netflix.
- نظرًا لأن Facebook يحتفظ بمكتبة ReactJS ، فهي مُدارة جيدًا ومُحدَّثة .
- يمكن استخدام ReactJS لإنشاء واجهات مستخدم متطورة لكل من تطبيقات سطح المكتب والأجهزة المحمولة .
عيوب ReactJS
- تمت كتابة غالبية التعليمات البرمجية بلغة JSX ، مما يعني أن HTML و CSS جزء من كود جافا سكريبت. قد يكون هذا محيرًا لأن معظم الأطر الأخرى تحب إبقاء HTML منفصلًا عن كود جافا سكريبت .
- يحتوي ReactJS على حجم ملف ضخم.
مثال :
import React from ''react'';
import ReactDOM from ''react-dom'';
var name = "Learner";
var element = <h1>Hello, { name }.Welcome to our institution.< /h1>;
ReactDOM.render(
element,
document.getElementById("root")
);
Output: Hello, Learner. Welcome to our institution.
React Props
يتبع ReactJS نهجًا متميزًا لتدفق البيانات ومعالجتها مما قد يجعل من الصعب فهم عدد من المفاهيم (الدعائم والحالة وما إلى ذلك). سيساعدك هذا البرنامج التعليمي من ReactJS على فهم React Props ، أحد أهم مفاهيم ReactJS. يشير مصطلح "props" إلى "خصائص" ويستخدم لتمرير البيانات من مكون إلى آخر. في هذا البرنامج التعليمي لـ ReactJS ، ستتعرف أيضًا على ميزة React Props وتفهم منهجية استخدامها.
ReactJS State
ReactJS State هي مفهوم مهم آخر لـ ReactJS. تحتفظ React State ببيانات المكون. يقوم هذا المكون بدوره بإرجاع البيانات الموجودة داخل الحالة إلى المخرجات. يمكن أن تتغير "حالة" المكون بمرور الوقت. عندما يحدث هذا ، يعيد المكون تصيير. في هذا البرنامج التعليمي لـ ReactJS ، ستتعرف على أساسيات حالة ReactJS وطريقة setState () والاختلافات بين ReactJS Props و ReactJS. حالة .
ReactJS Components
مكونات ReactJS هي اللبنات الأساسية لأي تطبيق تم إنشاؤه باستخدام ReactJS. يقسم واجهة المستخدم إلى أجزاء مستقلة ، يمكن معالجة كل منها على حدة. تسمح لك مكونات ReactJS بإعادة استخدام عناصر واجهة المستخدم ، مما جعل ReactJS شائعًا للغاية. في هذا البرنامج التعليمي لـ ReactJS ، ستتعرف على الأنواع المختلفة لمكونات ReactJS ، ومكونات ReactJS المتداخلة ودورة حياة مكونات React.
React with Redux
Redux عبارة عن حاوية حالة يمكن التنبؤ بها لتطبيقات JavaScript. يساعد في الحفاظ على تدفق البيانات والحفاظ عليه منظمًا مع نمو التطبيق. في هذا البرنامج التعليمي لـ ReactJS ، ستكتسب فهمًا عمليًا لـ Redux ومفاهيمه الأساسية. هناك أيضًا مكافأة إضافية في هذا البرنامج التعليمي ReactJS لمساعدتك في إنشاء تطبيق ReactJS بسيط مع وبدون Redux لمساعدتك على فهم الاختلاف بمزيد من التفصيل.
استخدام ReactJS من شبكة CDN
لاستخدام CDN مع React Js ، قم بتضمين CDN في ملف index.html. يمكنك تحقيق ذلك عن طريق إدخال الكود التالي في ملف index.html الخاص بك: استبدل "https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js" بعنوان URL الخاص بـ CDN.
استخدام حزم NPM- حزم Npm هي مكتبات من التعليمات البرمجية التي يوفرها المجتمع ويمكن تثبيتها في مشاريع React باستخدام بعض الأوامر البسيطة. يساعد استخدام حزم npm المطورين على توفير الوقت من خلال توفير الوصول إلى التعليمات البرمجية المعدة مسبقًا بدلاً من الاضطرار إلى إنشاء رمز من البداية.
ما هو JSX ؟
JSX (ملحق JavaScript) هو امتداد React يسمح لك بكتابة كود JavaScript يشبه HTML. بعبارة أخرى ، JSX عبارة عن بناء جملة يشبه HTML خاص بـ React والذي يمتد إلى ECMAScript للسماح بتكوين جملة تشبه HTML بالتعايش مع JavaScript / React code.
لماذا الثبات ( Immutability ) مهم؟
الثبات هو مفهوم مهم في برمجة الكمبيوتر ، خاصة عند تطوير التطبيقات التي تعتمد على سلامة البيانات وأمانها. من خلال جعل البيانات غير قابلة للتغيير ، يمكن للمطورين التأكد من أنه بمجرد إدخال جزء من المعلومات ، لا يمكن تغييره أو تغييره بأي شكل من الأشكال.
العمل مع CSS خارجي في ReactJS
يعد العمل باستخدام أوراق الأنماط أمرًا ضروريًا عندما يتعلق الأمر بـ ReactJS. يسمح CSS الخارجي في ReactJS للمطورين بتحديد أنماط معينة لتجاوز التصميم الافتراضي. هذا يعني أنه يمكن للمطورين إنشاء تصميمات وميزات فريدة لتوسيع وظائف التطبيق. يتيح ReactJS للمطورين تطبيق الأنماط مباشرة على مكوناتهم ، مما يجعل من السهل تخصيصها وصيانتها.
مكون الوظيفة (Function component )
مكونات الوظيفة هي إحدى اللبنات الأساسية في ReactJS. إنها تتيح لك تحديد المكونات التي لا تحتاج إلى أساليب الحالة أو دورة الحياة. يمكن لمكونات الوظيفة قبول الدعائم كمعلمات وإرجاع عناصر React. يتيح ذلك إعادة استخدام التعليمات البرمجية بسهولة وطريقة أكثر اتساقًا في هيكلة التطبيقات.
التناوب (Taking turns )
التناوب في ReactJS هو نمط شائع يستخدم لتنسيق مكونات متعددة. من خلال استخدام هذا النمط ، يمكن للمكونات التواصل مع بعضها البعض لتقديم المحتوى بترتيب معين. يمكن أن يكون هذا مفيدًا بشكل خاص لإنشاء واجهات تفاعلية معقدة. بالإضافة إلى ذلك ، يمكن أن يساعد في ضمان عرض أحد المكونات بشكل صحيح عندما يتم عرضه خارج الترتيب.
إعلان الفائز (Declaring a winner )
من خلال السماح للمكونات بالتواصل مع بعضها البعض ، يمكن لـ ReactJS تحديد المكون الذي يجب تقديمه أولاً والمساعدة في تحديد الفائز في التفاعل. يساعد هذا المطورين على بناء واجهات معقدة تحتوي على منطق معقد مدمج فيها ويجعل عملية إعلان الفائز أسهل بكثير.
مضيفا السفر عبر الزمن (Adding time travel )
يمكن تنفيذ السفر عبر الزمن في ReactJS باستخدام محرك اللعبة ، مما يسمح للمستخدمين بإرجاع اللعبة وإعادة تشغيلها في أي وقت. يمكن أيضًا استخدام هذه الميزة للسماح للمستخدمين بمراجعة الحركات السابقة وتحسين إستراتيجيتهم ، حتى يتمكنوا من اتخاذ قرارات أفضل في المستقبل.
تخزين تاريخ الحركات (Storing a History of Moves )
يتم ذلك باستخدام واجهة برمجة تطبيقات سجل المتصفح لتخزين محفوظات الحركات وتمكين المستخدمين من العودة إلى الخطوة السابقة. عندما ينقر المستخدم على زر "رجوع" ، يمكن تغيير حالة اللعبة إلى الحركة السابقة.
حالة الرفع ، مرة أخرى (Lifting state, again )
غالبًا ما يكون رفع الحالة مهمة صعبة للمطورين. يتطلب تفكيرًا دقيقًا وتنفيذًا دقيقًا لضمان إمكانية رفع الحالة بشكل صحيح من المكون ووضعها في متجر عالمي. يمكن تبسيط هذه العملية باستخدام Redux ، وهي مكتبة تتيح إدارة الحالة بسهولة عبر المكونات(components ).
إظهار التحركات السابقة (Showing past moves )
يتم ذلك عن طريق المستعرض الخاص بك باستخدام علامة تبويب البحث في السجل السابق.
اختيار مفتاح (Picking a key )
مع تقدم هذه الوثيقة ، يجب تحديد نقطة رئيسية واحدة. ستكون هذه النقطة الأساسية هي محور المستند وستساعد في تحديد كيفية تنظيم المستند والنتيجة النهائية. مع وضع ذلك في الاعتبار ، فإن الخطوة التالية هي تحديد مفتاح سيكون أساس المستند. بمجرد تحديد المفتاح ، يجب إعادة النظر في هذا المفتاح في جميع أنحاء المستند.
تطبيق السفر عبر الزمن
واحدة من أحدث الميزات التي يمكن للمطورين استخدامها هي السفر عبر الزمن ، والذي يضيف عنصرًا فريدًا إلى المشاريع. من خلال هذه الميزة ، يمكن للمستخدمين التنقل عبر حالات مختلفة من تطبيقاتهم كما لو كانوا يسافرون عبر الزمن.
العمل مع النماذج
العمل مع النماذج في React JS ليس استثناءً. باستخدام React ، يمكنك بسهولة إنشاء نماذج قابلة للتخصيص بدرجة عالية وتطبيق التحقق من صحة البيانات عليها. تتوفر أيضًا مجموعة متنوعة من مكونات النموذج للمطورين ، مثل حقول الإدخال والقوائم المنسدلة وأزرار الاختيار ومربعات الاختيار. باستخدام React ، يمكن للمطورين أيضًا إنشاء نماذج سهلة الاستخدام وذات تدفق سلس من حقل نموذج إلى التالي.
العمل مع الأحداث في ReactJS
تقدم React JS للمطورين مجموعة متنوعة من الطرق للتعامل مع الأحداث داخل تطبيقاتهم. يمكن استخدام الأحداث لبدء إجراء من المستخدم ، مثل النقر على زر. يمكن للمطورين أيضًا استخدام الأحداث لتحديث مكوناتهم وبياناتهم ، بالإضافة إلى تقديم ملاحظات للمستخدمين. يمكن لمكونات React أيضًا التسجيل في الأحداث والاستماع إليها ، ثم الاستجابة وفقًا لذلك.
العمل مع Inline CSS في ReactJS
يعد العمل مع CSS المضمنة في ReactJS طريقة رائعة لتصميم مكونات وعناصر فردية من تطبيق ما. تسمح صيغة التصميم المضمنة في React للمطورين بتحديد الأنماط على أساس كل مكون ، مما يجعل سير العمل أكثر كفاءة وتنظيمًا. يمكن دمج الأنماط المضمنة مع أوراق الأنماط العامة ، مما يوفر للمطورين القدرة على إضافة أنماط مخصصة دون الحاجة إلى كتابة كميات كبيرة من التعليمات البرمجية.