Comment convertir une application AngularJS 1.x en application React - un composant à la fois.

Convertissons les composants angulaires en composants React

Angular et React sont tous deux d'excellents frameworks / bibliothèques. Angular fournit une structure définie de MVC (modèle, vue, contrôleur). React fournit un mécanisme de rendu léger basé sur le changement d'état. Souvent, les développeurs auront une application avec du code hérité dans AngularJS mais ils voudront créer de nouvelles fonctionnalités dans ReactJS.

Bien qu’il soit possible de retirer une application AngularJS et de construire une application ReactJS à partir de zéro, ce n’est pas une solution viable pour les applications à grande échelle. Dans de telles situations, il est plus facile de construire un composant React de manière isolée et de l'importer dans Angular.

Dans cet article, je vais vous aider à créer un composant React dans une application angulaire à l’aide de react2angular.

Planifier l'application

Voici ce que nous allons faire -

Compte tenu: Une application angulaire qui rend le nom d'une ville et ses principaux sites.

Objectif: ajouter un composant React à l'application Angular. Le composant React affichera une image en vedette d'un spectacle.

Plan: Nous allons créer un composant React, le transmettre à imageUrl via des accessoires et afficher l'image en tant que composant React.

Commençons!

Étape 0: avoir une application angulaire

Pour les besoins de cet article, gardons la complexité de l’application Angular simple. Je prévois un voyage en Euro en 2018, mon application Angular est donc essentiellement une liste de lieux que je voudrais visiter.

Voici à quoi ressemble notre ensemble de données:

const bucketlist = [{
  ville: 'Venise',
  position: 3,
  sites: ['Grand Canal', 'Pont des Soupirs', 'Piazza San Marco'],
  img: 'https://unsplash.com/photos/ryC3SVUeRgY',
}, {
  ville: 'Paris',
  position: 2,
  sites: ['Tour Eiffel', 'Le Louvre', 'Notre-Dame de Paris'],
  img: 'https://unsplash.com/photos/R5scocnOOdM',
}, {
  ville: 'Santorini',
  position: 1,
  sites: ['Imerovigli', 'Akrotiri', 'Santorini Arts Factory'],
  img: 'https://unsplash.com/photos/hmXtDtmM5r0',
}];

Voici à quoi ressemble angularComponent.js:

fonction AngularComponentCtrl () {
  var ctrl = this;
  ctrl.bucketlist = bucketlist;
};
angular.module (’demoApp’). composant (’angularComponent’, {
  templateUrl: 'angularComponent.html',
  contrôleur: AngularComponentCtrl
});

et c'est angularComponent.html:

  

{{item.city}}   

Je souhaite voir {{sight}}

Super simple! On pourrait aller à Santorin maintenant même si…

Ce moment où vous revenez de vacances et que vous ne pouvez pas attendre pour les prochaines vacances. Photo par Alexandre Chambon sur Unsplash

Étape 1: Installez les dépendances

Passer d'un monde angulaire à un monde réactif peut être une grosse douleur si votre éditeur n'est pas configuré. Faisons cela en premier. Nous allons d’abord installer l’installation.

npm installer --save eslint babel-eslint

Ensuite, installons react2angular. Si vous n'avez jamais installé React, vous devrez également installer les types react, réact-dom et prop.

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

Étape 2: Créer un composant React

Nous avons déjà un composant angulaire qui donne le nom d’une ville. Ensuite, nous devons rendre l'image sélectionnée. Supposons pour le moment que l’image nous est disponible via des accessoires (et nous expliquerons le fonctionnement des accessoires dans une minute). Notre composant React ressemble à ceci:

importer {composant} de 'réagir';

class RenderImage étend le composant {

  render () {
    const imageUrl = this.props.imageUrl;
    revenir (
      
                      )   } }

Étape 3: Passez les accessoires

Rappelez-vous qu'à l'étape 2, nous avons supposé que nous avions une image disponible via des accessoires. Nous allons peupler les accessoires maintenant. Vous pouvez transmettre des dépendances à un composant React à l'aide d'accessoires. Gardez à l'esprit qu'aucune de vos dépendances angulaires n'est disponible pour le composant React. Pensez-y de cette façon: le composant React est comme un conteneur connecté à l'application Angular. Si vous souhaitez que le conteneur hérite des informations du parent, vous devez le connecter explicitement via des accessoires.

Donc, pour passer des dépendances, nous allons ajouter un composant renderImage dans angular et passer dans imageUrl en tant que paramètre:

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

Étape 4: Inclure dans le gabarit angulaire

Maintenant, vous pouvez simplement importer ce composant dans l'application Angular comme n'importe quel autre composant:

  

{{item.city}}   

Je souhaite voir {{site}}

   

Ta Da! C'est magique! Pas vraiment. C’est un travail dur et la transpiration. Et du café. Beaucoup.

Café Café Café. Photo de Christiana Rivers sur Unsplash
Maintenant, construis quelques composants de React, brave guerrier!

Un merci spécial à David Gee pour m'avoir invité à réagir de manière angulaire et à m'aider à voir la lumière au bout du tunnel quand j'étais profondément enfoncé dans le monde angulaire.

Ressources:

  1. Cet article m'a beaucoup aidé.
  2. Documentation officielle de react2angular

Si cet article vous a aidé, cliquez sur le bouton pour qu’il atteigne d’autres développeurs.