AngularJS1.x アプリケーションを React に移行する (詳細なチュートリアル)

この記事では主に AngularJS1.x アプリケーションを React に移行する方法を紹介しますので、参考にしてください。

Angular と React はどちらも優れたフレームワーク/ライブラリです。 Angular は MVC (Model、View、Controller) の定義構造を提供します。 React は、状態の変化に基づいた軽量のレンダリング メカニズムを提供します。多くの場合、開発者は AngularJS 上に古いアプリケーションを作成した後、ReactJS を使用して新しい機能を構築したいと考えます。

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

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

目標と計画

これからやることです —

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

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

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

始めましょう!

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

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

データセット バケットリストは次のようになります:

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: 依存関係をインストールする

エディターが設定されていない場合、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 コンポーネントが完成しました。次に、注目の画像をレンダリングする必要があります。この画像がプロップを介して提供されたとします。私たちの React コンポーネントは次のようになります:

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

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

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

そこで、依存関係を渡すために、Angular で renderImage コンポーネントを追加し、パラメータとして imageUrl に渡します。 Angular アプリは次のように簡単です:

 angular.module('demoApp', [])
.component('renderImage', react2angular(RenderImage,['imageUrl']));

Ta Da! 信じられない、これは魔法だ。もちろん、（それ以上の）重労働と汗、お供のコーヒーなどです。 今すぐ React コンポーネントを構築しましょう、戦士!

上記は私があなたのためにまとめたものです。将来役立つことを願っています。

関連記事:

JavaScriptで選択ドロップダウンボックスの最初の値を取得する方法

AngularJSでリアルタイムにパスワードを取得して表示する方法

オフセットと均一アニメーションを実装する方法JS で

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