Crea il tuo primo SPA React in AEM

Ti diamo il benvenuto in un tutorial in più parti progettato per gli sviluppatori che non hanno mai utilizzato la funzione SPA Editor in Adobe Experience Manager (AEM). Questo tutorial illustra l’implementazione di un’applicazione React per un brand di lifestyle fittizio, il WKND. L’app React verrà sviluppata e progettata per essere implementata con AEM Editor, che mappa i componenti React su AEM componenti. Il SPA completato, distribuito a AEM, può essere creato dinamicamente con i tradizionali strumenti di modifica in linea di AEM.

SPA finale implementato

Implementazione SPA WKND

Informazioni su

L'esercitazione è progettata per funzionare con AEM come Cloud Service ed è retrocompatibile con AEM 6.5.4+ e AEM 6.4.8+.

Codice più recente

Tutto il codice dell'esercitazione si trova su GitHub.

La base di codice più recente è disponibile come pacchetti AEM scaricabili.

Prerequisiti

Prima di avviare questa esercitazione, è necessario quanto segue:

  • Conoscenza di base di HTML, CSS e JavaScript
  • familiarità di base con React

Sebbene non sia necessario, è utile avere una comprensione di base dello sviluppo di componenti AEM Sites tradizionali.

Ambiente di sviluppo locale

Per completare questa esercitazione, è necessario un ambiente di sviluppo locale. Le schermate e i video vengono acquisiti utilizzando l'SDK di Cloud Service AEM in esecuzione in un ambiente Mac OS con Visual Studio Code come IDE. I comandi e il codice devono essere indipendenti dal sistema operativo locale, salvo diversa indicazione.

Software richiesto

NOTA

Ti avvicini adesso ad AEM as a Cloud Service? Consulta la seguente guida per configurare un ambiente di sviluppo locale utilizzando SDK di AEM as a Cloud Service.

Nuovo a AEM 6.5? Consulta la seguente guida per configurare un ambiente di sviluppo locale.

Passaggi successivi

Cosa stai aspettando?! Avvia l'esercitazione andando al capitolo Crea progetto e scopri come generare un progetto abilitato per l'editor di SPA utilizzando AEM Project Archetype.

In questa pagina