使用 ReactJS 和实时 API 的 COVID-19 跟踪器

在本文中，我们将使用 ReactJS 和实时 API 创建一个 Web 应用程序 COVID-19 Tracker。在这个网页应用程序或网站中，当用户输入国家名称时，会显示活跃病例数、治愈病例数、今日病例数等。

先决条件：

• 基本的 JavaScript，例如函数、变量类型、对象等。
• 用于 Web 开发的 ReactJS 开发设置。
• ReactJS Hooks，例如 useState Hook 和 useEffect Hook。
• 获取实时数据的 API 知识。
• 用于 Web 应用程序样式和设计的基本 CSS 属性。

方法：

• 设置开发环境，安装所有必需的依赖项。
• 在 App.js 文件中，创建并初始化一个用于保存 Web 应用程序代码的组件。
• 在该 JavaScript 文件中，创建一个表单以获取用户的输入，并使用实时 API 获取并显示详细信息，并对 useState Hook 和 useEffect Hook 做出反应。
• 使用 CSS 来设置组件文件的样式，并在组件文件中导入 CSS 文件。

注意：请参考 ReactJS 设置文章来设置开发环境。

以下是上述方法的分步实施。

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

在创建的文件夹中，转到src文件夹并删除 App.test.js、logo.svg 和 setupTests.js，因为此项目不需要这些文件，并添加用于保存应用程序代码的组件文件。我们的组件名称是 CovidData，文件名称是CovidData.js ，对于样式添加 CSS 文件CovidData.css 。

项目结构：它将如下所示。

项目结构

第 3 步：现在，在App.js中，我们将创建组件文件，该文件将保存应用程序的代码。

应用程序.js

Javascript

import "./App.css";
import CovidData from "./CovidData";
  
function App() {
  return 

    
  
;
}
  
export default App;

注意：我们的组件名称是 CovidData，我们已经在 App.js 中导入了这个组件文件。

第 4 步：在 CovidData.js 文件中，我们将创建表单以获取输入，当表单提交时，我们将在 useEffect Hook 的帮助下从 API 获取数据，并使用在变量对象中设置获取的数据使用状态挂钩。获取数据后，使用 JSX 表达式传递变量对象以显示数据。为了获取数据，我们使用了“https://disease.sh/v3/covid-19/countries” API 的实时 API。

CovidData.js

Javascript

import React, { useEffect, useState } from "react";
import "./CovidData.css";
  
function CovidData() {
  const [country, setCountry] = useState("");
  const [cases, setCases] = useState("");
  const [recovered, setRecovered] = useState("");
  const [deaths, setDeaths] = useState("");
  const [todayCases, setTodayCases] = useState("");
  const [deathCases, setDeathCases] = useState("");
  const [recoveredCases, setRecoveredCases] = useState("");
  const [userInput, setUserInput] = useState("");
  
  useEffect(() => {
    fetch("https://disease.sh/v3/covid-19/countries")
      .then((res) => res.json())
      .then((data) => {
        setData(data);
      });
  }, []);
  
  const setData = ({
    country,
    cases,
    deaths,
    recovered,
    todayCases,
    todayDeaths,
    todayRecovered,
  }) => {
    setCountry(country);
    setCases(cases);
    setRecovered(recovered);
    setDeaths(deaths);
    setTodayCases(todayCases);
    setDeathCases(todayDeaths);
    setRecoveredCases(todayRecovered);
  };
  
  const handleSearch = (e) => {
    setUserInput(e.target.value);
  };
  const handleSubmit = (props) => {
    props.preventDefault();
    fetch(`https://disease.sh/v3/covid-19/countries/${userInput}`)
      .then((res) => res.json())
      .then((data) => {
        setData(data);
      });
  };
  
  return (
    

      
COVID-19 CASES COUNTRY WISE
      

        

          {/* input county name */}
          
          

          Search
        
      
  
      {/* Showing the details of the country */}
      

        
Country Name : {country} 
  
        
Cases : {cases}
  
        
Deaths : {deaths}
  
        
Recovered : {recovered}
  
        
Cases Today : {todayCases}
  
        
Deaths Today : {deathCases}
  
        
Recovered Today : {recoveredCases}
      
    
  );
}
  
export default CovidData;

第 5 步：对于样式，我们使用了基本的 CSS 属性，例如对齐方式、字体样式等。

CovidData.css

CSS

body {
  background-color: rgb(102, 226, 102);
}
.covidData {
  background-color: green;
  width: 30%;
  margin: auto;
  margin-top: 15px;
  border-radius: 6px;
  padding: 10px;
}
  
/* input stylings */
  
.covidData__form {
  padding: 10px;
  margin: 20px;
}
.covidData__input input {
  width: 400px;
  height: 50px;
  text-align: center;
  font-size: 25px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.covidData__input button {
  width: 80px;
  height: 50px;
  margin-top: 10px;
  background-color: black;
  color: white;
  font-size: 20px;
  border-radius: 10px;
  border: none;
  box-shadow: 5px 5px 5px rgb(71, 67, 67);
  cursor: pointer;
}
  
/* detail stylings */
  
.covidData__country__info {
  font-size: 20px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  padding-left: 10px;
  background-color: white;
  margin-top: 20px;
  padding: 2px;
  text-shadow: 1px 1px 1px rgb(71, 67, 67);
  box-shadow: 5px 5px 5px rgb(71, 67, 67);
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：