React শিখুন
Describing the UI

JavaScript in JSX with Curly Braces

JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript.

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

  • Quotes দিয়ে স্ট্রিং কিভাবে পাস করবেন
  • Curly braces দিয়ে JSX এর ভিতরে একটি জাভাস্ক্রিপ্ট ভেরিয়েবলকে কীভাবে reference করবেন
  • Curly braces দিয়ে JSX-এর ভিতরে একটি জাভাস্ক্রিপ্ট ফাংশনকে কীভাবে কল করবেন
  • Curly braces দিয়ে JSX এর ভিতরে একটি জাভাস্ক্রিপ্ট অবজেক্ট কীভাবে ব্যবহার করবেন

quotes এর সাথে স্ট্রিং পাসিং

আপনি যখন JSX-এ একটি স্ট্রিং attribute পাস করতে চান, তখন আপনাকে এটি single বা double quotes এ রাখতে হবে:

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" কে স্ট্রিং হিসেবে পাস করা হয়েছে ।

কিন্তু যদি আপনি dynamic ভাবে src বা alt টেক্সট ব্যবহার করতে চান? তাহলে আপনি জাভাস্ক্রিপ্ট থেকে একটি value ব্যবহার করে "and" কে curly braces {and} দিয়ে পরিবর্তন করতে পারেন:

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" এবং src={avatar} এর মধ্যে পার্থক্য লক্ষ্য করুন। className="avatar" একটি "avatar" নামের CSS ক্লাসকে নির্দিষ্ট করে ও ইমেজকে গোলাকার করে অপরদিকে, src={avatar}, avatar নামের জাভাস্ক্রিপ্ট ভেরিয়েবলের value পড়ে। এর কারণ হচ্ছে, curly braces আপনাকে আপনার মার্কআপ এর ভিতরে জাভাস্ক্রিপ্ট এর কাজ করতে দেয়!

Curly braces ব্যবহার: জাভাস্ক্রিপ্ট জগতের একটি window

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

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

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

যেকোন জাভাস্ক্রিপ্ট এক্সপ্রেশন curly braces মধ্যে কাজ করবে, যেমন formatDate() এর মতো function calls:

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>
  );
}

কোথায় curly braces ব্যবহার করবেন

আপনি JSX এর ভিতরে শুধুমাত্র দুটি উপায়ে curly braces ব্যবহার করতে পারেন:

  1. সরাসরি JSX ট্যাগের ভিতরে text হিসাবে: <h1>{name}'s To Do List</h1> কাজ করে, কিন্তু <{tag}>Gregorio Y. Zara's To Do List</{tag}> করবে না৷

  2. Attributes হিসেবে সরাসরি = চিহ্ন ব্যবহার করে: src={avatar} এখানে avatar ভেরিয়েবল নিবে, কিন্তু এটি src="{avatar}" স্ট্রিং হিসেবে পাস করবে "{avatar}"

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

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

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

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 এর মান পরিবর্তন করার চেষ্টা করুন।

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

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

পরবর্তীতে যখন আপনি JSX-এ {{ and }} দেখবেন, তখন আপনি বুঝে নিবেন যে এটি JSX curlies এর ভিতরে একটি বস্তু ছাড়া আর কিছুই নয়!

Pitfall

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

More fun with JavaScript objects and curly braces

আপনি একটি অবজেক্ট এ বেশ কয়েকটি এক্সপ্রেশন রেখে, পরে সেটিকে curly braces এর ভিতরে 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’ অবজেক্ট থেকে value গুলি ব্যবহার করতে পারে:

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

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

Recap

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

  • JSX attribute গুলির এর ভিতরে quote গুলি স্ট্রিং হিসাবে পাস করা হয়।
  • Curly braces আপনাকে আপনার মার্কআপে জাভাস্ক্রিপ্ট লজিক এবং ভেরিয়েবল লিখতে দেয়।
  • Curly braces JSX ট্যাগ কন্টেন্টের ভিতরে কাজ করে অথবা attributes = এর পরপরই কাজ করে।
  • {{ and }} এটি কোন বিশেষ সিনট্যাক্স নয়: এটি একটি জাভাস্ক্রিপ্ট অবজেক্ট যা JSX এ curly braces এর ভিতরে ব্যবহার করা হয়।

Try out some challenges

Challenge 1 of 3:
Fix the mistake

This code crashes with an error saying 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>
  );
}

Can you find the problem?

PreviousWriting Markup with JSXNextPassing Props to a Component

How do you like these docs?