Migrer les applications AngularJS1.x vers React (tutoriel détaillé)

Cet article présente principalement comment migrer votre application AngularJS1.x vers React. Maintenant, je le partage avec vous et le donne comme référence.

Angular et React sont tous deux d'excellents frameworks/bibliothèques. Angular fournit la structure de définition de MVC (Model, View, Controller). React fournit un mécanisme de rendu léger basé sur les changements d'état. Souvent, une fois que les développeurs ont une ancienne application sur AngularJS, ils souhaitent créer de nouvelles fonctionnalités à l'aide de ReactJS.

Lorsque vous supprimez l'application AngularJS, créer une application ReactJS à partir de zéro est une bonne option. Mais pour des applications à grande échelle, ce n’est pas une solution réalisable. Dans ce cas, il serait plus facile de créer un composant React distinct et de l'importer dans Augular.

Dans cet article, je vais vous aider à créer un composant React dans une application Angular à l'aide de React2angular.

Objectifs et plans

Voici ce que nous allons faire -

Donné : Une page pour afficher le nom d'une ville et ses célèbres attractions Application angulaire.

Objectif : Ajouter un composant React à l'application Angular. Le composant React affichera une photo en vedette de l'attraction.

Plan : nous allons créer un composant React, transmettre l'URL de l'image et afficher l'image en tant que composant React.

Commençons !

Étape 0 : Avoir une application Angular

Pour les besoins de cet article, gardez votre application Angular simple. Je prévois un voyage en Europe en 2018, mon application Angular est donc essentiellement une liste de destinations que je souhaite visiter.

Voici à quoi ressemble la bucketlist de l'ensemble de données :

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',
}];

Voici à quoi ressemble angulaireComponent.js :

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

Voici angulaireComponent.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 facile ! Il est maintenant temps d'aller à Santorin...

Étape 1 : Installer les dépendances

Migrer d'Angular vers React si votre éditeur n'est pas configuré Cela peut être pénible. Nous installerons d'abord le peluchage.

npm install --save eslint babel-eslint

Ensuite, installez React2angular. Si vous n'avez jamais installé React, vous devrez également installer les types React, React-Dom et Prop.

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

Étape 2 : Créer un composant React

Maintenant, nous avons un composant Angular qui restitue le nom de la ville. Ensuite, nous devons restituer l’image sélectionnée. Disons que cette image nous est fournie via des accessoires. Notre composant React ressemble à ceci :

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

Étape 3 : Passer les accessoires Images disponibles obtenues par les accessoires. Nous voulons maintenant renseigner la valeur des accessoires. Vous pouvez transmettre des dépendances aux composants React à l'aide d'accessoires. Il est important de noter que le composant React n'a aucune dépendance angulaire disponible. Vous pouvez y penser de cette façon : un composant React est comme un conteneur connecté à une application Angular. Si vous avez besoin que le conteneur hérite des informations de son parent, vous devrez y accéder explicitement via des accessoires.

Donc, afin de transmettre les dépendances, nous allons ajouter un composant renderImage dans Angular et le passer en paramètre à imageUrl :

Étape 4 : Importer un modèle angulaire

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

Vous pouvez désormais simplement importer ce composant dans votre application Angular comme n'importe quel autre composant :

Ta Da ! Je n'arrive pas à y croire, c'est magique. Bien sûr, c'est (encore) du travail et de la sueur, du café pour nous accompagner, etc.

<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>

Construisons quelques composants React maintenant, guerrier

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir !

Articles associés :

Comment obtenir la première valeur dans la liste déroulante de sélection en JavaScript

Comment le faire dans AngularJS Obtenez et affichez des mots de passe en temps réel

Comment implémenter une animation offset et uniforme en JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!