AEM での React SPA の作成（チュートリアル） overview

[Edge 配信サービスを使用して AEM Sites から公開するには、こちらをクリックしてください。]{class="badge positive" title="AEM から Edge 配信サービスへの公開"}

Adobe Experience Manager（AEM）の SPA エディター ​機能を初めて使用する開発者向けに設計されたマルチパートチュートリアルへようこそ。このチュートリアルでは、架空のライフスタイルブランド WKND の React アプリケーションの実装について順を追って説明します。React アプリは、AEM の SPA エディターを使用してデプロイされるように開発および設計されています。このエディターは、React コンポーネントを AEM コンポーネントにマッピングします。AEM にデプロイされた完成した SPA は、AEM の従来のインライン編集ツールを使用して動的にオーサリングすることができます。

WKND SPA の実装

概要

このチュートリアルは、AEM as a Cloud Service で動作するように設計されており、AEM 6.5.4+ および AEM 6.4.8+ と下位互換性があります。

最新のコード

チュートリアルコードはすべて GitHub にあります。

この最新のコードベースは、ダウンロード可能な AEM パッケージとして入手できます。

前提条件

このチュートリアルを開始するにあたって、以下が必要です。

必須ではありませんが、従来の AEM Sites コンポーネントの開発に関する基本的な知識があると役に立ちます。

ローカル開発環境 local-dev-environment

このチュートリアルを完了するには、ローカル開発環境が必要です。スクリーンショットとビデオは、Visual Studio Code を IDE とする Mac OS 環境で動作する AEM as a Cloud Service SDK を使用してキャプチャされています。コマンドとコードは、特に明記されていない限り、ローカルオペレーティングシステムから独立している必要があります。

必要なソフトウェア

次の手順 next-steps

すぐに取りかかりましょう。プロジェクトの作成の章に移動してチュートリアルを開始し、AEM プロジェクトアーキタイプを使用して SPA エディター対応のプロジェクトを生成する方法を学びます。