前面說明了組件的生命週期那這篇就要來介紹常常會使用到的三個 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工具包 常常在做環境建置的工作的時候我們都只有乖乖的跟著教學走其實常常很好奇到底裝的都是些什麼然後能幹嘛但始終都被龐大數量的指令搞得頭昏腦脹而沒有真的...
Flux Introduction 大家好，很高興可以在鐵人賽這個公眾場合上自我介紹，前幾年我也都有受邀來自介，很開心大家找我朋友 React，最後都會找到我這...
知己知彼才能百戰百勝開始激戰之前要先探探敵情才是所以這篇主要是對 ReactJS 做基本的介紹 本篇為針對ReactJS的行前說明，程式碼的部分後面會另外再分篇...
呈現符合搜尋的結果 首先，我要先把寫死的 Toothpaste 產品資訊替換掉，替換成可以動態塞入符合搜尋結果的程式碼。 在 Results 這個 compon...
取得 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...
前言 ReactJS是我在不久前接觸到較新的技術當時用起來的心得實在是似懂非懂又沒有足夠的時間透徹研究導致對於基本概念機近全無只有簡單的知道他是什麼東東而已 然...
把整張名片作為一個 component 每一個 component 外層都會用一個 class 包起來。extends 指的是 React.component...
Codepen 是寶庫！！ 我是一個喜歡把玩顏色、嘗試各種介面風格的人，因此 codepen 是我經常使用的工具，更棒的是，可以在上面看到各種高手，用著千奇...
日曆 DEMO 時間誠可貴，參加鐵人賽方得時間更加珍貴 我們可以直接把要呈現在 DOM 的內容直接寫在 ReactDOM.render() ，不過通常我們...
簡易起手式，我使用 CDN 引入 React 來理解 React 的運作原理 我們需要的 CDN 有三個： 最基本的 React CDN React 在 0....
一個 React 的專案中我們需要什麼樣的函式庫？ React.js core library React DOM library 這次不僅學習 React...
鼓起勇氣挑一個沒有接觸過的 ReactJS 來挑戰希望在這30天內可以盡最大所能挖掘 React 的奧秘！ 作品懶人包由於我喜歡嘗試各種新的可能因此在這30天內...
鐵人賽最後一天了，也是我這系列的最後一篇文章。 在我的號召之下，公司其他兩位同事也一起參加鐵人賽，順便PO上他們的文章: 美術篇: http://ithelp...
洪啟瑞
TSAI
Joseph-bug
iThome鐵人賽
看影片追技術