iT邦幫忙

reactjs相關文章
共有 187 則文章
鐵人賽 Modern Web DAY 24

技術 Day24 - 記憶方塊篇:畫出主畫面記憶方塊

前情提要 今天我們要來實作記憶方塊的主畫面區塊,在昨天的努力之下,我們已經把區塊都規劃好了,接下來就是要把我們的方塊畫上去。 由於前兩個遊戲 Tic-Tac-T...

鐵人賽 Modern Web DAY 23

技術 Day23 - 記憶方塊篇:頁面佈局規劃

繪製頁面草稿 按照慣例,我們先來畫一下我們整個遊戲畫面呈現的草稿,下面是我對整個遊戲面化的初步想像。 我把所有的元素都集中放在中間區塊,因為人的視線比起左右移動...

鐵人賽 Modern Web DAY 22

技術 Day22 - 記憶方塊篇:資料結構規劃

昨天 Day21 我們已經說明了我們所需要的物件以及規則,為了要實現這些功能及規則,我們要來規劃我們需要哪些參數來幫助我們實現。 跟前面一樣,我們使用 crea...

鐵人賽 Modern Web DAY 21

技術 Day21 - 記憶方塊篇:前言及功能構想

前言 終於到了這次鐵人賽最後一個遊戲,經歷一番東挑西選及天人交戰之後,最後選定了這個遊戲,記憶方塊(Memory Blocks)。 這個遊戲也是很經典的童年回憶...

鐵人賽 自我挑戰組 DAY 30

技術 【DAY 30】鐵人練成!完賽心得!很累、很好玩。

「不然我也來參加這次的鐵人賽好了。」   就是上面一句無心的話就開啟我這三十天的鐵人歷程,說實在的,如果不是去年有老師分享過IT邦鐵人賽的文章,我想我應該從來不...

鐵人賽 自我挑戰組 DAY 29

技術 【DAY 29】react-router,很高興認識你!

【正文】   倒數第二篇...... 【前言】   按照以往,react-router的部分也在上一篇結束得差不多了,當然還有許多地方可以探討的,但我們就以比較...

鐵人賽 Modern Web DAY 30
一步一腳印的React旅程 系列 第 30

技術 [筆記][React]來做個作品吧!待辦事項「todolist」篇(10)-剩下兩個頁面完全不是問題,還有最後的完賽感言

終終終於來到了每天朝思暮想的第三十天了,ㄛ天吶,這一路走來真的很漫長,不過每次回頭看看都會有覺得什麼時候發那麼多篇去了!的感覺XD,在打這段話的時候我覺得還滿適...

鐵人賽 Modern Web DAY 20

技術 Day20 - 貪吃蛇篇:虛擬方向鍵及暫停遊戲

前情提要及動機 在 Day11 的功能構想中我們有提到,雖然到昨天 Day19 整個貪吃蛇遊戲已經很完整了,但是有一點美中不足的地方,就是透過手機開啟這個遊戲的...

鐵人賽 Modern Web DAY 29
一步一腳印的React旅程 系列 第 29

技術 [筆記][React]來做個作品吧!待辦事項「todolist」篇(9)-把資料做排序吧

Hi!大家好!昨天寫完那篇的時候,心情輕鬆了不少XD,其實我真的很怕做不出來哎!不過還好還是搞定了,雖然完全放棄了排版,哈哈,那接下來剩下的就把資料排序和輸出而...

鐵人賽 自我挑戰組 DAY 28

技術 【DAY 28】用react-loadable與react-router做code splitting吧

【前言】   第28天了....... 【正文】   雖著專案越來越大,我們要撰寫的js檔也越來越多,但最後我們都會在App.js(或是Root.js)去imp...

鐵人賽 Modern Web DAY 19

技術 Day19 - 貪吃蛇篇:重新開始按鈕

昨天 Day18 我們已經準備好 isGameStart 參數來幫助我們做今天的重新開始按鈕。 首先,我們需要先來製作一個按鈕,這個按鈕我想要直接蓋在遊戲地圖的...

鐵人賽 Modern Web DAY 18

技術 Day18 - 貪吃蛇篇:吃到自己會死

前情提要 昨天 Day17 我們已經讓食物可以隨機產生,食物還會炫砲的發光,蛇也可以順利吃到食物,而且吃到之後身體會變長,速度會變快。 但是讓蛇這樣一直吃下去,...

鐵人賽 自我挑戰組 DAY 27

技術 【DAY 27】React-router,其它很有用的組件(下)

【前言】   終於要來到倒數幾篇了!!!有沒有對於這些更熟悉了呢?希望有幫到大家! 【正文】   今天來介紹<Redirect>吧! <Red...

鐵人賽 Modern Web DAY 28
一步一腳印的React旅程 系列 第 28

技術 [筆記][React]來做個作品吧!待辦事項「todolist」篇(8)-人生不能重來,但資料可以修改

嗨囉!大家好!最後三天最難熬!昨天已經能夠展開我們的編輯區了,今天來把編輯資料的部分做完吧! 那一開始先來做Redux的部分吧!要處理的事情有以下幾點,讓我們...

鐵人賽 自我挑戰組 DAY 26

技術 【DAY 26】React-router,其它很有用的組件(上)

【前言】   倒數最後五篇~~一起加油吧! 【正文】   昨天講完Link,今天來講跟Link很常用到的其他組件八吧! Switch:用來包Route與Redi...

鐵人賽 Modern Web DAY 17

技術 Day17 - 貪吃蛇篇:產生食物(上菜啦~~)

想一想,決定食物如何出現 俗話說,吃飯皇帝大,如果不吃東西,貪吃蛇就長不大,也跑不快,所以今天我們要來製作貪吃蛇的另一個重頭戲,就是食物。 首先,我們要來決定食...

鐵人賽 Modern Web DAY 27
一步一腳印的React旅程 系列 第 27

技術 [筆記][React]來做個作品吧!待辦事項「todolist」篇(7)-讓組件重用起來

嗨嗨!大家好啊!今天來輕鬆一點點(其實每天都不太難啦XD),昨天已經能將資料用迴圈寫進組件輸出到畫面上了!接下來我們來展開資料的編輯畫面!這篇會採組件重用的邏輯...

鐵人賽 自我挑戰組 DAY 25

技術 【DAY 25】react-router三劍客,Router、Route、Link(下)

【前言】   今天一樣不多說廢話,直接進主題。 【正文】   今天來介紹Link吧! Link就是提供我們導引到其他頁面的連結,會被render成<a&g...

鐵人賽 影片教學

技術 DAY30 React Tomorrow

DAY30 React Tomorrow 新一代 React API — React Hooks React Blog Redux React Router

鐵人賽 Modern Web DAY 26
一步一腳印的React旅程 系列 第 26

技術 [筆記][React]來做個作品吧!待辦事項「todolist」篇(6)-上吧!迴圈!

Hi!大家好啊!其實最後五篇的時候一直在作品中間鬼打牆XD,有時候想說這樣做,睡前又想說可以這樣做,起床改一改上班又想到另外一個作法,總之真的覺得第一次使用組件...

鐵人賽 Modern Web DAY 16

技術 Day16 - 貪吃蛇篇:加入蛇的身體

昨天我們已經讓蛇的頭部可以動起來,並且可以接受方向鍵的操作來改變方向。接下來我們要讓這隻蛇有身體,讓他成為一條名符其實的蛇。 前情提要 在 Day12 - 貪吃...

鐵人賽 影片教學 DAY 30

技術 DAY29 React Router

DAY29 React Router 範例程式碼:https://github.com/max80713/react-30-days 有任何問題都可以在 Yo...

鐵人賽 自我挑戰組 DAY 24

技術 【DAY 24】react-router三劍客,Router、Route、Link(中)

【前言】   最近壓力大、天氣變換大,我的皮膚又開始作怪了(暈,剩下最後七篇了! 【正文】   昨天介紹四種Router標籤,今天來介紹**Route**。 R...

鐵人賽 Modern Web DAY 15

技術 Day15 - 貪吃蛇篇:讓蛇的頭動起來

有了地圖之後,我們就可以開始讓蛇在上面爬了,今天我們的目標是畫出蛇的頭,並且可以操控他在地圖上跑來跑去。 新增蛇的物件 首先我們先來新增一個蛇的物件 const...

鐵人賽 Modern Web DAY 25
一步一腳印的React旅程 系列 第 25

技術 [筆記][React]來做個作品吧!待辦事項「todolist」篇(5)-寫下新增資料的里程碑

嗨囉!大家好啊!就像上一期(還是上上一期?)最後說的,今天就要來處理新增資料啦!話說剛剛在準備進度時,都沒經過任何測試,一次執行就過,讓我非常驚訝,一直在試是不...

鐵人賽 影片教學 DAY 29

技術 DAY28 React Redux 一家親

DAY28 React Redux 一家親 範例程式碼:https://github.com/max80713/react-30-days 有任何問題都可以在...

鐵人賽 自我挑戰組 DAY 23

技術 【DAY 23】react-router三劍客,Router、Route、Link(上)

【前言】   不怕我誤人子弟嗎QQ 【正文】   昨天我們簡單的利用react-router模擬一個SPA的網頁,今天我們就來說說Router、Route、Li...

鐵人賽 Modern Web DAY 24
一步一腳印的React旅程 系列 第 24

技術 [筆記][React]來做個作品吧!待辦事項「todolist」篇(4)-Redux登板,建立store

昨天把新增的表單處理完了!今天要來處理Redux的部分,雖然年代久遠,不知道大家還記不記得,忘記的話就當作複習,來做一次吧! 確認資料 在要做新作業的時候,最...

鐵人賽 Modern Web DAY 14

技術 Day14 - 貪吃蛇篇:畫出主畫面地圖

昨天 Day13 我們已經把畫面區塊規劃出來了,今天要來把主畫面地圖畫好。 地圖畫面座標系 我們需要一個 xy 軸的二維直角座標系,這邊我的做法是把地圖切成...

鐵人賽 影片教學 DAY 28

技術 DAY27 各司其職 - Container Component vs Presentational Component

DAY27 各司其職 - Container Component vs Presentational Component 範例程式碼:https://gith...