Erstellen Ihres ersten React-SPA-Projekts in AEM

Willkommen bei einem mehrteiligen Tutorial, das für Entwickler entwickelt wurde, die mit der Funktion SPA Editor in Adobe Experience Manager (AEM) neu sind. Dieses Tutorial führt Sie durch die Implementierung einer React-Anwendung für eine fiktive Lifestyle-Marke, die WKND. Die React-App wird für die Bereitstellung mit AEM SPA Editor entwickelt, der React-Komponenten AEM Komponenten zuordnet. Die abgeschlossene SPA, die in AEM bereitgestellt wird, kann mit herkömmlichen In-line-Bearbeitungswerkzeugen von AEM dynamisch erstellt werden.

Endgültige SPA implementiert

WKND SPA Implementierung

Info

Das Tutorial wurde für die Verwendung mit AEM als Cloud Service entwickelt und ist rückwärtskompatibel mit AEM 6.5.4+ und AEM 6.4.8+.

Neuester Code

Den gesamten Tutorial-Code finden Sie unter GitHub.

Die neueste Codebasis ist als herunterladbare AEM verfügbar.

Voraussetzungen

Bevor Sie mit diesem Tutorial beginnen, benötigen Sie Folgendes:

  • Grundlegendes zu HTML, CSS und JavaScript
  • Grundlegende Vertrautheit mit React

Obwohl dies nicht erforderlich ist, ist es von Vorteil, über ein grundlegendes Verständnis für die Entwicklung herkömmlicher AEM Sites-Komponenten zu verfügen.

Lokale Entwicklungsumgebung

Zum Abschluss dieses Tutorials ist eine lokale Entwicklungsumgebung erforderlich. Screenshots und Videos werden mit dem AEM as a Cloud Service SDK erfasst, das in einer Mac OS-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

Worauf wartest du?! Beginnen Sie das Tutorial, indem Sie zum Kapitel Projekt erstellen navigieren und erfahren Sie, wie Sie ein Projekt mit aktiviertem SPA-Editor mithilfe des Projektarchetyps AEM erstellen.

Auf dieser Seite