從 Hooks 開始，讓你的網頁 React 起來 (第二版)（iT邦幫忙鐵人賽系列書）<啃書> 價格比較,價格查詢,價格歷史信息

適用讀者

✎ 學過 JavaScript，想要開始上手前端框架的初學者

✎ 想要成為前端工程師的網頁開發求職者

✎ 用過 Vue 等其他前端框架，想要體驗 React 框架的開發者

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

內容簡介

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

◆重點資訊◆

最新升級增強版！迅速掌握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 各種語法，並將作品發布至雲端，讓所有人都能共享使用！

Q：請問使用的React版本

A：本書語法支援目前最新版 React18，讓你掌握最新功能。

書籍目錄

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 那些相當重要但故意先不告訴你的地方