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

kak konvertirovat prilozhenie angularjs 1x v prilozhenie react – po

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: '
}, {
  city: 'Paris',
  position: 2,
  sites: ['Eiffel Tower', 'The Louvre', 'Notre-Dame de Paris'],
  img: '
}, {
  city: 'Santorini',
  position: 1,
  sites: ['Imerovigli', 'Akrotiri', 'Santorini Arts Factory'],
  img: '
}];

Это то, что 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>

Супер просто! Мог бы поехать на Санторини прямо сейчас…

p83cdbYPyyvGn1IrTNnzC-XDpcWuSm7-1VBu
Тот момент, когда ты возвращаешься из отпуска и не можешь дождаться следующего отпуска. Фото Александра Шамбона на Unsplash

Шаг 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. Передайте реквизит

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

Итак, чтобы передать зависимости, мы добавим компонент renderImage в угловой и пройти в 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>

Та да! Это магия! Не совсем. Это тяжелый труд и пот. И кофе. Много что.

-L8XanmrOrxeb9YzUIjafJ21x2KRbuSbmaCy
Кофе Кофе Кофе. Фото Кристианы Риверс на Unsplash

А теперь собирай несколько компонентов React, храбрый воин!

Особая благодарность Дэвиду Ги за то, что он меня познакомил react2angular и помог мне увидеть свет в конце тоннеля, когда я был по колено в мире Angular.

Ресурсы:

  1. Эта статья мне очень помогла.
  2. Официальная документация react2angular

Если эта статья помогла вам, нажмите кнопку ? кнопку, чтобы она достигла других разработчиков.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *