AngularJS1.x アプリケーションを React に移行する方法

今回は AngularJS1.x アプリケーションを React に移行する方法と、AngularJS 1.x アプリケーションを React に移行する際の 注意事項 についてお届けします。実際のケースを見てみましょう。

Angular と React はどちらも優れたフレームワーク/ライブラリです。 Angular は MVC の定義構造 (Model、View、

Controller) を提供します。反応する 状態の変化に基づいた軽量のレンダリング メカニズムを提供します。多くの場合、開発者は AngularJS 上に古いアプリケーションを作成した後、ReactJS を使用して新しい機能を構築したいと考えます。

AngularJS アプリケーションを削除する場合は、ReactJS アプリケーションを最初から構築することをお勧めします。しかし、大規模なアプリケーションの場合、これは実現可能な解決策ではありません。この場合、別の React コンポーネントを構築して Augular にインポートする方が簡単です。

この記事では、react2angular を使用して Angular アプリで React コンポーネントを作成する方法を説明します。

目標と計画

これからやること —

与えられたもの: 都市の名前とその有名な観光スポットを表示する Angular アプリ。

目標: この Angular アプリケーションに React コンポーネントを追加します。 React コンポーネントは、アトラクションの注目の写真を表示します。

計画: React コンポーネントを作成し、画像の URL を渡し、画像を React コンポーネントとして表示します。

はじめましょう！

ステップ 0: Angular アプリを用意する

この記事では、Angular アプリケーションをシンプルにしておきます。私は 2018 年にヨーロッパへの旅行を計画しているので、私の Angular アプリは基本的に訪問したい目的地のリストです。

dataset バケットリストは次のようになります:

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 です:

<p 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>
</p>

超シンプル！ これでサントリーニ島に行けます...

ステップ 1: 依存関係をインストールする

Editor が設定されていない場合、Angular から React への移行は困難になる可能性があります。まずはリンティングをインストールしていきます。 りー

次にreact2angularをインストールします。 React をインストールしたことがない場合は、react、react-dom、prop-types もインストールする必要があります。

りー

ステップ 2: React コンポーネントを作成する

これで、都市の名前をレンダリングする Angular コンポーネントが完成しました。次に、注目の画像をレンダリングする必要があります。この画像がプロップを介して提供されたとします。 React コンポーネントは次のようになります:

npm install --save eslint babel-eslint

ステップ 3: props 属性を渡す

ステップ 2 では、props 経由で利用可能な画像があると想定していることに注意してください。次に、props の値を入力します。 props を使用して依存関係を渡すことができます 反応コンポーネント。 React コンポーネントには利用可能な Angular 依存関係がないことに注意することが重要です。 このように考えることができます。React コンポーネントは Angular アプリケーション用のコンテナ。 コンテナが親から情報を継承する必要がある場合は、props を介して明示的にアクセスする必要があります。

したがって、依存関係を渡すために、Angular で renderImage コンポーネントを追加し、それをパラメータとして imageUrl に渡します:

npm install --save react2angular react react-dom prop-types

ステップ 4: Angular テンプレートをインポートする

これで、他のコンポーネントと同様に、このコンポーネントを Angular アプリに簡単にインポートできるようになります:

import {Component} from 'react';
class RenderImage extends Component {
 render() {
  const imageUrl = this.props.imageUrl;
  return (
   <p>
    <img src={imageUrl} alt=""/>
   </p>
   );
 }
}

タダ！ 信じられない、これは魔法だ。もちろん、（それ以上の）重労働と汗、お供のコーヒーなどです。

戦士、今すぐ React コンポーネントを構築しましょう

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue.js でのコンポーネントの使用方法の詳細な説明

mysql接続プールでトランザクション自動リサイクルを使用する方法(コード付き)

以上がAngularJS1.x アプリケーションを React に移行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。