iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

用React刻自己的投資Dashboard 系列

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

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

用React刻自己的投資Dashboard Day1 - 前言

tags: 2021鐵人賽 React 系列文想法來源 因為筆者本身在金融業工作,日常生活中時常關注一些投資相關的數據,例如:總體經濟數據、個股財務報告、加密貨...

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

用React刻自己的投資Dashboard Day2 - 網站Wireframe設計

tags: 2021鐵人賽 React 投資Dashboard內容設計 要實際動手製作wireframe之前,先來規劃一下圖表的內容有什麼,一般來說,投資相關的...

2021-09-17 ‧ 由 Sean Liu 分享
DAY 3

用React刻自己的投資Dashboard Day3 - React專案初始架構

tags: 2021鐵人賽 React 使用 Creat react app 對於React的初學者來說,create react app是最好的朋友,可以快速...

2021-09-18 ‧ 由 Sean Liu 分享
DAY 4

用React刻自己的投資Dashboard Day4 - highcharts製作線圖

tags: 2021鐵人賽 React Javascript繪圖套件 在搜尋chart library的時候,發現JS可以用的library很多,包含 D3.j...

2021-09-19 ‧ 由 Sean Liu 分享
DAY 5

用React刻自己的投資Dashboard Day5 - 多張圖表渲染(Rendering lists)

tags: 2021鐵人賽 React 上一篇只畫了一張圖表,投資怎麼可能只需要看一張圖呢?這邊就再加上兩張圖來看看吧! 更改資料放置位置 專案架構圖如下 這...

2021-09-20 ‧ 由 Sean Liu 分享
DAY 6

用React刻自己的投資Dashboard Day6 - 建立圖表區元件,串接API取得數據

tags: 2021鐵人賽 React 上一篇使用靜態的資料,將多張數據資料表畫成線圖呈現在網頁上,因為這個資料來源是JSON檔,所以是相對難更新的,因此本篇要...

2021-09-21 ‧ 由 Sean Liu 分享
DAY 7

用React刻自己的投資Dashboard Day7 - CORS與Proxy Server

tags: 2021鐵人賽 React 上一篇在串接API的時候有遇到一個前端蠻常見的問題,跨來源資源共用(CORS)被阻擋,錯誤代碼如下: 打開瀏覽器的con...

2021-09-22 ‧ 由 Sean Liu 分享
DAY 8

用React刻自己的投資Dashboard Day8 - useState hook

tags: 2021鐵人賽 React 在Card元件中有使用到useState,是React中一個蠻重要的hook,是一個非常強大的功能,看起來跟用起來都非常...

2021-09-23 ‧ 由 Sean Liu 分享
DAY 9

用React刻自己的投資Dashboard Day9 - useEffect hook

tags: 2021鐵人賽 React 既上一篇介紹完useState hook後,本篇就來介紹Day6也有用到的useEffect hook,在React官網...

2021-09-24 ‧ 由 Sean Liu 分享
DAY 10

用React刻自己的投資Dashboard Day10 - 用useCallback hook幫你記住函式

tags: 2021鐵人賽 React 在Day9說明了useEffect的用法,不過其實當Card.js渲染時,會發現console有錯誤訊息如下: src...

2021-09-25 ‧ 由 Sean Liu 分享