Heim  >  Artikel  >  Web-Frontend  >  AngularJS1.x-Anwendungen nach React migrieren (ausführliches Tutorial)

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

亚连
亚连Original
2018-06-08 14:08:291829Durchsuche

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 &#39;react&#39;;
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(&#39;demoApp&#39;, [])
.component(&#39;renderImage&#39;, react2angular(RenderImage,[&#39;imageUrl&#39;]));

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn