JSX এ className এর ভূমিকা কি?

  JSX এ className এর ভূমিকা কি ? JSX এ className এ্যাট্রিবিউটটি একটি HTML এলিমেন্টে একটি CSS ক্লাস এ্যাসাইন করতে ব্যবহৃত হয় । JSX হলো...

 JSX এ className এর ভূমিকা কি?

JSX এ className এ্যাট্রিবিউটটি একটি HTML এলিমেন্টে একটি CSS ক্লাস এ্যাসাইন করতে ব্যবহৃত হয়। JSX হলো জাভাস্ক্রিপ্টের জন্য একটি সিনট্যাক্স এক্সটেনশন যা ইউজার ইন্টারফেস তৈরির জন্য React রেকোমেন্ড করে। React এ প্রায়ই কম্পোনেন্ট তৈরি করি যা HTML এলিমেন্টগুলো রেন্ডার করে এবং className এ্যাট্রিবিউট এর মাধ্যমে সেই এলিমেন্টগুলিতে style করার সুযোগ প্রদান করে।

সাধারণত HTML এ আমরা সচরাচর ‘class’ ব্যবহার করে থাকি কিন্তু JSX এ ‘class’ কে পরিবর্তন করে ‘className’ ব্যবহার করতে হয়। তার কারণটা কি? কারণ জাভাস্ক্রিপ্টে ‘class’ একটি Reserved Keyword (সংক্ষরিত কীওয়ার্ড)। JSX এ জাভাস্ক্রিপ্ট কীওয়ার্ডের সাথে দ্বন্দ্ব এড়াতে ক্যামেলকেস নামকরণ পদ্ধতি গ্রহণ করে। সুতরাং, যখন JSX এর এলিমেন্টে একটি CSS ক্লাস (class) বরাদ্দ করতে চান, তাহলে ক্লাসের (class) পরিবর্তে className ব্যবহার করতে হবে। একটি উদাহরণ দেখা যাক –

import React from "react";

const MyComponent = () => {
  return (
    <div className="my-container">
      <p className="my-text">Hello, JSX!</p>
    </div>
  );
};

export default MyComponent;

উপরের উদাহরণে, className এ্যাট্রিবিউটটি যথাক্রমে div এবং p এলিমেন্টগুলোতে “my-container” এবং “my-text” ক্লাস বরাদ্দ করতে ব্যবহৃত হয়। এর মাধ্যমে CSS ব্যবহার করে উক্ত এলিমেন্টগুলিকে style করার জন্য ব্যবহার করা হয়।

ClassName এর ব্যবহার নিয়ে আরও একটি উদাহরণ নিয়ে আলোচনা করা যাক –

import React from 'react';
import './styles.css'; // Importing a CSS file for styling

const MyComponent = () => {
  const isSpecial = true;
  return (
    <div className="container">
      <h1 className={isSpecial ? 'special-title' : 'normal-title'}>
        Hello, World!
      </h1>
    </div>
  );
};
export default MyComponent;

 

/* styles.css */
.container {
  padding: 20px;
  border: 1px solid #ccc;
}

.special-title {
  color: red;
  font-size: 24px;
}

.normal-title {
  color: black;
  font-size: 20px;
}

উপরের উদাহরণে,

className = “container” <div> ইলিমেন্ট এর CSS ক্লাসকে “container” এ সেট করা হয়েছে।

className = {isSpecial ? ‘special-title’ : ‘normal-title’} ডাইনামিকভাবে isSpecial ভেরিয়েবলের মানের উপর ভিত্তি করে একটি class নির্ধারণ করা হয়েছে। isSpecial সত্য হলে, class হবে ‘special-title’ অন্যথায় এটি ‘normal-title’ হবে।

 

আশা করি আপনি আজকের এই ব্লগটি মনোযোগ সহকারে পড়েছেন। আজকের ব্লগটি আপনার কাছে কেমন লেগেছে অবশ্যই  কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। পোষ্টে উল্লিখিত কোনো অংশ যদি বুঝতে সমস্যা হয়, তাহলে কমেন্ট বক্সে জানিয়ে দিন। ইনশাআল্লাহ্‌, সমস্যা সমাধানের চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন ব্লগে। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।[no_toc]