Есть много проектов, которые решили перейти на React или какой-либо другой фреймворк, такой как AngularJS, и его библиотеки начинают обесцениваться, и очень скоро мы не можем доверять той функциональности, на которую мы полагаемся, по-прежнему будут работать; библиотеки могут стать полностью несовместимыми.

В моем проекте Google Summer Of Code я работаю с организацией DIAL и Ushahidi над проектом Platform JS Migration. Интерфейс репозитория Клиент платформы Ushahidi написан на Angular 1.5.6 и из-за своей устаревшей природы создает проблемы для разработчиков. Помимо устаревших рамок, в нем также отсутствует какая-либо форма государственного управления. Это вынуждает нас делать чрезмерное количество запросов к нашему API, что дорого обходится пользователям, и организация наконец решила перенести кодовую базу angular в какую-то другую структуру. В этом случае организация рассмотрела подход постепенной миграции базы кода angular для реагирования, и мне посчастливилось поработать над этим.

Прошло две недели с тех пор, как я начал работать над этим проектом после обсуждения всех возможных способов миграции кодовой базы с моим наставником Анной Лосиф. Но перенос кода Angular JS в React - непростая задача. Поэтому мы определили, что лучшим решением нашей проблемы является использование react2angular. Это библиотека, которая позволяет нам использовать компонент React в приложении AngularJS.

Итак, вот как вы можете начать миграцию с помощью react2angular:

1. Перво-наперво:

Чтобы начать работу с react2angular, вам необходимо установить библиотеку. Шаги для установки:

# Using Yarn:
yarn add react2angular react react-dom prop-types
# Or, using NPM:
npm install react2angular react react-dom prop-types — save

2. Работа с компонентами React:

После того, как вы закончите установку, следующим шагом будет работа над реагирующим компонентом, который вы хотите перенести. Итак, что это за компонент React?

Что ж, большинство из вас должно быть знакомо с компонентами реакции, но для тех, кто учится, реагировать. Компоненты React похожи на строительные блоки любого приложения React. Если мне нужно выразить это простыми словами, то компонент - это класс или функция JavaScript, которая необязательно принимает входные данные, то есть свойства (реквизиты) и возвращает элемент React, который описывает, как должен отображаться раздел пользовательского интерфейса (пользовательского интерфейса).

Код, который мы используем для этого шага:

3. Откройте его в Angular:

Примечание. Если вы определили propTypes для своего компонента, они будут использоваться для вычисления привязок компонента, и вы можете опустить второй аргумент:

Если propTypes определены и вы передали второй аргумент, этот аргумент переопределит propTypes.

4. Используйте его в своем коде Angular 1:

Как только вы закончите с этим, следующим шагом будет использование вашего компонента в коде angular. Для этого следуйте коду:

5. Внедрение зависимостей:

Внедрение зависимостей (DI) - это метод, с помощью которого один объект предоставляет зависимости другого объекта. Он позволяет создавать зависимые объекты вне класса и по-разному предоставляет эти объекты классу. Используя DI, мы перемещаем создание и привязку зависимых объектов за пределы класса, который от них зависит. Легко передавать сервисы / константы / и т. Д. в компонент React: просто передайте их в качестве третьего аргумента, и они будут доступны в свойствах вашего компонента.

Например:

Примечание: если у вас есть инъекция, которая соответствует имени опоры, тогда значение будет разрешено с помощью инъекции, а не опоры.

Заключение :

Миграция angular на реакцию, безусловно, будет сложной задачей, так как вам нужно будет портировать весь код angular, чтобы реагировать, поскольку вам нужно обрабатывать две кодовые базы вместе, а не просто сосредотачиваться на одной. Это также включает рассмотрение принятия решений, основанных на миграции, а не сосредоточение большего внимания на архитектуре. Но если ваше приложение слишком велико, и вы не можете написать весь код с нуля, то миграция - лучший вариант. Обязательно ознакомьтесь с этой замечательной библиотекой react2angular и наслаждайтесь миграцией :)