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

0 Like 0 留言 2136 瀏覽

鐵人賽 Modern Web DAY 26

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

技術 [Day 26] 菜鳥工程師的初次 Open Source Contribution - (2)

今天接續昨天繼續分享第一次貢獻開源專案的心得。第二步：閱讀 CONTRIBUTING.md & 開發通常一個完整的開源專案，都會提供一個文檔讓想貢獻...

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

0 Like 0 留言 2206 瀏覽

鐵人賽 Modern Web DAY 29

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

技術 react 大冒險-setTimeout setInterval in react -day 24

今天來說明如何在 react 內執行 setTimeout 跟 setInterval 複習概念，在 react 的生命週期中提到，`componentDidM...

dc88 ‧ 2020-10-13

0 Like 0 留言 956 瀏覽

鐵人賽 Modern Web DAY 28

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

技術 react 大冒險-render props-day 23

繼 higher-order-component 後，今天來說明 react 中另個概念 render-props所謂的 render-props 就是在 co...

dc88 ‧ 2020-10-12

0 Like 0 留言 755 瀏覽

鐵人賽 Modern Web DAY 27

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

技術 react 大冒險-conditional rendering-day 22

寫著寫這竟然忘記了 conditional rendering 這回事XD把這部分補回來什麼是 conditional rendering condition...

dc88 ‧ 2020-10-11

0 Like 0 留言 933 瀏覽

鐵人賽 Modern Web DAY 26

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

技術 react 大冒險-react router-day 21-2

今天繼續對 react router 做說明除了上篇的 Link 外，react-router 還有一個叫 NavLink 的東西.. NavLink com...

dc88 ‧ 2020-10-10

0 Like 0 留言 2934 瀏覽

鐵人賽 Modern Web DAY 25

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

技術 [Day 25] 菜鳥工程師的初次 Open Source Contribution - (1)

鐵人賽剩下 5 天，接下來我想聚焦在一些經驗分享，畢竟除了學習技術以外，適時的採取一些實際行動更能夠快速吸收所學知識與進步。身為軟體工程師， Github 自...

莫力全 Kyle Mo ‧ 2020-10-08 ‧團隊不要搶我隊友

0 Like 0 留言 1193 瀏覽

鐵人賽 Modern Web DAY 25

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

技術 react 大冒險-react router-day 21-1

繼前面提到 HOC 的概念後，緊接著介紹也是相當實用的 react router 本文使用的版本會因版本不同有些微差異 "react-router...

dc88 ‧ 2020-10-09

0 Like 0 留言 841 瀏覽

鐵人賽 Modern Web DAY 24

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

技術 react 大冒險-higher order component-day 20-2

上篇說明了 higher-order-component 的概念用一個簡單的案例作為例子開新檔案，名為 ClickerCounter.js希望點擊元件上的按鈕...

dc88 ‧ 2020-10-08

0 Like 0 留言 929 瀏覽

鐵人賽 Modern Web DAY 23

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

技術 react 大冒險-higher order component-day 20-1

這篇來說明 React 實用的概念-高階元件(higher order component)所謂的 higher order，其實在 js 中也有類似的概念，叫...

dc88 ‧ 2020-10-07

0 Like 0 留言 924 瀏覽

鐵人賽 Modern Web DAY 30

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

技術 react 大冒險-一些實用的 package-day 30

今天似乎是第 30 天，輕鬆一下～來介紹一些好用的 package (偽)結賽感言總之晃的一下就 30 天了，怎麼感覺好像才剛開賽沒多久XDD沒想到今年竟然成...

dc88 ‧ 2020-10-14

0 Like 0 留言 990 瀏覽

鐵人賽 Modern Web DAY 22

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

技術 react 大冒險-Lifecycle method-day 19

接續上篇，使用 promise 對 external api 取得值，但如果想要在頁面讀取時就顯示出值，而不是等待使用者操作後才取值就要靠 react 中的 l...

dc88 ‧ 2020-10-06

0 Like 0 留言 1335 瀏覽

鐵人賽 Modern Web DAY 21

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

技術 react 大冒險-fetch data from API-day 18

react 如同一般 js，可以對 api 發出請求並取回值 send request 的幾種方法 js 是 synchronous 特性的語言，在同時間下，一...

dc88 ‧ 2020-10-05

0 Like 0 留言 830 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 react 大冒險-unidirectional flow 單向資料流-day 17-2

在 Calculator 中添加兩個 methodhandleCelsiusChange / handleFahrenheitChange 用來設定 Calc...

dc88 ‧ 2020-10-04

0 Like 0 留言 878 瀏覽

鐵人賽 Modern Web DAY 19

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

技術 react 大冒險-unidirectional flow 單向資料流-day 17-1

在 react 中有個特性稱為單向資料流 unidirectional flow簡單說就是 child component 內的資料都來自於 parent...

dc88 ‧ 2020-10-03

0 Like 0 留言 3683 瀏覽

鐵人賽 Modern Web DAY 18

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

技術仿Trello - 串接Unsplash API

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

Jasper ‧ 2020-10-01 ‧團隊Outcome First

1 Like 0 留言 1994 瀏覽

鐵人賽 Modern Web DAY 17

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

技術仿Trello - 客製化拖曳圖示

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

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

0 Like 0 留言 1564 瀏覽

鐵人賽自我挑戰組 DAY 29

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

技術 [Day 29] 用React 來寫ooxx 小遊戲

ooxx也可以說是很熱門的練習題，所以今天就用React 來寫一個ooxx的小遊戲吧！初始化先設定一個長度為9的陣列來記錄玩家下的位置，這邊用了array.f...

Lieutenant ‧ 2020-09-29

0 Like 0 留言 2525 瀏覽

鐵人賽 Modern Web DAY 16

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

技術仿Trello - 用React DnD製作拖放(drop)功能

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

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

2 Like 0 留言 6434 瀏覽

鐵人賽 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 留言 1546 瀏覽

鐵人賽自我挑戰組 DAY 28

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

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

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

Lieutenant ‧ 2020-09-28

1 Like 0 留言 5392 瀏覽

鐵人賽 Modern Web DAY 15

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

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

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

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

1 Like 0 留言 9305 瀏覽

鐵人賽 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 ‧團隊不要搶我隊友

0 Like 0 留言 3261 瀏覽

鐵人賽自我挑戰組 DAY 27

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

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

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

Lieutenant ‧ 2020-09-27

0 Like 0 留言 1611 瀏覽

鐵人賽 Modern Web DAY 14

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

技術仿Trello - 製作reducer

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

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

3 Like 0 留言 15831 瀏覽

鐵人賽 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 留言 1008 瀏覽

鐵人賽 Modern Web DAY 14

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

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

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

dc88 ‧ 2020-09-28

2 Like 0 留言 2583 瀏覽

鐵人賽自我挑戰組 DAY 26

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

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

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

Lieutenant ‧ 2020-09-26

0 Like 0 留言 4575 瀏覽

鐵人賽 Modern Web DAY 13

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

技術仿Trello - 建立 Redux Store

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

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

0 Like 0 留言 2501 瀏覽

鐵人賽自我挑戰組 DAY 25

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

技術 [Day 25] React Portal 任意門

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

Lieutenant ‧ 2020-09-25

0 Like 0 留言 2849 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

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

技術 [Day 26] 菜鳥工程師的初次 Open Source Contribution - (2)

技術 react 大冒險-setTimeout setInterval in react -day 24

技術 react 大冒險-render props-day 23

技術 react 大冒險-conditional rendering-day 22

技術 react 大冒險-react router-day 21-2

技術 [Day 25] 菜鳥工程師的初次 Open Source Contribution - (1)

技術 react 大冒險-react router-day 21-1

技術 react 大冒險-higher order component-day 20-2

技術 react 大冒險-higher order component-day 20-1

技術 react 大冒險-一些實用的 package-day 30

技術 react 大冒險-Lifecycle method-day 19

技術 react 大冒險-fetch data from API-day 18

技術 react 大冒險-unidirectional flow 單向資料流-day 17-2

技術 react 大冒險-unidirectional flow 單向資料流-day 17-1

技術 仿Trello - 串接Unsplash API

技術 仿Trello - 客製化拖曳圖示

技術 [Day 29] 用React 來寫ooxx 小遊戲

技術 仿Trello - 用React DnD製作拖放(drop)功能

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

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

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

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

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

技術 仿Trello - 製作reducer

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

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

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

技術 仿Trello - 建立 Redux Store

技術 [Day 25] React Portal 任意門

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

標記使用者

技術仿Trello - 串接Unsplash API

技術仿Trello - 客製化拖曳圖示

技術仿Trello - 用React DnD製作拖放(drop)功能

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

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

技術仿Trello - 製作reducer

技術仿Trello - 建立 Redux Store