聯繫我們
FE103

動手玩 React!

一起用React做個小遊戲吧!

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

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

講師介紹

使用者大頭貼

Lin

五倍學院 前端工程師

課程特色

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

課程章節

翻牌記憶遊戲

00 : 30 : 08

成果展示及檔案下載

簡介

卡牌準備及洗牌

建立卡牌

卡牌元件化

翻牌效果

翻牌邏輯 part 1

翻牌邏輯 part 2

翻牌邏輯 part 3

小結

貪食蛇遊戲

00 : 30 : 22

成果展示及檔案下載

簡介

繪製場景及角色

讓蛇動起來!

撞到牆壁的話...

上下左右移動

吃蘋果

碰撞偵測

重新開始遊戲

程式碼整理

小結

踩地雷遊戲

00 : 57 : 04

成果展示及檔案下載

簡介

範例檔案說明

棋盤繪製

準備地雷

試踩地雷

元件化

踩到的是地雷嗎?

設定旗子

遊戲結束

旁邊有幾顆地雷?

自動翻開沒有地雷的格子

輸了還是贏了?

小結

FE103

動手玩 React!

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

其他課程推薦