ReactJS Http client programming

Last modified on: September 7, 2025

<h1 data-start="455" data-end="492"><strong data-start="457" data-end="492">ReactJS HTTP Client Programming</strong></h1>
<p data-start="494" data-end="725">In any real-world React application, you&rsquo;ll need to <strong data-start="546" data-end="570">fetch data from APIs</strong> or <strong data-start="574" data-end="599">send data to a server</strong>. This process is called <strong data-start="624" data-end="651">HTTP client programming</strong>. React doesn&rsquo;t have a built-in HTTP client, so developers commonly use:</p>
<ul data-start="727" data-end="815">
<li data-start="727" data-end="773">
<p data-start="729" data-end="773"><strong data-start="729" data-end="742">Fetch API</strong> (built into modern browsers)</p>
</li>
<li data-start="774" data-end="815">
<p data-start="776" data-end="815"><strong data-start="776" data-end="785">Axios</strong> (popular 3rd-party library)</p>
</li>
</ul>
<hr data-start="817" data-end="820" />
<h2 data-start="822" data-end="856"><strong data-start="825" data-end="856">1. Using Fetch API in React</strong></h2>
<h3 data-start="858" data-end="896">Example: GET Request (Fetch Users)</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React, { useEffect, useState } from "react";

function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

useEffect(() =&gt; {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) =&gt; res.json())
      .then((data) =&gt; {
        setUsers(data);
        setLoading(false);
      })
      .catch((error) =&gt; console.error("Error fetching users:", error));
  }, []);

if (loading) return &lt;p&gt;Loading...&lt;/p&gt;;

return (
    &lt;div&gt;
      &lt;h2&gt;User List&lt;/h2&gt;
      &lt;ul&gt;
        {users.map((user) =&gt; (
          &lt;li key={user.id}&gt;{user.name} ({user.email})&lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/div&gt;
  );
}

export default Users;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1604" data-end="1623">✅ <strong data-start="1606" data-end="1621">Explanation</strong></p>
<ul data-start="1624" data-end="1741">
<li data-start="1624" data-end="1659">
<p data-start="1626" data-end="1659"><code data-start="1626" data-end="1638">fetch(url)</code> makes the request.</p>
</li>
<li data-start="1660" data-end="1703">
<p data-start="1662" data-end="1703"><code data-start="1662" data-end="1688">.then(res =&gt; res.json())</code> parses JSON.</p>
</li>
<li data-start="1704" data-end="1741">
<p data-start="1706" data-end="1741">Stored in state using <code data-start="1728" data-end="1738">setUsers</code>.</p>
</li>
</ul>
<hr data-start="1743" data-end="1746" />
<h3 data-start="1748" data-end="1784">Example: POST Request (Add User)</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>function AddUser() {
  const handleAdd = () =&gt; {
    fetch("https://jsonplaceholder.typicode.com/users", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name: "John Doe", email: "john@example.com" }),
    })
      .then((res) =&gt; res.json())
      .then((data) =&gt; console.log("User added:", data))
      .catch((error) =&gt; console.error("Error adding user:", error));
  };

return &lt;button onClick={handleAdd}&gt;Add User&lt;/button&gt;;
}

export default AddUser;
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2313" data-end="2316" />
<h2 data-start="2318" data-end="2348"><strong data-start="2321" data-end="2348">2. Using Axios in React</strong></h2>
<p data-start="2350" data-end="2366">Install Axios:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>npm install axios
</code></pre>
</div>
</div>
</div>
</div>
<h3 data-start="2399" data-end="2434">Example: GET Request with Axios</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React, { useEffect, useState } from "react";
import axios from "axios";

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

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

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

export default Posts;
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="3035" data-end="3038" />
<h3 data-start="3040" data-end="3076">Example: POST Request with Axios</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>function CreatePost() {
  const handleCreate = () =&gt; {
    axios
      .post("https://jsonplaceholder.typicode.com/posts", {
        title: "New Post",
        body: "This is the content of the post",
        userId: 1,
      })
      .then((res) =&gt; console.log("Post created:", res.data))
      .catch((error) =&gt; console.error("Error creating post:", error));
  };

return &lt;button onClick={handleCreate}&gt;Create Post&lt;/button&gt;;
}

export default CreatePost;
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="3549" data-end="3552" />
<h2 data-start="3554" data-end="3601"><strong data-start="3557" data-end="3601">3. HTTP Methods in React (Summary Table)</strong></h2>
<div class="_tableContainer_1rjym_1">
<div class="_tableWrapper_1rjym_13 group flex w-fit flex-col-reverse" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="3603" data-end="3921">
<thead data-start="3603" data-end="3642">
<tr data-start="3603" data-end="3642">
<th data-start="3603" data-end="3612" data-col-size="sm">Method</th>
<th data-start="3612" data-end="3622" data-col-size="sm">Purpose</th>
<th data-start="3622" data-end="3642" data-col-size="sm">Example Use Case</th>
</tr>
</thead>
<tbody data-start="3683" data-end="3921">
<tr data-start="3683" data-end="3723">
<td data-start="3683" data-end="3693" data-col-size="sm"><strong data-start="3685" data-end="3692">GET</strong></td>
<td data-start="3693" data-end="3706" data-col-size="sm">Fetch data</td>
<td data-start="3706" data-end="3723" data-col-size="sm">Get user list</td>
</tr>
<tr data-start="3724" data-end="3770">
<td data-start="3724" data-end="3735" data-col-size="sm"><strong data-start="3726" data-end="3734">POST</strong></td>
<td data-start="3735" data-end="3751" data-col-size="sm">Send new data</td>
<td data-start="3751" data-end="3770" data-col-size="sm">Create new user</td>
</tr>
<tr data-start="3771" data-end="3822">
<td data-start="3771" data-end="3781" data-col-size="sm"><strong data-start="3773" data-end="3780">PUT</strong></td>
<td data-start="3781" data-end="3804" data-col-size="sm">Update existing data</td>
<td data-start="3804" data-end="3822" data-col-size="sm">Update profile</td>
</tr>
<tr data-start="3823" data-end="3878">
<td data-start="3823" data-end="3835" data-col-size="sm"><strong data-start="3825" data-end="3834">PATCH</strong></td>
<td data-start="3835" data-end="3857" data-col-size="sm">Update partial data</td>
<td data-start="3857" data-end="3878" data-col-size="sm">Change user email</td>
</tr>
<tr data-start="3879" data-end="3921">
<td data-start="3879" data-end="3892" data-col-size="sm"><strong data-start="3881" data-end="3891">DELETE</strong></td>
<td data-start="3892" data-end="3906" data-col-size="sm">Remove data</td>
<td data-start="3906" data-end="3921" data-col-size="sm">Delete user</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr data-start="3923" data-end="3926" />
<h2 data-start="3928" data-end="3952"><strong data-start="3931" data-end="3952">4. Best Practices</strong></h2>
<ul data-start="3953" data-end="4268">
<li data-start="3953" data-end="3994">
<p data-start="3955" data-end="3994">Use <strong data-start="3959" data-end="3974">async/await</strong> for cleaner code.</p>
</li>
<li data-start="3995" data-end="4046">
<p data-start="3997" data-end="4046">Always handle <strong data-start="4011" data-end="4022">loading</strong> and <strong data-start="4027" data-end="4043">error states</strong>.</p>
</li>
<li data-start="4047" data-end="4109">
<p data-start="4049" data-end="4109">Use a dedicated API file for reusability (e.g., <code data-start="4097" data-end="4105">api.js</code>).</p>
</li>
<li data-start="4110" data-end="4185">
<p data-start="4112" data-end="4185">Prefer <strong data-start="4119" data-end="4128">Axios</strong> for advanced needs (interceptors, cancellation, etc.).</p>
</li>
<li data-start="4186" data-end="4268">
<p data-start="4188" data-end="4268">For large apps, consider <strong data-start="4213" data-end="4234">React Query / SWR</strong> for caching &amp; state management.</p>
</li>
</ul>

Web Technology View More