Erstellen Ihrer ersten React-SPA in AEM overview
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 local-dev-environment
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
Nächste Schritte next-steps
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.