Toda aplicación web recibe y envía datos a otros sitios para procesarlos de diversas maneras. Una de las comunicaciones más comunes es entre nuestra aplicación y nuestra API o servidor. En este post, te enseñaremos cómo enviar datos a una API desde React para procesarlos y dar acceso al usuario.
¿Cómo enviar datos a una API desde React?
Lo primero que debemos hacer para enviar datos a una API desde React es crear un espacio de servicio que haga una llamada a nuestra API. Este proceso es similar a lo que hemos hecho en nuestros posts sobre configurar un cliente en Axios y crear una función get con un cliente Axios. En estos posts, hemos creado una función client que nos ayuda a hacer una llamada a nuestra API de una manera más simple. La diferencia entre esta función y la que crearemos a continuación es que allí llamábamos a nuestra API para tomar datos del servidor, mientras que ahora queremos enviar datos a una API desde React o consumir api con react.
Entonces, para crear esta nueva función, primero crearemos un archivo que se llame service. Recuerda que en programación solemos crear distintos módulos para dividir nuestras secciones de código. Esto nos permite tener un proyecto más ordenado y limpio. En nuestro caso, hemos creado este archivo service.js dentro de una carpeta que hemos llamado auth, donde manejamos todo el proceso de autenticación de credenciales. Esta carpeta está, a su vez, metida dentro de una carpeta components, donde creamos todos los componentes de nuestra aplicación.
En este post estamos sugiriéndote formas de ordenar tu proyecto, pero tú debes encontrar la mejor manera de organizar tu aplicación según lo que esta requiera.
Lo primero que haremos dentro de este archivo service.js, con el que vamos a enviar datos a una API desde React, es importar nuestro cliente Axios. Para ello, usamos la palabra clave import y la ruta que nos lleva al punto en el que está localizado este archivo. A continuación, un ejemplo de esta línea de código:
import client from “../.. /api/client”;
Ahora, crearemos una nueva función que llamaremos login, con la que podemos enviar datos a una API desde React. Para ello, usaremos el método client.post que tenemos configurado desde nuestro backend para que podamos llamar al endpoint de login, pasar unas credenciales y recibir un token de acceso cuando estas son correctas. A este método deberemos pasarle nuestras credenciales. En nuestro caso, estas están guardadas en las claves username y password que hemos creado en nuestros posts sobre crear una página de login en React y unir estados en react api.
A continuación, te mostramos cómo va esta función hasta el momento:
export const login = credentials => {
return client.post ({
username: credentials.username,
password: credentials.password,
});
};
Ahora, en esta función también debemos pasar la ruta del endpoint al que queremos mandar nuestros datos. Esta ruta se pasa como primer parámetro de la función.
export const login = credentials => {
return client.post (‘/auth/login’, {
username: credentials.username,
password: credentials.password,
});
};
Con la función anterior hemos logrado enviar datos a una api en react. Sin embargo, este código todavía puede ser mejor y más simple. Para ello, usaremos el destructuring. Si no conoces muy bien este concepto, te invitamos a leer nuestro post sobre destructuring de componentes en React.
Entonces, una primera desestructuración puede ser la siguiente:
export const login = { username, password }) =>
return client.post (‘/auth/login’, {
username: username,
password: password,
});
};
Ahora, en JavaScript podemos reducir aún más este código. Recuerda que, en Javascript, cuando la clave la asociamos a una variable con el mismo nombre, podemos reducirlos a una sola palabra.
export const login = { username, password }) =>
return client.post (‘/auth/login’, {
username,
password,
});
};
En nuestro caso, estas dos claves están guardadas dentro del objeto credentials en la página de login de nuestra aplicación. Por ello, podemos seguir desestructurando la función de la siguiente manera:
export const login = credentials =>
return client.post (‘/auth/login’, {
username,
password,
});
};
Ten presentes las distintas claves que guardas dentro de tu objeto. Si tienes más claves dentro del objeto credentials, es mejor pasar las claves de username y password directamente. Si no lo haces de esta manera, estarás enviando todas las claves que tengas a tu API.
¿Qué sigue?
Ahora que sabes exactamente cómo enviar datos a una API en React, ¡es el momento de usar este conocimiento en tus propias aplicaciones web! Si quieres conocer cómo crear todo tipo de proyectos de programación para la web, no solo en React, sino también en JavaScript, CSS y HTML, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. Con este programa de formación intensiva, te convertirás en un experto del desarrollo web en pocos meses. ¿A qué esperas para inscribirte? ¡Hazlo ya!
