Lenguajes de texto enriquecido/mern-stack-tutorial

Background Wrapper languages/mern-stack-tutorial

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

Slalom mern-stack-tutorial

Default

lsxl2xv3wufbz9728-Mern-stack.png

(Siéntase libre de codificar o descargar el código completo desde el 

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 

Comencemos creando un directorio vacío: 

. Esta carpeta contendrá nuestras carpetas de cliente y servidor.

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

, el formato estándar oficialmente admitido para empaquetar código JavaScript para su reutilización, agregaremos una línea al archivo 

El comando anterior instala tres paquetes diferentes:

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 

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.

 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 

 . Una vez terminado, su archivo debería verse similar al que se muestra a continuación. Reemplace,

> 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.

. Allí podemos añadir el siguiente código para conectarnos a nuestra base de datos:

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 

 en ella. Navega de vuelta a tu directorio "servidor" y crea el nuevo directorio y archivo:

 también tendrá las siguientes líneas de código:

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.

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

, una forma moderna de crear una aplicación React. En un nuevo terminal dentro del directorio 

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

A continuación, editaremos el campo de contenido en el archivo 

 , necesitamos agregar las directivas Tailwind y eliminar todo lo demás.

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!

Hemos configurado las rutas de la página de nuestra aplicación en la variable 

 para mantener nuestra interfaz de usuario sincronizada con la URL. 

 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.

A continuación, vamos a crear los componentes que definimos en nuestras rutas. Crea una carpeta 

 . Para cada componente que creamos, añadiremos un nuevo 

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

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

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

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*

Ahora, agregamos lo siguiente al archivo 

Este es nuestro componente de diseño principal. Nuestra 

 estará siempre en la parte superior de cada página y el 

 aceptará los componentes hijos que definimos en nuestras 

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 

, que proporciona formas más limpias y fáciles de manejar solicitudes http. En 

, Agregamos el siguiente código al bloque 

 . Cuando se envía una solicitud POST o PATCH a la URL, 

 agregará un nuevo registro a la base de datos o actualizará un registro existente en la base de datos.

También colocamos el siguiente bloque de código en 

 debajo del bloque constructor para cargar un registro existente, si existe.

 recupera los registros de la base de datos, por lo que usaremos el método 

fetch para recuperar registros de la base de datos.

 Para lograr esto, agregamos las siguientes líneas de código sobre la función 

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

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 

 y, si tienes alguna pregunta, publícala en nuestros 

Texto enriquecido2 idiomas/mern-stack-tutorial

Primeros pasos con MongoDB Atlas

SEO Section Overview-mern-stack-tutorial

¡Presentamos MongoDB 8.0, el MongoDB más rápido de la historia! Leer más &gt;&gt;

¡Presentamos MongoDB 8.0, el MongoDB más rápido de la historia! Leer más &gt;

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

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

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

Primeros pasos con MongoDB Atlas