Implementación de un componente de React para SPA

Última actualización: 2023-12-04
  • Creado para:
  • Developer

Las aplicaciones de una sola página (SPA) pueden ofrecer experiencias atractivas para los usuarios de sitios web. SPA Los desarrolladores quieren poder crear sitios utilizando marcos de trabajo de y los autores quieren editar contenido dentro de Adobe Experience Manager AEM SPA () sin problemas 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.

NOTA

SPA SPA El Editor de segmentos es la solución recomendada para los proyectos que requieren un procesamiento basado en el cliente basado en el marco de trabajo de la aplicación (por ejemplo, React o Angular) de la aplicación de la aplicación de la manera más sencilla posible.

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 la y el Editor de la, es sencillo tomar una aplicación JavaScript existente y adaptarla para usarla con un en el uso.

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.

PRECAUCIÓN

Este documento usa el Aplicación de diario We.Retail únicamente con fines de demostración. No lo utilice para ningún trabajo de proyecto.

Cualquier proyecto AEM debería utilizar el Tipo de archivo del proyecto AEM, que admite proyectos de SPA que utilizan 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 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

screen_shot_2018-06-08at143224

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.

screen_shot_2018-06-08at143304

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

screen_shot_2018-06-08at143446

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

screen_shot_2018-06-08at143524

Implementación del componente meteorológico

El componente meteorológico se basa en un componente React disponible públicamente, llamado Tiempo abierto en React. SPA 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.

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

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 utilizar el componente React Open Weather en la interfaz de usuario de We.Retail Journal con 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.

En esta página