iT邦幫忙

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

技術 day17: Toast

以為「當滑鼠移動到 Toast 元件上時要暫停倒數」會很複雜,實際上的解決方式卻異常簡單。 成品 原始碼展示 開發思路 倒數進度條 首先透過 props.cou...

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

技術 第 14 天 [ 客製化 Hook ]

今天的重點摘錄 重用 stateful 邏輯幫助我們能製作客製化 Hook 撰寫時記得思考,怎樣可以增加重用性?(例如使用通用性高的命名、把可能不一樣的東西抽...

鐵人賽 Modern Web DAY 12

技術 【D12】 小小雜談:重整一下腳步

下半場規劃 目前已經到達 12 日,已經可以做出初步的 React 網頁,其中包含著建立 React 物件,並且在本機運作中轉譯(render)成我們想要的 H...

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

技術 Notistack vs. React-toastify 的選擇

今天剛好要比較一下這兩個套件,說明一下自己比較這兩個套件的想法。 如果有人也用過這兩個套件,有任何想法或有說明錯的地方,都歡迎留言討論、分享。

鐵人賽 Modern Web DAY 12

技術 Day 12 - Camera (2):為轉換視角加上過渡動畫

知道如何控制視角位置後,今天我們來替這個過程加上過渡動畫!那在 Camera 的部分也是有相關的 Event 可以使用,一起來用抗抗吧~ (其實我也是昨天在打...

鐵人賽 Modern Web DAY 26
【每天5分鐘】學前端 系列 第 26

技術 Day26【每天5分鐘】學前端 | 前端三大框架

JavaScript 的內容有很多,【每天 5 分鐘】的介紹,不知道要寫到什麼時候 XD這幾天很掙扎,在 30 天的鐵人賽中, JS 的部分 要介紹到哪邊為止?...

鐵人賽 Modern Web DAY 12

技術 [Day12]用React讓網站動起來:todolist實作-編輯todolist

前幾天已經寫好todolist的邏輯、樣式,現在我們的程式已經可以新增、瀏覽、刪除代辦事項,並且有簡單的外觀。不過新增的事項還沒辦法編輯,因此今天來做一下編輯的...

鐵人賽 Modern Web DAY 12

技術 UI Library (1) : Ant Design

今天進到了 UI Library 的環節 UI Library 當我們在前端進行 UI 開發時有時候為了加快開發速度(或懶得開發)會使用現成的 UI Libra...

鐵人賽 自我挑戰組 DAY 13

技術 Day-13 專案演練 - React 拆元件的思路與操作(中)

Day-13 專案演練 - React 拆元件的思路與操作(中) 到了這個階段,我發現一件事情...就是,我在 Day-7 時有提到要輸出報表,然後的這幾天我...

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

技術 React白話文運動12-React Hook-useState 01

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

鐵人賽 Modern Web DAY 12

技術 [DAY 12] 條件式 render 與 && 邏輯運算子

[情境任務] 小當家:各位~我特製了一道新菜色,我命名為黃金開口笑 解師傅:什麼!?那不是我的拿手絕活嗎!怎麼變成你的了 小當家:因為他的製程要比較久,這必須標...

鐵人賽 Modern Web DAY 14

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

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

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

技術 [擊敗前端面試大作戰] React Reconciliation

今天我們要來延續昨天的提到的 DOM 為人詬病的效能問題,來討論 React 是如何透過 reconciliation 來解決這個問題的!我們都知道 DOM...

鐵人賽 Modern Web DAY 16

技術 day16: Portal

用途:將元件掛載到指定節點。除了昨天的 Dialog 家族外,接下來的 Toast 與 ToolTip 也都有使用到這個元件。 理由:在無法保證親代元件是否會有...

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

技術 第 13 天 [ 建立 JSON Server 用 useEffect 模擬抓取、送出與刪除資料 ]

今天主要是練習實作,我在影片中使用的圖片來自 unsplash , json-server 這個套件的指令為: npx json-server --watch...

鐵人賽 Modern Web DAY 12

技術 [Day 12] 如何在子 component 裡觸發更新父 component 的資料

React 中以 state 資料以及 setState 作為 reconciliation 的觸發點,並且以 props 作為 component 層層往下的...

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

技術 Day 12 useRef

說明 useRef Hook 保存的值,不會因為每次元件 Render 而重新被創造。在初始化後,使用 useRef 回傳出來的物件,會始終指向同一個 Refe...

鐵人賽 Modern Web DAY 11

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

在這邊進行字串轉換成某種編碼方式的字,這邊以 URI 和 ASCII 為範例。 不過仍與昨日發生相同問題,也就是第一個字讀不到。這問題之後再解,現在先初步建立我...

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

技術 [React] 同時又能 Controlled、又能 Uncontrolled!來看實際範例吧!

本集感謝 ALAPH Camp 贊助本人持續創作,做自己想做的事,同時也讓更多人一同學習成長。 抱歉一直把 MUI 講成 MIUI...。 commi...

鐵人賽 Modern Web DAY 13

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

hashtags: #react, #components, #accessibility, #datepicker 關於 Date Picker Dialo...

鐵人賽 Modern Web DAY 11

技術 [Day 11]用React讓網站動起來:React-bootstrap

昨天介紹了要如何在React中使用css,今天來介紹一下如何使用方便的React-bootstrap套件來建立一個漂亮的網站。p.s. 這一篇需要對bootst...

鐵人賽 Modern Web DAY 11

技術 Day 11 - Camera (1):地圖相機位置由你決定!

說是相機位置可能會有點抽象 (對!我就是直接英翻中的,標題真難下)其實就是使用者在地圖的第一視角位置啦~ Mapbox 對於 Camera 提供了以下功能:...

鐵人賽 Modern Web DAY 13

技術 [DAY 13] 自己的Hook自己做!useThroltte

debounce 都提到了,怎麼能不提 throltte 呢? 情境 在玩 Pokemon Go 打對戰的時候,有時候想著按快一點把對方打趴,殊不知再怎麼快,...

鐵人賽 自我挑戰組 DAY 12

技術 Day-12 專案演練 - React 拆元件的思路與操作(上)

Day-12 專案演練 - React 拆元件的思路與操作(上) 昨天玩了一下路由,今天在回來看 UI,我會將頁面上需要重複利用的樣式抽出來,在新建的 com...

鐵人賽 Modern Web DAY 11

技術 Branch & PR

Basic 的部分來到了最後一篇我來看看專案的 Branch & PR Git 回想起我的第一份工作,當時對 Git 超級不熟公司和我自己都沒什麼在做版...

鐵人賽 Modern Web DAY 11

技術 [DAY 11] 設定樣式 CSS 與 Style,美化你的網站

[情境任務] 解師傅:太好了,菜單該有的功能都有了,這麼一來就萬無一失了! 小當家:恩…萬事俱備,只欠東風 解師傅:欸?…還需要什麼東風? 小當家:我一直很想說...

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

技術 [擊敗前端面試大作戰] React

嗨大家好,我是 bywater,今天來到前端面大作戰的第十二篇文章,也是 React 系列的開始,這個系列我預計會有四篇文章,內容會從第一篇的 react 介...

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

技術 Day 11 建立可重複在專案使用的客製化 React Hook

說明 當我們想要共享邏輯在兩個 Function 之間時,會提取它成為第三個 Function。 在 React 的世界中,Function Component...

鐵人賽 Modern Web DAY 15

技術 day15: Dialog, Drawer

來幫昨天做好的骨架補上一些 CSS 樣式與動畫效果。 進一步組合 position: absolute 與 transform: translate(...)...

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

技術 第 12 天 [ Hook ]

今天的重點摘錄 Hook 是 React 先寫好的東西,方便我們不用從頭造輪子、可以直接開發,之前提過的 useState useEffect 都是 Hook...