iT邦幫忙

react.js相關文章
共有 208 則文章
鐵人賽 Modern Web DAY 8

技術 [影片]Gatsby.js 未來的網頁08:GraphiQL

Gatsby提供了一個叫做 GraphiQL 的工具,幫助我們測試網站上的GraphQL查詢。GraphiQL提供一個可視化界面,讓我們可以直觀地看到查詢的結果...

鐵人賽 Modern Web DAY 9

技術 Gatsby.js 未來的網頁09:Index頁面

上一篇中,我們用GraphiQL測試了GraphQL的查詢。今天,我們就要用這些查詢來打造一個Index頁面。 YouTube 影片 加入GraphQL 打開...

鐵人賽 Modern Web DAY 28

技術 Day28-介紹 Redux DevTools

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

鐵人賽 Modern Web DAY 5

技術 Day5. React的基本用法 (四)

今天要講到的是react中的事件監聽,在react中,只要在JSX的元素標籤內,根據特定方法給出的屬性名,給予其所需執行的方法,就會在事件觸發時做執行了,舉個例...

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

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

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

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

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

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

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

技術 [ Day 16 ] React Hooks 中的 useEffect

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

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

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

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

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

技術 [ Day 15 ] React Hooks 中的 useState

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

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

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

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

技術 React學習筆記-JS補充

object function筆記 const obj = { value:'小明', fn:function(){ return...

鐵人賽 自我挑戰組 DAY 6

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

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

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

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

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

鐵人賽 Modern Web DAY 1

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

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

鐵人賽 Modern Web DAY 26

技術 Day26-React PropTypes & DefaultProps

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

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

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

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

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

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Modern Web DAY 1

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

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

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

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

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

技術 React-使用JSON增加品項

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

鐵人賽 Modern Web DAY 25

技術 30天React練功坊-攻克常見實務/面試問題 Day25: Implement simple pagination(interview question)

tags: ItIron2023 react 前言 我們昨天看了一個很水的custom hook題目,希望透過那個水到爆炸的題目你有了解到可以利用custom...

鐵人賽 Modern Web DAY 29

技術 30天React練功坊-攻克常見實務/面試問題 Day29: Simple Tic-Tac-Toe game(interview question)

tags: ItIron2023 react 前言 我們昨天處理了一個實務上常見的面試問題,要你根據某份提供的api文件以及一些指示完成題目的要求,今天我們再來...

技術 React-router相關

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

鐵人賽 Modern Web DAY 22

技術 30天React練功坊-攻克常見實務/面試問題 Day22: Simple todo-list(interview question)

tags: ItIron2023 react 前言 昨天我們用了一個簡單的問題來測驗你對於react render邏輯的了解程度,相信透過昨天的經驗你應該對於u...

鐵人賽 自我挑戰組 DAY 23
React 個人讀書會 系列 第 23

技術 Day 23 - 路由切換:Link 和 NavLink

為什麼不使用 <a> 標籤進行路由導航? 在 React 中,不建議直接使用一般的 <a> 標籤進行導航,原因如下: 重新加載整個頁...

鐵人賽 JavaScript DAY 27

技術 Day 27: 使用 react-hook-form 高效管理表單提交與驗證

在現代 Web 應用開發中,表單的管理與驗證往往是開發過程中的一大挑戰。上一篇文章中,我們探討了如何追蹤使用者行為並優化應用體驗,而今天,我們的焦點是表單管理。...