DEV Community

Kevin Bravo
Kevin Bravo

Posted on

Improvements and REACT

I've learned a lot since starting my journey to becoming a Web Developer. Improving and enhancing my skills on certain topics along with learning new concepts and skills is what I am doing every day.

The fetch method was one skill that I am proud to say that I have improved threw out my learning experience. This method paired with React has increased my skills.

What is a fetch method?
The fetch request is used to request data/information from a server. This method sends a request to the server and is returned a promise, a response object. With this data, you can do several things.
Image description

The above image is an example of a fetch request.

What are fetch requests used for?
The request that fetch() does returns data in JSON or XML. At the current time, I have only dealt with the JSON response. The data that returns can be used for a few things. The image above shows a simple GET request. This GET request retrieves data from an API(Application Programming Interface).

Image description
The above image is an example of the data that is fetched from an API. There are also other requests besides the GET request.

Image description
The above image is an example of a POST request that allows you to add data to the server. When you use the POST request make sure that all the information is the desired data because the POST request will add the object EXACTLY how you write it. An incorrect Post can lead to errors in your project or incorrect outcomes.

There is also a DELETE and PATCH request.
Image description
The above image is an example of a DELETE request that when provided the id of a specific object will permanently remove the object from the server. A PATCH request also requires an id but instead of removing the object, it allows you to modify any value from a specific key. Just like the POST request make sure that the change is the one desired since this will modify the value and affect your outcome when making any other requests.
Other key parts of the fetch request are method, headers, body, and how to handle the promise.
Method
This lets you specify what the fetch will do. The default method of the fetch request is GET, which simply returns the data stored in the server. POST, DELETE, and PATCH are other requests you can do.
Headers
This tells the request what kind of promise you are requesting (In our case, it would be JSON). You can also specify that you only want to accept JSON format.
Body
This part is used to specify the object that you want to post or modify. The information has to be exact because whatever you specify to be in the body will be the exact information that gets posted or gets patched.
.then
This part is used to receive the data and turn it into a response that we can read. We use .json() to receive the information and read it in a way that our project can read it. We then use another .then() to assign the data into a variable so that we can use and read it inside our project.

REACT
React is declarative programming. React tells the program what it should do and leaves the determination to the program on how it should look. Learning React has made programming slightly easier for me because it allows me to leave the formatting to the program and allows me to focus on the bigger picture of the outcome. It lets me split the project into components that allow me to see every part of the project in individual parts making it easier to manipulate and code.

Image description

My journey
When I first learned about fetch it was hard for me to understand the concept of it all. I was able to acquire the skills and knowledge for me to use the fetch requests to form my react projects much easier and faster. I remember when I first started using fetch it was hard for me to use it because I did not comprehend what every part of fetch did. Now I am able to explain this method in a much more clear way. While learning to use React I was able to combine my better understanding of fetch to be able to manipulate and use the data in my React projects.

Top comments (0)