Cree su primer SPA de React en AEM

Le damos la bienvenida a un tutorial en varias partes diseñado para desarrolladores que utilicen la función SPA Editor en Adobe Experience Manager (AEM) de forma nueva. Este tutorial explica la implementación de una aplicación React para una marca ficticia de estilo de vida, la WKND. La aplicación React se desarrollará y se diseñará para implementarse con el Editor de SPA de AEM, que asigna componentes de React a componentes de AEM. El SPA completado, implementado en AEM, se puede crear dinámicamente con las herramientas de edición en línea tradicionales de AEM.

Implementación de WKND SPA

Acerca de

El objetivo de este tutorial de varias partes es enseñar a los desarrolladores cómo implementar una aplicación React para trabajar con la función Editor de SPA de AEM. En un escenario real, las actividades de desarrollo se desglosan por persona, con frecuencia involucrando a un desarrollador de Front End y a un desarrollador de Back End. Creemos que es beneficioso para cualquier desarrollador que esté involucrado en un proyecto del Editor de SPA de AEM completar este tutorial.

El tutorial está diseñado para funcionar con AEM as a Cloud Service y es compatible con AEM 6.5.4+ y AEM 6.4.8+. La SPA se implementa mediante:

• Tipo de archivo del proyecto AEM Maven
• Editor de SPA de AEM
• Componentes principales
• React JS
• Crear aplicación React

Calcule entre 1 y 2 horas para pasar por cada parte del tutorial.

Último código

Todo el código del tutorial se encuentra en GitHub.

El código base más reciente está disponible como paquetes AEM descargables.

Requisitos previos

Antes de iniciar este tutorial, necesita lo siguiente:

• Un conocimiento básico de HTML, CSS y JavaScript
• Familiaridad básica con React
• SDK de AEM as a Cloud Service, AEM 6.5.4+ o AEM 6.4.8+
• Java
• Apache Maven (3.3.9 o posterior)
• Node. jand npm

Aunque no es necesario, es beneficioso tener una comprensión básica del desarrollo de los componentes tradicionales de AEM Sites.

Entorno de desarrollo local

Se necesita un entorno de desarrollo local para completar este tutorial. Las capturas de pantalla y el vídeo se capturan utilizando el SDK de AEM as a Cloud Service que se ejecuta en un entorno Mac OS con Visual Studio Code como IDE. Los comandos y el código deben ser independientes del sistema operativo local, a menos que se indique lo contrario.

Pasos siguientes

¡¿Qué estás esperando?! Inicie el tutorial navegando hasta el capítulo SPA Editor Project y aprenda a generar un proyecto habilitado para SPA Editor utilizando el tipo de archivo del proyecto AEM.

Compatibilidad con versiones anteriores

El código de proyecto de este tutorial se ha creado para AEM as a Cloud Service. Para que el código de proyecto sea compatible con versiones anteriores para 6.5.4+ y 6.4.8+ se han realizado varias modificaciones en los archivos POM del tutorial.

El UberJar v6.4.4 se ha incluido como una dependencia:

<!-- Adobe AEM 6.x Dependencies -->
<dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>uber-jar</artifactId>
    <version>6.4.4</version>
    <classifier>apis</classifier>
    <scope>provided</scope>
</dependency>

Se ha añadido un perfil Maven adicional, denominado classic, para modificar la compilación y dirigirla a los entornos AEM 6.x:

  <!-- AEM 6.x Profile to include Core Components-->
    <profile>
        <id>classic</id>
        <activation>
            <activeByDefault>false</activeByDefault>
        </activation>
        <build>
        ...
    </profile>

El perfil classic está deshabilitado de forma predeterminada. Si sigue el tutorial con AEM 6.x, añada el perfil classic siempre que se le indique que realice una compilación de Maven, es decir:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Al generar un nuevo proyecto para una implementación de AEM, utilice siempre la versión más reciente del Tipo de archivo del proyecto AEM y actualice el aemVersion para dirigirse a la versión deseada de AEM.