Consumir API en un componente React utilizando Ajax JQuery
Queremos consumir un servicio API en un componente React, para ello, voy a utilizar Ajax con JQuery para poder hacer las operaciones CRUD y, por tanto, consumir el servicio.
Debéis tener instalado el programa node.js para que el terminal nos pueda reconocer los comandos que vamos a utilizar en los siguientes apartados.
Lo primero que vamos a necesitar para poder hacerlo es crearnos un proyecto React. Lo haremos utilizando el siguiente comando:
En este caso yo he llamado a mi proyecto crudjquery.
He utilizado el programa Cmder que es un terminal para poder ejecutar los comandos, pero también podéis utilizar el símbolo del sistema.
Una vez creado me voy a situar en la carpeta del proyecto y le voy a añadir unas funcionalidades al mismo mediante los siguientes comandos:
- JQuery.
- React-Router-Dom (no es necesario para el proyecto, pero lo voy a utilizar para tener más organizado el proyecto).
- BootStrap (opcional para darle diseño).
No dispongo de acceso un servicio API público para poder realizar todas las operaciones CRUD, pero nos vamos a crear un servicio API local para posteriormente poder consumirlo.
Creación de una Api local
Necesitaremos tener un fichero JSON que contenga los datos que vamos consumir más tarde. En el enlace del GitHUb de al final del post hay disponible una copia alumnos.json que es el que he utilizado.
Ejecutaremos el comando “npm install -g json-server” en nuestro Cmder.
Nos situaremos en la carpeta donde esta nuestro fichero JSON y ejecutaremos el siguiente comando “json-server –watch alumnos.json”. En este caso “alumnos.json” es el fichero que voy a utilizar yo para el servicio API.
Ya tendríamos desplegado nuestro servicio API poder consumirlo.
Operaciones CRUD
En nuestro proyecto React he creado 4 componentes, en cada uno de ellos voy a realizar una operación CRUD distinta. En cada componente voy a necesitar importar el JQuery instalado mediante los comandos utilizados antes.
Realizar operación CRUD GET.
En mi primer componente voy a realizar la operación GET.
Nuestra llamada a la API se realiza introduciendo la url en el apartado “url”, el tipo de dato que vamos a leer, y la operación a realizar en el “method”. Si realiza correctamente la operación entrará en el apartado “success” y realizará el código que le indiquemos. Una vez realizada la operación, ya que el código se ejecuta más rápido que la llamada al servicio, conseguiremos, con el método “then” que ejecute un determinado código justo al acabar la operación. En este proyecto he creado un array de alumnos dentro del método y una variable booleana llamada “status” para poder cambiar los valores del “state” posteriormente, porque en el “success” del Ajax el “state” de React no es reconocido y daría un error si lo intentamos realizar de esa forma.
Realizar operación CRUD POST.
Es muy parecida que la operación “GET”. Las diferencias son que en este caso el método es el “POST”, hay un apartado “data” que le asignamos nuestro alumno en formato JSON y tenemos “content-type”, en él indicamos el formato en el que vamos a realizar la inserción.
Realizar operación CRUD PUT.
Se realiza de la misma manera que la operación “POST, solo modificamos el “method” que en este caso es “PUT” para realizar la modificación y en “url” debemos indicar cuál es objeto a modificar, en este ejemplo seria el alumno.
Realizar operación CRUD DELETE.
Realizara una eliminación de un objeto de la Api. Realizaremos lo mismo que en la operación “GET” con la diferencia del “method” que es “DELETE” y en “url” debemos indicar cuál es objeto a modificar, en este ejemplo seria el alumno.
Autor: Carlos Campayo Serrano
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2020-2021
Código / recursos utilizados / Otros datos de interés: https://github.com/CarlosCampayo/postReactCarlosCampayo.git