От автора: 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const bucketlist = [{ city: 'Venice', position: 3, sites: ['Grand Canal', 'Bridge of Sighs', 'Piazza San Marco'], img: '//unsplash.com/photos/ryC3SVUeRgY', }, { city: 'Paris', position: 2, sites: ['Eiffel Tower', 'The Louvre', 'Notre-Dame de Paris'], img: '//unsplash.com/photos/R5scocnOOdM', }, { city: 'Santorini', position: 1, sites: ['Imerovigli', 'Akrotiri', 'Santorini Arts Factory'], img: '//unsplash.com/photos/hmXtDtmM5r0', }]; |
Файл angularComponent.js:
|
1 2 3 4 5 6 7 8 |
function AngularComponentCtrl() { var ctrl = this; ctrl.bucketlist = bucketlist; }; angular.module(’demoApp’).component(’angularComponent’, { templateUrl: 'angularComponent.html’, controller: AngularComponentCtrl }); |
И angularComponent.html:
|
1 2 3 4 |
<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 будет проходить болезненно. Сначала установим линтер.
|
1 |
npm install --save eslint babel-eslint |
Теперь установим react2angular. Если вы ни разу не устанавливали React, вам понадобится установить react, react-dom и prop-types.
|
1 |
npm install --save react2angular react react-dom prop-types |
Шаг 2: создание компонента React
У нас есть Angular компонент, отображающий название города. Нам необходимо показать изображение. Предположим, что изображение доступно через props (разберемся с тем, как работает props через секунду). Компонент React выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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 в качестве параметра:
|
1 2 |
angular.module(’demoApp’, []) .component(’renderImage’, react2angular(RenderImage,[’imageUrl’])); |
Шаг 4: подключение шаблона Angular
Теперь можно просто импортировать этот компонент в приложение Angular, как любой другой компонент:
|
1 2 3 4 5 |
<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
Источник: //medium.freecodecamp.org/
Редакция: Команда webformyself.
