Implementera en React Component for SPA

Senaste uppdatering: 2023-10-04
  • Skapat för:
  • Developer

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.

OBSERVERA

SPA Editor är den rekommenderade lösningen för projekt som kräver SPA ramverksbaserad rendering på klientsidan (till exempel React 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.

FÖRSIKTIGHET

Det här dokumentet använder App för återförsäljningsjournal endast i demonstrationssyfte. Använd den inte för något projektarbete.

Alla AEM ska använda AEM Project Archettype, 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 dialogruta 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 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.

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

På denna sida