Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

Las bases de datos relacionales como MySQL han sido tradicionalmente la elección de base de datos. Sin embargo, las bases de datos NoSQL como MongoDB han ganado popularidad debido a su estructura flexible para el almacenamiento de datos y su capacidad para almacenar y recuperar datos rápidamente.

Estas bases de datos ofrecen un lenguaje de consulta alternativo que puede integrar sin problemas con aplicaciones web y móviles modernas. Siga leyendo para aprender cómo almacenar datos de React en una base de datos MongoDB.

¿Qué es una base de datos NoSQL?

NoSQL significa No solo SQL, una base de datos no relacional. Este tipo de base de datos no se basa en el modelo de base de datos relacional tradicional. No tiene una estructura definida de columnas y filas y puede almacenar datos en una variedad de formatos diferentes, lo que lo hace más flexible y escalable.

instagram viewer

La principal diferencia entre NoSQL y las bases de datos relacionales es que, en lugar de tener filas y columnas, las bases de datos NoSQL almacenan datos en documentos, que tienen una estructura dinámica.

Configurar una base de datos MongoDB

MongoDB es la base de datos NoSQL más popular. Es una base de datos de código abierto que almacena datos en documentos tipo JSON (tablas) dentro de colecciones (bases de datos).

Así es como se ve una estructura de documento MongoDB simple:

{
 Nombre: 'Andrés',
 Rol: 'Desarrollador back-end'
}

Para comenzar, primero debe configurar una base de datos MongoDB. Una vez que haya terminado de configurar MongoDB, abra la aplicación MongoDB Compass. Luego, haga clic en el Nueva conexión para crear una conexión con el servidor MongoDB ejecutándose localmente.

Si no tiene acceso a la herramienta GUI de MongoDB Compass, puede usar el Herramienta de shell MongoDB para crear una base de datos y la colección..

Proporcione el URI de conexión y el nombre de la conexión, luego presione Guardar y conectar.

Por último, haga clic en el botón Crear base de datos, complete el nombre de la base de datos y proporcione un nombre de colección para una colección de demostración.

Crear un cliente React

Puede encontrar el código de esta aplicación en su repositorio GitHub.

Para iniciar rápidamente una aplicación React, cree una carpeta de proyecto en su máquina local, cambie a ese directorio y ejecute estos comandos de terminal para crear y activar el servidor de desarrollo:

npx crear-reaccionar-aplicación mi-aplicación
cd mi aplicación
inicio de npm

A continuación, instale Axios. Este paquete le permitirá enviar solicitudes HTTP a su servidor backend Express.js para almacenar datos en su base de datos MongoDB.

npm instalar axios

Crear un formulario de demostración para recopilar datos de usuario

Abre el src/Aplicación.js archivo, elimine el código estándar de React y reemplácelo con lo siguiente:

importar'./Aplicación.css';
importar Reaccionar, { estado de uso } de'reaccionar';
importar Axios de'axíos';
funciónaplicación() {
constante [nombre, establecerNombre] = usarEstado("")
constante [rol, establecerRol] = usarEstado("")


constante manejarEnviar = (mi) => {
 e.preventDefault();


 Axios.post(' http://localhost: 4000/insertar', {
 nombre completo: nombre,
 rol de la empresa: rol
 })
 }


devolver (


"Aplicación">
"Encabezado de la aplicación"> 
"formulario de inicio de sesión">


Nombre</p>


 nombreclase = "Nombre"
 tipo ="texto"
 marcador de posición ="Nombre de pila ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Rol de la empresa</p>


 nombreclase = "Role"
 tipo ="texto"
 marcador de posición = "Role..."
 onChange={(e) => {setRole (e.target.value)}}
 />








exportarpor defecto aplicación;

Vamos a desglosarlo:

  • Declare dos estados, un nombre y un estado de función, para contener los datos de usuario recopilados de los campos de entrada mediante el enlace useState.
  • El onChange El método de cada campo de entrada ejecuta una devolución de llamada que usa los métodos de estado para capturar y almacenar datos que el usuario envía a través del formulario.
  • Para enviar los datos al servidor backend, la función del controlador onSubmit utiliza el Axios.post método para enviar los datos pasados ​​desde los estados como un objeto al punto final de la API de backend.

Para aplicar estilo al formulario representado, agregue el siguiente código al archivo App.css.

* {
relleno: 0;
margen: 0;
tamaño de caja: cuadro de borde;
}
cuerpo {
Familia tipográfica: 'Poppins', sans-serif;
color de fondo: #8EC1D6;
}


.logIn-formulario {
margen: 100píxelesauto;
ancho: 200píxeles;
altura: 250píxeles;
color de fondo: #fff;
borde-radio: 10píxeles; 
}


.logIn-formulariopag {
texto alineado: centro;
tamaño de fuente: 12píxeles;
peso de fuente: 600;
color: #B8BFC6;
relleno: 10píxeles 10píxeles;
}


.logIn-formularioaporte {
mostrar: bloquear;
ancho: 80%;
altura: 40píxeles;
margen: 10píxelesauto;
borde: 1píxelessólido#ccc;
borde-radio: 5píxeles;
relleno: 0 10píxeles;
tamaño de fuente: 16píxeles;
color: negro;
}
.logIn-formulariobotón {
color de fondo: #8EC1D6;
color: #fff;
cursor: puntero;
tamaño de fuente: 15píxeles;
borde-radio:7 píxeles;
relleno: 5píxeles 10píxeles;
borde: ninguno;
}

Ahora, active el servidor de desarrollo para actualizar los cambios y navegue hasta http://localhost: 3000 en su navegador para ver los resultados.

Crear un servidor Express.js

Un backend Express actúa como middleware entre su cliente React y la base de datos MongoDB. Desde el servidor, puede definir sus esquemas de datos y establecer la conexión entre el cliente y la base de datos.

Crear un servidor web Express e instalar estos dos paquetes:

npm instalar mongoose cors

Mongoose es una biblioteca de modelado de datos de objetos (ODM) para MongoDB y Node. Proporciona un método simplificado basado en esquemas para modelar los datos de su aplicación y almacenarlos en una base de datos MongoDB.

El paquete CORS (Cross-Origin Resource Sharing) proporciona un mecanismo para que el servidor backend y un cliente frontend se comuniquen y pasen datos a través de los puntos finales de la API.

Crear un esquema de datos

Cree una nueva carpeta en el directorio raíz de la carpeta del proyecto de su servidor y asígnele un nombre modelos. En esta carpeta, cree un nuevo archivo: esquema de datos.js.

Un esquema, en este caso, representa la estructura lógica de su base de datos. Define los documentos (registros) y campos (propiedades) que componen las colecciones dentro de la base de datos.

Agregue el siguiente código a dataSchema.js:

constante mangosta = requerir('mangosta');
constante ReactFormDataSchema = nuevo mangosta. Esquema({
 nombre: {
 tipo: Cadena,
 requerido: verdadero
 },
 role: {
 tipo: Cadena,
 requerido: verdadero
 }
});
constante Usuario = mangosta.modelo('Usuario', ReactFormDataSchema);
módulo.exportaciones = Usuario;

Este código crea un esquema Mongoose para un modelo de Usuario. Este esquema define la estructura de datos para los datos del usuario, incluidos el nombre y la función del usuario. A continuación, el esquema se utiliza para crear un modelo para el usuario. Esto permite que el modelo almacene datos en una colección MongoDB de acuerdo con la estructura definida en el esquema.

Configurar el servidor Express

A continuación, abra el índice.js archivo en la carpeta del proyecto del servidor y agregue este código:

constante expresar = requerir('expresar');
constante mangosta = requerir('mangosta');
constante corazones = requerir('corazón');
constante aplicación = expreso();
constante Usuario= requerir('./modelos/ReactDataSchema')
aplicación.uso (express.json());
app.use (cors());


mangosta.conectar('mongodb://localhost: 27017/reactdata', { useNewUrlParser: verdadero });


aplicación.post('/insertar', asíncrono(requerido, res) => {
constante Nombre = req.cuerpo.nombre
constante CompanyRole = req.body.companyRole


constante formularioDatos = nuevo Usuario({
 nombre, primer nombre,
 rol: CompanyRole
 })


intentar {
esperar formData.save();
 res.enviar("datos insertados..")
 } atrapar(Error) {
consola.log (error)
 }
});


constante puerto = proceso.env. PUERTO || 4000;
app.listen (puerto, () => {
consola.registro(`Servidor iniciado en el puerto ${puerto}`);
});

Vamos a desglosarlo:

  • Inicialice Express, mongoose y CORS en el servidor.
  • El paquete Mongoose establece la conexión a la base de datos MongoDB usando el conectar método que toma el dominio URI y un objeto. El URI es una cadena de conexión que se utiliza para establecer una conexión con la base de datos MongoDB. El objeto especifica la configuración; en este caso, contiene una configuración para usar la forma más nueva de analizador de URL.
  • El servidor web responde principalmente a las solicitudes provenientes de diferentes rutas con la función de controlador adecuada. Para este caso, el servidor tiene una ruta POST que recibe datos del cliente React, los almacena en una variable y los pasa al modelo de datos importados.
  • Luego, el servidor usa un bloque de prueba y captura para almacenar y guardar los datos en la base de datos de MongoDB, y cierra la sesión de cualquier error, si corresponde.

Finalmente, active el servidor de desarrollo para actualizar los cambios y diríjase a su cliente React en su navegador. Escriba cualquier dato en el formulario y vea los resultados en la base de datos de MongoDB.

Uso de la pila MERN para crear aplicaciones

La pila MERN proporciona un conjunto de herramientas eficiente y potente para crear aplicaciones. Puede crear aplicaciones completas del mundo real utilizando MongoDB, Express, React y Node.js,

El ecosistema React también proporciona paquetes para ayudarlo a trabajar con formularios web. Algunos de los más populares son Formik, KendoReact Form y React Hook Form.