Cómo integrar PostgreSQL con una aplicación React

En este tutorial, vamos a conectar una base de datos PostgreSQL con una aplicación React a través de una API REST. Este enfoque te permite separar el frontend (React) del backend (Node.js con PostgreSQL), lo que facilita la escalabilidad y el mantenimiento de tu aplicación.

Requisitos

Una API backend (Node.js con Express y PostgreSQL)
Un servidor PostgreSQL (puedes usar el contenedor Docker que configuramos en el paso anterior)
React instalado en tu proyecto

1. Crear una API con Node.js y Express

Primero, necesitamos una API que actúe como intermediario entre nuestra base de datos PostgreSQL y la aplicación React. Si aún no lo has hecho, crea un nuevo proyecto de Node.js e instala express y pg para trabajar con PostgreSQL.

mkdir my-api && cd my-api
npm init -y
npm install express pg cors

Luego, crea un archivo index.js y añade el siguiente código para definir el servidor básico y una ruta que obtendrá datos desde PostgreSQL:

const express = require('express');
const cors = require('cors');
const { Pool } = require('pg');

const app = express();
const pool = new Pool({
  user: 'myuser',
  host: 'localhost',
  database: 'mydatabase',
  password: 'mypassword',
  port: 5432
});

app.use(cors());
app.use(express.json());

app.get('/api/data', async (req, res) => {
  try {
    const result = await pool.query('SELECT * FROM my_table');
    res.json(result.rows);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Error al obtener datos' });
  }
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Servidor corriendo en el puerto ${PORT}`));

Este servidor escuchará peticiones GET en /api/data y devolverá datos de la tabla my_table desde PostgreSQL.

2. Conectar React con la API

Una vez que nuestra API esté corriendo, podemos conectarla con nuestra aplicación React. Asegúrate de que tu aplicación React esté configurada con create-react-app o cualquier otra estructura de React que estés utilizando.

Dentro de uno de los componentes de React, utiliza fetch o axios para hacer una solicitud a la API y obtener los datos desde PostgreSQL:

import React, { useEffect, useState } from 'react';

function DataComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('http://localhost:5000/api/data')
      .then((response) => response.json())
      .then((result) => setData(result))
      .catch((error) => console.error('Error al obtener datos:', error));
  }, []);

  return (
    <div>
      <h2>Datos desde PostgreSQL</h2>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataComponent;

Este componente hace una petición a la API para obtener los datos y los renderiza en una lista.

3. Probar la integración

Para probar la integración, asegúrate de que tanto el servidor Node.js como tu aplicación React estén corriendo. Ejecuta los siguientes comandos en terminales separadas:

# Para el servidor Node.js
npm start

# Para la aplicación React
npm start

Abre tu navegador en http://localhost:3000 para ver la aplicación React, y verifica que los datos se están mostrando correctamente desde PostgreSQL.

Cómo integrar PostgreSQL con una aplicación React