如果你覺得接 Direction API 實在是很麻煩,要寫一大堆東西、只想用現成的話,那麼~這篇非常適合你! 其實我是在找 Demo 主題的時候,意外找到這個...
函式與 dependencies 一種常見的誤解是認為函式不應該填寫在 dependencies 中。我們來看一下這個範例: function SearchRe...
今天來看三個重點: 怎麼使用 ref 保存 DOM Node? callback ref 怎麼用? DOM Nodes 是在什麼時間點被保存當 ref 中?...
本文提及以下內容 用戶端的路由 傳統路由 react route如何運作 起手式 建立404的路由 巢狀路由 useParams參數 用戶端的路由 用戶端的...
本篇接續前篇 如何製作輪播 carousel 2【 carousel | 我不會寫 React Component 】 可以先看完上一篇再接續此篇。 Contr...
Day-24 專案演練 - 用跳窗來小試身手 redux 今天要來嘗試 redux,用的是 RTK(Redux Toolkit),可以先去官網看看這是個甚麼工...
你一定在想截圖有甚麼好弄一篇文章的 DEMO 在這裡 情境 前陣子有遇到一個特別的需求,希望原本的訂單紀錄的呈現,也可以讓使用者擷取下來保存或是處理後續工作,...
昨天我們把 Blog 部分結束今天接著看 Program 的部分 Program 分為「探索課程頁」和「課程內頁」我們今天一樣先從探索頁開始 ProgramCo...
前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...
此篇版本為 react-router-dom v6 react-router-dom 可以設定 react 的網站路由,是以 react-router 為基底...
這篇是優化的最後一篇文章,要來討論優化 React 的三種方法,分別是 useMemo, React.memo 和 useCallback! useMemo...
30天也剩沒幾天了,現在才要進入 devops?! 圖片來源:Docker (@Docker) / Twitter 前面基礎建設都弄好了接下來就以簡易的前...
今天的重點摘錄 在 Component API 可以查詢每個元件能使用的 props 客製化 theme 的方法(Space / FontSize / Pla...
參考了 MUI Badge 的一些設計,最後決定實作成「當 props.badgeContent 的值為 falsity 時,不顯示 badge 點;並且使用者...
說明 redux-thunk 是簡化 Redux 處理「非同步事件」的 Middleware 套件。Redux Middleware 是用來在 Action 進...
接下來會來介紹一下各種其他 React 常用功能。今天我們來說一下要怎麼在 React 中操作元素。一般來說,操作元素會使用 querySelector取得 D...
檢查功能做完,接著要把功能與畫面結合,這時 React 就登場囉! 這邊會做基本資料檢查 製作畫面 我們畫面就很簡單的做一個輸入的欄位,還有觸發檢查的按鈕,並且...
今天來談談為什麼要特別用 ref 來把變數保存起來?為什麼不能直接把變數訂在元件外面呢?最後則跟著官方文件來看看 useRef 是如何實作的。 https:/...
今天的主題很單純,就是單純上傳圖片,不論是只有一個頁面或是多個功能都要用到,製造一個 hook 是很不虧的選擇,因為也是懶得再寫一次 (¬_¬) DEMO 底家...
在上一篇關於 useEffect 的深度解析中,我們已經了解到了 dependencies 是一種效能的最佳化手段,而不是用來控制生命週期或是商業邏輯。對於 u...
昨天我們看完了文章總覽頁今天我們進到文章內頁 程式碼如下: import { Icon } from '@chakra-ui/icons' // ~中間略~...
昨天介紹了該如何呼叫 Direction 這支 API,我們今天就拿官網給的範例教學練練手~ 先說明一下我們要做的東西:載入地圖後會有個藍色的點,這個點是我們...
昨天介紹了 useForm 的基本用法,今天來多介紹一些 React Hook Form 別的用法。 FormProvider 前幾天介紹了資料管理的 Cont...
今天是第30天 ~好的各位,我在前幾天的努力之下,做了個儀表板整合前面每天的作品 ~ 總共實作了27個作品其實整合儀表板的想法從一開始就有了XD,就是一個趕死線...
Day-23 專案演練 - 狀態管理員 redux 近半年前的我剛碰到 redux 的時候,卡關卡很久,看 RTK 的官方教學看不懂,就在網上找到了原作者的教...
當專案越來越多 Components 時,為了使用 props,會將 props 層層傳入,但也許這個 Component 根本沒用到這個 props,卻為了...
本篇接續前篇 如何製作輪播 carousel 1【 carousel | 我不會寫 React Component 】 可以先看完上一篇再接續此篇。 Scre...
說明 Middleware 稱為中介層,在許多後端伺服器框架中都可以看到 Middleware 的應用,Middleware 會在定義好的起點與終點之間,針對中...
今天的重點摘錄 安裝: npm install @mui/material @emotion/react @emotion/styledicon 安裝: np...
[Day23] 從ClojureScript 到 Reagent (3) 建立Reagent專案 昨天介紹完前端專案為什麼選擇使用React,以及透過Reage...