Créer votre première SPA React dans AEM overview

[Pour publier à partir d’AEM Sites à l’aide d’Edge Delivery Services, cliquez ici.]{class="badge positive" title="Publier à partir d’AEM vers Edge Delivery Services"}

Bienvenue dans un tutoriel en plusieurs parties conçu pour les développeurs et développeuses qui découvrent l’éditeur de SPA dans Adobe Experience Manager (AEM). Ce tutoriel présente l’implémentation d’une application React pour une marque fictive de style de vie, WKND. L’application React est développée et conçue pour être déployée avec l’éditeur de SPA d’AEM, 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’AEM.

SPA finale implémentée.

Implémentation de la 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.

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

Prérequis

Avant de commencer ce tutoriel, il vous faut :

  • Des connaissances de base en HTML, CSS et JavaScript
  • Des connaissance de base de React

Bien que cela ne soit pas obligatoire, il est préférable de comprendre les bases du développement des composants traditionnels d’AEM Sites.

Environnement de développement local local-dev-environment

Pour suivre ce tutoriel, un environnement de développement local est nécessaire. Les captures d’écran et les vidéos sont enregistrées à l’aide du SDK AEM as a Cloud Service exécuté dans un environnement macOS avec Visual Studio Code comme IDE. Sauf indication contraire, les commandes et le code doivent être indépendants du système d’exploitation local.

Logiciels requis

Étapes suivantes next-steps

Qu’attendez-vous ? Démarrez le tutoriel en accédant au chapitre Créer un projet et découvrez comment générer un projet activé pour l’éditeur de SPA à l’aide de l’archétype de projet d’AEM.

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