iT邦幫忙

react相關文章
共有 560 則文章
鐵人賽 Modern Web DAY 8

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

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

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

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

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

鐵人賽 自我挑戰組 DAY 16

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

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

鐵人賽 Modern Web DAY 7

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

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

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

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

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

鐵人賽 自我挑戰組 DAY 15

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

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

鐵人賽 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是描述發生什麼事的物件,red...

鐵人賽 自我挑戰組 DAY 13

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

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

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

技術 [筆記][React]當React遇上Redux(2)-資料的傳遞方式

Hello!大家好!昨天初步認識了Redux後(真的非常初步XD),知道他如何管理資料了,那今天要來說說在Redux手上的資料該怎麼傳給React的組件!就請各...

鐵人賽 自我挑戰組 DAY 12

技術 【DAY 12】利用Redux發射愛的Action吧

【前言】   最近加班都到好晚,工作上一切都好不順利(暈,每天希望自己不要扯後腿,但好像都瘋狂在扯後腿,對前輩整個很不好意思......嗚嗚嗚。但還是要得抽時間...

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

技術 [筆記][React]當React遇上Redux(1)-初次見面

Hello!大家好啊!就算標題讓人搞不清楚狀況,但是點進來的時候應該還沒忘記昨天的成就感吧XD,為了能夠在最後獲得更大的滿足,今天再來開始繼續學習吧! 介紹R...

鐵人賽 自我挑戰組 DAY 11

技術 【DAY 11】Redux不是小三!它只是和ReactJS較契合!

【前言】   完成三分之一的鐵人賽,接下來的文章要來介紹我最害怕的東西「Redux」,為什麼我要這麼說?因為即便我知道它的Redux概念是什麼,要我直接手寫出來...

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

技術 [筆記][React]使用React開發的思考模式(3)-最後來個小範例吧!

這一節我們來用前幾篇文章學到的一切來做個小範例吧!不知道大家在學網頁時,第一個嘗試的是什麼?當然這邊指的是除了Hello world!之外的XD,小弟我啊!遙想...

鐵人賽 自我挑戰組 DAY 10

技術 【DAY 10】這樣我們關係有比較近了嗎?ReactJS

【前言】   前幾天我們建構了一些React的一些基礎觀念,這篇會稍微整理一下內容,並提供一些其他的網站給予參考。 【正文】   剛開始我們稍微對ReactJS...

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

技術 [筆記][React]使用React開發的思考模式(2)-組件的構成模式

Hi!恭喜踏入第11篇!完成1/3的賽程了!這樣子一直倒數心態是不是不太好XD,不過我還是很沈醉在給自己壓力的,哈哈哈,但是結束後還是讓我耍廢一陣子吧!欸?現在...

鐵人賽 自我挑戰組 DAY 9

技術 【DAY 09】利用狀態提升重新撰寫一次TodoList吧!

【前言】   前幾天我們做的練習基本上都是放在同個Component檔案下,但事實上我們會切分Component,一來可以達到Component的可覆用性、可維...

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

技術 [筆記][React]使用React開發的思考模式(1)-記得把共同狀態提升

前面幾篇文章把React基本的用法都說完了,剩下的就是該如何將它應用在實務面中,所以接下來我會試著和各位一同做出一些小作品,但是在那之前,我們得先了解如何正確的...

鐵人賽 自我挑戰組 DAY 8

技術 【DAY 08】React Component也有生老病死?(下)

【前言】   昨天稍微提到了React component的其中兩個生命週期componentDidMount和componentWillUnmount。今天就...

鐵人賽 Modern Web DAY 9

技術 [筆記][React]受不受控的Component與Form表單

Hello!大家好!剛剛差一點點點就睡著了,真是完全都不能懈怠下來,不然我的隊友會殺了我XD,今天要說的東西主要是受控組件(Controlled Compone...

鐵人賽 自我挑戰組 DAY 7

技術 【DAY 07】React Component也有生老病死?(上)

【前言】   昨天講完Refs,會不會覺得目前React已經很煩了呢?希望你不會......XD 【正文】   今天要來聊聊React Component的生命...

鐵人賽 Modern Web DAY 8

技術 [筆記][React]用 for 迴圈處理Component

HI!大家好,這一篇和前一篇應該會比較輕鬆,畢竟說的都是天天陪伴著大家的語法XD,加上在JSX中處理Element真的變得很容易上手,因為就和原生的JavaSc...

鐵人賽 自我挑戰組 DAY 6

技術 【DAY 06】React!還有?refs你別來好不?

【前言】   前兩篇講到props、state,可是阿,有時候看到滿滿jquery的特效就很想拿來react用,可是jquery那些都要直接對實體DOM做操作;...

鐵人賽 Modern Web DAY 7

技術 [筆記][React]用 if 條件式來控制Component

終於進入條件篇了!這是鐵人賽開始的第一個禮拜,一直不敢想後面還有三個禮拜,不然會瞬間變得非常喪失鬥志XD if的用法: 只要稍微有接觸過程式的大大對if應該都...

鐵人賽 Modern Web DAY 6

技術 [筆記][React]進入Component的事件處理篇!

Hello!大家好啊!明明才第六篇而已,感覺卻快被榨乾了XD。 前兩天我們的例子都圍繞在計時器身上,但是真正的網頁可沒有那麼簡單,因為還有使用者這種生物在,身為...

鐵人賽 自我挑戰組 DAY 5

技術 【DAY 05】React!說,State又是誰啊?

【前言】   昨天我們講到Props是由父層傳遞下去,不過有時候我們要讓Component本身對自己做相關的狀態變更或是Component變化,那這時候應該要怎...

鐵人賽 Modern Web DAY 5

技術 [筆記][React]Component的狀態State及生命週期Lifecycle

HI!上一篇我們提到了可以用Props可以從外部傳進值,就像以下做法,今天進入正文的也太突然了XD: //建立一個NowTime組件類別顯示目前時間 class...

鐵人賽 自我挑戰組 DAY 4

技術 【DAY 04】React!說,Props是誰啊?

【前言】   昨天我們實作了第一個React Component了,有沒有覺得自己有沒有變強了一點呢?這篇要來介紹一下React的Props屬性囉! 【正文】...

鐵人賽 自我挑戰組 DAY 3

技術 【DAY 03】Hello, React! 我終於印出你了!

【前言】   昨天我們很簡(ㄙㄨㄟˊ)略(ㄅㄧㄢˋ)的介紹ES6、Babel、JSX之後,我們要來使用React撰寫我們第一個Component囉! 【正文】...