How to Integrate REST APIs in React with fetch and Axios

REST API Integration in React

Integrating REST APIs into a React application is a common task for web developers. REST (Representational State Transfer) is an architectural style that allows you to interact with external resources (data) via HTTP methods like GET, POST, PUT, DELETE, etc. React makes it easy to integrate with REST APIs, allowing you to fetch data, post new data, and handle various API responses efficiently.

In this guide, we’ll explore how to integrate REST APIs into a React app using different methods like the Fetch API, Axios, and handling asynchronous data fetching.

---

1. Fetching Data from a REST API

The fetch() function is built into JavaScript and provides a simple way to make HTTP requests. It returns a Promise that resolves to the Response object representing the response to the request.

Using fetch API in React

Here’s a simple example using the fetch API to get data from a REST API and display it in a React component.

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example REST API

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

• useState: Used to store the posts, loading state, and any error messages.
• useEffect: Handles the fetching of data when the component is mounted.
• fetch(): Fetches data from the REST API endpoint, then processes it into JSON format.
• Error Handling: Catches any errors (like network issues) and sets the error state.

---

2. Using Axios for API Requests

Axios is a promise-based HTTP client for the browser and Node.js. It’s an alternative to fetch and is often preferred for its cleaner syntax and additional features like automatic JSON transformation, request cancellation, and more.

Installing Axios

To use Axios, first install it via npm:

npm install axios

Using Axios to Fetch Data

Here’s the same example as above but with Axios.

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts';

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API using Axios
    axios
      .get(API_URL)
      .then((response) => {
        setPosts(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

• axios.get(): Fetches data from the REST API. Axios automatically parses the response as JSON.
• Error Handling: If there’s an error, it’s caught and displayed in the component.

---

3. Sending Data to a REST API (POST Requests)

In addition to GET requests, you can send data to a server using POST requests. This is commonly used for submitting forms or creating new records.

Using fetch for POST Requests

import React, { useState } from 'react';

const POST_URL = 'https://jsonplaceholder.typicode.com/posts';

const CreatePost = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [status, setStatus] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();

    const postData = { title, body };

    // Send POST request with fetch
    const response = await fetch(POST_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(postData),
    });

    if (response.ok) {
      setStatus('Post created successfully!');
    } else {
      setStatus('Failed to create post.');
    }
  };

  return (
    <div>
      <h1>Create Post</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <textarea
          placeholder="Body"
          value={body}
          onChange={(e) => setBody(e.target.value)}
        />
        <button type="submit">Create Post</button>
      </form>
      {status && <p>{status}</p>}
    </div>
  );
};

export default CreatePost;

• POST request: Sends data to the API in JSON format. In this case, we're sending a new post with a title and body.
• JSON.stringify(): Converts JavaScript objects into a JSON string for the request body.

Using Axios for POST Requests

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

const POST_URL = 'https://jsonplaceholder.typicode.com/posts';

const CreatePost = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [status, setStatus] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();

    const postData = { title, body };

    // Send POST request with Axios
    try {
      const response = await axios.post(POST_URL, postData);
      setStatus('Post created successfully!');
    } catch (error) {
      setStatus('Failed to create post.');
    }
  };

  return (
    <div>
      <h1>Create Post</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <textarea
          placeholder="Body"
          value={body}
          onChange={(e) => setBody(e.target.value)}
        />
        <button type="submit">Create Post</button>
      </form>
      {status && <p>{status}</p>}
    </div>
  );
};

export default CreatePost;

• axios.post(): Sends a POST request to the API. The request body contains the data to be sent.

---

4. Conclusion

Integrating a REST API into a React application is a crucial skill for modern web development. Whether you use fetch() or a library like Axios, React provides you with powerful hooks like useEffect and useState to manage API requests and update the UI based on the response. You can fetch data, send data, and handle errors gracefully, ensuring a smooth user experience.

---