React Native-এ সার্ভার থেকে ডেটা লোড করা (Fetch API)

React Native-এ সার্ভার থেকে ডেটা ফেচ করার জন্য Fetch API ব্যবহার করা হয়, যা XMLHttpRequest-এর মতো আধুনিক এবং প্রমিস-ভিত্তিক।

বেসিক Fetch কল

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data));

কিভাবে কাজ করে

• fetch() একটি প্রমিস রিটার্ন করে যার মধ্যে HTTP রেসপন্স থাকে।
• response.json() দিয়ে JSON বডি পার্স করা হয়।
• দ্বিতীয় আর্গুমেন্টে method, headers, body ইত্যাদি পাঠানো যায়।

উদাহরণ: GET রিকোয়েস্ট এবং UI-তে দেখানো

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class HttpExample extends Component {
  state = { data: '' };

  componentDidMount = () => {
    fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'GET'
    })
      .then(response => response.json())
      .then(responseJson => {
        console.log(responseJson);
        this.setState({ data: responseJson });
      })
      .catch(error => console.error(error));
  }

  render() {
    return (
      
        {this.state.data.body}
      
    );
  }
}

const App = () => ;
export default App;

রেসপন্স স্ট্রাকচার

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat...",
  "body": "quia et suscipit\nsuscipit recusandae..."
}

এখানে this.state.data.body ব্যবহার করে বডি টেক্সট দেখানো হয়েছে।

বেস্ট প্র্যাকটিস

• componentDidMount-এ ফেচ কল করুন (ক্লাস কম্পোনেন্টে)।
• ফাংশনাল কম্পোনেন্টে useEffect ব্যবহার করুন।
• এরর হ্যান্ডলিংয়ের জন্য .catch() অবশ্যই যোগ করুন।
• লোডিং স্টেট দেখাতে ActivityIndicator ব্যবহার করুন।

ফাংশনাল কম্পোনেন্টে useEffect উদাহরণ

import React, { useState, useEffect } from 'react';
import { Text, View, ActivityIndicator } from 'react-native';

const App = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(res => res.json())
      .then(json => {
        setData(json);
        setLoading(false);
      })
      .catch(err => {
        console.error(err);
        setLoading(false);
      });
  }, []);

  if (loading) return ;

  return {data?.body};
};

export default App;