昨天學習了 React 的 batching 的概念、「替代」和「做」的區別、當次渲染的邏輯,今天要來學習如何在 state 中更新物件。學習前讓我們再次回憶起...
昨天已經先認識了Vuex和Redux這兩個狀態管理的工具了!今天則是會專注看怎麼把Redux使用到React上的部分。當我們想要在React上使用Redux時,...
於前一篇的前置準備完成後,我們已在網路空間新增一個 Firebase 專案了。然而因為刻畫面耗時較長,也希望在刻畫面的同時能夠同時串接資料(就不要為了頁面呈現而...
tags: ItIron2023 react 前言 我們前兩天將重點放在React.memo使用上的一些情境與錯誤,接著我們將繼續探討其他造成不必要重複渲染的情...
上一篇,我們建立了基礎的React專案學習了JSX、元件、還有傳遞Props的知識 ChatGPT上一篇告訴我們,React的三大核心是:「元件(Compone...
這篇文章的主要內容 簡單介紹 useLayoutEffect。 useLayoutEffect useLayoutEffect 是另一種版本的 useEffe...
extends // type type Me = { name: string; age: number } type mom = Me &...
目前我們掌握了 React 渲染的機制,也就是渲染會經過的三個階段,也了解到在 re-rendering 的過程中發生了什麼事情。還沒完,今天要來學習「排隊任務...
Dynamic Routes 我們今天接續的做每個角色自己的頁面,來理解 Dynamic Routes 的實作層面。這部分我們可以先借一下 Next 官方的範例...
比賽好快進到中間時期,剛好適逢中秋佳節與教師節,先祝各位佳節愉快、順利完賽! 這個連假應該會將專案的元件都完成,並且將註冊、登入與基本頁面先行組裝,後續樣式細節...
tags: ItIron2023 react 前言 我們昨天看了一個不必要re-render造成的效能問題並利用React.memo來解決,到這邊一切相安無事,...
React Hook(useState, useEffect...等) 在React中 函式內一般變數若更新 畫面上不會跟著更動 所以要用useState等方法...
NX 的 React 擴充有提供建立 Module Federation 架構專案的功能,來試試看。 首先簡介一下 Module Federation 架構,相...
前言 今天開始要來挑戰,能不能讓ChatGPT來引領React入門在這個章節之前,我會預設身上的技能至少有基本以下這些 Html、JavaScript、CSS...
我們在前幾天已經認識了useReducer和useContext的用法,今天來點進階的內容,把useReducer和useContext結合在一起使用看看。這兩...
實作練習 經過前面的介紹之後,相信大家應該有基礎的理解和認知了,接下來我們一樣透過 Rick and Morty API 來練習如何在 app router 下...
這篇文章的主要內容 簡單介紹useReducer。 useReducer 當 state 較為複雜時可以透過 useReducer 來把更新狀態的邏輯一個個拆...
先前我們在補充中有稍微提到 Reac 的渲染機制,今天將更深入地學習 React 的渲染是怎麼一回事。 渲染的三階段 當我們在 React 當中組織了元件,並將...
React 實戰 II 昨天我們的專案文件大概如下 . ├── README.md ├── package-lock.json ├── package.json...
tags: ItIron2023 react 前言 我們昨天用了一個簡單的例子告訴你useRef在哪些情況能派上用場,那並不會是我們唯一一次與useRef打交道...
React 簡介 當我們使用 **create-react-app (CRA)**來建立一個新的 React 專案的時候,專案的結構大致上會像這樣。 dialo...
還記得前幾天有提到因為Vue和React都是以單向資料流為核心,所以資料的傳遞方向都必須是爺爺傳給爸爸,爸爸再傳給兒子嗎?雖然用props層層傳遞state,沒...
今天要來學習state的應用,內容包含: 認識state 操作方法 stateHook 什麼是state? 如何理解 state,字面上的意思就是當前的程式...
App Router 那我們來說說 app router 的機制吧!App Router 是 Next 13 新介紹的一種 routing 方式,與之相對過去的...
這篇文章的主要內容 簡單介紹 createContext 跟 useContext 的用途跟使用方法。 createContext & useCont...
本系列文章會在筆者的部落格繼續連載!Design System 101 感謝大家的閱讀! 本文同步上傳到筆者的個人部落格,裡面透過 Sandpack 直接...
有了規範的提交訊息工具後,就可以放心開始開發了,開發之前要記得讓自己站在對的分支上唷! 今日分支名稱:feat/component 更換 favicon.ico...
tags: ItIron2023 react 前言 昨天我們看了一個常見的race-condition問題並給出了三種主流的解決方案,今天我們放輕鬆一點,看一個...
Astro 的特點之一,就是可以使用各家框架的元件,像是 React, Vue, Svelte 等,能夠將不同來源的元件拼合到一頁上,在 Monorepo 的架...
在上一回先透過最簡單的 html 與 TypeScript 結合實作一個小場景,接下來我們將會把 React.js 給加入進來,首先簡單介紹一下 React.j...