diff --git a/src/content/learn/javascript-in-jsx-with-curly-braces.md b/src/content/learn/javascript-in-jsx-with-curly-braces.md index 502916113..08390e766 100644 --- a/src/content/learn/javascript-in-jsx-with-curly-braces.md +++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md @@ -1,25 +1,25 @@ --- -title: JavaScript in JSX with Curly Braces +title: Curly Braces দিয়ে JSX-এ জাভাস্ক্রিপ্ট --- -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. +JSX আপনাকে একটি জাভাস্ক্রিপ্ট ফাইলের ভিতরে HTML-এর মতো মার্কআপ লিখতে দেয়, logic এবং content একই জায়গায় রেন্ডার করে। কখনও কখনও মার্কআপের ভিতরে জাভাস্ক্রিপ্ট logic বা dynamic property লেখার প্রয়োজন পরে। এই পরিস্থিতিতে, আপনি JSX-এ curly braces ব্যবহার করে জাভাস্ক্রিপ্ট লিখতে পারেন। -* How to pass strings with quotes -* How to reference a JavaScript variable inside JSX with curly braces -* How to call a JavaScript function inside JSX with curly braces -* How to use a JavaScript object inside JSX with curly braces +* Quotes দিয়ে স্ট্রিং কিভাবে পাস করবেন +* Curly braces দিয়ে JSX এর ভিতরে একটি জাভাস্ক্রিপ্ট ভেরিয়েবলকে কীভাবে reference করবেন +* Curly braces দিয়ে JSX-এর ভিতরে একটি জাভাস্ক্রিপ্ট ফাংশনকে কীভাবে কল করবেন +* Curly braces দিয়ে JSX এর ভিতরে একটি জাভাস্ক্রিপ্ট অবজেক্ট কীভাবে ব্যবহার করবেন -## Passing strings with quotes {/*passing-strings-with-quotes*/} +## Quotes এর সাথে স্ট্রিং পাসিং {/*passing-strings-with-quotes*/} -When you want to pass a string attribute to JSX, you put it in single or double quotes: +আপনি যখন JSX-এ একটি স্ট্রিং attribute পাস করতে চান, তখন আপনাকে এটি single বা double quotes এ রাখতে হবে: @@ -41,9 +41,9 @@ export default function Avatar() { -Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings. +এখানে, `"https://i.imgur.com/7vQD0fPs.jpg"` এবং `"Gregorio Y. Zara"` কে স্ট্রিং হিসেবে পাস করা হয়েছে । -But what if you want to dynamically specify the `src` or `alt` text? You could **use a value from JavaScript by replacing `"` and `"` with `{` and `}`**: +কিন্তু যদি আপনি dynamic ভাবে `src` বা `alt` টেক্সট ব্যবহার করতে চান? তাহলে আপনি **জাভাস্ক্রিপ্ট থেকে একটি value ব্যবহার করে `"`and`"` কে curly braces `{`and`}`** দিয়ে পরিবর্তন করতে পারেন: @@ -67,11 +67,11 @@ export default function Avatar() { -Notice the difference between `className="avatar"`, which specifies an `"avatar"` CSS class name that makes the image round, and `src={avatar}` that reads the value of the JavaScript variable called `avatar`. That's because curly braces let you work with JavaScript right there in your markup! +`className="avatar"` এবং `src={avatar}` এর মধ্যে পার্থক্য লক্ষ্য করুন। `className="avatar"` একটি `"avatar"` নামের CSS ক্লাসকে নির্দিষ্ট করে ও ইমেজকে গোলাকার করে অপরদিকে, `src={avatar}`, `avatar` নামের জাভাস্ক্রিপ্ট ভেরিয়েবলের value পড়ে। এর কারণ হচ্ছে, curly braces আপনাকে আপনার মার্কআপ এর ভিতরে জাভাস্ক্রিপ্ট এর কাজ করতে দেয়! -## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/} +## Curly braces এর ব্যবহার: জাভাস্ক্রিপ্ট জগতের একটি উইন্ডো {/*using-curly-braces-a-window-into-the-javascript-world*/} -JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces `{ }`. The example below first declares a name for the scientist, `name`, then embeds it with curly braces inside the `

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

` এর ভিতরে curly braces দিয়ে embeds করা হয়েছে: @@ -86,9 +86,9 @@ export default function TodoList() { -Try changing the `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the list title changes? +নামের value `'Gregorio Y. Zara'` থেকে `'Hedy Lamarr'`-এ পরিবর্তন করার চেষ্টা করুন। দেখুন কিভাবে list title পরিবর্তন হয়? -Any JavaScript expression will work between curly braces, including function calls like `formatDate()`: +যেকোন জাভাস্ক্রিপ্ট এক্সপ্রেশন curly braces মধ্যে কাজ করবে, যেমন `formatDate()` এর মতো function calls: @@ -111,18 +111,20 @@ export default function TodoList() { -### Where to use curly braces {/*where-to-use-curly-braces*/} +### কোথায় curly braces ব্যবহার করবেন {/*where-to-use-curly-braces*/} -You can only use curly braces in two ways inside JSX: +আপনি JSX এর ভিতরে শুধুমাত্র দুটি উপায়ে curly braces ব্যবহার করতে পারেন: -1. **As text** directly inside a JSX tag: `

{name}'s To Do List

` works, but `<{tag}>Gregorio Y. Zara's To Do List` will not. -2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `"{avatar}"`. +1. সরাসরি JSX ট্যাগের ভিতরে **text হিসাবে**: `

{name}'s To Do List

` এভাবে কাজ করে, কিন্তু `<{tag}>Gregorio Y. Zara's To Do List` এভাবে করবে না৷ -## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/} +2. **Attributes হিসেবে** সরাসরি `=` চিহ্ন ব্যবহার করে: `src={avatar}` এখানে `avatar` ভেরিয়েবল নিবে, কিন্তু এটি `src="{avatar}"` স্ট্রিং হিসেবে পাস করবে `"{avatar}"` -In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like `{ name: "Hedy Lamarr", inventions: 5 }`. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: `person={{ name: "Hedy Lamarr", inventions: 5 }}`. +## "Double curlies" এর ব্যবহার: JSX-এ CSS এবং অন্যান্য অবজেক্ট {/*using-double-curlies-css-and-other-objects-in-jsx*/} -You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the `style` attribute: + +স্ট্রিং, নাম্বার এবং অন্যান্য জাভাস্ক্রিপ্ট এক্সপ্রেশন ছাড়াও, আপনি 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 এ পাস করতে পারেন: @@ -148,9 +150,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; } -Try changing the values of `backgroundColor` and `color`. +`backgroundColor` এবং `color` এর মান পরিবর্তন করার চেষ্টা করুন। -You can really see the JavaScript object inside the curly braces when you write it like this: +curly braces এর ভিতরে জাভাস্ক্রিপ্ট অবজেক্ট দেখতে পাবেন যখন আপনি এটি এভাবে লিখবেন: ```js {2-5}