已經在 Day25中設計了製作身分證的樣式，接下來要製作點擊按鈕後進行的程式邏輯。 製作邏輯的 js 檔案 建立一個 idnoCreater.js 的檔案，裡面...
雖然寫了那麼多，不論是有用的，或沒用的，要怎麼確保有沒有寫好呢？ 當然就是就在講測試，雖然開發過程中可以測試功能正不正常，但隨著日後長大的需求有時難以回頭一一...
延續昨天 useEffect 的說明，今天著重在 cleanup function 的使用時機、並搭配 useEffect 中的 closure 來做到「取消...
安裝環境 創建模板 React + Redux Toolkit npx create-react-app my-app --template redux 安...
在前面章節中我們解析了將 effect 設計成即使多次執行也能保持正確的重要性。如果你還對這個觀念不是很熟悉的話，非常建議你先閱讀系列文前面的篇幅中關於 use...
Day-30 結語 - 沒有完賽心得 在這段時間裡面我只專注一件事情 :完成三十篇文章並且發表，不想為點閱率或者別人怎麼回應這些事情分心，就只是想達成三十天的目...
Day-29 常用網站工具分享 自己從頭到尾用 HTML 寫一個表格，或者從 0 開始使用 CSS 寫一個陰影效果，都是快把人逼死的過程啊，除非是真的打算刻苦一...
Day-28 安裝的 vscode 套件分享 套件跟書一樣，都是要用到的時候才會感覺自己讀的少，之所以到最後才分享工具跟套件，是因為有感覺難用過才會知道套件到底...
Day-27 專案演練 - 寫在最後 專案分享的尾聲，篇幅有限，還有很多想做的功能還沒完成，做個這 20 天來邊做邊寫的總結，在鐵人賽結束之後，我會繼續把之前說...
Day-26 專案演練 - 在 homePage 拿到 list redux 今天我們要完成 homePage 的一部分功能，跟 todo 有關的部分，其實鐵人...
我們今天來看什麼情況下結帳的話面會出現不一樣的元件 當你選購的方案為「訂閱方案」且價格為「0 元代幣」這時候你點選「立即訂閱」時他會跳出下面這個 Modal 這...
昨天我們介紹了什麼是 memorized hook，介紹他們是如何提升 React 的效能。接著，我們來更詳細一點的介紹各個 hook 要怎麼使用。 useMe...
台灣的無障礙規範 聲稱自己參照 w3c 規範， 但還是有太多地方跟國際規範不同。先不論是政治還是官僚等無聊原因，考慮到讀者未來發展性，筆者鼓勵盡量走國際規範...
前言 嗨，我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我，進而獲得更多資訊...
本文包含以下內容 格線系統 基本用法 設置斷點 父組件設置欄數 Grid version 2 格線系統 如果先前有學習過boostrap5的人應該對於lay...
React 狀態管理的分類 React的 狀態管理主要分三類：Local state、Context、Third Party 前面已經介紹了 Redux 及...
還記得我在 Day 04 - 在地圖上標記 Marker 的時候寫了一篇地圖的 Marker 教學嗎～其實標點不限於常見的 2D 地圖喔，3D 的也可以！我們今...
今天帶大家去日本看富士山吧～？不過是地圖版的啦，我也好想去日本玩 ༼இɷஇ༽ 程式碼我們沿用上一篇的 3D 地球地圖來繼續做，不清楚的可以點擊這裡！ 3D 地形...
今天來從官網理解 useEffect 最基本的使用方式： 呼叫 useEffect 定義 dependencies array 需要的話，加上 cleanu...
我們常見以及常用的地圖大多都是 2D 的，所以在分享這邊我們做 3D 地圖吧！今天就來看一下一顆簡單的旋轉地球我們要怎麼做～ 說是簡單，但看到的當下還是不禁讚...
在前面的章節中我們已經詳細的解析了 useEffect 正確的概念以及用法，也再三強調了 useEffect 的用途是同步資料到 React elements...
我昨天我們講到了購買流程今天我們看看這些元件是怎麼做的 以課程為例，他會有不同的課程方案可供選擇 首先是價格的部分 <PriceLabel var...
前言 嗨，我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我，進而獲得更多資訊...
終於進到我們最後的部分，「checkout」接下來我們會來看在這個專案中結帳的流程是怎麼進行的 我們以們前幾天的課程為例首先我們看到，如果課程為「0元」的情況分...
當 React 程式越來越龐大，就需要考慮效能的問題。memorize hook 是 React 提供的 api，可以避免重複 render 造成的效能問題。今...
雖然能把一些複雜的邏輯通通整理起來很舒服，但有時候你只是想省一滴滴的麻煩，或是想圖一點乾淨或是清楚的程式碼，因此本篇要來看看這些可能只是弄弄命名、重新包裝，或...
About 警示元素，主要用來展示明確跟重要的訊息， 並要吸引用戶的注意力而不打斷用戶當前正在進行的工作。 動態渲染警示，會自動被螢幕報讀閱讀， 在部分處理系統...
成品 原始碼展示 開發思路 參考 MDN 對於 window.matchMedia 的說明，可以知道這個方法會根據傳入的 media query 字串回傳對應的...
說明 一進 Redux Toolkit 的官網，就會看到以下示意圖。 它最初是為了解決使用 Redux 的三個常見問題 配置 Redux Store 過於複...
之前遇到的問題還沒有解法，但在 JavaScript 中是可以判斷身分證是否正確，僅在頁面顯示無法的，因此先略過這邊，我們繼續製作身分證製造機。 目標 這次要做...
eyelash*睫毛
Charlie
pjchender
Lala Code
Zet
aoigj100
HLTVProxy
時雨
HelloKayac
hogantech
DannyChen
lala_lee_jobs
no_
查理狐狐
iThome鐵人賽
看影片追技術