English Japanese Korean Thai Traditional Chinese 简体中文
Publish Now
Publish Books Publish Media Products My Store Self Publish
Gold Log In Cart
Category
Browse all kinds of eBooks, magazines, videos by category
    More services
    • All You Can Read

    • Channels

    • Hot topics

    Language
    English Japanese Korean Thai Traditional Chinese 简体中文
    Back
    Category
    • Home

    • Books

    • Pubook E-Ink reader

    • Magazines

    • Media

    • Newspapers

    • Adult

    Back
    Books
    • All

    • Free to read

    • Finance

      Finance
      • All

      • Management

      • Investing

      • Marketing

    • Literature/Fiction

      Literature/Fiction
      • All

      • LGBTQ

      • Literature

      • Fiction

      • Romantic Fiction

    • Leisure Life

      Leisure Life
      • All

      • Recreation

      • Illustrated Book

      • Fortune Telling

      • Travel

      • Eating Habits

      • Fitness

    • Humanities

      Humanities
      • All

      • History/Geography

      • Law

      • Politics/Military

      • Applied Sciences

      • Natural Sciences

      • Philosophy

      • Biographies

      • Sociology

    • News/Entertainment

    • Language/Computers

      Language/Computers
      • All

      • Computers/Technology

      • Language

    • Religion/Spirituality

      Religion/Spirituality
      • All

      • Motivational

      • Health/Nutrition

      • Christianity

      • Buddhism

      • Taoism

      • Islam

      • Other Religions

      • Relationships

    • Mangas

      Mangas
      • All

      • Comics

      • Illustrations

      • Fan Works

      • Romance Mangas for Teens

      • Teenage Mangas

      • High School Mangas

      • Romance Mangas

      • Yaoi Mangas

      • GL Mangas

      • TL Mangas

      • Gay Mangas

      • Others

    • Art/Design

      Art/Design
      • All

      • Performance Art

      • Art

      • Design

      • Photography

    • Parenting/Relationships

      Parenting/Relationships
      • All

      • Education

      • Kids/Teenagers

      • Pregnancy/Childbirth

    • Exams

      Exams
      • All

      • Study

      • Government Exams

      • Financial Licenses

      • Teacher Exams

      • Professional Exams

      • TOEFL/TOEIC

      • Learning Skills

      • Official Publications

      • Job Hunting Exams

    • Photo Books

      Photo Books
      • All

      • Female Photo Books

      • Male Photo Books

    Back
    Magazines
    • All

    • Free to read

    • Finance

      Finance
      • All

      • Business Management

      • Investing

      • Direct Marketing

      • Advertising

      • Law

    • News/Entertainment

      News/Entertainment
      • All

      • News Analysis

      • General News

      • Stars

    • Leisure Life

      Leisure Life
      • All

      • Travel

      • Hobby

      • Family Life

      • Fitness

    • Art/Design

      Art/Design
      • All

      • Design

      • Art Appreciation

      • Decoration

      • Photography

    • Literature/Spirituality

      Literature/Spirituality
      • All

      • Literature

      • Christianity

      • Buddhism

    • Male Fashion

      Male Fashion
      • All

      • Fashion

    • Female Fashion

      Female Fashion
      • All

      • Urban Fashion

      • Teen Fashion

    • Car/Audio

      Car/Audio
      • All

      • Music/Audio

      • Cars/Motorbikes

    • Sports

      Sports
      • All

      • Basketball

      • Baseball

      • Outdoor Sports

    • Language/Computers

      Language/Computers
      • All

      • Computers/Technology

      • Natural Sciences

      • Language

    • Parenting/Relationships

      Parenting/Relationships
      • All

      • Pregnancy/Childbirth

      • Education

      • Books for Kids

      • Books for Teenagers

    • Photo Books

      Photo Books
      • All

      • Female Photo Books

      • Male Photo Books

    Back
    Media
    • All

    • Free to read

    • Careers

    • Careers
      • All

    • Investing

    • Investing
      • All

    • Parenting/Relationships

    • Parenting/Relationships
      • All

    • Art/Culture

    • Art/Culture
      • All

    • Religion/Spirituality

    • Religion/Spirituality
      • All

      • Buddhism

      • Christianity

      • Motivational

    • Exams

    • Exams
      • All

      • Government Exams

      • Learning Skills

      • Professional Exams

      • Teacher Exams

      • Study

      • Financial Licenses

    • Language

    • Language
      • All

    • Leisure Life

    • Leisure Life
      • All

    • Literature/Fiction

    • Literature/Fiction
      • All

    Back
    Newspapers
    • All

    • 工商時報

    • 中國時報

    • 旺報

    • 联合日報

    • 光華日報

    Back
    Adult
    • Free to read

    • Gay

    • Nude male

    • Lesbian

    • Nude female

    • Adult Manga

    Finance
    • All

    • Management

    • Investing

    • Marketing

    Literature/Fiction
    • All

    • LGBTQ

    • Literature

    • Fiction

    • Romantic Fiction

    Leisure Life
    • All

    • Recreation

    • Illustrated Book

    • Fortune Telling

    • Travel

    • Eating Habits

    • Fitness

    Humanities
    • All

    • History/Geography

    • Law

    • Politics/Military

    • Applied Sciences

    • Natural Sciences

    • Philosophy

    • Biographies

    • Sociology

    News/Entertainment
    • All

    Language/Computers
    • All

    • Computers/Technology

    • Language

    Religion/Spirituality
    • All

    • Motivational

    • Health/Nutrition

    • Christianity

    • Buddhism

    • Taoism

    • Islam

    • Other Religions

    • Relationships

    Mangas
    • All

    • Comics

    • Illustrations

    • Fan Works

    • Romance Mangas for Teens

    • Teenage Mangas

    • High School Mangas

    • Romance Mangas

    • Yaoi Mangas

    • GL Mangas

    • TL Mangas

    • Gay Mangas

    • Others

    Art/Design
    • All

    • Performance Art

    • Art

    • Design

    • Photography

    Parenting/Relationships
    • All

    • Education

    • Kids/Teenagers

    • Pregnancy/Childbirth

    Exams
    • All

    • Study

    • Government Exams

    • Financial Licenses

    • Teacher Exams

    • Professional Exams

    • TOEFL/TOEIC

    • Learning Skills

    • Official Publications

    • Job Hunting Exams

    Photo Books
    • All

    • Female Photo Books

    • Male Photo Books

    Back
    Finance
    • All

    • Business Management

    • Investing

    • Direct Marketing

    • Advertising

    • Law

    Back
    News/Entertainment
    • All

    • News Analysis

    • General News

    • Stars

    Back
    Leisure Life
    • All

    • Travel

    • Hobby

    • Family Life

    • Fitness

    Back
    Art/Design
    • All

    • Design

    • Art Appreciation

    • Decoration

    • Photography

    Back
    Literature/Spirituality
    • All

    • Literature

    • Christianity

    • Buddhism

    Back
    Male Fashion
    • All

    • Fashion

    Back
    Female Fashion
    • All

    • Urban Fashion

    • Teen Fashion

    Back
    Car/Audio
    • All

    • Music/Audio

    • Cars/Motorbikes

    Back
    Sports
    • All

    • Basketball

    • Baseball

    • Outdoor Sports

    Back
    Language/Computers
    • All

    • Computers/Technology

    • Natural Sciences

    • Language

    Back
    Parenting/Relationships
    • All

    • Pregnancy/Childbirth

    • Education

    • Books for Kids

    • Books for Teenagers

    Back
    Photo Books
    • All

    • Female Photo Books

    • Male Photo Books

    Back
    Channels
    • 今周刊

    • 飽讀商周

    • 經理人

    • 大師輕鬆讀

    • 普洛達康

    • 禾馬

    • 台灣武俠傳說

    You haven't completed email verification, please complete email verification to purchase DRM Free or magazine subscription products
    You haven't completed phone verification, please complete phone verification to enable publishing features
    You haven't completed email verification, please complete email verification to enable publishing features
    • Home

    • Favorite

    • Account

    • Gold

    • Library

    More
    1. Home
    2. Books
    3. Language/Computers
    4. Computers/Technology
    5. 哎呀!原來 React 這麼有趣好玩:圈叉、貪吃蛇、記憶方塊三款經典遊戲實戰...
    (iThome鐵人賽系列書)

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

    Author 陳泰銘(Taiming)
    Publisher 博碩文化
    Follow Save Saved Share
    Released
    2023/02/19
    Language
    Traditional Chinese
    File format
    PDF (53MB), fit in large screen and Pubook
    Pages
    318
    ID
    348022
    ISBN
    9786263334496
    Provide Adobe DRM
    Provide PDF
    Offer DRM free license
    No
    Series iThome鐵人賽系列書

    Buy products firstAnd download app to watch

    Details
    (iThome鐵人賽系列書)

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

    Author 陳泰銘(Taiming)
    Publisher 博碩文化
    Share
    Released
    2023/02/23
    Language
    Traditional Chinese
    Pages
    320
    ID
    554998
    ISBN
    9786263333772
    DRM
    NT$470
    紙本書
    NT$558
    Explanation
    eBook
    Printed book
    Standard NT$620
    Get NT$71 off
    查看適用禮券
    Buy

    Preview View

    Buy for others
    庫存 0
    • Intro

    • Chapters

    • Author

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


    《本書特色》

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

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

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

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

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



    《專業推薦》

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


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


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

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

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

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

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

    • Chapters

    • Author

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


    本書特色

    邊玩邊學習

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

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

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

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

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

    專業推薦

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

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

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

     

    More
    More

    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 貪吃蛇篇
    5.1 專案介紹
    5.1.1 遊戲簡介
    5.1.2 學習重點
    5.2 規格書
    5.2.1 關於畫面與功能
    5.3 設計圖說明
    5.3.1 桌面版展示
    5.3.2 手機版展示
    5.4 任務拆解
    5.4.1 任務拆解描述
    5.4.2 任務拆解總結
    5.5 任務卡01:準備開發環境
    5.5.1 使用create-react-app 創建一個專案
    5.5.2 安裝ESLint
    5.5.3 安裝styled-components
    5.6 任務卡02:畫面佈局切版
    5.6.1 畫面佈局草稿
    5.6.2 畫面佈局樹狀圖
    5.7 任務卡03:設計資料結構
    5.7.1 貪吃蛇的構造
    5.7.2 貪吃蛇的移動方法
    5.8 任務卡04:地圖
    5.8.1 規劃出地圖的範圍
    5.8.2 刻畫30x30 的貪吃蛇地圖
    5.9 任務卡05:讓貪吃蛇的頭可以地圖上移動
    5.9.1 地圖上畫出貪吃蛇的頭部
    5.9.2 讓貪吃蛇的頭部在地圖上移動
    5.10 任務卡06:加入貪吃蛇的身體
    5.10.1 地圖中畫出蛇的身體
    5.10.2 貪吃蛇身體的移動
    5.11 任務卡07:產生貪吃蛇的食物
    5.12 任務卡08:貪吃蛇吃到食物會變長
    5.12.1 蛇吃到食物
    5.12.2 吃到食物身體要變長
    5.12.3 吃到食物後,蛇的移動速度要加快
    5.12.4 產生新的食物
    5.14.5 顯示目前分數
    5.13 任務卡09:貪吃蛇吃到自己會死
    5.13.1 遊戲結束判斷條件
    5.13.2 遊戲結束時停止貪吃蛇的移動
    5.14 任務卡10:重新開始按鈕
    5.14.1 重新開始按鈕樣式
    5.14.2 重新開始按鈕事件處理
    5.15 任務卡11:虛擬方向鍵及操作
    5.15.1 虛擬方向鍵畫面樣式
    5.15.2 虛擬方向鍵事件處理
    5.16 任務卡12:暫停遊戲
    5.16.1 暫停按鈕畫面樣式
    5.16.2 暫停按鈕事件處理
    5.17 貪吃蛇篇總結
    5.17.1 回顧
    5.17.2 天馬行空
    5.18 貪吃蛇篇完整程式碼

    CHAPTER 06 記憶方塊篇
    6.1 專案介紹
    6.1.1 遊戲簡介
    6.1.2 學習重點
    6.2 規格書
    6.2.1 關於畫面與功能
    6.2.2 遊戲流程
    6.3 設計圖說明
    6.3.1 桌面版展示
    6.3.2 手機版展示
    6.4 任務拆解
    6.4.1 任務拆解描述
    6.4.2 任務拆解總結
    6.5 任務卡01:準備開發環境
    6.5.1 使用create-react-app 創建一個專案
    6.5.2 安裝ESLint
    6.5.3 安裝 styled-components
    6.6 任務卡02:畫面佈局切版
    6.6.1 畫面佈局草稿
    6.6.2 畫面佈局樹狀圖
    6.7 任務卡03:設計資料結構
    6.7.1 目前關卡
    6.7.2 產生題目
    6.7.3 玩家答案
    6.7.4 是否開始遊戲
    6.7.5 機會/ 命
    6.7.6 載入中狀態
    6.8 任務卡04:記憶方塊
    6.8.1 畫出方塊
    6.8.2 點擊事件
    6.9 任務卡05:是否過關的判斷
    6.10 任務卡06:關卡資訊及關卡進度條
    6.10.1 遊戲標題
    6.10.2 關卡資訊
    6.10.3 asnd

    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 貪吃蛇篇
    5.1 專案介紹
    5.1.1 遊戲簡介
    5.1.2 學習重點
    5.2 規格書
    5.2.1 關於畫面與功能
    5.3 設計圖說明
    5.3.1 桌面版展示
    5.3.2 手機版展示
    5.4 任務拆解
    5.4.1 任務拆解描述
    5.4.2 任務拆解總結
    5.5 任務卡01:準備開發環境
    5.5.1 使用create-react-app 創建一個專案
    5.5.2 安裝ESLint
    5.5.3 安裝styled-components
    5.6 任務卡02:畫面佈局切版
    5.6.1 畫面佈局草稿
    5.6.2 畫面佈局樹狀圖
    5.7 任務卡03:設計資料結構
    5.7.1 貪吃蛇的構造
    5.7.2 貪吃蛇的移動方法
    5.8 任務卡04:地圖
    5.8.1 規劃出地圖的範圍
    5.8.2 刻畫30x30 的貪吃蛇地圖
    5.9 任務卡05:讓貪吃蛇的頭可以地圖上移動
    5.9.1 地圖上畫出貪吃蛇的頭部
    5.9.2 讓貪吃蛇的頭部在地圖上移動
    5.10 任務卡06:加入貪吃蛇的身體
    5.10.1 地圖中畫出蛇的身體
    5.10.2 貪吃蛇身體的移動
    5.11 任務卡07:產生貪吃蛇的食物
    5.12 任務卡08:貪吃蛇吃到食物會變長
    5.12.1 蛇吃到食物
    5.12.2 吃到食物身體要變長
    5.12.3 吃到食物後,蛇的移動速度要加快
    5.12.4 產生新的食物
    5.14.5 顯示目前分數
    5.13 任務卡09:貪吃蛇吃到自己會死
    5.13.1 遊戲結束判斷條件
    5.13.2 遊戲結束時停止貪吃蛇的移動
    5.14 任務卡10:重新開始按鈕
    5.14.1 重新開始按鈕樣式
    5.14.2 重新開始按鈕事件處理
    5.15 任務卡11:虛擬方向鍵及操作
    5.15.1 虛擬方向鍵畫面樣式
    5.15.2 虛擬方向鍵事件處理
    5.16 任務卡12:暫停遊戲
    5.16.1 暫停按鈕畫面樣式
    5.16.2 暫停按鈕事件處理
    5.17 貪吃蛇篇總結
    5.17.1 回顧
    5.17.2 天馬行空
    5.18 貪吃蛇篇完整程式碼

    CHAPTER 06 記憶方塊篇
    6.1 專案介紹
    6.1.1 遊戲簡介
    6.1.2 學習重點
    6.2 規格書
    6.2.1 關於畫面與功能
    6.2.2 遊戲流程
    6.3 設計圖說明
    6.3.1 桌面版展示
    6.3.2 手機版展示
    6.4 任務拆解
    6.4.1 任務拆解描述
    6.4.2 任務拆解總結
    6.5 任務卡01:準備開發環境
    6.5.1 使用create-react-app 創建一個專案
    6.5.2 安裝ESLint
    6.5.3 安裝 styled-components
    6.6 任務卡02:畫面佈局切版
    6.6.1 畫面佈局草稿
    6.6.2 畫面佈局樹狀圖
    6.7 任務卡03:設計資料結構
    6.7.1 目前關卡
    6.7.2 產生題目
    6.7.3 玩家答案
    6.7.4 是否開始遊戲
    6.7.5 機會/ 命
    6.7.6 載入中狀態
    6.8 任務卡04:記憶方塊
    6.8.1 畫出方塊
    6.8.2 點擊事件
    6.9 任務卡05:是否過關的判斷
    6.10 任務卡06:關卡資訊及關卡進度條
    6.10.1 遊戲標題
    6.10.2 關卡資訊
    6.10.3askw

    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 貪吃蛇篇
    5.1 專案介紹
    5.1.1 遊戲簡介
    5.1.2 學習重點
    5.2 規格書
    5.2.1 關於畫面與功能
    5.3 設計圖說明
    5.3.1 桌面版展示
    5.3.2 手機版展示
    5.4 任務拆解
    5.4.1 任務拆解描述
    5.4.2 任務拆解總結
    5.5 任務卡01:準備開發環境
    5.5.1 使用create-react-app 創建一個專案
    5.5.2 安裝ESLint
    5.5.3 安裝styled-components
    5.6 任務卡02:畫面佈局切版
    5.6.1 畫面佈局草稿
    5.6.2 畫面佈局樹狀圖
    5.7 任務卡03:設計資料結構
    5.7.1 貪吃蛇的構造
    5.7.2 貪吃蛇的移動方法
    5.8 任務卡04:地圖
    5.8.1 規劃出地圖的範圍
    5.8.2 刻畫30x30 的貪吃蛇地圖
    5.9 任務卡05:讓貪吃蛇的頭可以地圖上移動
    5.9.1 地圖上畫出貪吃蛇的頭部
    5.9.2 讓貪吃蛇的頭部在地圖上移動
    5.10 任務卡06:加入貪吃蛇的身體
    5.10.1 地圖中畫出蛇的身體
    5.10.2 貪吃蛇身體的移動
    5.11 任務卡07:產生貪吃蛇的食物
    5.12 任務卡08:貪吃蛇吃到食物會變長
    5.12.1 蛇吃到食物
    5.12.2 吃到食物身體要變長
    5.12.3 吃到食物後,蛇的移動速度要加快
    5.12.4 產生新的食物
    5.14.5 顯示目前分數
    5.13 任務卡09:貪吃蛇吃到自己會死
    5.13.1 遊戲結束判斷條件
    5.13.2 遊戲結束時停止貪吃蛇的移動
    5.14 任務卡10:重新開始按鈕
    5.14.1 重新開始按鈕樣式
    5.14.2 重新開始按鈕事件處理
    5.15 任務卡11:虛擬方向鍵及操作
    5.15.1 虛擬方向鍵畫面樣式
    5.15.2 虛擬方向鍵事件處理
    5.16 任務卡12:暫停遊戲
    5.16.1 暫停按鈕畫面樣式
    5.16.2 暫停按鈕事件處理
    5.17 貪吃蛇篇總結
    5.17.1 回顧
    5.17.2 天馬行空
    5.18 貪吃蛇篇完整程式碼

    CHAPTER 06 記憶方塊篇
    6.1 專案介紹
    6.1.1 遊戲簡介
    6.1.2 學習重點
    6.2 規格書
    6.2.1 關於畫面與功能
    6.2.2 遊戲流程
    6.3 設計圖說明
    6.3.1 桌面版展示
    6.3.2 手機版展示
    6.4 任務拆解
    6.4.1 任務拆解描述
    6.4.2 任務拆解總結
    6.5 任務卡01:準備開發環境
    6.5.1 使用create-react-app 創建一個專案
    6.5.2 安裝ESLint
    6.5.3 安裝 styled-components
    6.6 任務卡02:畫面佈局切版
    6.6.1 畫面佈局草稿
    6.6.2 畫面佈局樹狀圖
    6.7 任務卡03:設計資料結構
    6.7.1 目前關卡
    6.7.2 產生題目
    6.7.3 玩家答案
    6.7.4 是否開始遊戲
    6.7.5 機會/ 命
    6.7.6 載入中狀態
    6.8 任務卡04:記憶方塊
    6.8.1 畫出方塊
    6.8.2 點擊事件
    6.9 任務卡05:是否過關的判斷
    6.10 任務卡06:關卡資訊及關卡進度條
    6.10.1 遊戲標題
    6.10.2 關卡資訊
    6.10.3

    More

    陳泰銘(Taiming)

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

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

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

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

     

    More

    Details

    Released
    2023/02/19
    Language
    Traditional Chinese
    File format
    PDF: Fit in large screen
    Provide Adobe DRM
    Provide PDF
    Offer DRM free license
    No
    ID
    348022
    ISBN
    9786263334496
    Released
    2023/02/23
    Language
    Traditional Chinese
    Pages
    320
    ID
    554998
    ISBN
    9786263333772

    React

    程式設計

    遊戲實作

    Buy products firstAnd download app to watch

    Details

    See more 博碩文化

    More

    一本書讀懂DeepSeek:AI巨頭競爭的新變數

    Word 論文寫作全攻略:Copilot智慧引導,助你輕鬆掌握論文排版技巧

    你的第一本Git與GitHub入門書:輕鬆實作本機與遠端儲存庫的版本控制

    圖解人體生理學:一看就懂的身體運作奧秘

    AI×Excel×Tableau資料分析語法指南

    一個人的藍隊:企業資安防護技術實戰指南(iThome鐵人賽系列書)

    AI + ESP32-CAM + AWS:物聯網與雲端運算的專題實作應用

    星鏈崛起:探索6G時代的天空戰場

    Android應用程式開發全方位實作指南:邁向專業工程師的養成之路

    超實用AI技能工具箱:提升職場.教育與生活的275個高效應用技巧

    See more 博碩文化

    More

    一本書讀懂DeepSeek:AI巨頭競爭的新變數

    Word 論文寫作全攻略:Copilot智慧引導,助你輕鬆掌握論文排版技巧

    你的第一本Git與GitHub入門書:輕鬆實作本機與遠端儲存庫的版本控制

    圖解人體生理學:一看就懂的身體運作奧秘

    AI×Excel×Tableau資料分析語法指南

    一個人的藍隊:企業資安防護技術實戰指南(iThome鐵人賽系列書)

    AI + ESP32-CAM + AWS:物聯網與雲端運算的專題實作應用

    星鏈崛起:探索6G時代的天空戰場

    Android應用程式開發全方位實作指南:邁向專業工程師的養成之路

    超實用AI技能工具箱:提升職場.教育與生活的275個高效應用技巧

    Related Product

    React 思維進化:一次打破常見的觀念誤解,躍升專業前端開發者(iThome鐵人賽系列書)

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

    愛上Unity

    React求職特訓營:精選30道實戰決勝題×轉職Q&A無痛提升你的前端面試力

    App Inventor 2:趣味手遊自己做

    Python好好玩|趣學電玩遊戲程式設計

    用micro:bit學MakeCode Block Editor程式設計製作簡單小遊戲

    遊戲設計X演算法XTypeScript:出版社對我說「把祕笈通通交出來!」

    KorGE遊戲開發 : 帶你學會運用Kotlin、KorGE、Ktor技術打造自己的小遊戲

    Python遊戲開發講座|演算法篇

    Python X ChatGPT程式設計實務:從入門到精通step by step

    C & C++程式設計經典-第五版

      

    Review

    0 ratings
    1 stars
    0%
    2 stars
    0%
    3 stars
    0%
    4 stars
    0%
    5 stars
    0%
    Write a review
    Eligible to write reviews after purchasing products or add to Library
    Explanation
    DRM needs to login with Pubu Web or App, DRM free can be opened with any device or App
    You already owned this product
    Are you sure you want to buy 哎呀!原來 React 這麼有趣好玩:圈叉、貪吃蛇、記憶方塊三款經典遊戲實戰練習 again? This will generate duplicated items in your Library
    Buy again
    Buy for others
    After completing the checkout process, go to "Profile, Manage gift codes" to send the gift code to your friends or group members
    Quantity
    OK
    English Japanese Korean Thai Traditional Chinese 简体中文

    • About Pubu

    • Terms of Service

    • Privacy policy

    • Publish Books

    • Publish Media Products

    • Self Publish

    • Support

    • Join AP Alliance

    • 用台灣之星看飽讀

    • Redeem Retail Products

    Free downloaddddddddddddd
    Free download
    Payment
    About Pubu
    湛天創新科技股份有限公司
    24488585
    Copyright © Nuazure Innovative Technology Co., Ltd. & HK Renascimedia Co., Ltd.
    pubu-web-3.9.0.202009251127
    Download Android APK
    Download

    系統訊息


    您的合約條件不符合推廣聯盟申請資格,如有疑問請洽詢Pubu版權部窗口

    系統訊息


    您必須啟用賣家功能,才能透過專屬推廣連結,賣書賺回饋金
    Choose language
    English 日本語 한국어 ไทย 繁體中文 简体中文
    Processing