感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書...
【前言】 昨天我們很簡（ㄙㄨㄟˊ）略（ㄅㄧㄢˋ）的介紹ES6、Babel、JSX之後，我們要來使用React撰寫我們第一個Component囉！ 【正文】...
Hi！大家好啊！其實最後五篇的時候一直在作品中間鬼打牆XD，有時候想說這樣做，睡前又想說可以這樣做，起床改一改上班又想到另外一個作法，總之真的覺得第一次使用組件...
鐵人賽進入尾聲了，基礎也都帶過了，最後就來介紹一些自己在寫 React 時常搭配的套件吧。 Material UI Material UI官網 這個函式庫針對...
今天要來介紹在 React 中如何建構最基本的 form。 重點可以歸納出這幾項： 建立 state 變數，且與 input value 做綁定 設定 onC...
昨天我們已經讓蛇的頭部可以動起來，並且可以接受方向鍵的操作來改變方向。接下來我們要讓這隻蛇有身體，讓他成為一條名符其實的蛇。 前情提要 在 Day12 - 貪吃...
前情提要及動機 在 Day11 的功能構想中我們有提到，雖然到昨天 Day19 整個貪吃蛇遊戲已經很完整了，但是有一點美中不足的地方，就是透過手機開啟這個遊戲的...
後面這二十天，將專攻 Redux，一樣也是透過做中學的方式來理解 Redux。 首先，官方文件是必備材料： Redux 官方中文文件 另外，這一篇 Code C...
這次要做的專案是遊戲角色選取的應用程式 做出來的應用程式大概會像這樣： 可以從左邊的角色選項選取到右邊，陣容狀態會依被選取的角色而不斷更動。 建置環境 在專...
【前言】 呼～～終於進行到一半了（灑花！越來越不知道前言要寫什麼來湊字數了XD 【正文】 在這次的範例，我們要利用redux與react再次做一個to...
今天將直接實作 redux，如果不知道 redux 運作概念的讀者可以回去看看昨天的概念介紹喔～ 今天嘗試將 dark theme 與 light theme...
火紅的 React，建立元件銳不可擋，今天來寫一個 Hello World 的 React 元件，然後示範該如何透過 webpack 以及 babel 來 bu...
【前言】 又是一個禮拜的煎熬......但還是得要繼續看redux，加油加油 【正文】 昨天把presentational component順勢寫完了...
今天，要來學習 to-do app 中的 Action 先在 js 資料夾下創建一個 actions 資料夾，裡面新增一個 TodoActions.js 在 a...
先上圖，不囉嗦。 這邊還只有UI的功能而已，補上三支code! ReadingListWidget 準備要專門與後端溝通! 還有包裝component進去。...
【前言】 昨天我們講到Props是由父層傳遞下去，不過有時候我們要讓Component本身對自己做相關的狀態變更或是Component變化，那這時候應該要怎...
昨天講解了 props 的應用，讓子元件可以接收來自父元件的資料。 但是隨著應用規模的提升，透過型別檢查可以減少許多可能的錯誤。 要達成這個目的，許多人會選擇...
昨天把新增的表單處理完了！今天要來處理Redux的部分，雖然年代久遠，不知道大家還記不記得，忘記的話就當作複習，來做一次吧！ 確認資料 在要做新作業的時候，最...
前言 今天要和大家介紹的是 SPA， 是一種提升用戶在瀏覽網頁時的技術， 傳統式的網頁在切換頁面時，都會送出一個 Url 給服務器，之後服務器會依它收到的 Ur...
前言 進到入最後一個章節，本篇章開始會持續說明如何將 TypeScript 導入 React 專案裡，最後會再和大家介紹筆者怎麼在專案裡運用 TypeScrip...
Create meme items 昨天把 API 裡的 meme names 都 render 出來之後，我們今天要把圖片呈現出來。 先在 component...
【前言】 昨天稍微提到了React component的其中兩個生命週期componentDidMount和componentWillUnmount。今天就...
到昨天為止都著重在 JS 的部分，基本的功能已經可以完成了，但除了功能以外，網頁應用的外觀也是很重要的，所以今天就暫時把 JS 擺在一邊，看看在 React 中...
頁面佈局規劃 如同前篇遊戲 Tic Tac Toe 一樣，我們要來規劃一下遊戲的畫面，因為我希望我們貪吃蛇的遊戲在電腦上可以玩，在手機上也可以玩，所以我想要把遊...
【前言】 咳咳，我是Hyora，一個剛滿四個月、天天都很厭世、擔心什麼時候會被火掉的超廢前端工程師。雖是本科系出身，但大學程式課程要不是低空飛過，不然就是能...
※取自《大話西遊之仙履奇緣》劇照 這故事要從20年前說起。 (現在流行網路上的圖原封不動地抄襲拿來用，若有不小心盜圖侵權，請務必來信告知，本人馬上把圖片下架，...
上一章 Day 26 - React Router And Link 在做前端頁面時, 許多人都使用Bootstrap 簡單易用, 大大的加快了開發速度 而它也...
昨天講到了 class based component 可以透過 shouldComponentUpdate 比較前一次 props 與 前一次 state 來...
mapping dispatch to props import { bindActionCreators } from 'redux'; import {...
繼上一篇 <22 - React 上陣> Webpack - Babel - React 聯手，已經做好基本的安裝與設定，接下來要更進一步寫多個元件...
pjchender
Hyora
神Q超人
莫力全 Kyle Mo
Taiming
anniesnoopymd
Carlos Chang
Joseph-bug
Ivan
Aiden
iT 邦幫忙鐵人賽