Show Menu
TEMAS×

Implementación de un componente React para SPA

Las aplicaciones de una sola página (SPA) pueden oferta experiencias atractivas para los usuarios de sitios web. Los desarrolladores quieren poder crear sitios con marcos de SPA y los autores quieren editar contenido sin problemas dentro de AEM para un sitio creado con marcos de SPA.
La función de creación de SPA oferta una solución completa para admitir SPA dentro de AEM. En este artículo se muestra un ejemplo de cómo adaptar un componente de React simple y existente para que funcione con el Editor de SPA de AEM.
El Editor de SPA es la solución recomendada para proyectos que requieren procesamiento del cliente basado en el marco de SPA (por ejemplo, React o Angular).

Introducción

Gracias al sencillo y ligero contrato que requiere AEM y que se ha establecido entre el SPA y el Editor de SPA, tomar una aplicación de Javascript existente y adaptarla para su uso con un SPA en AEM es un asunto sencillo.
Este artículo ilustra el ejemplo del componente meteorológico en el SPA de muestra de Historial We.Retail.
Debe estar familiarizado con la estructura de una aplicación SPA para AEM antes de leer este artículo.
Este documento solo utiliza la aplicación de Historial We.Retail para fines de demostración. No debe utilizarse para ningún trabajo de proyecto.
Cualquier proyecto de AEM debería aprovechar el arquetipo del proyecto de AEM, que admite proyectos de SPA con React o Angular y aprovecha el SDK de SPA.

El componente meteorológico

El componente meteorológico se encuentra en la parte superior izquierda de la aplicación de Historial We.Retail. Muestra el clima actual de una ubicación definida, extrayendo datos del tiempo dinámicamente.

Uso de la utilidad del tiempo

Al crear contenido de SPA en el Editor de SPA, el componente meteorológico aparece como cualquier otro componente de AEM, con una barra de herramientas y es editable.
La ciudad se puede actualizar en un cuadro de diálogo como cualquier otro componente de AEM.
El cambio se mantiene y el componente se actualiza automáticamente con nuevos datos meteorológicos.

Implementación de componentes meteorológicos

El componente meteorológico se basa en realidad en un componente de React disponible al público, llamado React Open Weather , que se ha adaptado para funcionar como un componente dentro de la aplicación SPA de muestra de Historial We.Retail.
Los siguientes son fragmentos de la documentación de NPM sobre el uso del componente React Open Weather.
Revisión del código del componente meteorológico personalizado ( Weather.js ) en la aplicación de Historial We.Retail:
  • Línea 16 : El widget Reaccionar tiempo abierto se carga según sea necesario.
  • Línea 46 : La MapTo función relaciona este componente de Reacción con un componente de AEM correspondiente para que se pueda editar en el Editor de SPA.
  • Líneas 22-29 : El EditConfig se define, comprobando si la ciudad se ha llenado y definiendo el valor si está vacía.
  • Líneas 31-44 : El componente Tiempo amplía la Component clase y proporciona los datos requeridos, 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/cq-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);

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

Etapa siguiente

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