Complete Tutorial - Using Covid-19 data to create a react application
A complete tutorial using Covid-19 data to create a react application. For this application we retrieve data from the John Hopkins GitHub repository. The data is in a CSV(Comma separated value) format. The following node modules are used: bootstrap, react-chart-js2, chart.js and axios.
If you enjoy my video please Subscribe, Like and Share.
Code repository on Github.
https://github.com/CodingWith-Adam/Co...
Code snippets for the tutorial
Format a number with commas
numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
Split on comma ignoring commas in quotes
const row = rows[i].split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/); //splitting on comma.
Thread.sleep trick(can't use angle brackets in youtube descriptions)
await new Promise( function(x){setTimeout(x,1000);});
Links
Johns Hopkins Github:
https://github.com/CSSEGISandData/COV...
Link to data used in the application:
https://raw.githubusercontent.com/CSS...
Bootstrap
https://getbootstrap.com/
React Chart JS
https://github.com/jerairrest/react-c...
Chart JS
https://www.chartjs.org/
Visual Studio Code extensions for react
Auto Import - ES6, TS, JSX, TSX
Prettier - Code formatter
Simple React Snippets
Concepts used:
Fetching data
Components
Bootstrap Table
React events
Charts with ChartJS
Stateful components
Stateless components
Conditional Rendering
State
JSX
console.table (Wicked cool)