React 比薩線上商店-使用 React Hooks 和 Firebase 建立一個可以線上訂購食物的網站

Contents

使用 React Hooks，Firebase 和樣式化元件( Styled-components )建立一個美味的線上餐廳訂購網頁應用程式

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

使用 React Hooks 的最新 React 開發技術: useState，useEffect 和你自己的客製化 hooks
建立一個完整的比薩訂購網頁應用程式，可定製餐廳訂單和寄電子郵件給使用者
從頭開始使用 Food Grids 建立漂亮的 UI 開發，彈出對話方塊，按鈕，輸入控制元件和更多
樣式化元件: 最熱門的 CSS-in-JS 程式庫，具有 CSS 動畫和可擴充元件樣式
透過 Google 認證讓使用者登入和登出
Firebase 即時資料庫: 使用 Google 的無伺服器資料庫平台上儲存比薩訂單
Firebase 函式和 Nodemailer: 透過電子郵件向用戶傳送訂單來回應訂單成立
電子商務模式: 新增，刪除和編輯訂單，計算稅和動態食品項目的總額
網站託管: 通過 Firebase 託管在網上部署你的應用程式

要求

本課程屬於專業等級，建議初學者熟悉 React 和 web 開發，但是整個專案是從頭開始建立的，所以也鼓勵 Web 初學者嘗試

課程說明

歡迎來到 React Pizza Shop。下面是我們將要構建的: 一個帶有多種食物類別和可編輯的彈出對話方塊的披薩訂購系統，可以根據選單中的美味食物客製化你的訂單。我們將通過各種客製化 React Hooks 增加互動性。在通過 Google 賬戶認證後，我們將向 Firebase 及時資料庫傳送訂單，一個無伺服器的 Firebase 函式將向你的使用者傳送一封電子郵件，確認他們的訂單。

本課程是為中級的 React 開發人員準備的，他們正在尋找一個有趣的專案來練習 React Hooks 和 / 或學習 Firebase。本課程提供了完整的原始碼。如果你在整個課程中有任何問題，不要猶豫，儘管提出來。

以下是這個5個多小時的課程的一些特色:

使用 Hooks 的 React
- useState, useEffect
- 構建客製化的 hooks 來控制輸入元素、身份驗證、對話方塊等等
漂亮的使用者介面開發
- 樣式化元件( Styled-components )
- 彈出式對話方塊
- 按鈕，輸入，複選框
- 新增庫存照片
Flexbox 和 CSS 網格
CSS 動畫
Google 字型
create-react-app 程式樣板
- 從零開始
- 為營運來建立應用程式
Firebase
- 使用 Hosting 功能部署你的網站
- 使用 Google 對使用者進行身份驗證，登入和登出
- 跟蹤食物訂單的即時資料庫
- 回應訂單的函式
電子商務訂單
- 新增，刪除編輯訂單
- 計算稅款和訂單總額
- 動態食物項目
透過 Node.js 和 Nodemailer 傳送訂單資訊給用戶
應用程式圖示