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

Coronavirus
Photo by Fusion Medical Animation on Unsplash

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

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Big Zude

Big Zude

Frontend Engineer | UI Designer | Photographer