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)