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

0 Like 0 留言 5912 瀏覽

鐵人賽 Modern Web DAY 14

使用 Modern Web 技術來打造 Native App 系列第 14 篇

技術 Day 14：編輯的藝術 - TextInput 與 Keyboard

前言手機不是很好打字，如果可以用更簡單的方式搞定就應該盡量避免打字，但很多時候還是必須要讓使用者輸入，例如：回留言、寫筆記、填表單、搜尋，等等，因此還是必須熟...

C. T. Lin ‧ 2016-12-29

3 Like 1 留言 5910 瀏覽

鐵人賽 Modern Web DAY 25

從 Hooks 開始，讓你的網頁 React 起來系列第 25 篇

技術 [Day 25 - 即時天氣] 自己的鉤子自己做 - 建立 Custom Hook

感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書...

pjchender ‧ 2019-10-11 ‧團隊Wow Doge!

2 Like 1 留言 5800 瀏覽

鐵人賽 Modern Web DAY 5

Zero to hero with React.js 系列第 5 篇

技術【Day5 React】render 一個會動的 React 日曆

日曆 DEMO 時間誠可貴，參加鐵人賽方得時間更加珍貴我們可以直接把要呈現在 DOM 的內容直接寫在 ReactDOM.render() ，不過通常我們...

TSAI ‧ 2017-12-11

3 Like 0 留言 5794 瀏覽

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

鐵人賽 Modern Web DAY 1

30 天擁有一套自己手刻的 React UI 元件庫系列第 1 篇

技術【Day01】數據輸入元件 - Button

參賽前言第一次參賽是 2019鐵人賽(連結)，也是剛接觸 React 不久，透過那次真的覺得收穫良多。雖然參加完有種這輩子除非瘋了，不然絕不可能參加第二次的心...

Taiming ‧ 2021-09-14 ‧團隊董事長清潔隊

4 Like 0 留言 5713 瀏覽

鐵人賽 Software Development DAY 18

React框架白話文運動系列第 18 篇

技術 React白話文運動18-React Hook-useContext 02

前言嗨，我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我，進而獲得更多資訊...

hogantech ‧ 2022-10-03

2 Like 5 留言 5698 瀏覽

鐵人賽 Modern Web DAY 22

從 Hooks 開始，讓你的網頁 React 起來系列第 22 篇

技術 [Day 22 - 即時天氣] 讓白天和晚上使用不同天氣圖示

感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書...

pjchender ‧ 2019-10-08 ‧團隊Wow Doge!

0 Like 0 留言 5642 瀏覽

鐵人賽 Modern Web DAY 13

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 13 篇

技術 #13 No-code 之旅 — 簡單快速開發漂亮的 React 元件 ft. Chakra UI

今天來點不一樣的！來講一個我最近常用的 React UI component library，就是 Chakra UI～講到 React，很多人會想到 Mat...

Jade ‧ 2021-09-28

4 Like 1 留言 5631 瀏覽

鐵人賽 Modern Web DAY 8

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

技術【Day.08】React入門 - 環境設定 - npm、Webpack、Babel

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

Andy Chang ‧ 2020-09-23

5 Like 0 留言 5624 瀏覽

鐵人賽 Modern Web DAY 2

今晚，我想來點 Web 前端效能優化大補帖！系列第 2 篇

技術 Day02 X 為什麼要在前端做效能優化？

大家好！雖然今天是 Day 2，不過嚴格來說是系列文的第一天。今天要來談談「為什麼我們需要在前端做效能的優化？」，也許內容會比較乏味，然而在執行一件事情前先釐...

莫力全 Kyle Mo ‧ 2021-09-17 ‧團隊StarBugs 星巴哥技術週刊

3 Like 0 留言 5615 瀏覽

鐵人賽 Software Development DAY 29

React框架白話文運動系列第 29 篇

技術 React白話文運動29-React Router 03

前言嗨，我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我，進而獲得更多資訊...

hogantech ‧ 2022-10-14

1 Like 0 留言 5511 瀏覽

鐵人賽 Modern Web DAY 17

I Want To Know React 系列第 17 篇

技術 I Want To Know React - 初探 Key

在上一篇中，我們介紹了 React render list 的語法，其中提及了 render React element list 時都必須要加上 key pr...

Henry Chang ‧ 2020-10-02 ‧團隊404 Not Found

1 Like 0 留言 5492 瀏覽

鐵人賽 Modern Web DAY 8

以經典小遊戲為主題之ReactJS應用練習系列第 8 篇

技術 Day08 - Tic Tac Toe篇：勝負判斷方法(1/2)

勝負判斷分析窮舉法在 3x3 的圈圈叉叉遊戲中，獲勝的組合只有 8 種，以上圖為例，每個格子裡面的數字代表 block id，我們窮舉出所有獲勝連線： /...

Taiming ‧ 2018-10-23 ‧團隊開橋找井

1 Like 0 留言 5485 瀏覽

鐵人賽 Modern Web DAY 21

React.js 從【0】到【1】推坑計畫系列第 21 篇

技術【Day 21】React 渲染機制

我們都知道使用 React 讓我們的應用可以擁有非常好的效能，但背後裡 React 到底幫我們做了哪些努力呢？今天就來初探一下 React 的渲染機制！當我們...

莫力全 Kyle Mo ‧ 2019-09-25

0 Like 0 留言 5459 瀏覽

鐵人賽 Modern Web DAY 22

React - DOM界的彼方系列第 22 篇

技術 Day 22: React篇: TodoApp程式 + 搜尋/過濾 + 排序

今天的主題是要加入搜尋、過濾與排序功能。這三個功能各有其重點，整個一起加進來會讓程式變得開始複雜，下面的解說就要仔細看了。這個程式最後的呈現結果，就像下面的...

eyesofkids ‧ 2016-12-22

2 Like 4 留言 5444 瀏覽

鐵人賽 Modern Web DAY 6

React.js 從【0】到【1】推坑計畫系列第 6 篇

技術【Day 6】Child Component && Props

昨天介紹了可以在 component 中使用的 state，然而 React 一般建議能夠用越少 state 越好，因為 state 的改變是非同步的，stat...

莫力全 Kyle Mo ‧ 2019-09-10

2 Like 0 留言 5362 瀏覽

鐵人賽 Modern Web DAY 11

今晚，我想來點 Web 前端效能優化大補帖！系列第 11 篇

技術 Day11 X Lazy Loading

還記得昨天 Virtualized List 篇章開頭放的 Facebook demo 影片嗎？有沒有發現我們好像遺漏了什麼功能沒有說明？先問大家一個問題...

莫力全 Kyle Mo ‧ 2021-09-26 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 5361 瀏覽

鐵人賽 Modern Web DAY 11

React.js 從【0】到【1】推坑計畫系列第 11 篇

技術【Day 10】CSS && Inline-style

到昨天為止都著重在 JS 的部分，基本的功能已經可以完成了，但除了功能以外，網頁應用的外觀也是很重要的，所以今天就暫時把 JS 擺在一邊，看看在 React 中...

莫力全 Kyle Mo ‧ 2019-09-15

0 Like 0 留言 5349 瀏覽

鐵人賽自我挑戰組 DAY 24

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

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

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

Lieutenant ‧ 2020-09-24

2 Like 1 留言 5308 瀏覽

鐵人賽 Modern Web DAY 30

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

技術【Day.30】React進階 - Styled-Components: React的CSS解決方案 | 系列總結

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

Andy Chang ‧ 2020-10-15

0 Like 0 留言 5258 瀏覽

鐵人賽 Modern Web DAY 27

Zero to hero with React.js 系列第 27 篇

技術【Day 27 React】Redux+API 製作 meme generator—— Part1

現在網路上有許多有趣的梗圖，今天我們不求人！就來串接 Imgflip API 取得梗圖，再透過讓使用者輸入要放在圖片上的文字，做出最客製化的梗圖～環境建置...

TSAI ‧ 2018-01-02

2 Like 1 留言 5242 瀏覽

技術理解React的setState到底是同步還是非同步(上)

在上個月初的時候，偶然在IThelp看到這篇討論 setState後畫面沒有立即Render，決定趁自己有空的時候把相關的概念搞清楚。以下內容是自己參考多份官...

Andy Chang ‧ 2021-08-06

1 Like 0 留言 5220 瀏覽

鐵人賽 Modern Web DAY 9

React.js 從【0】到【1】推坑計畫系列第 9 篇

技術【Day 9】Component Lifecycle

昨天對 class-based component 有了初步的認識，然而除了 state ，在 hooks 出來以前 class component 還有一項...

莫力全 Kyle Mo ‧ 2019-09-13

1 Like 1 留言 5173 瀏覽

鐵人賽 Modern Web DAY 24

React - DOM界的彼方系列第 24 篇

技術 Day 24: React篇 - 路由器(router) 與本篇小結

今天的主題是路由器(router)，以及關於React篇的一些總結資訊。今天並沒有把路由器整合到原先的TodoApp之中，所以沒有範例。註: 本文章同步放...

eyesofkids ‧ 2016-12-24

0 Like 0 留言 5084 瀏覽

鐵人賽 Software Development DAY 3

用設計模式與Typescript，在React異世界築起堅固保壘！系列第 3 篇

技術 [Day3] 虛實之間就用 React 築起所見即所得的世界吧！

嗨大家好我是一路爬坡的阿肥每次搭高鐵往返老家跟北部的時候，就會想著：「每次搭車可以省 3 個小時，每年搭個 20 次，這樣一年就幫我省了 60 個小時，...

Yuri Tsai ‧ 2019-09-18

0 Like 0 留言 5061 瀏覽

鐵人賽 Modern Web DAY 19

Zero to hero with React.js 系列第 19 篇

技術【Day19 React】React router 在 Single Page Application(SPA) 的應用

做 SPA 囉~~ 唉不是！此 SPA 非彼 SPA。。。。今天要學習 React router，並透過 Single Page Application(SP...

TSAI ‧ 2017-12-25

0 Like 0 留言 5042 瀏覽

鐵人賽自我挑戰組 DAY 20

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

技術 [Day 20] 用Redux Thunk 來處理非同步action

Redux Thunk的目的就是為了實踐middleware，讓action能做更多的事，想必大家都曾經看過這個錯誤，當action為非同步的時候，就會報錯，R...

Lieutenant ‧ 2020-09-20

1 Like 0 留言 4972 瀏覽

鐵人賽 Modern Web DAY 20

React.js 從【0】到【1】推坑計畫系列第 20 篇

技術【Day 20】可能不需要redux (2) - contextAPI

昨天介紹了 useReducer 的用法，但是還缺少了 global state 的機制啊？怎麼會說可能可以不需要 redux 了？今天就來介紹 context...

莫力全 Kyle Mo ‧ 2019-09-24

7 Like 0 留言 4971 瀏覽

鐵人賽 Modern Web DAY 10

一步一腳印的React旅程系列第 10 篇

技術 [筆記][React]使用React開發的思考模式(1)-記得把共同狀態提升

前面幾篇文章把React基本的用法都說完了，剩下的就是該如何將它應用在實務面中，所以接下來我會試著和各位一同做出一些小作品，但是在那之前，我們得先了解如何正確的...

神Q超人 ‧ 2018-10-15 ‧團隊IT成長營

0 Like 0 留言 4968 瀏覽

鐵人賽自我挑戰組 DAY 7

請你當我的好朋友吧！ReactJS！系列第 7 篇

技術【DAY 07】React Component也有生老病死？（上）

【前言】　　昨天講完Refs，會不會覺得目前React已經很煩了呢？希望你不會......XD 【正文】　　今天要來聊聊React Component的生命週期...

Hyora ‧ 2018-10-13

技術 Day 14：編輯的藝術 - TextInput 與 Keyboard

技術 [Day 25 - 即時天氣] 自己的鉤子自己做 - 建立 Custom Hook

技術 【Day5 React】render 一個會動的 React 日曆

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

技術 【Day01】數據輸入元件 - Button

技術 React白話文運動18-React Hook-useContext 02

技術 [Day 22 - 即時天氣] 讓白天和晚上使用不同天氣圖示

技術 #13 No-code 之旅 — 簡單快速開發漂亮的 React 元件 ft. Chakra UI

技術 【Day.08】React入門 - 環境設定 - npm、Webpack、Babel

技術 Day02 X 為什麼要在前端做效能優化？

技術 React白話文運動29-React Router 03

技術 I Want To Know React - 初探 Key

技術 Day08 - Tic Tac Toe篇：勝負判斷方法(1/2)

技術 【Day 21】React 渲染機制

技術 Day 22: React篇: TodoApp程式 + 搜尋/過濾 + 排序

技術 【Day 6】Child Component && Props

技術 Day11 X Lazy Loading

技術 【Day 10】CSS && Inline-style

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

技術 【Day.30】React進階 - Styled-Components: React的CSS解決方案 | 系列總結

技術 【Day 27 React】Redux+API 製作 meme generator—— Part1

技術 理解React的setState到底是同步還是非同步(上)

技術 【Day 9】Component Lifecycle

技術 Day 24: React篇 - 路由器(router) 與 本篇小結

技術 [Day3] 虛實之間 就用 React 築起所見即所得的世界吧！

技術 【Day19 React】React router 在 Single Page Application(SPA) 的應用

技術 [Day 20] 用Redux Thunk 來處理非同步action

技術 【Day 20】可能不需要redux (2) - contextAPI

技術 [筆記][React]使用React開發的思考模式(1)-記得把共同狀態提升

技術 【DAY 07】React Component也有生老病死？（上）

標記使用者

技術【Day5 React】render 一個會動的 React 日曆

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

技術【Day01】數據輸入元件 - Button

技術【Day.08】React入門 - 環境設定 - npm、Webpack、Babel

技術【Day 21】React 渲染機制

技術【Day 6】Child Component && Props

技術【Day 10】CSS && Inline-style

技術【Day.30】React進階 - Styled-Components: React的CSS解決方案 | 系列總結

技術【Day 27 React】Redux+API 製作 meme generator—— Part1

技術理解React的setState到底是同步還是非同步(上)

技術【Day 9】Component Lifecycle

技術 Day 24: React篇 - 路由器(router) 與本篇小結

技術 [Day3] 虛實之間就用 React 築起所見即所得的世界吧！

技術【Day19 React】React router 在 Single Page Application(SPA) 的應用

技術【Day 20】可能不需要redux (2) - contextAPI

技術【DAY 07】React Component也有生老病死？（上）