Writing Markup with JSX | JSX দিয়ে মার্কআপ লেখা

JSX দিয়ে মার্কআপ লেখা

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

কি কি শিখবে এই পাঠে

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

JSX লেখার নিয়মাবলী: JSX-এর প্রধান তিনটি নিয়ম 📜

JSX দেখতে HTML-এর মতো হলেও, এর কিছু নিজস্ব নিয়ম আছে যা মেনে চলতে হয়। চলো, সবচেয়ে জরুরি তিনটি নিয়ম জেনে নিই।

নিয়ম ১: একটি মাত্র রুট এলিমেন্ট রিটার্ন করা

একটি কম্পোনেন্ট থেকে যদি তুমি একাধিক JSX ট্যাগ রিটার্ন করতে চাও, তাহলে সেগুলোকে অবশ্যই একটি প্যারেন্ট ট্যাগ বা রুটের ভেতরে মুড়িয়ে দিতে হবে। তুমি <div>-এর মতো কোনো ট্যাগ ব্যবহার করতে পারো।

// সঠিক ✅
return (
  <div>
    <h1>শিরোনাম</h1>
    <p>কিছু টেক্সট</p>
  </div>
);

// ভুল ❌
return (
  <h1>শিরোনাম</h1>
  <p>কিছু টেক্সট</p>
);

তবে তুমি যদি HTML-এ অতিরিক্ত <div> যোগ করতে না চাও, তাহলে একটি খালি র‍্যাপার <>...</> ব্যবহার করতে পারো, যাকে বলে React Fragment।

return (
  <>
    <h1>শিরোনাম</h1>
    <p>কিছু টেক্সট</p>
  </>
);

কেন এই নিয়ম? পর্দার আড়ালে JSX জাভাস্ক্রিপ্ট অবজেক্টে রূপান্তরিত হয়। একটি ফাংশন থেকে যেমন দুটি অবজেক্ট সরাসরি রিটার্ন করা যায় না (যদি না সেগুলোকে একটি অ্যারেতে রাখা হয়), তেমনি একটি কম্পোনেন্ট থেকেও একাধিক JSX ট্যাগ সরাসরি রিটার্ন করা যায় না।

নিয়ম ২: সব ট্যাগ বন্ধ করা

JSX-এ সব ট্যাগকেই সঠিকভাবে বন্ধ করতে হয়। HTML-এ যেমন <img> বা <br>-এর মতো ট্যাগগুলো খোলা রাখা যায়, JSX-এ তা করা যাবে না। সেলফ-ক্লোজিং ট্যাগগুলোকে অবশ্যই /> দিয়ে শেষ করতে হবে।

// সঠিক ✅
return (
  <>
    <img src="url" alt="description" />
    <br />
  </>
);

// ভুল ❌
return (
  <>
    <img>
    <br>
  </>
);

নিয়ম ৩: অ্যাট্রিবিউটের জন্য camelCase ব্যবহার

JSX যেহেতু জাভাস্ক্রিপ্টে রূপান্তরিত হয়, তাই অ্যাট্রিবিউটের নাম লেখার সময় জাভাস্ক্রিপ্টের নিয়ম মানতে হয়। HTML-এর class এখানে হয়ে যায় className (কারণ class জাভাস্ক্রিপ্টের একটি রিজার্ভড শব্দ)। একইভাবে, হাইফেন (-) থাকা অ্যাট্রিবিউটগুলো camelCase-এ লিখতে হয়, যেমন: stroke-width হয়ে যায় strokeWidth।

এখন তুমি জানো JSX কী এবং এটি কীভাবে কম্পোনেন্টে ব্যবহার করতে হয়:

• React কম্পোনেন্টগুলো রেন্ডারিং লজিক এবং মার্কআপকে একসাথে গ্রুপ করে, কারণ এরা সম্পর্কিত।
• JSX দেখতে HTML-এর মতো, কিন্তু এর কিছু কঠোর নিয়ম আছে।
• ভুল হলে এরর মেসেজগুলো প্রায়ই তোমাকে সঠিক পথ দেখিয়ে দেবে।

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

কিছু HTML-কে JSX-এ রূপান্তর করো

নিচের HTML কোডটি একটি কম্পোনেন্টে পেস্ট করা হয়েছে, কিন্তু এটি ভ্যালিড JSX নয়। কোডটি ঠিক করো:

export default function Bio() {
  return (
    <div class="intro">
      <h1>Welcome to my website!</h1>
    </div>
    <p class="summary">
      You can find my thoughts here.
      <br><br>
      <b>And <i>pictures</b></i> of scientists!
    </p>
  );
}

.intro {
  background-image: linear-gradient(
    to left,
    violet,
    indigo,
    blue,
    green,
    yellow,
    orange,
    red
  );
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.summary {
  padding: 20px;
  border: 10px solid gold;
}