iT邦幫忙

react相關文章
共有 1540 則文章
鐵人賽 自我挑戰組 DAY 23

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

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

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

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

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

鐵人賽 Modern Web DAY 14

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

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

鐵人賽 自我挑戰組 DAY 15

技術 與工程師的協作之路-我與React前端工程師的協作模式

今天跟大家分享一套協作模式! 目前,我負責的部分是UI與切版,可是前端要使用react技術。(當然,不是每間公司都是這樣的工作職責分配,切版有時候不一定是設計師...

鐵人賽 自我挑戰組 DAY 22

技術 【DAY 22】react-router,實現單頁式網站的秘密

【前言】  終於來到最後的react-router囉!再撐一下就可以把這三劍客都認識一遍了!【正文】  我想大家應該都很常聽到什麼SPA、單頁式網站、Singl...

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

技術 [筆記][React]來做個作品吧!待辦事項「todolist」篇(3)-開始添加事件篇

Hi!大家好!一天做一點點的感覺有點像以前買的科學雜誌XD,要從創刊號慢慢蒐集到最後,把所有的贈品都留下來才能組合出一個完整的東西,哈哈! 話說剛露營回來,不知...

鐵人賽 Modern Web DAY 13

技術 Day13 - 貪吃蛇篇:頁面佈局規劃

頁面佈局規劃 如同前篇遊戲 Tic Tac Toe 一樣,我們要來規劃一下遊戲的畫面,因為我希望我們貪吃蛇的遊戲在電腦上可以玩,在手機上也可以玩,所以我想要把遊...

鐵人賽 自我挑戰組 DAY 21

技術 【DAY 21】暫且休息一天,聊聊目前學習的心境。

【前言】  這篇不會有什麼新東西,只會有一堆廢話......嗚嗚嗚【正文】  話說也踏入前端五個月了,也就代表學習react五個月,然後也意味著被react荼毒...

鐵人賽 Modern Web DAY 12

技術 Day12 - 貪吃蛇篇:蛇的原理及資料結構規劃

事前聲明 在挑戰鐵人賽之前,其實我也完全沒有想過貪吃蛇要怎麼做,所以為了做這次的貪吃蛇遊戲,我找了一些資料。其中對我幫助很大的是墨雨設計吳哲宇老師在 hahow...

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

技術 [筆記][React]來做個作品吧!待辦事項「todolist」篇(2)-製作組件初階篇

Hi啊!因為昨天雄心壯志下了決心要完成作品,今天也只能繼續做下去了XD,就從昨天的進度step1開始吧! ㄛ對了,這時間點看到我還滿神奇的對吧XD,因為小弟我明...

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

技術 [筆記][React]來做個作品吧!待辦事項「todolist」篇(1)-用React-Router做選單

Hi!各位,想不到吧,已經到了最後十篇了,感覺真不想結束呢! 才怪!明明天天都在倒數文章數量XD,雖然這一趟很累,但是還是得要對自己來個期末測驗才行!所以接下來...

鐵人賽 Modern Web DAY 11

技術 Day11 - 貪吃蛇篇:前言及功能構想

前言 談到經典小遊戲,除了圈圈叉叉遊戲之外,還有一個家喻戶曉的遊戲,就是貪吃蛇,雖然現在智慧型手機和各種遊戲機的遊戲越做越華麗,越來越炫砲,但是經典的遊戲終究還...

鐵人賽 自我挑戰組 DAY 20

技術 【DAY 20】redux你就到這裡吧,讓我們邁向下個階段

【前言】  這篇會是redux的複習索引,下篇開始就是react-router囉!【正文】  一開始我們先介紹了redux的概念,也強調它可以單獨使用,不是一定...

鐵人賽 自我挑戰組 DAY 19

技術 【DAY 19】redux的那些兩三事

【前文】  廢話不多說,直接進正文。【正文】  一般來說,以往用redux所做的action、reducer、store,在程式傳遞的時候都是同步執行的,也就是...

鐵人賽 Modern Web DAY 10

技術 Day10 - Tic Tac Toe篇:Single Play機制

Single Play機制 昨天完成判斷勝負功能之後,我們剩下最後一個功能,就是讓玩家可以跟電腦對弈,回憶一下 Day03 的時候,我們有設計一個 isSing...

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

技術 [筆記][React]React網頁好朋友Router(4)-搞懂Route的component、render和children

Hi!大家好啊!想不到又重回最初的Route篇了吧!不過其實一開始也根本沒有說到他過XD,連他的小跟班match都提過了,就是沒有好好解釋過Route這個組件,...

鐵人賽 自我挑戰組 DAY 18

技術 【DAY 18】更快的撰寫action跟reducer吧!redux-actions參上

【前言】  終於先把基本的redux告一段落了......可是工作上的進度還是大延遲(嘆氣【正文】  採用以往的方式撰寫action、reducer的確可行,但...

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

技術 [筆記][React]React網頁好朋友Router(3)-Switch和轉址王Redirect

Hi啊大家好!這幾天我一直在想該怎麼打出一篇好文章(雖然鐵人賽都過一半了XD),但這也是鐵人賽一路走來才會思考到的事情吧?在一天一篇文章持續30天的過程中,該怎...

鐵人賽 Modern Web DAY 9

技術 Day09 - Tic Tac Toe篇:勝負判斷方法(2/2)

勝負判斷分析 昨天完成了 row 方向和 column 方向的勝負判斷,今天我們要來完成右斜和左斜方向的勝負判斷,我這邊先把這兩個方向命名為 forwardSl...

鐵人賽 自我挑戰組 DAY 17

技術 【DAY 17】利用redux與react搭配在做出一個to do list吧!(下)

【前言】  最近工作不順到覺得很挫折、壓力也很大,我覺得Redux跟我不是好朋友了。這不是我想的這樣啊(哭,繼續加油對自己打氣吧! 【正文】  昨天把conta...

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

技術 [筆記][React]React網頁好朋友Router(2)-掌握match是成功的一半

Hi,大家好,昨天介紹了一些關於Router的基本用法,也解決了在實作時遇到的一些問題,不過在都已經解決掉的現在就讓我們繼續學習吧! match 在Router...

鐵人賽 Modern Web DAY 8

技術 Day08 - Tic Tac Toe篇:勝負判斷方法(1/2)

勝負判斷分析 窮舉法 在 3x3 的圈圈叉叉遊戲中,獲勝的組合只有 8 種,以上圖為例,每個格子裡面的數字代表 block id,我們窮舉出所有獲勝連線: /...

鐵人賽 自我挑戰組 DAY 16

技術 【DAY 16】利用redux與react搭配在做出一個to do list吧!(中)

【前言】  又是一個禮拜的煎熬......但還是得要繼續看redux,加油加油【正文】  昨天把presentational component順勢寫完了,今天...

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

技術 [筆記][React]React網頁好朋友Router(1)-基本用法篇!

Hi!大家好啊!React旅程走到這裡開始覺得有點累了XD,下班放假都還是不能忘記準備文章,嗚嗚...不過和不只報名一個系列的大大們來說,還算是算小咖了,希望這...

鐵人賽 Modern Web DAY 7

技術 Day07 - Tic Tac Toe篇:勝負判斷事前準備

到目前為止,我們伸縮自如的圈圈叉叉遊戲已經很像樣了,但是目前判斷勝負的工作還是需要玩家自己來判斷。我們希望電腦可以幫助我們判斷勝負,這樣就不用自己在那邊算自己是...

鐵人賽 自我挑戰組 DAY 15

技術 【DAY 15】利用redux與react搭配在做出一個To do list吧!(上)

【前言】  呼~~終於進行到一半了(灑花!越來越不知道前言要寫什麼來湊字數了XD【正文】  在這次的範例,我們要利用redux與react再次做一個to do...

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

技術 [筆記][React]React的目錄結構篇

Hi!大家好啊!因為大家的支持!鐵人賽總算過一半了!希望剩下來的賽程請各位大大繼續指教! 話說今天為了研究一個東西浪費了一堆時間,讓我現在感覺很沒勁,哈哈哈(超...

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

技術 [筆記][React]當React遇上Redux(3)-從React組件操作Reducer

Hihi!大家好!這樣子的開頭還要在鐵人賽結束前繼續用下去,請大家多多包涵XD,昨天我們已經能夠從Redux中取到資料了,今天要來說說該怎麼把透過React來觸...

鐵人賽 自我挑戰組 DAY 14

技術 【DAY 14】狀態儲存在redux的Store中吧!

【前言】  前兩篇我們介紹了action和reducer ,這次不多說廢話直接進到正文吧!【正文】  前面一直強調action是描述發生什麼事的物件,reduc...

鐵人賽 自我挑戰組 DAY 13

技術 【DAY 13】對方聽不懂?那就讓Reducer來幫你一把吧!

【前言】  終於來到假日了,身為一個朝八晚八的厭世工程師(什麼時候會離職或被火掉我也不知道),既然挑戰了鐵人賽,那就努力的把它做完吧(笑)!昨天講到action...