Implementación de un componente de React para SPA

Las aplicaciones de una sola página (SPA) pueden ofrecer experiencias atractivas para los usuarios de sitios web. SPA AEM SPA Los desarrolladores quieren poder crear sitios utilizando marcos de trabajo de y los autores quieren editar contenido sin problemas en para un sitio creado con marcos de trabajo de la.

SPA SPA AEM La función de creación de ofrece una solución completa para la asistencia de la creación de contenido en el ámbito de la. AEM SPA En este artículo se presenta un ejemplo de cómo adaptar un componente React simple y existente para trabajar con el Editor de.

Introducción

AEM SPA SPA SPA AEM Gracias al contrato sencillo y ligero que requiere la aplicación y que se establece entre el Editor de Javascript y el Editor de Javascript, la adopción de una aplicación JavaScript existente y su adaptación para su uso con una aplicación de Javascript en el Editor de Javascript es un asunto sencillo y directo.

SPA Este artículo ilustra el ejemplo del componente meteorológico en la muestra de We.Retail Journal.

Debe estar familiarizado con las SPA AEM estructura de una aplicación de para la antes de leer este artículo.

El componente Meteorológico

El componente meteorológico se encuentra en la parte superior izquierda de la aplicación We.Retail Journal. Muestra el tiempo actual de una ubicación definida, extrayendo datos meteorológicos de forma dinámica.

Uso del widget del tiempo

SPA SPA AEM Al crear contenido de la en el Editor de, el componente meteorológico aparece como cualquier otro componente de la, se completa con una barra de herramientas y se puede editar.

AEM La ciudad se puede actualizar en un cuadro de diálogo como cualquier otro componente de la.

El cambio se mantiene y el componente se actualiza automáticamente con nuevos datos meteorológicos.

Implementación del componente meteorológico

El componente meteorológico en realidad se basa en un componente React disponible públicamente, llamado Tiempo abierto en ReactSPA , que se ha adaptado para que funcione como un componente dentro de la aplicación de ejemplo de We.Retail Journal.

Los siguientes son fragmentos de la documentación de NPM del uso del componente React Open Weather.

Revisión del código del componente meteorológico personalizado ( Weather.js) en la aplicación We.Retail Journal:

• Línea 16: El widget React Open Weather se carga según sea necesario.

• Línea 46: La MapTo AEM SPA relaciona este componente de React con un componente correspondiente de manera que se pueda editar en el Editor de la.

• Líneas 22-29: La EditConfig está definida, comprobando si la ciudad se ha rellenado y definiendo el valor si está vacío.

• Líneas 31-44: El componente Tiempo amplía la variable Component y proporciona los datos necesarios tal como se definen en la documentación de uso de NPM para el componente React Open Weather y procesa el componente.

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

SPA Aunque ya debe existir un componente back-end, el desarrollador front-end puede aprovechar el componente React Open Weather en la publicación de We.Retail Journal con muy poca codificación.

Siguiente paso

SPA AEM Para obtener más información sobre el desarrollo de la para obtener más información, consulte el artículo SPA AEM Desarrollo de la.

Recursos de Business.Adobe.com