ReactBeginner

Component ও Props

Function component, props destructure, default value, children — বাংলায়।

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

Component তৈরি

Function componentjsx

jsx

function Welcome(props) {
  return <h1>স্বাগতম, {props.name}!</h1>;
}

// arrow function-ও চলে
const Welcome = (props) => <h1>স্বাগতম, {props.name}!</h1>;

export default Welcome;

Props

Props হলো component-এ পাঠানো arguments (HTML attribute-এর মতো)। Props read-only — component নিজে বদলায় না, উপরে থেকে পরিবর্তন হয়।

Props destructurejsx

jsx

function UserCard({ name, age = 0, isAdmin = false }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>বয়স: {age}</p>
      {isAdmin && <span>ADMIN</span>}
    </div>
  );
}

<UserCard name="রহিম" age={24} isAdmin />

children

children propjsx

jsx

function Card({ children, title }) {
  return (
    <section className="card">
      <h2>{title}</h2>
      {children}
    </section>
  );
}

<Card title="ব্যবহারকারী">
  <p>ভেতরের content — children হিসেবে আসে</p>
</Card>

Component মূলনীতি

Component নাম Capitalize হতে হয়
Props function বা element-ও হতে পারে
Props change হলে component re-render হয়
Child-এর ডেটা বদলাতে চাইলে parent-এ callbacks পাঠান — lifting state

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