fbpx

React 資料視覺化-建立一個加密貨幣儀表板

課程簡介

學習如何使用 React HighCharts,風格化的元件和 CSS Grid建立漂亮快速的儀表板

課程介紹:English 简中

從這 3.5 小時的課程,你會學到

  • 快速 React 應用程式開發
  • 風格化的元件和動態 CSS
  • 用於繪製歷史數據圖表的 HighCharts
  • 用於快速佈局的 CSS Grid
  • 使用 CryptoCompare API 獲取實際定價資料
  • 日期操做的時刻
  • 用於函數程式設計(functional programming)的 Lodash
  • Async / Await
  • 建立一個完整的專案
  • 使用 localStorage 儲存最喜歡的硬幣

要求

  • 一臺可連線網際網路的電腦

課程說明

用這個專業的 React 課程建立一個完整的加密貨幣儀表板!

  • 設定帶有介紹問候的頁面
  • 在第一次訪問時問候使用者,要求他們選擇他們的最愛
  • 提供預設的5個貨幣作為最愛 & 所有貨幣的完整列表
  • 用模糊搜尋搜尋貨幣
  • 懸停( Hovering )和選擇貨幣
  • 在收藏夾中新增 / 刪除貨幣
  • 取消所選的貨幣
  • 確認喜歡的貨幣
  • 為使用者記住這些設定
  • 生成儀表盤價格和歷史資料
  • 儀表板
  • 資料從記住的收藏夾中初始化,或者轉發到設定頁面
  • 顯示 5 個主要卡片為前 5 個最愛和簡潔的卡片為下五個
  • 在當前最喜愛的符號上呈現10個歷史點的線形圖
  • 選擇貨幣更改和重新獲取資料,記住當前最喜歡的貨幣
  • 選擇呈現歷史點:使用日/週/月
  • 在圖表旁邊顯示貨幣的名稱和影象
  • 額外免費課程: 主題( Themes )
  • 輕鬆地配置應用程式的主題是 dark 的或者是 light

React 不僅僅針對業界內的專家,事實上初學者應該從 React 開始,因為它確實是建構應用程式最簡單的方式。

create-react-app 專案是一個驚人的模板,可以快速建構應用程式。 你不再需要強調 Webpack,建構工具等等。 這些都是在你啟動專案唯一需要的:create-react-app。

每一行程式碼都會解釋,因為專案是從頭開始的,沒有跳過任何步驟或浪費了時間。

你將看到如何快速完成風格化元件,最新進展的 CSS-in-JS 範例。

使用 HighCharts,我們將向您展示如何執行HighCharts 與 React,並定製主題以適應我們的專案。

對我們最喜歡的資料進行複雜的修改需要對狀態流的嚴格瞭解,因此我們必須注意解釋如何維護我們的 React 狀態的每一個方面是重要的,並且只建立了整潔的變數。

與所有開發人員一樣,我們也會遇到錯誤,所以你將會看到這些錯誤是如何被修復的,以及將來如何避免。 我們不只是貼上程式碼,我們從頭開始重建,就像你一樣。

在所有的螢幕共享中都包含了 Webkit Inspector,所以你可以看到我們是如何除錯的,因為我們在編寫程式碼時應該經常進行除錯、日誌記錄和檢查。

如果你有任何問題,請伸出手來。 我們很樂意幫助你們回答與你們的課程學習有關的所有問題。

祝你在CryptoDash上有好運,我知道你會喜歡這個專案。

目標受眾

  • 從 Web 開發的完全初學者到希望接案專家。

講師簡介

Digital Hermits   遠端軟體開發工程師

為金融軟體公司部署和維護 Web 應用程式方面有著數十年經驗的開發者,重點關注網頁應用的資料視覺化,以及像 Node、 MongoDB 和 Heroku 這樣的後端技術。 我們喜歡充分利用 JavaScript 開源生態系統,因為它使我們能夠快速構建應用程式,從而專注於開發產品。

英文字幕:有

  • 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

優惠資訊

如何購買這門課程比較划算?可以參考課程合購優惠方案


報名參加課程

Sponsored by Udemy

也許你會有興趣

 歡迎使用 e-mail 訂閱 Soft & Share 

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: