Integrating JavaScript API Calls with React

⭕️Let's briefly understand what an API

An API (Application Programming Interface) acts like a waiter in a restaurant. The waiter (API) takes your order (request), goes to the kitchen (server), and brings back your food (response). For this to work smoothly, both the waiter and the kitchen must follow clear rules like how to take orders and how to serve these are the "rules and protocols”.

If anyone doesn't have an idea about APIs, this Postman guide will be helpful to understand -https://www.postman.com/what-is-an-api/

⭕️How to implement inside your application?

➡️ Using Traditional JavaScript: fetch() and .then()

In traditional JavaScript, the fetch() method is used to make API requests. It returns a Promise, which allows us to handle asynchronous operations, It is like waiting for a response from a server.

For this example, I have used Fake Store API — a free and simple REST API that provides dummy e-commerce data like products, users, and carts. You can also use it to practice making API requests.
Visit: https://fakestoreapi.com/

Let’s get understand about one by one line,
👉 fetch('https://fakestoreapi.com/products/1')
Sends a GET request to the Fake Store API to retrieve information about the product with ID 1.
👉 .then(response => response.json())
When the response is received, it is converted from raw format to JSON.
👉 .then(json => console.log(json))
After converting to JSON, it logs the product data to the browser console.
👉 .catch(error => console.error('Error:', error))
If something goes wrong (like a network error), this will catch and display the error.

➡️ Using async/await with fetch()

👉 The async keyword allows the function to use await.
👉 await fetch(...) waits for the API response.
👉 await response.json() waits for the response to be converted into JSON.
👉 try...catch is used for error handling, making it easier to read and manage errors than .catch()

Both of these code blocks — the one using .then() and the one using async/await — do the same thing. they fetch data from an API. Now, a common question might come into someone’s mind,
"If both do the same thing, why do we have two different ways to write them?" the answer is simple

⭐️ then() is good and still widely used, but can get confusing with deep chains.
⭐️ async/await is easier to read, write, and debug — especially when your app logic becomes more complex.

⭕️Practicality Usage with React application

you can get complete idea with reading commented lines.

👉 useState is used to store the product data.
👉 useEffect runs once when the component mounts.
👉 Inside useEffect, we define an async function and call it immediately.
👉 We fetch product data from the Fake Store API and store it in state.
👉 Once the data is loaded, it’s rendered inside the JSX.

This is a practical and common pattern in React for fetching and displaying API data.

I hope this guide helps you understand how to fetch and display data from an API in JavaScript and React. If you have any questions or run into issues, feel free to reach out. The concepts shared here will be really beneficial as you continue building your applications. Thank you for reading!