ExpoBeginner

React Native-এর মূল ধারণা — components, JSX, style

React Native-এ web-এর বদলে native components — পার্থক্যগুলো বাংলায়।

7টি অংশবাংলা ভাষায়

React Native-এ UI লেখা হয় React-এর মতোই, তবে browser DOM নেই। HTML element-এর বদলে native component ব্যবহার হয়।

Web (HTML)	React Native
div	View
span / p	Text
input	TextInput
button	Pressable / Button
img	Image

components/Welcome.tsxtsx

tsx

import { View, Text, Pressable } from "react-native";

export default function Welcome() {
  return (
    <View style={{ padding: 24 }}>
      <Text>Welcome to TaskTrack — টাস্ক যোগ করুন</Text>
      <Pressable onPress={() => console.log("pressed")}>
        <Text>Add Task</Text>
      </Pressable>
    </View>
  );
}

JSX-এ View, Text ট্যাগ, আর style দেওয়া হয় object দিয়ে। TypeScript আনলে props আরও safe হয়।

একই JavaScript, ভিন্ন render target

React web-এ virtual DOM-কে browser-এ render করে; React Native সেটা render করে native view hierarchy-তে। আপনার logic, hooks, state management — সব একই থাকে।

মনে রাখুন

RN-এর ৩টি মূল ধারণা: components, props, state। এগুলো জানলে আপনি মূলত React-ই জানেন — শুধু component সেট আলাদা।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।