How to migrate your AngularJS1.x application to React, angularjs1.xreact

How to migrate your AngularJS1.x application to React, angularjs1.xreact

Angular and React are both great frameworks/libraries. Angular provides the MVC (model, view, Controller) definition structure. React provides a lightweight presentation mechanism based on state changes. Normally, after developers have an old application on AngularJS, they will want to use ReactJS to create new features.

Although the AngularJS application is removed, it is a good choice to create a ReactJS application from the beginning. However, for large-scale applications, it is not a feasible solution. In this case, it is easier to create a React component and import it into Augular.

In this article, I will help you create a React component using react2angular in Angular applications.

Goals and plans

Here is what we will do --

Given: an Angular application that shows city names and famous scenic spots.

Purpose: Add a React component to the Angular application. The React component will display a feature-based Scenic Spot photo.

Plan: we will create a React component that is passed through the image Url and displayed as a React component.

Let's get started!

Step 2: Have an Angular Application

To achieve the purpose of this article, please maintain the simplicity of Angular applications. I plan to make a tour of Europe in 2018, so my Angular application is essentially a list of destinations I want to access.

The following is what the data set bucketlist looks like:

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

This is what angularComponent. js looks like:

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

This is angularComponent.html:

<div ng-repeat="item in $ctrl.bucketlist" ng-sort="item.position"> 
Super simple! Now you can go to Santorini...
Step 2: Install dependency
If your editor is not configured, it may be painful to migrate from Angular to React. We will first install linting.
npm install --save eslint babel-eslint
Next, install react2angular. If you have never installed React, you will also need to install react, react-dom and prop-types.
npm install --save react2angular react react-dom prop-types
Step 2: Create a React component
Now we have an Angular component to present the name of a city. Next, we need to render the special image. Suppose the image is provided to us through props. Our React components are as follows:
import {Component} from 'react';class RenderImage extends Component { render() {  const imageUrl = this.props.imageUrl;  return (   <div>       </div>   ); }}
Step 2: Pass props attributes
Remember, in step 1, assume that there is an available image obtained through props. Now we need to fill in the props value. You can use props to pass dependencies to the React component. Note that the React component does not have any Angular dependency available. You can think-the React component is like a container connected to an Angular application. If you need the container to inherit the parent information, you will need to access it explicitly through props.
Therefore, to pass dependencies, we will add an renderImage component in Angular and pass it as a parameter to imageUrl:
 angular.module('demoApp', []).component('renderImage', react2angular(RenderImage,['imageUrl']));
Step 2: Import Angular templates
Now, you can simply import this component to an Angular application like any other component:
<div ng-repeat="item in $ctrl.bucketlist"> 
Ta Da! I can't believe it. This is magic. Of course, this (more) is hard work and sweat, as well as the coffee that accompanied us, and so on.
Now let's build some React components, warrior!

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.