Aplicativo Cliente-Servidor 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. En este artículo, te explicaré cómo puedes conectar tu frontend de React creado con Vite a tu backend de Node.js o Express. Sin más demora, comencemos.

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 de React creado con Vite a tu backend de Node.js o Express. Sin más demora, comencemos.

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

Creé 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 hará 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 hacer referencia al sitio

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

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

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


Ahora que el proyecto está creado, entro en el directorio client con cd client y luego ejecuto

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 la 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 la configuración predeterminada.

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 la terminal e 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 una nueva 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 la 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: