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

1 Like 0 留言 287 瀏覽

鐵人賽佛心分享-SideProject30

讓演算法起舞：前端特效應用的探索之旅系列第 35 篇

技術 E5 流暢分形渲染：滑鼠與手勢互動在 React 的應用

引言在現代的網頁應用中，滑鼠和觸控的互動是增強用戶體驗的關鍵因素。無論是拖曳、縮放，還是手勢操作，都能讓網頁更加生動且易於操作。這篇文章將探討如何通過滑鼠和觸...

jerrythepotato ‧ 2024-10-18 ‧團隊鐵齒不信寫不完

0 Like 0 留言 88 瀏覽

鐵人賽 Modern Web DAY 22

30天打造個人簡易旅遊網站系列第 22 篇

技術 Day 22：使用Redux建立一個旅遊行程(一)

昨天我們剛把收藏功能給實現了，對於Redux的使用也可以算是有初步的認識了，今天要來實作建立行程的按鈕，一樣是透過Redux來實現，但這部份我們會分成三天，第一...

ntuedtd113 ‧ 2024-10-05

0 Like 0 留言 161 瀏覽

鐵人賽 Modern Web DAY 20

30天打造個人簡易旅遊網站系列第 20 篇

技術 Day 20：Redux安裝與基本介紹

在現代前端應用程式中，當資料流變得複雜時，狀態管理變得非常重要。Redux是一個流行的JavaScript狀態管理工具，它讓應用的狀態管理變得可預測且易於維護。...

ntuedtd113 ‧ 2024-10-03

0 Like 0 留言 143 瀏覽

鐵人賽 Modern Web DAY 19

30天打造個人簡易旅遊網站系列第 19 篇

技術 Day 19：Search Bar搜尋欄位的實作

在購物網站、瀏覽器、地圖等等地方搜尋欄是隨處可見的東西，在這邊我們要教大家如何在地圖中利用Antd的AutoComplete來實踐搜尋功能。當我們按下enter...

ntuedtd113 ‧ 2024-10-02

0 Like 0 留言 121 瀏覽

鐵人賽 Modern Web DAY 18

30天打造個人簡易旅遊網站系列第 18 篇

技術 Day 18：React Leaflet-自定義Popup樣式

目前在地圖中可以看到，許多景點的Marker，但點擊後只會出現簡單的地名而已，這樣看起來非常的單調，在今天，我們想把這個Marker的彈跳視窗進行美化。 1.將...

ntuedtd113 ‧ 2024-10-01

0 Like 0 留言 176 瀏覽

鐵人賽 JavaScript DAY 30

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

技術 Day 30: 總結與 Vercel 部署實戰

經過 30 天的持續努力，我們已經完成了專案的開發。今天，作為最終章，我們將重點介紹如何將整個專案部署到 Vercel，讓它真正上線供使用者訪問。除了部署，我們...

carolcheng ‧ 2024-09-30

0 Like 0 留言 165 瀏覽

鐵人賽 JavaScript DAY 26

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

技術 Day 26: 如何在 React 中追蹤用戶行為

在前一篇文章中，我們展示了如何將多語言資料從本地 JSON 檔案轉換為 API 形式，並部署到 Vercel 進行集中管理。這樣的改進讓我們的應用能夠動態從伺服...

carolcheng ‧ 2024-09-26

0 Like 0 留言 118 瀏覽

鐵人賽 JavaScript DAY 28

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

技術 Day 28: 無需後端，利用 EmailJS 輕鬆處理表單郵件

在前一篇文章中，我們實現了前端的聯絡表單，並展示了如何使用表單來捕獲用戶的輸入資料。今天，我們將進一步深入，展示如何使用 EmailJS 將表單資料發送到後端，...

carolcheng ‧ 2024-09-28

0 Like 0 留言 160 瀏覽

鐵人賽 JavaScript DAY 25

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

技術 Day 25: 利用單例模式優化 React 應用的 i18n 支援

在前一篇文章中，我們展示了如何將多語言資料從本地 JSON 檔案轉換為 API 形式，並將其部署到 Vercel 進行集中管理。這樣的改進使我們的應用能夠動態從...

carolcheng ‧ 2024-09-25

0 Like 0 留言 145 瀏覽

鐵人賽 Modern Web DAY 7

現在就學React.js 系列第 7 篇

技術 React元件間的資料傳遞 - props - Day07

在 React 中，props 是一種從父元件向子元件傳遞數據的機制可以通過 props 傳遞任何 JavaScript 值，包括物件、陣列，函數，甚至也可以傳...

鯨魚 ‧ 2024-09-21

0 Like 0 留言 123 瀏覽

鐵人賽 Modern Web DAY 6

現在就學React.js 系列第 6 篇

技術建立React中的第一個元件 - Day6

經過昨天的學習，我們已經對 JSX 的使用和規則有基本的認識。透過 JSX 能夠建立元素(element)，並將多個元素組合在一起，就能創建出「元件」（Comp...

鯨魚 ‧ 2024-09-20

1 Like 0 留言 222 瀏覽

鐵人賽佛心分享-SideProject30 DAY 6

讓演算法起舞：前端特效應用的探索之旅系列第 6 篇

技術 A5 面板元件－一鍵搞定！錄影按鈕元件

為什麼要錄影在互動性高的應用程式中，讓使用者可以自由紀錄畫面，是必備的元素之一。這不僅提供了用戶便捷的錄影功能，也讓開發者可以輕鬆製作展示影片。無論是創建教學...

jerrythepotato ‧ 2024-09-19 ‧團隊鐵齒不信寫不完

0 Like 0 留言 244 瀏覽

鐵人賽 JavaScript DAY 17

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

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

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

carolcheng ‧ 2024-09-17

0 Like 0 留言 331 瀏覽

鐵人賽 JavaScript DAY 14

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

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

在過去的幾篇文章中，我們探討了如何使用 CSS Modules 和 CSS 變數來優化應用中的主題切換機制，並提高應用的靈活性和可維護性。今天，我們基於Fig...

carolcheng ‧ 2024-09-14

0 Like 0 留言 237 瀏覽

鐵人賽 JavaScript DAY 13

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

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

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

carolcheng ‧ 2024-09-13

0 Like 0 留言 295 瀏覽

鐵人賽 JavaScript DAY 12

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

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

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

carolcheng ‧ 2024-09-12

0 Like 0 留言 293 瀏覽

鐵人賽 JavaScript DAY 11

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

技術 Day 11: 用 React Router 實現頁面導航

在之前的學習中，我們探討了如何優化應用的性能和結構。隨著應用的增大，將所有功能集中在一個組件裡變得不夠靈活，因此，我們將進一步模組化應用功能，讓結構更加清晰，便...

carolcheng ‧ 2024-09-11

0 Like 0 留言 289 瀏覽

鐵人賽 JavaScript DAY 10

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

技術 Day 10 : Lazy Loading 優化 React 大文件加載

在應用規模增長的過程中，性能優化始終是前端工程師需要解決的重要課題。上篇文章中，我們討論了如何使用自訂日誌系統來提升應用效率。而今天，我們將進一步探討通過 La...

carolcheng ‧ 2024-09-10

0 Like 0 留言 268 瀏覽

鐵人賽 JavaScript DAY 9

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

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

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

carolcheng ‧ 2024-09-09

0 Like 0 留言 221 瀏覽

鐵人賽 JavaScript DAY 8

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

技術 Day 8 ：優化 Context 重繪，提升 React 性能

在前一篇文章中，我們介紹了如何利用 ThemeProvider 和自定義 Hook useTheme 來集中管理應用的主題狀態。隨著應用規模的擴大，我們開始管理...

carolcheng ‧ 2024-09-08

0 Like 0 留言 225 瀏覽

鐵人賽 JavaScript DAY 6

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

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

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

carolcheng ‧ 2024-09-06

0 Like 0 留言 658 瀏覽

技術 Laravel + GraphQL 接案心得＆範例分享 Part 2：前端 Query/Mutation 與 React 串接範例

在上一篇文章，我簡單介紹了 GraphQL 的好處，以及如何在 laravel 中實作這一篇文章，接著介紹一下如何在前端使用 React 進行整合實務範例與...

howtomakeaturn ‧ 2023-11-20

0 Like 0 留言 849 瀏覽

技術 Laravel + GraphQL 接案心得＆範例分享 Part 1：強大優點、API 線上試玩、工具介紹

客戶最近有把舊 laravel 專案改寫為 SPA 的需求，需要前後端分離為了方便前後端溝通、改善開發者體驗，我建議＆協助他們導入 GraphQL 技術到 l...

howtomakeaturn ‧ 2023-11-20

1 Like 0 留言 1281 瀏覽

技術前端開發筆記：如何在React專案使用MQTT

最近終於完成公司新產品的前端開發啦！不過在開發時也遇到了不少挑戰，其中最難處理的就屬「MQTT通訊協定」的部分了...😅 而自己在study或是Google資...

Bob ‧ 2023-11-08

0 Like 0 留言 681 瀏覽

鐵人賽 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 留言 486 瀏覽

鐵人賽 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 留言 451 瀏覽

鐵人賽 Modern Web DAY 30

react 學習記錄系列第 30 篇

技術 [Day30]我的 react 學習記錄 - 結束啦！

結束了！今天就是最後一天了，終於結束了！！！自己在年初的時候給自己下了一個目標，希望可以參加今年的 IT 鐵人賽，並且順利完賽。想不到這個目標真的達成了...

evan_hsu ‧ 2023-10-14

0 Like 0 留言 475 瀏覽

鐵人賽 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 留言 648 瀏覽