React API
Data From API
- API is "Application Programming Interface".
- It is a concept of Distributed Computing.
- Distributed computing allows 2 different applications running on 2 different mechines to share information.
(or)
2 different application running in 2 different process of same mechine can share
information.
- API main role is to make data reachable to any device and any platform.
- Worlds First API is "Ebay".
- API have 3 specifications
a) SOAP
b) REST
c) JSON
- SOAP [Service Oriented Architecture Protocol]
Consumer => XML request
Provider => XML response
- REST [Representational State Transfer]
Consumer => query request
Provider => XML response
- JSON [JavaScript Object Notation]
Consumer => JSON Request
Provider => JSON Response
- Various Distributed Computing Technologies
CORBA
DCOM
RMI
EJB
Web Services
Remoting
Consuming API in React:
----------------------------------
- React can use various JavaScript promises and jQuery library or any 3rd party for consuming API.
- React implicitly don't have any library for API.
JavaScript Promise fetch()
jQuery Ajax $.getJSON(), $.ajax()
3rd Party axios()
- Axios
- WhatWgFetch
- Storing of API data is done by using "state" : useState()
- You can fetch data from any API and store in a reference of state on various events.
- If you want to fetch the data from API at the time of initialization of component then you have to use a hook called "useEffect()".
- useEffect is a hook that defines action to perform at the time of
a) Mounting a Component and
b) Unmounting a Component
Syntax:
useEffect(()=>{
},[dependencies]);
Ex: Consuming and Presenting API data using JavaScript Fetch promise
fetch("url").then(response in binary).then(response in JSON).catch()
[XmlHttpRequest]
Nasa.component.js
import { useEffect, useState } from "react";
export function NasaComponent()
{
const [mars, setMars] = useState([]);
function LoadPhotos(){
fetch("https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=DEMO_KEY")
.then(function(response){
return response.json();
})
.then(function(data){
setMars(data.photos);
})
}
useEffect(()=>{
LoadPhotos();
},[]);
return(
<div className="container-fluid mt-3">
<h2>Mars Rover Photos </h2>
<table className="table table-hover">
<thead>
<tr>
<th>Photo Id</th>
<th>Preview</th>
<th>Camera</th>
<th>Rover</th>
</tr>
</thead>
<tbody>
{
mars.map(item=>
<tr key={item.id}>
<td>{item.id}</td>
<td>
<img src={item.img_src} width="100" height="100" />
</td>
<td>{item.camera.full_name}</td>
<td>{item.rover.name}</td>
</tr>
)
}
</tbody>
</table>
</div>
)
}
Ex: Card Style
import { useEffect, useState } from "react";
import "./nasa.component.css";
export function NasaComponent()
{
const [mars, setMars] = useState([]);
function LoadPhotos(){
fetch("https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=DEMO_KEY")
.then(function(response){
return response.json();
})
.then(function(data){
setMars(data.photos);
})
}
useEffect(()=>{
LoadPhotos();
},[]);
return(
<div className="container-fluid mt-3">
<h2>Mars Rover Photos </h2>
<div className="d-flex flex-wrap">
{
mars.map(item=>
<div className="card m-2 p-2" id="card">
<img src={item.img_src} className="card-img-top" height="200"/>
<div className="card-body">
<dl>
<dt>Camera</dt>
<dd>{item.camera.full_name}</dd>
<dt>Rover</dt>
<dd>{item.rover.name}</dd>
</dl>
</div>
</div>
)
}
</div>
</div>
)
}