🚀 React Native App.js ও Entry Point ব্যাখ্যা (TypeScript সহ)

React Native অ্যাপে App.js / App.tsx হলো পুরো অ্যাপ্লিকেশনের মূল Entry Point। এখান থেকেই অ্যাপের UI রেন্ডার হওয়া শুরু হয়। একজন React Native ডেভেলপার হিসেবে এই ফাইলটি ভালোভাবে বোঝা অত্যন্ত জরুরি।

📌 Entry Point বলতে কী বোঝায়?

Entry Point হলো সেই ফাইল যেখান থেকে React Native অ্যাপ চালু হয়। Android বা iOS অ্যাপ শুরু হলে প্রথমে JavaScript Engine এই ফাইলটি লোড করে।

React Native এ সাধারণত Entry Point:

index.js বা index.ts
এই ফাইল থেকে App.tsx লোড হয়

📌 index.js / index.ts কীভাবে কাজ করে?

index ফাইলটি React Native অ্যাপের root component রেজিস্টার করে। এখানে AppRegistry ব্যবহার করা হয়।


import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

👉 এখানে App হলো App.tsx ফাইলের ডিফল্ট এক্সপোর্ট।

📌 App.tsx কী?

App.tsx হলো React Native অ্যাপের মূল Component। এখান থেকেই সমস্ত Screen, Navigation ও UI শুরু হয়। যেহেতু আমরা TypeScript ব্যবহার করছি, তাই ফাইল এক্সটেনশন .tsx।

🧩 App.tsx (TypeScript Example)


import React from 'react';
import { SafeAreaView, Text, StyleSheet } from 'react-native';

const App: React.FC = () => {
  return (
    
      Welcome to React Native 🚀
      
        This is your App.tsx Entry Point
      
    
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0fdfa',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#0f766e',
  },
  subtitle: {
    fontSize: 16,
    marginTop: 8,
    color: '#115e59',
  },
});

📌 কোড ব্যাখ্যা (Line by Line)

React.FC → TypeScript Functional Component
SafeAreaView → Notch ও Status bar safe UI
StyleSheet → Performance optimized styling
export default App → Entry Component export

📌 App.tsx থেকে UI কীভাবে স্ক্রিনে আসে?

অ্যাপ ওপেন হলে index.ts রান হয়
index.ts → App.tsx কে লোড করে
App.tsx থেকে JSX UI তৈরি হয়
এই UI Native View এ রেন্ডার হয়

📱 Output (মোবাইল স্ক্রিনে কী দেখাবে?)

স্ক্রিনে দেখা যাবে:

Center এ লেখা: Welcome to React Native 🚀
নিচে subtitle: This is your App.tsx Entry Point
Background হবে হালকা teal রঙের

✨ Summary (মনে রাখার পয়েন্ট)

index.ts হলো অ্যাপের প্রথম রান হওয়া ফাইল
App.tsx হলো UI এর মূল Entry Component
TypeScript অ্যাপে .tsx ব্যবহার হয়
App.tsx থেকেই Navigation ও Screens শুরু হয়

✅ এই ধারণা পরিষ্কার হলে React Native শেখা অনেক সহজ হয়ে যাবে।

App.js ও Entry Point ব্যাখ্যা