React Journey: Part 4 — Working with Web API

There is no app existence without communicating server or at least a fake server. In our React learning journey we will now make our Notesy app to communicate to API even though its fake. In this article, we will make use of json-server to create API endpoint for our Notesy app and make our create, read, delete operation little dynamic.

If you are just started with React and have no idea about what happens at the backend, then don’t scare in this article we will create a backend for us without actually creating a backend. If you already know about backend and the React is the second thing you have taken then you can create your own API for that matter, but for this article will go for a fake one.

For creating a fake API will be using super awesome json-server. The steps for this are super simple and easy to follow. For making API call from our Notesy app we will be using another awesome package called axios.

We will head in this direction:

• Setup JSON Server
• Configure Axios
• Create Service Endpoints
• Invoke API — Get All
• Invoke API — Add
• Invoke API — Remove
• Configure Error Handling
• Configure Loader

Setup JSON Server

Steps to setup JSON server are easy-peasy. First install the package globally:

npm install -g json-server

Add this command to the package.json file:

"scripts": {
  "server": "json-server data.json"
}

As you can see in the command, we are referring to a data.json file. This file will hold the data for us, to which the json-sever will do the transaction (CRUD). The data.json file will be acting as a backend database in this case.

Let us create the data.json file for the same:

{
  "notes": [
    {
      "id": "44b0102d-bd91-4d12-b218-141ec217a6ac",
      "note": "Note 1"
    },
    {
      "id": "7a7d50cc-fe43-47df-931c-40e197a38251",
      "note": "Note 2"
    }
  ]
}

Here, we have defined an array of notes. Each note object has id and name. For…