iT邦幫忙

reactjs相關文章
共有 711 則文章
鐵人賽 Modern Web DAY 20

技術 30天React練功坊-攻克常見實務/面試問題 Day20: useState with complex form

tags: ItIron2023 react 前言 我們昨天看了一個有趣的useState問題,了解到initialValue的一些限制,今天我們會再看一個與s...

技術 使用 Redux-toolkit + RTK-query 取代 useContext

最近公司打算統一使用 Redux-toolkit + RTK-query 去取代 useContext,這幾天惡補一下荒廢已久的 Redux,並且把 Redux...

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

技術 [Day12]我的 react 學習記錄 - useRef

這篇文章的主要內容 簡單介紹 useRef hook 的使用方法 useRef useRef 是 react 裡面除了 useState 以外另外一個用來儲存...

鐵人賽 Modern Web DAY 2

技術 加入元件庫

首先是元件庫,目前用的最順手的是 MUI ,先把會用到的部分安裝。 pnpm add @mui/material @emotion/react @emotion...

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

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

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

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

技術 [Day22]我的 react 學習記錄 - lazy & Suspense

這篇文章的主要內容 簡單介紹 lazy 跟 Suspense 的用途跟用法 lazy lazy 是 react 裡面提供的一個 api 可以讓我們透過非同步的...

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

技術 [Day21]我的 react 學習記錄 - useCallback

這篇文章的主要內容 簡單介紹優化 react 的另一個方法 - useCallback useCallback 在 react 裡面除了 object 跟 a...

鐵人賽 Modern Web DAY 23

技術 30天React練功坊-攻克常見實務/面試問題 Day23: Simple tab component(interview question)

tags: ItIron2023 react 前言 我們昨天做了一個簡單的todo list,透過那個題目可以檢驗你對於state & props的掌握...

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

技術 [Day6]我的 react 學習記錄 - JSX 跟 babel 的作用

這篇文章的主要內容 簡單說明 JSX 跟 babel 的作用。 JSX 語法 在上一篇文章中有出現一個有點像是 html 的標籤。 const App: Re...

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

技術 [Day8]我的 react 學習記錄 - 渲染 variable & props 傳遞

這篇文章的主要內容 簡單說說 react 裡面把資料放到畫面上跟參數傳遞的方法。 渲染 variable 假設我有一些資料希望放到畫面上,像這樣。 funct...

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

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

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

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

技術 [Day17]我的 react 學習記錄 - custom hook

這篇文章的主要內容 簡單介紹什麼是 custom Hook。 Custom Hook 目前為止都是切分畫面把畫面上的內容拆成小元件做處理,在 react 裡面...

鐵人賽 Modern Web DAY 26

技術 Astro 集成 React 元件

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

鐵人賽 Modern Web DAY 1

技術 [Day 1] 為什麼要寫Custom Hook與測試

前言 當我們還是新手時,常常寫了一大堆程式碼,程式碼越來越亂,UI與邏輯瘋狂耦合,發生bug又找不到在哪,又發現好多地方都是差不多的功能,卻每個地方都寫不一樣,...

鐵人賽 Modern Web DAY 18

技術 30天React練功坊-攻克常見實務/面試問題 Day18:UI flicker issue with useEffect

tags: ItIron2023 react 前言 昨天我們看了一個誤用useEffect的例子,了解到其實有些東西你不需要靠useEffect也能達成,今天我...

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

技術 [Day19]我的 react 學習記錄 - memo

這篇文章的主要內容 簡單介紹優化 react 的其中一個方法 - memo memo 前面有提到當狀態改變時 react 會 re-render 整個元件,所...

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

技術 [Day24]我的 react 學習記錄 - emotion

這篇文章的主要內容 簡單介紹 react 裡面 style 的工具 emotion。 Emotion 目前為止都盡量不動到 style 即使有用到也是使用 i...

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

技術 [Day20]我的 react 學習記錄 - useMemo

這篇文章的主要內容 簡單介紹優化 react 的另一個方法 - useMemo useMemo useMemo 是 react 裡面一個用來讓 react 記...

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

技術 [Day18]我的 react 學習記錄 - Render Props

這篇文章的主要內容 簡單說明如何透過 Render Props 的方法讓父元件決定子元件要顯示的內容。 Render Props 目前為只都分享了如何把畫面拆...

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

技術 [Day 26] TypeScript 零售業者模擬演練 IV

今天應該會完成大致上的呈現~ Step1 修正 App.tsx // App.tsx import React, { useState } from 'rea...

鐵人賽 Modern Web DAY 28

技術 React Module Fedaration

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