本文章將提及以下內容 props傳遞的遇到什麼問題—propDrilling 使用context解決propDrilling Setp1 創建context...
[情境劇場] 解師傅:餐廳請了歌手來駐唱,讓生意越來越好了,卻引來了隔壁小吃店的不滿,在我們版上留了負評 小當家:人紅是非多…這也是沒辦法的事,金錢才是王道啊!...
MUI 的 Accordion 支援兩種行為: 每個 Accordion 元件的開闔狀態各自獨立:當畫面上有複數個 Accordion 元件時,開啟 Acco...
為什麼要做狀態管理 在 React 設定 state,會透過 useState 的第二個 setState Function 做處理,但這樣做會造成以下的問題。...
今天的重點摘錄 規則: 用習慣的方式撰寫 CSS 屬性不用改小駝峰寫法 可以實現 hover 、 media-query 在要用的元件 import ,並搭...
先前問題與解法 於昨日探討 React 避免太多的轉譯(Render)動作,因此改變 state 並不會馬上反應,會需要等到批次作業,因此需要取得另外處理。 第...
昨天我們用 Line 畫了台灣地圖,那今天就來幫台灣地圖上個色吧 資料來源我們一樣用政府資料開放平台所提供的縣市邊界檔案,如果沒看前一篇的介紹可以看一下資料處理...
承接上篇,已經把登入的畫面導向製作完成了,現在要進入核心的部分,也就是驗證啦! DEMO 在這裡~~~ 開始! 假資料 先來準備一組對應的假資料,實際上不會那麼...
上一篇我們講完了 Component 的結構今天來講講 return 部分 <></> 這是我們在開發中,很常遇到這個的報錯「JSX e...
透過上一篇章的解析,我們已經了解到為什麼我們不應該在 React 中去 mutate state 的資料了。因此,當我們想更新物件或陣列時就必須以 immuta...
昨天介紹了context是什麼,以及useContext要怎麼用,今天來介紹一下要怎麼在開發上實際運用context object以及useContext。 建...
blessed blessed 是一個用來撰寫 TUI (text user interface) 的套件包。 blessed-react react-ble...
hashtags: #react, #components, #accessibility, #breadcrumb Spec: Tag 麵包屑元件的列表部分...
Day-17 打造表格列選擇功能 react-table 在 todos 中可以當作任務是否完成的選取框框,也可以作為列的選取手段,這樣的設計好像很少見,我之...
說明 React.memo 是用來減少不必要被更新的元件被重新渲染。當父元件的資料狀態被更新時,若子元件相關的 props 沒有因此被更新時,這個子元件就不需被...
原理:「點擊 AccordionTitle 部位後,顯示下方的 AccordionBody 內容」。 不過為了還原 MUI Accordion 的結構,實作時使...
[情境劇場] 解師傅:話說小當家,你這彈跳甲魚湯還真是好喝,這麼多食材,為什麼你總是能分辨那些食材是新鮮的? 小當家:哎…解師傅,你忘了舌頭是我最厲害的武器了嗎...
今天的重點摘錄 規則: 外層包大括號+大括號 屬性有 dash 的改小駝峰寫法 以數字或字串傳遞值 搭配三元運算子判斷條件,再套用樣式 樣式物件也能抽出單獨...
今天主題提到2022三大前端開發框架使用量排行誰勝出?先來張在Stack Overflow自 2008 年成立以來,基於標籤使用情況的技術隨時間推移的趨勢,就可...
上一篇介紹 Layer 的架構時,我們有說過「除了 background 和 sky 以外,每個圖層都需要從 source 引用數據」,那我們要怎麼引用這些數據...
先前遇到的問題 在第10天發現取到的值都是之前的值,對此完全不知道發生什麼事情。經過網友的回應,原來是在 batch update 發生的問題。原來 React...
承接上篇,本篇要來實作簡單的登入功能。 期望登入是透過 JWT + localStorage 的方式來進行登入與保留登入的 token,並進一步搭配React...
昨天我們看完 styled-components今天來看 Component 裡面的結構 component structure 以 ProgramCoinMo...
在 React 當中,state 是可以存放 JavaScript 中的任何資料型別,除了像是字串、數字等直接可以表示值的型別,當然也支援物件或陣列這種以參考(...
Day-16 掌控表格的行與列 react-table 基本安裝與使用 會開始學習使用 react-table 是有故事的,因為工作上有個需求是要讓表格需要排...
昨天我們用useState、useEffect、react-bootstrap完成了todolist程式,不過在寫程式的過程中,會發現我們傳遞的props隨著功...
hashtags: #react, #components, #accessibility, #datepicker 本篇接續前篇 如何製作日期選擇 Date...
Re-Render (重新渲染) 及 Memorize (記住) React 的頁面是由很多個 Component 堆疊而成,在前面的文章可以發現,要讓資料與畫...
成品 原始碼展示 開發思路 原理十分簡單:透過資料的 id 來控制顯示內容,再根據被點擊的標籤的順序(index)來計算標籤下方提示線的顯示位置。 先來看看 T...
今天的重點摘錄 useParams 這個 Hook 可幫助我們取得網址後面的 id ,藉此完成商品內頁 useHistory 這個 Hook 可幫助我們達到前...