📂 File Based JSON Data Parse ও Render in React Native (TypeScript)

React Native অ্যাপে অনেক সময় আমাদের লোকাল ফাইল (JSON file) থেকে ডেটা পড়ে UI-তে দেখাতে হয়। যেমন: প্রোডাক্ট লিস্ট, ইউজার ডেটা, সেটিংস ইত্যাদি। এই টিউটোরিয়ালে আমরা TypeScript ব্যবহার করে file-based JSON data কিভাবে parse ও render করা যায় তা শিখব।

📌 JSON File কী?

JSON (JavaScript Object Notation) হলো একটি lightweight data format, যা সাধারণত API response বা local data store করার জন্য ব্যবহৃত হয়।

React Native-এ আমরা .json ফাইল প্রজেক্টের ভিতরে রেখে সরাসরি import করতে পারি।

📁 Folder Structure (Recommended)

src/
 ├── data/
 │    └── users.json
 ├── screens/
 │    └── UserList.tsx
 └── App.tsx
  

📄 Sample JSON File (users.json)

[
  {
    "id": 1,
    "name": "Rahul Das",
    "email": "rahul@gmail.com"
  },
  {
    "id": 2,
    "name": "Anita Roy",
    "email": "anita@gmail.com"
  },
  {
    "id": 3,
    "name": "Sourav Sen",
    "email": "sourav@gmail.com"
  }
]
  

🧠 TypeScript Interface তৈরি করা

TypeScript ব্যবহার করলে আমরা ডেটার structure আগে থেকেই define করতে পারি, যা bug কমাতে সাহায্য করে।

interface User {
  id: number;
  name: string;
  email: string;
}
  

⚛️ JSON Data Import ও Render (UserList.tsx)

import React from 'react';
import { View, Text, FlatList } from 'react-native';
import users from '../data/users.json';

interface User {
  id: number;
  name: string;
  email: string;
}

const UserList: React.FC = () => {

  const renderItem = ({ item }: { item: User }) => (
    
      
        {item.name}
      
      
        {item.email}
      
    
  );

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

export default UserList;
  

🖥️ Output কেমন দেখাবে?

/*
UI Output:

--------------------------------
Rahul Das
rahul@gmail.com
--------------------------------
Anita Roy
anita@gmail.com
--------------------------------
Sourav Sen
sourav@gmail.com
--------------------------------

✔ প্রতিটি user card আকারে দেখাবে
✔ নাম bold ও teal কালারে
✔ email gray কালারে
*/
  

🎯 কেন File Based JSON ব্যবহার করবেন?

• API ছাড়া demo data দেখানোর জন্য
• Offline অ্যাপ বানানোর জন্য
• Prototype / Learning purpose-এ
• Static content store করার জন্য

⚠️ Important Notes

• JSON ফাইল অবশ্যই valid হতে হবে
• Large data হলে FlatList ব্যবহার করবেন
• TypeScript interface অবশ্যই match করতে হবে