📡 React Native (TypeScript) – Fetch API দিয়ে Data আনা

React Native অ্যাপে সার্ভার বা API থেকে ডেটা আনা সবচেয়ে গুরুত্বপূর্ণ কাজগুলোর একটি। এই লেসনে আমরা Fetch API ব্যবহার করে কীভাবে TypeScript সহ File-based React Native প্রজেক্টে ডেটা আনা যায়, তা ধাপে ধাপে শিখবো।

---

🔍 Fetch API কী?

Fetch API হলো JavaScript-এর built-in একটি ফাংশন, যা HTTP request (GET, POST ইত্যাদি) পাঠিয়ে সার্ভার থেকে ডেটা আনার জন্য ব্যবহার করা হয়।

• External library দরকার নেই
• Promise-based
• React Native-এ by default supported

---

📁 File Based Structure (Recommended)

src/
 ├── api/
 │    └── userApi.ts
 ├── screens/
 │    └── UsersScreen.tsx
 ├── types/
 │    └── user.ts
 └── App.tsx
  

এই structure ব্যবহার করলে কোড পরিষ্কার, maintainable এবং professional হয়।

---

🧾 Step 1: TypeScript Type তৈরি করা

প্রথমে আমরা API response এর জন্য একটি type তৈরি করবো।

/* src/types/user.ts */
export interface User {
  id: number;
  name: string;
  email: string;
}
  

---

🌐 Step 2: Fetch API Function তৈরি করা

এখন আমরা একটি আলাদা file-এ Fetch API ব্যবহার করে ডেটা আনার function লিখবো।

/* src/api/userApi.ts */
import { User } from '../types/user';

export const fetchUsers = async (): Promise<User[]> => {
  const response = await fetch(
    'https://jsonplaceholder.typicode.com/users'
  );

  if (!response.ok) {
    throw new Error('Data load failed');
  }

  return response.json();
};
  

✔ এখানে আমরা async/await এবং Promise<User[]> ব্যবহার করেছি, যা TypeScript-এ খুবই গুরুত্বপূর্ণ।

---

📱 Step 3: Screen Component-এ Data Load করা

/* src/screens/UsersScreen.tsx */
import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
import { fetchUsers } from '../api/userApi';
import { User } from '../types/user';

const UsersScreen: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    fetchUsers()
      .then(data => setUsers(data))
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) {
    return ;
  }

  if (error) {
    return {error};
  }

  return (
     item.id.toString()}
      renderItem={({ item }) => (
        
          {item.name}
          {item.email}
        
      )}
    />
  );
};

export default UsersScreen;
  

---

🧪 Output কী হবে?

• প্রথমে একটি loading spinner দেখাবে
• API থেকে user data আসবে
• প্রতিটি user এর নাম ও email list আকারে দেখাবে
• Error হলে error message দেখাবে

---

⭐ Best Practices

• API logic আলাদা file-এ রাখুন
• TypeScript type অবশ্যই ব্যবহার করুন
• Loading ও Error state handle করুন
• FlatList ব্যবহার করুন (performance ভালো)