Comenzando con el stack MERN
Si has decidido crear una aplicación con React y un backend en Node.js, el stack MERN es una excelente opción. Este conjunto de tecnologías incluye MongoDB como base de datos, Express como framework de Node.js, React como biblioteca de frontend y Node.js como motor de backend.
Una de las grandes ventajas de estos componentes es que se integran de manera efectiva, permitiendo una comunicación fluida entre ellos y simplificando la interacción con los datos. Además, cada tecnología ofrece amplias posibilidades de personalización y expansión, permitiendo a los desarrolladores crear aplicaciones complejas y a la medida.
Pero, ¿cómo empezar a utilizar el stack MERN en tu proyecto? Primero, deberás instalar cada tecnología por separado. A continuación, te mostramos algunos pasos básicos para realizar la configuración:
1. Instalación de MongoDB
MongoDB es una base de datos de documentos NoSQL, utilizada para almacenar y recuperar datos. La instalación es sencilla, simplemente descarga la versión adecuada a tu sistema operativo desde la página oficial de MongoDB y sigue los pasos del asistente de instalación.
2. Instalación de Express
Express es un framework de aplicación web de Node.js. Para su instalación, debes utilizar el comando npm install express en la terminal, dentro del directorio de tu proyecto.
3. Instalación de React
React es una biblioteca de JavaScript utilizada para construir interfaces de usuario. Para su instalación, puedes utilizar el comando npx create-react-app my-app en la terminal, indicando el nombre de tu aplicación.
4. Instalación de Node.js
Node.js es el motor de backend utilizado en el stack MERN. Para su instalación, descarga la versión adecuada a tu sistema operativo desde la página oficial de Node.js y sigue los pasos del asistente de instalación.
Una vez instalados todos los componentes del stack MERN en tu proyecto, podrás empezar a trabajar en la configuración y diseño de tu aplicación. ¡A disfrutar!
Configurando el servidor con Express
Para poder crear nuestra aplicación con un backend en Node, es necesario configurar el servidor con Express. Express es un framework minimalista y flexible de Node.js que nos permite crear aplicaciones web y servidores de manera sencilla y rápida.
Lo primero que debemos hacer es instalar Express utilizando npm:
npm install express --save
Una vez instalado, podemos crear un archivo server.js en la raíz de nuestro proyecto y configurar el servidor de la siguiente manera:
const express = require("express");
const app = express();
app.get("/", (req, res) => {
res.send("¡Hola mundo!");
});
app.listen(3000, () => {
console.log("Servidor corriendo en el puerto 3000");
});
En este ejemplo, estamos creando una instancia de Express, definiendo una ruta (/) que responde con el mensaje “¡Hola mundo!” y configurando el servidor para que escuche en el puerto 3000. Para iniciar el servidor, basta con ejecutar el comando node server.js.
También podemos añadir middleware a nuestro servidor de Express. El middleware es una función que se ejecuta antes de que se maneje una petición, permitiéndonos modificar la solicitud o la respuesta. Por ejemplo, podemos añadir el middleware body-parser para poder parsear JSON en nuestras solicitudes:
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.json());
app.post("/api/usuarios", (req, res) => {
console.log(req.body);
res.send("Usuario creado correctamente");
});
app.listen(3000, () => {
console.log("Servidor corriendo en el puerto 3000");
});
En este caso, estamos añadiendo el middleware bodyParser.json() con use() para poder parsear JSON en las solicitudes. Luego, estamos definiendo una ruta (/api/usuarios) que responde con el mensaje “Usuario creado correctamente” y utilizando console.log() para mostrar en consola el objeto req.body, que contiene la información de la solicitud.
Con Express, podemos configurar nuestro servidor de manera sencilla y rápida, permitiéndonos crear nuestro backend en Node de manera eficiente y efectiva. ¡Anímate a crear tu propia aplicación React con un backend en Node usando Express!
Creando el diseño de la interfaz con React
Una de las cosas más importantes al crear una aplicación interactiva es la interfaz de usuario. Para nuestro proyecto, utilizaremos React para crear una interfaz que sea fácil de usar y atractiva para los usuarios. En este artículo, te guiaré en la creación del diseño de la interfaz con React.
Lo primero que debemos hacer es crear componentes, que son elementos reutilizables que conformarán nuestra interfaz. Un componente puede ser un botón, un cuadro de texto o incluso una sección completa de la aplicación. Podemos crear componentes con la ayuda de React y reutilizarlos en cualquier parte de la aplicación.
Un ejemplo de componente que podríamos crear es un botón. En este caso, podemos crear un botón que cambie de color cuando se haga clic en él. Para hacer esto, utilizamos el método setState de React para cambiar el estado del componente y luego utilizamos este estado para determinar el color del botón.
// Componente de Botón
class Button extends React.Component {
constructor(props) {
super(props);
this.state = { clicked: false };
}
handleClick() {
this.setState({ clicked: !this.state.clicked });
}
render() {
const text = this.state.clicked
? "¡Haz clic otra vez!"
: "Haz clic aquí";
return <button onClick={() => this.handleClick()}>{text}</button>;
}
}
Podemos utilizar este componente en cualquier parte de nuestra aplicación. Podríamos tener un botón de inicio de sesión que utilice el mismo componente que creamos anteriormente.
Al crear una interfaz con React, es importante crear componentes reutilizables y utilizar el estado para controlar el comportamiento de estos componentes. De esta manera, podemos crear una interfaz atractiva y fácil de usar para nuestros usuarios. ¡Practica la creación de componentes y sigue explorando la maravillosa funcionalidad de React!
Conectando el frontend y el backend
Ahora que hemos creado nuestro frontend y nuestro backend por separado, es hora de conectarlos para que se comuniquen entre sí.
Para esto, utilizaremos una técnica llamada API REST. Una API REST es un conjunto de reglas y protocolos que permite que dos aplicaciones se comuniquen entre sí a través de internet. En nuestro caso, nuestro frontend consumirá una serie de servicios que nuestro backend le proporcionará.
Lo primero que debemos hacer es definir los llamados endpoints de nuestra API. Los endpoints son los distintos servicios que nuestro backend ofrecerá. Por ejemplo, podríamos tener un endpoint para listar todos los usuarios de nuestra aplicación, otro para crear un nuevo usuario, otro para actualizar un usuario existente, etc.
Una vez definidos nuestros endpoints, debemos asegurarnos de que nuestro backend esté preparado para atender las solicitudes que nuestro frontend le haga. Para esto, debemos implementar la lógica necesaria en nuestro código. A continuación, te mostraremos un ejemplo sencillo en Node.js para implementar un endpoint que devuelva la lista de usuarios de nuestra aplicación:
app.get("/users", (req, res) => {
const users = [
{ name: "John", age: 27 },
{ name: "Jane", age: 32 },
{ name: "Bob", age: 45 },
];
res.send(users);
});
Este código define un endpoint llamado /users que devuelve una lista de usuarios. Cuando hagamos una solicitud GET a este endpoint desde nuestro frontend, recibiremos la lista de usuarios como respuesta.
Finalmente, en nuestro frontend debemos hacer las solicitudes a los diferentes endpoints de nuestra API para consumir los servicios. Para esto, usaremos una librería llamada axios que nos permite hacer peticiones http de forma sencilla. En el siguiente código te mostramos un ejemplo de cómo consultar el endpoint /users desde nuestro frontend con axios:
axios
.get("http://localhost:3001/users")
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.log(error);
});
En este caso, estamos haciendo una solicitud GET al endpoint /users de nuestro backend, que está corriendo en el puerto 3001. Cuando obtengamos la respuesta, simplemente la imprimimos en la consola del navegador.
De esta forma, hemos logrado conectar nuestro frontend y nuestro backend para que se comuniquen entre sí y podamos consumir los servicios que nuestro backend ofrece.
Implementando la autenticación de usuarios
Una vez que ya tienes tu aplicación React lista, es momento de implementar la autenticación de usuarios en tu backend en Node. Este proceso es crucial para la seguridad y privacidad de los datos de tus usuarios, por lo que es importante hacerlo de manera correcta.
Para comenzar, vamos a utilizar el paquete passport de Node.js para manejar la autenticación de usuarios. Este paquete ha sido ampliamente utilizado en la comunidad de Node.js y ofrece una gran variedad de estrategias de autenticación, como OAuth y JWT.
Para instalar passport, simplemente ejecuta el siguiente comando en la terminal de Node:
npm install passport passport-local
El siguiente paso es configurar passport en tu archivo app.js y definir una estrategia de autenticación. Por ejemplo, si queremos utilizar la estrategia de autenticación local (es decir, utilizando correo electrónico y contraseña), podemos hacer lo siguiente:
const passport = require("passport");
const LocalStrategy = require("passport-local").Strategy;
const User = require("./models/User");
passport.use(
new LocalStrategy(
{ usernameField: "email" },
async (email, password, done) => {
const user = await User.findOne({ email: email });
if (!user) {
return done(null, false, { message: "Usuario no encontrado." });
}
if (!user.validPassword(password)) {
return done(null, false, { message: "Contraseña incorrecta." });
}
return done(null, user);
}
)
);
En este ejemplo, estamos definiendo la estrategia de autenticación local, en la que estamos utilizando el correo electrónico como campo de usuario y verificando la contraseña utilizando la función validPassword de nuestro modelo de usuario.
Luego, en nuestro archivo de routes/auth.js, podemos utilizar passport.authenticate para manejar la autenticación de nuestros usuarios:
router.post(
"/login",
passport.authenticate("local", {
successRedirect: "/dashboard",
failureRedirect: "/login",
failureFlash: true,
})
);
En este ejemplo, estamos utilizando la estrategia de autenticación local que definimos anteriormente, y estamos redirigiendo a nuestros usuarios a diferentes rutas dependiendo si la autenticación fue exitosa o no.
Recuerda que la implementación de la autenticación de usuarios es solo una parte del proceso. También es importante implementar medidas de seguridad adicionales, como la encriptación de contraseñas y la validación de entradas del usuario.
La implementación de la autenticación de usuarios en Node es un proceso esencial para garantizar la seguridad y privacidad de los datos de los usuarios en tu aplicación React