Erstellen Ihrer ersten React-SPA in AEM overview

[Zum Veröffentlichen aus AEM Sites unter Verwendung der Edge Delivery Services klicken Sie hier.]{class="badge positive" title="Veröffentlichen aus AEM mit Edge Delivery Services"}

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:

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

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.