Introduction: Why HTTP Client Programming in React Matters

In modern web applications, interacting with REST APIs is essential. Whether you’re:

• Displaying blog posts from a CMS

• Fetching user data from a database

• Posting form submissions to a backend

You need to use HTTP client programming in React to make these interactions possible.

React doesn’t come with a built-in HTTP client, but with tools like the Fetch API or Axios, you can easily send GET, POST, PUT, and DELETE requests. This article will teach you how to fetch, display, and manage data efficiently in React.

What Is an HTTP Client?

An HTTP client is a tool or library that helps send HTTP requests (like GET, POST, PUT, etc.) from your frontend to a server or API.

Popular choices in React:

• Fetch API (built-in to modern browsers)

• Axios (a promise-based HTTP library)

⚙️ Setting Up: Basic React Project

If you're starting fresh:

npx create-react-app react-http-client-demo
cd react-http-client-demo

For Axios users:

npm install axios

Method 1: Using Fetch API in React

✅ Step-by-Step Example: Fetching Data from JSONPlaceholder

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

function FetchPosts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // Fetch data from API on component mount
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json()) // Convert response to JSON
      .then((data) => setPosts(data)) // Store in state
      .catch((error) => console.error('Error fetching posts:', error));
  }, []); // Empty dependency array = run only once

  return (
    <div>
      <h2>Fetched Posts</h2>
      <ul>
        {posts.slice(0, 5).map((post) => (
          <li key={post.id}><strong>{post.title}</strong></li>
        ))}
      </ul>
    </div>
  );
}

export default FetchPosts;

useEffect ensures the API is called only after the component is mounted.

Method 2: Using Axios in React

✅ Step-by-Step Example: Axios with useEffect

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

function AxiosPosts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => setPosts(response.data))
      .catch((error) => console.error('Axios Error:', error));
  }, []);

  return (
    <div>
      <h2>Axios Fetched Posts</h2>
      <ul>
        {posts.slice(0, 5).map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default AxiosPosts;

⚡ Axios automatically parses JSON and handles errors more gracefully in some cases.

Sending POST Requests (Submit Forms)

Example: Send Data Using Fetch

function submitPost() {
  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
      title: 'New Post',
      body: 'This is the content',
      userId: 1,
    }),
    headers: {
      'Content-type': 'application/json; charset=UTF-8',
    },
  })
    .then((res) => res.json())
    .then((data) => console.log('Post Success:', data));
}

Same with Axios:

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'New Post',
  body: 'This is the content',
  userId: 1,
})
.then(response => console.log('Post Success:', response.data));

✅ Full Working Code Example: Axios GET + Button to Fetch

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

function PostsFetcher() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);

  const getPosts = async () => {
    setLoading(true);
    try {
      const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
      setPosts(res.data.slice(0, 5));
    } catch (err) {
      console.error('API Error:', err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ padding: '1rem' }}>
      <h2>HTTP Client with Axios</h2>
      <button onClick={getPosts} disabled={loading}>
        {loading ? 'Loading...' : 'Fetch Posts'}
      </button>
      <ul>
        {posts.map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </div>
  );
}

export default PostsFetcher;

Tips & Common Pitfalls

✅ Best Practices

• Use useEffect to avoid calling APIs in render.

• Use async/await for better readability.

• Handle loading and error states.

• Abstract logic into custom hooks (e.g., useFetch).

• Store responses in context or Redux for global access.

❌ Common Pitfalls

Comparison: Fetch vs Axios

Conclusion: React + HTTP = Dynamic Web Apps

HTTP client programming in React is the backbone of any dynamic app. Whether you're building an eCommerce platform or a blog, fetching and sending data effectively is key.

Takeaways:

• Use useEffect to fetch on mount

• Prefer Axios for advanced use cases

• Show loading and error states for good UX

• Abstract API logic into hooks for reuse