API integration is a critical part of modern web development, and React.js makes it easy to work with APIs. In this article, I'll guide you through the process of effectively integrating a RESTful API into your React.js application using Axios, covering scenarios for GET, POST, PUT, and PATCH requests.

Introduction

Axios is a popular JavaScript library for making HTTP requests in the browser and Node.js. It provides a simple and consistent API for working with RESTful APIs. In this article, we'll explore how to use Axios to interact with a RESTful API in a React.js application.

Making GET Requests

To fetch data from a RESTful API using Axios in a React.js component, you can use the axios.get method. Here's an example:

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

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        // Handle API request error
      });
  }, []);

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

Making POST Requests

To send data to the API using a POST request, you can use the axios.post method. Here's an example of posting data to create a new resource:

import React, { useState } from 'react';
import axios from 'axios';
function App() {
 const [formData, setFormData] = useState({ name: '', email: '' });
 const handleSubmit = (event) => {
   event.preventDefault();
   axios.post('https://api.example.com/users', formData)
     .then((response) => {
       // Handle successful POST request
     })
     .catch((error) => {
       // Handle API request error
     });
 };
 return (
   <form onSubmit={handleSubmit}>
     <input
       type="text"
       placeholder="Name"
       value={formData.name}
       onChange={(e) => setFormData({ ...formData, name: e.target.value })}
     />
     <input
       type="email"
       placeholder="Email"
       value={formData.email}
       onChange={(e) => setFormData({ ...formData, email: e.target.value })}
     />
     <button type="submit">Submit</button>
   </form>
 );
}

Making PUT and PATCH Requests
To update existing resources in the API, you can use the axios.put method for complete updates or the axios.patch method for partial updates. Here's an example of making a PUT request:

import React, { useState } from 'react';
import axios from 'axios';
function App() {
 const [formData, setFormData] = useState({ name: '', email: '' });
 const handleUpdate = () => {
   axios.put('https://api.example.com/users/1', formData)
     .then((response) => {
       // Handle successful PUT request
     })
     .catch((error) => {
       // Handle API request error
     });
 };
 return (
   <div>
     <input
       type="text"
       placeholder="Name"
       value={formData.name}
       onChange={(e) => setFormData({ ...formData, name: e.target.value })}
     />
     <input
       type="email"
       placeholder="Email"
       value={formData.email}
       onChange={(e) => setFormData({ ...formData, email: e.target.value })}
     />
     <button onClick={handleUpdate}>Update</button>
   </div>
 );
}

Using Axios in a React.js application, you can easily perform GET, POST, PUT, and PATCH requests to interact with a RESTful API. Effective API integration is essential for building data-driven React applications, and Axios simplifies the process while providing robust error handling and flexibility.