iT邦幫忙

react.js相關文章
共有 205 則文章
0 Like 0 留言 1557 瀏覽

技術 React學習筆記-JS補充

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

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

技術 [Day30]_Whack-A-Mole

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

ayao ‧ 2024-10-19
0 Like 0 留言 269 瀏覽
鐵人賽 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 留言 296 瀏覽
鐵人賽 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 留言 360 瀏覽
鐵人賽 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 留言 367 瀏覽
鐵人賽 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 留言 174 瀏覽
鐵人賽 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 留言 267 瀏覽
鐵人賽 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 留言 375 瀏覽
鐵人賽 Modern Web DAY 25
30天打造個人簡易旅遊網站 系列 第 25 篇

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

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

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

技術 [Day23]_Speech-Synthesis

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

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

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

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

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

技術 [Day21]_Geolocation

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

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

技術 [Day20]_Speech-Detection

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

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

技術 [Day19]_Webcam-Fun

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

ayao ‧ 2024-10-04
0 Like 0 留言 316 瀏覽
鐵人賽 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 留言 369 瀏覽
鐵人賽 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 留言 207 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 16 篇

技術 [Day16]_Mouse-Move-Shadow

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

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

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

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

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

技術 [Day15]_LocalStorage

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

ayao ‧ 2024-09-29
0 Like 0 留言 256 瀏覽
鐵人賽 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 留言 273 瀏覽
鐵人賽 Modern Web DAY 17
30天打造個人簡易旅遊網站 系列 第 17 篇

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

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

ntuedtd113 ‧ 2024-09-30
0 Like 0 留言 275 瀏覽
鐵人賽 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 留言 133 瀏覽
鐵人賽 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 留言 169 瀏覽
鐵人賽 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 留言 586 瀏覽
鐵人賽 JavaScript DAY 27
從PM到前端開發：我的React作品集之旅 系列 第 27 篇

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

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

carolcheng ‧ 2024-09-27
0 Like 0 留言 220 瀏覽
鐵人賽 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 留言 154 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 9 篇

技術 [Day09]_Dev-Tools-Domination

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

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

技術 [Day08]_Canvas

Day08 是要利用 HTML5 Canvas 來做出畫布 資料狀態 canvasRef, ctxRef 用來取得顯示的內容 isDrawing 判斷是...

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

技術 [Day07]_Array-Cardio-Day2

今天跑去聽演唱會，完全忘記要來發文，太慘惹，我好蠢ＱＱ要能時時刻刻記得自己有在進行鐵人賽的參賽者們真的很不簡單明年真的要確實提早準備，還要記得每天訂鬧鐘提醒自...

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

技術 [Day06]_Type-Ahead

Day06 要做的是動態搜尋功能，是個可以偵測使用者輸入字串的篩選器 建立資料 資料可以由 fetch 遠端取得 searchQuery 用來儲存搜尋字...

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