昨日的作業中,發現可以在 console 中顯示結果,但是無法在畫面顯示檢查結果。 嘗試了幾個方法,仍無法讓 React 正常的轉譯(Render)我的訊息。儘...
這個章節讓我們更深入的探討一下 dependencies 常見的錯誤使用方式。我們在前幾篇 useEffect 的深入解析中一再強調過一個概念:useEffec...
今天延續昨天的文章,來看看 forwardRef 和 useImperativeHandle 的使用,因為這兩個 API 大部分時在開發自己的元件庫時會用到,...
本文提及以下內容 基本設置 useNavigate控制導向 useNavigate傳遞history stack useNavigate傳遞狀態 頁面重新導向...
今天我們看到課程的簡介頁 在課程簡介頁中最上方為 Banner 區塊他顯示課程封面圖、標題和標籤在封面圖的部分做了放大和模糊具體的實作方是如下: import...
本篇文章提及以下部分 Material Design 更名MUI Material UI優點 加載字體方法 import元件的方法 Typography-排版...
Day-25 專案演練 - 創造全局待辦清單 redux 今天想來做一件事情,把 list 變成全局 state,接下來讓 HomPage 也能取得這份資料,...
DEMO 在這裡 情境 面對長長的列表與龐大的資料時,為了避免使用者感受到卡卡,你可能會希望等使用者滾動到該卡片時再進行資料的抓取;或是你想依照元素呈現的比例...
今天的重點摘錄 useMemo 可監聽值,當值改變才執行某些行為 基本寫法介紹 Functional Component 重渲染時會從頭跑一遍,生成新物件,因...
大家週日愉快~歡迎繼續來優化我們的Reagent專案 昨天用clojure語法讓貓貓emoji可以顯示在專案首頁裡 今天的自我練習題來啦: 我想要把貓貓kiss...
前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...
接下來要來介紹一下 useReducer,看到 "Reducer" 就可以料想到,他跟 Redux 應該有點關係。useReducer 是一...
本篇接續前篇 如何製作輪播 carousel 3【 carousel | 我不會寫 React Component 】 可以先看完上一篇再接續此篇。 Spec...
RxJS 在介紹 redux-observable 之前,先稍微理解一下 RxJS 的基本概念,RxJS 可以幫助我們解決很多非同步事件的疑難雜症,它提供了一套...
倒數第二天了,來做個比較大的:嘗試復刻出 MUI StyleProvider 的效果。 成品 原始碼展示 開發思路 兩套樣式設定存放在專案資料夾的 src/st...
想了兩天,我們來做一張可以進行行程規劃的地圖好了!不過是簡易版的啦,細節上的設定可以依據需求再去做更改~ 需求目標 老樣子,在進入實作前先訂一下我們的需求:...
在後面的幾天將會以 Redux Toolkit 來做說明,而在了解 Redux Toolkit,我們先來了解 Redux 的運作原理,在後面的操作上也會比...
基本的身分證檢查已經完成,可以檢查長度、地點、性別等等,但是缺少了檢查檢查碼的部分,這篇會說明如何建立檢查碼。 檢查碼功能 checkCkDigit() 增加檢...
如果你覺得接 Direction API 實在是很麻煩,要寫一大堆東西、只想用現成的話,那麼~這篇非常適合你! 其實我是在找 Demo 主題的時候,意外找到這個...
串接 API 的方式有很多種,你可以使用任何喜歡的 Ajax 函式庫來串接,如 Axios、ky 等等…,這邊將會以 JavaScript 原生方法 Fetc...
函式與 dependencies 一種常見的誤解是認為函式不應該填寫在 dependencies 中。我們來看一下這個範例: function SearchRe...
今天來看三個重點: 怎麼使用 ref 保存 DOM Node? callback ref 怎麼用? DOM Nodes 是在什麼時間點被保存當 ref 中?...
本文提及以下內容 用戶端的路由 傳統路由 react route如何運作 起手式 建立404的路由 巢狀路由 useParams參數 用戶端的路由 用戶端的...
我們昨天大概看了一下探索課程頁今天我們來看看「ProgramCollection」和 「ProgramCard」這兩個元件 ProgramCollection...
你一定在想截圖有甚麼好弄一篇文章的 DEMO 在這裡 情境 前陣子有遇到一個特別的需求,希望原本的訂單紀錄的呈現,也可以讓使用者擷取下來保存或是處理後續工作,...
本篇接續前篇 如何製作輪播 carousel 2【 carousel | 我不會寫 React Component 】 可以先看完上一篇再接續此篇。 Contr...
昨天我們把 Blog 部分結束今天接著看 Program 的部分 Program 分為「探索課程頁」和「課程內頁」我們今天一樣先從探索頁開始 ProgramCo...
前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...
延續上一篇 DAY23 的 React-router-dom 繼續往下介紹,如果沒看過的朋友,建議可以先看上一篇哦! 本篇將介紹 動態路由參數 當前路由資訊...
此篇版本為 react-router-dom v6 react-router-dom 可以設定 react 的網站路由,是以 react-router 為基底...