REACT REST API

In React, REST APIs are used to interact with backend services to fetch, create, update, or delete data. React provides multiple ways to integrate REST APIs, such as the Fetch API or libraries like Axios.

What is a REST API?

A REST API (Representational State Transfer) allows communication between the frontend (React) and backend services. It uses HTTP methods like:

GET: Retrieve data.
POST: Send data to the server.
PUT/PATCH: Update data.
DELETE: Remove data.

Basic Steps to Use a REST API in React

Install Axios or Use Fetch
You can use the Fetch API (native to JavaScript) or install Axios for a simpler experience.
Install Axios:
```
npm install axios
```
Try It Now
Understand Endpoints
Know the API endpoints you’ll be interacting with. For example:
- GET https://jsonplaceholder.typicode.com/posts → Fetch all posts.
- POST https://jsonplaceholder.typicode.com/posts → Create a post.
Use State and Effects
Use React’s useState and useEffect to manage data fetching and state updates.

Example: Fetching Data from a REST API

This example fetches posts from a REST API.

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

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

  useEffect(() => {
    // Fetch data from the API
    const fetchPosts = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        setPosts(response.data); // Store data
        setLoading(false);       // Stop loading
      } catch (err) {
        setError(err.message);  // Handle errors
        setLoading(false);
      }
    };

    fetchPosts();
  }, []); // Empty dependency array runs useEffect only on mount

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

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

export default App;

Try It Now

Example: Sending Data to a REST API (POST)

This example creates a new post using a POST request.

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

const App = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [response, setResponse] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('https://jsonplaceholder.typicode.com/posts', {
        title,
        body,
        userId: 1, // Example payload
      });
      setResponse(res.data); // Set response data
    } catch (error) {
      console.error('Error:', error);
    }
  };

  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)}
        ></textarea>
        <button type="submit">Submit</button>
      </form>
      {response && (
        <div>
          <h2>Response</h2>
          <p>Post created with ID: {response.id}</p>
        </div>
      )}
    </div>
  );
};

export default App;

Try It Now

Example: Updating Data with a REST API (PUT)

const updatePost = async () => {
  try {
    const res = await axios.put('https://jsonplaceholder.typicode.com/posts/1', {
      title: 'Updated Title',
      body: 'Updated Body',
    });
    console.log(res.data); // Log updated data
  } catch (error) {
    console.error('Error:', error);
  }
};

updatePost();

Try It Now

Example: Deleting Data from a REST API

const deletePost = async (id) => {
  try {
    await axios.delete(`https://jsonplaceholder.typicode.com/posts/${id}`);
    console.log('Post deleted');
  } catch (error) {
    console.error('Error:', error);
  }
};

deletePost(1); // Deletes post with ID 1

Try It Now

Custom Hook for Fetching REST APIs

To reuse the logic for fetching data, create a custom hook.

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(url);
        setData(response.data);
        setLoading(false);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

export default useFetch;

Try It Now

Usage:

import React from 'react';
import useFetch from './useFetch';

const App = () => {
  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/posts');

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

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default App;

Try It Now

Best Practices

Use State Management: If your app grows, consider state management libraries like Redux or Context API to handle API state.
Loading & Error States: Always manage loading and error states for a better user experience.
Global Axios Instance: Create an Axios instance for reusable configuration (base URL, headers, etc.).
Environment Variables: Store API URLs and keys in .env files to keep them secure and configurable.
Handle Pagination: Use parameters like ?page=1&limit=10 to fetch data in chunks.