Rastreador de COVID-19 usando ReactJS y API en tiempo real

En este artículo, crearemos una aplicación web COVID-19 Tracker utilizando ReactJS y una API en tiempo real . En esta aplicación web o sitio web, cuando el usuario ingrese el nombre del país, se mostrará la cantidad de casos activos, casos recuperados, casos de hoy, etc.

Requisitos previos:

• JavaScript básico como funciones, tipos de variables, objetos, etc.
• Configuración de desarrollo de ReactJS para desarrollo web.
• Hooks de ReactJS como useState Hook y useEffect Hook.
• Conocimiento de APIs para obtener datos en tiempo real.
• Propiedades básicas de CSS para dar estilo y diseño a la aplicación web.

Acercarse:

• Configure el entorno de desarrollo, instale todas las dependencias necesarias.
• En el archivo App.js, cree e inicialice un componente que se usa para contener el código de la aplicación web.
• En ese archivo JavaScript, cree un formulario para tomar la entrada del usuario y obtenga y muestre los detalles usando la API en tiempo real y reaccione useState Hook y useEffect Hook .
• Utilice CSS para diseñar el archivo del componente e importe el archivo CSS en el archivo del componente.

Nota: Consulte el artículo Configuración de ReactJS para configurar el entorno de desarrollo.

A continuación se muestra la implementación paso a paso del enfoque anterior.

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

cd foldername

En esa carpeta creada, vaya a la carpeta src y elimine App.test.js, logo.svg y setupTests.js porque estos archivos no son necesarios en este proyecto y agregue los archivos de componentes utilizados para contener el código de la aplicación. El nombre de nuestro componente es CovidData y el nombre del archivo es CovidData.js y para los estilos agregue el archivo CSS CovidData.css .

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Paso 3: ahora, en App.js , crearemos el archivo del componente, que contendrá el código de la aplicación.

Aplicación.js

import "./App.css";
import CovidData from "./CovidData";
  
function App() {
  return <div className="App">
    <CovidData/>
  </div>;
}
  
export default App;

Nota: Nuestro nombre de componente es CovidData y hemos importado este archivo de componente en App.js.

Paso 4: en el archivo CovidData.js, crearemos el formulario para tomar la entrada y cuando se envíe el formulario, buscaremos los datos de la API con la ayuda de useEffect Hook y estableceremos la búsqueda en los objetos variables usando useState Hook. Cuando se recuperan los datos, pase los objetos variables usando la expresión JSX para mostrar los datos. Para obtener datos, API en tiempo real, hemos utilizado la API «https://disease.sh/v3/covid-19/countries».

CovidData.js

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 (
    <div className="covidData">
      <h1>COVID-19 CASES COUNTRY WISE</h1>
      <div className="covidData__input">
        <form onSubmit={handleSubmit}>
          {/* input county name */}
          <input onChange={handleSearch} placeholder="Enter Country Name" />
          <br />
          <button type="submit">Search</button>
        </form>
      </div>
  
      {/* Showing the details of the country */}
      <div className="covidData__country__info">
        <p>Country Name : {country} </p>
  
        <p>Cases : {cases}</p>
  
        <p>Deaths : {deaths}</p>
  
        <p>Recovered : {recovered}</p>
  
        <p>Cases Today : {todayCases}</p>
  
        <p>Deaths Today : {deathCases}</p>
  
        <p>Recovered Today : {recoveredCases}</p>
      </div>
    </div>
  );
}
  
export default CovidData;

Paso 5: Para los estilos, hemos utilizado propiedades básicas de CSS como la alineación, el estilo de fuente, etc.

CovidData.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);
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: