iT邦幫忙

react相關文章
共有 1742 則文章
鐵人賽 Modern Web DAY 24

技術 【D24】 淺談:製作檢查功能時發生的 render 問題

昨日的作業中,發現可以在 console 中顯示結果,但是無法在畫面顯示檢查結果。 嘗試了幾個方法,仍無法讓 React 正常的轉譯(Render)我的訊息。儘...

鐵人賽 Modern Web DAY 24

技術 [Day 24] useEffect dependencies 的經典錯誤用法

這個章節讓我們更深入的探討一下 dependencies 常見的錯誤使用方式。我們在前幾篇 useEffect 的深入解析中一再強調過一個概念:useEffec...

鐵人賽 影片教學 DAY 24
我讀你看 系列 第 24

技術 [React] Manipulating the DOM with Refs: forwardRef and useImperativeHandle

今天延續昨天的文章,來看看 forwardRef 和 useImperativeHandle 的使用,因為這兩個 API 大部分時在開發自己的元件庫時會用到,...

鐵人賽 Modern Web DAY 24

技術 React route—useNavigate介紹、控制history stack、傳遞參數、重新導向

本文提及以下內容 基本設置 useNavigate控制導向 useNavigate傳遞history stack useNavigate傳遞狀態 頁面重新導向...

鐵人賽 Modern Web DAY 25

技術 Program (3)

今天我們看到課程的簡介頁 在課程簡介頁中最上方為 Banner 區塊他顯示課程封面圖、標題和標籤在封面圖的部分做了放大和模糊具體的實作方是如下: import...

鐵人賽 Modern Web DAY 25

技術 Material UI更名為MUI、基本介紹、加載字體、import方式—Typography元件

本篇文章提及以下部分 Material Design 更名MUI Material UI優點 加載字體方法 import元件的方法 Typography-排版...

鐵人賽 自我挑戰組 DAY 25

技術 Day-25 專案演練 - 創造全局待辦清單 redux

Day-25 專案演練 - 創造全局待辦清單 redux 今天想來做一件事情,把 list 變成全局 state,接下來讓 HomPage 也能取得這份資料,...

鐵人賽 Modern Web DAY 26

技術 [DAY 26] 自己的Hook自己做! 用 IntersectionObserver 弄出動態的網站吧!

DEMO 在這裡 情境 面對長長的列表與龐大的資料時,為了避免使用者感受到卡卡,你可能會希望等使用者滾動到該卡片時再進行資料的抓取;或是你想依照元素呈現的比例...

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

技術 第 25 天 [ useMemo ]

今天的重點摘錄 useMemo 可監聽值,當值改變才執行某些行為 基本寫法介紹 Functional Component 重渲染時會從頭跑一遍,生成新物件,因...

鐵人賽 Modern Web DAY 25

技術 [Day25] 從ClojureScript 到 Reagent (3之2) 建立元件 component

大家週日愉快~歡迎繼續來優化我們的Reagent專案 昨天用clojure語法讓貓貓emoji可以顯示在專案首頁裡 今天的自我練習題來啦: 我想要把貓貓kiss...

鐵人賽 Software Development DAY 24
React框架白話文運動 系列 第 24

技術 React白話文運動24-React Redux

前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...

鐵人賽 Modern Web DAY 24

技術 [Day24]用 React 讓網站動起來:useRecucer

接下來要來介紹一下 useReducer,看到 "Reducer" 就可以料想到,他跟 Redux 應該有點關係。useReducer 是一...

鐵人賽 Modern Web DAY 26

技術 如何製作輪播 carousel 4【 carousel | 我不會寫 React Component 】

本篇接續前篇 如何製作輪播 carousel 3【 carousel | 我不會寫 React Component 】 可以先看完上一篇再接續此篇。 Spec...

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

技術 Day 24 Redux 非同步 Action 解決方案 - redux-observable

RxJS 在介紹 redux-observable 之前,先稍微理解一下 RxJS 的基本概念,RxJS 可以幫助我們解決很多非同步事件的疑難雜症,它提供了一套...

鐵人賽 Modern Web DAY 28

技術 day28: StyleProvider

倒數第二天了,來做個比較大的:嘗試復刻出 MUI StyleProvider 的效果。 成品 原始碼展示 開發思路 兩套樣式設定存放在專案資料夾的 src/st...

鐵人賽 Modern Web DAY 24

技術 Day 24 - 簡易版行程規劃地圖

想了兩天,我們來做一張可以進行行程規劃的地圖好了!不過是簡易版的啦,細節上的設定可以依據需求再去做更改~ 需求目標 老樣子,在進入實作前先訂一下我們的需求:...

鐵人賽 Modern Web DAY 26

技術 [DAY 26] Redux 原理與 Redux Toolkit

在後面的幾天將會以 Redux Toolkit 來做說明,而在了解 Redux Toolkit,我們先來了解 Redux 的運作原理,在後面的操作上也會比...

鐵人賽 Modern Web DAY 23

技術 【D23】 小工具:身分證製造機(part 4)-製作檢查頁面,增加檢查碼功能

基本的身分證檢查已經完成,可以檢查長度、地點、性別等等,但是缺少了檢查檢查碼的部分,這篇會說明如何建立檢查碼。 檢查碼功能 checkCkDigit() 增加檢...

鐵人賽 Modern Web DAY 23

技術 Day 23 - Direction (2):適合懶人的插件

如果你覺得接 Direction API 實在是很麻煩,要寫一大堆東西、只想用現成的話,那麼~這篇非常適合你! 其實我是在找 Demo 主題的時候,意外找到這個...

鐵人賽 Modern Web DAY 25

技術 [DAY 25] 串接 API,透過 Fetch 將遠端資料渲染在畫面

串接 API 的方式有很多種,你可以使用任何喜歡的 Ajax 函式庫來串接,如 Axios、ky 等等…,這邊將會以 JavaScript 原生方法 Fetc...

鐵人賽 Modern Web DAY 23

技術 [Day 23] 保持資料流 — 不要欺騙 hooks 的 dependencies(下)

函式與 dependencies 一種常見的誤解是認為函式不應該填寫在 dependencies 中。我們來看一下這個範例: function SearchRe...

鐵人賽 影片教學 DAY 23
我讀你看 系列 第 23

技術 [React] Manipulating the DOM with Refs: useRef and callback ref

今天來看三個重點: 怎麼使用 ref 保存 DOM Node? callback ref 怎麼用? DOM Nodes 是在什麼時間點被保存當 ref 中?...

鐵人賽 Modern Web DAY 23

技術 React route如何運作、建立404的路由、巢狀路由、動態路由

本文提及以下內容 用戶端的路由 傳統路由 react route如何運作 起手式 建立404的路由 巢狀路由 useParams參數 用戶端的路由 用戶端的...

鐵人賽 Modern Web DAY 24

技術 Program (2)

我們昨天大概看了一下探索課程頁今天我們來看看「ProgramCollection」和 「ProgramCard」這兩個元件 ProgramCollection...

鐵人賽 Modern Web DAY 25

技術 [DAY 25] 自己的Hook自己做!html2canvas 來擷圖網頁的內容吧!

你一定在想截圖有甚麼好弄一篇文章的 DEMO 在這裡 情境 前陣子有遇到一個特別的需求,希望原本的訂單紀錄的呈現,也可以讓使用者擷取下來保存或是處理後續工作,...

鐵人賽 Modern Web DAY 25

技術 如何製作輪播 carousel 3【 carousel | 我不會寫 React Component 】

本篇接續前篇 如何製作輪播 carousel 2【 carousel | 我不會寫 React Component 】 可以先看完上一篇再接續此篇。 Contr...

鐵人賽 Modern Web DAY 23

技術 Program (1)

昨天我們把 Blog 部分結束今天接著看 Program 的部分 Program 分為「探索課程頁」和「課程內頁」我們今天一樣先從探索頁開始 ProgramCo...

鐵人賽 Software Development DAY 23
React框架白話文運動 系列 第 23

技術 React白話文運動23-Flux 概念

前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...

鐵人賽 Modern Web DAY 24

技術 [DAY 24] React-router-dom 路由設定教學,實現頁面跳轉(下)

延續上一篇 DAY23 的 React-router-dom 繼續往下介紹,如果沒看過的朋友,建議可以先看上一篇哦! 本篇將介紹 動態路由參數 當前路由資訊...

鐵人賽 Modern Web DAY 23

技術 [DAY 23] React-router-dom 路由設定教學,實現頁面跳轉(上)

此篇版本為 react-router-dom v6 react-router-dom 可以設定 react 的網站路由,是以 react-router 為基底...