Aplicación Cliente-Servidor con REACT-NODE-Express

Bienvenido. Aquí está la parte teórica de tu nuevo proyecto que te abrirá una nueva visión sobre las aplicaciones móviles cliente-servidor con el uso de la API.

Bienvenido. Aquí está la parte teórica de tu nuevo proyecto que te abrirá una nueva visión sobre las aplicaciones móviles cliente-servidor con el uso de la API. En este artículo te explicaré cómo puedes conectar tu frontend React creado con Vite a tu backend Node.js o Express. Sin más demoras, comencemos.

Primero, abrí VS Code en un directorio llamado vite-express-video, aquí abrí el terminal y comenzaremos creando primero nuestro frontend React. Luego te guiaré en la configuración del backend.

Creo el directorio vite-express-video y con el prompt de terminal puedo utilizar el comando

Code . en el directorio y se abrirá directamente vs code

> code . en el directorio y se abrirá directamente vs code


Entonces, podemos comenzar con npm create vite@latest (o npm create vite) y se nos pedirá una serie de preguntas sobre nuestra aplicación. Primero debemos instalar el paquete create-vite, así que presiono enter.

Para obtener información sobre esto puedo inferir al sitio

https://vite.dev/guide/ en la sección scaffolding

Se nos pedirá el nombre del proyecto, y para esto escribiré simplemente client.

Luego se nos pedirá seleccionar un framework: como se intuye del título del video, seleccionaremos React.
En la voz variant selecciono JavaScript. (atención este proyecto puedo testear esta modalidad)


Ahora que el proyecto está creado, entramos en el directorio client con cd client y luego ejecutamos

npm install

para instalar todas las dependencias necesarias. Después de unos segundos, una vez que todas las dependencias están instaladas, podemos proceder a la configuración del backend.

PARTe SERVIDOR

Por lo tanto, una vez creado el frontend, te muestro ahora cómo crear el servidor.

Creo un directorio server yendo a la sección Explorer y haciendo clic en el icono de “crear carpeta”.
Luego, limpio el terminal y entro en el directorio server con cd .. para salir de client, y luego /server para entrar en server. (Navegación básica en la carpeta!)


Aquí ejecuto npm init -y para generar un archivo package.json con las configuraciones predeterminadas.

Si expandes la carpeta server, verás que el archivo ha sido creado. Ahora abrimos package.json para configurarlo.

Cambiamos el punto de entrada del servidor de index.js (valor predeterminado) a server.js. Esto es solo por preferencia personal: si quieres puedes dejar index.js o usar otro nombre.
Creo entonces el archivo con touch server.js, que ahora aparece en el proyecto.

Ahora instalamos las dependencias necesarias para el backend.
Primero, limpio el terminal y instalo Express con npm i express. Luego instalo nodemon con npm i nodemon -D para que el servidor se reinicie automáticamente cuando modifiquemos el código.

Después de la instalación, actualizamos los scripts en package.json.

Agregamos:

“start”: “node server”,
“dev”: “nodemon server”

Asegúrate de que después de node o nodemon esté el nombre correcto de tu archivo de inicio (en este caso, server.js).

Ahora podemos comenzar a crear nuestra API backend. Abrimos server.js y escribimos:

const express = require(‘express’);
const app = express();

app.get(‘/api’, (req, res) => {
res.json({ fruits: [‘apple’, ‘orange’, ‘banana’] });
});

app.listen(8080, () => {
console.log(‘Server started on port 8080’);
});

El servidor escucha en el puerto 8080. Si vas a http://localhost:8080/api en el navegador, verás un objeto con un array llamado fruits.

Ahora debemos configurar CORS para que el backend acepte solicitudes del frontend. Abrimos un nuevo terminal en la carpeta server y ejecutamos npm i cors.
Luego, en el código importamos y configuramos CORS:

const cors = require(‘cors’);
const corsOptions = { origin: ‘http://localhost:5173’ };
app.use(cors(corsOptions));

Perfecto. Ahora podemos pasar al frontend. Entro en la carpeta client con cd ../client, limpio el terminal, e instalo Axios con npm i axios.

Abrimos src/App.jsx, iniciamos el servidor frontend con npm run dev, y visitamos http://localhost:5173.
Para probar el fetching de datos, hacemos así:

import { useEffect, useState } from ‘react’;
import axios from ‘axios’;

function App() {
const [array, setArray] = useState([]);

useEffect(() => {
const fetchApi = async () => {
const response = await axios.get(‘http://localhost:8080/api’);
console.log(response.data.fruits);
setArray(response.data.fruits);
};
fetchApi();
}, []);

return (

{array.map((fruit, index) => (

{fruit}

))}

);
}

export default App;

Ahora, si actualizas la página, verás apple, orange, y banana visualizados.
Si cambias los datos en el backend (por ejemplo, de orange a strawberry), guardando y actualizando el frontend verás el cambio aplicado automáticamente, gracias a nodemon.

Resumen: