Erstellen Ihrer ersten React-SPA in AEM

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.

Endgültige SPA implementiert

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

HINWEIS

Nä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.

Auf dieser Seite