JS Mastery

Published 4/5/2020

I’m interested in the graph and the animation on the numbers.

Data Source (API): covid19.mathdro.id/api

Project Boilerplate: Create-React-App

Dependencies: axios react-chartjs-2 react-countup @material-ui/core

CSS Technique: CSS Modules

Creates an “components/index.js” file to handle all imports to help keep project cleaner.

Can drop the “/index.js” portion of path when importing

React Count Up – 36m

<CountUp 
  start={0}
  end={confirmed.value}
  duration={2.5}
  separator=","
/>

122k weekly downloads as of 8/20/21

Multiple ClassNames for CSS Modules

import cx from classnames

classNames={cx(styles.card, styles.infected)}

Chart – 48m

Need “charts.js” installed to have “react-chartjs-2” to run

import {useState, useEffect} from 'react'
import {Line, Bar} from "react-chartjs-2"

const Chart = () => {

const [dailyData, setDailyData] = useState[])


useEffect()


const lineChart = (

)

return(
  <Line 
    data={(
    
    }}
  />
)


}


export default Chart

Input

from m-ui, NativeSelect, FormControl

Bar Chart – 1hr 17m