FE103

動手玩 React！

一起用React做個小遊戲吧！

如果你/妳常常聽到 React，但又一直沒機會體驗看看，歡迎跟我們一起透過實作小遊戲來認識 React。 React 是個用來實作使用者介面的 JavaScript 函式庫，在使用上只要專注於資料邏輯，React 就會透過 Virtual DOM，將變動後的資料有效率的顯示在畫面上。並且可以透過將邏輯寫成元件，方便在多個地方使用。如此方便的技術，你一定要試試看。

免費課程
開始上課！
  • 終身存取權
  • 可行動裝置使用
  • 課程時長：1.9 小時
  • 結業證書

講師介紹

使用者大頭貼

Lin

五倍學院 前端工程師

課程特色

這系列影片不會有很艱深的邏輯，使用的範例都是大家一定都玩過的遊戲，我們會透過範例，使用一些簡單的 React 語法，希望能帶你體驗到寫React的樂趣與便利性。

課程章節

翻牌記憶遊戲

00 : 30 : 08

成果展示及檔案下載

閱讀文章

簡介

觀看影片

01 : 17

卡牌準備及洗牌

觀看影片

06 : 39

建立卡牌

觀看影片

03 : 03

卡牌元件化

觀看影片

02 : 14

翻牌效果

觀看影片

01 : 59

翻牌邏輯 part 1

觀看影片

06 : 07

翻牌邏輯 part 2

觀看影片

04 : 27

翻牌邏輯 part 3

觀看影片

03 : 41

小結

觀看影片

00 : 41

貪食蛇遊戲

00 : 30 : 22

成果展示及檔案下載

閱讀文章

簡介

觀看影片

01 : 04

繪製場景及角色

觀看影片

05 : 58

讓蛇動起來！

觀看影片

05 : 12

撞到牆壁的話...

觀看影片

03 : 42

上下左右移動

觀看影片

04 : 04

吃蘋果

觀看影片

02 : 38

碰撞偵測

觀看影片

02 : 09

重新開始遊戲

觀看影片

02 : 38

程式碼整理

觀看影片

02 : 02

小結

觀看影片

00 : 55

踩地雷遊戲

00 : 57 : 04

成果展示及檔案下載

閱讀文章

簡介

觀看影片

02 : 41

範例檔案說明

觀看影片

01 : 51

棋盤繪製

觀看影片

07 : 20

準備地雷

觀看影片

04 : 18

試踩地雷

觀看影片

03 : 25

元件化

觀看影片

02 : 50

踩到的是地雷嗎？

觀看影片

03 : 47

設定旗子

觀看影片

05 : 08

遊戲結束

觀看影片

05 : 35

旁邊有幾顆地雷？

觀看影片

08 : 52

自動翻開沒有地雷的格子

觀看影片

05 : 06

輸了還是贏了？

觀看影片

05 : 32

小結

觀看影片

00 : 39

FE103

動手玩 React！

免費課程
開始上課！
  • 終身存取權
  • 可行動裝置使用
  • 課程時長：1.9 小時
  • 結業證書

其他課程推薦