iT邦幫忙

react.js相關文章
共有 208 則文章
0 Like 0 留言 87 瀏覽
鐵人賽 Modern Web DAY 12
30 天掌握 React & Next.js：從基礎到面試筆記 系列 第 12 篇

技術 Day 12：useState vs useReducer — 什麼時候該用哪一個？

在 React 中，我們常常需要管理狀態。最常見的 Hook 是 useState，但有時候會聽到「這裡用 useReducer 會比較好」。那麼，這兩個差在哪...

chc_web_dev ‧ 2025-09-26
0 Like 0 留言 153 瀏覽
鐵人賽 Modern Web DAY 7
30 天掌握 React & Next.js：從基礎到面試筆記 系列 第 7 篇

技術 Day 7 : 為什麼不要直接修改 state ?

在 React 裡，你常常聽到「不要直接修改 state」。真正的原因是：React 偵測不到你直接改了內容。 React 如何判斷 state 是否改變？ R...

chc_web_dev ‧ 2025-09-21
0 Like 0 留言 90 瀏覽
鐵人賽 Modern Web DAY 6
30 天掌握 React & Next.js：從基礎到面試筆記 系列 第 6 篇

技術 Day 6：為什麼在 React list 中 key 這麼重要？

你有沒有遇過這種情況：在 React 中渲染一個待辦清單，點了「新增任務」按鈕，結果輸入框的值跑到另一個項目去了？ 這其實就是因為 少了正確的 key。 概念解...

chc_web_dev ‧ 2025-09-20
0 Like 0 留言 1743 瀏覽

技術 React學習筆記-JS補充

object function筆記 const obj = { value:'小明', fn:function(){ return...

noway781206 ‧ 2025-01-20
0 Like 1 留言 730 瀏覽
鐵人賽 JavaScript
React30——用 React 探索 JavaScript30 的魅力 系列 第 30 篇

技術 [Day30]_Whack-A-Mole

Day30 要來寫個打地鼠的小遊戲 資料 const MOLE_IMAGE_URL = "https://raw.githubuserconten...

ayao ‧ 2024-10-19
0 Like 0 留言 481 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 29 篇

技術 [Day29]_Countdown-Timer

Day29 要來做個倒數計時器 Custom Hook function useTimer(initialTime: number): TimerHook {...

ayao ‧ 2024-10-13
0 Like 0 留言 401 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 28 篇

技術 [Day28]_Video-Speed-Controller

Day28 要來做個影片速度的控制器 資料 const VIDEO_URL = "https://github.com/wesbos/JavaSc...

ayao ‧ 2024-10-13
0 Like 0 留言 601 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 27 篇

技術 [Day27]_Click-and-Drag

Day27 要來做個可以左右拖曳的目錄 資料 const items: number[] = Array.from({ length: 25 }, (_, i)...

ayao ‧ 2024-10-12
0 Like 0 留言 540 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 26 篇

技術 [Day26]_Stripe-Follow-Along-Nav

Day26 要來做個有下拉選單的導覽列 資料 const navItems: NavItem[] = [ { name: "About"...

ayao ‧ 2024-10-12
0 Like 0 留言 271 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 25 篇

技術 [Day25]_Event-Capture-Propagation-Bubbling-and-Once

Day25 主要聚焦於 JavaScript 中的各種事件處理，就讓我們寫個按鈕與互動畫面來觀察ㄅ 資料 const colorMap: ColorMapTyp...

ayao ‧ 2024-10-11
0 Like 0 留言 366 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 24 篇

技術 [Day24]_Sticky-Nav

Day24 要做的是將導覽列黏到畫面最上方的功能 定位屬性 sticky <nav className="sticky top-0 bg-w...

ayao ‧ 2024-10-10
0 Like 0 留言 550 瀏覽
鐵人賽 Modern Web DAY 25
30天打造個人簡易旅遊網站 系列 第 25 篇

技術 Day 25：Draggable-拖曳畫面中的物件

今天要來實做拖曳畫面中的物件，原本我們預計是使用React-beautiful-dnd這個套件，但由於現在React 18不支援strict mode，拖曳中會...

ntuedtd113 ‧ 2024-10-08
0 Like 0 留言 374 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 23 篇

技術 [Day23]_Speech-Synthesis

Day23 要做的是將輸入的文字轉為聲音 資料 const MESSAGE = "Hello!"; const [text, setT...

ayao ‧ 2024-10-07
0 Like 0 留言 374 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 22 篇

技術 [Day22]_Follow-Along-Link-Highlighter

Day22 要來做的是可以根據滑鼠滑過去就出現背景色的螢光筆 資料 const [highlightStyle, setHighlightStyle] =...

ayao ‧ 2024-10-06
0 Like 0 留言 599 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 21 篇

技術 [Day21]_Geolocation

Day21 要來做個羅盤 資料 const [geolocation, setGeolocation] = useState<Geolocation&...

ayao ‧ 2024-10-05
0 Like 0 留言 478 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 20 篇

技術 [Day20]_Speech-Detection

Day20 要來控制麥克風 資料設定 const SpeechRecognition = (window as any).SpeechRecognition...

ayao ‧ 2024-10-05
0 Like 0 留言 570 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 19 篇

技術 [Day19]_Webcam-Fun

Day19 是要操作照相機來拍照，甚至可以加上濾鏡 資料 const videoRef = useRef<HTMLVideoElement>(n...

ayao ‧ 2024-10-04
0 Like 0 留言 499 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 18 篇

技術 [Day18]_Adding-Up-Times-with-Reduce

Day18 主要是要練習用 Array 的 reduce 方法來做加總的計算 資料 const videosData = [ { id: 1, title:...

ayao ‧ 2024-10-04
0 Like 0 留言 486 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 17 篇

技術 [Day17]_Sort-Without-Articles

Day17 要做的是幫列表排序，但要忽略開頭的定冠詞 資料 const bands: string[] = [ "The Plot in You&...

ayao ‧ 2024-10-01
0 Like 0 留言 308 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 16 篇

技術 [Day16]_Mouse-Move-Shadow

Day16 要來玩的是讓文字產生背景的陰影，並會隨著滑鼠的移動更改方向 資料 const [offset, setOffset] = useState&lt...

ayao ‧ 2024-09-30
0 Like 0 留言 449 瀏覽
鐵人賽 JavaScript DAY 29
從PM到前端開發：我的React作品集之旅 系列 第 29 篇

技術 Day 29:表單數據持久化 — 優化用戶體驗

在我們的前幾篇文章中，我們已經介紹了如何使用表單來捕獲用戶輸入數據，並通過 EmailJS 發送表單數據。今天，我們將深入探討如何利用 sessionStora...

carolcheng ‧ 2024-09-29
0 Like 0 留言 289 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 15 篇

技術 [Day15]_LocalStorage

Day15 要撰寫的是待辦清單，並把資料存進瀏覽器的 LocalStorage 資料 const [todos, setTodos] = useState&...

ayao ‧ 2024-09-29
0 Like 0 留言 370 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 14 篇

技術 [Day14]_JavaScript-References-VS-Copying

Day14 要來學習怎麼複製資料 Q1 基本型別是 call by value ，所以不會更改到原始資料 let age = 100;...

ayao ‧ 2024-09-29
0 Like 0 留言 464 瀏覽
鐵人賽 Modern Web DAY 17
30天打造個人簡易旅遊網站 系列 第 17 篇

技術 Day 17：免費好上手的地圖API-Leaflet自定義圖標

昨天我們介紹了基本的Leaflet用法，今天我們要把JSON檔中的景點資訊匯入到MapItem中，那這邊先確認JSON檔景點資訊中都有包含經緯度的資訊(posi...

ntuedtd113 ‧ 2024-09-30
0 Like 0 留言 369 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 13 篇

技術 [Day13]_Slide-in-on-Scroll

Day13 要做的是類似視差滾動的圖片效果 資料 const images = [ { src: "https://unsplash.it/400...

ayao ‧ 2024-09-28
0 Like 0 留言 222 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 12 篇

技術 [Day12]_Key-Sequence-Detection

Day12 是要來做偵測鍵盤輸入的彩蛋遊戲 資料 const SECRET_CODE: string = "wesbos"; cons...

ayao ‧ 2024-09-28
0 Like 0 留言 325 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 11 篇

技術 [Day11]_Custom-Video-Player

Day11 要做的是客製化的影片播放器 資料設定 const VIDEO_URL = "https://github.com/wesbos/Jav...

ayao ‧ 2024-09-28
0 Like 0 留言 981 瀏覽
鐵人賽 JavaScript DAY 27
從PM到前端開發：我的React作品集之旅 系列 第 27 篇

技術 Day 27: 使用 react-hook-form 高效管理表單提交與驗證

在現代 Web 應用開發中，表單的管理與驗證往往是開發過程中的一大挑戰。上一篇文章中，我們探討了如何追蹤使用者行為並優化應用體驗，而今天，我們的焦點是表單管理。...

carolcheng ‧ 2024-09-27
0 Like 0 留言 320 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 10 篇

技術 [Day10]_Hold-Shift-and-Check-Checkboxes

Day10 是要實作可以用 Shift 來多選框框的題目 建立資料 const checkboxData: string[] = [ "This...

ayao ‧ 2024-09-25
0 Like 0 留言 241 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 9 篇

技術 [Day09]_Dev-Tools-Domination

Day09 主要在介紹各種 console 的用法 基本用法 console.log("Hello") 穿插字串 console.log(...

ayao ‧ 2024-09-24
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
19860 篇
完賽人數
528 人
iT+看影片追技術 看影片追技術 看更多
熱門tag
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙