React শিখুন
Describing the UI

JSX এ কার্লি ব্রেসের মধ্যে জাভাস্ক্রিপ্ট

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

যা যা আপনি শিখবেন

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

Passing strings with quotes

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

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

এখানে, "https://i.imgur.com/7vQD0fPs.jpg" এবং "Gregorio Y. Zara" স্ট্রিং হিসেবে পাঠানো হয়েছে।

কিন্তু যদি আপনি src বা alt টেক্সটকে ডাইনামিকভাবে নির্দিষ্ট করতে চান, তাহলে " এবং " পরিবর্তে { এবং } ব্যবহার করে জাভাস্ক্রিপ্ট থেকে একটি মান ব্যবহার করতে পারেন।

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

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

{ } ব্যবহার: জাভাস্ক্রিপ্ট দুনিয়ার একটি জানালা

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

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

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

কোনও জাভাস্ক্রিপ্ট এক্সপ্রেশন { } এর মধ্যে কাজ করবে, যেমন ফাংশন কল formatDate():

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <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} স্ট্রিংটি পাঠাবে।

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

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

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

export default function TodoList() {
  return (
    <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>
  );
}

backgroundColor এবং color এর মান পরিবর্তন করার চেষ্টা করুন।

আপনি আসলেই জাভাস্ক্রিপ্ট অবজেক্টটি { } এর ভিতরে দেখতে পাবেন যখন এটি এভাবে লিখবেন:

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

পরের বার যখন আপনি {{ এবং }} JSX-এ দেখবেন, জানবেন এটি কিছু নয় বরং JSX { } এর ভিতরে একটি জাভাস্ক্রিপ্ট অবজেক্ট!

সতর্কতা

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

জাভাস্ক্রিপ্ট অবজেক্ট এবং কার্লি ব্রেসের সাথে আরও মজার বিষয়

আপনি একাধিক এক্সপ্রেশন এক অবজেক্টে স্থানান্তর করতে পারেন এবং 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 জাভাস্ক্রিপ্ট অবজেক্টটি একটি name স্ট্রিং এবং একটি theme অবজেক্ট ধারণ করে:

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

কম্পোনেন্টটি person থেকে এই মানগুলো ব্যবহার করতে পারে:

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

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

পুনরালোচনা

এখন আপনি JSX সম্পর্কে প্রায় সবকিছু জানেন:

  • JSX অ্যাট্রিবিউট কোটেশনের মধ্যে থাকলে সেগুলো স্ট্রিং হিসেবে পাঠানো হয়।
  • { } জাভাস্ক্রিপ্ট লজিক এবং ভেরিয়েবলকে আপনার মার্কআপে নিয়ে আসে।
  • এগুলি JSX ট্যাগের কন্টেন্টের ভিতরে বা অ্যাট্রিবিউট হিসেবে = এর পরে কাজ করে।
  • {{ এবং }} বিশেষ কোন সিনট্যাক্স নয়: এটি JSX { } এর ভিতরে একটি জাভাস্ক্রিপ্ট অবজেক্ট।

কিছু চ্যালেঞ্জ চর্চা করুন

চ্যালেঞ্জ 1 / 3:
ভুলটি ঠিক করুন

এই কোডটি ক্র্যাশ করে এবং 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>
  );
}

আপনি কি সমস্যাটি খুঁজে পেতে পারেন?

পূর্ববর্তী পেইজWriting Markup with JSX
পরবর্তী পেইজPassing Props to a Component

How do you like these docs?