كيفية تحويل تطبيق AngularJS 1.x إلى تطبيق React - مكون واحد في كل مرة.

دعنا نحول المكونات الزاوية إلى مكونات التفاعل

الزاوي و React كلاهما الأطر / مكتبات كبيرة. الزاوي يوفر بنية محددة من MVC (نموذج ، عرض ، تحكم). يوفر React آلية تقديم خفيفة الوزن بناءً على تغيير الحالة. في كثير من الأحيان ، سيكون لدى المطورين تطبيق برمز قديم في AngularJS لكنهم يريدون إنشاء ميزات جديدة في ReactJS.

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

في هذا المنشور ، سأساعدك في إنشاء مكون React في تطبيق Angular باستخدام react2angular.

تخطيط التطبيق

هنا هو ما سنفعله -

المقدمة: تطبيق Angular يجعل اسم المدينة وأهم معالمها.

الهدف: إضافة مكون React إلى التطبيق الزاوي. سيقوم المكون React بعرض صورة مميزة للمشهد.

الخطة: سننشئ مكون React ، ونمرر imageUrl خلال الدعائم ، ونعرض الصورة كمكون React.

هيا بنا نبدأ!

الخطوة 0: لديك تطبيق الزاوي

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

إليك ما تبدو عليه قائمة قوائم مجموعة البيانات لدينا:

قائمة قوائم const = [{
  المدينة: "البندقية" ،
  الموقف: 3 ،
  المواقع: ["القناة الكبرى" ، "جسر التنهدات" ، "ساحة سان ماركو"] ،
  img: 'https://unsplash.com/photos/ryC3SVUeRgY' ،
} ، {
  المدينة: باريس
  الموقف: 2 ،
  المواقع: [برج إيفل ، اللوفر ، نوتردام في باريس] ،
  img: 'https://unsplash.com/photos/R5scocnOOdM' ،
} ، {
  المدينة: "سانتوريني" ،
  الموقف: 1 ،
  المواقع: ["إيميروفيجلي" و "أكروتيري" و "مصنع سانتوريني للفنون") ،
  img: 'https://unsplash.com/photos/hmXtDtmM5r0' ،
}].

هذا ما يشبه angularComponent.js:

وظيفة AngularComponentCtrl () {
  var ctrl = هذا ؛
  ctrl.bucketlist = قائمة
}؛
angular.module ('demoApp'). المكون ('angularComponent' ، {
  templateUrl: 'angularComponent.html' ،
  تحكم: AngularComponentCtrl
})؛

وهذا هو angularComponent.html:

  

{{item.city}}   

أريد أن أرى {{sight}}

سوبر بسيط! يمكن أن تذهب إلى سانتوريني الآن على الرغم من ...

تلك اللحظة عندما تعود من إجازة ولا يمكن أن تنتظر الإجازة التالية. الصورة ألكسندر شامبون على Unsplash

الخطوة 1: تثبيت التبعيات

يمكن أن يكون الانتقال من عالم الزاوي إلى العالم التفاعلي ألمًا كبيرًا في المؤخر إذا لم يتم تكوين المحرر الخاص بك. لنقم بذلك أولاً. سنقوم بتثبيت برنامج الإعداد أولاً.

تثبيت npm - حفظ eslint babel-eslint

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

تثبيت npm - حفظ أنواع رد فعل رد الفعل dom- دوم

الخطوة 2: إنشاء مكون React

الآن ، لدينا بالفعل عنصر الزاوي الذي يجعل اسم المدينة. بعد ذلك ، نحتاج إلى تقديم الصورة المميزة. لنفترض الآن أن الصورة متاحة لنا عبر الدعائم (وسنتعرف على كيفية عمل الدعائم في دقيقة واحدة فقط). يبدو مكون رد الفعل لدينا كما يلي:

استيراد {Component} من 'react' ؛

class RenderImage يمتد المكون {

  يجعل() {
    const imageUrl = this.props.imageUrl؛
    إرجاع (
      
                      )؛   } }

الخطوة 3: تمر في الدعائم

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

لذلك ، لتمرير التبعيات ، سنضيف مكون renderImage في الزاوي ونمرر imageUrl كمعلمة:

 angular.module ('demoApp' ، [])
.component ('renderImage'، react2angular (RenderImage، ['imageUrl']))؛

الخطوة 4: تضمين في قالب الزاوي

الآن يمكنك ببساطة استيراد هذا المكون في التطبيق الزاوي مثل أي مكون آخر:

  

{{item.city}}   

أريد أن أرى {{site}}

   

تا دا! انه سحر! ليس صحيحا. إنه عمل شاق وعرق. و قهوة. الكثير منه.

قهوة قهوة قهوة. تصوير كريستيانا ريفرز أونسبلاش
اذهب الآن بناء بعض مكونات React ، أنت محارب شجاع!

صيحة خاصة لديفيد جي لتقديمه لي أن رد فعل 2angular ومساعدتي في رؤية الضوء في نهاية النفق عندما كنت الركبة في عمق العالم الزاوي.

مصادر:

  1. هذا المقال ساعدني كثيرا.
  2. الوثائق الرسمية لل react2angular

إذا ساعدك هذا المقال ، فالرجاء النقر فوق الزر so حتى يصل إلى المطورين الآخرين.