iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

用React刻自己的投資Dashboard 系列

對於投資很狂熱的夥伴們,每天穿梭在股海之中,是不是為了得到最新消息,看了非常多的網站呢?本系列文章希望能夠藉由React架構,串接各種投資數據API,將散亂的投資資訊整理到一個網頁內,並藉由繪圖套件的輔助,將死板板的表格資料,做成一張又一張容易閱讀及分析的圖表,並且為每一張圖表加上使用說明書,不管是自己使用或是給別人看都非常方便,看到這邊是不是非常心動呢?開始吧,挑戰刻出屬於自己的投資Dashboard!

鐵人鍊成 | 共 30 篇文章 | 30 人訂閱 訂閱系列文 RSS系列文
DAY 11

用React刻自己的投資Dashboard Day11 - 分離UI元件與抓取數據元件

tags: 2021鐵人賽 React 本篇要將call api的功能獨立成一個元件,在架構上會更清楚的分工不同檔案的功能,之後也有可能是其他元件會呼叫api的...

2021-09-26 ‧ 由 Sean Liu 分享
DAY 12

用React刻自己的投資Dashboard Day12 - 下拉式選單篩選功能

tags: 2021鐵人賽 React 還記得這個網站有篩選圖表的功能嗎?當初畫wireframe的時候考量到未來圖表可能會越來越多,因此規劃了下拉式選單來做篩...

2021-09-27 ‧ 由 Sean Liu 分享
DAY 13

用React刻自己的投資Dashboard Day13 - 製作分頁(Pagination)功能

tags: 2021鐵人賽 React 一般的內容網站通常都會有將內容分頁或是動態讀取的功能,例如像是臉書的動態頁面,因為會不斷地有新的動態,也就是說它的資料量...

2021-09-28 ‧ 由 Sean Liu 分享
DAY 14

用React刻自己的投資Dashboard Day14 - 解決重複發送API請求的問題

tags: 2021鐵人賽 React 之前剛開始設計call api取得資料的時間點是在Card元件載入的時候才讀取,但是加上分頁功能之後,會發現一個問題,假...

2021-09-29 ‧ 由 Sean Liu 分享
DAY 15

用React刻自己的投資Dashboard Day15 - 投資Dashboard 2.0版 Wireframe

有了總體經濟的圖表之後,接下來就要來製作各國股市的資訊站,筆者最常看的就是台股的資訊,其次則是美股、英股、歐股、日股、匯率、利率...等等,想做的很多,剩下15...

2021-09-30 ‧ 由 Sean Liu 分享
DAY 16

用React刻自己的投資Dashboard Day16 - react-router-dom讓SPA也有路由

tags: 2021鐵人賽 React 前一篇提到的導覽列的各個按鈕,點擊之後會跳到不同的頁面,每個頁面都會是不同的路徑,這個功能可以使用react-route...

2021-10-01 ‧ 由 Sean Liu 分享
DAY 17

用React刻自己的投資Dashboard Day17 - Dashboard 2.0版路由功能

tags: 2021鐵人賽 React 如Day15的wireframe,為了要加上更多的功能,因此要在頂端列新增幾個按鈕,每個按鈕代表不同的路由,而不同的路由...

2021-10-02 ‧ 由 Sean Liu 分享
DAY 18

用React刻自己的投資Dashboard Day18 - 選單列active style功能

tags: 2021鐵人賽 React 上一篇將選單列做出來,並且完成點擊上方按鈕會跳轉至對應頁面的功能,不過總覺得好像少了些什麼?原來是點擊按鈕之後,按鈕的樣...

2021-10-03 ‧ 由 Sean Liu 分享
DAY 19

用React刻自己的投資Dashboard Day19 - 2.0版首頁內容設計

tags: 2021鐵人賽 React 2.0首頁想加上各國股市的最新盤勢資訊,畢竟這些資料是投資人每天都會需要看一下的,所以放在首頁會是不錯的選擇。 首頁會放...

2021-10-04 ‧ 由 Sean Liu 分享
DAY 20

用React刻自己的投資Dashboard Day20 - 首頁功能切板

tags: 2021鐵人賽 React 先從mobile版型的頁面來看,可以分為幾個部份,如下圖: 分為最上面Title、TaiwanStock、USStock...

2021-10-05 ‧ 由 Sean Liu 分享