ReactBeginner

JSX ও React Element

JSX কী, HTML-এর সাথে পার্থক্য, expressions ও attribute rule — বাংলায়।

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

JSX কী?

JSX হলো JavaScript-এ HTML-এর মতো লেখার syntax। এটি browser সরাসরি বোঝে না — Babel/compiler এটাকে React.createElement()-এ রূপান্তর করে। ব্রাউজারে যাওয়ার আগেই JSX plain JavaScript-এ convert হয়।

JSX vs createElementjsx

jsx

// JSX
const el = <h1 className="title">Hello</h1>;

// উপরেরটি equivalent:
const el2 = React.createElement("h1", { className: "title" }, "Hello");

Expression — {}

Dynamic valuejsx

jsx

const user = { name: "রহিম", age: 24 };

function Card() {
  return (
    <div>
      {/* JS expression — যেকোনো JavaScript value */}
      <h2>{user.name}</h2>
      <p>Age: {user.age + 1}</p>
      <p>{user.age >= 18 ? "প্রাপ্তবয়স্ক" : "নাবালক"}</p>
    </div>
  );
}

JSX নিয়ম

প্রতিটি component একটি parent element return করে — div, <> (fragment) বা component
Attribute নাম camelCase — className, onClick, htmlFor
সব tag self-close — <img />, <br />
JSX-এ class লেখা যায় না — className
style object আকারে — style={{ color: "red" }}

Style ও classNamejsx

jsx

function Badge() {
  return (
    <span
      className="badge"
      style={{ backgroundColor: "#22c55e", padding: "4px 8px" }}
    >
      Active
    </span>
  );
}

কমেন্ট

JSX commentjsx

jsx

return (
  <div>
    {/* এটা JSX comment — output-এ আসে না */}
    <h1>Hello</h1>
  </div>
);

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