Heim > Artikel > Web-Frontend > 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!