কীভাবে JSX এ জাভাস্ক্রিপ্ট এক্সপ্রেশন এম্বেড করা যায়?

  কীভাবে JSX এ জাভাস্ক্রিপ্ট এক্সপ্রেশন এম্বেড করা যায় ? JSX (JavaScript XML) এ আপনি কার্লি ব্রেসেস {} ব্যবহার করে জাভাস্ক্রিপ্ট এক্সপ্র...

 কীভাবে JSX এ জাভাস্ক্রিপ্ট এক্সপ্রেশন এম্বেড করা যায়?

JSX (JavaScript XML) এ আপনি কার্লি ব্রেসেস {} ব্যবহার করে জাভাস্ক্রিপ্ট এক্সপ্রেশন এম্বেড করা যায়। এটি আপনাকে আপনার JSX এলিমেন্টগুলোর মধ্যে ডাইনামিক মান ইনজেক্ট করতে বা জাভাস্ক্রিপ্ট কোড রান করার সুযোগ প্রদান করে। একটি উদাহরণ দেখা যাক – 

import React from "react";

const MyComponent = () => {
  const name = "Habib";
  const age = 26;
  return (
    <div>
      <p>{`Hello, ${name}!`}</p>
      <p>{`You are ${age} years old.`}</p>
      <p>{2 + 2}</p>
      <p>{Math.random()}</p>
      {/* You can embed any valid JavaScript expression inside curly braces */}
    </div>
  );
};

export default MyComponent;

উপরের উদাহরণে, ${name} name ভেরিয়েবল, ${age} age ভেরয়েবল, {2+2} এর ফলাফল এবং {Math.random()} Math.random() ফাংশনের ফলাফল এম্বেড করা হয়েছে।

JSX এ Conditional Rendering এর ব্যবহার –

JSX এ Conditional rendering (শর্তসাপেক্ষ রেন্ডারিং) প্রায়ই টার্নারি অপারেটর (?:) বা লজিক্যাল অপারেটর (&&) ব্যবহার করা হয়। নিম্নে টার্নারি এবং লজিক্যাল অপারেটর এর উদাহরণ দেখা যাক –

Ternary Operator (টার্নারি অপারেটর) এর উদাহরণ -

import React from 'react';
const TernaryComponent = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? (
        <p>Welcome, user!</p>
      ) : (
        <p>Please log in to continue.</p>
      )}
    </div>
  );
};
export default TernaryComponent;

উপরের উদাহরণে, ‘TernaryComponent’ একটি Props (প্রপস) isLoggedIn পায়। isLoggedIn সত্য না মিথ্যা তার উপর নির্ভর করে এবং ফলাফলের উপর রেন্ডার করে।

 

Logical Operator (লজিক্যাল অপারেটর) এর উদাহরণ -

import React from 'react';
const LogicalComponent = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn && <p>Welcome, user!</p>}
      {!isLoggedIn && <p>Please log in to continue.</p>}
    </div>
  );
};

export default LogicalComponent;

উপরের উদাহরণে, দ্বিতীয় এক্সপ্রেশনটির (<p>) শুধুমাত্র তখনি Evaluated হবে এবং শর্তটি (isLoggedIn) সত্য হলেই রেন্ডার হবে।

 

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