iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 763 瀏覽

鐵人賽 Modern Web DAY 14

react 學習記錄系列第 14 篇

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

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

evan_hsu ‧ 2023-09-28

0 Like 0 留言 760 瀏覽

鐵人賽 Modern Web DAY 8

30天React練功坊-攻克常見實務/面試問題系列第 8 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day8: Using index as key might be a huge disaster

tags: ItIron2023 react 前言我們昨天用了一個很簡單的例子展示useEffect可能造成的memory leak issue，今天我們來看...

windate3411 ‧ 2023-09-23

1 Like 0 留言 757 瀏覽

鐵人賽 Modern Web DAY 10

react 學習記錄系列第 10 篇

技術 [Day10]我的 react 學習記錄 - react 如何運作跟 key 是什麼

這篇文章的主要內容簡單說說 react 是如何運作跟 key 是什麼 react 如何運作可以大略把 react 做的事情拆分成三個步驟，react 官方...

evan_hsu ‧ 2023-09-24

0 Like 0 留言 755 瀏覽

鐵人賽 Modern Web DAY 17

react 學習記錄系列第 17 篇

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

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

evan_hsu ‧ 2023-10-01

0 Like 0 留言 747 瀏覽

鐵人賽 Modern Web DAY 5

react 學習記錄系列第 5 篇

技術 [Day5]我的 react 學習記錄 - react 是什麼

這篇文章的主要內容簡單介紹一下 react 是什麼。什麼是 React ? React 是由 Meta 團隊維護的開源 JavaScript Librar...

evan_hsu ‧ 2023-09-19

0 Like 0 留言 743 瀏覽

鐵人賽 Modern Web DAY 1

前端日常，每天 React 一下系列第 1 篇

技術【Day00】系列文概述 & 目錄

連載動機藉由 30 天筆記，將學習 React 相關的知識整理起來，以便日後回頭參照。主要參考來源為官方網站，並搭配各路大神的文章整理成筆記。預計內容如下...

Emi ‧ 2021-09-16

0 Like 0 留言 740 瀏覽

鐵人賽 JavaScript DAY 9

從PM到前端開發：我的React作品集之旅系列第 9 篇

技術 Day 9 : 精準控制日誌提升 React 效率

在前幾篇文章中，我們探討了模組化設計如何增強應用的靈活性與可維護性，同時介紹了如何優化元件重繪和狀態管理。使用 console.log 來檢查元件的重繪情況，是...

carolcheng ‧ 2024-09-09

0 Like 0 留言 740 瀏覽

鐵人賽 Modern Web DAY 15

30天React練功坊-攻克常見實務/面試問題系列第 15 篇

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

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

windate3411 ‧ 2023-09-30

0 Like 0 留言 736 瀏覽

鐵人賽 Modern Web DAY 22

react 學習記錄系列第 22 篇

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

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

evan_hsu ‧ 2023-10-06

0 Like 0 留言 734 瀏覽

鐵人賽 Modern Web DAY 18

30天React練功坊-攻克常見實務/面試問題系列第 18 篇

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

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

windate3411 ‧ 2023-10-03

1 Like 0 留言 734 瀏覽

技術 React 學習筆記_8 (Thinking in React - 4 )

第五步：加入相反的資料流目前已經建立了由上往下傳遞的props與state，但需要加入反向的資料流。為了確保當使用者改變表格內容後就會更新state已反映...

Fandix ‧ 2020-03-22

0 Like 0 留言 728 瀏覽

鐵人賽 JavaScript DAY 17

從PM到前端開發：我的React作品集之旅系列第 17 篇

技術 Day 17 : 強化 Hero Section，SVG 動態控制與數據展示

在上一篇文章中，我們逐步建立了 Hero Section，並結合 i18n 和 Framer Motion，來增強其動態效果與語言支持。今天，我們將繼續加強...

carolcheng ‧ 2024-09-17

0 Like 0 留言 725 瀏覽

鐵人賽 Modern Web DAY 26

30天React練功坊-攻克常見實務/面試問題系列第 26 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day26: Add emojis to the page onclick(interview question)

tags: ItIron2023 react 前言我們昨天做了一個簡單的pagination題目，大致上了解一般實務是如何處理這類的情況，包含loading...

windate3411 ‧ 2023-10-11

0 Like 0 留言 718 瀏覽

鐵人賽 JavaScript DAY 12

從PM到前端開發：我的React作品集之旅系列第 12 篇

技術 Day 12: 打造 React 導航欄元件

在上一篇文章中，我們介紹了如何使用 React Router 實現頁面導航，並展示了模組化頁面如何提升程式碼的結構性與可維護性。今天，我們將進一步學習如何從零開...

carolcheng ‧ 2024-09-12

0 Like 0 留言 712 瀏覽

鐵人賽 Modern Web DAY 14

30天React練功坊-攻克常見實務/面試問題系列第 14 篇

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

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

windate3411 ‧ 2023-09-29

0 Like 0 留言 701 瀏覽

鐵人賽 Modern Web DAY 26

TypeScript 啟動！系列第 26 篇

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

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

叮叮 ‧ 2023-10-11

0 Like 0 留言 697 瀏覽

鐵人賽 Modern Web DAY 20

30天React練功坊-攻克常見實務/面試問題系列第 20 篇

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

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

windate3411 ‧ 2023-10-05

0 Like 0 留言 691 瀏覽

鐵人賽 Modern Web DAY 12

react 學習記錄系列第 12 篇

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

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

evan_hsu ‧ 2023-09-26

0 Like 0 留言 690 瀏覽

鐵人賽 Modern Web DAY 20

為期 N 天的 react 小冒險系列第 20 篇

技術用 react hook 寫一個簡易計算機吧-下-day20

昨天寫到鍵入數字部分，今天接續把 +-/* 跟 = 的運算處理完吧～加減乘除執行 dispatch({ type: "該按鈕的數值" }...

dc88 ‧ 2022-10-04

0 Like 0 留言 680 瀏覽

鐵人賽 Modern Web DAY 2

組裝前端開發工具箱，從 NX 入手系列第 2 篇

技術加入元件庫

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

Jasper ‧ 2023-09-03 ‧團隊我在鐵人賽烙賽、也在外木山裸泳◑ω◐

0 Like 0 留言 666 瀏覽

鐵人賽 Modern Web DAY 20

react 學習記錄系列第 20 篇

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

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

evan_hsu ‧ 2023-10-04

0 Like 0 留言 655 瀏覽

鐵人賽 Modern Web DAY 6

react 學習記錄系列第 6 篇

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

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

evan_hsu ‧ 2023-09-20

0 Like 0 留言 648 瀏覽

鐵人賽 JavaScript DAY 6

從PM到前端開發：我的React作品集之旅系列第 6 篇

技術 Day 6：基礎模組化設計優化 React 應用

在上一篇文章中，我們介紹了如何通過 SASS 和 react-i18next 結合，實現 React 應用的主題和語言切換功能，讓用戶可以自由切換語言和主題風格...

carolcheng ‧ 2024-09-06

0 Like 0 留言 646 瀏覽

鐵人賽 Modern Web DAY 13

react 學習記錄系列第 13 篇

技術 [Day13]我的 react 學習記錄 - react forwardRef & useImperativeHandle

這篇文章的主要內容簡單介紹 react forwardRef 跟 useImperativeHandle forwardRef 上一篇介紹的 useRef...

evan_hsu ‧ 2023-09-27

0 Like 0 留言 639 瀏覽

鐵人賽 Modern Web DAY 16

react 學習記錄系列第 16 篇

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

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

evan_hsu ‧ 2023-09-30

0 Like 0 留言 616 瀏覽

鐵人賽 Modern Web DAY 1

React進階班，用typescript與jest製作自己的custom hooks庫系列第 1 篇

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

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

傻眼甜不辣TanBooLa ‧ 2023-09-10

0 Like 0 留言 614 瀏覽

鐵人賽 JavaScript DAY 13

從PM到前端開發：我的React作品集之旅系列第 13 篇

技術 Day 13: 告別 Sass map-get，用 CSS 變數簡化主題管理

在上一篇文章中，我們介紹了如何使用 Sass 和 map-get 來管理多主題樣式。隨著應用規模的擴大，程式碼變得越來越難以維護。今天，我們將探討為什麼選擇 C...

carolcheng ‧ 2024-09-13

1 Like 0 留言 607 瀏覽

鐵人賽影片教學 DAY 20

我讀你看系列第 20 篇

技術 [React] Render and Commit

今天來看一下常令 React 新手容易感到混淆的 render 和 commit 階段。 Render and Commit @ React Beta

pjchender ‧ 2022-10-05 ‧團隊我可能不會完賽

0 Like 0 留言 606 瀏覽

鐵人賽 Modern Web DAY 21

react 學習記錄系列第 21 篇

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

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

evan_hsu ‧ 2023-10-05

0 Like 0 留言 594 瀏覽

鐵人賽 Modern Web DAY 8

react 學習記錄系列第 8 篇

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

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

evan_hsu ‧ 2023-09-22

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

技術 30天React練功坊-攻克常見實務/面試問題 Day8: Using index as key might be a huge disaster

技術 [Day10]我的 react 學習記錄 - react 如何運作跟 key 是什麼

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

技術 [Day5]我的 react 學習記錄 - react 是什麼

技術 【Day00】系列文概述 & 目錄

技術 Day 9 : 精準控制日誌提升 React 效率

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

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

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

技術 React 學習筆記_8 (Thinking in React - 4 )

技術 Day 17 : 強化 Hero Section，SVG 動態控制與數據展示

技術 30天React練功坊-攻克常見實務/面試問題 Day26: Add emojis to the page onclick(interview question)

技術 Day 12: 打造 React 導航欄元件

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

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

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

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

技術 用 react hook 寫一個簡易計算機吧-下-day20

技術 加入元件庫

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

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

技術 Day 6：基礎模組化設計優化 React 應用

技術 [Day13]我的 react 學習記錄 - react forwardRef & useImperativeHandle

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

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

技術 Day 13: 告別 Sass map-get，用 CSS 變數簡化主題管理

技術 [React] Render and Commit

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

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

標記使用者

技術【Day00】系列文概述 & 目錄

技術用 react hook 寫一個簡易計算機吧-下-day20

技術加入元件庫