Skip to content

Latest commit

 

History

History
69 lines (48 loc) · 2.84 KB

README.md

File metadata and controls

69 lines (48 loc) · 2.84 KB
Raw

todo-app-with-json-server

Main concepts

  • 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

How to use it?

  • 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.

React app backend calls, with load and error feedback.

  • 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.