Consumir api desde React

JSON Server es una herramienta que te permite crear rápidamente una API RESTful a partir de un archivo JSON. Es una excelente opción para crear prototipos de aplicaciones o simular una API real durante el desarrollo. Aquí te explico cómo instalar y usar JSON Server con algunos ejemplos:

Instalación:

Puedes instalar JSON Server globalmente utilizando npm:

npm install -g json-server

Uso básico:

1. Crea un archivo JSON con los datos que quieres utilizar como base de datos. Por ejemplo, crea un archivo llamado db.json con el siguiente contenido:

{
  "posts": [
    { "id": 1, "title": "Post 1", "body": "Cuerpo del post 1" },
    { "id": 2, "title": "Post 2", "body": "Cuerpo del post 2" }
  ]
}

1. Ejecuta JSON Server apuntando al archivo db.json:

json-server --watch db.json

Esto iniciará un servidor JSON en http://localhost:3000 con la API generada a partir del archivo db.json.

Ejemplos de uso:

1. Consultar todos los posts:

Realiza una solicitud GET a http://localhost:3000/posts para obtener todos los posts:

curl http://localhost:3000/posts

2. Consultar un post específico:

Realiza una solicitud GET a http://localhost:3000/posts/{id} para obtener un post específico (reemplaza {id} con el ID del post):

curl http://localhost:3000/posts/1

3. Crear un nuevo post:

Realiza una solicitud POST a http://localhost:3000/posts con los datos del nuevo post en el cuerpo de la solicitud:

curl -X POST -H "Content-Type: application/json" -d '{"title": "Nuevo Post", "body": "Cuerpo del nuevo post"}' http://localhost:3000/posts

4. Actualizar un post existente:

Realiza una solicitud PUT o PATCH a http://localhost:3000/posts/{id} con los datos actualizados del post en el cuerpo de la solicitud (reemplaza {id} con el ID del post):

curl -X PUT -H "Content-Type: application/json" -d '{"title": "Post Actualizado", "body": "Cuerpo del post actualizado"}' http://localhost:3000/posts/1

5. Eliminar un post:

Realiza una solicitud DELETE a http://localhost:3000/posts/{id} para eliminar un post específico (reemplaza {id} con el ID del post):

curl -X DELETE http://localhost:3000/posts/1

JSON Server te permite crear rápidamente una API RESTful a partir de un archivo JSON, lo que facilita el desarrollo y las pruebas de aplicaciones que interactúan con una API. Puedes utilizar JSON Server para simular una API real durante el desarrollo de tu aplicación React u otros proyectos web.