Implementera en React Component for SPA

Senast uppdaterad: 4 maj 2023

Skapat för:

  • Developer
CAUTION
AEM 6.4 har nått slutet på den utökade supporten och denna dokumentation är inte längre uppdaterad. Mer information finns i teknisk supportperiod. Hitta de versioner som stöds här.

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 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 Editor.

NOTE
Funktionen SPA (Single-Page Application Editor) kräver AEM 6.4 Service Pack 2 eller senare.
SPA Editor är den rekommenderade lösningen för projekt som kräver SPA ramverksbaserad återgivning på klientsidan (t.ex. Reaktion eller Angular).

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.

CAUTION
Det här dokumentet använder App för återförsäljningsjournal endast i demonstrationssyfte. Det ska inte användas för något projektarbete.
Alla AEM ska utnyttja AEM Project Archetype, som stöder SPA projekt med React eller Angular och använder SPA SDK.

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

screen_shot_2018-06-08at143224

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.

screen_shot_2018-06-08at143304

Staden kan uppdateras i en dialog precis som andra AEM.

screen_shot_2018-06-08at143446

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

screen_shot_2018-06-08at143524

Implementering av väderkomponent

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

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

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

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

  • Rad 16: Widgeten React Open Weather (Reagera Öppna väder) läses in efter behov.

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

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

  • Rader 31-44: Komponenten Väder 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 finns en backend-komponent kan den som utvecklar frontend utnyttja React Open Weather-komponenten i SPA We.Retail Journal med mycket liten kodning.

Nästa steg

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

Föregående sida
Nästa sida

Experience Manager