fbpx

使用 React Hooks 和 GraphQL 建立一個即時應用程式

Contents

在一個完整的全端環境中建立一個真實世界的應用程式,掌握 React 中最新和最棒的功能,

報名參加課程更新 coupon code

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

  • 使用 React Hooks 和 GraphQL 建立實用、功能豐富的應用程式
  • 使用 React Hooks 管理真實應用程式中的狀態
  • 如何使用 React Hooks 和 GraphQL 建立全端的應用程式
  • 使用 React Hooks 整合 GraphQL 客戶端 / 伺服器端程式庫

要求

  • 對 React Hooks 的基本理解(例如,參加了我的 React Hooks 課程)
  • 熟悉 GraphQL

課程說明

想要使用 React Hooks 建立一個真實世界的全端( full-stack )應用程式? 只要看看這門課就知道了。

### 我們要建造什麼 ? ###

一個即時、全端的 React 應用程式,後端是 GraphQL Server (Apollo Server 2) ,使用雲端 MongoDB 資料庫(Mongo Atlas) ,使用 React Hooks 來管理我們的狀態(替換 Redux!) ,使用社群認證(Google OAuth2) ,使用 GraphQL 訂閱即時資料,使用 Cloudinary 上傳影像等等。

我們的應用程式將是一個名為 GeoPins 的即時地理定位應用程式,使用者可以在地圖上標出不同的位置,並即時與其他使用者分享自己的內容—- 分享圖片、對位置和地點的評論、透過在圖釘上新增評論與其他使用者互動,以及管理他們在地圖上建立的圖釘。

### 課程包括哪些概念? ###

  • 如何使用身份驗證建立一個強健的 GraphQL 伺服器(使用 Apollo Server 2)
  • 如何深入使用兩個 GraphQL 客戶端程式庫 — Apollo Client 和 GraphQL Request
  • 使用 useContext 和 useReducer Hooks 替換 Redux,用於全域性狀態管理
  • GraphQL 中的所有主要概念: 查詢、變更、訂閱、 TypeDefs、解析器、輸入等
  • 所有主要的 Hooks(useState、 useEffect、 useContext、 useReducer)
  • 建立客制化的 Hooks 以”hook”到應用程式的其它功能
  • 整合社群登入(Google OAuth)和 Apollo Server 2
  • 使用 GraphQL 訂閱及時顯示應用程式的變更
  • 使用 Cloudinary API 上傳動態影像
  • 使用雲端的 MongoDB (MongoDB Atlas)
  • 使用 Mongoose 建立模型、 CRUD 和搜尋操作以及分類
  • 使用 Material UI 元件庫和 Material UI 圖示製作有吸引力的應用程式
  • 使用 Material UI 和 “useMediaQuery” Hooks 做一個非常簡單的移動 / 響應設計
  • 使用 Mapbox API 和 ReactMapGL 開發令人驚歎的地圖應用程式
  • 使用瀏覽器地理定位 API 檢視使用者的當前位置
  • 使用 React Router v4 建立路由保護 / 保護路由
  • GraphQL / Apollo 中的基本身份驗證 / 授權概念
  • 伺服器和 React 客戶機上的錯誤處理
  • Async / await 函式以及大量的 ES6 / ES7概念
  • 還有更多!

目標受眾

  • 希望學習尖端開發工具和技術的React / JavaScript 開發人員
  • 希望建立完整的真實世界 JavaScript 應用程式的開發人員

講師簡介

Reed Barger  全端 Web 開發人員 ( 更多講師主講課程介紹 )

我是一個充滿熱情的網頁開發者,熱衷於學習和教授我所知道的東西。 我相信通過實踐學習,這種哲學在我教授的每一門課程中都有體現。 我喜歡探索新的網路技術,我的課程專注於給你在今日快速發展的行業中擁有優勢。

英文字幕:有

  • 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

報名參加課程更新 coupon code

Sponsored by Udemy

也許你會有興趣

找其它課程?試看看 Soft & Share 網站搜尋引擎

✍ 搜尋結果太多?可參考 Soft & Share 搜尋引擎使用技巧


追蹤 Soft & Share

幫我們個小忙!

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: