iT邦幫忙

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

技術 Day 20, Reading List - React部分-2

先上圖,不囉嗦。 這邊還只有UI的功能而已,補上三支code! ReadingListWidget 準備要專門與後端溝通! 還有包裝component進去。...

鐵人賽 Software Development DAY 6

技術 [課前規劃]越過山丘,真的無人等候

語言選定後,就是要開始找相關資源study了。 不只是語言社群、論壇的支援,課程助教、工作人員、場地、公司贊助、免費廣告投放等,也都是要去詢問的。 剛開始可能只...

鐵人賽 Modern Web DAY 27
玩轉 Storybook 系列 第 27

技術 玩轉 Storybook: Day 27 Design System for Developers - Review、Test

單一真值來源 或 單點故障 Single Source of Truth (SSOT) 單一真值來源 Single Points of Failure (SP...

鐵人賽 Modern Web DAY 14

技術 Day 14【連動 MetaMask - Front-End Request and Fetch】Modern problems require modern solutions

【前言】嗨嗨感謝大家願意看到這裡,接下來要說的是前端的呼叫以及資料傳遞。今天的內容大部份都參考來自 Amaury Martiny 的 One-click Lo...

鐵人賽 自我挑戰組 DAY 28

技術 【Day28】ChatGPT請教教我:React進階(六)- NextJS!路由系統!

目前這個系列已挑選ChatGPT、前端&React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...

鐵人賽 自我挑戰組 DAY 23

技術 【Day23】ChatGPT請教教我:React進階(一)- React Redux 狀態管理

目前這個系列已挑選ChatGPT、前端&React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...

鐵人賽 Modern Web DAY 10

技術 Day10 - Tic Tac Toe篇:Single Play機制

Single Play機制 昨天完成判斷勝負功能之後,我們剩下最後一個功能,就是讓玩家可以跟電腦對弈,回憶一下 Day03 的時候,我們有設計一個 isSing...

鐵人賽 Modern Web DAY 13

技術 Day 13【連動 MetaMask - Back-End Services】這顯然是廠商的疏失

【前言】諸君日安,大魔王要出現啦!接下來要說的是Nonce 的使用、前後端連動,以及帳戶驗證。今天的內容大部份都參考來自 Amaury Martiny 的 O...

鐵人賽 自我挑戰組 DAY 14

技術 [Day 14] 用React Ref 來操作DOM

以前我們要抓一個DOM的時候很習慣用document.getElementById、document.getElementsByClassName等等的語法來取...

鐵人賽 Modern Web DAY 9

技術 Day 9, React_on_rails Doc 的重點整理

睏寶先在這裡祝大家平安夜快樂。 今天是Doc整理的部分,針對React_on_Rails的文件有兩份: Github Doc Gitbook 我這邊...

鐵人賽 Modern Web DAY 25

技術 #25 No-code 之旅 — 實作 Notion 部落格 Pagination (分頁) 功能 ft. SWR

嗨大家!像昨天說的,今天會講怎麼用 SWR 實作 Notion 部落格的 pagination (分頁) 功能~ 還沒看昨天的文章的大家,可以點這裡,今天的文章...

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 19

技術 [Day 19] 每一次 render 都有自己的 props、state 以及 event handlers

承接上一張節的脈絡,在我們解析大魔王 useEffect 之前,我們需要先更深入的重新梳理一下 component 生命週期的重要概念:render。 每一次...

鐵人賽 Modern Web DAY 26

技術 [Day 26] 菜鳥工程師的初次 Open Source Contribution - (2)

今天接續昨天繼續分享第一次貢獻開源專案的心得。 第二步:閱讀 CONTRIBUTING.md & 開發 通常一個完整的開源專案,都會提供一個文檔讓想貢獻...

鐵人賽 自我挑戰組 DAY 4

技術 [DAY04]淺談前端SPA框架-以React為例(下篇)

在了解什麼是render後,傑森從React官網看到另一個範例,有段文字這樣寫道: Component 使你可以將 UI 拆分成獨立且可複用的程式碼 什麼是...

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 14
Canvas 小錦囊 系列 第 14

技術 Day 14 - 用 canvas 製作刮刮樂

關於前面的小畫家 復刻小畫家先做到昨天作為最後一篇,接下來會帶各位,利用前其所學的功能,製作各種canvas 互動小東西!敬請期待。 這邊也附上前面的所製作的...

鐵人賽 Modern Web DAY 26

技術 #26 No-code 之旅 — 實作 Dark Mode 和加入 Google Fonts ft. Chakra UI

連假結束了Q 今天來講怎麼實作 dark mode 還有怎麼使用 Google Fonts 讓網站看起來更好看!我們會用 Chakra UI 去實作 dark...

技術 深入理解React Diff算法

點擊進入React源碼調試倉庫。 上壹篇React狀態計算解密 之後,我們來分析壹下Diff的過程。 fiber上的updateQueue經過React的壹番計...

鐵人賽 Modern Web DAY 27

技術 [Day 27 - 小試身手] Todolist with React (2)

在上一章Todolist with React (1),建立了專案環境、並且拆離 UI 設定好所有 Component 後,現在就讓我們使用套件 Styled...

鐵人賽 Modern Web DAY 29

技術 [Day 29] 一次弄懂 React hooks 的運作原理與設計思維(下)

Hooks 的誕生是為了解決什麼問題 在深入 hooks 的設計脈絡之前,我們得先來談談 hooks 的誕生究竟是為了解決什麼問題。首先,hooks 是綁定配合...

鐵人賽 Modern Web DAY 4

技術 Day 4: 介紹 Server Side Render

React 的 server side renderer 是在 react-dom 這個套件的 react-dom/server 下,API 就只包含 4 個函...

鐵人賽 Modern Web DAY 14

技術 Day 14 / Redux -- Reducer & Action creater & Action

Reducer & Action creater & Action <好讀版> 前言 這章要開始講解 redux 中重要的三個部分,...

鐵人賽 Modern Web DAY 24
Zero to hero with React.js 系列 第 24

技術 【Day 24 React】Redux 做遊戲角色陣容應用程式——趴四

介面的呈現 在做好基本功能之後,先來把介面刻完,然後就可以把功能 map 到 UI 元件上了。除了 import React 和 component 之外,我們...

鐵人賽 Modern Web DAY 26

技術 Day 26:批改系統網頁 (8) – 利用 Redux 來進行元件之間的狀態變更

昨天我們建立了 HTTPS 連線,藉以讓使用者可以登入網站。不過雖然已經可以登入網站了,但是卻還是有登入後各個元件之間狀態無法同步資料的問題,究竟我們該如何解...

鐵人賽 自我挑戰組 DAY 27

技術 【Day27】ChatGPT請教教我:React進階(五)- Style管理!styled-components!

各位,從Day1至今為止,我們討論前端內容或React內容的時候幾乎沒有討論到要怎麼處理元件的樣式 (Style)只在Day6輕描淡寫的提到css檔引入,以及在...

鐵人賽 Modern Web DAY 20

技術 [Day 20] 每一次 render 都有自己的 effects

接續上一章節的概念,我們已經了解到了每一次 render 都有自己的 props 與 state 以及 event handlers,那麼 useEffect...

鐵人賽 Modern Web DAY 4

技術 仿Trello - 建立React專案

本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。...

鐵人賽 自我挑戰組 DAY 24

技術 【Day24】ChatGPT請教教我:React進階(二)- React Redux & Redux Toolkit!

目前這個系列已挑選ChatGPT、前端&React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...

鐵人賽 Modern Web DAY 2

技術 用React刻自己的投資Dashboard Day2 - 網站Wireframe設計

tags: 2021鐵人賽 React 投資Dashboard內容設計 要實際動手製作wireframe之前,先來規劃一下圖表的內容有什麼,一般來說,投資相關的...