iT邦幫忙

react相關文章
共有 1837 則文章
鐵人賽 Modern Web DAY 27

技術 [Day27]用 React 讓網站動起來:useCallback

昨天我們介紹了 useMemo,這個 hook 可以幫助我們記憶依賴參數,當參數變化時才會重新執行函式,並且取得函式回傳的值。今天要來介紹的是 useCallb...

鐵人賽 Modern Web DAY 29

技術 如何導入 cypress 【 我不會寫 React Component 】

因為這邊開發的是 Component,所以這次會用 Cypress Component Testing。 Setup 設置專案在 apps/ 底下。 E2E...

30天深入淺出Redux 系列 第 31 篇

技術 [DLC] React Query 補充包

這篇是補足大家的求知慾,還記得我開頭說的 React Query 嗎? 我秉持著勤儉持家的客家精神,想說不要浪費我們建立好的 todo api server,順...

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

技術 Day 27 React 的 CSS 解決方案

讓 CSS 只跟著元件 我們知道若元件拆分得越細,可以在其他元件內的重複組合使用的頻率就越高,所以會希望 CSS 只跟隨著元件,當這個元件被拿去其他元件使用時,...

鐵人賽 Modern Web DAY 27

技術 簡介靜態網站、SPA、SSR、SSG—GatsbyJs從零開始

本文提及以下重點 GatsbyJS介紹 靜態網站 SPA網頁(Single Page Appliations) SSR網頁(Server Side Rende...

鐵人賽 Modern Web DAY 26

技術 【D26】 小工具:身分證製造機(part 6)-製作身分證製造功能

已經在 Day25中設計了製作身分證的樣式,接下來要製作點擊按鈕後進行的程式邏輯。 製作邏輯的 js 檔案 建立一個 idnoCreater.js 的檔案,裡面...

鐵人賽 Modern Web DAY 28

技術 [DAY 28] 自己的Hook自己測試!

雖然寫了那麼多,不論是有用的,或沒用的,要怎麼確保有沒有寫好呢? 當然就是就在講測試,雖然開發過程中可以測試功能正不正常,但隨著日後長大的需求有時難以回頭一一...

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

技術 [React] Synchronizing with Effects: Part 2

延續昨天 useEffect 的說明,今天著重在 cleanup function 的使用時機、並搭配 useEffect 中的 closure 來做到「取消...

鐵人賽 Modern Web DAY 27

技術 [DAY 27] Redux Toolkit 管理組件的共用資料

安裝環境 創建模板 React + Redux Toolkit npx create-react-app my-app --template redux 安...

鐵人賽 Modern Web DAY 26

技術 [Day 26] Effects & cleanups 常見情境的設計技巧

在前面章節中我們解析了將 effect 設計成即使多次執行也能保持正確的重要性。如果你還對這個觀念不是很熟悉的話,非常建議你先閱讀系列文前面的篇幅中關於 use...

鐵人賽 自我挑戰組 DAY 25

技術 Day-30 結語 - 沒有完賽心得

Day-30 結語 - 沒有完賽心得 在這段時間裡面我只專注一件事情 :完成三十篇文章並且發表,不想為點閱率或者別人怎麼回應這些事情分心,就只是想達成三十天的目...

鐵人賽 自我挑戰組 DAY 25

技術 Day-29 常用網站工具分享

Day-29 常用網站工具分享 自己從頭到尾用 HTML 寫一個表格,或者從 0 開始使用 CSS 寫一個陰影效果,都是快把人逼死的過程啊,除非是真的打算刻苦一...

鐵人賽 自我挑戰組 DAY 25

技術 Day-28 安裝的 vscode 套件分享

Day-28 安裝的 vscode 套件分享 套件跟書一樣,都是要用到的時候才會感覺自己讀的少,之所以到最後才分享工具跟套件,是因為有感覺難用過才會知道套件到底...

鐵人賽 自我挑戰組 DAY 25

技術 Day-27 專案演練 - 寫在最後

Day-27 專案演練 - 寫在最後 專案分享的尾聲,篇幅有限,還有很多想做的功能還沒完成,做個這 20 天來邊做邊寫的總結,在鐵人賽結束之後,我會繼續把之前說...

鐵人賽 自我挑戰組 DAY 25

技術 Day-26 專案演練 - 在 homePage 拿到 list redux

Day-26 專案演練 - 在 homePage 拿到 list redux 今天我們要完成 homePage 的一部分功能,跟 todo 有關的部分,其實鐵人...

鐵人賽 Modern Web DAY 28

技術 checkout (3)

我們今天來看什麼情況下結帳的話面會出現不一樣的元件 當你選購的方案為「訂閱方案」且價格為「0 元代幣」這時候你點選「立即訂閱」時他會跳出下面這個 Modal 這...

鐵人賽 Modern Web DAY 26

技術 [Day26]用 React 讓網站動起來:useMemo

昨天我們介紹了什麼是 memorized hook,介紹他們是如何提升 React 的效能。接著,我們來更詳細一點的介紹各個 hook 要怎麼使用。 useMe...

鐵人賽 Modern Web DAY 28

技術 如何導入 deque axe 【 我不會寫 React Component 】

台灣的無障礙規範 聲稱自己參照 w3c 規範, 但還是有太多地方跟國際規範不同。先不論是政治還是官僚等無聊原因,考慮到讀者未來發展性,筆者鼓勵盡量走國際規範...

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

技術 React白話文運動26-Zustand 02

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

鐵人賽 Modern Web DAY 26

技術 格線系統、基本用法、Responsive values、Grid version 2?—MUI

本文包含以下內容 格線系統 基本用法 設置斷點 父組件設置欄數 Grid version 2 格線系統 如果先前有學習過boostrap5的人應該對於lay...

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

技術 Day 26 zustand - 基於 Flux 與 Hook實現狀態管理的套件

React 狀態管理的分類 React的 狀態管理主要分三類:Local state、Context、Third Party 前面已經介紹了 Redux 及...

鐵人賽 Modern Web DAY 27

技術 Day 27 - 一些很酷的 Mapbox Styles~(3)

還記得我在 Day 04 - 在地圖上標記 Marker 的時候寫了一篇地圖的 Marker 教學嗎~其實標點不限於常見的 2D 地圖喔,3D 的也可以!我們今...

鐵人賽 Modern Web DAY 26

技術 Day 26 - 一些很酷的 Mapbox Styles~(2)

今天帶大家去日本看富士山吧~?不過是地圖版的啦,我也好想去日本玩 ༼இɷஇ༽ 程式碼我們沿用上一篇的 3D 地球地圖來繼續做,不清楚的可以點擊這裡! 3D 地形...

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

技術 [React] Synchronizing with Effects: Part 1

今天來從官網理解 useEffect 最基本的使用方式: 呼叫 useEffect 定義 dependencies array 需要的話,加上 cleanu...

鐵人賽 Modern Web DAY 25

技術 Day 25 - 一些很酷的 Mapbox Styles~(1)

我們常見以及常用的地圖大多都是 2D 的,所以在分享這邊我們做 3D 地圖吧!今天就來看一下一顆簡單的旋轉地球我們要怎麼做~ 說是簡單,但看到的當下還是不禁讚...

鐵人賽 Modern Web DAY 25

技術 [Day 25] Reusable state — React 18 的 useEffect 在 mount 時為何會執行兩次?

在前面的章節中我們已經詳細的解析了 useEffect 正確的概念以及用法,也再三強調了 useEffect 的用途是同步資料到 React elements...

鐵人賽 Modern Web DAY 27

技術 checkout (2)

我昨天我們講到了購買流程今天我們看看這些元件是怎麼做的 以課程為例,他會有不同的課程方案可供選擇 首先是價格的部分 <PriceLabel var...

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

技術 React白話文運動25-Zustand 01

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

鐵人賽 Modern Web DAY 26

技術 checkout (1)

終於進到我們最後的部分,「checkout」接下來我們會來看在這個專案中結帳的流程是怎麼進行的 我們以們前幾天的課程為例首先我們看到,如果課程為「0元」的情況分...

鐵人賽 Modern Web DAY 25

技術 [Day25]用 React 讓網站動起來:認識 memorize hook

當 React 程式越來越龐大,就需要考慮效能的問題。memorize hook 是 React 提供的 api,可以避免重複 render 造成的效能問題。今...