fbpx

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

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

從這 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 開發的完全初學者到希望接案專家。

講師簡介

react.school _ 增強的 JavaScript 專案( 更多講師課程介紹 )

開始工作吧。 我們相信以專案為中心的 web 開發是為軟體開發職涯做準備的最好方式。 我們的課程給你一個 React 開發人員的日常職責的核心洞見。

React 就是未來。 在一項超過20000名開發人員參與的調查中,《 JavaScript 2018 現況》發現,65% 的開發人員”曾經使用過 React 並且願意再次使用它”,這一數字在2017年為58% 。

我們是首席軟體工程師,擁有幾十年在部署和維護 web 應用程式的經驗。 我們在專案中使用 React,提供高效能的資料視覺化應用程式,高階的單網頁應用程式,以及所有的使用者介面給客戶。

我們提供優質的軟體專案建立實際的職涯工作流程,具有專門的支援和完整的原始碼參考。

英文字幕:有

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

報名參加課程 | 更新 coupon code

Sponsored by Udemy


🛫使用關鍵字連結獲得更多線上學習資訊?請參考這個網頁說明


也許你會有興趣


追蹤 Soft & Share

幫我們個小忙!

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

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: