JSX-এ জাভাস্ক্রিপ্ট: কার্লি ব্রেসের কেরামতি

JSX তোমাকে জাভাস্ক্রিপ্ট ফাইলের ভেতরেই HTML-এর মতো মার্কআপ লেখার সুযোগ দেয়, যার ফলে রেন্ডারিং লজিক এবং কন্টেন্ট একই জায়গায় থাকে। কিন্তু মাঝে মাঝে তোমার মার্কআপের ভেতরে একটু জাভাস্ক্রিপ্ট লজিক বা কোনো ডাইনামিক ভ্যারিয়েবলের মান দেখানোর দরকার হবে। এই ক্ষেত্রে, তুমি কার্লি ব্রেস {} ব্যবহার করে JSX-এর ভেতরেই জাভাস্ক্রিপ্টের দুনিয়াতে প্রবেশ করতে পারো।

কি কি শিখবে

• কোটেশন "" ব্যবহার করে কীভাবে স্ট্রিং পাস করতে হয়।
• কার্লি ব্রেস {} ব্যবহার করে কীভাবে জাভাস্ক্রিপ্ট ভ্যারিয়েবল রেফারেন্স করতে হয়।
• {}-এর ভেতরে কীভাবে জাভাস্ক্রিপ্ট ফাংশন কল করতে হয়।
• {} ব্যবহার করে কীভাবে জাভাস্ক্রিপ্ট অবজেক্ট পাস করতে হয়।

কোটেশন ব্যবহার করে স্ট্রিং পাস করা

যখন তুমি JSX-এর কোনো অ্যাট্রিবিউটে একটি নির্দিষ্ট বা স্ট্যাটিক স্ট্রিং পাস করতে চাও, তখন সেটিকে সিঙ্গেল বা ডাবল কোটেশনের "" মধ্যে রাখো:

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

কিন্তু তুমি যদি src বা alt-এর মান ডাইনামিকভাবে কোনো ভ্যারিয়েবল থেকে আনতে চাও? তখন কোটেশনের পরিবর্তে কার্লি ব্রেস {} ব্যবহার করতে হবে।

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

এখানে className="avatar" একটি সাধারণ CSS ক্লাস বোঝাচ্ছে, কিন্তু src={avatarUrl} জাভাস্ক্রিপ্টের avatarUrl ভ্যারিয়েবলের মান পড়ছে। কার্লি ব্রেস {} তোমাকে মার্কআপের ভেতরেই জাভাস্ক্রিপ্টের শক্তি ব্যবহার করার সুযোগ দেয়!

কার্লি ব্রেস {}: জাভাস্ক্রিপ্টের জগতে ঢোকার দরজা 🚪

JSX হলো জাভাস্ক্রিপ্ট লেখার একটি বিশেষ উপায়। তাই তুমি এর ভেতরে সরাসরি জাভাস্ক্রিপ্ট ব্যবহার করতে পারো—এই কার্লি ব্রেস {} ব্যবহার করে।

তুমি {} দুটি উপায়ে ব্যবহার করতে পারো:

1. JSX ট্যাগের মধ্যে সরাসরি টেক্সট হিসেবে:

   const name = "Mojnu";
   <h1>{name}'s To Do List</h1>;

   এখানে {}-এর ভেতরে থাকা name ভ্যারিয়েবলের মান সরাসরি <h1>-এর ভেতরে দেখানো হবে।

2. অ্যাট্রিবিউটে = চিহ্নের পরে:

   const imageUrl = "https://i.imgur.com/7vQD0fPs.jpg";
   <img src={imageUrl} />;

   এখানে {} জাভাস্ক্রিপ্ট ভ্যারিয়েবল imageUrl-এর মান src অ্যাট্রিবিউটে পাস করছে।

তুমি {}-এর ভেতরে যেকোনো জাভাস্ক্রিপ্ট এক্সপ্রেশন—এমনকি ফাংশন কলও—করতে পারো।

const today = new Date();
 
function formatDate(date) {
  return new Intl.DateTimeFormat("en-US", { weekday: "long" }).format(date);
}
 
// ...
return <h1>To Do List for {formatDate(today)}</h1>;

“ডাবল কার্লি ব্রেস” {{}}: JSX-এ স্টাইল এবং অবজেক্ট

অনেক সময় তুমি JSX-এ {{ এবং }} দেখতে পাবে, বিশেষ করে ইনলাইন CSS স্টাইল লেখার সময়। এটা দেখে ভয় পাওয়ার কিছু নেই! এটা কোনো বিশেষ সিনট্যাক্স নয়।

• বাইরের কার্লি ব্রেসটি { } হলো JSX থেকে জাভাস্ক্রিপ্টের জগতে যাওয়ার দরজা।
• ভেতরের কার্লি ব্রেসটি { } হলো একটি সাধারণ জাভাস্ক্রিপ্ট অবজেক্ট।

যখন তুমি style অ্যাট্রিবিউট ব্যবহার করো, তখন তুমি আসলে একটি জাভাস্ক্রিপ্ট অবজেক্ট পাস করছো।

<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>

মনে রাখবে, ইনলাইন style অবজেক্টের প্রপার্টিগুলো camelCase-এ লিখতে হয়। যেমন, CSS-এর background-color এখানে backgroundColor হয়ে যায়।

তুমি চাইলে ডেটাগুলো একটি অবজেক্টে রেখেও ব্যবহার করতে পারো। এতে তোমার JSX মার্কআপ আরও পরিষ্কার ও গোছানো থাকবে।

const person = {
  name: "Gregorio Y. Zara",
  theme: {
    backgroundColor: "black",
    color: "pink",
  },
};
 
// ...
return (
  <div style={person.theme}>
    <h1>{person.name}'s Todos</h1>
    <img className="avatar" src="https://i.imgur.com/7vQD0fPs.jpg" alt="..." />
    <ul>...</ul>
  </div>
);

সারসংক্ষেপ

এখন তুমি JSX সম্পর্কে প্রায় সবকিছুই জানো!

• কোটেশনের "" ভেতরের অ্যাট্রিবিউটগুলো স্ট্রিং হিসেবে পাস হয়।
• কার্লি ব্রেস {} তোমাকে মার্কআপের ভেতরে জাভাস্ক্রিপ্ট ভেরিয়েবল ও লজিক ব্যবহার করার সুযোগ দেয়।
• {{ ও }} কোনো বিশেষ সিনট্যাক্স নয়; এটি হলো JSX-এর কার্লি ব্রেসের ভেতরে থাকা একটি জাভাস্ক্রিপ্ট অবজেক্ট।

তোমার জন্য চ্যালেঞ্জ 🎯

১. ভুলটি ঠিক করো

এই কোডটি Objects are not valid as a React child এরর দেখাচ্ছে। তুমি কি কারণটা খুঁজে বের করে ঠিক করতে পারবে?

const person = {
  name: "Gregorio Y. Zara",
  theme: {
    backgroundColor: "black",
    color: "pink",
  },
};
 
export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}'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>
  );
}

body {
  padding: 0;
  margin: 0;
}
body > div > div {
  padding: 20px;
}
.avatar {
  border-radius: 50%;
  height: 90px;
}

২. একটি এক্সপ্রেশন লেখো

নিচের কোডে ছবির URL-টি baseUrl এবং person অবজেক্টের বিভিন্ন অংশে ভাগ করা আছে। <img> ট্যাগের src-এ কিছু একটা ভুল আছে।

তুমি কি এটা ঠিক করতে পারবে, যেন সবগুলো অংশ মিলে সঠিক URL তৈরি হয়?

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

body {
  padding: 0;
  margin: 0;
}
body > div > div {
  padding: 20px;
}
.avatar {
  border-radius: 50%;
}