今天的主題是 React 裡的 State，他會用在我們跟 Component 進行互動時，像是輸入資料（Input）、點擊顯示與隱藏按鈕（Click）或是選取...
蛤啦？說話啊？啞吧哦？沒廣了哦哈哈洗洗睡吧 Zz 在介面操作上，任何會去戳 API 的行為，都應該要加上限流機制，這也常被做為經典考古題：Debounce &...
今天的文章接下來繼續介紹最後提到的事件的傳遞，這邊的傳遞通常是指假設我們在 Component 裡，觸發的事件可能會根據 Parent 跟 Child 的不同而...
前面幾天的內容，都比較偏向靜態的 JSX 生成，接下來的幾個篇章，會開始介紹怎麼在 React 上增加網站的互動性（像是點擊按鈕，選取選單，輸入資料等），讓我們...
你以為看到對方幾分鐘、幾小時前的訊息就夠焦慮了嗎？ 不......還有更焦慮的，就是曾經困擾廣大網友們的「已讀」^O^ 功能分析 經過之前的 MVP 實作，我...
樹（Tree）是一個時常用在處理 UI 與其中的項目關係的一個資料結構。像是在瀏覽器生成 HTML 架構，以及使用 CSS 來完成外觀更動時，都會運用到相對應的...
前情提要 在AWS和後端挑戰中，我們建立了多租戶資料庫架構和 Auth Service，今天我們要從前端角度實作多租戶管理介面。 一個企業級 SaaS 前端需求...
這幾天陸續看了一些在使用 Router 時，很常會遇到的一些使用情境，今天接著另一個在專案內也很常會需要處理的情境，那就是「頁面的權限控制」。 為什麼需要頁面的...
這次的鐵人賽感覺一直在後端打滾，但其實我是一名前端工程師，所以應該多洗一點前端的主題，致力於打造更好的操作體驗，也是我當初的選擇走這一行的原因！ 訊息時間 在...
前情提要 經過前面 9 天的打造，我們已經從零開始建立了一個完整的現代前端 SaaS 管理介面。今天讓我們回顧整個前端架構演進歷程，總結我們建立的現代 Web...
今天要來介紹一個我們在寫 React Component 很重要的觀念，就是讓 Component 保持純淨（Pure）。前面的文章就有提到在寫 Compone...
前情提要 在 Day 8 我們實作了 React Hook Form 與 Zod 驗證的進階應用，今天我們要在現有的 React Query 基礎上，實現更進階...
之前我們在前面的篇章知道了如何使用 大括號 {} 來幫助我們顯示變數資料。而有時候我們會想顯示不只一項資料，而是從擁有數個 值 得 陣列（Array） 中，顯示...
今天我們接著來看另一個當我們在初期設置專案時，會特別去設定的的部分，那就是「客製化錯誤頁面」。 我們一樣會先看 React 的部分，再看回來 Next.js 的...
前情提要 昨天我們建立了 React Query 資料狀態管理，學會了如何優化地處理 API 請求、快取和同步。今天我們要轉向前端開發的另一個重要議題：表單處理...
今天要來介紹也是在寫 React 的時候非常容易用到的功能，那就是 條件式渲染（Conditional Rendering）。這邊的渲染（Render），就是在...
前端的單元測試大多是透過 props 和內部狀態的變化來測試不同狀況的元件，不過事前準備稍微多一點！ 環境設定 Next 對於 Vitest 的設定說明 有點...
在進行前端專案的開發時，常常都會利用 layout 讓頁面整體的架構固定下來，並且將共用邏輯集中在 layout 處，使整體的頁面架構更好維護及開發。layou...
前情提要 昨天我們成功建立了 ORPC 客戶端，實現了型別安全的前後端通訊，並完成了 Vercel 部署。今天我們要來討論現代前端開發的核心議題：合適的資料狀態...
處理多個 props 傳入 繼續補充昨天的內容，昨天知道了如何把 props 傳入 Component 裡面並且在 Component 裡面使用他們。但有時候...
昨天的文章介紹了在 JSX 上面使用參數，而我們也可以在我們客制化的 Component 傳入參數或數值使用。而這些傳遞的東西在 React 就會叫做 prop...
從簡單組件到完整管理介面 在前四天的建置中，我們用 Zustand 建立了基本的狀態管理，並實作了 OTP 發送與驗證功能。今天我們要進一步提升使用者體驗，使用...
之前我們已經看了幾種不同的渲染模式，例如 SSR、CSR、SSG 與 ISR，也了解 RSC 是什麼了。今天我們接著來看看與這些渲染模式有著密不可分的角色「Ro...
在昨天的文章中介紹了 JSX 的基本用法，並且知道了 React Component 是會把架構、外觀、互動結合在一起使用 JavaScript 來完成的地方。...
前言 週末了我卻還在這寫文章，真你他...嘿！歡迎回來！我絕對沒有在偷偷抱怨，昨天的 Day 4 我們成功地在本地建立了一個，呃，我們就先叫他資料庫吧！雖然不是...
在 Day 02 有提到 React Component 會是一個 function 並且回傳 JSX 格式，今天就會來介紹什麼是 JSX，並且他跟一般的 Ht...
為什麼選擇 Zustand？ 在前端狀態管理的選擇上，我經歷過從 Redux 到 Context API 的演變。對於 Kyo-Dashboard 這樣的管理介...
聊天功能來了！這部分開發完成後，本機端就差不多可以運行所有的核心功能了。 收發訊息 一樣讓 on 和 emit 驅動這個事件 CHAT_EVENT.SEND...
Day 6: 1140918一、目標:建立首頁按鍵的畫面跳轉功能。 在 day 5的文章中，最後提到 app.jsx 這份檔案會處理系統核心和路由設定。檔案中的...
為什麼要專門設計 OTP 管理介面？ 昨天我們設計了前端整體架構，今天要開始實作第一個具體應用：Kyo-Dashboard OTP 管理介面。在接案過程中，客戶...
lihsuanh
Shin
Moscle.dev
文科少女
windate3411
iThome鐵人賽
看影片追技術