接下來要介紹一些進階應用啦~你一定看過像這種類型的地圖: 這個只是圖層 (Layer) 的應用之一,它的做法其實就是在一張基礎地圖上面再疊一張圖層,接下來的這...
昨天已經做出來已完成、未完成的效果了,但是只有style上的轉換,沒有記錄起來。今天要把已完成、未完成的狀態記錄在state中,並做出已完成、未完成的分頁。 儲...
昨天我們看完 styled-components今天來看 Component 裡面的結構 component structure 以 ProgramCoinMo...
情境 登入其實就是登入,恩。 如果覺得換個專案就要再弄一次登入很煩的話,這個也可以算是你的情境 XD 實際弄下來會是透過 Context 組成的 Provid...
昨天我們講完了 UI Library今天來看專案裡的 component 以前寫的 CSS 以前還在寫 PHP 的時候,很多時候都會需要撰寫前端在寫前端樣式的時...
今天主題提到2022三大前端開發框架使用量排行誰勝出?先來張在Stack Overflow自 2008 年成立以來,基於標籤使用情況的技術隨時間推移的趨勢,就可...
[情境任務] 美食家:這是我第一次吃到這種味道,這道菜有著前所未有的新鮮味…你們的餐點真是太好吃了~我寫了餐點評論送給你們 解師傅:哇!這怎麼好意思~太感謝了!...
Day-15 專案演練 - 打造表單功能 react-hook-form 表單在 react 中的處理相當的繁複,每個 input 都要一個 onCharge...
hashtags: #react, #components, #accessibility, #datepicker 本篇接續前篇 如何製作日期選擇 Date...
前言 現在逛網站,其實愈來愈熟悉連續不間斷的操作體驗,也愈來愈沒耐心,如果按了按鈕還會跳白色畫面等個幾秒鐘,即便只是閃一下,都會默默在心裡扣分XD 而 Reac...
這篇是 React 系列的最後一篇,下一篇就會開始講最近很紅的 Typescript!那這篇會以 React 18 為主題,大概講幾個我覺得蠻有趣的新功能,然...
在上一篇的章節中,我們詳細的解析了有關於連續呼叫 setState 時的自動 batching 機制。承著前文的脈絡,我們來探討看看一個延伸的情境:如果我們想基...
成品 原始碼展示 開發思路 如果希望畫面上有複數個 Toast 同時存在,最大的問題便是如何調整每一個 Toast 元件在畫面上的位置。在截稿前想的到的方式是:...
今天的重點摘錄 使用 npm install react-router-dom@5 下載 React Router 架構為: BrowserRouter 是...
useId 說明 為了生成唯一的Id,React 18 後提供了一個新的 Hook => useId const id = useId(); 他的基本原...
本日先進行 component 內的 props初探,了解 component 如何與外面的資料進行互動,使每個物件都可以順利的把資料傳入作用。 建立第一版 c...
上次做的 Demo 是台南美食之旅,今天就來用台中舉例好了!台中也好多好吃的 ... 一樣的,我拿 TDX (Transport Data eXchange)...
再續前一篇研究了一輪,這篇就來實作: DEMO 在這裡~~ 需求及描述 透過 Hook 可以達成: 點擊非指定元素時(即元素之外),能夠執行特定動作 以 D...
Day-14 專案演練 - React 拆元件的思路與操作(下) 沒想到拆元件居然真的講了三天。在實作的時候常常會感覺跳過很多步驟,但實際上沒有跳,只是每個步...
今天要繼續實作todolist,要讓todolist有切換已完成、未完成狀態的功能。 程式修正 昨天的編輯功能出了點問題,若是在沒修改的情況下提交,由於newI...
前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...
hashtags: #react, #components, #accessibility, #datepicker 本篇接續前篇 如何製作日期選擇 Date...
[情境任務] 小當家:客人點了一大桌的桌菜,真是累死我了! 解師傅:哇~這些菜看起來太美味了!看看那個醬汁!讓我拍個照先~ 解師傅拍的照片真漂亮,我們把它們放在...
從前面的章節中我們已經充分地了解到,當呼叫 setState 方法時就會觸發對應 state 定義的 component 的 re-render。然而當我們呼叫...
以為「當滑鼠移動到 Toast 元件上時要暫停倒數」會很複雜,實際上的解決方式卻異常簡單。 成品 原始碼展示 開發思路 倒數進度條 首先透過 props.cou...
今天的重點摘錄 重用 stateful 邏輯幫助我們能製作客製化 Hook 撰寫時記得思考,怎樣可以增加重用性?(例如使用通用性高的命名、把可能不一樣的東西抽...
下半場規劃 目前已經到達 12 日,已經可以做出初步的 React 網頁,其中包含著建立 React 物件,並且在本機運作中轉譯(render)成我們想要的 H...
今天剛好要比較一下這兩個套件,說明一下自己比較這兩個套件的想法。 如果有人也用過這兩個套件,有任何想法或有說明錯的地方,都歡迎留言討論、分享。
知道如何控制視角位置後,今天我們來替這個過程加上過渡動畫!那在 Camera 的部分也是有相關的 Event 可以使用,一起來用抗抗吧~ (其實我也是昨天在打...
前幾天已經寫好todolist的邏輯、樣式,現在我們的程式已經可以新增、瀏覽、刪除代辦事項,並且有簡單的外觀。不過新增的事項還沒辦法編輯,因此今天來做一下編輯的...