¿Cómo mostrar los valores de la base de datos en tiempo real sin actualizar la página web?

En este artículo, veremos cómo mostrar valores de una base de datos sin actualizar la página web. Digamos que en nuestra aplicación web, tenemos un botón después de hacer clic en ese botón, una función se dispara y obtiene datos de la base de datos. O en la aplicación web React, podemos usar ganchos que obtienen datos automáticamente cada vez que se abre la página, por ejemplo, podemos usar el gancho de efecto de React.

Creación de la aplicación React: 

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

npx create-react-app app-name 

• Paso 2: después de crear la carpeta de su proyecto (es decir, mi aplicación), muévase a ella usando el siguiente comando:

cd app-name

Estructura del proyecto: Se verá así.

Uso de ganchos useEffect : cómo obtener datos cuando se monta un componente, cómo ejecutar el código cuando cambia el estado o cuando cambia un accesorio, cómo configurar temporizadores o intervalos. El useEffect se ejecuta después de cada procesamiento (de forma predeterminada) y, opcionalmente, puede limpiarse por sí mismo antes de volver a ejecutarse. Entonces, al usar este gancho, podemos mostrar valores de la base de datos en tiempo real sin recargar la página web. 

Sintaxis: La siguiente es la sintaxis del gancho useEffect:

useEffect(() => {
    // Your code
}, []) // Dependency-array

Obtener datos de la base de datos a través de la API: digamos que tenemos una API que se conecta desde la base de datos, aquí usamos una API aleatoria que proporciona datos ficticios. Después de hacer clic en la función handleFetchData, se obtendrán los datos y podrá verlos en su consola.

const handleFetchData = async (e) => {
  // Put the endpoint of Api
  fetch('API_URL_ENDPOINT')
    .then((resp) => resp.json())
    .then((data) => console.log(data))
    .catch((e) => console.log(e));
};

Implementación: Anote el siguiente código en el archivo respectivo.

import { useEffect, useState } from 'react';
  
function App() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    // API to fetch some dummy data
    fetch('https://reqres.in/api/users?page=2')
      .then((resp) => resp.json())
      .then((apiData) => {
        setData(apiData.data);
      });
  }, []); // Dependency-array
  
  const style = {
    padding: '5px',
    display: 'block',
    color: 'green',
    border: '1px solid black',
  };
  
  return (
    <div style={{ textAlign: 'center' }}>
      <h1>This is React WebApp </h1>
      <h5>Display values from database without reloading...</h5>
  
      {data.map((item) => {
        return (
          <span style={style} key={item.id}>
            {item.email}
          </span>
        );
      })}
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: Ejecute el siguiente comando para iniciar la aplicación:

npm start

Producción:

Nota: El enlace useEffect ejecutará automáticamente el código para obtener datos para que no tenga que volver a cargar la página una y otra vez.