Cómo convertir una aplicación AngularJS 1.x en una aplicación React, un componente a la vez.

Convirtamos componentes angulares en componentes React

Angular y React son ambos grandes frameworks / bibliotecas. Angular proporciona una estructura definida de MVC (Modelo, Vista, Controlador). React proporciona un mecanismo de representación ligero basado en el cambio de estado. Muchas veces, los desarrolladores tendrán una aplicación con código heredado en AngularJS, pero querrán crear nuevas funciones en ReactJS.

Aunque es posible retirar una aplicación AngularJS y crear una aplicación ReactJS desde cero, no es una solución viable para aplicaciones a gran escala. En tales situaciones, es más fácil construir un componente React de forma aislada e importarlo a Angular.

En esta publicación, te ayudaré a crear un componente React en una aplicación Angular usando react2angular.

Planifica la aplicación

Esto es lo que vamos a hacer:

Dado: Una aplicación angular que representa el nombre de una ciudad y sus principales lugares de interés.

Objetivo: Agregar un componente Reaccionar a la aplicación Angular. El componente React mostrará una imagen destacada de una vista.

Plan: vamos a crear un componente Reaccionar, pasar imageUrl a través de accesorios y mostrar la imagen como un componente Reaccionar.

¡Empecemos!

Paso 0: tener una aplicación angular

A los fines de este artículo, simplifiquemos la complejidad de la aplicación Angular. Estoy planeando un viaje en euros en 2018, por lo tanto, mi aplicación Angular es esencialmente una lista de lugares que me gustaría visitar.

Así es como se ve nuestra lista de deseos del conjunto de datos:

const bucketlist = [{{
  ciudad: 'Venecia',
  posición: 3,
  sitios: ['Gran Canal', 'Puente de los Suspiros', 'Piazza San Marco'],
  img: 'https://unsplash.com/photos/ryC3SVUeRgY',
}, {
  ciudad: 'París',
  posición: 2,
  sitios: ['Torre Eiffel', 'El Louvre', 'Notre-Dame de Paris'],
  img: 'https://unsplash.com/photos/R5scocnOOdM',
}, {
  ciudad: 'Santorini',
  posición: 1,
  sitios: ['Imerovigli', 'Akrotiri', 'Santorini Arts Factory'],
  img: 'https://unsplash.com/photos/hmXtDtmM5r0',
}];

Así es como se ve angularComponent.js:

función AngularComponentCtrl () {
  var ctrl = esto;
  ctrl.bucketlist = bucketlist;
};
angular.module ('demoApp'). componente ('angularComponent', {
  templateUrl: 'angularComponent.html ’,
  controlador: AngularComponentCtrl
});

y esto es angularComponent.html:

  

{{item.city}}

  

Quiero ver {{vista}}

Súper simple! Aunque podría ir a Santorini ahora ...

Ese momento cuando regresas de vacaciones y no puedes esperar para las próximas vacaciones. Foto de Alexandre Chambon en Unsplash

Paso 1: instalar dependencias

Pasar del mundo de Angular a React puede ser un gran dolor de cabeza si su editor no está configurado. Hagamos eso primero. Vamos a instalar la configuración de linting primero.

npm install --save eslint babel-eslint

A continuación, instalemos react2angular. Si nunca ha instalado React, también necesitará instalar react, react-dom y prop-types.

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

Paso 2: crea un componente React

Ahora, ya tenemos un componente angular que representa el nombre de una ciudad. A continuación, tenemos que renderizar la imagen presentada. Supongamos por ahora que la imagen está disponible para nosotros a través de accesorios (y veremos cómo funcionan los accesorios en solo un minuto). Nuestro componente React se ve así:

importar {Componente} desde 'reaccionar';

La clase RenderImage extiende el componente {

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

Paso 3: Pase los accesorios

Recuerde que en el Paso 2 supusimos que tenemos una imagen disponible a través de accesorios. Vamos a llenar los accesorios ahora. Puede pasar dependencias a un componente React utilizando accesorios. Tenga en cuenta que ninguna de sus dependencias angulares está disponible para el componente Reaccionar. Piénselo de esta manera: el componente Reaccionar es como un contenedor conectado a la aplicación Angular. Si necesita que el contenedor herede información del padre, deberá conectarlo explícitamente a través de accesorios.

Entonces, para pasar dependencias, agregaremos un componente renderImage en angular y pasaremos imageUrl como parámetro:

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

Paso 4: incluir en plantilla angular

Ahora puede simplemente importar este componente en la aplicación Angular como cualquier otro componente:

  

{{item.city}}

  

Quiero ver {{sitio}}

   

Ta Da! ¡Es magia! Realmente no. Es trabajo duro y sudor. Y café. Montones.

Café Café Café. Foto de Christiana Rivers en Unsplash
¡Ahora ve a construir algunos componentes React, valiente guerrero!

Un agradecimiento especial a David Gee por presentarme a reaccionar angularmente y ayudarme a ver la luz al final del túnel cuando estaba en el mundo angular.

Recursos:

  1. Este artículo me ayudó mucho.
  2. Documentación oficial de react2angular

Si este artículo te ayudó, haz clic en el botón para que llegue a otros desarrolladores.