iT邦幫忙

react相關文章
共有 1537 則文章
鐵人賽 Modern Web DAY 16
30 days of React 系列 第 16

技術 Day 16 - 在 state 中更新物件

昨天學習了 React 的 batching 的概念、「替代」和「做」的區別、當次渲染的邏輯,今天要來學習如何在 state 中更新物件。學習前讓我們再次回憶起...

鐵人賽 Modern Web DAY 25

技術 【Day 25】用實作學Redux Toolkit!完成一個購物車(上) - 基本設定&基本用法

昨天已經先認識了Vuex和Redux這兩個狀態管理的工具了!今天則是會專注看怎麼把Redux使用到React上的部分。當我們想要在React上使用Redux時,...

鐵人賽 SideProject30 DAY 15

技術 Day15:快速於 React 專案引入 Firebase 服務

於前一篇的前置準備完成後,我們已在網路空間新增一個 Firebase 專案了。然而因為刻畫面耗時較長,也希望在刻畫面的同時能夠同時串接資料(就不要為了頁面呈現而...

鐵人賽 Modern Web DAY 15

技術 30天React練功坊-攻克常見實務/面試問題 Day15: Unintended Re-renders: The Pitfalls of useContext

tags: ItIron2023 react 前言 我們前兩天將重點放在React.memo使用上的一些情境與錯誤,接著我們將繼續探討其他造成不必要重複渲染的情...

鐵人賽 自我挑戰組 DAY 16

技術 【Day16】ChatGPT請教教我:React入門(二)- State(狀態)

上一篇,我們建立了基礎的React專案學習了JSX、元件、還有傳遞Props的知識 ChatGPT上一篇告訴我們,React的三大核心是:「元件(Compone...

鐵人賽 Modern Web DAY 16
react 學習記錄 系列 第 16

技術 [Day16]我的 react 學習記錄 - useLayoutEffect

這篇文章的主要內容 簡單介紹 useLayoutEffect。 useLayoutEffect useLayoutEffect 是另一種版本的 useEffe...

技術 Why use Type and not Interface in TypeScript

extends // type type Me = { name: string; age: number } type mom = Me &...

鐵人賽 Modern Web DAY 15
30 days of React 系列 第 15

技術 Day 15 - React 渲染:排隊任務

目前我們掌握了 React 渲染的機制,也就是渲染會經過的三個階段,也了解到在 re-rendering 的過程中發生了什麼事情。還沒完,今天要來學習「排隊任務...

鐵人賽 Modern Web DAY 30
React 走出新手村 系列 第 30

技術 React 走出新手村 — Rick and Morty練習(II)

Dynamic Routes 我們今天接續的做每個角色自己的頁面,來理解 Dynamic Routes 的實作層面。這部分我們可以先借一下 Next 官方的範例...

鐵人賽 SideProject30 DAY 14

技術 Day14:將 Firebase 加進 React 專案之前置準備

比賽好快進到中間時期,剛好適逢中秋佳節與教師節,先祝各位佳節愉快、順利完賽! 這個連假應該會將專案的元件都完成,並且將註冊、登入與基本頁面先行組裝,後續樣式細節...

鐵人賽 Modern Web DAY 14

技術 30天React練功坊-攻克常見實務/面試問題 Day14: Optimization with React.memo the wrong way

tags: ItIron2023 react 前言 我們昨天看了一個不必要re-render造成的效能問題並利用React.memo來解決,到這邊一切相安無事,...

技術 React 六角學院-學習筆記(React Hooks)

React Hook(useState, useEffect...等) 在React中 函式內一般變數若更新 畫面上不會跟著更動 所以要用useState等方法...

鐵人賽 Modern Web DAY 28

技術 React Module Fedaration

NX 的 React 擴充有提供建立 Module Federation 架構專案的功能,來試試看。 首先簡介一下 Module Federation 架構,相...

鐵人賽 自我挑戰組 DAY 15

技術 【Day15】ChatGPT請教教我:React入門(一)- 起始安裝、JSX元素、元件!

前言 今天開始要來挑戰,能不能讓ChatGPT來引領React入門在這個章節之前,我會預設身上的技能至少有基本以下這些 Html、JavaScript、CSS...

鐵人賽 Modern Web DAY 23

技術 【Day 23】利用useReducer + useContext管理複雜的狀態邏輯

我們在前幾天已經認識了useReducer和useContext的用法,今天來點進階的內容,把useReducer和useContext結合在一起使用看看。這兩...

鐵人賽 Modern Web DAY 29
React 走出新手村 系列 第 29

技術 React 走出新手村 — Rick and Morty練習(I)

實作練習 經過前面的介紹之後,相信大家應該有基礎的理解和認知了,接下來我們一樣透過 Rick and Morty API 來練習如何在 app router 下...

鐵人賽 Modern Web DAY 15
react 學習記錄 系列 第 15

技術 [Day15]我的 react 學習記錄 - useReducer

這篇文章的主要內容 簡單介紹useReducer。 useReducer 當 state 較為複雜時可以透過 useReducer 來把更新狀態的邏輯一個個拆...

鐵人賽 Modern Web DAY 14
30 days of React 系列 第 14

技術 Day 14 - React 的渲染機制以及 state 的過程

先前我們在補充中有稍微提到 Reac 的渲染機制,今天將更深入地學習 React 的渲染是怎麼一回事。 渲染的三階段 當我們在 React 當中組織了元件,並將...

鐵人賽 Modern Web DAY 14
TypeScript 啟動! 系列 第 14

技術 [Day 14] TypeScript React 初次使用 II

React 實戰 II 昨天我們的專案文件大概如下 . ├── README.md ├── package-lock.json ├── package.json...

鐵人賽 Modern Web DAY 13

技術 30天React練功坊-攻克常見實務/面試問題 Day13: ExpensiveComponent re-render causing performance issue

tags: ItIron2023 react 前言 我們昨天用了一個簡單的例子告訴你useRef在哪些情況能派上用場,那並不會是我們唯一一次與useRef打交道...

鐵人賽 Modern Web DAY 13
TypeScript 啟動! 系列 第 13

技術 [Day 13] TypeScript React 初次使用

React 簡介 當我們使用 **create-react-app (CRA)**來建立一個新的 React 專案的時候,專案的結構大致上會像這樣。 dialo...

鐵人賽 Modern Web DAY 22

技術 【Day 22】 深層傳遞state!除了props還有其他方式 - proivde & inject和useContext

還記得前幾天有提到因為Vue和React都是以單向資料流為核心,所以資料的傳遞方向都必須是爺爺傳給爸爸,爸爸再傳給兒子嗎?雖然用props層層傳遞state,沒...

鐵人賽 Modern Web DAY 13
30 days of React 系列 第 13

技術 Day 13 - 在React中使用state

今天要來學習state的應用,內容包含: 認識state 操作方法 stateHook 什麼是state? 如何理解 state,字面上的意思就是當前的程式...

鐵人賽 Modern Web DAY 28
React 走出新手村 系列 第 28

技術 React 走出新手村 — Next App Router

App Router 那我們來說說 app router 的機制吧!App Router 是 Next 13 新介紹的一種 routing 方式,與之相對過去的...

鐵人賽 Modern Web DAY 14
react 學習記錄 系列 第 14

技術 [Day14]我的 react 學習記錄 - createContext & useContext

這篇文章的主要內容 簡單介紹 createContext 跟 useContext 的用途跟使用方法。 createContext & useCont...

鐵人賽 Modern Web DAY 12
設計系統 - Design System 系列 第 12

技術 [Day 12] Design System - Common Hook (二)

本系列文章會在筆者的部落格繼續連載!Design System 101 感謝大家的閱讀! 本文同步上傳到筆者的個人部落格,裡面透過 Sandpack 直接...

鐵人賽 SideProject30 DAY 12

技術 Day12:side project 的網頁組成元素

有了規範的提交訊息工具後,就可以放心開始開發了,開發之前要記得讓自己站在對的分支上唷! 今日分支名稱:feat/component 更換 favicon.ico...

鐵人賽 Modern Web DAY 12

技術 30天React練功坊-攻克常見實務/面試問題 Day12: Sometimes useState just not good enough

tags: ItIron2023 react 前言 昨天我們看了一個常見的race-condition問題並給出了三種主流的解決方案,今天我們放輕鬆一點,看一個...

鐵人賽 Modern Web DAY 26

技術 Astro 集成 React 元件

Astro 的特點之一,就是可以使用各家框架的元件,像是 React, Vue, Svelte 等,能夠將不同來源的元件拼合到一頁上,在 Monorepo 的架...

鐵人賽 Modern Web DAY 12
TypeScript 啟動! 系列 第 12

技術 [Day 12] TypeScript 初見 React.js

在上一回先透過最簡單的 html 與 TypeScript 結合實作一個小場景,接下來我們將會把 React.js 給加入進來,首先簡單介紹一下 React.j...