API Rest, json-server y Postman

React app backend calls

Hook useCallback: it leaves the function reference frozen. When it's a function that parent component passes to a child component, we don't want it to be rendered on the child every time the parent changes. "Functions also have a reference". Example here

Run the local mocks server (json-server) en una nueva consola:

cd mocks-server
npm i
npm start

In Postman test the Rest API of tasks that exposes the local mocks server:

• GET /tasks: Gets the task list.
• GET /tasks/:id: Gets the task with id id.
• POST /tasks + body: Create a new task (the body goes without id).
• PUT /tasks/:id + body: Update the task with id id(mashes the whole object)
• PATCH /tasks/:id + body: Modifies certain properties of the task with id id.
• DELETE /tasks/:id: Delete the task with id id.
• COPY
• HEAD
• OPTIONS: related to CORS, it does not give you information from JavaScript.

The App component is prepared to display the appropriate visual components according to the different states that the interface may have:

• Loading the task list
• An error occurred while loading the task list.
• Processing a request (add, delete or toggle if a task is done).
• An error occurred while processing a request.

To make calls to the backend from the frontend, I use axios:

npm i axios --save

The services/TaskListService.js file will contain the backend call logic.

The correct place to define the path to the base URL of the backend services is in an environment variable. It is possible to define environment variables in a project create-react-app in the file [.env] of the project root:

They must be prefixed with REACT_APP_. For example

REACT_APP_BASE_URL=http://localhost:3003

Then, in the application code it is queried with:

process.env.REACT_APP_BASE_URL

The result query returning a Promise, which is the type of data returned by the axios functions, must be done using async and await, along with try and catch.

The initial loading of the task list is implemented, giving feedback on the loading process, informing about possible errors and offering the possibility to retry.