JSX ফাইলে ডায়নামিক ভেলু আসলে তা কারলি ব্রাকেট দিয়ে রিসিভ করতে হবে। যেমন-

const username = "mojnu";
<p>user {username}</p>;

JSX আপনাকে JavaScript ফাইলের মধ্যে HTML-এর মতো মার্কআপ লিখতে দেয়, যার ফলে আমরা রেন্ডারিং লজিক এবং কন্টেন্ট একসাথে লিখতে পারি।

JSX- ফাইল এ JavaScript ব্যবহার করা: {} বন্ধনীগুলির ব্যবহার

এই টিউটোরিয়াল থেকে আপনি শিখবেন:

• স্ট্রিং ভেলুগুলোকে কোটেশনের ভিতরে রাখা
• কারলি ব্রাকেট ব্যবহার করে JSX-এর মধ্যে JavaScript ভেরিয়েবল পাস করা
• কারলি ব্রাকেট ব্যবহার করে JSX-এর মধ্যে JavaScript ফাংশন কল করা
• কারলি ব্রাকেট দিয়ে JSX-এর মধ্যে JavaScript অবজেক্ট ব্যবহার করা

স্ট্রিংগুলিকে কোটেশনের ভিতরে রাখা

যখন আপনি JSX-এ একটি অ্যাট্রিবিউটে স্ট্রিং পাস করতে চান, তখন এটিকে সিংগেল বা ডাবল কোটেশন চিহ্নের মধ্যে রাখেন:

<img
  className="avatar"
  src="https://i.imgur.com/7vQD0fPs.jpg"
  alt="Gregorio Y. Zara"
/>

এখানে, "https://i.imgur.com/7vQD0fPs.jpg (opens in a new tab)" এবং "Gregorio Y. Zara" স্ট্রিং হিসেবে পাস করা হচ্ছে।

কিন্তু আপনি যদি src বা alt এট্রিবিউটের টেক্সটটিকে ডায়নামিক ভেলু করতে চান? আপনি উদ্ধৃতি চিহ্নের পরিবর্তে তখন কারলি ব্রাকেট {} ব্যবহার করে JavaScript ভেরিয়েবল এর ভেলু ব্যবহার করতে পারেন:

const avatar = "https://i.imgur.com/7vQD0fPs.jpg";
const description = "Gregorio Y. Zara";
 
<img className="avatar" src={avatar} alt={description} />;

লক্ষ্য করুন যে className="avatar" এবং src={avatar} এর মধ্যে পার্থক্য রয়েছে। className হল একটি CSS ক্লাস নাম যা ছবিটিকে গোলাকার করে, অন্যদিকে src={avatar} হল avatar নামক JavaScript ভেরিয়েবলের ভেলু নেয়। কারণ {} বন্ধনী আপনাকে আপনার মার্কআপের মধ্যেই JavaScript ব্যবহার করতে দেয়!

{} ব্রাকেট ব্যবহার করে JavaScript ব্যবহার করা:

JSX হল JavaScript লেখার একটি বিশেষ উপায়। এর মানে হল আপনি এর মধ্যে JavaScript ব্যবহার করতে পারেন - কারলি ব্রাকেট {} ব্যবহার করে। নিচের উদাহরণটিতে প্রথমে বিজ্ঞানীর নাম, name, ঘোষণা করা হয়েছে, তারপর এটিকে <h1> ট্যাগের মধ্যে কারলি ব্রাকেট র মধ্যে এম্বেড করা হয়েছে:

const name = "Gregorio Y. Zara";
 
<h1>{name}'s To Do List</h1>;

name- এর ভেলু 'Gregorio Y. Zara' থেকে 'Hedy Lamarr'-এ পরিবর্তন করে দেখুন। দেখুন কীভাবে তালিকার শিরোনাম পরিবর্তন হয়?

কারলি ব্রাকেট র মধ্যে যেকোনো JavaScript এক্সপ্রেশন কাজ করবে, formatDate() ফাংশনের মতো কল সহ:

<h1>To Do List for {formatDate(today)}</h1>

কারলি ব্রাকেট আমরা কোথায় ব্যবহার করব?

আপনি JSX-এর মধ্যে কারলি ব্রাকেট দুটি উপায়ে ব্যবহার করতে পারেন:

• JSX ট্যাগের মধ্যে সরাসরি টেক্সট হিসেবে:<h1>{name}'s To Do List</h1> কাজ করবে, কিন্তু <{tag}>Gregorio Y. Zara's To Do List</{tag}> কাজ করবে না।
• অ্যাট্রিবিউট হিসেবে = চিহ্নের পরে: src={avatar} avatar ভেরিয়েবলটি কাজ করবে, কিন্তু src="{avatar}" বা {"avatar"} JSX স্ট্রিং হিসেবে পড়বে।

“ডাবল কারলি ব্রাকেট ” ব্যবহার করে CSS এবং অন্যান্য অবজেক্টকে ব্যবহার করতে হবে:

স্ট্রিং, সংখ্যা এবং অন্যান্য JavaScript এক্সপ্রেশনের পাশাপাশি, আপনি JSX-এর মধ্যে একটি অবজেক্টও পাস করতে পারেন। অবজেক্টগুলিও কারলি ব্রাকেট দিয়ে চিহ্নিত করা হয়, যেমন { name: "Hedy Lamarr", inventions: 5 }। অতএব, JSX-এ একটি JS অবজেক্ট পাস করতে চাইলে, আপনাকে অবজেক্টটিকে আরও একটি জোড়া কারলি ব্রাকেট দিয়ে মুড়িয়ে দিতে হবে: person={{ name: "Hedy Lamarr", inventions: 5 }}।

আপনি এটি ইনলাইন CSS স্টাইলগুলিতে দেখতে পারেন। React আপনাকে ইনলাইন স্টাইল ব্যবহার করতে বাধ্য করে না (বেশিরভাগ ক্ষেত্রে CSS ক্লাস ব্যবহার কাজ করে ভাল)। কিন্তু যখন আপনার ইনলাইন স্টাইলের প্রয়োজন হয়, আপনি স্টাইল অ্যাট্রিবিউটে একটি অবজেক্ট পাস করেন:

<ul
  style={{
    backgroundColor: "black",
    color: "pink",
  }}
>
  <li>Improve the videophone</li>
  <li>Prepare aeronautics lectures</li>
  <li>Work on the alcohol-fuelled engine</li>
</ul>

try backgroundColor এবং color এর মান পরিবর্তন করে দেখুন।

আপনি কারলি ব্রাকেট দিয়ে অবজেক্টটিকে কোডের মধ্যে দেখতে পারেন যখন আপনি এটিকে এভাবে লিখেন:

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

এখন আপনি দেখতে পাচ্ছেন যে এটি আসলে JSX কারলি ব্রাকেট ভেলুর মধ্যে একটি অবজেক্ট।

সতর্কতা:

ইনলাইন স্টাইলের বৈশিষ্ট্যগুলি ক্যামেল কেস আকারে লেখা হয়। উদাহরণস্বরূপ, HTML <ul style="background-color: black"> হবে আপনার উপাদানে <ul style={{ backgroundColor: 'black' }}>।

JavaScript অবজেক্ট এবং কারলি ব্রাকেট দিয়ে আরও মজা:

আপনি একাধিক এক্সপ্রেশনকে একত্রিত করে একটি অবজেক্টে সরিয়ে ফেলতে পারেন এবং আপনার JSX-এ কারলি ব্রাকেট দিয়ে সেগুলি রেফারেন্স করতে পারেন:

const person = {
  name: "Gregorio Y. Zara",
  theme: {
    backgroundColor: "black",
    color: "pink",
  },
};
 
export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

এই উদাহরণে, person JavaScript অবজেক্ট একটি name স্ট্রিং এবং একটি theme অবজেক্ট রয়েছে:

const person = {
  name: "Gregorio Y. Zara",
  theme: {
    backgroundColor: "black",
    color: "pink",
  },
};

উপাদানটি person.theme অবজেক্ট থেকে মানগুলি ব্যবহার করতে পারে যেমন:

<div style={person.theme}>

JSX একটি টেমপ্লেটিং ভাষা হিসাবে খুব পাওয়ারফুল কারণ এটি আপনাকে JavaScript ব্যবহার করে ডেটা এবং লজিক সংগঠিত করতে দেয়।