在AEM中建立您的第一個React SPA overview
歡迎使用專為 Adobe Experience Manager (AEM) 中 SPA Editor 功能的新手開發人員設計的多部分教學課程。此教學課程會逐步引導您為虛擬生活風格品牌WKND實作React應用程式。 React應用程式是使用AEM SPA Editor開發並設計而成的,該編輯器會將React元件對應至AEM元件。 部署至 AEM 的完成 SPA 即可使用 AEM 傳統的內嵌編輯工具動態製作。
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
本機開發環境是完成此教學課程不可或缺的條件。螢幕截圖和影片都是使用在 Mac OS 環境上執行的 AEM as a Cloud Service SDK 擷取,並將 Visual Studio Code 當做 IDE 使用。除非另有註明,否則命令和程式碼應不受本機作業系統的限制。
必要的軟體
- AEM as a Cloud Service SDK、AEM 6.5.4+ 或 AEM 6.4.8+
- Java
- Apache Maven (3.3.9 或更新版本)
- Node.js 和 npm
NOTE
AEM as a Cloud Service 的新手嗎? 請參閱以下指南以使用 AEM as a Cloud Service SDK 設定本機開發環境。
AEM 6.5 的新手嗎? 請參閱以下指南以設定本機開發環境。
後續步驟 next-steps
您還在等什麼?!導覽至建立專案章節,開始進行教學課程,並瞭解如何使用SPA專案原型產生啟用AEM編輯器的專案。
recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4