Comment migrer les applications AngularJS1.x vers React

Cette fois, je vais vous présenter Comment migrer les applications AngularJS1.x vers React, quelles sont les précautions pour migrer les applications AngularJS1.x vers React, et les Voici le combat réel. Jetons un coup d'œil au cas.

Angular et React sont tous deux d'excellents frameworks/bibliothèques. Angular fournit la structure de définition de MVC (Model, View, Controller). Réagir 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.

Lors de la suppression de l'application AngularJS, créer une application ReactJS à partir de zéro est une bonne option. Mais pour des applications à grande échelle, cette solution n’est pas 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ées : une application angulaire qui affiche le nom d'une ville et ses attractions célèbres.

Objectif : Ajouter un composant React à cette 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 angulaire

Pour les besoins de cet article, gardez vos applications angulaires simples. 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
});

Il s'agit d'angularComponent.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>

Hyper simple ! Maintenant vous pouvez aller à Santorin...

Étape 1 : Installer les dépendances

Si votre éditeur n'est pas configuré, la migration d'Angular vers React 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 angulaire 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 l'attribut des accessoires

N'oubliez pas qu'à l'étape 2, on suppose qu'une image est disponible via les accessoires. Nous voulons maintenant renseigner la valeur des accessoires. Vous pouvez utiliser des accessoires pour transmettre des dépendances à Réagissez les composants. 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 pour les applications angulaires. Si vous avez besoin que le conteneur hérite des informations de son parent, vous devrez y accéder explicitement via des accessoires.

Donc, pour passer la dépendance, nous allons ajouter un composant renderImage dans Angular et le passer en paramètre à imageUrl :

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

Étape 4 : Importer le modèle angulaire

Désormais, vous pouvez simplement importer ce composant dans votre application Angular comme n'importe quel autre composant :

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

Construisons quelques composants React maintenant, guerrier !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le sujet. php site chinois !

Lecture recommandée :

Explication détaillée de l'utilisation des composants dans Vue.js

Comment utiliser le recyclage automatique des transactions dans le pool de connexion MySQL (avec code)

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!