AngularJS1.x-Anwendungen nach React migrieren (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich die Migration Ihrer AngularJS1.x-Anwendung zu React vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Angular und React sind beide großartige Frameworks/Bibliotheken. Angular stellt die Definitionsstruktur von MVC (Model, View, Controller) bereit. React 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.

Während Sie die AngularJS-Anwendung entfernen, 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 beim Erstellen einer React-Komponente in der Angular-Anwendung mit „react2angular“.

Ziele und Pläne

Das werden wir tun -

Gegeben: Eine Seite, auf der der Name einer Stadt und ihre Berühmten angezeigt werden Attraktionen Winkelanwendung.

Ziel: Eine React-Komponente zur Angular-Anwendung hinzufügen. 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.

Lass uns anfangen!

Schritt 0: Haben Sie eine Angular-App

Für den Zweck dieses Artikels sollten Sie Ihre Angular-App 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 Datensatz-Bucketlist 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 ist es Zeit, nach Santorini zu gehen...

Schritt 1: Abhängigkeiten installieren

Migration von Angular zu React, wenn Ihr Editor nicht konfiguriert ist. Dies kann schmerzhaft 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: Übergeben Sie das Requisitenattribut

Denken Sie daran, dass in Schritt 2 davon ausgegangen wird, dass ein Requisitenbild verfügbar ist. Wir wollen nun den Props-Wert eintragen. Sie können Abhängigkeiten mithilfe von Requisiten an React-Komponenten übergeben. 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 ein Container, der mit einer Angular-Anwendung verbunden ist. Wenn der Container Informationen von seinem übergeordneten Container erben soll, müssen Sie explizit über Requisiten darauf zugreifen.

Um 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 habe das oben Gesagte für dich zusammengestellt, ich hoffe, es wird dir in Zukunft hilfreich sein.

Verwandte Artikel:

So erhalten Sie den ersten Wert im Auswahl-Dropdown-Feld in JavaScript

So machen Sie es AngularJS Passwörter in Echtzeit abrufen und anzeigen

So implementieren Sie versetzte und einheitliche Animationen in JS

Das obige ist der detaillierte Inhalt vonAngularJS1.x-Anwendungen nach React migrieren (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!