API Integration

An API integration is the connection between two or more applications, via their APIs, that lets those systems exchange data. API integrations power processes throughout many high-performing businesses that keep data in sync and enhance productivity.

There are two methods to fetch data from API in React

Using JavaScript Fetch API
Using Axios Library

1) Using JavaScript Fetch API

// import node module libraries
import { useEffect, useState } from "react";

const APIIntegration = () => {
    const [productInfo, setProductInfo] = useState()
    useEffect(() => {
        fetch("https://dummyjson.com/products/1")
            .then((response) => response.json())
            .then((data) => setProductInfo(data))
            .catch(error => console.error('Error fetching data:' + error));
    }, [])
    return (
        <div className="docs-content mx-xxl-9">
            <pre>{JSON.stringify(productInfo, null, 2)}</pre>
        </div>
    );
};
export default APIIntegration;

2) Using Axios Library

// import node module libraries
import axios from "axios";
import { useEffect, useState } from "react";

const APIIntegration = () => {
    const [productInfo, setProductInfo] = useState()
    useEffect(() => {
        axios.get("https://dummyjson.com/products/1")
            .then((response) => setProductInfo(response.data))
            .catch(error => console.error('Error fetching data:' + error));
    }, [])
    return (
        <div className="docs-content mx-xxl-9">
            <pre>{JSON.stringify(productInfo, null, 2)}</pre>
        </div>
    );
};

export default APIIntegration;

Above both method will show the same result as shown below.

{
  "id": 1,
  "title": "Essence Mascara Lash Princess",
  "description": "The Essence Mascara Lash Princess is a popular mascara known for its volumizing and lengthening effects. Achieve dramatic lashes with this long-lasting and cruelty-free formula.",
  "category": "beauty",
  "price": 9.99,
  "discountPercentage": 7.17,
  "rating": 4.94,
  "stock": 5,
  "tags": [
    "beauty",
    "mascara"
  ],
  "brand": "Essence",
  "sku": "RCH45Q1A",
  "weight": 2,
  "dimensions": {
    "width": 23.17,
    "height": 14.43,
    "depth": 28.01
  },
  "warrantyInformation": "1 month warranty",
  "shippingInformation": "Ships in 1 month",
  "availabilityStatus": "Low Stock",
  "reviews": [
    {
      "rating": 2,
      "comment": "Very unhappy with my purchase!",
      "date": "2024-05-23T08:56:21.618Z",
      "reviewerName": "John Doe",
      "reviewerEmail": "john.doe@x.dummyjson.com"
    },
    {
      "rating": 2,
      "comment": "Not as described!",
      "date": "2024-05-23T08:56:21.618Z",
      "reviewerName": "Nolan Gonzalez",
      "reviewerEmail": "nolan.gonzalez@x.dummyjson.com"
    },
    {
      "rating": 5,
      "comment": "Very satisfied!",
      "date": "2024-05-23T08:56:21.618Z",
      "reviewerName": "Scarlett Wright",
      "reviewerEmail": "scarlett.wright@x.dummyjson.com"
    }
  ],
  "returnPolicy": "30 days return policy",
  "minimumOrderQuantity": 24,
  "meta": {
    "createdAt": "2024-05-23T08:56:21.618Z",
    "updatedAt": "2024-05-23T08:56:21.618Z",
    "barcode": "9164035109868",
    "qrCode": "https://assets.dummyjson.com/public/qr-code.png"
  },
  "images": [
    "https://cdn.dummyjson.com/products/images/beauty/Essence%20Mascara%20Lash%20Princess/1.png"
  ],
  "thumbnail": "https://cdn.dummyjson.com/products/images/beauty/Essence%20Mascara%20Lash%20Princess/thumbnail.png"
}