【書籍資訊】
哎呀！原來 React 這麼有趣好玩：圈叉、貪吃蛇、記憶方塊三款經典遊戲實戰練習（iThome鐵人賽系列書）
系列名：iThome鐵人賽
ISBN13：9786263333772
出版社：博碩文化
作者：陳泰銘(Taiming)
出版日：2023/02/23
裝訂／頁數：平裝／320頁
規格：23cm*17cm*1.7cm (高/寬/厚)
版次：1

【內容】
本書內容改編自第 10 屆 iT 邦幫忙鐵人賽
Modern Web 組網路系列文章
《以經典小遊戲為主題之 ReactJS 應用練習》


《本書特色》
邊玩邊學習
透過遊戲和玩樂來學習並非小孩子的專利。遊戲可以令人從過程中得到快樂，遊戲是求知的工具，藉由遊戲的實作來熟練和學習 React 常用語法。

自助式的學習，不一定要照順序
對於初學者來說，大量及重複的練習是讓自己進步很重要的要素。本書中三個小遊戲彼此互相獨立，可以按照自己的喜好選擇主題來練習。

讓你先看見全貌，再帶你一步一步前進
在幫人指一條很複雜的路的時候，如果沒有先讓人看到整體的地圖，就直接告訴你等一下哪裡要左轉、哪裡要右轉，就算他這次很幸運地到達了，下次要走還是會迷路。本書的實踐會完整的規劃及描述每一個專案的全貌之後，再一步一步帶領讀者完成每一個專案。

從無到有的完整開發流程
瞭解從無到有的完整開發流程是很重要的能力。以這些小遊戲為例，本書會帶領讀者如何一步一步的拆解手上的專案，完整的示範從無到有的開發思維及過程。

搭配完整程式碼練習，事半功倍
對初學者來說並不是「所有東西」都不會，如果所有程式碼都需要自己敲鍵盤，確實是不太有效率的練習方式。所以本書會提供所有程式碼的連結，讓讀者在練習的時候，可以方便直接複製貼上，因為我相信越有效率的練習，你就能夠省下越多時間去練習你真正不熟悉的地方。

《專業推薦》
如果你剛入門 React，覺得自己對它不夠熟悉，那本書或許會是你的好夥伴，跟著書中的教學一步步做完三個遊戲，相信一定能提升你對 React 的熟悉程度，也能學到許多開發的小技巧。
Huli
技術部落格 Huli's blog 站長Huli


對於處在忙、盲、茫階段的新手來說，不怕沒有前輩帶領，並且十分適合拿來打底；對於老手來說，除了溫故知新，還能省思是否能更完善更有效率的培養團隊，是一份很棒的帶人教材。
我會將這本書定位為前端新手入門必讀的教科書，也是每位 Web 前端工程師都該擁有的好書！
Summer
趨勢科技資深工程師
《打造高速網站，從網站指標開始！全方位提升使用者體驗與流量的關鍵》
與技術部落格「Summer。桑莫。夏天」作者


本書當中除了 React 的基礎概念，泰銘兄也以比較新手的工程師角度出發，一定程度模擬了工程師工作現場的流程，從接到需求到實作層面，詳細的解說各階段流程的思考面向，幫助讀者增強獨立作業的能力。如果你是 React 剛起步的朋友，非常推薦您透過這本書，一窺 React 的神奇世界，透過實作經典的遊戲，打開 React 開發的大門！
Jimmy Chu
搞定學院學習社群 創辦人
知名外商 Hewlett-Packard 資深工程師

【目錄】
CHAPTER 01 準備開發工具及環境
1.1 準備開發工具
1.1.1 VSCode
1.1.2 npm
1.1.3 Node.js
1.1.4 nvm
1.1.5 Google Chrome 瀏覽器
1.2 準備開發環境
1.2.1 使用 create-react-app 創建一個專案
1.2.2 ESLint
1.2.3 styled-components

CHAPTER 02 開發流程準備
2.1 專案介紹
2.2 規格書
2.3 設計圖說明
2.4 任務拆解
2.4.1 任務拆解的好處
2.4.2 任務拆解的心法
2.5 任務實作
2.6 篇章總結

CHAPTER 03 技能大補帖
3.1 CSS Flex
3.1.1 情境
3.1.2 介紹
3.1.3 Flex 的使用
3.2 CSS Grid
3.2.1 情境
3.2.2 介紹
3.2.3 Grid 的使用
3.3 React Hook
3.3.1 useState 簡介
3.3.2 useEffect 簡介
3.4 setTimeout 與 setInterval
3.4.1 setTimeout()
3.4.2 setInterval()
3.4.3 取消 setTimeout() 與 setInterval()
3.4.4 依序印出： 0 1 2 3 4

CHAPTER 04 圈圈叉叉篇
4.1 專案介紹
4.1.1 遊戲簡介
4.1.2 學習重點
4.2 規格書
4.2.1 關於畫面與功能
4.2.2 關於遊戲邏輯
4.3 設計圖說明
4.3.1 桌面版展示
4.3.2 手機版展示
4.4 任務拆解
4.4.1 任務拆解描述
4.4.2 任務拆解總結
4.5 任務卡01：準備開發環境
4.5.1 使用create-react-app 創建一個專案
4.5.2 安裝ESLint
4.5.3 安裝styled-components
4.6 任務卡02：準備全局主題及樣式
4.6.1 簡介ThemeProvider
4.6.2 配置ThemeProvider
4.6.3 配色小幫手
4.7 任務卡03：畫面佈局切版
4.7.1 畫面佈局草稿
4.7.2 畫面佈局樹狀圖
4.8 任務卡04：設計資料結構
4.8.1 資訊看板
4.8.2 九宮格棋盤
4.8.3 重新開始按鈕
4.8.4 切換模式
4.8.5 資料結構總結
4.9 任務卡05：棋盤刻畫及點擊事件
4.9.1 規劃出棋盤的範圍
4.9.2 畫出棋盤上的格子
4.9.3 點擊棋盤事件
4.9.4 畫面美化
4.10 任務卡06：勝負判斷
4.10.1 比較並選用不同的勝負判斷方法
4.10.2 實現勝負判斷的函式
4.10.3 贏家棋子的歡呼動畫
4.11 任務卡07：資訊看板
4.11.1 參數說明
4.11.2 顯示邏輯流程圖
4.11.3 資訊看板程式碼
4.11.4 使用CSS Flex 調整顯示內容佈局
4.12 任務卡08：重新開始按鈕
4.12.1 重設狀態的函式
4.12.2 綁定函式到元件上
4.12.3 畫面美化
4.13 任務卡09：切換電腦對弈模式
4.13.1 拿掉輔助線並調整樣式
4.13.2 Switch 元件刻畫
4.13.3 電腦對弈函式設計
4.14 圈圈叉叉篇總結
4.14.1 回顧
4.14.2 天馬行空
4.15 圈圈叉叉篇完整程式碼

CHAPTER 05 貪吃蛇篇

CHAPTER 06 記憶方塊篇