القائمة الرئيسية

الصفحات

 دليل مطور  ReactJS



ستوجهك هذه المقالة إلى المفاهيم التي قد تحتاج إلى معرفتها للدخول إلى عالم ReactJS واسع الاستخدام.
إذا كنت هنا ، يجب أن تكون بالفعل مطور ويب على دراية بجافا سكريبت. قد تستخدم فقط Vanilla Javascript أو قد تكون مطورًا يستخدم المكتبات والأطر بالفعل.
دعنا ننتقل ونحدث بعض المفاهيم لفهم ما تقدمه React لنا.

المكتبة مقابل الإطار

 تهدف المكتبات في المقام الأول إلى مساعدتك في إنجاز الأشياء بطريقة فعالة. كان jQuery موجودًا لتجنب التعليمات البرمجية المعقدة وجعل من السهل القيام بالوظائف الشائعة مثل تحديد العناصر على صفحة الويب ، وإنشاء العناصر ، وإلحاقها بأي نص أو عنصر آخر على الصفحة.
بصفتنا مطور ويب ، نعلم أن هناك مليون طريقة لإنشاء صفحة ويب أو تطبيق ويب. من بين هذه الملايين من الطرق ، هناك طرق معينة قابلة للتطوير ويمكن دعمها على نطاق واسع ، لذلك يمكن إعداد المؤسسات الكبيرة ذات المطورين المتنوعين بمجموعة واسعة من المهارات ومواصلة بناء التطبيق.
لمثل هذه القابلية للتوسع ، من الضروري وجود مجموعة شاملة من الأدوات لإنشاء تطبيق ويب وتلك التي تنجز استخدام جافا سكريبت تسمى  الأطر . AngularJS / Angular أحد هذه الأطر.

ما المقصود بـ ReactJS أو React.js أو React فقط؟

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

تمت كتابة React في ملفات jsx -  والتي تعني Javascript XML.
تبدو مخيفة  - لكن ليس كثيرًا. إنه في الأساس تنسيق ملف يمكّنك من كتابة HTML داخل ملف Javascript.
عند تشغيل التطبيق ، سيقوم المترجم تلقائيًا بتحويله إلى جافا سكريبت قياسي وجعله جاهزًا للعرض.
جرب الأساسيات هنا في Codecademy  ولا ينبغي أن يستغرق الأمر أكثر من ساعة للقيام بهذا التدريب اليدوي. ستجعلك هذه الدورات التدريبية المكونة من 14 جزءًا واثقًا من أساسيات JSX باستخدام المعرفة الحالية لـ Javascript و HTML.
كل ما ستفعله هو دمجه ومعرفة كيفية عرضه على المتصفح.

React  و ES6

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

تتم هيكلة أو كتابة هذه المكونات بطريقتين

مكونات الطبقة
المكونات الوظيفية
  • Class components
  • Functional components
 تُستخدم Class components  عمومًا للتعامل مع الكثير من البيانات والوظائف وتأتي جنبًا إلى جنب مع ما يسمى بأساليب "دورة الحياة" - والتي ستساعدك على تقديم وتشغيل وظيفة المكون بطريقة معينة. وهي تشمل طرق مث
ما يجب القيام به عند العرض (componentDidMount) ما يجب فعله عند تمرير البيانات (componentDidReceiveProps) ما يجب القيام به يتم تحديث جزء من المكون (componentDidUpdate) ما يجب القيام به عند إلغاء تحميل المكون من الصفحة (componentDidUnmount)

 تُستخدم Functional components لبناء مكونات بسيطة ومباشرة. الذي يحصل على البيانات ويتم تقديمه ببساطة. لا تعقيد إضافي. فكر فيهم كمكونات غبية مثل زر أو صورة.
مع تغير الأوقات ، لتحقيق المزيد من التقدم والبساطة في الكود المكتوب ، تم تقديم مفهوم جديد يسمى  hooks، والذي يمكن أن يساعدك في بناء مكون وظيفي بالكامل مع جميع إمكانيات مكون الفئة.
يا هلا! ليس عليك كتابة دروس في Javascript أو المنشئات.
ربط البيانات وإدارتها
إذا كنت قادمًا من Angular world ، فستكون قلقًا إلى حد كبير بشأن كيفية تمرير البيانات حولك وكيفية تخزين البيانات على مستوى التطبيق. لذلك ، لدينا مفاهيم إدارة الحالة التي تساعدك على إدارة حالة التطبيق والقدرة على تصحيح الأخطاء ومعرفة ما يحدث في جميع أنحاء التطبيق بتنسيق أفضل بكثير.
تُستخدم الدعامات  (أو السمات التي تم تمريرها إلى أحد المكونات) لتمرير البيانات بين المكونات
 تُستخدم واجهة برمجة تطبيقات السياق لحالات استخدام أصغر نسبيًا لإدارة البيانات بين الشاشات / الصفحات
Redux  هي مكتبة كاملة تستخدمها بشكل عام في تطبيقات React لإدارة بيانات / حالة التطبيق وتأتي مع الكثير من الأدوات الرائعة معها.
الآن بعد أن أصبحت مطورًا لجافا سكريبت ، حصلت على لمحة عن كل الأشياء في React ونظامها البيئي - حان الوقت للانطلاق والقيام ببعض التطوير العملي.
خطوات التطوير العملي لتطوير التفاعل
  • يمكنك متابعة هذه المجموعة من المقالات ويمكنك إتقان فن بناء تطبيقات الويب في ReactJS.
  • مقدمة وتجول وتثبيت وتشغيل تطبيق رد الفعل .
  • بناء تطبيق من صفحة واحدة مع المسارات والتنقل بينها .
  • إدارة البيانات بين الصفحات المختلفة باستخدام مفهوم " Context API " .
  • قم بتحسين التطبيق الخاص بك للقيام بوظائف الإنشاء والقراءة والتحديث والحذف (CRUD) باستخدام  Hooks
  • عندما تتمكن من التعامل مع إدارة البيانات المعقدة بين الشاشات المختلفة في التطبيق الخاص بك ، ستحتاج إلى مكتبة إدارة الحالة - Redux هي واحدة من هذه الشعبية.
هل اعجبك الموضوع :

تعليقات