iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2 Like 0 留言 5688 瀏覽

鐵人賽 Modern Web DAY 13

從比入門再往前一點開始，一直到深入React.js 系列第 13 篇

技術【Day.13】React入門 - useEffect(生命週期)

(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的...

Andy Chang ‧ 2020-09-28

0 Like 0 留言 1383 瀏覽

鐵人賽自我挑戰組 DAY 28

React初心者30天的探索之路系列第 28 篇

技術 [Day 28] 用React 來做一個todolist吧！

不管是學哪一種框架，todolist可以說是經典練習題，此次練習除了實現基本的功能新增與刪除之外，再加一個拖曳改變排序功能新增：當使用者輸入完要新增的代辦...

Lieutenant ‧ 2020-09-28

1 Like 0 留言 8750 瀏覽

鐵人賽 Modern Web DAY 15

前端工程師一起來種一棵後端技能樹吧！系列第 15 篇

技術 [Day 15] Server-Side-Rendering - (2) feat. Next.js

前一天介紹了 SSR 基本概念，今天則是要介紹 React 最有名的 SSR 框架：Next.js。今天不是要來講 Next.js 怎麼使用，畢竟網路上學習資...

莫力全 Kyle Mo ‧ 2020-09-28 ‧團隊不要搶我隊友

1 Like 0 留言 4803 瀏覽

鐵人賽 Modern Web DAY 15

React + GraphQL 全端練習筆記系列第 15 篇

技術仿Trello - 用React DnD製作拖曳(drag)功能

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

Jasper ‧ 2020-09-28 ‧團隊Outcome First

0 Like 0 留言 895 瀏覽

鐵人賽 Modern Web DAY 14

為期 30 天的 react 大冒險系列第 14 篇

技術 react 大冒險-關於setState-day 13

setState 雖然 state 可被修改但要搭配 react 內專屬的方法setState不可以直接修改 state 上的值，直接修改 state 並不會...

dc88 ‧ 2020-09-28

0 Like 0 留言 2969 瀏覽

鐵人賽自我挑戰組 DAY 27

React初心者30天的探索之路系列第 27 篇

技術 [Day 27] 利用React Suspense & React Lazy來優化載入速度

在build專案的時候，我們會透過webpack將不同模組的component打包成同一支js，但是當專案的規模越來越大，程式碼的size就會逐漸肥大，好幾m...

Lieutenant ‧ 2020-09-27

0 Like 0 留言 1479 瀏覽

鐵人賽 Modern Web DAY 14

React + GraphQL 全端練習筆記系列第 14 篇

技術仿Trello - 製作reducer

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

Jasper ‧ 2020-09-27 ‧團隊Outcome First

3 Like 0 留言 14442 瀏覽

鐵人賽 Modern Web DAY 14

前端工程師一起來種一棵後端技能樹吧！系列第 14 篇

技術 [Day 14] Server-Side-Rendering - (1)

最近在 Frontend 技術圈裡，Server-Side-Rendering（SSR）可說是一個越來越火熱的概念，剛好現在工作上的架構就是使用 Next.j...

莫力全 Kyle Mo ‧ 2020-09-27 ‧團隊不要搶我隊友

0 Like 0 留言 668 瀏覽

鐵人賽 Modern Web DAY 13

為期 30 天的 react 大冒險系列第 13 篇

技術 react 大冒險-顯示當下欄位輸入值的文字段落 state exercise-day 12

上篇介紹 prop 跟 state，來做個關於 state 的練習製做一個會顯示當下欄位輸入值的文字段落回到 App.js，將原本的 ListItem c...

dc88 ‧ 2020-09-27

2 Like 0 留言 2315 瀏覽

鐵人賽自我挑戰組 DAY 26

React初心者30天的探索之路系列第 26 篇

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

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

Lieutenant ‧ 2020-09-26

0 Like 0 留言 4384 瀏覽

鐵人賽 Modern Web DAY 13

React + GraphQL 全端練習筆記系列第 13 篇

技術仿Trello - 建立 Redux Store

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

Jasper ‧ 2020-09-26 ‧團隊Outcome First

0 Like 0 留言 668 瀏覽

鐵人賽 Modern Web DAY 12

為期 30 天的 react 大冒險系列第 12 篇

技術 react 大冒險-屬於 React 的開發者工具-day 11

為了讓開發 react 專案的過程更加輕鬆可以安裝 react developer tool 這個專屬react的開發小工具react developer to...

dc88 ‧ 2020-09-26

0 Like 0 留言 2263 瀏覽

鐵人賽自我挑戰組 DAY 25

React初心者30天的探索之路系列第 25 篇

技術 [Day 25] React Portal 任意門

Portal為插槽功能，可以將子元件渲染到父元件以外的地方，聽起來很炫，概念感覺有點像任意門？render一個component時，其實改變的是另一個地方的DO...

Lieutenant ‧ 2020-09-25

0 Like 0 留言 2509 瀏覽

鐵人賽 Modern Web DAY 12

前端工程師一起來種一棵後端技能樹吧！系列第 12 篇

技術 [Day 12] 沒了解過 Cache，就別說網站性能沒救了！ - (1)

現今的網頁架構相較於過往偏向靜態的形式已經變得複雜許多，大部分資料都要靠動態抓取，而抓取資料的過程就會產生許多 Request 請求去取得 Response ，...

莫力全 Kyle Mo ‧ 2020-09-25 ‧團隊不要搶我隊友

0 Like 0 留言 3246 瀏覽

鐵人賽 Modern Web DAY 12

React + GraphQL 全端練習筆記系列第 12 篇

技術 Redux 簡介

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

Jasper ‧ 2020-09-25 ‧團隊Outcome First

0 Like 0 留言 835 瀏覽

鐵人賽 Modern Web DAY 11

為期 30 天的 react 大冒險系列第 11 篇

技術 react 大冒險-prop / state & defaultProps-day 10

上篇建立出 ListItem component 並 import 到 App component 中但每個都長一樣的 component 看起來實在是太呆了！...

dc88 ‧ 2020-09-25

0 Like 0 留言 5350 瀏覽

鐵人賽自我挑戰組 DAY 24

React初心者30天的探索之路系列第 24 篇

技術 [Day 24] React Router- 指路者

以往在同個網站切換網頁的時候，就會重新刷新頁面，然後等待資源重新載入才能看到新的畫面，但是人的耐心是有限的，每次的切換如果都需要等待的話，人的耐心就會被消磨殆盡...

Lieutenant ‧ 2020-09-24

0 Like 0 留言 1212 瀏覽

鐵人賽 Modern Web DAY 10

為期 30 天的 react 大冒險系列第 10 篇

技術 react 大冒險-將 App component 改寫成 class component-day 9

class component 將原本的 App.js 改寫如下.. import React from 'react'; class App extends...

dc88 ‧ 2020-09-24

0 Like 0 留言 2046 瀏覽

鐵人賽自我挑戰組 DAY 23

React初心者30天的探索之路系列第 23 篇

技術 [Day 23] React hook(下)-useMemo&useRef

在搜尋useMemo的時候，就一直看到React.memo的相關資料，雖然React memo不屬於React hook的一部分，但還是簡單介紹一下，我們都知...

Lieutenant ‧ 2020-09-23

1 Like 0 留言 3361 瀏覽

鐵人賽 Modern Web DAY 10

前端工程師一起來種一棵後端技能樹吧！系列第 10 篇

技術 [Day 10] Proxy Pattern

其實 Proxy 是一個相當廣的概念，它可以代表一種設計模式，也可以代表實際存在的網路實體。若是實體，又可以存在於 backend server 之間，也能存...

莫力全 Kyle Mo ‧ 2020-09-23 ‧團隊不要搶我隊友

0 Like 0 留言 1065 瀏覽

鐵人賽 Modern Web DAY 10

React + GraphQL 全端練習筆記系列第 10 篇

技術仿Trello - 建立編輯Todo介面與以下省略

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

Jasper ‧ 2020-09-23 ‧團隊Outcome First

0 Like 0 留言 1617 瀏覽

鐵人賽 Modern Web DAY 9

為期 30 天的 react 大冒險系列第 9 篇

技術 react 大冒險- React 的特殊寫法 JSX-day 8

細看 App component 接下來，進到 src 資料夾內的 App.js根據先前提到 component 的種類，可以知道 App 是一個 functi...

dc88 ‧ 2020-09-23

0 Like 0 留言 2274 瀏覽

鐵人賽 Modern Web DAY 7

ReactJS 疑難排解系列第 7 篇

技術 ReactJS 疑難排解：React Fiber

在上一篇文章中提到，到底 reconciler 的對象是誰呢？看起來超像對 component 的，但似乎不大一樣，在本篇會完整的解釋給你聽 vDOM 是什...

maxam ‧ 2020-09-22

0 Like 0 留言 1085 瀏覽

鐵人賽 Modern Web DAY 9

React + GraphQL 全端練習筆記系列第 9 篇

技術仿Trello - 建立新增Todo功能

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

Jasper ‧ 2020-09-22 ‧團隊Outcome First

0 Like 0 留言 8025 瀏覽

鐵人賽自我挑戰組 DAY 22

React初心者30天的探索之路系列第 22 篇

技術 [Day 22]React hook(中)-useContext&useReducer

useContext() useContext會和React Context API搭配使用，可以讓component共享資料，像是進階版的props，不用一層...

Lieutenant ‧ 2020-09-22

0 Like 0 留言 2692 瀏覽

鐵人賽 Modern Web DAY 8

為期 30 天的 react 大冒險系列第 8 篇

技術 react 大冒險-create react app 出現錯誤-day 6(番外篇)

如果 npm start 後遇到錯誤.. 人品不好的時候執行 npm start 卻出現錯誤..NPM start returns error, “There...

dc88 ‧ 2020-09-22

1 Like 0 留言 5158 瀏覽

鐵人賽 Modern Web DAY 7

從比入門再往前一點開始，一直到深入React.js 系列第 7 篇

技術【Day.07】React入門 - 簡介React、從class到Hook的發展歷史

(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的...

Andy Chang ‧ 2020-09-22

0 Like 1 留言 2192 瀏覽

鐵人賽 Modern Web DAY 6

ReactJS 疑難排解系列第 6 篇

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

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

maxam ‧ 2020-09-21

0 Like 0 留言 1950 瀏覽

鐵人賽 Modern Web DAY 7

為期 30 天的 react 大冒險系列第 7 篇

技術 react 大冒險-React 專案的資料夾結構-day 7

React 專案的資料夾結構當執行 create react app 後，資料夾內也會自動產生一些內容 node_modules 所有經由 npm 安裝的 n...

dc88 ‧ 2020-09-21

0 Like 0 留言 1057 瀏覽

鐵人賽 Modern Web DAY 8

React + GraphQL 全端練習筆記系列第 8 篇

技術仿Trello - 建立新增Todo介面

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

Jasper ‧ 2020-09-21 ‧團隊Outcome First

技術 【Day.13】React入門 - useEffect(生命週期)

技術 [Day 28] 用React 來做一個todolist吧！

技術 [Day 15] Server-Side-Rendering - (2) feat. Next.js

技術 仿Trello - 用React DnD製作拖曳(drag)功能

技術 react 大冒險-關於setState-day 13

技術 [Day 27] 利用React Suspense & React Lazy來優化載入速度

技術 仿Trello - 製作reducer

技術 [Day 14] Server-Side-Rendering - (1)

技術 react 大冒險-顯示當下欄位輸入值的文字段落 state exercise-day 12

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

技術 仿Trello - 建立 Redux Store

技術 react 大冒險-屬於 React 的開發者工具-day 11

技術 [Day 25] React Portal 任意門

技術 [Day 12] 沒了解過 Cache，就別說網站性能沒救了！ - (1)

技術 Redux 簡介

技術 react 大冒險-prop / state & defaultProps-day 10

技術 [Day 24] React Router- 指路者

技術 react 大冒險-將 App component 改寫成 class component-day 9

技術 [Day 23] React hook(下)-useMemo&useRef

技術 [Day 10] Proxy Pattern

技術 仿Trello - 建立編輯Todo介面與以下省略

技術 react 大冒險- React 的特殊寫法 JSX-day 8

技術 ReactJS 疑難排解：React Fiber

技術 仿Trello - 建立新增Todo功能

技術 [Day 22]React hook(中)-useContext&useReducer

技術 react 大冒險-create react app 出現錯誤-day 6(番外篇)

技術 【Day.07】React入門 - 簡介React、從class到Hook的發展歷史

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

技術 react 大冒險-React 專案的資料夾結構-day 7

技術 仿Trello - 建立新增Todo介面

標記使用者

技術【Day.13】React入門 - useEffect(生命週期)

技術仿Trello - 用React DnD製作拖曳(drag)功能

技術仿Trello - 製作reducer

技術仿Trello - 建立 Redux Store

技術仿Trello - 建立編輯Todo介面與以下省略

技術仿Trello - 建立新增Todo功能

技術【Day.07】React入門 - 簡介React、從class到Hook的發展歷史

技術仿Trello - 建立新增Todo介面