React Native-এ কম্পোনেন্ট এবং JSX কীভাবে কাজ করে?

Question

Accepted Answer

React Native **React-এর কম্পোনেন্ট মডেল এবং JSX** ব্যবহার করে — পুনর্ব্যবহারযোগ্য **কম্পোনেন্ট** থেকে UI তৈরি করে যা JSX রিটার্ন করে। যদি আপনি ওয়েবের জন্য React জানেন, তাহলে এটি সরাসরি স্থানান্তরিত হয়; প্রধান পার্থক্য হল HTML উপাদানের পরিবর্তে নেটিভ কম্পোনেন্ট ব্যবহার করা। ## কম্পোনেন্ট এবং JSX ```jsx // a functional component returns JSX describing the UI (using RN core components) function Greeting({ name }) { // receives props return ( Hello, {name}! {/* JSX with an embedded expression */} ); } // compose components (like React for web) function App() { return ( {/* reuse the component */} ); } ``` কম্পোনেন্টগুলি পুনর্ব্যবহারযোগ্য UI অংশ (JSX রিটার্ন করে এমন ফাংশন); তারা **props** (ইনপুট) নেয় এবং গাছে সংযুক্ত হয় — ঠিক React ওয়েবের মতো, কিন্তু নেটিভ কম্পোনেন্টগুলির সাথে। ## Props এবং state (React ধারণা) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // STATE (useState hook) return ( setCount(count + 1)}> Count: {count} {/* re-renders when state changes */} ); } ``` **Props** কম্পোনেন্টের মধ্যে ডেটা পাস করে; **state** (`useState`-এর মাধ্যমে) পরিবর্তনশীল ডেটা ধারণ করে যা re-render ট্রিগার করে — ওয়েবে React মডেলের সমান। ## React জ্ঞান স্থানান্তরিত হয় ```text ✓ Components, JSX, props, state, HOOKS (useState, useEffect, etc.), composition, keys — all the same as React for web ✓ The main difference: native components (View/Text) instead of HTML; styling differs → React developers can apply most of their knowledge directly to React Native. ``` ## এটি কেন গুরুত্বপূর্ণ React Native-এ কম্পোনেন্ট এবং JSX কীভাবে কাজ করে তা বোঝা মৌলিক কারণ **React Native React-এর কম্পোনেন্ট মডেলের উপর নির্মিত**, তাই এটি বোঝা অপরিহার্য, এবং একটি প্রধান সুবিধা হল **React জ্ঞান সরাসরি স্থানান্তরিত হয়**। কম্পোনেন্টগুলি (পুনর্ব্যবহারযোগ্য UI অংশ যা JSX রিটার্ন করে, প্রপস ইনপুট নেয়, এবং গাছে সংযুক্ত হয়) এবং JSX (UI বর্ণনা করে এমন সিন্ট্যাক্স যা এমবেড করা এক্সপ্রেশনের সাথে) হল React Native ডেভেলপমেন্টের ভিত্তি — React ওয়েবের মতই। **Props** (কম্পোনেন্টের মধ্যে ডেটা পাস করা) এবং **state** (`useState` হুক-এর মাধ্যমে, পরিবর্তনশীল ডেটা ধারণ করে যা re-render ট্রিগার করে) বোঝা অপরিহার্য কারণ এই React ধারণাগুলি হল React Native কম্পোনেন্টগুলি কীভাবে ডেটা গ্রহণ করে এবং পরিবর্তন পরিচালনা করে — ওয়েব React-এর অনুরূপ। মূল অন্তর্দৃষ্টি হল যে **React জ্ঞান স্থানান্তরিত হয়**: কম্পোনেন্টগুলি, JSX, props, state, হুকস (useState, useEffect, ইত্যাদি), কম্পোজিশন এবং keys সব একই উপায়ে কাজ করে যেমন React ওয়েবে, প্রধান পার্থক্য হল নেটিভ কম্পোনেন্টগুলির ব্যবহার (View, Text) HTML-এর পরিবর্তে এবং ভিন্ন স্টাইলিং। এই স্থানান্তরযোগ্যতা React Native আবেদনকারী একটি প্রধান কারণ — React/ওয়েব ডেভেলপারদের বিশাল পুল তাদের বেশিরভাগ বিদ্যমান জ্ঞান সরাসরি নেটিভ মোবাইল অ্যাপ তৈরিতে প্রয়োগ করতে পারে, নেটিভ কম্পোনেন্টগুলি এবং প্ল্যাটফর্ম-নির্দিষ্টগুলিতে ফোকাস করা একটি অপেক্ষাকৃত ছোট শেখার বক্ররেখা সহ। যেহেতু React Native মৌলিকভাবে React (কম্পোনেন্টগুলি, JSX, props, state, হুকস) নেটিভ UI-তে প্রয়োগ করা, এবং এই মডেলটি বোঝা React Native অ্যাপ তৈরির জন্য অপরিহার্য যখন স্বীকার করি যে React জ্ঞান সরাসরি স্থানান্তরিত হয় (একটি মূল সুবিধা), React Native-এ কম্পোনেন্ট এবং JSX বোঝা অপরিহার্য, মৌলিক জ্ঞান — React Native-এর মূল প্রোগ্রামিং মডেল, অ্যাপ তৈরির জন্য প্রয়োজনীয়, এবং বিশেষত মূল্যবান কিভাবে সরাসরি React/ওয়েব দক্ষতা React Native মোবাইল ডেভেলপমেন্টে প্রয়োগ করে তা হাইলাইট করতে।