昨天 Day 14 跟大家介紹了 React Hooks 的基本概念之後，今天就要馬上帶大家來看第一個 Hook 函式： useState() 的用法囉～ u...
在這篇文章中，我們要來認識一個函式庫: Redux Toolkit。 Redux Toolkit 官網 Redux Toolkit 是什麼? 不知道讀者有沒有感...
今天總算進入到了 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 真的是效能優化的利器?倒也不一定，看你怎...
上一篇介紹了元件和 React Component 其中之一的 Function Component 的基本概念後，今天就要接著帶大家來看 React Comp...
今天介紹的是 useMemo hook，透過它可以記憶一個值。 useMemo 真的是效能優化的利器?倒也不一定，看你怎麼使用它，過度使用反而只是拖垮效能罷了...
今天介紹的是避免重新渲染的 HOC(Higher Order Component) React.memo，透過它可以對元件重新渲染的時機做出控制。 React....
今天要跟大家介紹的是 React Component 中的 Function Component 。我們曾經在 Day 02 的時候提及到 React.js 是...
這個 hook 可以讓我們用類似 redux 用 reducer、action、dispatch 操作 state。 useReducer 適合較複雜的 sta...
我們昨天 Day 04 的時候在 App.js 檔案中有看到以下的程式碼：不過，為什麼能夠在一個 JavaScript 函式中撰寫看起來像是 HTML 標籤的東...
還記得我們在 Day 02 的時候有跟大家提到 React.js 是使用 Virtual DOM 的概念來進行渲染的嗎？那今天就一起來看看什麼是 Virtual...
讓開發者可以更容易的從母元件傳遞 state 到深層的子元件，並讓多個用到的 state 資料的元件可以隨著資料變動而更新。 語法 const value =...
對 React.js 有基本的概念後，我們就可以繼續往下學習該如何建置和使用它囉！ 開始環境建置 首先，要開始建立一個 React.js 專案的話，必須先在電...
今天要介紹的是可以用來操作 DOM 元素的 useRef 及和它有關的 hook useImperativeHandle。 功用和特性 ref 是一個包含 cu...
我自己在學習新技術的時候比較習慣先暸解一下這個技術的基本概念還有它解決了什麼問題。所以今天我要跟大家一起來看 React.js 到底是什麼？它又能夠幫我們做什...
今天要介紹的是常用的 hook，useEffect。 功用 React 元件本身是純函式，但還是有要處理到 side effect 的時候，而若要處理各種針對渲...
今天我們來認識一個相當常使用的 hook: useState。 語法 const [currentValue, setCurrentValue] = useSt...
哈囉大家好！我是阿關 是說第一次參加鐵人賽就想要挑戰一個自己完全不熟悉的題目我也是覺得自己蠻有勇氣的啦～ 如標題所言，接下來的這 30 天我會在這邊紀錄我開始學...
SuoChan 阿關
harry xie
iThome鐵人賽
看影片追技術