內文簡介
＜內容簡介＞

本書內容改編自第 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，讓你掌握最新功能。

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

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

★專家推薦：

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

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

★讀者推薦：

讀者好評推薦

如果你是期待能用 React 快速上工的人，這本書會非常有幫助!
照著此書的安排，你會用 React 完成一個簡單卻完整的 web app。開發過程所需要的 JavaScript 基礎知識，都會詳細解說，讓新手可以快速進入狀況。
喜歡本書在講解語法或者介紹相關套件時，都會告訴讀者為什麼要這麼做，這麼做解決的痛點是什麼，而這些說明對新手會很有幫助!
Ralf Hsiao | 老婆我在這

這本書從一開始就先帶一些初心者必懂的觀念，再由淺入深地講解React hooks的使用，即使是第一次碰前端框架的人，也能快速地學習React。加上PJ 大大總是能把複雜的觀念以最簡單的內容說明出來，所以不會有種看艱深教課書的痛苦感，每字每句都是能讀得懂的內容。而且書中內容除了透過實際的實作來說明React Hooks 怎麼使用外，還有說明一些該注意的地方和一些實作上的小撇步。
另外，除了書本中的內容外，我還有參加從這本書延伸出的讀書會，一樣也是收穫滿滿，不只加強了React 學習，更延伸學到更多前端技術及觀念。
粉粉

很適合快速入門React 的一本書，從實作小案例中一步步介紹，也有搭配網頁使程式學習上很快、方便，也可以看案例後先用自己方法做在跟書對照，可以瞬間理解很多自己的卡點、書想表達的部分。另外，過程中的文字敘述很好吸收、容易掌握重點，不像看文件對初學者來說比較有距離。
Jane

很幸運遇見 PJ 老師這本精實的入門書，從實作中理解概念，也觀摩到資深開發者如何組織程式碼。PJ 老師更是不忘反覆叮嚀 React 重要概念。對於初學前端的文組生的我來說，內容好懂容易操作，也幫助我做出獨立小作品、成功轉職 + 探索更深奧的官方文件。
Z.R.

本書非常適合react 新手，從最基礎的概念慢慢深入淺出，讓完全不懂react框架小白的我可以掌握最核心的概念，另外也配合範例程式碼可以實際演練加深印象與累積實作經驗建立信心，讓我順利用react 做前端開發，真是受益良多!
Emma

本書用淺顯易懂的方式，說明學習 React Hooks 需要了解的重要概念。對於先學 React Class 才學 React Hooks 的我非常有幫助。在透過看書練習小專案的過程中，就像是有個資深工程師很有耐心的跟你說明要做什麼、如何做、為什麼要這樣做，提醒你該留意的小撇步。在實現每個拆解的小功能時，也會說明這邊的流程，留給你自己動腦實作的空間。完成本書的小專案後能夠得到完整的觀念。若在過程中有問題也能在本書的線上 React 社團提問並得到好的回覆。這本書帶給我最大的收穫是能夠理解一個資深工程師的思考過程，得到的遠比預期的多。能遇到這本書真的太好了。
Joy

★目錄：

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)
對資訊科技充滿熱情，喜歡學習Know-How，致力於透過資訊科技，帶給人們更幸福與便利的生活。同時經營 FB「PJCHENder 網頁前端資源站」粉絲專頁，透過內容的撰寫與知識分享，減少初學者在學習新技術上的焦慮與不安。

相關分類

購物須知

寄送時間	全台灣24h到貨，遲到提供100元現金積點。全年無休，週末假日照常出貨。例外說明
送貨方式	透過宅配送達。除網頁另有特別標示外，均為常溫配送。消費者訂購之商品若經配送兩次無法送達，再經本公司以電話與Email均無法聯繫逾三天者，本公司將取消該筆訂單，並且全額退款。
送貨範圍	限台灣本島與離島地區註，部分離島地區包括連江馬祖、綠島、蘭嶼、琉球鄉…等貨件，將送至到岸船公司碼頭，需請收貨人自行至碼頭取貨。注意！收件地址請勿為郵政信箱。註：離島地區不配送安裝商品、手機門號商品、超大材商品及四機商品。
售後服務	缺掉頁更換新品
執照證號＆登錄字號	本公司食品業者登錄字號A-116606102-00000-0

關於退貨

PChome24h購物的消費者，都可以依照消費者保護法的規定，享有商品貨到次日起七天猶豫期的權益。(請留意猶豫期非試用期!!)您所退回的商品必須回復原狀（復原至商品到貨時的原始狀態並且保持完整包裝，包括商品本體、配件、贈品、保證書、原廠包裝及所有附隨文件或資料的完整性）。商品一經拆封/啟用保固，將使商品價值減損，您理解本公司將依法收取回復原狀必要之費用(若無法復原，費用將以商品價值損失計算)，請先確認商品正確、外觀可接受再行使用，以免影響您的權利，祝您購物順心。
如果您所購買商品是下列特殊商品，請留意下述退貨注意事項：
1. 易於腐敗之商品、保存期限較短之商品、客製化商品、報紙、期刊、雜誌，依據消費者保護法之規定，於收受商品後將無法享有七天猶豫期之權益且不得辦理退貨。
2. 影音商品、電腦軟體或個人衛生用品等一經拆封即無法回復原狀的商品，在您還不確定是否要辦理退貨以前，請勿拆封，一經拆封則依消費者保護法之規定，無法享有七天猶豫期之權益且不得辦理退貨。
3. 非以有形媒介提供之數位內容或一經提供即為完成之線上服務，一經您事先同意後始提供者，依消費者保護法之規定，您將無法享有七天猶豫期之權益且不得辦理退貨。
4. 組合商品於辦理退貨時，應將組合銷售商品一同退貨，若有遺失、毀損或缺件，PChome將可能要求您依照損毀程度負擔回復原狀必要之費用。
若您需辦理退貨，請利用顧客中心「查訂單」或「退訂/退款查詢」的「退訂/退貨」功能填寫申請，我們將於接獲申請之次日起1個工作天內檢視您的退貨要求，檢視完畢後將以E-mail回覆通知您，並將委託本公司指定之宅配公司，在5個工作天內透過電話與您連絡前往取回退貨商品。請您保持電話暢通，並備妥原商品及所有包裝及附件，以便於交付予本公司指定之宅配公司取回（宅配公司僅負責收件，退貨商品仍由特約廠商進行驗收），宅配公司取件後會提供簽收單據給您，請注意留存。
退回商品時，請以本公司或特約廠商寄送商品給您時所使用的外包裝（紙箱或包裝袋），原封包裝後交付給前來取件的宅配公司；如果本公司或特約廠商寄送商品給您時所使用的外包裝（紙箱或包裝袋）已經遺失，請您在商品原廠外盒之外，再以其他適當的包裝盒進行包裝，切勿任由宅配單直接粘貼在商品原廠外盒上或書寫文字。
若因您要求退貨或換貨、或因本公司無法接受您全部或部分之訂單、或因契約解除或失其效力，而需為您辦理退款事宜時，您同意本公司得代您處理發票或折讓單等相關法令所要求之單據，以利本公司為您辦理退款。
本公司收到您所提出的申請後，若經確認無誤，將依消費者保護法之相關規定，返還您已支付之對價（含信用卡交易），退款日當天會再發送E-mail通知函給您。

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

搜尋更多

內文簡介

相關分類