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

0 Like 0 留言 2728 瀏覽

鐵人賽 Modern Web DAY 16

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

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

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

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

1 Like 0 留言 2614 瀏覽

鐵人賽 Modern Web DAY 14

I Want To Know React 系列第 14 篇

技術 I Want To Know React - 正確使用 Event handler

在上一篇中介紹了 JSX Event 的使用方式，在本章節我們將近一步了解在 class component 中使用 event handler 的常見問題、對...

Henry Chang ‧ 2020-09-29 ‧團隊404 Not Found

1 Like 0 留言 1268 瀏覽

鐵人賽 Modern Web DAY 13

從 0 開始建一個 Static Site Generator 系列第 13 篇

技術 Day 13: html 樣版與 eta.js

目前我們產生的 html 是寫死在程式中的，這篇要來讓使用者可以透過 ejs 的方式寫自己的樣版，不過我們實際要用的樣版引擎不是 ejs 而是 eta.js ，...

DanSnow ‧ 2020-09-28

0 Like 0 留言 1730 瀏覽

鐵人賽自我挑戰組 DAY 28

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

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

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

Lieutenant ‧ 2020-09-28

1 Like 0 留言 5886 瀏覽

鐵人賽 Modern Web DAY 15

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

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

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

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

1 Like 0 留言 10282 瀏覽

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

鐵人賽 Modern Web DAY 28

以 Kotlin 為主要語言建構基本的 Online Judge 系統系列第 28 篇

技術 Day 28：批改系統網頁 (10) – 製作操作資料相關頁面

昨天我們將獲取資料的網頁部分給完成了，今天就讓我們繼續將操作資料的網頁部分給完成吧！表單輸入元件在操作資料的部分，很常會使用到一些 <input&g...

灆洢 a.k.a Maplewing ‧ 2020-09-28

1 Like 0 留言 1559 瀏覽

鐵人賽 Modern Web DAY 13

I Want To Know React 系列第 13 篇

技術 I Want To Know React - 處理 Event

如 HTML 一樣，JSX 也提供了處理 DOM event 的方法。就讓我們來了解一下語法吧！ JSX 處理 event 語法 JSX 註冊 event 語法...

Henry Chang ‧ 2020-09-28 ‧團隊404 Not Found

1 Like 0 留言 930 瀏覽

鐵人賽 Modern Web DAY 12

從 0 開始建一個 Static Site Generator 系列第 12 篇

技術 Day 12: 動態路由

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

DanSnow ‧ 2020-09-27

0 Like 0 留言 3699 瀏覽

鐵人賽自我挑戰組 DAY 27

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

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

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

Lieutenant ‧ 2020-09-27

3 Like 0 留言 7096 瀏覽

鐵人賽 Modern Web DAY 12

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

技術【Day.12】React入門 - useState與解構賦值後的props

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

Andy Chang ‧ 2020-09-27

0 Like 0 留言 1506 瀏覽

鐵人賽 Modern Web DAY 27

以 Kotlin 為主要語言建構基本的 Online Judge 系統系列第 27 篇

技術 Day 27：批改系統網頁 (9) – 製作取得資料相關頁面

昨天我們完成了登入與登出相關的操作，接下來就讓我們一步一步完成接下來的頁面吧！題目總列表頁面首先先讓我們從獲得題目總列表的資料來顯示的頁面開始吧！雖然我們...

灆洢 a.k.a Maplewing ‧ 2020-09-27

0 Like 0 留言 1716 瀏覽

鐵人賽 Modern Web DAY 14

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

技術仿Trello - 製作reducer

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

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

3 Like 2 留言 2516 瀏覽

鐵人賽 Modern Web DAY 12

I Want To Know React 系列第 12 篇

技術 I Want To Know React - Lifecycle 階段

回顧 React Lifecycle 在上個章節中，我們了解了 React component instance 的生命週期（Lifecycle）代表一個 co...

Henry Chang ‧ 2020-09-27 ‧團隊404 Not Found

3 Like 0 留言 17634 瀏覽

鐵人賽 Modern Web DAY 14

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

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

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

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

1 Like 0 留言 1392 瀏覽

鐵人賽 Software Development DAY 11

前端工程師不能不知道的生產力工具系列第 11 篇

技術 [Day11] 瀏覽器開發工具 - 擴充功能篇

雖然開發者工具中已經提供相當豐富的功能，也一直持續發展中。不過 Google 有開放提供可裝在開發者工具的擴充功能的 API，像是目前大多主流的前端框架的開發者...

Yuri Tsai ‧ 2020-09-26

2 Like 0 留言 2973 瀏覽

鐵人賽自我挑戰組 DAY 26

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

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

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

Lieutenant ‧ 2020-09-26

1 Like 0 留言 1145 瀏覽

鐵人賽 Modern Web DAY 11

從 0 開始建一個 Static Site Generator 系列第 11 篇

技術 Day 11: 基於檔案系統的路由

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

DanSnow ‧ 2020-09-26

1 Like 0 留言 1659 瀏覽

鐵人賽 Modern Web DAY 11

I Want To Know React 系列第 11 篇

技術 I Want To Know React - 初探 Lifecycle

在初探 State、Class Component State 語法、State 內部運作原理這三個篇章中介紹了 state 的概念、用法與運作原理。如果...

Henry Chang ‧ 2020-09-26 ‧團隊404 Not Found

0 Like 0 留言 4735 瀏覽

鐵人賽 Modern Web DAY 13

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

技術仿Trello - 建立 Redux Store

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

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

2 Like 0 留言 3791 瀏覽

鐵人賽 Modern Web DAY 11

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

技術【Day.11】React入門 - function component、props、children

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

Andy Chang ‧ 2020-09-26

0 Like 0 留言 2398 瀏覽

鐵人賽 Modern Web DAY 26

以 Kotlin 為主要語言建構基本的 Online Judge 系統系列第 26 篇

技術 Day 26：批改系統網頁 (8) – 利用 Redux 來進行元件之間的狀態變更

昨天我們建立了 HTTPS 連線，藉以讓使用者可以登入網站。不過雖然已經可以登入網站了，但是卻還是有登入後各個元件之間狀態無法同步資料的問題，究竟我們該如何解...

灆洢 a.k.a Maplewing ‧ 2020-09-26

0 Like 0 留言 5368 瀏覽

鐵人賽 Modern Web DAY 13

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

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

Application Cache 這邊也可以看成是 server side 的快取，快取存在的位置在 backend server 與 database 之間...

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

1 Like 0 留言 1198 瀏覽

鐵人賽 Modern Web DAY 10

從 0 開始建一個 Static Site Generator 系列第 10 篇

技術 Day 10: 將我們的 SSG 變成獨立的套件

從這篇開始，程式碼的目錄結構會有很大的變化，在這之前我們都把 SSR 與我們自己的 blog 的程式碼混在一起，但這系列是要做出一個通用的 SSG ，所以之後會...

DanSnow ‧ 2020-09-25

0 Like 0 留言 2811 瀏覽

鐵人賽自我挑戰組 DAY 25

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

技術 [Day 25] React Portal 任意門

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

Lieutenant ‧ 2020-09-25

0 Like 0 留言 3242 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

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

0 Like 0 留言 3582 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 Redux 簡介

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

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

2 Like 0 留言 3927 瀏覽

鐵人賽 Modern Web DAY 10

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

技術【Day.10】React入門 - JSX語法

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

Andy Chang ‧ 2020-09-25

1 Like 1 留言 3436 瀏覽

鐵人賽 Modern Web DAY 10

I Want To Know React 系列第 10 篇

技術 I Want To Know React - State 內部運作原理

回顧 State 在上兩個章節：初探 State 與 Class Component State 語法中，我們了解了 state 的概念與用法，先來重新複習一下...

Henry Chang ‧ 2020-09-25 ‧團隊404 Not Found

1 Like 0 留言 2965 瀏覽

鐵人賽 Modern Web DAY 9

從 0 開始建一個 Static Site Generator 系列第 9 篇

技術 Day 9: 在 Server 使用 Redux

這次因為要做出像在 client 一樣從 API 取得資料，所以上次的 store 不能直接使用，要準備一個新的，不過 Entity Adapter 的部份是可...

DanSnow ‧ 2020-09-24

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

技術 I Want To Know React - 正確使用 Event handler

技術 Day 13: html 樣版與 eta.js

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

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

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

技術 Day 28：批改系統網頁 (10) – 製作操作資料相關頁面

技術 I Want To Know React - 處理 Event

技術 Day 12: 動態路由

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

技術 【Day.12】React入門 - useState與解構賦值後的props

技術 Day 27：批改系統網頁 (9) – 製作取得資料相關頁面

技術 仿Trello - 製作reducer

技術 I Want To Know React - Lifecycle 階段

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

技術 [Day11] 瀏覽器開發工具 - 擴充功能篇

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

技術 Day 11: 基於檔案系統的路由

技術 I Want To Know React - 初探 Lifecycle

技術 仿Trello - 建立 Redux Store

技術 【Day.11】React入門 - function component、props、children

技術 Day 26：批改系統網頁 (8) – 利用 Redux 來進行元件之間的狀態變更

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

技術 Day 10: 將我們的 SSG 變成獨立的套件

技術 [Day 25] React Portal 任意門

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

技術 Redux 簡介

技術 【Day.10】React入門 - JSX語法

技術 I Want To Know React - State 內部運作原理

技術 Day 9: 在 Server 使用 Redux

標記使用者

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

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

技術【Day.12】React入門 - useState與解構賦值後的props

技術仿Trello - 製作reducer

技術仿Trello - 建立 Redux Store

技術【Day.11】React入門 - function component、props、children

技術【Day.10】React入門 - JSX語法