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 la fonction SPA Éditeur d’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 sera 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 d’

Le tutoriel est conçu pour fonctionner avec AEM en tant que Cloud Service et est rétrocompatible avec AEM 6.5.4+ et la version 6.4.8+.

Dernier code

Vous trouverez tout le code du tutoriel sur GitHub.

La dernière base de code est disponible en tant que packages d’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
  • Connaissance de base de React

Bien que cela ne soit pas nécessaire, il est préférable de posséder une compréhension de base du 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 la vidéo sont capturées à l’aide de AEM as a Cloud Service SDK 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 au chapitre Créer un projet et apprenez à générer un projet activé pour l’éditeur de SPA à l’aide de l’archétype de projet AEM.

Sur cette page