無痛玩轉 React Hook｜6 小時打造流量時代超夯的一頁式電商

從開發「一頁式電商」中學習 React Hook !

幫你一一破解 React Hook 常見的學習痛點

# 別人踩過的坑，您不必再踩，縮短學習的辛苦歷程

痛點 1：只知道 React Hook 很好用，但對於其運作邏輯不太清楚

💡 藉由大量實作解建構底層觀念

痛點 2：對 React Hook 使用上沒太大問題，但對於選用 useState 及 useReducer 有選擇障礙

💡 課程中一個一個 hook 依序介紹來掌握適用情境

痛點 3：React 之前是用 class component 寫法，現在多了 hook，有什麼差別？

💡 課程第 3 章「Class Component 怎麼做？」將告訴你 2 種寫法比較，以及 class component 如何抽象化及不足之處，幫助你梳理想法

我已經會 React，該用 React Hook 嗎？它有什麼優勢？

•  程式碼輕鬆再利用 ：摘除原本 class component 寫法，讓程式結構更乾淨
•  更接近 JS 原生寫法 ：學習曲線較緩，每一個Hook都是一個函數，因此它的寫法十分簡單，而且開發者更容易理解，能有效提高開發速度
•  更高階的解構及重整 ：純函式易於大型程式的 side effect 管理
•  容易擴展 ：Hook具有很高的可擴展性，你可以通過自定義Hook來擴展某個Hook的功能

從基礎打底到實戰 !建構完整 React Hook 知識體系

• 介紹三種 class component 抽象化方法
• 概念層次介紹 hook 如何在解決上面三種方式的缺點

• 從頭開始學習各種 React hook
  • useState - 元件內部狀態管理
  • useEffect - 生命週期全剖析
  • useContext - 更彈性的狀況傳遞
  • useReducer - 更模組化的狀態管
  • useCallback、useMemo - 效能優化好幫手
  • useRef - 跳出 life cycle 的資料存取
  • useImperativeHandle - 更便捷的子元件資源取用
  • useLayoutEffect - 監看 DOM 的變化
• 了解何時該使用 React Hook

• 試著在一個已經完成的專案內思考 React hook 的使用及情境
• 實作具有「首頁、商品清單、我的最愛」等功能的一頁式網站

搶先學！寫法比較－class component 如何抽象化及不足之處

快問快答

1. 一定要懂 React 才能上這門課嗎？

React Hook 對現在使用 React 的開發者來說是很重要的技術，建議您具備基本撰寫 React 的能力。如果您對 React 並不太熟悉，建議根據第二章補足一下背景！

2. 我沒有程式基礎，適合上這堂課程嗎？

需要有基本的 HTML、CSS、JavaScript 基礎（如建立函式、撰寫 if 判斷式、for 迴圈等等）再加入課程會比較能跟上教學內容喔！

關於 Sam 老師

RevtelTech 共同創辦人，目前主要負責技術諮詢及佈局。臺大資訊研究所畢業，開發經驗超過 10 年。跨足嵌入式系統、網頁、雲端及 App 開發，曾參與和開發超過 20 個以上 React Native 專案 (包含教育、電商、金融、醫療、展覽及物流等各大領域)，其中包含獨角獸等級企業百萬下載海外電商雙平台 App。亦曾受邀至 yourator 等徵才平台分享 React Native 開發經驗。曾培養非本科系學員，成為軟體工程師。對事物有敏銳觀察，認為程式不只是「教」，應該還包含「自學能力」的養成。