在AEM中建立第一個React SPA

歡迎使用專為 Adobe Experience Manager (AEM) 中 SPA Editor 功能的新手開發人員設計的多部分教學課程。本教學課程將逐步說明虛擬生活風格品牌WKND的React應用程式實作。 React應用程式經過開發並設計，可與AEM SPA Editor一起部署，後者會將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 元件有基本的了解也會有幫助。

本機開發環境

本機開發環境是完成此教學課程不可或缺的條件。螢幕截圖和影片都是使用在 Mac OS 環境上執行的 AEM as a Cloud Service SDK 擷取，並將 Visual Studio Code 當做 IDE 使用。除非另有註明，否則命令和程式碼應不受本機作業系統的限制。

所需軟體

注意

AEM as a Cloud Service 的新手嗎？ 請參閱以下指南以使用 AEM as a Cloud Service SDK 設定本機開發環境。

AEM 6.5 的新手嗎？ 請參閱以下指南以設定本機開發環境。

後續步驟

你在等什麼?!導覽至 建立專案 章節，並了解如何使用AEM專案原型產生已啟用SPA編輯器的專案。

本頁內容