今天終於要進入到生命週期的最後一個階段: Unmounting 了!在元件要被卸載的這個階段會發生什麼事呢? Unmounting 卸載 一個 Compon...
在 Day 25 介紹 React Profiler 的文章中有提到 React Developer Tools,不過當時只有使用到 Profiler 頁籤,所...
上篇我們已經完成了網站中 Navigation 的樣式和路由設定,今天我們要來設定網站中的其他元件,接著今天就要來實作其他的元件還有元件之間的資料處理。我們就馬...
昨天 Day 14 跟大家介紹了 React Hooks 的基本概念之後,今天就要馬上帶大家來看第一個 Hook 函式: useState() 的用法囉~ u...
這篇要介紹的是 Redux DevTools,是一個可以紀錄及操作存在 Redux store 內的 state 以及 dispatch action 的工具,...
昨天介紹了在 Function Component 中該如何操作 state 的方法(附上傳送門),今天這篇要來為大家介紹的就是第二個較常用到的 React H...
大家好,我是 S.C,八月初偶然在 Youtube 上看到一段影片,提到學習分成三層次 - 自己會、能教會他人、能設計教材,看完蠻有感觸的,因為自踏入程式開發的...
Component的概念就很像一塊塊積木,可以拼湊組成城堡或是飛船之類的,Component裡頭會回傳React element,透過這些Component就可...
今天要來進入到生命週期的第二個環節: Updating 更新,繼上篇的 Mounting 元件掛載階段中提到過有一個方法是在 Updating 階段也會出現的,...
今天進入到全新的篇章 Redux 了!Redux 是 React.js 中很常拿來作為狀態管理使用的一個套件,在 Vue.js 的框架中也有一個 Vuex 是專...
接續上一篇的 Layout 相關元件實作後,今天要來開發 React.js 網站的功能是表單設計的部分,因為我們希望能在網站中使用該表單新增新的 Meetup...
哈囉大家好!我是阿關 是說第一次參加鐵人賽就想要挑戰一個自己完全不熟悉的題目我也是覺得自己蠻有勇氣的啦~ 如標題所言,接下來的這 30 天我會在這邊紀錄我開始學...
在 Class Component 的章節中我們提到過,它有別於 Function Component 的地方就在於 State 和生命週期( Lifecycl...
上一篇 Day 22 我們已經了解了何謂 Redux 以及該套件的三大原則,今天就要來為大家介紹在 Redux 這個套件中的核心概念及功能名詞介紹。 主要的概...
今天總算進入到了 React.js 中大名鼎鼎的 React Hooks 這個章節了! 這樣講可能很浮誇,但是當初在選擇框架學習時我就已經在搜尋引擎當中看到非常...
在 React 中有內建的方法可以去定義傳入元件的 props 資料型別,這樣可以更清楚的瞭解傳入的各 props 的型別是什麼。 此外如果傳入的 props...
這篇繼續介紹生命週期的另外兩個階段: Updating & Unmounting,以及了解元件在各個生命週期中更新 DOM 的兩個階段 Render P...
這篇要繼續介紹剩下的兩個元件。 SwitchTransition 元件 主要是用來渲染兩個狀態間做切換的過渡動畫,假如想要讓新元素加入和舊元素移除同時發生時出現...
[情境劇場] 解師傅:嘿!老闆!我找到了一間不錯的店面,CRA 師傅會幫我們完成它! 要開一間 React 熱炒店,想當然要先有一間環境店面,即使小當家有再高的...
在網站開發時有時候會使用到表單的元件,而表單內大多是採用 input 的欄位來搜集使用者的資料的。因此對於該欄位內的值要如何取用就是我們今天要為大家介紹的內容:...
前言 雖然說是前言,但最說的只有: 第一次參加鐵人賽,好緊張啊!!!!(誤 原本沒有想過要來參加鐵人賽,最近才剛結束用bootstrap切版的課程以及專題開發,...
當使用react-router-dom時由於在v6版本後做了一些改變本來在import {HashRouter,Switch,Route} from 'reac...
這邊的功能是為了想呈現網頁中作品集這個項目但是在作品集中又分了很多品項像是平面、網頁、插畫等等..於是在最外層先放上一格一格的分類圖點進分類圖之後會跳出一個蓋板...
tags: ItIron2023 react 前言 我們昨天做了一個基本的井字遊戲,基本上除了css的部分有些困難之外,基本的邏輯實踐其實相當的單純,今天我們反...
tags: ItIron2023 react 前言 我們前兩天將重點放在React.memo使用上的一些情境與錯誤,接著我們將繼續探討其他造成不必要重複渲染的情...
tags: ItIron2023 react 前言 我們昨天看了一個看似useEffect在搞事的問題,雖然說不能與它完全無關,但實際上他確實挺無辜的,真要怪的...
接續把拿回來的資料做整理拿回來的資料像這樣一大串.. 插播一下,使用 chrome 可以安裝一下 Json Formatter 這個 extension功用是可...
tags: ItIron2023 react 前言 我們昨天看了一個不必要re-render造成的效能問題並利用React.memo來解決,到這邊一切相安無事,...
tags: ItIron2023 react 前言 昨天我們看了一個基本的Tab component題目,在那個常見的UI組件上做了一點小小的測試,相信對你們來...
tags: ItIron2023 react 前言 我們昨天看了一個useEffect在沒有處理好dependency array時發生的問題,今天讓我們再看一...