You have already heard about APIS and we need to integrate APIs with a frontend to call data from servers.
In modern react we use the useEffect hook to fetch data from API.
What is useEffect Hook?
useEffect hook is used to fetch data, or manually changing the DOM in React components.
In the above example, we are changing in DOM after clicking on the count button by changing variable by count+1
Inside teh useEffect hook we call a function called fetch(url) with parameter of the api link we want to fetch data from
Here we are fetching articles from the local DB I have created on port 8000 you can have any link you want in place of that.
As we are getting a promise as return here we need to call .then function and return response.json and again call .then function to set data
Now understand How it works in 3 simple step
Call fetch function with url as parameter in useEffect Hook.
Call .then function and return response as res,json function
Again to handle promise as we have now data as an object setState to object data
Below is the code attached to give you insight over above three steps
These 3 steps will be universal for calling any apis data in modern Reactjs .
Follow me on Instagram to learn more about React js fundamentals