Criar o seu primeiro SPA React no AEM overview

[Para publicar do AEM Sites usando o Edge Delivery Services, clique aqui.]{class="badge positive" title="Publish de AEM para Edge Delivery Services"}

Bem-vindo a um tutorial em várias partes projetado para desenvolvedores novos no editor de SPA 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 é desenvolvido e projetado para ser implantado com o editor SPA do AEM, que mapeia componentes do React para componentes do AEM. O SPA completo, implantado no AEM, pode ser criado dinamicamente com as ferramentas tradicionais de edição em linha do AEM.

SPA Final Implementado

Implementação WKND do SPA

Sobre

O tutorial foi projetado para funcionar com o AEM as a Cloud Service e tem compatibilidade retroativa com o AEM 6.5.4+ e o AEM 6.4.8+.

Código mais recente

Todo o código do tutorial pode ser encontrado no GitHub.

A base de código mais recente está disponível como Pacotes AEM baixáveis.

Pré-requisitos

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

  • Conhecimento básico do 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 tradicionais do AEM Sites.

Ambiente de desenvolvimento local local-dev-environment

Um ambiente de desenvolvimento local é necessário para concluir este tutorial. Capturas de tela e vídeos são capturados usando o SDK do AEM as a Cloud Service em execução em um ambiente de sistema operacional Mac com o Visual Studio Code como o IDE. Os comandos e o código devem ser independentes do sistema operacional local, a menos que indicado de outra forma.

Software necessário

Próximas etapas next-steps

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.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4