Fetch API / Axios দিয়ে Data Load in React.js – Full Beginner Friendly Guide

React অ্যাপে প্রায় সবসময়ই API থেকে ডাটা লোড করতে হয়। যেমনঃ User List, Product List, Blog Posts ইত্যাদি। এই কাজটি করার জন্য React-এ সাধারণত দুইটি পদ্ধতি ব্যবহৃত হয়:

Fetch API (Browser built-in)
Axios (Third-party library)

এই টিউটোরিয়ালে আপনি শিখবেন:

কিভাবে Fetch API দিয়ে ডাটা লোড করবেন
কিভাবে Axios দিয়ে ডাটা লোড করবেন
useEffect দিয়ে API call পরিচালনা
Error Handling এবং Loading State
POST request কিভাবে করবেন

📌 Fetch API দিয়ে Data Load

Fetch API হলো ব্রাউজারের বিল্ট-ইন API, কোনো লাইব্রেরি ইনস্টল না করেই ব্যবহার করা যায়।

✔ Step 1: Basic GET Request Example


// Users.js
import { useEffect, useState } from "react";

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

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div>
      <h2>Users List</h2>
      {users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

export default Users;

✔ ব্যাখ্যা:

useEffect() → component load হলে API কল করে
fetch() → API request পাঠায়
res.json() → response JSON এ convert করে
setUsers(data) → state-এ ডাটা রাখে

✔ Add Loading & Error State


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

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => {
        if (!res.ok) throw new Error("Failed to load");
        return res.json();
      })
      .then(data => setUsers(data))
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

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

  return (
    <div>
      <h2>Users List</h2>
      {users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

এটি একটি প্রফেশনাল API handling method।

✔ POST Request with Fetch API


function addUser() {
  fetch("https://jsonplaceholder.typicode.com/users", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Prabir", email: "test@mail.com" })
  })
    .then(res => res.json())
    .then(data => console.log("User Created:", data));
}

📌 Axios দিয়ে Data Load

Axios হলো একটি জনপ্রিয় library, যা Fetch API থেকে সহজ এবং clean syntax প্রদান করে।

✔ Axios Install করুন:


npm install axios

✔ Basic Axios GET Request


// UsersAxios.js
import axios from "axios";
import { useEffect, useState } from "react";

function UsersAxios() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/users")
      .then(res => setUsers(res.data));
  }, []);

  return (
    <div>
      <h2>Users List (Axios)</h2>
      {users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

export default UsersAxios;

✔ কেন Axios Fetch API এর চেয়ে ভালো?

Auto JSON parsing (Fetch-এ manually করতে হয়)
Built-in error handling
Shorter and cleaner syntax
Interceptors সাপোর্ট করে (Authentication Tokens এর জন্য দারুণ)

✔ Axios GET with Loading & Error


function UsersAxios() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/users")
      .then(res => setUsers(res.data))
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

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

  return (
    <div>
      <h2>Users List (Axios)</h2>
      {users.map(u => (
        <p key={u.id}>{u.name}</p>
      ))}
    </div>
  );
}

✔ POST Request (Axios)


axios.post("https://jsonplaceholder.typicode.com/users", {
  name: "Prabir",
  email: "test@mail.com"
})
.then(res => console.log("User Added:", res.data));

📌 useEffect এর ভিতরে API Call কেন করা হয়?

Component load হলে একবারই API কল করতে পারি
Infinite loop এড়ানো যায়
React lifecycle অনুযায়ী সঠিক সময়ে data fetch হয়

📌 API Loading Best Practices

Always show loading state
Handle network errors
Try/catch ব্যবহার করা ভালো
Axios হলে interceptors ব্যবহার করা যায়

📌 Real-Life Project Example

E-commerce → Products Load
Social Media → Posts Load
Weather App → Weather API
Admin Dashboard → Users List

📌 Summary

Fetch API → Browser built-in, simple GET/POST
Axios → More powerful and cleaner syntax
API loading করতে useEffect ব্যবহার করতে হয়
Loading & Error handling খুব গুরুত্বপূর্ণ

Fetch API / Axios দিয়ে Data Load