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
});

이것은 angleComponent.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로 마이그레이션하는 것이 어려울 수 있습니다. 먼저 Linting을 설치하겠습니다.

다음으로 React2angular를 설치합니다. React를 설치한 적이 없다면 React, React-dom 및 Prop-type도 설치해야 합니다.

2단계: React 구성 요소 만들기

이제 도시 이름을 렌더링하는 Angular 구성 요소가 있습니다. 다음으로 추천 이미지를 렌더링해야 합니다. 이 이미지가 props를 통해 우리에게 제공된다고 가정해 보겠습니다. 우리의 React 컴포넌트는 다음과 같습니다:

npm install --save eslint babel-eslint

3단계: 소품 속성 전달

2단계에서는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Vue.js의 구성 요소 사용에 대한 자세한 설명

mysql 연결 풀에서 트랜잭션 자동 재활용을 사용하는 방법(코드 포함)

위 내용은 AngularJS1.x 애플리케이션을 React로 마이그레이션하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!