Cómo construir una aplicación completa con MERN (MongoDB, Express, React, Node.js)

Construir una aplicación web completa puede parecer una tarea titánica, pero con el stack MERN (MongoDB, Express, React y Node.js), este proceso se simplifica enormemente. Este artículo te guiará a través de los pasos necesarios para crear una aplicación válida y funcional, proporcionando una breve descripción de cada tecnología y un ejemplo de implementación práctica.

¿Qué es el stack MERN?

El stack MERN es un conjunto de tecnologías que se utilizan para desarrollar aplicaciones web completas, tanto del lado del cliente como del servidor. Esta pila incluye:

• MongoDB: Una base de datos NoSQL que almacena datos en un formato de documento, facilitando la escalabilidad y la flexibilidad.
• Express: Un marco de aplicación para Node.js que simplifica el desarrollo de aplicaciones y API mediante la creación de servidores.
• React: Una biblioteca de JavaScript para construir interfaces de usuario, que permite la creación de componentes reutilizables.
• Node.js: Un entorno de ejecución de JavaScript en el servidor que permite ejecutar código JavaScript fuera del navegador.

Ventajas del stack MERN

• Desarrollo Full-Stack: Puedes desarrollar tanto el frontend como el backend utilizando JavaScript.
• Componentes Reutilizables: React permite construir aplicaciones con componentes, lo que facilita su mantenimiento.
• NoSQL con MongoDB: La flexibilidad de MongoDB permite adaptarse a cambios en los modelos de datos sin complicaciones.
• Escalabilidad: El uso de Node.js junto con MongoDB facilita la creación de aplicaciones escalables.

Paso 1: Configuración del entorno

Requisitos previos

Antes de comenzar, asegúrate de tener instalado lo siguiente:

1. Node.js y npm: Puedes descargar e instalar la última versión desde nodejs.org.
2. MongoDB: Configura MongoDB en tu máquina local, o utiliza un servicio en la nube como MongoDB Atlas.

Crear el proyecto

Puedes iniciar un nuevo proyecto en una carpeta de tu elección:

mkdir mern-app
cd mern-app
npm init -y

Este comando crea un archivo package.json que gestiona las dependencias del proyecto.

Paso 2: Configuración del servidor con Express y Node.js

Instalar dependencias

Instala Express y otras dependencias necesarias:

npm install express mongoose cors dotenv

• mongoose: Para interactuar con MongoDB.
• cors: Para manejar cabeceras CORS.
• dotenv: Para gestionar variables de entorno.

Crear un servidor básico

Ahora, crea un nuevo archivo en tu proyecto llamado server.js y agrega el siguiente código:

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

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

// Conectar a MongoDB
mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log('MongoDB conectado'))
    .catch(err => console.log(err));

// Iniciar el servidor
app.listen(PORT, () => {
    console.log(`Servidor corriendo en http://localhost:${PORT}`);
});

Configurar la base de datos

Crea un archivo .env y agrega la URI de conexión de tu base de datos de MongoDB:

MONGODB_URI=your_mongodb_uri_here

Paso 3: Crear un modelo de datos

Los modelos en Mongoose son esquemas que definen la estructura de tus datos. Crea una carpeta llamada models y un archivo llamado Item.js:

const mongoose = require('mongoose');

const ItemSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true,
    },
    price: {
        type: Number,
        required: true,
    },
});

module.exports = mongoose.model('Item', ItemSchema);

Paso 4: Crear las rutas

Para manejar las solicitudes HTTP, debes crear las rutas de tu aplicación. Crea una carpeta llamada routes y un archivo llamado item.js:

const express = require('express');
const router = express.Router();
const Item = require('../models/Item');

// Obtener todos los items
router.get('/', async (req, res) => {
    try {
        const items = await Item.find();
        res.json(items);
    } catch (err) {
        res.status(500).json({ message: err.message });
    }
});

// Crear un nuevo item
router.post('/', async (req, res) => {
    const item = new Item({
        name: req.body.name,
        price: req.body.price,
    });
    try {
        const savedItem = await item.save();
        res.status(201).json(savedItem);
    } catch (err) {
        res.status(400).json({ message: err.message });
    }
});

module.exports = router;

Luego, importa las rutas en server.js:

const itemRoutes = require('./routes/item');

app.use('/api/items', itemRoutes);

Paso 5: Configuración del frontend con React

Crear el cliente de React

Usa Create React App para inicializar una nueva aplicación React:

npx create-react-app client
cd client
npm start

Instalar axios para solicitudes HTTP

En la carpeta del cliente, instala axios:

npm install axios

Crear componentes en React

Crea un archivo llamado ItemList.js en la carpeta src:

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

const ItemList = () => {
    const [items, setItems] = useState([]);

    useEffect(() => {
        const fetchItems = async () => {
            const res = await axios.get('http://localhost:5000/api/items');
            setItems(res.data);
        };
        fetchItems();
    }, []);

    return (
        <div>
            <h1>Lista de Items</h1>
            <ul>
                {items.map(item => (
                    <li key={item._id}>{item.name} - ${item.price}</li>
                ))}
            </ul>
        </div>
    );
};

export default ItemList;

Luego, actualiza App.js para usar ItemList:

import React from 'react';
import ItemList from './ItemList';

const App = () => {
    return (
        <div>
            <ItemList />
        </div>
    );
};

export default App;

Paso 6: Pruebas y despliegue

Probar la aplicación

Inicia el servidor y la aplicación React por separado:

1. Abre una terminal y ejecuta node server.js en la carpeta del servidor.
2. Abre otra terminal y ejecuta npm start en la carpeta del cliente.

Visita http://localhost:3000 en tu navegador y deberías ver la lista de items.

Despliegue de la aplicación

Puedes desplegar tu aplicación utilizando plataformas como Heroku o Vercel. Configura tu base de datos MongoDB Atlas y todos los ajustes necesarios para asegurar que tu aplicación funcione correctamente en producción.

Conclusión

El stack MERN es una herramienta poderosa para construir aplicaciones web completas y escalables. En este artículo, has aprendido cómo configurar una aplicación básica utilizando MongoDB, Express, React y Node.js. Con esta base, puedes explorar más funcionalidades y expandir tu aplicación con nuevas características. Aprovecha toda la flexibilidad y potencia que este stack te ofrece para desarrollar proyectos innovadores. ¡Buena suerte!