HTTP and React requests

rafaelzucarelli

Zucarelli

Posted on March 19, 2024

HTTP and React requests

- Using the JSON server
JSON Server is a tool that allows you to quickly create a complete and functional REST API with just a few commands, using a JSON file as a data source. It is very useful during application development, especially when you need to simulate a backend while working on the frontend.

Rescuing data from the "API"

  1. First of all, we must have a place to save them. (useState);

  2. Render the "API" call only once. (useEffect);

  3. A means of making the request asynchronously. (Fetch API);

Saving the data via hook: "useState"

Image description

Rendering the API call only once with the hook: "useEffect". Performing the asynchronous request. ("fetch")
Image description

Adding Data

  • To add an item, we'll need to retrieve the form data with the useState

  • We have to merge the data into a function after submitting and sending a "POST" request to our API;

  • The process is very similar to data rescue, but now we're sending data.

Retrieving data from the form...

Image description

Function after submit and a POST request to our API

Image description

  • The data is sent in the request body to the server. This can include form data, such as username and password, or any other type of information that the client wishes to send to the server. The server receives the POST request and processes the sent data. This may involve validating the data, saving it to a database, or performing other operations according to the application's business logic. The server responds to the POST request, usually with an HTTP status code indicating whether the operation was successful or not. The server can also send additional data in the response body if necessary.
💖 💪 🙅 🚩
rafaelzucarelli
Zucarelli

Posted on March 19, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related