COVID-19 Tracker using ReactJS and real time API
In this article, we will create a web application COVID-19 Tracker using ReactJS and real-time API. In this web application or website, when the user enters the name of the country, it will display the number of active cases, recovered cases, today’s cases, etc.
- ReactJS development setup for web development.
- ReactJS Hooks such as useState Hook and useEffect Hook.
- APIs knowledge to fetch real-time data.
- Basic CSS properties for styling and designing for the web application.
- Set up the development environment, install all the required dependencies.
- In the App.js file, create and initialise a component that is used to hold the code of the web application.
- Use CSS for stylings of the component file and import the CSS file in the component file.
Note: Please refer to the ReactJS Setting up article to set up the development environment.
Below is the step by the step implementation of the above approach.
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
In that created folder go to src folder and delete App.test.js, logo.svg and setupTests.js because these files are not required in this project and add component files used to hold the code for the application. Our component name is CovidData and file name is CovidData.js and for stylings add CSS file CovidData.css.
Project Structure: It will look like the following.
Step 3: Now, in App.js, we will create the component file, that will hold the code for the application.
Note: Our component name is CovidData and we have imported this component file in App.js.
Step 4: In the CovidData.js file, we will create the form to take the input and when the form is submitted then we will fetch the data from the API with the help of useEffect Hook and set the fetched the in the variable objects using useState Hook. When the data is fetched then pass the variable objects using JSX expression to display the data. To get data, real-time API we have used the “https://disease.sh/v3/covid-19/countries” API.
Step 5: For stylings, we have used basic CSS properties such as alignment, font style, etc.
Step to Run Application: Run the application using the following command from the root directory of the project:
Output: Now open your browser and go to http://localhost:3000/, you will see the following output: