iT邦幫忙

react相關文章
共有 1832 則文章
鐵人賽 Modern Web DAY 9

技術 Day08 | Function Component 的 State 在哪裡

前言 本篇主要會說明,在 Hooks 讓 Function Component 具備 State 後,該如何使用及設置。 前置準備 文中的專案會以 Day0...

鐵人賽 Modern Web DAY 27

技術 [Day 27] 高效工作術:番茄工作法

這篇文章不同於過往的技術分享或是關於工程師職涯的心得,要來介紹的是一個自己嘗試過後覺得十分有效的「工作術」,不管讀者的職業是什麼,我認為都有運用這個工作術的空間...

鐵人賽 Modern Web DAY 17

技術 Day17 - 貪吃蛇篇:產生食物(上菜啦~~)

想一想,決定食物如何出現 俗話說,吃飯皇帝大,如果不吃東西,貪吃蛇就長不大,也跑不快,所以今天我們要來製作貪吃蛇的另一個重頭戲,就是食物。 首先,我們要來決定食...

鐵人賽 Modern Web DAY 30

技術 [DAY30] 被 React react 的後端工程師 - 後記

一開始會這麼定題目,其實是起源于我對前端的挑食,因為我不喜歡調畫面左邊一點右邊一點這種事情我真的不喜歡做所以取翻譯中 過敏 的意思來形容我的 React 學習過...

鐵人賽 自我挑戰組 DAY 28

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

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

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 9

技術 Day09 - Tic Tac Toe篇:勝負判斷方法(2/2)

勝負判斷分析 昨天完成了 row 方向和 column 方向的勝負判斷,今天我們要來完成右斜和左斜方向的勝負判斷,我這邊先把這兩個方向命名為 forwardSl...

鐵人賽 Modern Web DAY 30

技術 Day29 | 最強聯名款 TSX 上市-ESLint 篇

前言 ESLint 一直是我們打程式的重要指標,它不但能夠替我們檢查語法風格中的問題,也避免某些問題可能會造成的程式錯誤,所以如果 ESLint 無法在 Typ...

鐵人賽 Modern Web DAY 1

技術 React 基礎簡介 - React element與JSX

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

鐵人賽 Modern Web DAY 15

技術 【Day15】數據展示元件 - Carousel

元件介紹 Carousel 是一個像旋轉木馬一樣會輪流轉的輪播元件。在一個內容空間有限的可視範圍中進行內容的輪播展示。通常適用於一組圖片或是卡片的輪播。 Car...

鐵人賽 Modern Web DAY 28

技術 [DAY 28] Redux Toolkit 非同步操作createAsyncThunk

做前端時一定會碰到非同步操作,本篇將使用 axios 搭配 Redux Toolkit 來作範例串接 API,可以先將 axios 環境安裝起來 安裝 Axi...

鐵人賽 Modern Web DAY 6

技術 如何製作月曆 compound components【 calendar | 我不會寫 React Component 】

hashtags: #react, #components, #accessibility, #calendar, #compound components...

鐵人賽 Modern Web DAY 5

技術 如何製作月曆 integration【 calendar | 我不會寫 React Component 】

hashtags: #react, #components, #accessibility, #calendar, #control 本篇接續前篇 如何製作月曆...

技術 為何 React 官方推薦 setState 設定值而不使用 this.state設定?

挑戰 React 第十三篇 上篇我們了解 state 可以在 component 裡改變資訊且實作。 此篇將會用實作範例,證明修改 component...

技術 [React + TS] lexical文字編輯器套件使用心得與教學

[React + TS] lexical文字編輯器套件使用心得與教學 前言 最近寒假寫專案寫著發閒,發現React一些套件的教學很少,例如本篇提到的lexica...

鐵人賽 Modern Web DAY 25

技術 【Day25】反饋元件 - Skeleton

元件介紹 Skeleton 是一個骨架載入元件(Skeleton Screen Loading),跟 Spin 不同的是,Skeleton 幫助我們在頁面載入完...

鐵人賽 Modern Web DAY 22

技術 Day21 | 從測試角度操作 Redux-Saga 和 Reducer

前言 先複習一下上一個章節裡我們做了什麼,首先是將 Content 的按鈕行為拆成四個步驟: Component 按下按鈕,會執行 Dispatch,這裡會傳...

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 3
I Want To Know React 系列 第 3

技術 I Want To Know React - 初探 JSX

簡介 JSX JSX 全名為 JavaScript XML,是一種 JavaScript 的擴充語法,支援在 JavaScript 中撰寫 HTML-like/...

鐵人賽 Modern Web DAY 18

技術 Day18 - 貪吃蛇篇:吃到自己會死

前情提要 昨天 Day17 我們已經讓食物可以隨機產生,食物還會炫砲的發光,蛇也可以順利吃到食物,而且吃到之後身體會變長,速度會變快。 但是讓蛇這樣一直吃下去,...

鐵人賽 Modern Web DAY 23

技術 Day23 - 記憶方塊篇:頁面佈局規劃

繪製頁面草稿 按照慣例,我們先來畫一下我們整個遊戲畫面呈現的草稿,下面是我對整個遊戲面化的初步想像。 我把所有的元素都集中放在中間區塊,因為人的視線比起左右移動...

鐵人賽 Modern Web DAY 28

技術 Day 28 - 實戰演練 — Pagination

Pagination 今天要實作的只是一個最基本的 Pagination,而我個人覺得在處理換頁時維持固定長度的邏輯挺有趣的,所以特別在最後一篇實作拿出來講...

鐵人賽 自我挑戰組 DAY 26

技術 [Day 26] React memory leak - 記憶體洩漏

memory leak字面上翻譯就叫做記憶體洩漏,記憶體洩漏會造成什麼問題?大家應該有那種經驗,開太多chrome分頁,電腦開始卡卡的,嚴重點直接當掉,memo...

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

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

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

技術 深入理解React Diff算法

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

鐵人賽 Modern Web DAY 8

技術 Day 8: Redux 與準備資料來源的 API

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

鐵人賽 Modern Web DAY 23

技術 Day22 | 創建假 History ,騙過真 Router

前言 來到測試的最後一個章節了,本篇要說明的是如何對 React-Router 做測試,確認 Component 在不同的 Router 的 Render 狀況...

鐵人賽 Modern Web DAY 6
ReactJS 疑難排解 系列 第 6

技術 ReactJS 疑難排解:什麼是 reconciliation

在了解 reconciliation 前,我們先說說 react 是如何去操作 DOM 的 在 javaScript 中,我們可以利用 createElem...

鐵人賽 Modern Web DAY 29
一步一腳印的React旅程 系列 第 29

技術 [筆記][React]來做個作品吧!待辦事項「todolist」篇(9)-把資料做排序吧

Hi!大家好!昨天寫完那篇的時候,心情輕鬆了不少XD,其實我真的很怕做不出來哎!不過還好還是搞定了,雖然完全放棄了排版,哈哈,那接下來剩下的就把資料排序和輸出而...