Как конвертировать приложение AngularJS 1.x в приложение React — один компонент за раз

От автора: Angular и React – замечательные фреймворки/библиотеки. Angular дает нам определенную структуру MVC (Модель, Вид, Контроллер). React предоставляет легковесный механизм рендеринга на основе смены состояний. Зачастую у разработчиков будет приложение со старым кодом на AngularJS, но им нужно будет создать новые функции в ReactJS.

Можно полностью списать приложение на AngularJS и с нуля написать ReactJS приложение, но это решение не подходит для больших приложений. В таких ситуациях легче изолированно написать React компонент и импортировать его в Angular. В этой статье я помогу вам создать React компоненты в приложении Angular с помощью react2angular.

План приложения

Что мы собираемся сделать –

Дано: приложение Angular, показывающее название города и его достопримечательности.
Цель: добавить React компонент в приложение Angular. React компонент будет отображать изображение достопримечательности.
План: мы создадим React компонент, передадим imageUrl через props и покажем изображение как React компонент.

Начнем!

Шаг 0: Angular приложение

Давайте не будем усложнять Angular приложение в этой статье. В 2018 я планирую путешествие по Европе, поэтому мое Angular приложение – это список мест, которые я хочу посетить.

Как выглядит наш 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',
}];

Файл angularComponent.js:

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

И 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>

Очень просто! Поехал бы в Santorini прямо сейчас…

Шаг 1: установка зависимостей

Если вы не настроили редактор, то переход с Angular на React будет проходить болезненно. Сначала установим линтер.

npm install --save eslint babel-eslint

Теперь установим react2angular. Если вы ни разу не устанавливали React, вам понадобится установить react, react-dom и prop-types.

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

Шаг 2: создание компонента React

У нас есть 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: передача props

Помните, в шаге 2 мы предположили, что изображение доступно через props. Сейчас мы наполним props. С помощью props можно передавать зависимости в компонент React. Не забывайте, что зависимости Angular не доступны компоненту React. Представьте себе, что компонент React – это контейнер, связанный с приложением Angular. Если вам необходимо, чтобы контейнер наследовал информацию от родителя, придется явно связать его через props.

Чтобы передать зависимости, мы добавим компонент renderImage в Angular и передадим imageUrl в качестве параметра:

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

Шаг 4: подключение шаблона Angular

Теперь можно просто импортировать этот компонент в приложение 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>

Тадам! Магия! Ну, не совсем. Скорее, тяжелая работа. И кофе. Много кофе. А теперь создайте пару компонентов React!

Автор: Shruti Kapoor

Источник: https://medium.freecodecamp.org/

Редакция: Команда webformyself.