AEM での React SPA の作成(チュートリアル)

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

最終的なSPAの実装

WKND SPAの実装

について

このチュートリアルは、AEMをCloud Service​として使用するように設計されており、AEM 6.5.4+​および​AEM 6.4.8+​と後方互換性があります。

最新コード

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

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

前提条件

このチュートリアルを開始する前に、次が必要です。

  • HTML、CSS、JavaScriptに関する基本的な知識
  • Reactに対する基本的な知識

必須ではありませんが、従来のAEM Sitesコンポーネントの開発に関する基本的な 知識を持つことは有益です

ローカル開発環境

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

必要なソフトウェア

メモ

AEM as a Cloud Service は初めてですか? AEM as a Cloud ServiceSDKを使用したローカル開発環境のセットアップについては、次のガイドを参照してください

AEM 6.5を初めて使用する場合 次のガイドを参照し て、ローカル開発環境を設定します

次の手順

何を待ってる?!チュートリアルを開始するには、「プロジェクトの作成」の章に移動し、AEMプロジェクトアーキタイプを使用してSPA Editor対応プロジェクトを生成する方法を学びます。

このページ