Curly Braces দিয়ে jsx এর মধ্যে javaScript এর ব্যবহার

সূচিপত্রঃ  Curly Braces দিয়ে jsx এর মধ্যে javaScript এর ব্যবহার 

• Quotes দিয়ে string কিভাবে pass করতে হয়
• jsx এর ভিতরে curly brace দিয়ে কিভাবে javaScript এর variable এর reference দেয়া যায়
• curly brace দিয়ে jsx এর মধ্যে কিভাবে function call করা যায়
• curly brace দিয়ে jsx এর মধ্যে কিভাবে javaScript object ব্যবহার করে

Quotes দিয়ে string কিভাবে pass করতে হয়

jsx এর মধ্যে string attribute পাঠাতে হলে single or double quote এর মধ্যে পাঠাতে হবে। যেমনঃ 

export default function Image(){

return(

<img src="img url" alt="img name" />

)

}

এখানে src="img url" এবং alt="img name", src এবং alt এর মধ্যে single or double quote দিয়ে string attribute পাঠানো হয়েছে।

jsx এর ভিতরে curly brace দিয়ে কিভাবে javaScript এর variable এর reference দেয়া যায়

কিন্তু আপনি যদি চান src এবং alt এর value dynamically দিবেন, তাহলে আপনাকে quote এর পরিবর্তে curly brace ব্যবহার করতে হবে। যেমনঃ 

export default function Image(){

const avatar ="img url";

const des = "img des";

return(

<img src={avatar} alt={des} />

)

}

আরো পড়ুনঃ How to Create React Component

এখানে src এবং alt এর মধ্যে curly brace দিয়ে avatar এবং des variable এর data read করা হয়েছে। curly brace javaScript কে jsx এর মধ্যে ব্যবহার করার সুযোগ দেয়। 

curly brace দিয়ে jsx এর মধ্যে কিভাবে function call করা যায়

curly brace এর মধ্যে যে কোন javaScript expression কাজ করে। function call এর একটি উদাহরণ দেয়া হলোঃ

const today = new Date();

function formatDate(date){

return new Int'l.DateTimeFormat(

'en-us',

{weekday: 'long'}).format(date);

}

export default function TodoList(){

return(

<h1>This for {formatDate(today)}</h1>

)

}

)

}

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

jsx এর মধ্যে ২টি পদ্ধতিতে curly brace ব্যবহার করা যায়।

১. jsx tag এর মধ্যে সরাসরি text হিসেবে, যেমনঃ <h1>{name} to do</h1>

It works, কিন্তু <{tag}> to do </{tag}> will not work

২. =sign এর সাথে ইমিডিয়েট attributes হিসেবে, যেমনঃ src={avatar}

It works, কিন্তু src="{avatar}" It not work, cause it is string

curly brace দিয়ে jsx এর মধ্যে কিভাবে javaScript object ব্যবহার করে

css এবং অন্যান্য object এ double curlies ব্যবহার হয়

string, number এবং অন্যান্য javaScript expression যেভাবে culry brace এর মধ্যে ব্যবহার করা যায়, তেমনি jsx এ object ও ব্যবহার করা যায়। object কে curly brace এর মধ্যে ব্যবহার করা হয়। {name:'jahir', age:30} এখন এই object কে jsx এ এভাবে আরেকটি culry brace দিয়ে ব্যবহার করতে হবে। person={{name:'jahir', age:30}} inline css এ এভাবে object হিসেবে attribute ব্যবহার করা হয়। যেমন

export default function TodoList(){

return(

<ul style={{

backgroundColor:'black',

color: 'pink'

}}

<li>List One</li>

<li>List Two</li>

</ul>

)

}

এখানে object এ background color কে camelCase এ ব্যবহার করা হয়েছে। এভাবে দুটি word এর সমন্বয় হলে camelCase এ লিখতে হবে।

একটা object এর মধ্যে several expression লেখা যায় এবং সেগুলোর reference jsx এর মধ্যে দেয়া যায়।

const person={

name:'jahir',

theme:{

backgroundColor:'black',

color:'pink'

}

}

export default function TodoList(){

return(

<div style={person.theme}>

<h2>{person.name} Todos </h2>

</div>

)

}

এখানে person object একটি string এবং একটি object ব্যবহার করেছে।

শিক্ষার্থীবৃন্দ, এতক্ষণ পর্যন্ত আপনারা দেখেছেন, কিভাবে curly brace দিয়ে jsx এর মধ্যে javaScript এর ব্যবহার করব। আশা করি আপনারা বুজতে পেরেছেন, কিভাবে curly brace দিয়ে jsx এর মধ্যে javaScript এর ব্যবহার করবেন।  এ নিয়ে কোন সমস্যা থাকলে কমেন্টে জানাতে পারেন।