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

0 Like 0 留言 603 瀏覽

技術 React 清單的 Key

挑戰 React 第二十篇上一篇提到，若要渲染清單少了 key 會出現以下截圖提示訊息。加入 unique key，即可解決上面截圖的問題。 const...

tom_yukuan ‧ 2020-04-11

2 Like 0 留言 1294 瀏覽

技術 React 學習筆記_16(React Toastify彈出組件)

React Toastify彈出組件簡介使用React-Toastify來達成簡易的彈出效果。 Step 1: Installation npm insta...

Fandix ‧ 2020-04-06

1 Like 0 留言 643 瀏覽

技術 React 學習筆記_15(React 圈圈叉叉練習 - 2)

前言上一篇已經完成了圈圈叉叉的遊戲，現在要加入"回到上一步"的功能。上一篇的程式中使用了slice()這個方法來複製squares，其...

Fandix ‧ 2020-04-04

0 Like 0 留言 706 瀏覽

技術 React 的清單渲染與適時拆分組件

挑戰 React 第十九篇畫面顯示目標製作一個藥局清單。 Map() function map() 方法會建立一個新的陣列，其內容為原陣列的每一個元素經...

tom_yukuan ‧ 2020-04-04

0 Like 0 留言 540 瀏覽

技術 React 官方文檔所教的條件 Render

挑戰 React 第十八篇新年快樂！！這是今年的第一篇，之後大概是一週新增一篇文章的節奏。目標若 isLogin 狀態為登入，頁面顯示歡迎使用者 Tom...

tom_yukuan ‧ 2020-01-06

1 Like 0 留言 1171 瀏覽

技術 React 父組件傳遞 methods props 給子組件

挑戰 React 第十七篇在 React 第十一篇了解透過 element 傳遞 props，此篇要介紹要寫傳父組件裡的方法給子組件。目標子組件按了按鈕...

tom_yukuan ‧ 2019-12-22

2 Like 2 留言 630 瀏覽

技術 React 的事件處理與四種方法 (下)

挑戰 React 第十六篇上篇講解找不到綁定的this，因此 setState 才會 undefined，此篇會講解如何解決上述狀況的四種方式。目標按了按...

tom_yukuan ‧ 2019-12-18

2 Like 0 留言 702 瀏覽

技術 React 的事件處理與四種方法 (上)

挑戰 React 第十五篇 javascript 與 jsx 事件處理差別 Javascript Jsx 寫法小寫 onclick 小駝峰 o...

tom_yukuan ‧ 2019-12-16

2 Like 0 留言 571 瀏覽

技術 React 中 setState 的踩雷與解決方式

挑戰 React 第十四篇上篇我們了解 setState 為非同步，而此篇將會舉一個setState踩雷的例子並且告訴大家如何改進。預先理解準備上篇程式碼...

tom_yukuan ‧ 2019-12-14

2 Like 1 留言 1394 瀏覽

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

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

tom_yukuan ‧ 2019-12-13

0 Like 0 留言 593 瀏覽

技術了解 React state 與簡單實作

挑戰 React 第十二篇什麼是 React state? 我們上篇有提到，可使用 props 渲染我們要的資訊，但props是唯讀的，那萬一我要在 comp...

tom_yukuan ‧ 2019-11-25

0 Like 0 留言 835 瀏覽

技術了解 React Props 與簡單實作

挑戰 React 第十一篇什麼是 props 大家還記得我們前幾篇說過 React Component嗎？ Component 可為function Comp...

tom_yukuan ‧ 2019-11-24

0 Like 0 留言 548 瀏覽

技術淺談 React Class Component 與小小實作

挑戰 React 第十篇什麼是 Class Component? 與上篇提到的 function Component 的前三點敘述流程幾乎一樣，只是把 fu...

tom_yukuan ‧ 2019-11-23

0 Like 0 留言 649 瀏覽

技術了解 React function Component 與實作

挑戰 React 第九篇什麼是 Function Component? 上篇文章我們了解Component的概念就是UI的其中一個部分，也可以重複利用。而以...

tom_yukuan ‧ 2019-11-23

1 Like 0 留言 974 瀏覽

技術什麼是 React Component?

挑戰 React 第八篇目錄什麼是組件? 如何用組件達成程式碼重複使用? 兩種組件種類學習心得什麼是組件? Component，中文...

tom_yukuan ‧ 2019-11-22

1 Like 0 留言 983 瀏覽

技術介紹 create-react-app 建立出來的資料夾結構（下）- 原來只有一個html檔案

挑戰 React 第七篇上篇了解了package.json，此篇會介紹剩下來的檔案與資料夾。資料夾結構介紹檔案用語法糖 create-react-ap...

tom_yukuan ‧ 2019-11-21

0 Like 0 留言 645 瀏覽

技術介紹 create-react-app 建立出來的資料夾結構（上）- package.json 作用是什麼？

挑戰 React 第六篇前情提要：若還沒有嘗試用 create-react-app，建議先去看安裝React 第三篇文章。資料夾結構介紹若第一次寫Reac...

tom_yukuan ‧ 2019-11-14

0 Like 0 留言 975 瀏覽

技術照著React官方網站學習JSX

挑戰 React 第五篇實作範例在了解什麼是jsx前，我們先來看實作範例，以下有兩個index.html檔案的程式碼，差異在於有沒有編譯成瀏覽器看得懂得ja...

tom_yukuan ‧ 2019-11-07

0 Like 0 留言 698 瀏覽

技術看官方文檔安裝 React之選擇方式竟然這麼多 (下) - 學習高手安裝自己要的東西

挑戰 React 第四篇講完透過CDN連結的方式載入React的函式庫與Create React App快速安裝，此篇會寫最後一點高手才用的安裝方式 =&gt...

tom_yukuan ‧ 2019-11-03

0 Like 0 留言 506 瀏覽

技術看官方文檔安裝 React之選擇方式竟然這麼多 (中)：快速建立React專案的語法糖?

挑戰 React 第三篇上一篇講完透過CDN連結的方式載入React的函式庫，此篇會寫第二點 Create React App。安裝方式 CDN 連結 (...

tom_yukuan ‧ 2019-10-31

8 Like 12 留言 4595 瀏覽

鐵人賽 Modern Web DAY 30

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

達標好文技術 [Day 30 - 臺灣好天氣] 發布上 Github Pages 不夠，還要變成手機 App！還有那些重要但故意先不告訴你的內容

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

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

1 Like 1 留言 1263 瀏覽

鐵人賽 Modern Web DAY 30

Spring Boot and React - 前後端 30 天分手日記系列第 30 篇

技術 Day 30 - MySQL Trigger MD5加密 & 同步Fetch API

上一章 Day 29 - React Tree Graph 樹狀結構圖在這隱私權高漲的年代, 所有個資與重要資訊都必須加密之前有寫過一篇用Java做MD5加...

Aiden ‧ 2019-10-16

4 Like 1 留言 8439 瀏覽

鐵人賽 Modern Web DAY 29

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

技術 [Day 29 - 即時天氣] 寫網頁就是要炫耀啊，不然要幹麻？發布上 Github Pages 吧！

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

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

1 Like 0 留言 1245 瀏覽

鐵人賽 Modern Web DAY 29

Spring Boot and React - 前後端 30 天分手日記系列第 29 篇

技術 Day 29 - React Tree Graph 樹狀結構圖

上一章 Day 28 - React And BootStrap 卡片式資訊 Card 樹狀結構圖是許多網站都會用到的東西大部分是資料夾結構, 抽屜式結構.....

Aiden ‧ 2019-10-15

1 Like 1 留言 412 瀏覽

鐵人賽 Software Development DAY 30

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

技術 [Day30] 總而言之融會貫通最重要

嗨大家好我是一路爬坡的阿肥雖然是第一次參加有很多不足的地方但是謝謝有訂閱這個系列文章的你們讓阿肥有繼續寫下去的動力之後還有機會的話就繼續再來看我...

YURI ‧ 2019-10-15

3 Like 0 留言 2537 瀏覽

鐵人賽 Modern Web DAY 28

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

技術 [Day 28 - 即時天氣] 保存與更新使用者設定的地區資訊 - localStorage 與 useEffect 的搭配使用

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

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

0 Like 0 留言 537 瀏覽

鐵人賽 Software Development DAY 29

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

技術 [Day29] 操作大量資料的好幫手 ─ 迭代器(Iterator) <實作篇>

嗨大家好我是一路爬坡的阿肥昨天晚上搭立榮的飛機回來真心覺得座位大還有飲料可以喝而且只要40幾分就到了已經回不去坐船省錢的堅持啦顧客的資訊先建...

YURI ‧ 2019-10-14

2 Like 1 留言 1070 瀏覽

鐵人賽 Modern Web DAY 30

被 React react 的後端工程師系列第 30 篇

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

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

Lemon ‧ 2019-10-14

0 Like 0 留言 962 瀏覽

鐵人賽 Modern Web DAY 28

Spring Boot and React - 前後端 30 天分手日記系列第 28 篇

技術 Day 28 - React And BootStrap 卡片式資訊 Card

Day 27 - React And BootStrap 動態橫幅廣告 Carousel 上一章做了橫幅廣告現在加入卡片式資訊, 我們一樣使用Reactstr...

Aiden ‧ 2019-10-14

2 Like 0 留言 4042 瀏覽

鐵人賽 Modern Web DAY 27

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

技術 [Day 27 - 即時天氣] React 中的表單處理（Controlled vs Uncontrolled）以及 useRef 的使用

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

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

技術 React 清單的 Key

技術 React 學習筆記_16(React Toastify彈出組件)

技術 React 學習筆記_15(React 圈圈叉叉練習 - 2)

技術 React 的清單渲染與適時拆分組件

技術 React 官方文檔所教的條件 Render

技術 React 父組件傳遞 methods props 給子組件

技術 React 的事件處理與四種方法 (下)

技術 React 的事件處理與四種方法 (上)

技術 React 中 setState 的踩雷與解決方式

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

技術 了解 React state 與簡單實作

技術 了解 React Props 與簡單實作

技術 淺談 React Class Component 與小小實作

技術 了解 React function Component 與實作

技術 什麼是 React Component?

技術 介紹 create-react-app 建立出來的資料夾結構 （下）- 原來只有一個html檔案

技術 介紹 create-react-app 建立出來的資料夾結構 （上）- package.json 作用是什麼？

技術 照著React官方網站學習JSX

技術 看官方文檔安裝 React之選擇方式竟然這麼多 (下) - 學習高手安裝自己要的東西

技術 看官方文檔安裝 React之選擇方式竟然這麼多 (中)：快速建立React專案的語法糖?

達標好文 技術 [Day 30 - 臺灣好天氣] 發布上 Github Pages 不夠，還要變成手機 App！還有那些重要但故意先不告訴你的內容

技術 Day 30 - MySQL Trigger MD5加密 & 同步Fetch API

技術 [Day 29 - 即時天氣] 寫網頁就是要炫耀啊，不然要幹麻？發布上 Github Pages 吧！

技術 Day 29 - React Tree Graph 樹狀結構圖

技術 [Day30] 總而言之 融會貫通最重要

技術 [Day 28 - 即時天氣] 保存與更新使用者設定的地區資訊 - localStorage 與 useEffect 的搭配使用

技術 [Day29] 操作大量資料的好幫手 ─ 迭代器(Iterator) <實作篇>

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

技術 Day 28 - React And BootStrap 卡片式資訊 Card

技術 [Day 27 - 即時天氣] React 中的表單處理（Controlled vs Uncontrolled）以及 useRef 的使用

At

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

技術了解 React state 與簡單實作

技術了解 React Props 與簡單實作

技術淺談 React Class Component 與小小實作

技術了解 React function Component 與實作

技術什麼是 React Component?

技術介紹 create-react-app 建立出來的資料夾結構（下）- 原來只有一個html檔案

技術介紹 create-react-app 建立出來的資料夾結構（上）- package.json 作用是什麼？

技術照著React官方網站學習JSX

技術看官方文檔安裝 React之選擇方式竟然這麼多 (下) - 學習高手安裝自己要的東西

技術看官方文檔安裝 React之選擇方式竟然這麼多 (中)：快速建立React專案的語法糖?

達標好文技術 [Day 30 - 臺灣好天氣] 發布上 Github Pages 不夠，還要變成手機 App！還有那些重要但故意先不告訴你的內容

技術 [Day30] 總而言之融會貫通最重要