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.
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:
Antes de comenzar, asegúrate de tener instalado lo siguiente:
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.
Instala Express y otras dependencias necesarias:
npm install express mongoose cors dotenv
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}`); });
Crea un archivo .env y agrega la URI de conexión de tu base de datos de MongoDB:
MONGODB_URI=your_mongodb_uri_here
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);
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);
Usa Create React App para inicializar una nueva aplicación React:
npx create-react-app client cd client npm start
En la carpeta del cliente, instala axios:
npm install axios
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;
Inicia el servidor y la aplicación React por separado:
Visita http://localhost:3000 en tu navegador y deberías ver la lista de items.
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.
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!
Page loaded in 25.57 ms