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 の従来のインライン編集ツールを使用して動的にオーサリングすることができます。

SPA の最終的な実装

WKND SPA の実装

概要

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

最新のコード

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

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

前提条件

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

  • HTML、CSS および JavaScript の基礎知識
  • React の基本的な知識

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

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

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

必要なソフトウェア

NOTE
AEM as a Cloud Service を初めて使用する場合は、AEM as a Cloud Service SDK を使用してローカル開発環境をセットアップするためのガイドを確認してください。
AEM 6.5 を初めて使用する場合は、ローカル開発環境のセットアップに関するガイドを参照してください。

次の手順 next-steps

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

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