iT邦幫忙

react.js相關文章
共有 164 則文章
鐵人賽 Modern Web DAY 13
React.js 30 天學習全記錄 系列 第 13

技術 [ Day 13 ] React 的生命週期 - Unmounting

今天終於要進入到生命週期的最後一個階段: Unmounting 了!在元件要被卸載的這個階段會發生什麼事呢? Unmounting 卸載 一個 Compon...

鐵人賽 Modern Web DAY 27

技術 Day27-介紹 React Developer Tools

在 Day 25 介紹 React Profiler 的文章中有提到 React Developer Tools,不過當時只有使用到 Profiler 頁籤,所...

鐵人賽 Modern Web DAY 27
React.js 30 天學習全記錄 系列 第 27

技術 [ Day 27 ] 實作一個 React.js 網站 3/5

上篇我們已經完成了網站中 Navigation 的樣式和路由設定,今天我們要來設定網站中的其他元件,接著今天就要來實作其他的元件還有元件之間的資料處理。我們就馬...

鐵人賽 Modern Web DAY 15
React.js 30 天學習全記錄 系列 第 15

技術 [ Day 15 ] React Hooks 中的 useState

昨天 Day 14 跟大家介紹了 React Hooks 的基本概念之後,今天就要馬上帶大家來看第一個 Hook 函式: useState() 的用法囉~ u...

鐵人賽 Modern Web DAY 28

技術 Day28-介紹 Redux DevTools

這篇要介紹的是 Redux DevTools,是一個可以紀錄及操作存在 Redux store 內的 state 以及 dispatch action 的工具,...

鐵人賽 Modern Web DAY 16
React.js 30 天學習全記錄 系列 第 16

技術 [ Day 16 ] React Hooks 中的 useEffect

昨天介紹了在 Function Component 中該如何操作 state 的方法(附上傳送門),今天這篇要來為大家介紹的就是第二個較常用到的 React H...

鐵人賽 Modern Web DAY 1

技術 Day 01 - 參賽動機 & 前言

大家好,我是 S.C,八月初偶然在 Youtube 上看到一段影片,提到學習分成三層次 - 自己會、能教會他人、能設計教材,看完蠻有感觸的,因為自踏入程式開發的...

鐵人賽 自我挑戰組 DAY 6

技術 [Day 06] 一磚一瓦-React Component

Component的概念就很像一塊塊積木,可以拼湊組成城堡或是飛船之類的,Component裡頭會回傳React element,透過這些Component就可...

鐵人賽 Modern Web DAY 12
React.js 30 天學習全記錄 系列 第 12

技術 [ Day 12 ] React 的生命週期 - Updating

今天要來進入到生命週期的第二個環節: Updating 更新,繼上篇的 Mounting 元件掛載階段中提到過有一個方法是在 Updating 階段也會出現的,...

鐵人賽 Modern Web DAY 22
React.js 30 天學習全記錄 系列 第 22

技術 [ Day 22 ] React 中的 State 管理 - Redux

今天進入到全新的篇章 Redux 了!Redux 是 React.js 中很常拿來作為狀態管理使用的一個套件,在 Vue.js 的框架中也有一個 Vuex 是專...

鐵人賽 Modern Web DAY 28
React.js 30 天學習全記錄 系列 第 28

技術 [ Day 28 ] 實作一個 React.js 網站 4/5

接續上一篇的 Layout 相關元件實作後,今天要來開發 React.js 網站的功能是表單設計的部分,因為我們希望能在網站中使用該表單新增新的 Meetup...

鐵人賽 Modern Web DAY 1

技術 [ Day 01 ] 開賽和那些期許

哈囉大家好!我是阿關 是說第一次參加鐵人賽就想要挑戰一個自己完全不熟悉的題目我也是覺得自己蠻有勇氣的啦~ 如標題所言,接下來的這 30 天我會在這邊紀錄我開始學...

鐵人賽 Modern Web DAY 11
React.js 30 天學習全記錄 系列 第 11

技術 [ Day 11 ] React 的生命週期 - Mounting

在 Class Component 的章節中我們提到過,它有別於 Function Component 的地方就在於 State 和生命週期( Lifecycl...

鐵人賽 Modern Web DAY 23
React.js 30 天學習全記錄 系列 第 23

技術 [ Day 23 ] Redux 中的核心概念

上一篇 Day 22 我們已經了解了何謂 Redux 以及該套件的三大原則,今天就要來為大家介紹在 Redux 這個套件中的核心概念及功能名詞介紹。 主要的概...

鐵人賽 Modern Web DAY 14
React.js 30 天學習全記錄 系列 第 14

技術 [ Day 14 ] 佳評如潮的 React Hooks

今天總算進入到了 React.js 中大名鼎鼎的 React Hooks 這個章節了! 這樣講可能很浮誇,但是當初在選擇框架學習時我就已經在搜尋引擎當中看到非常...

鐵人賽 Modern Web DAY 26

技術 Day26-React PropTypes & DefaultProps

在 React 中有內建的方法可以去定義傳入元件的 props 資料型別,這樣可以更清楚的瞭解傳入的各 props 的型別是什麼。 此外如果傳入的 props...

鐵人賽 Modern Web DAY 23

技術 Day23-React Life Cycle 篇-下篇(Updating & Unmounting & Error handling & Render Phase & Commit Phase)

這篇繼續介紹生命週期的另外兩個階段: Updating & Unmounting,以及了解元件在各個生命週期中更新 DOM 的兩個階段 Render P...

鐵人賽 Modern Web DAY 21

技術 Day21-React 簡易動畫篇-下篇

這篇要繼續介紹剩下的兩個元件。 SwitchTransition 元件 主要是用來渲染兩個狀態間做切換的過渡動畫,假如想要讓新元素加入和舊元素移除同時發生時出現...

鐵人賽 Modern Web DAY 3

技術 [DAY 3] React 環境安裝-完成前置作業

[情境劇場] 解師傅:嘿!老闆!我找到了一間不錯的店面,CRA 師傅會幫我們完成它! 要開一間 React 熱炒店,想當然要先有一間環境店面,即使小當家有再高的...

鐵人賽 Modern Web DAY 19
React.js 30 天學習全記錄 系列 第 19

技術 [ Day 19 ] 表單中的 Controlled Component

在網站開發時有時候會使用到表單的元件,而表單內大多是採用 input 的欄位來搜集使用者的資料的。因此對於該欄位內的值要如何取用就是我們今天要為大家介紹的內容:...

鐵人賽 Modern Web DAY 1

技術 [Day 1]用React讓網站動起來: 鐵人賽參賽前言 & React 簡介

前言 雖然說是前言,但最說的只有: 第一次參加鐵人賽,好緊張啊!!!!(誤 原本沒有想過要來參加鐵人賽,最近才剛結束用bootstrap切版的課程以及專題開發,...

技術 React-router相關

當使用react-router-dom時由於在v6版本後做了一些改變本來在import {HashRouter,Switch,Route} from 'reac...

技術 React-使用JSON增加品項

這邊的功能是為了想呈現網頁中作品集這個項目但是在作品集中又分了很多品項像是平面、網頁、插畫等等..於是在最外層先放上一格一格的分類圖點進分類圖之後會跳出一個蓋板...

鐵人賽 Modern Web DAY 30

技術 30天React練功坊-攻克常見實務/面試問題 Day30: Memory Cards Game(interview question)

tags: ItIron2023 react 前言 我們昨天做了一個基本的井字遊戲,基本上除了css的部分有些困難之外,基本的邏輯實踐其實相當的單純,今天我們反...

鐵人賽 Modern Web DAY 15

技術 30天React練功坊-攻克常見實務/面試問題 Day15: Unintended Re-renders: The Pitfalls of useContext

tags: ItIron2023 react 前言 我們前兩天將重點放在React.memo使用上的一些情境與錯誤,接著我們將繼續探討其他造成不必要重複渲染的情...

鐵人賽 Modern Web DAY 11

技術 30天React練功坊-攻克常見實務/面試問題 Day11: Race condition with useEffect

tags: ItIron2023 react 前言 我們昨天看了一個看似useEffect在搞事的問題,雖然說不能與它完全無關,但實際上他確實挺無辜的,真要怪的...

鐵人賽 Modern Web DAY 25

技術 用 react hook 做一個城市天氣卡-part2-day25

接續把拿回來的資料做整理拿回來的資料像這樣一大串.. 插播一下,使用 chrome 可以安裝一下 Json Formatter 這個 extension功用是可...

鐵人賽 Modern Web DAY 14

技術 30天React練功坊-攻克常見實務/面試問題 Day14: Optimization with React.memo the wrong way

tags: ItIron2023 react 前言 我們昨天看了一個不必要re-render造成的效能問題並利用React.memo來解決,到這邊一切相安無事,...

鐵人賽 Modern Web DAY 24

技術 2023It 30天React練功坊-攻克常見實務/面試問題 Day24: Creating a custom hook for data fetching(interview question)

tags: ItIron2023 react 前言 昨天我們看了一個基本的Tab component題目,在那個常見的UI組件上做了一點小小的測試,相信對你們來...

鐵人賽 Modern Web DAY 10

技術 30天React練功坊-攻克常見實務/面試問題 Day10: useEffect got called twice with empty dependency array

tags: ItIron2023 react 前言 我們昨天看了一個useEffect在沒有處理好dependency array時發生的問題,今天讓我們再看一...