Erstellen Ihrer ersten React-SPA in AEM
Zum Veröffentlichen aus AEM Sites unter Verwendung der Edge Delivery Services klicken Sie hier.
Willkommen zu diesem mehrteiligen Tutorial. Es richtet sich an Entwicklerinnen und Entwickler, die die Funktion SPA-Editor von Adobe Experience Manager (AEM) noch nicht verwendet haben. Dieses mehrteilige Tutorial führt Sie durch die Implementierung einer React-App für eine fiktive Lifestyle-Marke namens WKND. Die React-App wurde für die Bereitstellung mit dem SPA-Editor von AEM entwickelt, der React-Komponenten AEM-Komponenten zuordnet. Die fertiggestellte SPA wird in AEM bereitgestellt und kann mit herkömmlichen Inline-Bearbeitungswerkzeugen von AEM dynamisch bearbeitet werden.
SPA-Implementierung von WKND
Info
Das Tutorial wurde für die Verwendung mit AEM as a Cloud Service entwickelt und ist abwärtskompatibel mit AEM 6.5.4+ und AEM 6.4.8+.
Neuester Code
Den gesamten Tutorial-Code finden Sie auf GitHub.
Die aktuelle Code-Basis ist in Form von herunterladbaren AEM-Paketen verfügbar.
Voraussetzungen
Bevor Sie mit diesem Tutorial beginnen, benötigen Sie Folgendes:
- Grundlegende Kenntnisse von HTML, CSS und JavaScript
- Grundlegende Vertrautheit mit React
Es ist zwar nicht erforderlich, jedoch von Vorteil, über ein grundlegendes Verständnis von der Entwicklung herkömmlicher AEM Sites-Komponenten zu verfügen.
Lokale Entwicklungsumgebung
Für die Durchführung dieses Tutorials ist eine lokale Entwicklungsumgebung erforderlich. Screenshots und Videos werden mit dem AEM as a Cloud Service-SDK erfasst, das in einer macOS-Umgebung mit Visual Studio Code als IDE ausgeführt wird. Befehle und Code sollten unabhängig vom lokalen Betriebssystem sein, sofern nicht anders angegeben.
Erforderliche Software
- AEM as a Cloud Service-SDK, AEM 6.5.4+ oder AEM 6.4.8+
- Java
- Apache Maven (3.3.9 oder höher)
- Node.js und npm
NOTENächste Schritte
Keine Zeit verlieren! Starten Sie das Tutorial, indem Sie zum Kapitel Projekt erstellen gehen, und erfahren Sie, wie Sie ein Projekt mit aktiviertem SPA-Editor mithilfe des AEM-Projekt-Archetyps erstellen.
