Shikha Tech Blog

GET CALL fetch method returns a promise, which we access basically using then method.  response.json() : converts the data into JSON import React from " react "; const FetchApiGet = () => { const [data, setData] = React . useState ( {} ); const fetchApiData = () => { fetch ( " https://jsonplaceholder.typicode.com/todos/1 " ) . then ((response) => response . json ()) . then ((json) => setData (json)); } ; return ( < div > < pre > {JSON. stringify (data, null , 2 )} </ pre > < button className = " btn btn-primary " onClick = {fetchApiData} > Fetch Data </ button > </ div > ); } ; export default FetchApiGet;

 Go to BootStrap website:  Bootstrap Website  Copy the CSS part:    And paste it into your index.html file <!-- CSS only --> < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin = "anonymous" > Now you will be used to apply various styles using bootstrap classes.

React itself cannot perform the API calls, so it uses HTTP libraries for the same. Popular HTTP libraries are:  Axios & Fetch AXIOS Vs FETCH Axios  - By default works on JSON data.  - HTTP methods.  - only one .then method is there.  - better error handling mechanism.   AXIOS Axios is a promise-based library, so the promise must be handled. So we use `then` to handle the promise if it is fulfilled, and `catch` if it is rejected (aka, I get an error). `Then` is a callback function that automatically has the response object as an argument. That’s great for us because the data we’re retrieving will be inside that response object.  useEffect runs after the component is rendered . Adding the empty brackets [ ] as an argument is necessary so the code doesn’t run in an infinite loop. This second argument tells useEffect to only render if certain values have changed. We’re essentially telling useEffect to  only  run on render , because we’re pass...