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

Файл angularComponent.js:

И angularComponent.html:

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

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

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

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

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

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

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

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

У нас есть Angular компонент, отображающий название города. Нам необходимо показать изображение. Предположим, что изображение доступно через props (разберемся с тем, как работает props через секунду). Компонент React выглядит так:

Шаг 3: передача props

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

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

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

Теперь можно просто импортировать этот компонент в приложение Angular, как любой другой компонент:

Тадам! Магия! Ну, не совсем. Скорее, тяжелая работа. И кофе. Много кофе. А теперь создайте пару компонентов 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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree