Comenzando con Node.js, Express y React: Construyendo una API potente

Hoy, nos sumergimos en el emocionante mundo de Node.js, Express y React. Tanto si eres un programador experimentado como si estás empezando, esta entrada de blog te guiará en la creación de una potente API utilizando estas populares tecnologías. Cubriremos los conceptos básicos, te guiaremos a través de la configuración de tu entorno y exploraremos cómo funcionan juntas estas herramientas. Además, te mostraremos cómo Apidog puede hacerte la vida más fácil. Así que, ¡coge tu snack de programación favorito y empecemos!

¿Por qué Node.js, Express y React?

Antes de entrar en detalles, hablemos de por qué deberías preocuparte por Node.js, Express y React.

Node.js

Node.js es un entorno de ejecución que te permite ejecutar JavaScript en el lado del servidor. Está construido sobre el motor V8 JavaScript de Chrome, lo que lo hace rápido y eficiente. Con Node.js, puedes construir aplicaciones de red escalables, gestionar múltiples peticiones simultáneamente y utilizar un único lenguaje de programación (JavaScript) tanto para el desarrollo del lado del cliente como del servidor.

Express

Express es un framework de aplicaciones web Node.js mínimo y flexible. Proporciona un conjunto robusto de características para la construcción de aplicaciones web y móviles. Con Express, puedes configurar fácilmente un servidor, gestionar rutas y gestionar peticiones y respuestas HTTP. Es la columna vertebral de muchas aplicaciones Node.js y se empareja perfectamente con React.

React

React es una biblioteca de JavaScript para construir interfaces de usuario. Es mantenida por Facebook y una comunidad de desarrolladores y empresas individuales. React te permite crear componentes de interfaz de usuario reutilizables y gestionar el estado de tu aplicación de forma eficiente. Cuando se combina con Node.js y Express, puedes construir aplicaciones web dinámicas y responsivas con facilidad.

Configurar tu entorno de desarrollo

Para empezar, tendrás que configurar tu entorno de desarrollo. Aquí tienes una guía paso a paso:

Instalar Node.js: Dirígete al sitio web de Node.js y descarga la última versión. Sigue las instrucciones de instalación para tu sistema operativo.

Instalar npm: npm (Node Package Manager) viene incluido con Node.js. Puedes comprobar si está instalado ejecutando npm -v en tu terminal.

Configurar un nuevo proyecto: Crea un nuevo directorio para tu proyecto y navega hasta él en tu terminal. Inicializa un nuevo proyecto Node.js ejecutando npm init. Sigue las indicaciones para crear un archivo package.json.

Instalar Express: Ejecuta npm install express para instalar Express.

Instalar React: Utilizarás Create React App para configurar un nuevo proyecto React. Ejecuta npx create-react-app client para crear una nueva aplicación React en un directorio client.

Instalar Apidog: Para facilitar el desarrollo y las pruebas de la API, utilizaremos Apidog. Puedes descargarlo gratis desde el sitio web de Apidog.

Construir tu API con Node.js y Express

Ahora que tu entorno está configurado, vamos a construir una API sencilla utilizando Node.js y Express.

Paso 1: Configurar el servidor Express

Crea un nuevo archivo llamado server.js en el directorio raíz de tu proyecto. Añade el siguiente código para configurar un servidor Express básico:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

Ejecuta node server.js en tu terminal. Deberías ver "Server running at http://localhost:3000". Abre tu navegador y navega a http://localhost:3000 para ver "Hello World!".

Paso 2: Crear rutas de API

A continuación, vamos a crear algunas rutas de API. En tu archivo server.js, añade el siguiente código para crear una API sencilla que devuelva una lista de usuarios:

const users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Doe' },
  { id: 3, name: 'Sam Smith' }
];

app.get('/api/users', (req, res) => {
  res.json(users);
});

Ahora, cuando navegues a http://localhost:3000/api/users, verás una respuesta JSON con la lista de usuarios.

Paso 3: Conectar a una base de datos

Para hacer nuestra API más dinámica, vamos a conectarnos a una base de datos. Utilizaremos MongoDB para este ejemplo. Primero, tendrás que instalar mongoose ejecutando npm install mongoose.

Crea un nuevo archivo llamado db.js y añade el siguiente código para conectarte a MongoDB:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/mydatabase', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
  console.log('Connected to MongoDB');
});

module.exports = db;

En tu archivo server.js, requiere el archivo db.js para conectarte a la base de datos:

const db = require('./db');

Ahora, vamos a crear un modelo Mongoose para nuestros usuarios. Crea un nuevo archivo llamado user.js y añade el siguiente código:

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String
});

const User = mongoose.model('User', userSchema);

module.exports = User;

En tu archivo server.js, actualiza la ruta /api/users para obtener los usuarios de la base de datos:

const User = require('./user');

app.get('/api/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

Ahora puedes añadir, actualizar y eliminar usuarios de tu base de datos MongoDB, y tu API reflejará dinámicamente estos cambios.

Integrar React con Node.js y Express

Ahora que tenemos nuestra API configurada, vamos a integrarla con un frontend de React.

Paso 1: Configurar el proxy

Para hacer peticiones a nuestra API desde el frontend de React, vamos a configurar un proxy. Abre el archivo client/package.json y añade la siguiente línea:

"proxy": "http://localhost:3000"

Paso 2: Obtener datos de la API

En tu aplicación React, vamos a crear un componente que obtenga datos de la API y los muestre. Abre el archivo client/src/App.js y sustituye su contenido por el siguiente código:

import React, { useEffect, useState } from 'react';
import './App.css';

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div className="App">
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Ejecuta npm start en el directorio client para iniciar el servidor de desarrollo de React. Deberías ver una lista de usuarios obtenida de tu API mostrada en la página.

Probar tu API con Apidog

Ahora que tienes una API funcional y un frontend de React, es hora de probar tu API. Apidog es una herramienta fantástica para esto.

Paso 1: Abre Apidog y crea una nueva solicitud.

Paso 2: En el editor de pruebas, introduce la URL de tu punto final de la API, selecciona el método HTTP y añade cualquier encabezado, parámetro o datos del cuerpo que necesites. Por ejemplo, puedes probar la ruta que devuelve un mensaje simple que creamos antes:

Paso 3: Haz clic en el botón Enviar y verás el resultado de tu prueba. Deberías ver el código de estado, el tiempo de respuesta y el cuerpo de la respuesta de tu API. Por ejemplo, deberías ver algo como esto:

Apidog es una gran herramienta para probar tus APIs, ya que te ayuda a asegurar la calidad, fiabilidad y rendimiento de tus servicios web. También te ahorra tiempo y esfuerzo, ya que no necesitas escribir ningún código ni instalar ningún software para probar tus APIs. Puedes simplemente usar tu navegador y disfrutar de la interfaz y las características fáciles de usar de Apidog.

Conclusión

¡Enhorabuena! Has construido con éxito una potente API utilizando Node.js, Express y React. Has aprendido a configurar tu entorno de desarrollo, crear rutas de API, conectarte a una base de datos e integrar React con tu backend. Además, has descubierto cómo Apidog puede simplificar las pruebas de tu API.

Recuerda, esto es solo el principio. Hay innumerables formas de ampliar y mejorar tu aplicación. Puedes añadir autenticación, implementar rutas más complejas y mejorar tu frontend con características adicionales.