以為「當滑鼠移動到 Toast 元件上時要暫停倒數」會很複雜,實際上的解決方式卻異常簡單。 成品 原始碼展示 開發思路 倒數進度條 首先透過 props.cou...
今天的重點摘錄 重用 stateful 邏輯幫助我們能製作客製化 Hook 撰寫時記得思考,怎樣可以增加重用性?(例如使用通用性高的命名、把可能不一樣的東西抽...
下半場規劃 目前已經到達 12 日,已經可以做出初步的 React 網頁,其中包含著建立 React 物件,並且在本機運作中轉譯(render)成我們想要的 H...
今天剛好要比較一下這兩個套件,說明一下自己比較這兩個套件的想法。 如果有人也用過這兩個套件,有任何想法或有說明錯的地方,都歡迎留言討論、分享。
知道如何控制視角位置後,今天我們來替這個過程加上過渡動畫!那在 Camera 的部分也是有相關的 Event 可以使用,一起來用抗抗吧~ (其實我也是昨天在打...
JavaScript 的內容有很多,【每天 5 分鐘】的介紹,不知道要寫到什麼時候 XD這幾天很掙扎,在 30 天的鐵人賽中, JS 的部分 要介紹到哪邊為止?...
前幾天已經寫好todolist的邏輯、樣式,現在我們的程式已經可以新增、瀏覽、刪除代辦事項,並且有簡單的外觀。不過新增的事項還沒辦法編輯,因此今天來做一下編輯的...
今天進到了 UI Library 的環節 UI Library 當我們在前端進行 UI 開發時有時候為了加快開發速度(或懶得開發)會使用現成的 UI Libra...
Day-13 專案演練 - React 拆元件的思路與操作(中) 到了這個階段,我發現一件事情...就是,我在 Day-7 時有提到要輸出報表,然後的這幾天我...
前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...
[情境任務] 小當家:各位~我特製了一道新菜色,我命名為黃金開口笑 解師傅:什麼!?那不是我的拿手絕活嗎!怎麼變成你的了 小當家:因為他的製程要比較久,這必須標...
hashtags: #react, #components, #accessibility, #datepicker 本篇接續前篇 如何製作日期選擇 Date...
今天我們要來延續昨天的提到的 DOM 為人詬病的效能問題,來討論 React 是如何透過 reconciliation 來解決這個問題的!我們都知道 DOM...
用途:將元件掛載到指定節點。除了昨天的 Dialog 家族外,接下來的 Toast 與 ToolTip 也都有使用到這個元件。 理由:在無法保證親代元件是否會有...
今天主要是練習實作,我在影片中使用的圖片來自 unsplash , json-server 這個套件的指令為: npx json-server --watch...
React 中以 state 資料以及 setState 作為 reconciliation 的觸發點,並且以 props 作為 component 層層往下的...
說明 useRef Hook 保存的值,不會因為每次元件 Render 而重新被創造。在初始化後,使用 useRef 回傳出來的物件,會始終指向同一個 Refe...
在這邊進行字串轉換成某種編碼方式的字,這邊以 URI 和 ASCII 為範例。 不過仍與昨日發生相同問題,也就是第一個字讀不到。這問題之後再解,現在先初步建立我...
本集感謝 ALAPH Camp 贊助本人持續創作,做自己想做的事,同時也讓更多人一同學習成長。 抱歉一直把 MUI 講成 MIUI...。 commi...
hashtags: #react, #components, #accessibility, #datepicker 關於 Date Picker Dialo...
昨天介紹了要如何在React中使用css,今天來介紹一下如何使用方便的React-bootstrap套件來建立一個漂亮的網站。p.s. 這一篇需要對bootst...
說是相機位置可能會有點抽象 (對!我就是直接英翻中的,標題真難下)其實就是使用者在地圖的第一視角位置啦~ Mapbox 對於 Camera 提供了以下功能:...
debounce 都提到了,怎麼能不提 throltte 呢? 情境 在玩 Pokemon Go 打對戰的時候,有時候想著按快一點把對方打趴,殊不知再怎麼快,...
Day-12 專案演練 - React 拆元件的思路與操作(上) 昨天玩了一下路由,今天在回來看 UI,我會將頁面上需要重複利用的樣式抽出來,在新建的 com...
Basic 的部分來到了最後一篇我來看看專案的 Branch & PR Git 回想起我的第一份工作,當時對 Git 超級不熟公司和我自己都沒什麼在做版...
[情境任務] 解師傅:太好了,菜單該有的功能都有了,這麼一來就萬無一失了! 小當家:恩…萬事俱備,只欠東風 解師傅:欸?…還需要什麼東風? 小當家:我一直很想說...
嗨大家好,我是 bywater,今天來到前端面大作戰的第十二篇文章,也是 React 系列的開始,這個系列我預計會有四篇文章,內容會從第一篇的 react 介...
說明 當我們想要共享邏輯在兩個 Function 之間時,會提取它成為第三個 Function。 在 React 的世界中,Function Component...
來幫昨天做好的骨架補上一些 CSS 樣式與動畫效果。 進一步組合 position: absolute 與 transform: translate(...)...
今天的重點摘錄 Hook 是 React 先寫好的東西,方便我們不用從頭造輪子、可以直接開發,之前提過的 useState useEffect 都是 Hook...