iT邦幫忙

react.js相關文章
共有 208 則文章
0 Like 0 留言 245 瀏覽
鐵人賽 JavaScript DAY 6
React30——用 React 探索 JavaScript30 的魅力 系列 第 8 篇

技術 [Day08]_Canvas

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

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

技術 [Day07]_Array-Cardio-Day2

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

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

技術 [Day06]_Type-Ahead

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

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

技術 [Day05]_Flex-Panel-Gallery

Day05 是利用 CSS 的 flex 特性來完成伸縮畫廊，做出有互動效果的圖片展示面板 建立資料 之後會用這些資料來展示圖片需要的資訊 const i...

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

技術 [Day04]_Array-Cardio-Day1

沒想到 Day04 是單純的 JS 題目，主要聚焦在 JavaScript 陣列方法的使用，但我最後還是有寫在 CodeSandBox 裡面惹，就開始ㄅ Q1...

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

技術 Day 20: CSS Grid 實戰，打造彈性卡片佈局

在前一篇文章中，我們討論了如何動態生成 Card 元件 並構建了基礎的 Service Section。今天，我們將繼續優化這個部分，重點放在如何使用 CSS...

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

技術 Day19: 動態生成 Card 元件，建構 Service 頁面

在過去的幾篇文章中，我們探討了 Hero Section 的設計和優化，包括使用 SVG 和動態控制來增強頁面交互效果。今天，我們將進一步完成個人網站的服務展示...

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

技術 [Day03]_CSS-Variables

Day03 是用 CSS 變數來更改圖片的樣式，可以做出簡單的圖片編輯器，但我剛開始的寫法似乎沒有符合原作的精神（？ 後來問了 AI 後，發現還是可以從 CSS...

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

技術 [Day02]_Clock

Day02 要做的是虛擬時鐘，就讓我們直接開始ㄅ 時間資料 先用 useState 建立目前的時間 const [time, setTime] = useS...

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

技術 Day18: 響應式設計指南，Mobile First 與 Tooltip 優化

在前幾篇文章中，我們探討了如何透過動畫、SVG 操作以及 Tooltip 來提升網站的互動性和視覺效果。然而，隨著使用者透過不同裝置訪問網站，響應式設計已成為現...

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

技術 [Day01]_Drum-Kit

Day01 是實作用鍵盤模擬打鼓的題目，當使用者按下對應的按鍵，就會播放對應的鼓聲，以下就讓我們來製作 React 的版本ㄅ （之後每天的示範樣式都會使用 Ta...

ayao ‧ 2024-09-15
1 Like 0 留言 542 瀏覽
鐵人賽 佛心分享-SideProject30 DAY 1
讓演算法起舞：前端特效應用的探索之旅 系列 第 1 篇

技術 嘿！讓我們開始規劃舞步

大家好~ 我是熱愛用 Canvas 創作的 Jerry！在這個系列中，我將帶你探索數學、物理和演算法的世界，透過 Canvas 來實現各種視覺效果。如果你對前端...

jerrythepotato ‧ 2024-09-14 ‧團隊鐵齒不信寫不完
0 Like 0 留言 695 瀏覽
鐵人賽 JavaScript DAY 15
從PM到前端開發：我的React作品集之旅 系列 第 15 篇

技術 Day 15 : 打造高效的 React 按鈕設計方案（下）

在前一篇文章中，我們設計了一個靈活的按鈕元件，並探討了多種屬性的應用。今天，我們將進一步研究 按鈕的樣式設計，探討如何根據不同狀態（如懸停、激活、禁用）調整按鈕...

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

技術 Day 7：進階模組化設計之 ThemeProvider 應用

在上一篇文章中，我們介紹了如何使用模組化設計來簡化應用中的主題切換和語言切換功能。通過將按鈕元件（ThemeButton 和 LangButton ）分離，我們...

carolcheng ‧ 2024-09-07
0 Like 0 留言 961 瀏覽
鐵人賽 Modern Web DAY 30
30天React練功坊-攻克常見實務/面試問題 系列 第 30 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day30: Memory Cards Game(interview question)

tags: ItIron2023 react 前言 我們昨天做了一個基本的井字遊戲，基本上除了css的部分有些困難之外，基本的邏輯實踐其實相當的單純，今天我們反...

windate3411 ‧ 2023-10-15
0 Like 0 留言 1048 瀏覽
鐵人賽 Modern Web DAY 29
30天React練功坊-攻克常見實務/面試問題 系列 第 29 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day29: Simple Tic-Tac-Toe game(interview question)

tags: ItIron2023 react 前言 我們昨天處理了一個實務上常見的面試問題，要你根據某份提供的api文件以及一些指示完成題目的要求，今天我們再來...

windate3411 ‧ 2023-10-14
0 Like 0 留言 394 瀏覽
鐵人賽 自我挑戰組 DAY 30
React 個人讀書會 系列 第 30 篇

技術 Day 30 - 旅途休息一下！

心得分享 很高興第二次參加 iThome 鐵人賽也能順利完賽，有了第一次參加的經驗後，對於整體的文章規劃也更加明確，不僅如此，參加 IThome 鐵人賽讓我感...

秘密基地 ‧ 2023-10-15
0 Like 0 留言 750 瀏覽
鐵人賽 Modern Web DAY 28
30天React練功坊-攻克常見實務/面試問題 系列 第 28 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day28: Fetch all synonyms for given word(interview question)

tags: ItIron2023 react 前言 昨天我們完成了add emoji onclick的問題，額外用了幾個state以及timer去達到題目的要求...

windate3411 ‧ 2023-10-13
0 Like 0 留言 767 瀏覽
鐵人賽 Modern Web DAY 27
30天React練功坊-攻克常見實務/面試問題 系列 第 27 篇

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

tags: ItIron2023 react 前言 我們昨天做了一個還算有趣的問題，利用state控制整個emoji陣列並決定每個組件要在螢幕的哪處渲染，今天我...

windate3411 ‧ 2023-10-12
0 Like 0 留言 661 瀏覽
鐵人賽 自我挑戰組 DAY 29
React 個人讀書會 系列 第 29 篇

技術 Day 29 - 共用狀態管理：Redux

什麼是 Redex？ Redux 是一個用於狀態管理的第三方 Library，它在概念上類似於使用 Context API + useReducer，因此，如...

秘密基地 ‧ 2023-10-14
0 Like 0 留言 571 瀏覽
鐵人賽 自我挑戰組 DAY 28
React 個人讀書會 系列 第 28 篇

技術 Day 28 - 記憶值和函式：useMemo、useCallback

useMemo 和 useCallback 要解決什麼？ 在昨天的文章裡，我們最後有遇到一個問題，當我們傳入的 props 是一個物件時，元件在重新渲染的時候...

秘密基地 ‧ 2023-10-13
0 Like 0 留言 693 瀏覽
鐵人賽 自我挑戰組 DAY 27
React 個人讀書會 系列 第 27 篇

技術 Day 27 - 記憶元件：memo

什麼是 memo？ memo 函式用於建立一個在其父層重新渲染時不會重新渲染的元件，只要該元件在渲染之間 props 保持不變，但是當元件本身的狀態或是訂閱的...

秘密基地 ‧ 2023-10-12
0 Like 0 留言 1105 瀏覽
鐵人賽 Modern Web DAY 25
30天React練功坊-攻克常見實務/面試問題 系列 第 25 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day25: Implement simple pagination(interview question)

tags: ItIron2023 react 前言 我們昨天看了一個很水的custom hook題目，希望透過那個水到爆炸的題目你有了解到可以利用custom...

windate3411 ‧ 2023-10-10
0 Like 0 留言 551 瀏覽
鐵人賽 自我挑戰組 DAY 26
React 個人讀書會 系列 第 26 篇

技術 Day 26 - 共享資料狀態：Context API

為什麼需要 Context API？ 讓我們看一個例子，DComponent 跟 FComponent 需要最頂層 AComponent 的狀態 name，此...

秘密基地 ‧ 2023-10-11
0 Like 0 留言 928 瀏覽
鐵人賽 Modern Web DAY 24
30天React練功坊-攻克常見實務/面試問題 系列 第 24 篇

技術 2023It 30天React練功坊-攻克常見實務/面試問題 Day24: Creating a custom hook for data fetching(interview question)

tags: ItIron2023 react 前言 昨天我們看了一個基本的Tab component題目，在那個常見的UI組件上做了一點小小的測試，相信對你們來...

windate3411 ‧ 2023-10-09
0 Like 0 留言 702 瀏覽
鐵人賽 自我挑戰組 DAY 25
React 個人讀書會 系列 第 25 篇

技術 Day 25 - 在 URL 中儲存資料：動態路由

在 React 中，Router params 的應用對於在不同頁面之間傳遞資料至關重要。今天將介紹如何在 React Router 中使用動態路由，包括建立...

秘密基地 ‧ 2023-10-10
0 Like 0 留言 559 瀏覽
鐵人賽 Modern Web DAY 23
30天React練功坊-攻克常見實務/面試問題 系列 第 23 篇

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

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

windate3411 ‧ 2023-10-08
0 Like 0 留言 496 瀏覽
鐵人賽 自我挑戰組 DAY 24
React 個人讀書會 系列 第 24 篇

技術 Day 24 - 路由層級：嵌套路由

為什麼需要嵌套路由？ 在開發中，應用程式常常需要更加複雜的路由結構，例如 /user/profile 和 /user/settings，為了實現這種層次化路由...

秘密基地 ‧ 2023-10-09
0 Like 0 留言 1023 瀏覽
鐵人賽 Modern Web DAY 22
30天React練功坊-攻克常見實務/面試問題 系列 第 22 篇

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

tags: ItIron2023 react 前言 昨天我們用了一個簡單的問題來測驗你對於react render邏輯的了解程度，相信透過昨天的經驗你應該對於u...

windate3411 ‧ 2023-10-07
0 Like 0 留言 1016 瀏覽
鐵人賽 自我挑戰組 DAY 23
React 個人讀書會 系列 第 23 篇

技術 Day 23 - 路由切換：Link 和 NavLink

為什麼不使用 <a> 標籤進行路由導航？ 在 React 中，不建議直接使用一般的 <a> 標籤進行導航，原因如下： 重新加載整個頁...

秘密基地 ‧ 2023-10-08
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邦幫忙