在 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 是什麼? 不知道讀者有沒有感...
這個 hook 可以讓我們用類似 redux 用 reducer、action、dispatch 操作 state。 useReducer 適合較複雜的 sta...
前言 雖然說之前已經認識了 useCallback、useMemo，但有時還是對於什麼時候要用它們的時機有些模糊，所以就透過這篇文章釐清觀念。 首先要知道一點是...
如前一章節中所述，有鑒於學習 React 其實非常仰賴 JavaScript 的一些基本功，因此我會建議一開始先不要著急，在開始 React 的學習之旅前可以先...
讓開發者可以更容易的從母元件傳遞 state 到深層的子元件，並讓多個用到的 state 資料的元件可以隨著資料變動而更新。 語法 const value =...
對 React.js 有基本的概念後，我們就可以繼續往下學習該如何建置和使用它囉！ 開始環境建置 首先，要開始建立一個 React.js 專案的話，必須先在電...
Formik 介紹 在進行實作之前，先來認識一下 Formik 吧~ 如標題所說，Formik 是一個表單函式庫，而且還是 React 官方推薦的，相似的還有...
我自己在學習新技術的時候比較習慣先暸解一下這個技術的基本概念還有它解決了什麼問題。所以今天我要跟大家一起來看 React.js 到底是什麼？它又能夠幫我們做什...
今天介紹的是避免重新渲染的 HOC(Higher Order Component) React.memo，透過它可以對元件重新渲染的時機做出控制。 React....
鐵人賽 Day24自己做一個價值幾十萬的動態網站 第二十四課：resveration 將optionsContext條件行為計算後，同步更新到各個需要的comp...
這篇會介紹 React 18 的一些更新和優化。 專有名詞 因為接下來的介紹會涉及到一些專有名詞，所以在這邊先幫讀者複習一下。 renderer(渲染器) 讀者...
在瞭解了 React element 這種虛擬抽象層中的最小建構單位之後，我們來深入了解一下要如何讓 React elements 產生出對應的真實 DOM e...
就如同官方文件所描述的，React 是一個用於「打造 UI」的工具，而在瀏覽器中我們呈現 UI 的載體就是 DOM。DOM 與瀏覽器的畫面渲染引擎綁定，因此操作...
今天要介紹的是可以用來操作 DOM 元素的 useRef 及和它有關的 hook useImperativeHandle。 功用和特性 ref 是一個包含 cu...
過去有很長一段時間中，開發環境的建置都被視為學習 React 的首要最大難關。由於 React 從非常早期的版本就已經擁抱 transpiler 與 moudl...
今天我們來認識一個相當常使用的 hook: useState。 語法 const [currentValue, setCurrentValue] = useSt...
在第 15 天的文章中我們做了一個範例，現在我們要用 Redux Toolkit 去改寫它。 第一步 我們將原本範例的 store 和 reducer 做改寫。...
2024/2 更新 - 實體書平裝版本上市 在經過快要一年的努力後，本系列文的實體書版本推出了～其中新增並補充了許多鐵人賽版本中沒有的脈絡與細節，並以全彩印刷拉...
Gatsby可以以Markdown作為資料來源自動產生頁面，這讓我們可以輕易的建立Blog之類的網站：寫blog只需寫markdown。 YouTube Vid...
鐵人賽大綱 在這次鐵人賽的挑戰中，主要的目標是希望自己和讀者們可以更加認識 React.js 或者是複習一下以前學過的知識，所以安排了幾個單元來進行介紹，預期介...
React 採用了上一篇文章中所介紹的的 Virtual DOM 概念來實作抽象層，以產生並管理瀏覽器畫面中的真實 DOM。而在 React 中的每一個 Vir...
從前面的章節中我們已經充分地了解到，當呼叫 setState 方法時就會觸發對應 state 定義的 component 的 re-render。然而當我們呼叫...
經過前面幾天的介紹，我們認識了許多常使用的 hooks，不過除了那些 hooks 之外，我們也可以將一些常用的共同程式邏輯抽取出來寫一個函式，這就是 Custo...
在前面的章節中，我們已經詳細的解析了 React element 相關的核心概念以及建立的方法。不過當你去參考絕大多數的 React 專案的程式碼時，你會發現幾...
這篇要來介紹 React router v5 加入的幾個 hook，包括 useParams、useHistory、useLocation、useRouteMa...
harry xie
Andy Chang
Zet
SuoChan 阿關
K.o
Zack
iThome鐵人賽
看影片追技術