React Js / API Integration

API Integration width Fetch

August 01, 2021

 

rjs-fetch



API integration with Fetch();
Free API ::  jsonplaceholder


Fetch API:

Fetch in layman term means "to get".
API is an acronym for Application Programming Interface.

* Fetch Documentation :: 

What exactly is an API ?
Now imagine you have an application or a program in your system which needs some data stored at a remote server. For your program to access that data it needs to let the server know about its requirement. And for this purpose it requires a communication interface through which the program can convey its request to the server and the server can respond in a specific format. This interface or the set of rules which our program uses to communicate with other software or server is called Application Programming Interface.

Fetch API
So, Fetch API provides this interface for your programs to be able to send requests to a URL or a remote server and recieve response based on that request in a hassel free way.

In this blog we are going to make a basic app around Fetch API, where we will fetch random todos/ posts/ images etc from the URL https://jsonplaceholder.typeicode.com ,

 
  import React from 'react';

  function App() {

    fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json())
    .then((json) => console.log(json));

    return (
      <div>


      </div>
    );
  }

  export default App;


API Fetch with, function and events :


  import React from 'react';

  function App() {

    var apiGet=()=>{

    fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json())
    .then((json) => console.log(json));

  };

    return (
      <div>

        My API ::
        <button onClick={apiGet}>
          Fetch API
        </button>

      </div>
    );
  }

  export default App;


store data in a useState([]);


 
  import React,{useState} from 'react';

  function App() {

    const [data, setData] = useState([]);

    const apiGet=()=>{

      fetch('https://jsonplaceholder.typicode.com/posts/')
      .then((response) => response.json())
      .then((json) => {
        // console.log(json);
        setData(json)

      });

    };


    return (
      <div>


        <button onClick={apiGet}>FetchAPI</button>
        <br />
        {JSON.stringify(data)}


      </div>
    );
  }

  export default App;
 


JSON.stringify()

A common use of JSON is to exchange data to/from a web server.
When sending data to a web server, the data has to be a string.
Convert a JavaScript object into a string with JSON.stringify()

Ex:
const obj = {name: "John", age: 30, city: "New York"};
const myJSON = JSON.stringify(obj);

fetch API Data in , table...


  import React,{useEffect,useState} from 'react'

  export default function App() {

    const [users,setUser]=useState([])

    useEffect(()=>{

      fetch("https://jsonplaceholder.typicode.com/todos")
      .then((result)=>{result.json()
      .then((resp)=>{
          // console.warn(resp)
          setUser(resp)
        })
      })

    },[])

    return (
      <div>

        <h1>Get API Data into Table </h1>
        <br />
        <table border="1" style={{width:"950px", margin:"25px"}}>
            <tr>
              <td>User ID</td>
              <td>Description</td>
              <td>Title</td>
            </tr>
            {users.map((item, i) => (
              <tr key={i}>
                <td>{item.userId}</td>
                <td>{item.title}</td>
                <td>{item.id}</td>
              </tr>
            ))}
        </table>

      </div>
    );
  }