Anuncio¡Presentamos MongoDB 8.0, el MongoDB más rápido de la historia! Leer más >

AnuncioVoyage AI se une a MongoDB para potenciar aplicaciones de IA más precisas y confiables en Atlas. Más información >

Cómo utilizar MERN Stack: una guía completa

Necesitará acceso a la base de datos Atlas de MongoDB para este tutorial. Si no tiene una cuenta, puede registrarse gratis para seguirlo.

¡Empiece gratis!

Este tutorial le mostrará cómo crear una aplicación MERN de pila completa, en este caso, una base de datos de empleados, con las herramientas más recientes disponibles. Antes de comenzar, asegúrese de estar familiarizado con Node.js y React.js conceptos básicos. También necesitará acceso a una base de datos de MongoDB Atlas para este tutorial. El código completo está disponible en el repositorio de GitHub.

Tabla de contenidos

¿Qué es la pila MERN?
Configuración del proyecto
Conexión a MongoDB Atlas
Configuración de la aplicación React
Configuración del router React
Conexión de la parte delantera a la parte trasera

¿Qué es la pila MERN?

La pila MERN es un marco de desarrollo web formado por MongoDB, Express, React.js y Node.js. Es una de las varias variantes de la pila MEAN.

Cuando se utiliza la pila MERN, se trabaja con React para implementar la capa de presentación, Express y Node.js para crear la capa intermedia o de aplicación, y MongoDB para crear la capa de base de datos.

En este tutorial de pila MERN, utilizaremos estas cuatro tecnologías para desarrollar una aplicación básica que sea capaz de registrar la información de los empleados y mostrarla utilizando el front-end de React.

Cómo empezar a utilizar la pila MERN

Para empezar, tendrás que hacer lo siguiente:

Instalar Node.js

Instale Node.js descargando la versión LTS o la versión actual.
Nota: La versión utilizada en este tutorial es v20.11.0

Tener o instalar un editor de código

Puede usar cualquier editor de código de su elección para este tutorial. Sin embargo, por el bien de esta demostración, usaremos Visual Studio Code.

Una ilustración que representa un video tutorial.

Si aprende de forma visual, consulte la versión en vídeo de este tutorial.

Configuración del proyecto

(Siéntase libre de codificar o descargar el código completo desde el repositorio de GitHub).

MERN nos permite crear soluciones full-stack. Así que, para aprovechar todo su potencial, crearemos un proyecto MERN Stack. Para este proyecto, crearemos tanto un back end como un front end. El front-end se implementará con React y el back-end se implementará con MongoDB, Node.js y Express. Llamaremos al cliente front-end y al servidor back-end.

Comencemos creando un directorio vacío: mern. Esta carpeta contendrá nuestras carpetas de cliente y servidor.

Code Snippet

A continuación, cree una carpeta para el back-end y asígnele el nombre servidor. Luego, inicializaremos el archivo package.json usando npm init.

Code Snippet

Para usar los módulos ECMAScript, el formato estándar oficialmente admitido para empaquetar código JavaScript para su reutilización, agregaremos una línea al archivo package.json .

Code Snippet

También instalaremos las dependencias.

Code Snippet

El comando anterior instala tres paquetes diferentes:

mongodb : el controlador de base de datos MongoDB que permite que sus aplicaciones Node.js se conecten a la base de datos y trabajen con datos.
express — el marco web para Node.js (nos hará la vida más fácil)
cors : un paquete de Node.js que permite el intercambio de recursos entre orígenes.

Podemos comprobar las dependencias instaladas en el archivo package.json. Debe enumerar los paquetes junto con sus versiones.

Una vez que nos hemos asegurado de que las dependencias se instalaron correctamente, creamos un archivo llamado server.js con el siguiente código:

mern/server/server.js

Code Snippet

Aquí importamos express y cors para su uso. const port = process.env.PORT accederá a la variable port desde el config.env que crearemos a continuación.

Conexión a MongoDB Atlas

Es hora de conectar nuestro servidor a la base de datos. Utilizaremos MongoDB Atlas como base de datos. MongoDB Atlas es un servicio de base de datos basado en la nube que proporciona una sólida seguridad y fiabilidad de los datos. MongoDB Atlas proporciona un clúster de nivel gratuito que nunca caduca y le permite acceder a un subconjunto de características y funcionalidades de Atlas.

Siga la guía Introducción a Atlas para crear una cuenta, implementar el primer clúster y localizar la cadena de conexión del clúster.

Ahora que tiene la cadena de conexión, vuelva al directorio del servidor y cree un archivo config.env. Allí, asigne la cadena de conexión a una nueva variable ATLAS_URI . Una vez terminado, su archivo debería verse similar al que se muestra a continuación. Reemplace,< username > < < password > < clusterName > < projectId > > de contraseña, < > clusterName y < > projectId por el nombre de usuario, la contraseña, el nombre del clúster y el ID del proyecto de la base de datos.

mern/servidor/config.env

Code Snippet

Cree una carpeta en el directorio del servidor llamada db y dentro de ella, un archivo llamado connection.js. Allí podemos añadir el siguiente código para conectarnos a nuestra base de datos:

mern/server/db/connection.js

Code Snippet

Puntos de conexión de la API de servidor

Base de datos hecha. Servidor hecho. Ahora es el momento de los puntos finales de la API. Comencemos creando una carpeta de rutas y agregando record.js en ella. Navega de vuelta a tu directorio "servidor" y crea el nuevo directorio y archivo:

Code Snippet

El archivo routes/record.js también tendrá las siguientes líneas de código:

mern/server/routes/record.js

Code Snippet

import express from "express";

// This will help us connect to the database
import db from "../db/connection.js";

// This help convert the id from string to ObjectId for the _id.
import { ObjectId } from "mongodb";

// router is an instance of the express router.
// We use it to define our routes.
// The router will be added as a middleware and will take control of requests starting with path /record.
const router = express.Router();

// This section will help you get a list of all the records.
router.get("/", async (req, res) => {
  let collection = await db.collection("records");
  let results = await collection.find({}).toArray();
  res.send(results).status(200);
});

// This section will help you get a single record by id
router.get("/:id", async (req, res) => {
  let collection = await db.collection("records");
  let query = { _id: new ObjectId(req.params.id) };
  let result = await collection.findOne(query);

if (!result) res.send("Not found").status(404);
  else res.send(result).status(200);
});

// This section will help you create a new record.
router.post("/", async (req, res) => {
  try {
    let newDocument = {
      name: req.body.name,
      position: req.body.position,
      level: req.body.level,
    };
    let collection = await db.collection("records");
    let result = await collection.insertOne(newDocument);
    res.send(result).status(204);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error adding record");
  }
});

// This section will help you update a record by id.
router.patch("/:id", async (req, res) => {
  try {
    const query = { _id: new ObjectId(req.params.id) };
    const updates = {
      $set: {
        name: req.body.name,
        position: req.body.position,
        level: req.body.level,
      },
    };

let collection = await db.collection("records");
    let result = await collection.updateOne(query, updates);
    res.send(result).status(200);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error updating record");
  }
});

// This section will help you delete a record
router.delete("/:id", async (req, res) => {
  try {
    const query = { _id: new ObjectId(req.params.id) };

const collection = db.collection("records");
    let result = await collection.deleteOne(query);

res.send(result).status(200);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error deleting record");
  }
});

export default router;

Si ejecuta la aplicación en este punto, recibirá el siguiente mensaje en su terminal cuando se establezca la conexión. Tenga en cuenta que estamos utilizando la funcionalidad de variable de entorno incorporada de las últimas versiones de Node.js.

Code Snippet

Eso es todo para el back-end. Ahora comenzaremos a trabajar en el frontend.

Configuración de la aplicación React

Para el front-end, usaremos Vite, una forma moderna de crear una aplicación React. En un nuevo terminal dentro del directorio mern , configuremos esto:

Code Snippet

Hay algunas dependencias adicionales que se utilizarán en nuestro proyecto. Comenzaremos con Tailwind CSS.

Code Snippet

A continuación, editaremos el campo de contenido en el archivo tailwind.config.js .

Code Snippet

En el archivo src/index.css , necesitamos agregar las directivas Tailwind y eliminar todo lo demás.

Code Snippet

Por último, instalaremos react-router-dom.

Code Snippet

Tailwind es un marco CSS que da prioridad a las utilidades y que permite añadir estilos CSS utilizando nombres de clase predefinidos. ¡Y React Router agrega enrutamiento de páginas del lado del cliente a React!

Configuración del router React

Dentro de src/main.jsx, Agregaremos el siguiente código:

mern/cliente/src/main.jsx

Code Snippet

Hemos configurado las rutas de la página de nuestra aplicación en la variable router y hemos utilizado RouterProvider para mantener nuestra interfaz de usuario sincronizada con la URL. RouterProvider ayuda con transiciones fluidas mientras se cambia entre componentes. Básicamente, solo volverá a cargar o actualizar el componente que debe cambiarse en lugar de actualizar o volver a cargar toda la página. Aunque React Router no es una necesidad, es importante si desea que su aplicación responda.

Creación de componentes

A continuación, vamos a crear los componentes que definimos en nuestras rutas. Crea una carpeta de componentes dentro de la carpeta src . Para cada componente que creamos, añadiremos un nuevo .js archivo dentro de la carpeta de componentes . En este caso, agregaremos Navbar.jsx, RecordList.jsx y ModifyRecord.jsx.

Code Snippet

Las instantáneas a continuación muestran cómo se vería cada archivo.

Navbar.jsx

En el componente navbar.js, crearemos una barra de navegación que nos vinculará a los componentes requeridos mediante el siguiente código.

mern/cliente/src/componentes/Navbar.jsx

Code Snippet

RecordList.jsx

El siguiente código servirá como componente de visualización para nuestros registros. Obtendrá todos los registros de nuestra base de datos a través de un método GET.

mern/cliente/src/componentes/RecordList.jsx

Code Snippet

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

const Record = (props) => (
  <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.record.name}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.record.position}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.record.level}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      <div className="flex gap-2">
        <Link
          className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 h-9 rounded-md px-3"
          to={`/edit/${props.record._id}`}
        >
          Edit
        </Link>
        <button
          className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 hover:text-accent-foreground h-9 rounded-md px-3"
          color="red"
          type="button"
          onClick={() => {
            props.deleteRecord(props.record._id);
          }}
        >
          Delete
        </button>
      </div>
    </td>
  </tr>
);

export default function RecordList() {
  const [records, setRecords] = useState([]);

// This method fetches the records from the database.
  useEffect(() => {
    async function getRecords() {
      const response = await fetch(`http://localhost:5050/record/`);
      if (!response.ok) {
        const message = `An error occurred: ${response.statusText}`;
        console.error(message);
        return;
      }
      const records = await response.json();
      setRecords(records);
    }
    getRecords();
    return;
  }, [records.length]);

// This method will delete a record
  async function deleteRecord(id) {
    await fetch(`http://localhost:5050/record/${id}`, {
      method: "DELETE",
    });
    const newRecords = records.filter((el) => el._id !== id);
    setRecords(newRecords);
  }

// This method will map out the records on the table
  function recordList() {
    return records.map((record) => {
      return (
        <Record
          record={record}
          deleteRecord={() => deleteRecord(record._id)}
          key={record._id}
        />
      );
    });
  }

// This following section will display the table with the records of individuals.
  return (
    <>
      <h3 className="text-lg font-semibold p-4">Employee Records</h3>
      <div className="border rounded-lg overflow-hidden">
        <div className="relative w-full overflow-auto">
          <table className="w-full caption-bottom text-sm">
            <thead className="[&_tr]:border-b">
              <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Name
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Position
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Level
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Action
                </th>
              </tr>
            </thead>
            <tbody className="[&_tr:last-child]:border-0">
              {recordList()}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

Registro.jsx

El siguiente código servirá como componente de formulario para crear o actualizar registros. Este componente enviará un comando de creación o un comando de actualización a nuestro servidor.

mern/cliente/src/componentes/Registro.jsx*

Code Snippet

import { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";

export default function Record() {
  const [form, setForm] = useState({
    name: "",
    position: "",
    level: "",
  });
  const [isNew, setIsNew] = useState(true);
  const params = useParams();
  const navigate = useNavigate();

useEffect(() => {
    async function fetchData() {
      const id = params.id?.toString() || undefined;
      if(!id) return;
      setIsNew(false);
      const response = await fetch(
        `http://localhost:5050/record/${params.id.toString()}`
      );
      if (!response.ok) {
        const message = `An error has occurred: ${response.statusText}`;
        console.error(message);
        return;
      }
      const record = await response.json();
      if (!record) {
        console.warn(`Record with id ${id} not found`);
        navigate("/");
        return;
      }
      setForm(record);
    }
    fetchData();
    return;
  }, [params.id, navigate]);

// These methods will update the state properties.
  function updateForm(value) {
    return setForm((prev) => {
      return { ...prev, ...value };
    });
  }

// This function will handle the submission.
  async function onSubmit(e) {
    e.preventDefault();
    const person = { ...form };
    try {
      let response;
      if (isNew) {
        // if we are adding a new record we will POST to /record.
        response = await fetch("http://localhost:5050/record", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(person),
        });
      } else {
        // if we are updating a record we will PATCH to /record/:id.
        response = await fetch(`http://localhost:5050/record/${params.id}`, {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(person),
        });
      }

if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
    } catch (error) {
      console.error('A problem occurred with your fetch operation: ', error);
    } finally {
      setForm({ name: "", position: "", level: "" });
      navigate("/");
    }
  }

// This following section will display the form that takes the input from the user.
  return (
    <>
      <h3 className="text-lg font-semibold p-4">Create/Update Employee Record</h3>
      <form
        onSubmit={onSubmit}
        className="border rounded-lg overflow-hidden p-4"
      >
        <div className="grid grid-cols-1 gap-x-8 gap-y-10 border-b border-slate-900/10 pb-12 md:grid-cols-2">
          <div>
            <h2 className="text-base font-semibold leading-7 text-slate-900">
              Employee Info
            </h2>
            <p className="mt-1 text-sm leading-6 text-slate-600">
              This information will be displayed publicly so be careful what you
              share.
            </p>
          </div>

<div className="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 ">
            <div className="sm:col-span-4">
              <label
                htmlFor="name"
                className="block text-sm font-medium leading-6 text-slate-900"
              >
                Name
              </label>
              <div className="mt-2">
                <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-slate-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
                  <input
                    type="text"
                    name="name"
                    id="name"
                    className="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-slate-900 placeholder:text-slate-400 focus:ring-0 sm:text-sm sm:leading-6"
                    placeholder="First Last"
                    value={form.name}
                    onChange={(e) => updateForm({ name: e.target.value })}
                  />
                </div>
              </div>
            </div>
            <div className="sm:col-span-4">
              <label
                htmlFor="position"
                className="block text-sm font-medium leading-6 text-slate-900"
              >
                Position
              </label>
              <div className="mt-2">
                <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-slate-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
                  <input
                    type="text"
                    name="position"
                    id="position"
                    className="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-slate-900 placeholder:text-slate-400 focus:ring-0 sm:text-sm sm:leading-6"
                    placeholder="Developer Advocate"
                    value={form.position}
                    onChange={(e) => updateForm({ position: e.target.value })}
                  />
                </div>
              </div>
            </div>
            <div>
              <fieldset className="mt-4">
                <legend className="sr-only">Position Options</legend>
                <div className="space-y-4 sm:flex sm:items-center sm:space-x-10 sm:space-y-0">
                  <div className="flex items-center">
                    <input
                      id="positionIntern"
                      name="positionOptions"
                      type="radio"
                      value="Intern"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Intern"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionIntern"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Intern
                    </label>
                    <input
                      id="positionJunior"
                      name="positionOptions"
                      type="radio"
                      value="Junior"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Junior"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionJunior"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Junior
                    </label>
                    <input
                      id="positionSenior"
                      name="positionOptions"
                      type="radio"
                      value="Senior"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Senior"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionSenior"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Senior
                    </label>
                  </div>
                </div>
              </fieldset>
            </div>
          </div>
        </div>
        <input
          type="submit"
          value="Save Employee Record"
          className="inline-flex items-center justify-center whitespace-nowrap text-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 hover:text-accent-foreground h-9 rounded-md px-3 cursor-pointer mt-4"
        />
      </form>
    </>
  );
}

Ahora, agregamos lo siguiente al archivo src/App.jsx .

mern/cliente/src/App.jsx

Code Snippet

Este es nuestro componente de diseño principal. Nuestra Navbar estará siempre en la parte superior de cada página y el Outlet aceptará los componentes hijos que definimos en nuestras rutas en el archivo main.jsx anteriormente.

Conectando el extremo frontal con el extremo posterior

Hemos completado el proceso de creación de componentes. También conectamos nuestra aplicación React al back-end usando fetch, que proporciona formas más limpias y fáciles de manejar solicitudes http. En Record.jsx, Agregamos el siguiente código al bloque onSubmit(e) . Cuando se envía una solicitud POST o PATCH a la URL, fetch agregará un nuevo registro a la base de datos o actualizará un registro existente en la base de datos.

Code Snippet

También colocamos el siguiente bloque de código en Record.jsx debajo del bloque constructor para cargar un registro existente, si existe.

Code Snippet

Por último, RecordList.jsx. RecordList.jsx recupera los registros de la base de datos, por lo que usaremos el método GET de fetch para recuperar registros de la base de datos. Para lograr esto, agregamos las siguientes líneas de código sobre la función RecordList() en RecordList.jsx.

Code Snippet

Después de cerrar todo, para iniciar la aplicación, siga los pasos a continuación:

Asegúrese de que la aplicación de servidor siga ejecutándose. Si no es así, inícielo ejecutando el siguiente comando en el directorio del servidor :

Code Snippet

En un nuevo terminal, vaya al directorio del cliente y ejecute el comando:

Code Snippet

Este es el aspecto que tendrá la página de aterrizaje del componente de registro después de que hayamos añadido los registros de "Jesse Hall", "Kushagra Kesav" y "Stanimira Vlaeva" a través del botón "Crear empleado".

Así es como se verá la pantalla que te permite agregar un empleado:

Felicitaciones por crear su primera aplicación MERN. Para obtener más ideas y conceptos avanzados, visita nuestro Centro de desarrolladores y, si tienes alguna pregunta, publícala en nuestros foros de la comunidad.

Primeros pasos con MongoDB Atlas

Prueba gratuita

Más información