Implementera en React Component for SPA

Single page applications (SPA) can offer compelling experiences for website users. Utvecklare vill kunna skapa webbplatser med SPA ramverk och författare vill smidigt redigera innehåll i Adobe Experience Manager (AEM) för en webbplats som byggts med SPA ramverk.

SPA innehåller en omfattande lösning för SPA inom AEM. I den här artikeln visas ett exempel på hur du anpassar en enkel, befintlig React-komponent så att den fungerar med AEM SPA.

Introduktion

Tack vare det enkla och lätta kontrakt som AEM kräver och som upprättas mellan SPA och SPA Editor är det enkelt att ta ett befintligt JavaScript-program och anpassa det för användning med ett SPA i AEM.

I den här artikeln visas exemplet på väderkomponenten i exempelSPA för Web.Retail Journal.

Du bör känna till struktur i en SPA för AEM innan du läser den här artikeln.

Väderkomponenten

väderkomponenten finns i det övre vänstra hörnet i appen We.Retail Journal. Den visar det aktuella vädret på en angiven plats och drar in väderdata dynamiskt.

Använda Widgeten Väder

När du redigerar innehåll i SPA i SPA Editor visas väderkomponenten som vilken annan AEM komponent som helst, komplett med ett verktygsfält, och kan redigeras.

Staden kan uppdateras i en dialogruta precis som andra AEM.

Ändringen kvarstår och komponenten uppdateras automatiskt med nya väderdata.

Implementering av väderkomponent

väderkomponenten bygger på en allmänt tillgänglig React-komponent som kallas Reagera på öppet väder. Den har anpassats för att fungera som en komponent i exempelprogrammet för Web.Retail Journal SPA.

Nedan följer NPM-dokumentation om hur komponenten React Open Weather används.

Granska koden för den anpassade väderkomponenten ( Weather.js) i We.Retail Journal:

• Rad 16: Widgeten React Open Weather läses in efter behov.

• Rad 46: MapTo funktionen relaterar den här React-komponenten till en motsvarande AEM så att den kan redigeras i SPA Editor.

• Raderna 22-29: EditConfig är definierad, kontrollerar om staden har fyllts i och definierar värdet om det är tomt.

• Rader 31-44: Weather-komponenten utökar Component och innehåller de data som krävs enligt NPM-användningsdokumentationen för komponenten React Open Weather och återger komponenten.

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ 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);

Även om det redan måste finnas en backend-komponent kan frontendutvecklaren använda React Open Weather-komponenten i SPA We.Retail Journal med liten kodning.

Nästa steg

Mer information om hur du utvecklar SPA för AEM finns i artikeln Utveckla SPA för AEM.