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

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

Начнем!

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Шаг 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.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree