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