iT邦幫忙

react相關文章
共有 1540 則文章
鐵人賽 Modern Web DAY 23

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

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

鐵人賽 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 25

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

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

鐵人賽 自我挑戰組 DAY 24

技術 Day-24 專案演練 - 用跳窗來小試身手 redux

Day-24 專案演練 - 用跳窗來小試身手 redux 今天要來嘗試 redux,用的是 RTK(Redux Toolkit),可以先去官網看看這是個甚麼工...

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 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 23

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

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

鐵人賽 Modern Web DAY 24
擊敗前端面試大作戰! 系列 第 24

技術 三人行必有我師焉 ---- useMemo vs React.memo vs useCallback 三種優化 React 的方法!

這篇是優化的最後一篇文章,要來討論優化 React 的三種方法,分別是 useMemo, React.memo 和 useCallback! useMemo...

鐵人賽 DevOps DAY 24

技術 Day 24 — 做點小小研究:測試開發網站流程

30天也剩沒幾天了,現在才要進入 devops?! 圖片來源:Docker (@Docker) / Twitter 前面基礎建設都弄好了接下來就以簡易的前...

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

技術 第 24 天 [ Material UI: Theming ( Spacing 、 FontSize 、 Platte ) ]

今天的重點摘錄 在 Component API 可以查詢每個元件能使用的 props 客製化 theme 的方法(Space / FontSize / Pla...

鐵人賽 Modern Web DAY 27

技術 day27: Badge

參考了 MUI Badge 的一些設計,最後決定實作成「當 props.badgeContent 的值為 falsity 時,不顯示 badge 點;並且使用者...

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

技術 Day 23 Redux 非同步 Action 解決方案 - redux-thunk

說明 redux-thunk 是簡化 Redux 處理「非同步事件」的 Middleware 套件。Redux Middleware 是用來在 Action 進...

鐵人賽 Modern Web DAY 23

技術 [Day23]用 React 讓網站動起來:useRef

接下來會來介紹一下各種其他 React 常用功能。今天我們來說一下要怎麼在 React 中操作元素。一般來說,操作元素會使用 querySelector取得 D...

鐵人賽 Modern Web DAY 22

技術 【D22】 小工具:身分證製造機(part 4)-製作檢查頁面

檢查功能做完,接著要把功能與畫面結合,這時 React 就登場囉! 這邊會做基本資料檢查 製作畫面 我們畫面就很簡單的做一個輸入的欄位,還有觸發檢查的按鈕,並且...

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

技術 [React] Referencing Values with Refs

今天來談談為什麼要特別用 ref 來把變數保存起來?為什麼不能直接把變數訂在元件外面呢?最後則跟著官方文件來看看 useRef 是如何實作的。 https:/...

鐵人賽 Modern Web DAY 24

技術 [DAY 24] 自己的Hook自己做!useImage 來預覽圖片吧!

今天的主題很單純,就是單純上傳圖片,不論是只有一個頁面或是多個功能都要用到,製造一個 hook 是很不虧的選擇,因為也是懶得再寫一次 (¬_¬) DEMO 底家...

鐵人賽 Modern Web DAY 22

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

在上一篇關於 useEffect 的深度解析中,我們已經了解到了 dependencies 是一種效能的最佳化手段,而不是用來控制生命週期或是商業邏輯。對於 u...

鐵人賽 Modern Web DAY 22

技術 Blog (2)

昨天我們看完了文章總覽頁今天我們進到文章內頁 程式碼如下: import { Icon } from '@chakra-ui/icons' // ~中間略~...

鐵人賽 Modern Web DAY 22

技術 Day 22 - Direction (1):基礎操作

昨天介紹了該如何呼叫 Direction 這支 API,我們今天就拿官網給的範例教學練練手~ 先說明一下我們要做的東西:載入地圖後會有個藍色的點,這個點是我們...

鐵人賽 Modern Web DAY 22

技術 [Day22]用 React 讓網站動起來:更多 React Hook Form

昨天介紹了 useForm 的基本用法,今天來多介紹一些 React Hook Form 別的用法。 FormProvider 前幾天介紹了資料管理的 Cont...

鐵人賽 自我挑戰組 DAY 30

技術 [Day 30] Iron 30 Dashboard: 鐵人参拾儀表板

今天是第30天 ~好的各位,我在前幾天的努力之下,做了個儀表板整合前面每天的作品 ~ 總共實作了27個作品其實整合儀表板的想法從一開始就有了XD,就是一個趕死線...

鐵人賽 自我挑戰組 DAY 23

技術 Day-23 專案演練 - 狀態管理員 redux

Day-23 專案演練 - 狀態管理員 redux 近半年前的我剛碰到 redux 的時候,卡關卡很久,看 RTK 的官方教學看不懂,就在網上找到了原作者的教...

鐵人賽 Modern Web DAY 22

技術 [DAY 22] useContext 跨組件溝通傳遞資料

當專案越來越多 Components 時,為了使用 props,會將 props 層層傳入,但也許這個 Component 根本沒用到這個 props,卻為了...

鐵人賽 Modern Web DAY 24

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

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

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

技術 Day 22 Redux Middleware 基本運作原理

說明 Middleware 稱為中介層,在許多後端伺服器框架中都可以看到 Middleware 的應用,Middleware 會在定義好的起點與終點之間,針對中...

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

技術 第 23 天 [ Material UI:安裝、System 、 Box 、 Typography 、 Link 、 Button 、 Material Icons ]

今天的重點摘錄 安裝: npm install @mui/material @emotion/react @emotion/styledicon 安裝: np...

鐵人賽 Modern Web DAY 23

技術 [Day23] 從ClojureScript 到 Reagent (2) 建立Reagent專案

[Day23] 從ClojureScript 到 Reagent (3) 建立Reagent專案 昨天介紹完前端專案為什麼選擇使用React,以及透過Reage...