So migrieren Sie AngularJS1.x-Anwendungen nach React

Dieses Mal werde ich Ihnen zeigen, Wie man AngularJS1.x-Anwendungen nach React migriert, welche Vorsichtsmaßnahmen für die Migration von AngularJS1.x-Anwendungen nach React gelten und welche Das Folgende ist die tatsächliche Praxis. Schauen wir uns den Fall an.

Angular und React sind beide großartige Frameworks/Bibliotheken. Angular stellt die Definitionsstruktur von MVC bereit (Modell, Ansicht, Controller). Reagieren Bietet einen einfachen Rendering-Mechanismus basierend auf Zustandsänderungen. Nachdem Entwickler eine alte Anwendung auf AngularJS haben, möchten sie oft neue Funktionen mit ReactJS erstellen.

Beim Entfernen der AngularJS-Anwendung ist das Erstellen einer ReactJS-Anwendung von Grund auf eine gute Option. Für groß angelegte Anwendungen ist dies jedoch keine praktikable Lösung. In diesem Fall wäre es einfacher, eine separate React-Komponente zu erstellen und diese in Augular zu importieren.

In diesem Artikel helfe ich Ihnen, mit „react2angular“ eine React-Komponente in einer Angular-App zu erstellen.

Ziele und Pläne

Folgendes werden wir tun:

Gegeben: Eine Angular-App, die den Namen einer Stadt und ihrer berühmten Sehenswürdigkeiten anzeigt.

Ziel: Fügen Sie dieser Angular-Anwendung eine React-Komponente hinzu. Die React-Komponente zeigt ein ausgewähltes Foto der Attraktion an.

Plan: Wir erstellen eine React-Komponente, übergeben die Bild-URL und zeigen das Bild als React-Komponente an.

Fangen wir an!

Schritt 0: Eine Angular-App haben

Für die Zwecke dieses Artikels sollten Sie Ihre Angular-Anwendungen einfach halten. Ich plane 2018 eine Reise nach Europa, daher ist meine Angular-App im Wesentlichen eine Liste von Reisezielen, die ich besuchen möchte.

So sieht die Bucketlist Datensatz aus:

const bucketlist = [{
 city: 'Venice',
 position: 3,
 sites: ['Grand Canal', 'Bridge of Sighs', 'Piazza San Marco'],
 img: 'https://unsplash.com/photos/ryC3SVUeRgY',
}, {
 city: 'Paris',
 position: 2,
 sites: ['Eiffel Tower', 'The Louvre', 'Notre-Dame de Paris'],
 img: 'https://unsplash.com/photos/R5scocnOOdM',
}, {
 city: 'Santorini',
 position: 1,
 sites: ['Imerovigli', 'Akrotiri', 'Santorini Arts Factory'],
 img: 'https://unsplash.com/photos/hmXtDtmM5r0',
}];

So sieht angleComponent.js aus:

function AngularComponentCtrl() {
 var ctrl = this;
 ctrl.bucketlist = bucketlist; 
};
angular.module('demoApp').component('angularComponent', {
 templateUrl: 'angularComponent.html',
 controller: AngularComponentCtrl
});

Das ist angleComponent.html:

<p ng-repeat="item in $ctrl.bucketlist" ng-sort="item.position">
 <h2>{{item.city}}</h2>
 <p> I want to see <span ng-repeat="sight in item.sights">{{sight}}         </p></span>
</p>

Super einfach! Jetzt können Sie nach Santorini fahren...

Schritt 1: Abhängigkeiten installieren

Wenn Ihr Editor nicht konfiguriert ist, kann die Migration von Angular zu React mühsam sein. Wir werden zuerst Flusen installieren.

npm install --save eslint babel-eslint

Als nächstes installieren Sie „react2angular“. Wenn Sie React noch nie installiert haben, müssen Sie auch React, React-Dom und Prop-Types installieren.

npm install --save react2angular react react-dom prop-types

Schritt 2: Erstellen Sie eine React-Komponente

Jetzt haben wir eine Angular-Komponente, die den Namen der Stadt wiedergibt. Als nächstes müssen wir das vorgestellte Bild rendern. Nehmen wir an, dieses Bild wird uns über Requisiten zur Verfügung gestellt. Unsere React-Komponente sieht so aus:

import {Component} from 'react';
class RenderImage extends Component {
 render() {
  const imageUrl = this.props.imageUrl;
  return (
   <p>
    <img src={imageUrl} alt=""/>
   </p>
   );
 }
}

Schritt 3: Props-Attribut übergeben

Denken Sie daran, dass in Schritt 2 davon ausgegangen wird, dass über Requisiten ein Bild verfügbar ist. Wir wollen nun den Props-Wert eintragen. Sie können Requisiten verwenden, um Abhängigkeiten zu übergeben Komponenten reagieren. Es ist wichtig zu beachten, dass für die React-Komponente keine Angular-Abhängigkeiten verfügbar sind. Sie können es sich so vorstellen: Eine React-Komponente ist wie eine Container für Angular-Anwendungen. Wenn der Container Informationen von seinem übergeordneten Container erben soll, müssen Sie explizit über Requisiten darauf zugreifen.

Um also Abhängigkeiten zu übergeben, fügen wir eine renderImage-Komponente in Angular hinzu und übergeben sie als Parameter an imageUrl:

 angular.module('demoApp', [])
.component('renderImage', react2angular(RenderImage,['imageUrl']));

Schritt 4: Angular-Vorlage importieren

Jetzt können Sie diese Komponente einfach wie jede andere Komponente in Ihre Angular-App importieren:

<p ng-repeat="item in $ctrl.bucketlist">
 <h2>{{item.city}}</h2>
 <p> I want to see <span ng-repeat="site in item.sites">{{site}}</span>
 <render-image image-url={{item.img}}></render-image>
</p>

Ta Da! Ich kann es nicht glauben, das ist Magie. Natürlich sind es (mehr) harte Arbeit und Schweiß, Kaffee als Begleitung usw.

Lass uns jetzt einige React-Komponenten erstellen, Krieger

Ich glaube, dass du die Methode gemeistert hast, nachdem du den Fall in diesem Artikel gelesen hast. Weitere spannende Inhalte finden Sie in den anderen verwandten Artikeln php Chinesische Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von Komponenten in Vue.js

So verwenden Sie das automatische Transaktionsrecycling im MySQL-Verbindungspool (mit Code)

Das obige ist der detaillierte Inhalt vonSo migrieren Sie AngularJS1.x-Anwendungen nach React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!