react 小程序转换

Angular and React are both great frameworks/libraries. Angular provides a defined structure of MVC (Model, View, Controller). React provides a lightweight rendering mechanism based on state change. Often times, developers will have an application with legacy code in AngularJS but they’ll want to build new features in ReactJS.

Angular和React都是很棒的框架/库。 Angular提供了MVC的定义结构(模型，视图，控制器)。 React提供了基于状态更改的轻量级渲染机制。 通常，开发人员会在AngularJS中使用带有遗留代码的应用程序，但他们希望在ReactJS中构建新功能。

Although it is possible to retire an AngularJS application and build a ReactJS application from scratch, it isn’t a workable solution for large scale applications. In such situations, it is easier to build a React component in isolation and import it into Angular.

尽管可以退出AngularJS应用程序并从头开始构建ReactJS应用程序，但对于大规模应用程序来说，这不是可行的解决方案。 在这种情况下，更容易隔离地构建React组件并将其导入Angular。

In this post, I will help you create a React component in an Angular app using react2angular.

在这篇文章中，我将帮助您使用react2angular在Angular应用中创建React组件。

规划应用程序 (Plan out the app)

Here is what we are going to do —

这就是我们要做的-

Given: An Angular app that renders name of a city and its top sights.

给定 ：一个Angular应用程序，用于渲染城市名称及其主要景点。

Goal: Add a React component to the Angular app. The React component will display a featured image of a sight.

目标 ：将一个React组件添加到Angular应用中。 React组件将显示景点的特色图像。

Plan: We are going to create a React component, pass in imageUrl through props, and display the image as a React component.

计划 ：我们将创建一个React组件，通过props传递imageUrl ，并将图像显示为React组件。

Let’s get started!

让我们开始吧！

步骤0：安装Angular应用 (Step 0: Have an Angular app)

For the purpose of this article, let’s keep the complexity of the Angular app simple. I am planning a Euro trip in 2018, hence my Angular app is essentially a bucket-list of places I would like to visit.

出于本文的目的，让我们保持Angular应用程序的复杂性简单。 我计划在2018年进行一次欧洲旅行，因此我的Angular应用程序本质上是我想参观的地方的清单。

Here is what our dataset bucketlist looks like:

这是我们的数据集存储bucketlist样子：

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:

这是angularComponent.js样子：

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

and this is angularComponent.html:

这是angularComponent.html ：

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

Super simple! Could go to Santorini right now though…

超级简单！ 虽然现在可以去圣托里尼岛…

步骤1：安装依赖项 (Step 1: Install dependencies)

Moving from Angular to React world can be a huge pain in the butt if your editor is not configured. Let’s do that first. We are going to install setup linting first.

如果未配置您的编辑器，那么从Angular迁移到React世界可能会非常麻烦。 让我们先做。 我们将首先安装安装程序棉绒。

npm install --save eslint babel-eslint

Next, let’s install react2angular . If you have never installed React, you will need to install react, react-dom and prop-types as well.

接下来，让我们安装react2angular 。 如果您从未安装过React，则还需要安装react ， react-dom和prop-types 。

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

第二步：创建一个React组件 (Step 2: Create a React component)

Now, we already have an Angular component that renders the name of a city. Next, we need to render the featured image. Let’s assume for now that the image is available to us via props (and we will get to how props works in just a minute). Our React component looks like this:

现在，我们已经有了一个Angular组件，用于渲染城市的名称。 接下来，我们需要渲染特色图像。 现在让我们假设可以通过props获得图像(我们将在短短的时间内了解props工作方式)。 我们的React组件如下所示：

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

步骤3：传递道具 (Step 3: Pass in props)

Remember in Step 2 we assumed we have an image available via props. We are going to populate props now. You can pass in dependencies to a React component using props. Keep in mind that none of your Angular dependencies are available to the React component. Think of it this way — the React component is like a container connected to the Angular app. If you need the container to inherit information from parent, you will need to explicitly wire it in through props.

请记住，在Step 2我们假设我们可以通过props获得图像。 我们现在要填充props 。 您可以使用props将依赖项传递给React组件。 请记住，您的Angular依赖项都不可用于React组件。 以这种方式思考-React组件就像一个连接到Angular应用程序的容器。 如果您需要容器从父项继承信息，则需要通过props显式地将其连接。

So, to pass in dependencies, we will add a component renderImage in angular and pass in imageUrl as a parameter:

因此，要传递依赖关系，我们将在angular中添加一个组件renderImage并将imageUrl作为参数传递：

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

步骤4：包含在角度模板中 (Step 4: Include in angular template)

Now you can simply import this component in the Angular app like any other component:

现在，您可以像其他任何组件一样简单地将此组件导入Angular应用程序：

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

Ta Da! It’s magic! Not really. It’s hard work and sweat. And coffee. Lots of it.

塔达！ 这是魔法！ 并不是的。 辛勤工作和汗水。 还有咖啡 很多。

Now go build some React components, you brave warrior!

现在去构建一些React组件，你勇敢的战士！

Special shout out to David Gee for introducing me to react2angular and helping me see the light at the end of the tunnel when I was knee deep in the Angular world.

特别向David Gee呐喊，向我介绍了react2angular并帮助我在Angular的世界中深陷膝盖时看到了隧道尽头的光线。

Resources:

资源：

1. This article helped me a lot.

   这篇文章对我有很大帮助。

2. Official documentation of react2angular

   react2angular的官方文档

If this article helped you, please click the ? button so it reaches other developers.

如果本文对您有帮助，请单击“？”。 按钮，以便其他开发者使用。

翻译自: https://www.freecodecamp.org/news/how-to-convert-an-angular-app-to-a-react-app-one-component-at-a-time-ba985eaae66e/

react 小程序转换