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 傳送訂單資訊給用戶
- 應用程式圖示
目標受眾
- 想要尋找一個學習 React 和網頁開發的中級到高階水平專業課程的人
講師簡介
react.school _ 增強的 JavaScript 專案 ( 更多講師主講課程介紹 )
開始工作吧。 我們相信以專案為中心的 web 開發是為軟體開發職涯做準備的最好方式。 我們的課程給你一個 React 開發人員的日常職責的核心洞見。
React 就是未來。 在一項超過20000名開發人員參與的調查中,《 JavaScript 2018 現況》發現,65% 的開發人員”曾經使用過 React 並且願意再次使用它”,這一數字在2017年為58% 。
我們是首席軟體工程師,擁有幾十年在部署和維護 web 應用程式的經驗。 我們在專案中使用 React,提供高效能的資料視覺化應用程式,高階的單網頁應用程式,以及所有的使用者介面給客戶。
我們提供優質的軟體專案建立實際的職涯工作流程,具有專門的支援和完整的原始碼參考。
英文字幕:有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
- 點選這個✨優惠連結✨ 課程特價 | Udemy 永久擁有課程 NT390 起( 在電腦瀏覽器登入,點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得 )
- Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
- 手機上點選優惠連結看到的價格比電腦上看到的貴
- $代表當地貨幣, 如在台灣為 NT
- 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現
報名參加課程
也許你會有興趣
- 2023 完整的 React 開發者課程 (包含 Redux,Hooks,GraphQL)
- 更多 React 線上課程介紹
- ★英語學習地圖 – 練好英文是最大的學習槓桿
- 如何找工作學習地圖 – 找工作不要靠運氣!
- 歡迎加入 Soft & Share 特價 Facebook 社團