SPA에 대한 React 구성 요소 구현 implementing-a-react-component-for-spa

SPA(단일 페이지 애플리케이션)는 웹 사이트 사용자에게 적합한 멋진 경험을 제공할 수 있습니다. 개발자는 SPA 프레임워크를 사용하여 사이트를 작성하려고 하며 작성자는 SPA 프레임워크를 사용하여 빌드된 사이트의 Adobe Experience Manager(AEM) 내에서 콘텐츠를 원활하게 편집하려고 합니다.

SPA 작성 기능은 AEM 내에서 SPA을 지원하는 포괄적인 솔루션을 제공합니다. 이 문서에서는 간단한 기존 React 구성 요소를 AEM SPA Editor에서 작동하도록 조정하는 방법에 대한 예를 제공합니다.

NOTE
SPA 편집기는 SPA 프레임워크 기반의 클라이언트측 렌더링(예: React 또는 Angular)이 필요한 프로젝트에 권장되는 솔루션입니다.

소개 introduction

AEM에서 필요로 하고 SPA과 SPA 편집기 간에 설정되는 간단하고 가벼운 계약 덕분에 기존 JavaScript 애플리케이션을 AEM에서 SPA에 사용하도록 채택하는 것은 간단한 일입니다.

이 문서에서는 We.Retail 저널 샘플 SPA에 있는 날씨 구성 요소의 예를 보여줍니다.

다음 사항을 잘 알고 있어야 합니다. AEM용 SPA 애플리케이션 구조 이 문서를 읽기 전에.

CAUTION
이 문서에서는 We.Retail 저널 앱 데모용으로만 사용됩니다. 프로젝트 작업에는 사용하지 마십시오.
AEM 프로젝트는 React 또는 Angular를 통해 SPA 프로젝트를 지원하고 SPA SDK를 사용하는 AEM Project Archetype을 사용해야 합니다.

날씨 구성 요소 the-weather-component

날씨 구성 요소는 We.Retail 저널 앱의 왼쪽 상단에 있습니다. 정의된 위치의 현재 날씨를 표시하여 날씨 데이터를 동적으로 가져옵니다.

날씨 위젯 사용 using-the-weather-widget

screen_shot_2018-06-08at143224

SPA 편집기에서 SPA 콘텐츠를 작성할 때 날씨 구성 요소는 도구 모음과 함께 다른 AEM 구성 요소로 표시되며 편집할 수 있습니다.

screen_shot_2018-06-08at143304

도시는 다른 AEM 구성 요소와 마찬가지로 대화 상자에서 업데이트할 수 있습니다.

screen_shot_2018-06-08at143446

변경은 지속되고 구성 요소는 새로운 날씨 데이터로 자동으로 업데이트됩니다.

screen_shot_2018-06-08at143524

날씨 구성 요소 구현 weather-component-implementation

날씨 구성 요소는 공개적으로 사용 가능한 React 구성 요소인 React Open Weather. We.Retail Journal 샘플 SPA 애플리케이션 내에서 구성 요소로 작동하도록 조정되었습니다.

다음은 React Open Weather 구성 요소 사용에 대한 NPM 설명서의 스니펫입니다.

screen_shot_2018-06-08at144723 screen_shot_2018-06-08at144215

사용자 지정된 날씨 구성 요소의 코드 검토( Weather.js) We.Retail 저널 애플리케이션의

  • 라인 16: 필요에 따라 React 열기 날씨 위젯이 로드됩니다.

  • 라인 46: MapTo 함수는 SPA 편집기에서 편집할 수 있도록 이 React 구성 요소를 해당 AEM 구성 요소와 연결합니다.

  • 라인 22-29: EditConfig 시가 채워졌는지 확인하고 비어 있는 경우 값을 정의하는 가 정의됩니다.

  • 라인 31-44: 날씨 구성 요소가 를 확장합니다. Component 및 는 React Open Weather 구성 요소에 대한 NPM 사용 설명서에 정의된 대로 필요한 데이터를 제공하고 구성 요소를 렌더링합니다.

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ Copyright 2018 Adobe Systems Incorporated
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     https://www.apache.org/licenses/LICENSE-2.0
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import React, {Component} from 'react';
import ReactWeather from 'react-open-weather';
import {MapTo} from '@adobe/aem-react-editable-components';

require('./Weather.css');

const WeatherEditConfig = {

    emptyLabel: 'Weather',

    isEmpty: function() {
        return !this.props || !this.props.cq_model || !this.props.cq_model.city || this.props.cq_model.city.trim().length < 1;
    }
};

class Weather extends Component {

    render() {
        let apiKey = "12345678901234567890";
        let city;

        if (this.props.cq_model) {
            city = this.props.cq_model.city;
            return <ReactWeather key={'react-weather' + Date.now()} forecast="today" apikey={apiKey} type="city" city={city} />
        }

        return null;
    }
}

MapTo('we-retail-journal/global/components/weather')(Weather, WeatherEditConfig);

백엔드 구성 요소가 이미 존재해야 하지만, 프론트엔드 개발자는 We.Retail Journal SPA에서 적은 코딩으로 React Open Weather 구성 요소를 사용할 수 있습니다.

다음 단계 next-step

AEM용 SPA 개발에 대한 자세한 내용은 문서 를 참조하십시오 AEM용 SPA 개발.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2