JAMstack 和 React 電子商務完整指南

Contents

掌握下一代全端架構：使用 React、Gatsby 和 Strapi 實現最佳速度、安全性和可擴展性。

從這 79 小時的課程，你會學到

創建尖端的全端應用程式，同時使用 JAMstack 增強你的開發人員體驗
實施具有實時庫存、最愛收藏夾、評論和訂閱的綜合電子商務架構
使用我們的靜態站點生成器 Gatsby 簡化性能、安全性和可訪問性，並以程式編輯的方式創建頁面
使用我們的無頭 CMS Strapi 輕鬆管理內容並通過 API 自動提供內容，從而大大簡化後端開發
使用由 Stripe 提供支持的完全客製化的購物車和結帳系統為客戶提供服務，允許用戶保存付款方式並訪問訂單歷史記錄
將 JWT 身份驗證工作流程整合到註冊/登錄、忘記/重置密碼，並與社交媒體整合
通過使用功能組件、React Hooks 和 React Context API 採用現代 React 最佳實踐
利用 GraphQL 的強大功能以及 Strapi 和 Gatsby 兩者的原生支持與後端資料無縫互動
將我們的專案從開發部署到 AWS 和 Netlify 上的實時生產應用程式
通過使用 react-spring 和 react-lottie 添加動畫，為你的應用程式注入活力
通過搜索引擎優化 (SEO) 和強大的自動圖像優化擴大你的覆蓋範圍並提高性能
從龐大的組件程式庫中訪問組件，應用強大的 JSS 樣式解決方案，將常用樣式整合到主題中，並通過響應式設計根據螢幕大小調整樣式和佈局 – 所有這些都使用 Material-UI

要求

JavaScript 基礎知識
React 基礎知識（組件、道具、狀態）

課程說明

準備好跟著任何線上課程建構最現代、最全面、功能最豐富的全端電子商務平台！在本課程結束時，你將完全有信心自己構建具有複雜功能的大型應用程式。

超過 475 節課的內容超過 75 小時，這是一個完整的全端大師班！我將向你介紹有關基於下一代 JAMstack 架構，從頭開始建構功能強大的全端應用程式的所有知識。

JAMstack 是 Web 應用程式架構演進的下一步。它解決了傳統全端應用程式的許多限制和挫折。與傳統堆棧不同，JAMstack 不是特地組的特定工具，例如 MERN。相反，JAMstack 是一組概念，是如何構建現代全端應用程式以增強性能、安全性和可擴展性同時顯著改善開發人員體驗的理念。這意味著給我們的用戶更好的軟體，且讓自己能更輕鬆寫程式碼。

也就是有許多使用不同的工具集的 JAMstack 。對於我們的 JAMstack，我們將使用 React 與 Gatsby、Material-UI、Strapi、Stripe 和 Netlify。我們將使用這些工具創建一個生產就緒的電子商務平台，該平台比任何其他線上課程上所說的都更全面、功能更豐富！我們的專案包括你可以想像的關於在線銷售產品的所有內容，例如將產品分類、應用自定義排序和過濾、留下評論、將產品添加到最愛收藏夾列表以及訂閱以定期交付產品！為了啟用所有這些強大的功能，我們將整合一個完整的身份驗證系統，包括登錄/註冊、忘記/重置密碼和社交媒體身份驗證。這還將包括建立一個用戶設置頁面，允許用戶更改他們的密碼以及任何存儲的運輸或付款資訊。然後我們只需要構建我們完全自訂的購物車和結帳流程，讓我們的客戶實際使用他們的信用卡進行購買，並在他們的電子郵件中接收收據。

這是一個龐大的專案，它將指導你完成將複雜功能分解為可管理的分步行動計劃的過程。你將學會思考大型專案以及如何做出以後簡化系統的架構決策。即使本課程專注於電子商務，你將學會所有的基礎概念，轉用到每個全端專案。

JAMstack 的核心原則之一是只提供靜態生成的檔案。傳統上，在 React 中，就像 create-react-app 一樣，託管專案的伺服器會發送 JavaScript 包給客戶端瀏覽器處理和呈現。我們將使用靜態站點生成器 Gatsby 來扭轉這個過程。 Gatsby 將獲取我們的 React 程式碼並為我們生成生成的靜態 HTML 檔，這些檔可以直接提供給我們的用戶，以獲得閃電般的性能和更高的安全性。 Gatsby 是一個非常強大和廣泛的系統，具有非常有用的功能，例如程序化頁面創建、自動可訪問性增強和強大的圖像優化。

我們將看到 Material-UI 如何最大化我們的生產力，並降低使用 React 構建令人難以置信的界面的複雜性。我們將通過使用其龐大的組件程式庫（包含大多數 Web 應用程式中的所有常見元素）來減少樣板( boilerplate ) 並開始更快地工作。然後，我們可以使用 Material-UI 的樣式系統將我們的設計變為現實，以完全地自訂那些組件和其用來調整常用樣式的主題系統。幫助我們展示我們的辛勤工作的是在螢幕上始終如一地安排我們的組件的佈局系統。最後，響應式設計系統確保我們的設計在最大的螢幕到最小的行動設備上看起來都很完美。 Material-UI 擁有我們使用 JAMstack 構建令人驚嘆的前端所需的一切。

Strapi 是後端開發的未來。 Strapi 是一個無頭 CMS，它單槍匹馬地徹底改變並簡化了所有後端流程。無頭 CMS 還將 JAMstack 站點中的後端與前端分離，這更加靈活和可維護。 Strapi 為我們提供了一個非常簡單的用戶界面來管理我們的後端內容和資料，然後使用基於 JWT 的整合身份驗證系統自動創建 API，該系統具有與該內容互動的角色和權限。在傳統的全端架構中，創建資料庫模型來表示你的內容、輸入所有資料、創建 API 以提供該內容，以及為這些 API 配置安全和身份驗證都是完全獨立的任務，需要數天甚至數週才能完成。如果你從未做過全端或後端開發，我很難讓你真正了解這些任務的複雜性！大多數全端課程會讓你手動完成所有這些過程，因為至今為止還沒看到其他方法！

多虧了 Strapi，所有繁瑣且重複的程式碼都將立即自動化。但是，對於需要更進階配置的專案，所有底層資料庫模型都是完整且可訂製的。 Strapi 支持大多數主要資料庫，但我們將在本課程中使用 MongoDB，儘管由於 Strapi 的抽象 (abstractions )，這並沒有太大的區別。 Strapi 也是開源的，並且使用 React 構建，因此它是完全可訂製和可擴展的。 Strapi 是 JAMstack 上最好的無頭 CMS！

Stripe 是領先的在線商家支付處理器之一，並被 Lyft、Shopify 和 Zoom 等科技巨頭使用。 Stripe 是最靈活、最強大的支付 API 之一，具有廣泛而詳盡的文件。使用 Stripe Elements，你可以在幾秒鐘內設置一個安全的信用卡字段，Stripe PaymentIntents API 支持我們完全自定義的結帳流程來完成訂單。使用 Stripe 可以實現安全保存客戶付款資訊以供將來使用和跟蹤訂單歷史記錄等功能。

一旦我們的專案建成後，我們會將其部署為 Netlify 上的實時生產網站。 Netlify 毫無疑問是 JAMstack 網站的最佳託管平台。他們的首席執行官兼聯合創始人 Mathias Biilmann 實際上創造了這個詞！這意味著 Netlify 專門針對 JAMstack 站點進行了優化，通過自動應用我們的 JAMstack 最佳實踐（如原子部署、快取失效、使用 CDN 和基於 git 的 CI/CD）來提供尖端的性能、安全性和可擴展性。

我們還將涵蓋額外的主題，例如 React 中的 SEO、React Hooks、React 上下文、使用動畫創建流暢且引人入勝的界面、分頁、webhook、查詢字符串、表格資料、表單處理等等！

課程內容包括：