哎呀!原來 React 這麼有趣好玩:圈叉、貪吃蛇、記憶方塊三款經典遊戲實戰練習 (電子書)

電子書哎呀!原來 React 這麼有趣好玩:圈叉、貪吃蛇、記憶方塊三款經典遊戲實戰練習 (電子書)

出版日期:
2023/02/18
88
470413
此商品享ShopBack 0.5%回饋;不適用於誠品分潤計劃、美安等現金回饋機制
本書內容改編自第 10 屆 iT 邦幫忙鐵人賽 Modern Web 組網路系列文章《以經典小遊戲為主題之 ReactJS 應用練習》


《本書特色》

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

內容簡介

本書內容改編自第 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.2 準備開發環境

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

CHAPTER 03 技能大補帖
3.1 CSS Flex
3.2 CSS Grid
3.3 React Hook
3.4 setTimeout與setInterval

CHAPTER 04 圈圈叉叉篇
4.1 專案介紹
4.2 規格書
4.3 設計圖說明
4.4 任務拆解
4.5 任務卡01:準備開發環境
4.6 任務卡02:準備全局主題及樣式
4.7 任務卡03:畫面佈局切版
4.8 任務卡04:設計資料結構
4.9 任務卡05:棋盤刻畫及點擊事件
4.10 任務卡06:勝負判斷
4.11 任務卡07:資訊看板
4.12 任務卡08:重新開始按鈕
4.13 任務卡09:切換電腦對弈模式
4.14 圈圈叉叉篇總結
4.15 圈圈叉叉篇完整程式碼

CHAPTER 05 貪吃蛇篇
5.1 專案介紹
5.2 規格書
5.3 設計圖說明
5.4 任務拆解
5.5 任務卡01:準備開發環境
5.6 任務卡02:畫面佈局切版
5.7 任務卡03:設計資料結構
5.8 任務卡04:地圖
5.9 任務卡05:讓貪吃蛇的頭可以地圖上移動
5.10 任務卡06:加入貪吃蛇的身體
5.11 任務卡07:產生貪吃蛇的食物
5.12 任務卡08:貪吃蛇吃到食物會變長
5.13 任務卡09:貪吃蛇吃到自己會死
5.14 任務卡10:重新開始按鈕
5.15 任務卡11:虛擬方向鍵及操作
5.16 任務卡12:暫停遊戲
5.17 貪吃蛇篇總結
5.18 貪吃蛇篇完整程式碼

CHAPTER 06 記憶方塊篇
6.1 專案介紹
6.2 規格書
6.3 設計圖說明
6.4 任務拆解
6.5 任務卡01:準備開發環境
6.6 任務卡02:畫面佈局切版
6.7 任務卡03:設計資料結構
6.8 任務卡04:記憶方塊
6.9 任務卡05:是否過關的判斷
6.10 任務卡06:關卡資訊及關卡進度條
6.11 任務卡07:題目播放
6.12 任務卡08:製作過關和不過關的效果
6.13 任務卡09:顯示目前還有幾命
6.14 記憶方塊篇總結
6.15 記憶方塊篇完整程式碼

作者介紹

陳泰銘(Taiming)

自2017年開始從事前端工程師工作,擁有B2C以及B2B系統開發經驗。

曾於大學期間修習師資培育學程,因此對於教學及教育充滿熱忱,擅長將複雜、艱澀的技術觀念轉化為親民的白話文並且分享。

2019年發起 「ShareBack不藏私分享會」社群,擔任活動企劃籌備以及講師,希望建立一個不藏私、彼此教學相長的平台,讓不論本科系、非本科系的參與者從中獲得知識以及樂趣。

✦2019 iT邦幫忙鐵人賽以《以經典小遊戲為主題之ReactJS應用練習》為主題,獲得 Modern Web 組優選。
✦2021 iThome鐵人賽以《30天擁有一套自己手刻的React UI元件庫》為主題,獲得Modern Web組佳作。
✦2022 iThome鐵人賽以《防禦性 CSS - 建立「防患未然」的匠人心態》為主題,榮獲Modern Web組冠軍。

規格

誠品貨碼 / 2682770519005
ISBN13 / 9786263333772
ISBN10 /
EAN貨碼 / 9786263334496
頁數 / 318
語言 / 1:中文/繁體
級別 / N:無
檔案格式 / PDF(54MB)
檔案匯出格式 / PDF 提供 Adobe DRM
TTS朗讀 / EPUB不提供TTS朗讀

退貨說明

退貨須知:

  1. 依照消費者保護法的規定,您享有商品貨到次日起七天猶豫期(含例假日)的權益(請注意!猶豫期非試用期),辦理退貨之商品必須是全新狀態(不得有刮傷、破損、受潮)且需完整(包含全部商品、配件、原廠內外包裝、贈品及所有附隨文件或資料的完整性等)。
  2. 請您以送貨廠商使用之包裝紙箱將退貨商品包裝妥當,若原紙箱已遺失,請另使用其他紙箱包覆於商品原廠包裝之外,切勿直接於原廠包裝上黏貼紙張或書寫文字。若原廠包裝損毀將可能被認定為已逾越檢查商品之必要程度,本公司得依毀損程度扣除回復原狀必要費用(整新費)後退費;請您先確認商品正確、外觀可接受,再行拆封,以免影響您的權利;若為產品瑕疵,本公司接受退貨。

依「通訊交易解除權合理例外情事適用準則」,下列商品不適用七日猶豫期,除產品本身有瑕疵外,不接受退貨:

  1. 易於腐敗、保存期限較短或解約時即將逾期。(如:生鮮蔬果、乳製品、冷凍冷藏食材、蛋糕)
  2. 依消費者要求所為之客製化給付。(如:客製印章、鋼筆刻字)
  3. 報紙、期刊或雜誌。
  4. 經消費者拆封之影音商品或電腦軟體。
  5. 非以有形媒介提供之數位內容或一經提供即為完成之線上服務,經消費者事先同意始提供。(如:電子書)
  6. 已拆封之個人衛生用品。(如:內衣褲、襪類、褲襪、刮鬍刀、除毛刀等貼身用品)
  7. 國際航空客運服務。

若您退貨時有下列情形,可能被認定已逾越檢查商品之必要程度而須負擔為回復原狀必要費用(整新費),或影響您的退貨權利,請您在拆封前決定是否要退貨:

  1. 以數位或電磁紀錄形式儲存或著作權相關之商品(包含但不限於CD、VCD、DVD、電腦軟體等) 包裝已拆封者(除運送用之包裝以外)。
  2. 耗材(包含但不限於墨水匣、碳粉匣、紙張、筆類墨水、清潔劑補充包等)之商品包裝已拆封者(除運送用之包裝以外)。
  3. 衣飾鞋類/寢具/織品(包含但不限於衣褲、鞋子、襪子、泳裝、床單、被套、填充玩具)或之商品缺件(含購買商品、附件、內外包裝、贈品等)或經剪標或下水或商品有不可回復之髒污或磨損痕跡。
  4. 食品、美容/保養用品、內衣褲等消耗性或個人衛生用品、商品銷售頁面上特別載明之商品已拆封者(除運送用之包裝外一切包裝、包括但不限於瓶蓋、封口、封膜等接觸商品內容之包裝部分)或已非全新狀態(外觀有刮傷、破損、受潮等)與包裝不完整(缺少商品、附件、原廠外盒、保護袋、配件紙箱、保麗龍、隨貨文件、贈品等)。
  5. 家電、3C、畫作、電子閱讀器等商品,除商品本身有瑕疵外,退回之商品已拆封(除運送用之包裝外一切包裝、包括但不限於封膜等接觸商品內容之包裝部分、移除封條、拆除吊牌、拆除貼膠或標籤等情形)或已非全新狀態(外觀有刮傷、破損、受潮等)與包裝不完整(缺少商品、附件、原廠外盒、保護袋、配件紙箱、保麗龍、隨貨文件、贈品等)。
  6. 退貨程序請參閱【客服專區→常見問題→誠品線上退貨退款】之說明。
付款/配送