Enviar datos a una API desde React

Autor: | Última modificación: 14 de septiembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

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.

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.

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!