每天強迫自己產出內容是一個很大的挑戰，但這種輸入與輸出的循環，對我幫助真的很多！在這次鐵人賽寫作挑戰中，發現了不少自己在知識點上的盲區，以為已經了解某些Reac...
鯨魚
‧
2024-10-15
今天是挑戰的最後一天，我們聊了許多關於React和比較常見的套件，以及最後實作了Gym Pro的專案，為什麼要做這個挑戰主要是我七年的開發經驗都圍繞在後端，這幾...
Redux 是一個狀態管理庫，主要用來管理應用中的全局狀態，特別是當應用變得複雜時。Redux Toolkit（RTK）是官方推薦的開發 Redux 應用的工具...
鯨魚
‧
2024-10-14
今天是我們實作的最後一天，我們要為系統做最後的收尾工作，確保它穩定、高效、安全，並且易於使用。 1. 全面測試 首先，我們要進行全面的系統測試，確保所有功能都能...
昨日說明了Redux的介紹，今天就要再來準備實作的操作，這次實作也是要把 Day18 的TodoList小作品做個重構，讓原先用 useState 改用成 R...
鯨魚
‧
2024-10-13
今天，我們要來為系統加入一些功能。這些功能可能不會直接被使用者看到，但它們對於系統的長期健康發展有關。 1. 實現插件系統 首先，我們來實現一個簡單的插件系統，...
useContext useContext 是 react 提供的一個 hook，可以讓我們透過讀取和訂閱元件中 context 共享元件之間的資料，主要是用來...
雖然我們功能已經差不多了但也僅此與前端的功能，若要變成更完整的一個專案可以再加入PWA、後端登入、將景點儲存在資料庫等等，又或是將地圖套件做得更完整，礙於時間限...
今天，我們要來為系統增加一些功能，並且優化整體的用戶體驗。 1. 即時通知系統 首先，我們來實現一個即時通知系統，讓用戶可以及時收到重要的消息。我們將使用 So...
DOM DOM (Document Object Model) 是一個網頁樹狀資料結構的物件，用來呈現瀏覽器中的畫面結構。當頁面產生變化時，便是透過操作 DOM...
useReducer 是 React 提供的 Hook，用於處理更複雜的狀態管理。與 useState 相比，它引入了 reducer 函數來決定狀態更新的方式...
鯨魚
‧
2024-10-11
在現代網頁開發中，將網站快速且高效地部署到互聯網上是每位開發者的目標之一。Vercel 作為一個強大的部署平台，提供了簡單易用的工具，幫助開發者輕鬆地將應用程式...
useRef 是什麼？ useRef 是 React 提供的 hook，用來創建一個 可變（mutable）的引用對象，可以用來存取 DOM 元素或保存跨越多次...
今天，我們來為系統進行一些優化和安全性增強，對於打造一個穩定、高效、安全的系統是一定要做的。 1. 資料庫查詢優化 首先，我們來優化一些常用的資料庫查詢，以提高...
在現代的前端開發中，React 和 Redux 已經成為構建複雜應用的主流技術。然而，隨著應用的增大和複雜度的提升，調試和維護代碼變得愈加重要。為此，開發者需要...
終於來到了第30天的挑戰！這是我第一次參加鐵人賽，從決定參賽到正式開賽，心中經歷了許多掙扎，包括內容的配置和個人時間的安排。但如今順利完賽，我非常慶幸當初做出了...
useCallback的用途和使用時機 useCallback hook 最主要的作用在於幫助其他 React 效能優化的手段維持正常，例如：React.mem...
目標 前言 昨天再經過python後端API的CRUD開發之後高速的服務提供者Fast API 今天會介紹React的基本使用方式 不過我會講道說為什麼會使用...
React Compiler 是怎麼運作的? React Compiler 的運作流程很複雜，概括來說會執行以下幾個步驟： Babel Plugin： Ba...
今天，我們要來為系統新增兩個新功能：會員積分系統和課程預約功能，繼續擴充Gym Pro的系統功能完整性。 1. 會員積分系統 會員積分系統可以鼓勵會員更頻繁地使...
在 React 開發中，有時一些邏輯和功能會常常重複出現，若開發時沒有將程式碼做共用的話，就會到處都寫差不多像的內容，之後要做更改的話，就要同步作調整。這樣的寫...
鯨魚
‧
2024-10-10
Redux-Persist 是一個函式庫，它的主要功能是將 Redux store 中的狀態持久化到本地儲存（如瀏覽器的 localStorage 或sessi...
今天我們要來介紹三個非常實用的 TypeScript Utility Types，它們分別是 Exclude、Extract 以及 NonNullable。這些...
今天，我們要來為我們的系統加上重要的安全機制，並且優化整體的用戶體驗。 1. 實現身份驗證 首先，我們要實現一個完整的身份驗證機制。我們將使用 JWT（JSON...
useEffect hook 最主要的作用在於處理與畫面無關的 side effect，並非是 functional component 的生命週期API，因為...
React Memoization 和 React Compiler 在昨天的文章介紹了如何使用 React.memo , useMemo 和 useCallb...
在 React 中，當父組件重新渲染時，內部的變數和函式也會被重新創建，這可能導致子組件不必要的重新渲染，進而影響效能。為了避免這種情況，我們可以使用 memo...
鯨魚
‧
2024-10-09
在 React 中父組件重新渲染時，所有子組件也會重新渲染，即便這些子組件的 props 沒有發生變化。使用 memo 可以避免不必要的渲染，從而提升應用效能。...
鯨魚
‧
2024-10-08
今天我們要繼續介紹 TypeScript 的 Utility Types。這次要探索的是 Partial、Required 以及 Readonly，這些工具類型...
今天，我們要來實作一個報表和分析功能，讓健身房老闆可以一目了然地看到整個健身房的運營狀況。 1. 安裝必要的套件 首先，我們需要安裝 Recharts，這是一個...
Moscle.dev
Ashley
ntuedtd113
Jamie
roni
Jaren
iThome鐵人賽
看影片追技術