Cree su primer SPA React en AEM

Le damos la bienvenida a un tutorial en varias partes diseñado para desarrolladores que utilicen la función SPA Editor de 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 AEM Editor SPA, que asigna componentes de React a componentes AEM. El SPA completado, implementado en AEM, se puede crear dinámicamente con herramientas de edición en línea tradicionales de AEM.

Implementación de WKND SPA

Acerca de

El tutorial está diseñado para funcionar con AEM como Cloud Service y es compatible con AEM 6.5.4+ y AEM 6.4.8+.

Ú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

Aunque no es necesario, resulta beneficioso tener una comprensión básica del desarrollo de 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 usando el SDK de AEM as a Cloud Service que se ejecuta en un entorno de 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.

Software necesario

• AEM como SDK de Cloud Service, AEM 6.5.4+ o AEM 6.4.8+
• Java
• Apache Maven (3.3.9 o posterior)
• Node. jand npm

Siguientes pasos

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