Créer votre première SPA React dans AEM

Bienvenue dans un tutoriel en plusieurs parties conçu pour les développeurs qui découvrent le Éditeur de SPA dans Adobe Experience Manager (AEM). Ce tutoriel décrit la mise en oeuvre d’une application React pour une marque de style de vie fictive, WKND. L’application React est développée et conçue pour être déployée avec AEM SPA Editor, qui mappe les composants React aux composants d’AEM. Les SPA terminées, déployées sur AEM, peuvent être créées dynamiquement à l’aide des outils de modification en ligne traditionnels d’.

SPA finale implémentée

Implémentation SPA WKND

À propos

Le tutoriel est conçu pour fonctionner avec AEM as a Cloud Service et est rétrocompatible avec AEM 6.5.4+ et AEM 6.4.8+.

Dernier code

Vous trouverez tout le code du tutoriel sur GitHub.

Le base de code la plus récente est disponible sous forme de packages AEM téléchargeables.

Prérequis

Avant de commencer ce tutoriel, vous aurez besoin des éléments suivants :

  • Connaissances de base en HTML, CSS et JavaScript
  • Familiarité de base avec React

Bien qu’il ne soit pas nécessaire, il est préférable de posséder une compréhension élémentaire de la fonction développement des composants AEM Sites traditionnels.

Environnement de développement local

Un environnement de développement local est nécessaire pour terminer ce tutoriel. Les captures d’écran et les vidéos sont capturées à l’aide AEM SDK as a Cloud Service s’exécutant dans un environnement Mac OS avec Visual Studio Code comme IDE. Les commandes et le code doivent être indépendants du système d’exploitation local, sauf indication contraire.

Logiciels requis

REMARQUE

Étapes suivantes

Qu'attendez-vous?! Démarrez le tutoriel en accédant à la Créer un projet chapitres et découvrez comment générer un projet activé pour SPA Editor à l’aide d’AEM Project Archetype.

Sur cette page