今天進入到全新的篇章 Redux 了！Redux 是 React.js 中很常拿來作為狀態管理使用的一個套件，在 Vue.js 的框架中也有一個 Vuex 是專...
這篇繼續介紹生命週期的另外兩個階段: Updating & Unmounting，以及了解元件在各個生命週期中更新 DOM 的兩個階段 Render P...
這篇要介紹的是 React 元件的生命週期(Life Cycle)。 要認識生命週期的話我們可以先從這個 Life Cycle 圖表網站 瞭解，以下兩張圖是從圖...
這篇要繼續介紹剩下的兩個元件。 SwitchTransition 元件 主要是用來渲染兩個狀態間做切換的過渡動畫，假如想要讓新元素加入和舊元素移除同時發生時出現...
這篇要來介紹一下一些能用 React 實現一些動畫效果的函式庫，首先介紹的就是本篇的主角 React Transition Group， React Trans...
在上一篇 Day 20 我們介紹了 React Router 的基本概念以及 React Router Dom 的三大類別元件的其中一個 Routes 的部分。...
這篇要來介紹 React router v5 加入的幾個 hook，包括 useParams、useHistory、useLocation、useRouteMa...
此篇章不會從頭開始介紹 React Router，而是挑選一些它的功能去做介紹，因此本篇的範例皆是從 React Router 官網找的範例。 React Ro...
在網頁開發技術蓬勃發展的現今，SPA （ Single Page Application ）單頁式應用已經逐漸地取代過往從遠端伺服器載入多筆不同頁面的 MPA...
在網站開發時有時候會使用到表單的元件，而表單內大多是採用 input 的欄位來搜集使用者的資料的。因此對於該欄位內的值要如何取用就是我們今天要為大家介紹的內容：...
在前面元件以及生命週期的章節中我們提過 render() 這個方法，而且有特別指出它是在 Class Component 所有生命週期當中唯一一個一定要使用的方...
結束了 React Hooks 的章節之後，今天要進入到網頁互動少不了的事件處理部分了。 在 React.js 當中針對 DOM 事件處理的方式和原本 Java...
昨天介紹了在 Function Component 中該如何操作 state 的方法（附上傳送門），今天這篇要來為大家介紹的就是第二個較常用到的 React H...
在第 15 天的文章中我們做了一個範例，現在我們要用 Redux Toolkit 去改寫它。 第一步 我們將原本範例的 store 和 reducer 做改寫。...
在這篇文章中，我們要來認識一個函式庫: Redux Toolkit。 Redux Toolkit 官網 Redux Toolkit 是什麼? 不知道讀者有沒有感...
昨天 Day 14 跟大家介紹了 React Hooks 的基本概念之後，今天就要馬上帶大家來看第一個 Hook 函式： useState() 的用法囉～ u...
今天總算進入到了 React.js 中大名鼎鼎的 React Hooks 這個章節了！ 這樣講可能很浮誇，但是當初在選擇框架學習時我就已經在搜尋引擎當中看到非常...
2022/08/03 補充 現在回來看發現自己以前寫的 Redux 還有很多要改進的地方，所以重構了一個範例，並使用了 custom hook useActio...
今天終於要進入到生命週期的最後一個階段： Unmounting 了！在元件要被卸載的這個階段會發生什麼事呢？ Unmounting 卸載 一個 Compon...
這篇主要會講述 Redux 的一些介紹，下篇才會開始進行實作。 Redux 是什麼? Redux 是專門管理 state 的函式庫，它可以將整個專案的 stat...
今天要來進入到生命週期的第二個環節： Updating 更新，繼上篇的 Mounting 元件掛載階段中提到過有一個方法是在 Updating 階段也會出現的，...
Formik 介紹 在進行實作之前，先來認識一下 Formik 吧~ 如標題所說，Formik 是一個表單函式庫，而且還是 React 官方推薦的，相似的還有...
在 Class Component 的章節中我們提到過，它有別於 Function Component 的地方就在於 State 和生命週期（ Lifecycl...
這次我們使用 Custom hook 進行表單的驗證。 首先我們建立一個檔案叫 useInputValidate.js ，裡面將會寫一個 Custom hook...
上篇 Day 09 跟大家介紹了 State 為何？所以今天就要來看看如何利用 setState() 這個方法修改或更新 State 物件內的值囉。 setS...
React 的表單驗證篇總共會三篇，這篇我們會自己手刻一個驗證輸入值是否合法的表單，而在後面兩篇文章，我將會介紹使用 custom hook 及有名的第三方函式...
在前面的篇幅中有提到， React.js 是採用元件式開發並可以設定每個元件不同的狀態（ State ）。所以今天我們就要帶大家來看看什麼是 State ？...
經過前面幾天的介紹，我們認識了許多常使用的 hooks，不過除了那些 hooks 之外，我們也可以將一些常用的共同程式邏輯抽取出來寫一個函式，這就是 Custo...
在 Day 06 和 Day 07 中，我們認識了 React.js 的兩個 Components : Function Component 和 Class C...
今天介紹的是 useCallback hook，透過它可以對一個函式重新執行的時機做出控制。 useCallback 真的是效能優化的利器?倒也不一定，看你怎...
SuoChan 阿關
harry xie
iThome鐵人賽
看影片追技術