Fetching Covid-19 Data using React.js, Material UI, and Material-Table Part 1

3 min readMar 21, 2020

With the rise of coronavirus infections around the world, it is good for the public to have the right information which can help governments make informed decisions that help protect the health of its people. I created a simple react.js project that shows the total cases, deaths, and patients recovered from the silent killer. I am using the NovelCovid API to fetch the data for this project.

This is what we are going to develop, interesting and simple right!

This is a two-part series, part one focuses on setting up our development environment by installing the necessary packages for our simple project.

Let’s get to work! We are going to install create react app using a text editor of your choice (I use Visual studio code).

npx create-react-app my-app
cd my-app
npm start

When the create-react-app is done, your folder structure should look like this

my-app/
 README.md
 node_modules/
 package.json
 public/
    index.html
    favicon.ico
 src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

Make sure you have installed on your PC

Node download here
Git download here

Nice work! now let’s install material ui

// with npm
npm install @material-ui/core// with yarn
yarn add @material-ui/core

Awesome! Time to install material-table

// with npm
npm install material-table --save// with yarn
yarn add material-table

Add the link below to your <head> in index.html that is found in the public directory so that icons on the material-table can be displayed.
“<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons">”

index.html

Go to the src directory and open the app.js. Then remove everything between the div tag and add a <p>. Type npm start in the terminal to run the app

App.js

Great! now create a directory called components inside the src directory, this directory will contain the components of our simple project. Create three scripts inside the components directory called Navbar.js, Card.js and WorldTable.js or you name them whatever you like…. Your folder structure should look like the snippet below.

src/
 components
   Navbar.js
   Card.js
   WorldTable.js
 App.css
 App.js
 App.test.js
 index.css
 index.js 
 logo.svg

Our focus is the Card and WorldTable component, with that said copy and paste the Navbar component code snippet below.

Navbar.js

Before we jump into data fetching! Let’s take time to learn about the State, Components, Fetch API and Effect Hook. The concepts below will help you understand the next part better.

Components read more here
State read more here
fetch API read more here
Effect Hook read more here.
Material UI read more here
material-table read more here

Make sure to use the resources above….

In part two we dive deep into data fetching. Thanks!

Click here for Part 2

Visit Project repo here https://github.com/Big-Zude/Covid-19-Statistics

Fetching Covid-19 Data using React.js, Material UI, and Material-Table Part 1

Written by Big Zude