📁 React Native File-based Project Structure (TypeScript সহ)

একটি ভালো React Native প্রজেক্ট স্ট্রাকচার অ্যাপকে করে তোলে maintainable, scalable এবং professional। এই কোর্সে আমরা TypeScript ভিত্তিক File-based Structure ব্যবহার করবো।

---

🏗️ Recommended Project Structure (TypeScript)

📦 myApp
 ┣ 📂 src
 ┃ ┣ 📂 assets
 ┃ ┃ ┣ 📂 images
 ┃ ┃ ┗ 📂 icons
 ┃ ┣ 📂 components
 ┃ ┃ ┣ Button.tsx
 ┃ ┃ ┗ Header.tsx
 ┃ ┣ 📂 screens
 ┃ ┃ ┣ HomeScreen.tsx
 ┃ ┃ ┣ LoginScreen.tsx
 ┃ ┃ ┗ ProfileScreen.tsx
 ┃ ┣ 📂 navigation
 ┃ ┃ ┗ AppNavigator.tsx
 ┃ ┣ 📂 services
 ┃ ┃ ┗ api.ts
 ┃ ┣ 📂 store
 ┃ ┃ ┣ index.ts
 ┃ ┃ ┗ userSlice.ts
 ┃ ┣ 📂 hooks
 ┃ ┃ ┗ useAuth.ts
 ┃ ┣ 📂 utils
 ┃ ┃ ┗ helpers.ts
 ┃ ┣ 📂 types
 ┃ ┃ ┗ user.ts
 ┃ ┗ App.tsx
 ┣ package.json
 ┗ tsconfig.json
  

---

🖼️ assets/ ফোল্ডার

এখানে অ্যাপের সব static files রাখা হয়।

• Images (png, jpg, webp)
• Icons
• Custom fonts

---

🧩 components/ (Reusable UI)

এখানে ছোট ছোট Reusable UI Components রাখা হয়।

import { Text, TouchableOpacity } from 'react-native';

type Props = {
  title: string;
};

const Button = ({ title }: Props) => {
  return (
    
      {title}
    
  );
};

export default Button;
  

✔ Output: এই Button কম্পোনেন্ট যেকোনো Screen-এ ব্যবহার করা যাবে।

---

📱 screens/ (App Screens)

প্রতিটি Screen বা Page আলাদা ফাইলে রাখা হয়।

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

const HomeScreen = () => {
  return (
    
      Home Screen
    
  );
};

export default HomeScreen;
  

✔ Output: অ্যাপে একটি Home Screen দেখা যাবে।

---

🧭 navigation/ (Routing System)

React Navigation সংক্রান্ত সব কোড এখানে রাখা হয়।

import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from '../screens/HomeScreen';

const AppNavigator = () => {
  return (
    
      
    
  );
};

export default AppNavigator;
  

---

🌐 services/ (API & Backend Calls)

import axios from 'axios';

export const api = axios.create({
  baseURL: 'https://api.example.com',
});
  

✔ Output: API call centralized হবে, code clean থাকবে।

---

🗂️ store/ (Global State – Redux Toolkit)

Redux Toolkit বা অন্য state management এর কোড এখানে থাকবে।

---

🧾 types/ (TypeScript Types)

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

✔ Output: Strong typing → কম bug → ভালো performance

---

✨ কেন এই Structure ব্যবহার করবেন?

• Large app সহজে manage করা যায়
• Code clean & readable থাকে
• Team collaboration সহজ হয়
• TypeScript এর full power পাওয়া যায়
• Production-ready architecture