從 Hooks 開始，讓你的網頁 React 起來（iT邦幫忙鐵人賽系列書）

內容描述

---

內容簡介

本書內容改編自第 11 屆 iT 邦幫忙鐵人賽，Modern Web 組優選網路系列文章──《從 Hooks 開始，讓你的網頁 React 起來》。

☛ 第一本整合線下內容與線上社群的 React 實體書，再也不怕沒人解惑 (https://www.facebook.com/groups/274607427104369/)
☛ 從 Hooks 開始上手 React，大幅降低陡峭的 React 學習曲線
☛ 透過專案實作到最終發布上線，讓所有人都可以看到你的作品

Q：買書後碰到問題卻沒人問怎麼辦？
A：第一本同時整合線下文字與線上社群的 React 實體書籍，不只是一本書，更提供專業線上討論與協助，免除讀者在學習新技術上的焦慮與不安！

Q：沒學過 React 可以直接從 Hooks 開始嗎？
A：從 Hooks 開始入手 React，可大幅降低過去 React 陡峭的學習曲線！

Q：學過 React 語法卻不知如何實作成專案作品？
A：以專案實作帶你一步步熟悉 React 各種語法，並將作品發布至雲端，讓所有人都能共享使用！

專業推薦

如果你希望透過學習 React 這個目前業界非常流行的框架，來提升職涯發展潛力，那這本書再適合你不過！本書是 PJ 為你設計的一趟學習旅程。除了耐心指引你步驟之外，更會告訴你各種「為什麼」，讓你對 React 背後的邏輯與思維有充分瞭解。更重要的是，你將體會到，「學習」，其實可以很不一樣。
Bernard Chan | 陳治平
前 Yahoo! 亞太區產品總監、ALPHA Camp 校長

本書不是一本工具書，而是作者在腦中思考的過程，是一本教你思考的書，以邏輯思考的走向代替一般指令式的教學，這樣的內容才是正確的教學方式，學習到的並不只是技術，而是在實務過程中所累積下來的經驗。
Howard | 吳展瑋
台南「好想工作室」創辦人、台灣口罩地圖、動森揪團工具開發者

適用讀者

✎ 學過 JavaScript，想要開始上手前端框架的初學者
✎ 想要成為前端工程師的網頁開發求職者
✎ 用過 Vue 等其他前端框架，想要體驗 React 框架的開發者

本書的誕生主要源自於 iT 邦幫忙鐵人賽，筆者在學習的過程中受益非常多，因此決定將本書首刷版稅回饋iT邦幫忙鐵人賽，鼓勵台灣IT社群互助合作且彼此樂於分享的精神。

目錄大綱

---

01 React 中一定會用到的JavaScript 語法
1-1 統一開發環境- 註冊 CodePen 帳號
1-2 JavaScript 語法小測試與免費學習資源
1-3 樣板字面值（Template literals ／ Template strings）
1-4 箭頭函式（arrow functions）
1-5 解構賦值和物件屬性名稱縮寫
1-6 展開語法和其餘語法
1-7 模組的匯出與匯入
1-8 這些語法全都要會才能往下看嗎

02 React Hooks 起來：useState 與JSX 的使用
2-1 在沒有 React 以前…，用原生 JavaScript 做一個簡單的計數器
2-2 把 HTML 寫在 JavaScript 中！？— JSX 的概念
2-3 在 JSX 中帶入變數與表達式
2-4 將計數器改用 JSX 來寫
2-5 在 JSX 中套用 CSS 樣式
2-6 建立第一個 React 元件
2-7 與使用者互動 - React 中的事件處理
2-8 React 元件中的資料- useState 的使用
2-9 條件轉譯的使用
2-10 動態新增 CSS 樣式來隱藏 HTML 元素
2-11 事件處理器的重構
2-12 JSX 中迴圈的使用
2-13 JSX 元素只能有一個最外層元素
2-14 React Hooks 不可這麼用

03 React 元件間的資料傳遞：props 的應用
3-1 網速傻傻分不清楚 Mbps? MB/s? 來寫個單位換算器吧
3-2 使用 Create React App 工具建立專案
3-3 建立網速單位轉換器的 UI
3-4 React 中表單的基本應用
3-5 React 元件的拆分
3-6 React 元件間的資料傳遞
3-7 子層元件如何修改父層元件的資料狀態
3-8 使用 React FontAwesome

04 在 JavaScript 中撰寫 CSS 樣式
4-1 「台灣好天氣」 App 專案說明
4-2 認識專案資料夾結構與檔案下載
4-3 用 JavaScript 寫 CSS!? CSS in JS 的使用
4-4 使用 emotion 完成「台灣好天氣」 UI
4-5 為深色主題做準備 - 將 props 傳入 styled components 中
4-6 使用 emotion 實作深色主題
4-7 快速了解各元件的資料狀態 - React Developer Tools

05 串接 API：useEffect 與 useCallback
5-1 申請使用中央氣象局 API
5-2 將天氣資料呈現於畫面中 - useState 的使用
5-3 使用 fetch 拉取天氣觀測資料
5-4 頁面載入時就去請求資料 - useEffect 的基本使用
5-5 實作資料載入中的狀態
5-6 搭配 useEffect 拉取多支 API 回傳的資料
5-7 讓拉取 API 的函式與元件脫鉤
5-8 了解定義函式的適當位置以及 useCallback 的使用

06 進階資料處理與客製化 React Hooks
6-1 將天氣代碼轉換為天氣圖示
6-2 根據天氣代碼顯示天氣圖示 - useMemo 的使用
6-3 根據白天或夜晚顯示不同的主題配色
6-4 專案程式碼重構
6-5 建立自己的鉤子 - Custom Hooks

07 表單處理與頁面間的切換
7-1 處理不同支 API 需帶入不同地區名稱的問題
7-2 新增地區設定頁面
7-3 實作頁面間的切換功能
7-4 React 中的表單處理（Controlled vs Uncontrolled）
7-5 Uncontrolled components 和useRef 的使用
7-6 讓使用者可以自行設定地區
7-7 透過localStorage 保存使用者設定的地區

08 網站部署與未來學習方向
8-1 將「台灣好天氣」部署到 Github Pages
8-2 將網頁變成手機 Web App
8-3 那些相當重要但故意先不告訴你的地方

作者介紹

---

陳柏融 (pjchender)

現任 Jubo 智齡科技軟體工程師，曾於 UXTesting, Inc. 擔任前端工程師，同時擔任 ALPHA Camp 講師與學生導師，熟悉 React、Vue 前端框架以及 Chrome Extension 開發。
對資訊科技充滿熱情， 喜歡學習Know-How，致力於透過資訊科技，帶給人們更幸福與便利的生活。同時經營 FB「PJCHENder 網頁前端資源站」粉絲專頁，透過內容的撰寫與知識分享，減少初學者在學習新技術上的焦慮與不安。

---