在 2021 年 11 月初，React Router 正式釋出 v6 版本，身為 React 開發者已經按捺不住好奇心，想看看這個版本究竟增加了什麼功能?修改...
(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在 新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的...
(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在 新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的...
今天介紹的是 useCallback hook，透過它可以對一個函式重新執行的時機做出控制。 useCallback 真的是效能優化的利器?倒也不一定，看你怎...
今天介紹的是 useMemo hook，透過它可以記憶一個值。 useMemo 真的是效能優化的利器?倒也不一定，看你怎麼使用它，過度使用反而只是拖垮效能罷了...
在這篇文章中，我們要來認識一個函式庫: Redux Toolkit。 Redux Toolkit 官網 Redux Toolkit 是什麼? 不知道讀者有沒有感...
如前一章節中所述，有鑒於學習 React 其實非常仰賴 JavaScript 的一些基本功，因此我會建議一開始先不要著急，在開始 React 的學習之旅前可以先...
這個 hook 可以讓我們用類似 redux 用 reducer、action、dispatch 操作 state。 useReducer 適合較複雜的 sta...
讓開發者可以更容易的從母元件傳遞 state 到深層的子元件，並讓多個用到的 state 資料的元件可以隨著資料變動而更新。 語法 const value =...
前言 雖然說之前已經認識了 useCallback、useMemo，但有時還是對於什麼時候要用它們的時機有些模糊，所以就透過這篇文章釐清觀念。 首先要知道一點是...
對 React.js 有基本的概念後，我們就可以繼續往下學習該如何建置和使用它囉！ 開始環境建置 首先，要開始建立一個 React.js 專案的話，必須先在電...
2024/2 更新 - 實體書平裝版本上市 在經過快要一年的努力後，本系列文的實體書版本推出了～其中新增並補充了許多鐵人賽版本中沒有的脈絡與細節，並以全彩印刷拉...
Formik 介紹 在進行實作之前，先來認識一下 Formik 吧~ 如標題所說，Formik 是一個表單函式庫，而且還是 React 官方推薦的，相似的還有...
在瞭解了 React element 這種虛擬抽象層中的最小建構單位之後，我們來深入了解一下要如何讓 React elements 產生出對應的真實 DOM e...
就如同官方文件所描述的，React 是一個用於「打造 UI」的工具，而在瀏覽器中我們呈現 UI 的載體就是 DOM。DOM 與瀏覽器的畫面渲染引擎綁定，因此操作...
今天介紹的是避免重新渲染的 HOC(Higher Order Component) React.memo，透過它可以對元件重新渲染的時機做出控制。 React....
過去有很長一段時間中，開發環境的建置都被視為學習 React 的首要最大難關。由於 React 從非常早期的版本就已經擁抱 transpiler 與 moudl...
除了最核心的 useState 以及 useEffect 以外，在 React 中最常被我們使用到的內建 hooks 應該就屬 useCallback 以及 u...
從前面的章節中我們已經充分地了解到，當呼叫 setState 方法時就會觸發對應 state 定義的 component 的 re-render。然而當我們呼叫...
我自己在學習新技術的時候比較習慣先暸解一下這個技術的基本概念還有它解決了什麼問題。所以今天我要跟大家一起來看 React.js 到底是什麼？它又能夠幫我們做什...
React hooks 從 2019 年初推出以來也經過了幾年的時間，它以非常快的速度就發展成為 React 開發方式的絕對主流選擇。搭配 function c...
今天來到這次鐵人賽的最後一個章節：實作一個 React.js 的網站。這個網站會結合前面幾天所介紹過的 React.js 基礎來實作，所以在撰寫的同時也會一起複...
這篇主要會講述 Redux 的一些介紹，下篇才會開始進行實作。 Redux 是什麼? Redux 是專門管理 state 的函式庫，它可以將整個專案的 stat...
這篇會介紹 React 18 的一些更新和優化。 專有名詞 因為接下來的介紹會涉及到一些專有名詞，所以在這邊先幫讀者複習一下。 renderer(渲染器) 讀者...
今天我們來認識一個相當常使用的 hook: useState。 語法 const [currentValue, setCurrentValue] = useSt...
今天要介紹的是可以用來操作 DOM 元素的 useRef 及和它有關的 hook useImperativeHandle。 功用和特性 ref 是一個包含 cu...
React 採用了上一篇文章中所介紹的的 Virtual DOM 概念來實作抽象層，以產生並管理瀏覽器畫面中的真實 DOM。而在 React 中的每一個 Vir...
在前面的章節中我們已經詳細的解析了 useEffect 正確的概念以及用法，也再三強調了 useEffect 的用途是同步資料到 React elements...
在前面的章節中，我們已經詳細的解析了 React element 相關的核心概念以及建立的方法。不過當你去參考絕大多數的 React 專案的程式碼時，你會發現幾...
這篇要來介紹 React router v5 加入的幾個 hook，包括 useParams、useHistory、useLocation、useRouteMa...
harry xie
Andy Chang
Zet
SuoChan 阿關
iThome鐵人賽
看影片追技術