上一篇建立完角色陣容後，今天要來做已選取的角色陣容。在 component 資料夾中新增 HeroList.js import React, { Compone...
從激戰ReactJS系列開始以來為了滿足多到溢出來的好奇心以及證實自己理解的概念是否正確我們寫了很多小小小小測試程式這些程式裡面有一個共同點就是他們都有使用到r...
mapping dispatch to props import { bindActionCreators } from 'redux'; import {...
Events 開發網頁程式會需要很多不同的互動事件（Events）React 是開發網頁程式的工具之一所以勢必也可以使用這些 events今天就來稍微介紹一下...
介面的呈現 在做好基本功能之後，先來把介面刻完，然後就可以把功能 map 到 UI 元件上了。除了 import React 和 component 之外，我們...
接續昨天在 index.js 寫完 reducer 的程式碼，現在要把這些程式碼分別放進各自的 reducer 裡，實現最結構化的撰寫模式。我們在 reduce...
前面說明了組件的生命週期那這篇就要來介紹常常會使用到的三個 Component API setState 呼叫setState可以更新組件的 state並且會通...
Action 的設定 有 provider，有 store，有 reducer，明星三缺一，現在只缺 action 啦！第一個要定義的 action，就來寫寫選...
隨著生命的不同階段需要做的事情都不相同以上是廢話不過這道理在程式的世界也是一樣Component 也有它的生命週期這篇的目標就是要了解組件的生命週期以及每個階段...
這次要做的專案是遊戲角色選取的應用程式做出來的應用程式大概會像這樣： 可以從左邊的角色選項選取到右邊，陣容狀態會依被選取的角色而不斷更動。 建置環境 在專案資...
在上一篇的程式碼中出現了this.props.XXX這種長相的東西這一篇就要來仔細的看看究竟這是什麼神奇的東東囉 Props props 的中文翻譯是道具在這裡...
State 在上一篇的最後有稍微提到組件（components）是可以透過 state 攜帶狀態資料state 是 constructor 中的一部分換句話說他...
後面這二十天，將專攻 Redux，一樣也是透過做中學的方式來理解 Redux。首先，官方文件是必備材料：Redux 官方中文文件 另外，這一篇 Code Car...
做 SPA 囉~~ 唉不是！此 SPA 非彼 SPA。。。。 今天要學習 React router，並透過 Single Page Application(SP...
Components 組件（Components）可以說是React中的精隨在 React 的世界中網頁上我們所能夠看見的所有東西都可以是一個獨立的元件也就是本...
在前篇為了測試環境於是直接將程式碼拿來使用在那些程式碼裡面有個副檔名.jsx的東東聽說是 React 一個非常好用的語法那麼就用今天的筆記好好的來認識一下囉~...
今天，要來學習 to-do app 中的 Action 先在 js 資料夾下創建一個 actions 資料夾，裡面新增一個 TodoActions.js在 ac...
新增 dispatcher.js 檔案，並在 TodoStore.js 裡註冊 dispatcher import { Dispatcher } from &q...
前一篇已經把所有需要事前安裝的東西們來歷用法都弄清楚了所以本篇要把環境架起來並且運行範例程式碼確認建置的環境是可以運行ReactJS的 環境建置 首先建立一個根...
React工具包 常常在做環境建置的工作的時候我們都只有乖乖的跟著教學走其實常常很好奇到底裝的都是些什麼然後能幹嘛但始終都被龐大數量的指令搞得頭昏腦脹而沒有真的...
知己知彼才能百戰百勝開始激戰之前要先探探敵情才是所以這篇主要是對 ReactJS 做基本的介紹 本篇為針對ReactJS的行前說明，程式碼的部分後面會另外再分篇...
Flux Introduction 大家好，很高興可以在鐵人賽這個公眾場合上自我介紹，前幾年我也都有受邀來自介，很開心大家找我朋友 React，最後都會找到我這...
呈現符合搜尋的結果 首先，我要先把寫死的 Toothpaste 產品資訊替換掉，替換成可以動態塞入符合搜尋結果的程式碼。 在 Results 這個 compon...
前言 ReactJS是我在不久前接觸到較新的技術當時用起來的心得實在是似懂非懂又沒有足夠的時間透徹研究導致對於基本概念機近全無只有簡單的知道他是什麼東東而已 然...
取得 input 的值 昨天做到 input event 的綁定，不過尚未取得 input 的值，在 handleQuery 裡，我們可以用 event.tar...
前面幾篇的做法，我都是直接引用 CDN 來操作。我們還有第二種方法可以 include React，就是透過第二篇介紹過的 Webpack，所以今天就來學學 W...
今天要介紹如何即時得到使用者輸入的色碼，並即時 render 到氣球上。DEMO 建立 Component 首先，建立一個 Balloon component...
皮卡丘就這麼跑進我的文章裡。。。 目前我的專案長這樣~ 我一樣用電子名片這個專案來學習 React props 的運作原理，今天也會將我預先儲存在 json 裡...
今天講解把如何模組化程式碼 前提：我們目前所有的程式碼都放在 index.html 裡面，分別嵌入了 React, React-dom, babel 的 CDN...
把整張名片作為一個 component 每一個 component 外層都會用一個 class 包起來。extends 指的是 React.component...
TSAI
洪啟瑞
iThome鐵人賽
看影片追技術