iT邦幫忙

react相關文章
共有 1537 則文章
鐵人賽 Modern Web DAY 17

技術 解決propDrilling問題—簡化consumer的useContext

本文章將提及以下內容 props傳遞的遇到什麼問題—propDrilling 使用context解決propDrilling Setp1 創建context...

鐵人賽 Modern Web DAY 17

技術 [DAY 17] useEffect 處理副作用

[情境劇場] 解師傅:餐廳請了歌手來駐唱,讓生意越來越好了,卻引來了隔壁小吃店的不滿,在我們版上留了負評 小當家:人紅是非多…這也是沒辦法的事,金錢才是王道啊!...

鐵人賽 Modern Web DAY 21

技術 day21: Accordions

MUI 的 Accordion 支援兩種行為: 每個 Accordion 元件的開闔狀態各自獨立:當畫面上有複數個 Accordion 元件時,開啟 Acco...

鐵人賽 Modern Web DAY 17
開始搞懂React生態系 系列 第 17

技術 Day 17 初探狀態管理 - Flux 架構 與 useReducer

為什麼要做狀態管理 在 React 設定 state,會透過 useState 的第二個 setState Function 做處理,但這樣做會造成以下的問題。...

鐵人賽 影片教學 DAY 11
150 分鐘學 React 系列 第 19

技術 第 18 天 [ 引入 CSS (外部引入):使用與限制 ]

今天的重點摘錄 規則: 用習慣的方式撰寫 CSS 屬性不用改小駝峰寫法 可以實現 hover 、 media-query 在要用的元件 import ,並搭...

鐵人賽 Modern Web DAY 16

技術 【D16】 小工具:轉換字串編碼(part 2)

先前問題與解法 於昨日探討 React 避免太多的轉譯(Render)動作,因此改變 state 並不會馬上反應,會需要等到批次作業,因此需要取得另外處理。 第...

鐵人賽 Modern Web DAY 16

技術 Day 16 - Layers (2):Fill

昨天我們用 Line 畫了台灣地圖,那今天就來幫台灣地圖上個色吧 資料來源我們一樣用政府資料開放平台所提供的縣市邊界檔案,如果沒看前一篇的介紹可以看一下資料處理...

鐵人賽 Modern Web DAY 18

技術 # [DAY 18] 自己的Hook自己做!AuthProvider 不是 Hook 吧?(下)

承接上篇,已經把登入的畫面導向製作完成了,現在要進入核心的部分,也就是驗證啦! DEMO 在這裡~~~ 開始! 假資料 先來準備一組對應的假資料,實際上不會那麼...

鐵人賽 Modern Web DAY 16

技術 Component (3)

上一篇我們講完了 Component 的結構今天來講講 return 部分 <></> 這是我們在開發中,很常遇到這個的報錯「JSX e...

鐵人賽 Modern Web DAY 16

技術 [Day 16] Immutable update 物件與陣列的基本功

透過上一篇章的解析,我們已經了解到為什麼我們不應該在 React 中去 mutate state 的資料了。因此,當我們想更新物件或陣列時就必須以 immuta...

鐵人賽 Modern Web DAY 16

技術 [Day16]用React讓網站動起來:Context 範例

昨天介紹了context是什麼,以及useContext要怎麼用,今天來介紹一下要怎麼在開發上實際運用context object以及useContext。 建...

鐵人賽 Modern Web DAY 18

技術 如何製作麵包屑 BreadCrumb【 breadcrumb | 我不會寫 React Component 】

hashtags: #react, #components, #accessibility, #breadcrumb Spec: Tag 麵包屑元件的列表部分...

鐵人賽 自我挑戰組 DAY 17

技術 Day-17 打造表格列選擇功能 react-table

Day-17 打造表格列選擇功能 react-table 在 todos 中可以當作任務是否完成的選取框框,也可以作為列的選取手段,這樣的設計好像很少見,我之...

鐵人賽 Modern Web DAY 16
開始搞懂React生態系 系列 第 16

技術 Day 16 React.memo (HOC)

說明 React.memo 是用來減少不必要被更新的元件被重新渲染。當父元件的資料狀態被更新時,若子元件相關的 props 沒有因此被更新時,這個子元件就不需被...

鐵人賽 Modern Web DAY 20

技術 day20: Accordion

原理:「點擊 AccordionTitle 部位後,顯示下方的 AccordionBody 內容」。 不過為了還原 MUI Accordion 的結構,實作時使...

鐵人賽 Modern Web DAY 16

技術 [DAY 16] 好用的 React Developer Tools 偵錯工具

[情境劇場] 解師傅:話說小當家,你這彈跳甲魚湯還真是好喝,這麼多食材,為什麼你總是能分辨那些食材是新鮮的? 小當家:哎…解師傅,你忘了舌頭是我最厲害的武器了嗎...

鐵人賽 影片教學 DAY 11
150 分鐘學 React 系列 第 18

技術 第 17 天 [ 引入 CSS ( inline-style):使用與限制 ]

今天的重點摘錄 規則: 外層包大括號+大括號 屬性有 dash 的改小駝峰寫法 以數字或字串傳遞值 搭配三元運算子判斷條件,再套用樣式 樣式物件也能抽出單獨...

鐵人賽 自我挑戰組 DAY 15

技術 [Day15] 2022三大前端框架庫,使用量排行誰勝出(Angular/React/Vue)?

今天主題提到2022三大前端開發框架使用量排行誰勝出?先來張在Stack Overflow自 2008 年成立以來,基於標籤使用情況的技術隨時間推移的趨勢,就可...

鐵人賽 Modern Web DAY 15

技術 Day 15 - Layers (1):Line

上一篇介紹 Layer 的架構時,我們有說過「除了 background 和 sky 以外,每個圖層都需要從 source 引用數據」,那我們要怎麼引用這些數據...

鐵人賽 Modern Web DAY 15

技術 【D15】 小工具:溫度換算(part 2)

先前遇到的問題 在第10天發現取到的值都是之前的值,對此完全不知道發生什麼事情。經過網友的回應,原來是在 batch update 發生的問題。原來 React...

鐵人賽 Modern Web DAY 17

技術 [DAY 17] 自己的Hook自己做!AuthProvider 不是 Hook 吧?(上)

承接上篇,本篇要來實作簡單的登入功能。 期望登入是透過 JWT + localStorage 的方式來進行登入與保留登入的 token,並進一步搭配React...

鐵人賽 Modern Web DAY 15

技術 Component (2)

昨天我們看完 styled-components今天來看 Component 裡面的結構 component structure 以 ProgramCoinMo...

鐵人賽 Modern Web DAY 15

技術 [Day 15] 維持 React 資料流可靠性的核心關鍵:Immutable state

在 React 當中,state 是可以存放 JavaScript 中的任何資料型別,除了像是字串、數字等直接可以表示值的型別,當然也支援物件或陣列這種以參考(...

鐵人賽 自我挑戰組 DAY 16

技術 Day-16 掌控表格的行與列 react-table 基本安裝與使用

Day-16 掌控表格的行與列 react-table 基本安裝與使用 會開始學習使用 react-table 是有故事的,因為工作上有個需求是要讓表格需要排...

鐵人賽 Modern Web DAY 15

技術 [Day15] 用React讓網站動起來:useContext

昨天我們用useState、useEffect、react-bootstrap完成了todolist程式,不過在寫程式的過程中,會發現我們傳遞的props隨著功...

鐵人賽 Modern Web DAY 17

技術 如何製作日期選擇 Date Picker 5【 date picker | 我不會寫 React Component 】

hashtags: #react, #components, #accessibility, #datepicker 本篇接續前篇 如何製作日期選擇 Date...

鐵人賽 Modern Web DAY 15
開始搞懂React生態系 系列 第 15

技術 Day 15 Memorized Hook - useMemo、useCallback

Re-Render (重新渲染) 及 Memorize (記住) React 的頁面是由很多個 Component 堆疊而成,在前面的文章可以發現,要讓資料與畫...

鐵人賽 Modern Web DAY 19

技術 day19: Tabs

成品 原始碼展示 開發思路 原理十分簡單:透過資料的 id 來控制顯示內容,再根據被點擊的標籤的順序(index)來計算標籤下方提示線的顯示位置。 先來看看 T...

鐵人賽 影片教學 DAY 11
150 分鐘學 React 系列 第 17

技術 第 16 天 [ useParams 與動態路徑參數、 useHistory 與重新導向和 404 頁面 ]

今天的重點摘錄 useParams 這個 Hook 可幫助我們取得網址後面的 id ,藉此完成商品內頁 useHistory 這個 Hook 可幫助我們達到前...