Fetching Covid-19 Data using React.js, Material UI, and Material-Table Part 1
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
When the create-react-app is done, your folder structure should look like this
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">”
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
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.
Our focus is the Card and WorldTable component, with that said copy and paste the Navbar component code snippet below.
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