Crie seu primeiro SPA React em AEM

Bem-vindo a um tutorial de várias partes criado para desenvolvedores novos no recurso SPA Editor no Adobe Experience Manager (AEM). Este tutorial aborda a implementação de um aplicativo React para uma marca fictícia de estilo de vida, a WKND. O aplicativo React será desenvolvido e projetado para ser implantado com AEM Editor de SPA, que mapeia os componentes React para AEM componentes. O SPA concluído, implantado em AEM, pode ser criado dinamicamente com as ferramentas tradicionais de edição em linha do AEM.

SPA Final Implementado

Implementação de SPA WKND

Sobre

O tutorial foi projetado para funcionar com AEM como um Cloud Service e é compatível com versões anteriores com AEM 6.5.4+ e AEM 6.4.8+.

Código mais recente

Todo o código tutorial pode ser encontrado em GitHub.

O base de código mais recente está disponível como Pacotes de AEM para download.

Pré-requisitos

Antes de iniciar este tutorial, você precisará do seguinte:

  • Um conhecimento básico de HTML, CSS e JavaScript
  • Familiaridade básica com React

Embora não seja obrigatório, é benéfico ter uma compreensão básica do desenvolvimento de componentes AEM Sites tradicionais.

Ambiente de desenvolvimento local

Um ambiente de desenvolvimento local é necessário para concluir este tutorial. Capturas de tela e vídeo são capturados usando o AEM como um Cloud Service SDK em execução em um ambiente Mac OS com o Visual Studio Code como o IDE. Os comandos e o código devem ser independentes do sistema operacional local, salvo indicação em contrário.

Software necessário

OBSERVAÇÃO

Novo no AEM as a Cloud Service? Consulte o guia a seguir para configurar um ambiente de desenvolvimento local usando o SDK do AEM as a Cloud Service.

Novo no AEM 6.5? Consulte o guia a seguir para configurar um ambiente de desenvolvimento local.

Próximas etapas

O que você está esperando?! Inicie o tutorial navegando até o capítulo Criar projeto e saiba como gerar um projeto habilitado para o Editor de SPA usando o Arquétipo de projeto AEM.

Nesta página