Skapa din första SPA i AEM overview

[Klicka här om du vill publicera från AEM Sites med Edge Delivery Services.]{class="badge positive" title="Publicera från AEM till Edge Delivery Services"}

Välkommen till en självstudiekurs i flera delar som är utformad för utvecklare som inte använt SPA i Adobe Experience Manager (AEM). Den här självstudiekursen går igenom implementeringen av en React-applikation för ett fiktivt livsstilsmärke, WKND. Appen React har utvecklats och utformats för att användas med AEM SPA Editor, som mappar React-komponenter till AEM komponenter. Den färdiga SPA, som används för AEM, kan redigeras dynamiskt med AEM traditionella textbundna redigeringsverktyg.

Slutlig SPA implementerad

WKND-SPA

Om

Självstudiekursen är utformad för att fungera med AEM as a Cloud Service och är bakåtkompatibel med AEM 6.5.4+ och AEM 6.4.8+.

Senaste kod

All självstudiekod finns på GitHub.

The senaste kodbas finns som hämtningsbara AEM.

Förutsättningar

Innan du startar den här självstudiekursen behöver du följande:

  • Grundläggande kunskaper i HTML, CSS och JavaScript
  • Grundläggande kunskap om Reagera

Även om det inte är nödvändigt är det bra att ha en grundläggande förståelse för utveckla traditionella AEM Sites-komponenter.

Lokal utvecklingsmiljö local-dev-environment

En lokal utvecklingsmiljö krävs för att slutföra den här självstudiekursen. Skärmbilder och video hämtas med AEM as a Cloud Service SDK som körs i en Mac OS-miljö med Visual Studio Code som IDE. Kommandon och kod ska vara oberoende av det lokala operativsystemet, om inget annat anges.

Nödvändig programvara

NOTE
Är du inte AEM as a Cloud Service? Kolla in följa guiden för att konfigurera en lokal utvecklingsmiljö med AEM as a Cloud Service SDK.
Har du inte använt AEM 6.5 tidigare? Kolla in följa guiden för att konfigurera en lokal utvecklingsmiljö.

Nästa steg next-steps

Vad väntar du på?! Starta självstudiekursen genom att gå till Skapa projekt och lär dig hur du skapar ett projekt som SPA redigeraren har aktiverat med hjälp av AEM Project Archetype.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4