diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 895d610d3..369064139 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -1,24 +1,24 @@
 ---
-title: Conditional Rendering
+title: কন্ডিশনাল বা শর্তসাপেক্ষ রেন্ডারিং
 ---
 
 <Intro>
 
-Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators.
+আপনার কম্পোনেন্টগুলো বিভিন্ন শর্তের ওপর ভিত্তি করে বিভিন্ন কিছু প্রদর্শন করতে পারে। React-এ, `if` স্টেটমেন্ট, `&&`, এবং `? :` অপারেটরের মতো জাভাস্ক্রিপ্ট সিনট্যাক্স ব্যবহার করে JSX শর্তানুযায়ী রেন্ডার করতে পারেন।
 
 </Intro>
 
 <YouWillLearn>
 
-* How to return different JSX depending on a condition
-* How to conditionally include or exclude a piece of JSX
-* Common conditional syntax shortcuts you’ll encounter in React codebases
+* কিভাবে শর্তানুযায়ী ভিন্ন JSX রিটার্ন করবেন
+* কিভাবে কোনো JSX কে শর্তানুযায়ী অন্তর্ভুক্ত বা বাদ দিবেন
+* সাধারণ শর্তগত সিনট্যাক্স শর্টকাটগুলো, যা আপনি React কোডবেসে দেখতে পাবেন
 
 </YouWillLearn>
 
 ## Conditionally returning JSX {/*conditionally-returning-jsx*/}
 
-Let’s say you have a `PackingList` component rendering several `Item`s, which can be marked as packed or not:
+ধরুন আপনার একটি `PackingList` কম্পোনেন্ট আছে, যা কয়েকটি `Item` রেন্ডার করে, যেগুলোকে প্যাক করা হয়েছে বা হয়নি এমন হিসেবে চিহ্নিত করা যায়:
 
 <Sandpack>
 
@@ -52,9 +52,9 @@ export default function PackingList() {
 
 </Sandpack>
 
-Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✔) to packed items if `isPacked={true}`.
+দেখুন, কিছু `Item` কম্পোনেন্টে `isPacked` প্রপ `true` সেট করা হয়েছে, আর কিছুতে `false`। আপনি প্যাক করা আইটেমগুলোতে একটি চেকমার্ক (✅) যোগ করতে চান যদি `isPacked={true}` হয়।
 
-You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so:
+এটি আপনি [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) স্টেটমেন্ট দিয়ে লিখতে পারেন, যেমন:
 
 ```js
 if (isPacked) {
@@ -63,7 +63,7 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-If the `isPacked` prop is `true`, this code **returns a different JSX tree.** With this change, some of the items get a checkmark at the end:
+যদি `isPacked` প্রপ `true` হয়, এই কোড **একটি ভিন্ন JSX ট্রি রিটার্ন করবে**। এই পরিবর্তনের মাধ্যমে কিছু আইটেমের শেষে একটি চেকমার্ক যোগ হবে।
 
 <Sandpack>
 
@@ -100,13 +100,13 @@ export default function PackingList() {
 
 </Sandpack>
 
-Try editing what gets returned in either case, and see how the result changes!
+যেকোনো ক্ষেত্রে কী রিটার্ন করা হচ্ছে তা এডিট করে দেখুন, এবং ফলাফল কিভাবে পরিবর্তিত হচ্ছে তা লক্ষ্য করুন!
 
-Notice how you're creating branching logic with JavaScript's `if` and `return` statements. In React, control flow (like conditions) is handled by JavaScript.
+খেয়াল করুন কিভাবে JavaScript-এর `if` এবং `return` স্টেটমেন্ট ব্যবহার করে আপনি ব্রাঞ্চিং লজিক তৈরি করছেন। React-এ কন্ট্রোল ফ্লো (যেমন কন্ডিশন) JavaScript দ্বারা হ্যান্ডেল করা হয়।
 
-### Conditionally returning nothing with `null` {/*conditionally-returning-nothing-with-null*/}
+### ### `null` দিয়ে কিছুই রেন্ডার না করা {/*conditionally-returning-nothing-with-null*/}
 
-In some situations, you won't want to render anything at all. For example, say you don't want to show packed items at all. A component must return something. In this case, you can return `null`:
+কিছু পরিস্থিতিতে, আপনি কোনো কিছুই রেন্ডার করতে চাইবেন না। উদাহরণস্বরূপ, ধরুন আপনি প্যাক করা আইটেমগুলো একদম দেখাতে চান না। এমন পরিস্থিতিতে, আপনি `null` রিটার্ন করতে পারেন:
 
 ```js
 if (isPacked) {
@@ -115,7 +115,7 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-If `isPacked` is true, the component will return nothing, `null`. Otherwise, it will return JSX to render.
+যদি `isPacked` সত্য হয়, কম্পোনেন্টটি কিছুই রিটার্ন করবে না, অর্থাৎ `null` রিটার্ন করবে। অন্যথায়, এটি JSX রিটার্ন করবে।
 
 <Sandpack>
 
@@ -152,23 +152,23 @@ export default function PackingList() {
 
 </Sandpack>
 
-In practice, returning `null` from a component isn't common because it might surprise a developer trying to render it. More often, you would conditionally include or exclude the component in the parent component's JSX. Here's how to do that!
+প্রকৃতপক্ষে, কোনো কম্পোনেন্ট থেকে `null` রিটার্ন করা খুব একটা সাধারণ নয়, কারণ এটি রেন্ডার করার চেষ্টা করা কোনো ডেভেলপারকে বিভ্রান্ত করতে পারে। বরং, আপনি সাধারণত মূল কম্পোনেন্টের JSX-এর মধ্যে শর্তানুযায়ী সেই কম্পোনেন্টটি অন্তর্ভুক্ত বা বাদ দেওয়ার চেষ্টা করবেন। এটি কীভাবে করতে হয় তা এখানে দেওয়া হলো!
 
-## Conditionally including JSX {/*conditionally-including-jsx*/}
+## শর্ত-সাপেক্ষে JSX অন্তর্ভুক্ত করা {/*conditionally-including-jsx*/}
 
-In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output:
+উপরের উদাহরণে, আপনি নির্ধারণ করেছেন কোন (যদি থাকে!) JSX ট্রি কম্পোনেন্টটি রিটার্ন করবে। আপনি হয়তো ইতোমধ্যে রেন্ডার আউটপুটে কিছু ডুপ্লিকেশন লক্ষ্য করেছেন:
 
 ```js
 <li className="item">{name} ✔</li>
 ```
 
-is very similar to
+এটি খুবই অনুরূপ
 
 ```js
 <li className="item">{name}</li>
 ```
 
-Both of the conditional branches return `<li className="item">...</li>`:
+উভয় শর্তের ক্ষেত্রেই `<li className="item">...</li>` রিটার্ন করছে:
 
 ```js
 if (isPacked) {
@@ -177,13 +177,13 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-While this duplication isn't harmful, it could make your code harder to maintain. What if you want to change the `className`? You'd have to do it in two places in your code! In such a situation, you could conditionally include a little JSX to make your code more [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)
+যদিও এই পুনরাবৃত্তি ক্ষতিকর নয়, এটি আপনার কোড রক্ষণাবেক্ষণ করা কঠিন করে তুলতে পারে। ধরুন আপনি `className` পরিবর্তন করতে চান? সেক্ষেত্রে আপনাকে কোডের দুই জায়গায় এটি পরিবর্তন করতে হবে! এমন পরিস্থিতিতে, আপনার কোড আরও [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) রাখতে একটু JSX শর্তসাপেক্ষে যুক্ত করতে পারেন।
 
-### Conditional (ternary) operator (`? :`) {/*conditional-ternary-operator--*/}
+### শর্তসাপেক্ষ (টার্নারি) অপারেটর (`? :`) {/*conditional-ternary-operator--*/}
 
-JavaScript has a compact syntax for writing a conditional expression -- the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) or "ternary operator".
+JavaScript-এ শর্তসাপেক্ষ এক্সপ্রেশন লেখার একটি সংক্ষিপ্ত সিনট্যাক্স রয়েছে -- [শর্তসাপেক্ষ অপারেটর](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) বা "টার্নারি অপারেটর"। 
 
-Instead of this:
+এইভাবে লেখার পরিবর্তে:
 
 ```js
 if (isPacked) {
@@ -202,17 +202,17 @@ return (
 );
 ```
 
-You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`"*.
+আপনি এটা এভাবে পড়তে পারেন *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`"*.
 
 <DeepDive>
 
-#### Are these two examples fully equivalent? {/*are-these-two-examples-fully-equivalent*/}
+#### এই দুটি উদাহরণ কি পুরোপুরি সমতুল্য? {/*are-these-two-examples-fully-equivalent*/}
 
-If you're coming from an object-oriented programming background, you might assume that the two examples above are subtly different because one of them may create two different "instances" of `<li>`. But JSX elements aren't "instances" because they don't hold any internal state and aren't real DOM nodes. They're lightweight descriptions, like blueprints. So these two examples, in fact, *are* completely equivalent. [Preserving and Resetting State](/learn/preserving-and-resetting-state) goes into detail about how this works.
+যদি আপনি অবজেক্ট-ওরিয়েন্টেড প্রোগ্রামিং ব্যাকগ্রাউন্ড থেকে এসে থাকেন, তাহলে হয়তো মনে করবেন যে উপরোক্ত দুটি উদাহরণ সূক্ষ্মভাবে ভিন্ন, কারণ একটি উদাহরণ সম্ভবত `<li>`-এর দুটি আলাদা "ইনস্ট্যান্স" তৈরি করতে পারে। কিন্তু JSX এলিমেন্টগুলো "ইনস্ট্যান্স" নয়, কারণ এগুলো কোনো অভ্যন্তরীণ স্টেট ধারণ করে না এবং প্রকৃত DOM নোডও নয়। এগুলো হালকা বর্ণনা বা ব্লুপ্রিন্টের মতো। সুতরাং, বাস্তবে এই দুটি উদাহরণ সম্পূর্ণ সমতুল্য। [স্টেট সংরক্ষণ ও রিসেট করা](/learn/preserving-and-resetting-state) বিস্তারিতভাবে ব্যাখ্যা করে কিভাবে এটি কাজ করে।
 
 </DeepDive>
 
-Now let's say you want to wrap the completed item's text into another HTML tag, like `<del>` to strike it out. You can add even more newlines and parentheses so that it's easier to nest more JSX in each of the cases:
+এখন ধরুন আপনি সম্পন্ন আইটেমের টেক্সটটিকে অন্য একটি HTML ট্যাগের মধ্যে জড়ানোর জন্য চান, যেমন `<del>` যাতে এটি আউটলাইন করা যায়। আপনি আরও বেশি নিউলাইন এবং বন্ধনী যোগ করতে পারেন যাতে প্রতিটি ক্ষেত্রে আরও JSX নেস্ট করা সহজ হয়।
 
 <Sandpack>
 
@@ -256,11 +256,11 @@ export default function PackingList() {
 
 </Sandpack>
 
-This style works well for simple conditions, but use it in moderation. If your components get messy with too much nested conditional markup, consider extracting child components to clean things up. In React, markup is a part of your code, so you can use tools like variables and functions to tidy up complex expressions.
+এই স্টাইলটি সহজ শর্তগুলোর জন্য ভালো কাজ করে, তবে এটি সংযতভাবে ব্যবহার করুন। যদি আপনার কম্পোনেন্টগুলো অতিরিক্ত নেস্টেড শর্তযুক্ত মার্কআপ দিয়ে অগোছালো হয়ে যায়, তাহলে শিশু কম্পোনেন্টগুলো আলাদা করে আপনার কোডটিকে পরিষ্কার রাখার কথা ভাবুন। React-এ মার্কআপ কোডেরই অংশ, তাই জটিল এক্সপ্রেশনগুলোকে গোছানোর জন্য আপনি ভ্যারিয়েবল ও ফাংশনের মতো টুল ব্যবহার করতে পারেন।
 
-### Logical AND operator (`&&`) {/*logical-and-operator-*/}
+### লজিক্যাল AND অপারেটর (`&&`) {/*logical-and-operator-*/}
 
-Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Inside React components, it often comes up when you want to render some JSX when the condition is true, **or render nothing otherwise.** With `&&`, you could conditionally render the checkmark only if `isPacked` is `true`:
+আরেকটি সাধারণ শর্টকাট হলো [JavaScript লজিক্যাল AND (`&&`) অপারেটর।](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) React কম্পোনেন্টের ভেতরে এটি প্রায়ই ব্যবহৃত হয় যখন আপনি শর্তটি সত্য হলে কিছু JSX রেন্ডার করতে চান, **বা অন্যথায় কিছুই রেন্ডার করতে চান না।** `&&` ব্যবহার করে, আপনি কেবল তখনই চেকমার্কটি শর্তসাপেক্ষে রেন্ডার করতে পারেন যদি `isPacked` `true` হয়:
 
 ```js
 return (
@@ -270,9 +270,9 @@ return (
 );
 ```
 
-You can read this as *"if `isPacked`, then (`&&`) render the checkmark, otherwise, render nothing"*.
+এটি এভাবে পড়া যায় *"if `isPacked`, then (`&&`) render the checkmark, otherwise, render nothing"*.
 
-Here it is in action:
+এখানে এটি কার্যকরভাবে দেখানো হলো:
 
 <Sandpack>
 
@@ -310,30 +310,30 @@ export default function PackingList() {
 
 </Sandpack>
 
-A [JavaScript && expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) returns the value of its right side (in our case, the checkmark) if the left side (our condition) is `true`. But if the condition is `false`, the whole expression becomes `false`. React considers `false` as a "hole" in the JSX tree, just like `null` or `undefined`, and doesn't render anything in its place.
+একটি [JavaScript && এক্সপ্রেশন](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) তার ডান পাশের মানটি (আমাদের ক্ষেত্রে চেকমার্ক) ফেরত দেয় যদি বাম পাশের শর্তটি `true` হয়। কিন্তু যদি শর্তটি `false` হয়, তবে পুরো এক্সপ্রেশনটি `false` হয়ে যায়। React `false`-কে JSX ট্রিতে একটি "ফাঁকা" হিসেবে গণ্য করে, যেমন `null` বা `undefined`, এবং এর স্থানে কিছুই রেন্ডার করে না।
 
 
 <Pitfall>
 
-**Don't put numbers on the left side of `&&`.**
+**সংখ্যাগুলোকে `&&`-এর বাম পাশে ব্যবহার করবেন না।**
 
-To test the condition, JavaScript converts the left side to a boolean automatically. However, if the left side is `0`, then the whole expression gets that value (`0`), and React will happily render `0` rather than nothing.
+শর্ত পরীক্ষা করার জন্য, JavaScript স্বয়ংক্রিয়ভাবে বাম পাশের মানকে একটি বুলিয়ান এ রূপান্তর করে। তবে, যদি বাম পাশের মান `0` হয়, তাহলে পুরো এক্সপ্রেশন `0` মানটি পায়, এবং React এটি কিছু না রেন্ডার করার পরিবর্তে `0` রেন্ডার করবে।
 
-For example, a common mistake is to write code like `messageCount && <p>New messages</p>`. It's easy to assume that it renders nothing when `messageCount` is `0`, but it really renders the `0` itself!
+উদাহরণস্বরূপ, একটি সাধারণ ভুল হলো কোড লেখা `messageCount && <p>New messages</p>` এর মতো। এটি সহজে মনে হতে পারে যে `messageCount` যদি `0` হয় তবে এটি কিছুই রেন্ডার করবে না, কিন্তু আসলে এটি `0` রেন্ডার করে!
 
-To fix it, make the left side a boolean: `messageCount > 0 && <p>New messages</p>`.
+এটি ঠিক করতে, বাম পাশের মানটিকে বুলিয়ান করে তুলুন: `messageCount > 0 && <p>New messages</p>`।
 
 </Pitfall>
 
-### Conditionally assigning JSX to a variable {/*conditionally-assigning-jsx-to-a-variable*/}
+### শর্ত-সাপেক্ষে একটি ভেরিয়েবলে JSX অ্যাসাইন কর {/*conditionally-assigning-jsx-to-a-variable*/}
 
-When the shortcuts get in the way of writing plain code, try using an `if` statement and a variable. You can reassign variables defined with [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), so start by providing the default content you want to display, the name:
+যখন শর্টকাটগুলি সাধারণ কোড লেখার পথে বাধা দেয়, তখন একটি `if` স্টেটমেন্ট এবং একটি ভেরিয়েবল ব্যবহার করার চেষ্টা করুন। [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) দিয়ে সংজ্ঞায়িত ভেরিয়েবলগুলিকে পুনঃনির্ধারণ করা যায়, তাই শুরুতে আপনি প্রদর্শন করতে চান এমন ডিফল্ট কনটেন্টটি দিয়ে শুরু করুন, অর্থাৎ নাম:
 
 ```js
 let itemContent = name;
 ```
 
-Use an `if` statement to reassign a JSX expression to `itemContent` if `isPacked` is `true`:
+`if` স্টেটমেন্ট ব্যবহার করে `itemContent`-কে একটি JSX এক্সপ্রেশন পুনঃনির্ধারণ করুন যদি `isPacked` সত্য হয়:
 
 ```js
 if (isPacked) {
@@ -341,7 +341,7 @@ if (isPacked) {
 }
 ```
 
-[Curly braces open the "window into JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Embed the variable with curly braces in the returned JSX tree, nesting the previously calculated expression inside of JSX:
+[কার্লি ব্রেসের মাধ্যমে "জাভাস্ক্রিপ্টের জানালা খোলে।](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world)" রিটার্নকৃত JSX ট্রিতে ভেরিয়েবলটি কার্লি ব্রেসের সাথে এম্বেড করুন এবং পূর্বে গণনা করা এক্সপ্রেশনটি JSX-এর ভেতরে নেস্ট করুন:
 
 ```js
 <li className="item">
@@ -349,7 +349,7 @@ if (isPacked) {
 </li>
 ```
 
-This style is the most verbose, but it's also the most flexible. Here it is in action:
+এই স্টাইলটি সবচেয়ে ব্যাখ্যামূলক, তবে এটি সবচেয়ে নমনীয়ও। এখানে এটি কার্যকরভাবে প্রদর্শিত হচ্ছে:
 
 <Sandpack>
 
@@ -391,7 +391,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-Like before, this works not only for text, but for arbitrary JSX too:
+আগের মত, এটি শুধুমাত্র টেক্সটের জন্য নয়, বরং যেকোনও অর্বিট্রারি JSX-এর জন্যও কাজ করে:
 
 <Sandpack>
 
@@ -437,16 +437,16 @@ export default function PackingList() {
 
 </Sandpack>
 
-If you're not familiar with JavaScript, this variety of styles might seem overwhelming at first. However, learning them will help you read and write any JavaScript code -- and not just React components! Pick the one you prefer for a start, and then consult this reference again if you forget how the other ones work.
+যদি আপনি জাভাস্ক্রিপ্টে নতুন হন, তাহলে বিভিন্ন স্টাইল প্রথমে কিছুটা জটিল মনে হতে পারে। তবে এগুলো শেখা আপনাকে যেকোনো জাভাস্ক্রিপ্ট কোড বুঝতে ও লিখতে সহায়তা করবে — এবং শুধু React কম্পোনেন্টেই নয়! যেটা আপনার সবচেয়ে সহজ মনে হয় তা দিয়ে শুরু করুন, এবং পরবর্তীতে অন্যগুলো মনে না থাকলে এই রেফারেন্সটি আবার দেখে নিতে পারেন।
 
 <Recap>
 
-* In React, you control branching logic with JavaScript.
-* You can return a JSX expression conditionally with an `if` statement.
-* You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces.
-* In JSX, `{cond ? <A /> : <B />}` means *"if `cond`, render `<A />`, otherwise `<B />`"*.
-* In JSX, `{cond && <A />}` means *"if `cond`, render `<A />`, otherwise nothing"*.
-* The shortcuts are common, but you don't have to use them if you prefer plain `if`.
+* React-এ, আপনি JavaScript দিয়ে শাখা লজিক নিয়ন্ত্রণ করেন।
+* আপনি একটি `if` বিবৃতি দিয়ে শর্তসাপেক্ষে একটি JSX প্রকাশ্য ফিরিয়ে দিতে পারেন।
+* আপনি কিছু JSX শর্তসাপেক্ষে একটি ভেরিয়েবলে সংরক্ষণ করতে পারেন এবং তারপর অন্য JSX-এর ভিতরে এটিকে অন্তর্ভুক্ত করতে পারেন কুরি ব্রেস ব্যবহার করে।
+* JSX-এ, `{cond ? <A /> : <B />}` এর অর্থ *"যদি `cond` হয়, তবে `<A />` রেন্ডার করুন, অন্যথায় `<B />` রেন্ডার করুন"*।
+* JSX-এ, `{cond && <A />}` এর অর্থ *"যদি `cond` হয়, তবে `<A />` রেন্ডার করুন, অন্যথায় কিছুই নয়"*।
+* শর্টকাটগুলো সাধারণ, তবে আপনি যদি সাধারণ `if` ব্যবহার করতে পছন্দ করেন তবে আপনাকে সেগুলো ব্যবহার করতে হবে না।
 
 </Recap>
 
@@ -454,9 +454,9 @@ If you're not familiar with JavaScript, this variety of styles might seem overwh
 
 <Challenges>
 
-#### Show an icon for incomplete items with `? :` {/*show-an-icon-for-incomplete-items-with--*/}
+#### "অপূর্ণ আইটেমগুলির জন্য `? :` সহ একটি আইকন দেখান" {/*show-an-icon-for-incomplete-items-with--*/}
 
-Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn’t `true`.
+"`isPacked` যদি `true` না হয় তবে একটি ❌ রেন্ডার করতে শর্তাধীন অপারেটর (`cond ? a : b`) ব্যবহার করুন।"
 
 <Sandpack>
 
@@ -534,15 +534,15 @@ export default function PackingList() {
 
 </Solution>
 
-#### Show the item importance with `&&` {/*show-the-item-importance-with-*/}
+#### "আইটেমের গুরুত্ব `&&` ব্যবহার করে দেখান {/*show-the-item-importance-with-*/}
 
-In this example, each `Item` receives a numerical `importance` prop. Use the `&&` operator to render "_(Importance: X)_" in italics, but only for items that have non-zero importance. Your item list should end up looking like this:
+এই উদাহরণে, প্রতিটি `Item` একটি সংখ্যাগত `importance` প্রপ পায়। শূন্যের বাইরে গুরুত্ব থাকা আইটেমগুলির জন্য `_ (গুরুত্ব: X) _` ইতালিকসে রেন্ডার করতে `&&` অপারেটর ব্যবহার করুন। আপনার আইটেমের তালিকা এরকম দেখতে হবে:
 
-* Space suit _(Importance: 9)_
-* Helmet with a golden leaf
-* Photo of Tam _(Importance: 6)_
+* স্পেস স্যুট _(গুরুত্ব: ৯)_
+* স্বর্ণ পাতা যুক্ত হেলমেট
+* ট্যামের ছবি _(গুরুত্ব: ৬)_
 
-Don't forget to add a space between the two labels!
+দুই লেবেলের মধ্যে একটি স্পেস যুক্ত করতে ভুলবেন না!"
 
 <Sandpack>
 
@@ -582,7 +582,7 @@ export default function PackingList() {
 
 <Solution>
 
-This should do the trick:
+এটি কাজটি সঠিকভাবে করবে::
 
 <Sandpack>
 
@@ -624,15 +624,15 @@ export default function PackingList() {
 
 </Sandpack>
 
-Note that you must write `importance > 0 && ...` rather than `importance && ...` so that if the `importance` is `0`, `0` isn't rendered as the result!
+"নোট করুন যে আপনাকে `importance > 0 && ...` লিখতে হবে `importance && ...` এর পরিবর্তে, যাতে `importance` যদি `0` হয়, তাহলে `0` ফলস্বরূপ রেন্ডার না হয়!
 
-In this solution, two separate conditions are used to insert a space between the name and the importance label. Alternatively, you could use a Fragment with a leading space: `importance > 0 && <> <i>...</i></>` or add a space immediately inside the `<i>`:  `importance > 0 && <i> ...</i>`.
+এই সমাধানে, নাম এবং গুরুত্ব লেবেলের মধ্যে একটি স্পেস যুক্ত করতে দুটি আলাদা শর্ত ব্যবহার করা হয়েছে। বিকল্পভাবে, আপনি একটি ফ্রাগমেন্ট ব্যবহার করতে পারেন একটি লিডিং স্পেস সহ: `importance > 0 && <> <i>...</i></>` অথবা `<i>` এর ভিতরে অবিলম্বে একটি স্পেস যুক্ত করতে পারেন: `importance > 0 && <i> ...</i>`।
 
 </Solution>
 
-#### Refactor a series of `? :` to `if` and variables {/*refactor-a-series-of---to-if-and-variables*/}
+#### একটি সিরিজ `? :` কে `if` এবং ভেরিয়েবল দ্বারা রিফ্যাক্টর করুন {/*refactor-a-series-of---to-if-and-variables*/}
 
-This `Drink` component uses a series of `? :` conditions to show different information depending on whether the `name` prop is `"tea"` or `"coffee"`. The problem is that the information about each drink is spread across multiple conditions. Refactor this code to use a single `if` statement instead of three `? :` conditions.
+এই `Drink` কম্পোনেন্টটি `name` প্রপ `"tea"` অথবা `"coffee"` এর উপর ভিত্তি করে ভিন্ন তথ্য প্রদর্শন করতে `? :` শর্তগুলির একটি সিরিজ ব্যবহার করে। সমস্যাটি হল প্রতিটি পানীয় সম্পর্কিত তথ্য বিভিন্ন শর্তের মধ্যে ছড়িয়ে ছিটিয়ে আছে। এই কোডটি তিনটি `? :` শর্তের পরিবর্তে একটি একক `if` বিবৃতি ব্যবহার করতে রিফ্যাক্টর করুন।"
 
 <Sandpack>
 
@@ -665,11 +665,11 @@ export default function DrinkList() {
 
 </Sandpack>
 
-Once you've refactored the code to use `if`, do you have further ideas on how to simplify it?
+"আপনি যখন কোডটি `if` ব্যবহার করতে রিফ্যাক্টর করবেন, তখন কি আপনি এটি সরল করার জন্য আরও কিছু ধারণা আছে?
 
 <Solution>
 
-There are multiple ways you could go about this, but here is one starting point:
+এটি করার জন্য বিভিন্ন উপায় রয়েছে, কিন্তু এখানে একটি শুরু পয়েন্ট রয়েছে:"
 
 <Sandpack>
 
@@ -712,9 +712,9 @@ export default function DrinkList() {
 
 </Sandpack>
 
-Here the information about each drink is grouped together instead of being spread across multiple conditions. This makes it easier to add more drinks in the future.
+"এখানে প্রতিটি পানীয়ের তথ্য একসাথে গোষ্ঠীবদ্ধ করা হয়েছে, যা একাধিক শর্তের মধ্যে ছড়িয়ে ছিটিয়ে থাকার পরিবর্তে। এটি ভবিষ্যতে আরও পানীয় যুক্ত করা সহজ করে তোলে।
 
-Another solution would be to remove the condition altogether by moving the information into objects:
+অন্য একটি সমাধান হবে শর্তটি সম্পূর্ণরূপে অপসারণ করা, তথ্যগুলিকে অবজেক্টে স্থানান্তরিত করে:"
 
 <Sandpack>
 
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 736065b03..1bfbeed55 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: JSX এ কার্লি ব্রেসের মধ্যে জাভাস্ক্রিপ্ট
 ---
 
 <Intro>
 
-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-এর মতো মার্কআপ লিখতে দেয়, যেখানে রেন্ডারিং লজিক এবং কন্টেন্ট একসাথে থাকে। মাঝে মাঝে আপনি এই মার্কআপের মধ্যে কিছু জাভাস্ক্রিপ্ট লজিক যোগ করতে বা ডায়নামিক প্রপার্টি রেফারেন্স করতে চাইবেন। এই পরিস্থিতিতে, আপনি আপনার JSX-এ `{ }` ব্যবহার করে জাভাস্ক্রিপ্টে প্রবেশ করতে পারবেন।
 
 </Intro>
 
 <YouWillLearn>
 
-* 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
+- কিভাবে কোটেশনসহ স্ট্রিং পাঠাতে হয়
+- কিভাবে JSX-এ `{ }` দিয়ে জাভাস্ক্রিপ্ট ভেরিয়েবল রেফারেন্স করতে হয়
+- কিভাবে `{ }` দিয়ে JSX-এ জাভাস্ক্রিপ্ট ফাংশন কল করতে হয়
+- কিভাবে `{ }` দিয়ে JSX-এ জাভাস্ক্রিপ্ট অবজেক্ট ব্যবহার করতে হয়
 
 </YouWillLearn>
 
 ## Passing strings with quotes {/*passing-strings-with-quotes*/}
 
-When you want to pass a string attribute to JSX, you put it in single or double quotes:
+যখন আপনি JSX-এ একটি স্ট্রিং অ্যাট্রিবিউট পাঠাতে চান, তখন এটি সিঙ্গেল বা ডাবল কোটেশনে রাখুন:
 
 <Sandpack>
 
@@ -41,9 +41,9 @@ export default function Avatar() {
 
 </Sandpack>
 
-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 `}`**:
+কিন্তু যদি আপনি `src` বা `alt` টেক্সটকে ডাইনামিকভাবে নির্দিষ্ট করতে চান, তাহলে **`"` এবং `"` পরিবর্তে `{` এবং `}` ব্যবহার করে জাভাস্ক্রিপ্ট থেকে একটি মান ব্যবহার করতে পারেন**।
 
 <Sandpack>
 
@@ -67,11 +67,11 @@ export default function Avatar() {
 
 </Sandpack>
 
-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"`, যা `"avatar"` নামে একটি CSS ক্লাস নির্দিষ্ট করে যাতে ইমেজটি গোলাকৃতি হয়, এবং `src={avatar}` যা `avatar` নামে জাভাস্ক্রিপ্ট ভেরিয়েবলের মান পড়ে। এর কারণ হলো `{ }` আপনাকে আপনার মার্কআপে জাভাস্ক্রিপ্ট ব্যবহার করতে দেয়!
 
-## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/}
+## `{ }` ব্যবহার: জাভাস্ক্রিপ্ট দুনিয়ার একটি জানালা {/*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 `<h1>`:
+JSX হল জাভাস্ক্রিপ্ট লেখার একটি বিশেষ পদ্ধতি। যার মানে, এর মধ্যে `{ }` ব্যবহার করে জাভাস্ক্রিপ্ট ব্যবহার করা সম্ভব। নিচের উদাহরণে প্রথমে একজন বিজ্ঞানীর নাম, `name`, ঘোষণা করা হয়েছে, তারপর `{ }` দিয়ে `<h1>` ট্যাগের ভিতরে এটি এম্বেড করা হয়েছে:
 
 <Sandpack>
 
@@ -86,9 +86,9 @@ export default function TodoList() {
 
 </Sandpack>
 
-Try changing the `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the list title changes?
+`name` এর মান `'Gregorio Y. Zara'` থেকে `'Hedy Lamarr'` এ পরিবর্তন করার চেষ্টা করুন। দেখুন কিভাবে তালিকার শিরোনাম পরিবর্তিত হয়?
 
-Any JavaScript expression will work between curly braces, including function calls like `formatDate()`:
+কোনও জাভাস্ক্রিপ্ট এক্সপ্রেশন `{ }` এর মধ্যে কাজ করবে, যেমন ফাংশন কল `formatDate()`:
 
 <Sandpack>
 
@@ -111,18 +111,18 @@ export default function TodoList() {
 
 </Sandpack>
 
-### Where to use curly braces {/*where-to-use-curly-braces*/}
+### `{ }` কোথায় ব্যবহার করবেন {/*where-to-use-curly-braces*/}
 
-You can only use curly braces in two ways inside JSX:
+আপনি JSX-এর মধ্যে দুটি উপায়ে `{ }` ব্যবহার করতে পারেন:
 
-1. **As text** directly inside a JSX tag: `<h1>{name}'s To Do List</h1>` works, but `<{tag}>Gregorio Y. Zara's To Do List</{tag}>`  will not.
-2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `"{avatar}"`.
+১. **টেক্সট হিসেবে** সরাসরি একটি JSX ট্যাগের মধ্যে: `<h1>{name}'s To Do List</h1>` কাজ করবে, কিন্তু `<{tag}>Gregorio Y. Zara's To Do List</{tag}>` কাজ করবে না।
+২. **অ্যাট্রিবিউট হিসেবে** `=` চিহ্নের পরে সরাসরি: `src={avatar}` `avatar` ভেরিয়েবলটি পড়বে, কিন্তু `src="{avatar}"` `{avatar}` স্ট্রিংটি পাঠাবে।
 
-## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/}
+## "ডাবল কার্লি" ব্যবহার: CSS এবং অন্যান্য অবজেক্ট JSX-এ {/*using-double-curlies-css-and-other-objects-in-jsx*/}
 
-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 }}`.
+স্ট্রিং, সংখ্যা এবং অন্যান্য জাভাস্ক্রিপ্ট এক্সপ্রেশনের পাশাপাশি, আপনি JSX-এ অবজেক্টও পাঠাতে পারেন। অবজেক্টও `{ }` দিয়ে নির্ধারণ করা হয়, যেমন `{ name: "Hedy Lamarr", inventions: 5 }`। তাই JSX-এ একটি জাভাস্ক্রিপ্ট অবজেক্ট পাঠাতে আপনাকে অবজেক্টটিকে আরেকটি `{ }` এর মধ্যে মোড়াতে হবে: `person={{ name: "Hedy Lamarr", inventions: 5 }}`।
 
-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:
+আপনি এটি ইনলাইন CSS স্টাইলের সাথে দেখতে পারেন JSX-এ। React ইনলাইন স্টাইল ব্যবহার করতে বলে না (CSS ক্লাস বেশিরভাগ ক্ষেত্রে ভাল কাজ করে)। কিন্তু যখন আপনি একটি ইনলাইন স্টাইলের প্রয়োজন হয়, তখন আপনি `style` অ্যাট্রিবিউটে একটি অবজেক্ট পাঠাতে পারেন:
 
 <Sandpack>
 
@@ -148,9 +148,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 
 </Sandpack>
 
-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:
+আপনি আসলেই জাভাস্ক্রিপ্ট অবজেক্টটি `{ }` এর ভিতরে দেখতে পাবেন যখন এটি এভাবে লিখবেন:
 
 ```js {2-5}
 <ul style={
@@ -161,17 +161,17 @@ You can really see the JavaScript object inside the curly braces when you write
 }>
 ```
 
-The next time you see `{{` and `}}` in JSX, know that it's nothing more than an object inside the JSX curlies!
+পরের বার যখন আপনি `{{` এবং `}}` JSX-এ দেখবেন, জানবেন এটি কিছু নয় বরং JSX `{ }` এর ভিতরে একটি জাভাস্ক্রিপ্ট অবজেক্ট!
 
 <Pitfall>
 
-Inline `style` properties are written in camelCase. For example, HTML `<ul style="background-color: black">` would be written as `<ul style={{ backgroundColor: 'black' }}>`  in your component.
+ইনলাইন `style` প্রপার্টিগুলি camelCase-এ লেখা হয়। উদাহরণস্বরূপ, HTML `<ul style="background-color: black">` আপনার কম্পোনেন্টে `<ul style={{ backgroundColor: 'black' }}>` হিসাবে লেখা হবে।
 
 </Pitfall>
 
-## More fun with JavaScript objects and curly braces {/*more-fun-with-javascript-objects-and-curly-braces*/}
+## জাভাস্ক্রিপ্ট অবজেক্ট এবং কার্লি ব্রেসের সাথে আরও মজার বিষয় {/*more-fun-with-javascript-objects-and-curly-braces*/}
 
-You can move several expressions into one object, and reference them in your JSX inside curly braces:
+আপনি একাধিক এক্সপ্রেশন এক অবজেক্টে স্থানান্তর করতে পারেন এবং JSX-এ `{ }` এর ভিতরে তাদের রেফারেন্স করতে পারেন:
 
 <Sandpack>
 
@@ -211,7 +211,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-In this example, the `person` JavaScript object contains a `name` string and a `theme` object:
+এই উদাহরণে, `person` জাভাস্ক্রিপ্ট অবজেক্টটি একটি `name` স্ট্রিং এবং একটি `theme` অবজেক্ট ধারণ করে:
 
 ```js
 const person = {
@@ -223,31 +223,31 @@ const person = {
 };
 ```
 
-The component can use these values from `person` like so:
+কম্পোনেন্টটি `person` থেকে এই মানগুলো ব্যবহার করতে পারে:
 
 ```js
 <div style={person.theme}>
   <h1>{person.name}'s Todos</h1>
 ```
 
-JSX is very minimal as a templating language because it lets you organize data and logic using JavaScript.
+JSX খুবই সংক্ষিপ্ত একটি টেম্পলেটিং ভাষা কারণ এটি আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করে ডেটা এবং লজিক সংগঠিত করতে দেয়।
 
 <Recap>
 
-Now you know almost everything about JSX:
-
-* JSX attributes inside quotes are passed as strings.
-* Curly braces let you bring JavaScript logic and variables into your markup.
-* They work inside the JSX tag content or immediately after `=` in attributes.
-* `{{` and `}}` is not special syntax: it's a JavaScript object tucked inside JSX curly braces.
+এখন আপনি JSX সম্পর্কে প্রায় সবকিছু জানেন:
+- JSX অ্যাট্রিবিউট কোটেশনের মধ্যে থাকলে সেগুলো স্ট্রিং হিসেবে পাঠানো হয়।
+- `{ }` জাভাস্ক্রিপ্ট লজিক এবং ভেরিয়েবলকে আপনার মার্কআপে নিয়ে আসে।
+- এগুলি JSX ট্যাগের কন্টেন্টের ভিতরে বা অ্যাট্রিবিউট হিসেবে `=` এর পরে কাজ করে।
+- `{{` এবং `}}` বিশেষ কোন সিনট্যাক্স নয়: এটি JSX `{ }` এর ভিতরে একটি জাভাস্ক্রিপ্ট অবজেক্ট।
 
 </Recap>
 
 <Challenges>
 
-#### Fix the mistake {/*fix-the-mistake*/}
+#### ভুলটি ঠিক করুন {/*fix-the-mistake*/}
+
 
-This code crashes with an error saying `Objects are not valid as a React child`:
+এই কোডটি ক্র্যাশ করে এবং `Objects are not valid as a React child` এরর প্রদর্শন করে।
 
 <Sandpack>
 
@@ -287,15 +287,17 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-Can you find the problem?
+আপনি কি সমস্যাটি খুঁজে পেতে পারেন?
 
-<Hint>Look for what's inside the curly braces. Are we putting the right thing there?</Hint>
+<Hint>কার্লি ব্রেসের ভেতরে কী রয়েছে, তা লক্ষ্য করুন। আমরা কি সঠিক জিনিসটি সেখানে রাখছি?</Hint>
 
 <Solution>
 
-This is happening because this example renders *an object itself* into the markup rather than a string: `<h1>{person}'s Todos</h1>` is trying to render the entire `person` object! Including raw objects as text content throws an error because React doesn't know how you want to display them.
 
-To fix it, replace `<h1>{person}'s Todos</h1>` with `<h1>{person.name}'s Todos</h1>`:
+
+এই সমস্যা হচ্ছে কারণ এই উদাহরণটি *একটি অবজেক্টকেই* মার্কআপে রেন্ডার করার চেষ্টা করছে একটি স্ট্রিংয়ের পরিবর্তে: `<h1>{person}'s Todos</h1>` পুরো `person` অবজেক্টটি রেন্ডার করার চেষ্টা করছে! টেক্সট কন্টেন্ট হিসেবে সরাসরি অবজেক্ট অন্তর্ভুক্ত করলে এরর দেখা দেয়, কারণ React জানে না আপনি কীভাবে তা প্রদর্শন করতে চান।
+
+এটি ঠিক করতে, `<h1>{person}'s Todos</h1>` পরিবর্তন করে `<h1>{person.name}'s Todos</h1>` ব্যবহার করুন।
 
 <Sandpack>
 
@@ -337,9 +339,9 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-#### Extract information into an object {/*extract-information-into-an-object*/}
+#### তথ্যগুলো একটি অবজেক্টে স্থানান্তর করুন {/*extract-information-into-an-object*/}
 
-Extract the image URL into the `person` object.
+ইমেজের URL `person` অবজেক্টে সংরক্ষণ করুন।
 
 <Sandpack>
 
@@ -381,7 +383,7 @@ body > div > div { padding: 20px; }
 
 <Solution>
 
-Move the image URL into a property called `person.imageUrl` and read it from the `<img>` tag using the curlies:
+ইমেজের URL-টি `person.imageUrl` নামে একটি প্রপার্টিতে স্থানান্তর করুন এবং কার্লি ব্রেস ব্যবহার করে এটি `<img>` ট্যাগ থেকে পড়ুন:
 
 <Sandpack>
 
@@ -424,13 +426,13 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-#### Write an expression inside JSX curly braces {/*write-an-expression-inside-jsx-curly-braces*/}
+#### JSX কার্লি ব্রেসের মধ্যে একটি এক্সপ্রেশন লিখুন {/*write-an-expression-inside-jsx-curly-braces*/}
 
-In the object below, the full image URL is split into four parts: base URL, `imageId`, `imageSize`, and file extension.
+নিচের অবজেক্টটিতে সম্পূর্ণ ইমেজ URL চারটি অংশে বিভক্ত: বেস URL, `imageId`, `imageSize`, এবং ফাইল এক্সটেনশন।
 
-We want the image URL to combine these attributes together: base URL (always `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), and file extension (always `'.jpg'`). However, something is wrong with how the `<img>` tag specifies its `src`.
+আমরা চাই যে ইমেজ URL এই অ্যাট্রিবিউটগুলোকে একত্রিত করে: বেস URL (সদা `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), এবং ফাইল এক্সটেনশন (সদা `'.jpg'`)। তবে, `<img>` ট্যাগটি এর `src` নির্দিষ্ট করার সময় কিছু ভুল হয়েছে।
 
-Can you fix it?
+আপনি কি এটি ঠিক করতে পারেন?
 
 <Sandpack>
 
@@ -474,15 +476,15 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-To check that your fix worked, try changing the value of `imageSize` to `'b'`. The image should resize after your edit.
+আপনার ঠিক করা কাজ করেছে কিনা পরীক্ষা করতে, `imageSize` এর মান `'b'` এ পরিবর্তন করে দেখুন। আপনার সম্পাদনার পরে ইমেজের আকার পরিবর্তিত হওয়া উচিত।
 
 <Solution>
 
-You can write it as `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`.
+আপনি এটি এভাবে লিখতে পারেন: `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`।
 
-1. `{` opens the JavaScript expression
-2. `baseUrl + person.imageId + person.imageSize + '.jpg'` produces the correct URL string
-3. `}` closes the JavaScript expression
+1. `{` জাভাস্ক্রিপ্ট এক্সপ্রেশন খুলছে  
+2. `baseUrl + person.imageId + person.imageSize + '.jpg'` সঠিক URL স্ট্রিং তৈরি করছে  
+3. `}` জাভাস্ক্রিপ্ট এক্সপ্রেশন বন্ধ করছে  
 
 <Sandpack>
 
@@ -525,7 +527,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-You can also move this expression into a separate function like `getImageUrl` below:
+আপনি এই এক্সপ্রেশনটিকে একটি আলাদা ফাংশনে, যেমন `getImageUrl`, এ স্থানান্তরিত করতে পারেন:
 
 <Sandpack>
 
@@ -580,7 +582,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-Variables and functions can help you keep the markup simple!
+ভেরিয়েবল এবং ফাংশনগুলো আপনার মার্কআপকে সরল রাখতে সাহায্য করতে পারে!
 
 </Solution>
 
diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md
index aae682d14..f5b970cd2 100644
--- a/src/content/learn/passing-props-to-a-component.md
+++ b/src/content/learn/passing-props-to-a-component.md
@@ -1,26 +1,26 @@
 ---
-title: Passing Props to a Component
+title: কম্পোনেন্টে প্রপস পাস করা
 ---
 
 <Intro>
 
-React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, and functions.
+React কম্পোনেন্টগুলো *props* ব্যবহার করে একে অপরের সাথে যোগাযোগ করে। প্রতিটি parent কম্পোনেন্ট তার child কম্পোনেন্টগুলোকে props দিয়ে কিছু তথ্য পাঠাতে পারে। Props HTML attributes-এর মত মনে হতে পারে, তবে আপনি এর মাধ্যমে object, array এবং function সহ যেকোনো JavaScript মান পাঠাতে পারেন।
 
 </Intro>
 
 <YouWillLearn>
 
-* How to pass props to a component
-* How to read props from a component
-* How to specify default values for props
-* How to pass some JSX to a component
-* How props change over time
+* কীভাবে একটি কম্পোনেন্টে props পাঠাতে হয়
+* কীভাবে একটি কম্পোনেন্ট থেকে props পড়তে হয়
+* কীভাবে props-এর জন্য default মান নির্দিষ্ট করতে হয়
+* কীভাবে একটি কম্পোনেন্টে কিছু JSX পাঠাতে হয়
+* কীভাবে সময়ের সাথে সাথে props পরিবর্তিত হয়
 
 </YouWillLearn>
 
-## Familiar props {/*familiar-props*/}
+## সুপরিচিত props {/*familiar-props*/}
 
-Props are the information that you pass to a JSX tag. For example, `className`, `src`, `alt`, `width`, and `height` are some of the props you can pass to an `<img>`:
+প্রপস হলো সেই তথ্য যা আপনি একটি JSX ট্যাগে পাঠান। উদাহরণস্বরূপ, `className`, `src`, `alt`, `width`, এবং `height` হল কিছু প্রপস, যা আপনি একটি `<img>` ট্যাগে পাঠাতে পারেন।
 
 <Sandpack>
 
@@ -51,11 +51,11 @@ body { min-height: 120px; }
 
 </Sandpack>
 
-The props you can pass to an `<img>` tag are predefined (ReactDOM conforms to [the HTML standard](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). But you can pass any props to *your own* components, such as `<Avatar>`, to customize them. Here's how!
+আপনি যে প্রপসগুলো `<img>` ট্যাগে পাঠাতে পারেন, সেগুলো পূর্বনির্ধারিত (ReactDOM [HTML স্ট্যান্ডার্ড](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)-এর সাথে সামঞ্জস্যপূর্ণ)। তবে আপনি *নিজের* কম্পোনেন্টগুলো, যেমন `<Avatar>`,-এ যেকোনো প্রপস পাঠাতে পারেন তাদের কাস্টমাইজ করার জন্য। এটি কীভাবে করবেন, দেখুন!
 
-## Passing props to a component {/*passing-props-to-a-component*/}
+## একটি কম্পোনেন্টে প্রপস পাঠানো {/*passing-props-to-a-component*/}
 
-In this code, the `Profile` component isn't passing any props to its child component, `Avatar`:
+এই কোডে, `Profile` কম্পোনেন্টটি এর চাইল্ড কম্পোনেন্ট `Avatar`-এ কোনো প্রপস পাঠাচ্ছে না:
 
 ```js
 export default function Profile() {
@@ -65,11 +65,11 @@ export default function Profile() {
 }
 ```
 
-You can give `Avatar` some props in two steps.
+আপনি দুটি ধাপে `Avatar`-এ কিছু props দিতে পারেন।
 
-### Step 1: Pass props to the child component {/*step-1-pass-props-to-the-child-component*/}
+### ধাপ ১: child কম্পোনেন্টে props পাঠানো {/*step-1-pass-props-to-the-child-component*/}
 
-First, pass some props to `Avatar`. For example, let's pass two props: `person` (an object), and `size` (a number):
+প্রথমে, কিছু প্রপস `Avatar`-এ পাঠান। উদাহরণস্বরূপ, দুটি প্রপস পাঠানো যাক: `person` (একটি অবজেক্ট), এবং `size` (একটি সংখ্যা):
 
 ```js
 export default function Profile() {
@@ -84,15 +84,15 @@ export default function Profile() {
 
 <Note>
 
-If double curly braces after `person=` confuse you, recall [they're merely an object](/learn/javascript-in-jsx-with-curly-braces#using-double-curlies-css-and-other-objects-in-jsx) inside the JSX curlies.
+যদি `person=` এর পর ডাবল কার্লি ব্রেস আপনাকে বিভ্রান্ত করে, মনে রাখুন [এগুলো কেবল একটি অবজেক্ট](https://react.dev/learn/javascript-in-jsx-with-curly-braces#using-double-curlies-css-and-other-objects-in-jsx) JSX-এর কার্লি ব্রেসের ভিতরে।
 
 </Note>
 
-Now you can read these props inside the `Avatar` component.
+এখন আপনি এই props `Avatar` কম্পোনেন্টের ভিতরে পড়তে পারেন।
 
-### Step 2: Read props inside the child component {/*step-2-read-props-inside-the-child-component*/}
+### ধাপ ২: চাইল্ড কম্পোনেন্টের ভেতরে প্রপস পড়ুন {/*step-2-read-props-inside-the-child-component*/}
 
-You can read these props by listing their names `person, size` separated by the commas inside `({` and `})` directly after `function Avatar`. This lets you use them inside the `Avatar` code, like you would with a variable.
+আপনি `function Avatar`-এর ঠিক পরে `({` এবং `})` এর ভিতরে props-এর নামগুলো কমা দিয়ে আলাদা করে লিখে এই props পড়তে পারেন। এভাবে, আপনি সেগুলোকে ভেরিয়েবলের মত ব্যবহার করতে পারেন।
 
 ```js
 function Avatar({ person, size }) {
@@ -100,9 +100,9 @@ function Avatar({ person, size }) {
 }
 ```
 
-Add some logic to `Avatar` that uses the `person` and `size` props for rendering, and you're done.
+`person` এবং `size` props ব্যবহার করে `Avatar`-এ কিছু logic যোগ করুন, আর আপনার কাজ শেষ।
 
-Now you can configure `Avatar` to render in many different ways with different props. Try tweaking the values!
+এখন আপনি বিভিন্ন props-এর সাথে `Avatar`-কে বিভিন্ন উপায়ে রেন্ডার করতে পারেন। মান পরিবর্তন করে দেখুন!
 
 <Sandpack>
 
@@ -168,9 +168,9 @@ body { min-height: 120px; }
 
 </Sandpack>
 
-Props let you think about parent and child components independently. For example, you can change the `person` or the `size` props inside `Profile` without having to think about how `Avatar` uses them. Similarly, you can change how the `Avatar` uses these props, without looking at the `Profile`.
+প্রপস আপনাকে প্যারেন্ট এবং চাইল্ড কম্পোনেন্টগুলোকে স্বাধীনভাবে ভাবতে সাহায্য করে। উদাহরণস্বরূপ, আপনি Profile-এর মধ্যে person বা size প্রপস পরিবর্তন করতে পারেন, Avatar কীভাবে সেগুলো ব্যবহার করে তা নিয়ে চিন্তা না করেই। একইভাবে, আপনি Avatar-এ প্রপসগুলো কীভাবে ব্যবহৃত হচ্ছে তা পরিবর্তন করতে পারেন, Profile-এর দিকে না তাকিয়েই।
 
-You can think of props like "knobs" that you can adjust. They serve the same role as arguments serve for functions—in fact, props _are_ the only argument to your component! React component functions accept a single argument, a `props` object:
+আপনি প্রপসকে “নব” বা নিয়ন্ত্রণ কাঁটা হিসেবে ভাবতে পারেন যা আপনি সামঞ্জস্য করতে পারেন। এগুলো আসলে ফাংশনের আর্গুমেন্টের মতো কাজ করে—আসলে, প্রপস হচ্ছে আপনার কম্পোনেন্টের একমাত্র আর্গুমেন্ট! React কম্পোনেন্ট ফাংশনগুলো একটি মাত্র আর্গুমেন্ট, অর্থাৎ একটি প্রপস অবজেক্ট গ্রহণ করে।
 
 ```js
 function Avatar(props) {
@@ -180,11 +180,11 @@ function Avatar(props) {
 }
 ```
 
-Usually you don't need the whole `props` object itself, so you destructure it into individual props.
+সাধারণত আপনাকে সম্পূর্ণ `props` object প্রয়োজন হয় না, তাই আপনি এটি আলাদা props এ ভেঙে ফেলেন।
 
 <Pitfall>
 
-**Don't miss the pair of `{` and `}` curlies** inside of `(` and `)` when declaring props:
+**প্রপস ডিক্লেয়ার করার সময় `{` এবং `}` জোড়া মিস করবেন না** `(` এবং `)` এর ভেতরে:
 
 ```js
 function Avatar({ person, size }) {
@@ -192,7 +192,7 @@ function Avatar({ person, size }) {
 }
 ```
 
-This syntax is called ["destructuring"](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_a_function_parameter) and is equivalent to reading properties from a function parameter:
+এই সিনট্যাক্সটিকে ["ডিস্ট্রাকচারিং"](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_a_function_parameter) বলা হয় এবং এটি ফাংশন প্যারামিটার থেকে প্রপার্টি পড়ার সমতুল্য।
 
 ```js
 function Avatar(props) {
@@ -204,9 +204,9 @@ function Avatar(props) {
 
 </Pitfall>
 
-## Specifying a default value for a prop {/*specifying-a-default-value-for-a-prop*/}
+## প্রপের জন্য একটি ডিফল্ট মান নির্ধারণ করা {/*specifying-a-default-value-for-a-prop*/}
 
-If you want to give a prop a default value to fall back on when no value is specified, you can do it with the destructuring by putting `=` and the default value right after the parameter:
+যদি আপনি কোনো প্রপের জন্য ডিফল্ট মান নির্ধারণ করতে চান, যাতে কোনো মান নির্দিষ্ট না থাকলে তা প্রযোজ্য হয়, তাহলে ডিস্ট্রাকচারিংয়ে প্যারামিটারের পরে `=` এবং ডিফল্ট মানটি যোগ করতে পারেন:
 
 ```js
 function Avatar({ person, size = 100 }) {
@@ -214,13 +214,13 @@ function Avatar({ person, size = 100 }) {
 }
 ```
 
-Now, if `<Avatar person={...} />` is rendered with no `size` prop, the `size` will be set to `100`.
+এখন, যদি `<Avatar person={...} />` কোনো `size` প্রপ ছাড়া রেন্ডার করা হয়, তাহলে `size` সেট হবে `100`।
 
-The default value is only used if the `size` prop is missing or if you pass `size={undefined}`. But if you pass `size={null}` or `size={0}`, the default value will **not** be used.
+ডিফল্ট মানটি কেবল তখনই ব্যবহৃত হবে যদি `size` প্রপটি অনুপস্থিত থাকে অথবা আপনি `size={undefined}` পাঠান। তবে, যদি আপনি `size={null}` বা `size={0}` পাঠান, তাহলে ডিফল্ট মান **ব্যবহৃত হবে না**।
 
-## Forwarding props with the JSX spread syntax {/*forwarding-props-with-the-jsx-spread-syntax*/}
+## JSX স্প্রেড syntax এর সাথে props ফরোয়ার্ড করা {/*forwarding-props-with-the-jsx-spread-syntax*/}
 
-Sometimes, passing props gets very repetitive:
+কখনও কখনও, props পাঠানো খুবই পুনরাবৃত্তিমূলক হতে পারে:
 
 ```js
 function Profile({ person, size, isSepia, thickBorder }) {
@@ -237,7 +237,7 @@ function Profile({ person, size, isSepia, thickBorder }) {
 }
 ```
 
-There's nothing wrong with repetitive code—it can be more legible. But at times you may value conciseness. Some components forward all of their props to their children, like how this `Profile` does with `Avatar`. Because they don't use any of their props directly, it can make sense to use a more concise "spread" syntax:
+পুনরাবৃত্তিমূলক কোডে কোনো সমস্যা নেই—এটি আরও বোধগম্য হতে পারে। কিন্তু কখনও কখনও আপনি সংক্ষিপ্ততা মূল্যায়ন করতে পারেন। কিছু কম্পোনেন্ট তাদের সমস্ত props child কম্পোনেন্টে ফরোয়ার্ড করে, যেমন `Profile` `Avatar`-এর সাথে করে। যেহেতু তারা কোনো props সরাসরি ব্যবহার করে না, তাই একটি সংক্ষিপ্ত "স্প্রেড" syntax ব্যবহার করা যেতে পারে:
 
 ```js
 function Profile(props) {
@@ -249,13 +249,13 @@ function Profile(props) {
 }
 ```
 
-This forwards all of `Profile`'s props to the `Avatar` without listing each of their names.
+এটি `Profile` এর সমস্ত props `Avatar` এ ফরোয়ার্ড করে কোনো নাম তালিকা ছাড়াই।
 
-**Use spread syntax with restraint.** If you're using it in every other component, something is wrong. Often, it indicates that you should split your components and pass children as JSX. More on that next!
+**স্প্রেড syntax নিয়ন্ত্রণের সাথে ব্যবহার করুন।** যদি আপনি এটি প্রতিটি কম্পোনেন্টে ব্যবহার করেন, তাহলে কিছু সমস্যা রয়েছে। সাধারণত, এটি নির্দেশ করে যে আপনাকে আপনার কম্পোনেন্টগুলো ভাগ করা উচিত এবং children JSX হিসেবে পাঠানো উচিত।
 
-## Passing JSX as children {/*passing-jsx-as-children*/}
+## children হিসেবে JSX পাঠানো {/*passing-jsx-as-children*/}
 
-It is common to nest built-in browser tags:
+বিল্ট-ইন ব্রাউজার ট্যাগ নেস্ট করা সাধারণ:
 
 ```js
 <div>
@@ -263,7 +263,7 @@ It is common to nest built-in browser tags:
 </div>
 ```
 
-Sometimes you'll want to nest your own components the same way:
+আপনার নিজস্ব কম্পোনেন্টগুলো একইভাবে নেস্ট করতে পারেন:
 
 ```js
 <Card>
@@ -271,7 +271,7 @@ Sometimes you'll want to nest your own components the same way:
 </Card>
 ```
 
-When you nest content inside a JSX tag, the parent component will receive that content in a prop called `children`. For example, the `Card` component below will receive a `children` prop set to `<Avatar />` and render it in a wrapper div:
+যখন আপনি একটি JSX ট্যাগের ভিতরে কন্টেন্ট নেস্ট করেন, parent কম্পোনেন্ট সেই কন্টেন্টকে একটি `children` prop-এ গ্রহণ করবে। উদাহরণস্বরূপ, নিচের `Card` কম্পোনেন্ট একটি `children` prop গ্রহণ করবে যেটি `<Avatar />` সেট করা আছে এবং এটি একটি wrapper div এ রেন্ডার করবে:
 
 <Sandpack>
 
@@ -347,17 +347,17 @@ export function getImageUrl(person, size = 's') {
 
 </Sandpack>
 
-Try replacing the `<Avatar>` inside `<Card>` with some text to see how the `Card` component can wrap any nested content. It doesn't need to "know" what's being rendered inside of it. You will see this flexible pattern in many places.
+`Card`-এর ভিতরে `<Avatar>` পরিবর্তন করে কিছু টেক্সট যোগানোর চেষ্টা করুন এবং দেখুন কীভাবে `Card` যেকোনো নেস্টেড কন্টেন্টকে র‍্যাপ করতে পারে। এটি জানে না যে এর ভিতরে কী রেন্ডার করা হচ্ছে। আপনি এই নমনীয় pattern অনেক জায়গায় দেখতে পাবেন।
 
-You can think of a component with a `children` prop as having a "hole" that can be "filled in" by its parent components with arbitrary JSX. You will often use the `children` prop for visual wrappers: panels, grids, etc.
+একটি `children` prop সহ কম্পোনেন্টকে এমন একটি "ছিদ্র" হিসেবে ভাবতে পারেন যা parent কম্পোনেন্টগুলো যেকোনো JSX দিয়ে "পূর্ণ" করতে পারে। আপনি ভিজ্যুয়াল wrapper-দের জন্য children prop প্রায়ই ব্যবহার করবেন: প্যানেল, গ্রিড ইত্যাদি।
 
 <Illustration src="/images/docs/illustrations/i_children-prop.png" alt='A puzzle-like Card tile with a slot for "children" pieces like text and Avatar' />
 
 ## How props change over time {/*how-props-change-over-time*/}
 
-The `Clock` component below receives two props from its parent component: `color` and `time`. (The parent component's code is omitted because it uses [state](/learn/state-a-components-memory), which we won't dive into just yet.)
+নিচের `Clock` কম্পোনেন্টটি parent কম্পোনেন্ট থেকে দুটি props গ্রহণ করে: `color` এবং `time`। (parent কম্পোনেন্টের কোডটি বাদ দেওয়া হয়েছে কারণ এটি [state](/learn/state-a-components-memory) ব্যবহার করে, যা আমরা এখনো আলোচনা করছি না।)
 
-Try changing the color in the select box below:
+নীচের সিলেক্ট বক্সে রং পরিবর্তন করার চেষ্টা করুন:
 
 <Sandpack>
 
@@ -407,21 +407,21 @@ export default function App() {
 
 </Sandpack>
 
-This example illustrates that **a component may receive different props over time.** Props are not always static! Here, the `time` prop changes every second, and the `color` prop changes when you select another color. Props reflect a component's data at any point in time, rather than only in the beginning.
+এই উদাহরণটি দেখায় যে **একটি কম্পোনেন্ট সময়ের সাথে সাথে বিভিন্ন প্রপস পেতে পারে।** প্রপস সর্বদা স্থির নয়! এখানে, `time` প্রপ প্রতি সেকেন্ডে পরিবর্তিত হয়, এবং `color` প্রপটি যখন আপনি অন্য রঙ নির্বাচন করেন তখন পরিবর্তিত হয়। প্রপস যেকোনো সময়ে একটি কম্পোনেন্টের ডেটা প্রতিফলিত করে, শুধুমাত্র শুরুতে নয়।
 
-However, props are [immutable](https://en.wikipedia.org/wiki/Immutable_object)—a term from computer science meaning "unchangeable". When a component needs to change its props (for example, in response to a user interaction or new data), it will have to "ask" its parent component to pass it _different props_—a new object! Its old props will then be cast aside, and eventually the JavaScript engine will reclaim the memory taken by them.
+তবে, প্রপস [অপরিবর্তনীয়](https://en.wikipedia.org/wiki/Immutable_object)—এটি একটি কম্পিউটার বিজ্ঞান সম্পর্কিত শব্দ যার অর্থ "অপরিবর্তনীয়"। যখন একটি কম্পোনেন্ট তার প্রপস পরিবর্তন করতে চায় (যেমন, ব্যবহারকারীর একটি ক্রিয়ার প্রতিক্রিয়া হিসেবে বা নতুন ডেটার জন্য), তখন এটি তার প্যারেন্ট কম্পোনেন্টকে _বিভিন্ন প্রপস_—একটি নতুন অবজেক্ট পাঠানোর জন্য "বিনীত" করবে! তারপর তার পুরানো প্রপস বাদ দেওয়া হবে, এবং অবশেষে জাভাস্ক্রিপ্ট ইঞ্জিন তাদের দ্বারা নেওয়া মেমরি পুনরুদ্ধার করবে।
 
-**Don't try to "change props".** When you need to respond to the user input (like changing the selected color), you will need to "set state", which you can learn about in [State: A Component's Memory.](/learn/state-a-components-memory)
+**"প্রপস পরিবর্তন করার চেষ্টা করবেন না"।** যখন আপনাকে ব্যবহারকারীর ইনপুটের প্রতিক্রিয়া জানাতে হবে (যেমন নির্বাচিত রঙ পরিবর্তন করা), তখন আপনাকে "স্টেট সেট" করতে হবে, যা আপনি [স্টেট: একটি কম্পোনেন্টের মেমরি](/learn/state-a-components-memory) থেকে শিখতে পারেন।
 
 <Recap>
 
-* To pass props, add them to the JSX, just like you would with HTML attributes.
-* To read props, use the `function Avatar({ person, size })` destructuring syntax.
-* You can specify a default value like `size = 100`, which is used for missing and `undefined` props.
-* You can forward all props with `<Avatar {...props} />` JSX spread syntax, but don't overuse it!
-* Nested JSX like `<Card><Avatar /></Card>` will appear as `Card` component's `children` prop.
-* Props are read-only snapshots in time: every render receives a new version of props.
-* You can't change props. When you need interactivity, you'll need to set state.
+* প্রপস পাঠাতে, সেগুলো JSX-এ যুক্ত করুন, যেমন আপনি HTML অ্যাট্রিবিউটগুলোর সাথে করেন।
+* প্রপস পড়তে, `function Avatar({ person, size })` ডিস্ট্রাকচারিং সিনট্যাক্স ব্যবহার করুন।
+* আপনি একটি ডিফল্ট মান নির্ধারণ করতে পারেন যেমন `size = 100`, যা অনুপস্থিত এবং `undefined` প্রপসের জন্য ব্যবহৃত হয়।
+* আপনি সমস্ত প্রপসকে `<Avatar {...props} />` JSX স্প্রেড সিনট্যাক্সের মাধ্যমে ফরওয়ার্ড করতে পারেন, তবে এটিকে অতিরিক্ত ব্যবহার করবেন না!
+* নেস্টেড JSX যেমন `<Card><Avatar /></Card>` `Card` কম্পোনেন্টের `children` প্রপ হিসেবে উপস্থিত হবে।
+* প্রপস হল সময়ের একটি রিড-অনলি স্ন্যাপশট: প্রতিটি রেন্ডারে প্রপসের একটি নতুন সংস্করণ পাওয়া যায়।
+* আপনি প্রপস পরিবর্তন করতে পারবেন না। যখন আপনাকে ইন্টারঅ্যাকটিভিটি প্রয়োজন, তখন আপনাকে স্টেট সেট করতে হবে।
 
 </Recap>
 
@@ -429,9 +429,9 @@ However, props are [immutable](https://en.wikipedia.org/wiki/Immutable_object)
 
 <Challenges>
 
-#### Extract a component {/*extract-a-component*/}
+#### একটি কম্পোনেন্ট বের করুন {/*extract-a-component*/}
 
-This `Gallery` component contains some very similar markup for two profiles. Extract a `Profile` component out of it to reduce the duplication. You'll need to choose what props to pass to it.
+এই `Gallery` কম্পোনেন্টে দুটি প্রফাইলের জন্য কিছু খুব অনুরূপ মার্কআপ রয়েছে। ডুপ্লিকেশন কমানোর জন্য একটি `Profile` কম্পোনেন্ট বের করুন। আপনাকে এটি কী প্রপস পাঠাতে হবে তা নির্বাচন করতে হবে।
 
 <Sandpack>
 
@@ -524,15 +524,15 @@ li { margin: 5px; }
 
 <Hint>
 
-Start by extracting the markup for one of the scientists. Then find the pieces that don't match it in the second example, and make them configurable by props.
+একজন বিজ্ঞানীর জন্য মার্কআপ বের করার মাধ্যমে শুরু করুন। তারপর দ্বিতীয় উদাহরণে যা মেলে না তা খুঁজে বের করুন এবং সেগুলোকে প্রপস দ্বারা কনফিগারেবল করুন।
 
 </Hint>
 
 <Solution>
 
-In this solution, the `Profile` component accepts multiple props: `imageId` (a string), `name` (a string), `profession` (a string), `awards` (an array of strings), `discovery` (a string), and `imageSize` (a number).
+এই সমাধানে, `Profile` কম্পোনেন্টটি একাধিক প্রপ গ্রহণ করে: `imageId` (একটি স্ট্রিং), `name` (একটি স্ট্রিং), `profession` (একটি স্ট্রিং), `awards` (স্ট্রিংয়ের একটি অ্যারে), `discovery` (একটি স্ট্রিং), এবং `imageSize` (একটি সংখ্যা)।
 
-Note that the `imageSize` prop has a default value, which is why we don't pass it to the component.
+মনে রাখবেন যে `imageSize` প্রপের একটি ডিফল্ট মান রয়েছে, এই কারণে আমরা এটি কম্পোনেন্টে পাঠাচ্ছি না।
 
 <Sandpack>
 
@@ -630,9 +630,9 @@ li { margin: 5px; }
 
 </Sandpack>
 
-Note how you don't need a separate `awardCount` prop if `awards` is an array. Then you can use `awards.length` to count the number of awards. Remember that props can take any values, and that includes arrays too!
+মনে রাখবেন যে যদি `awards` একটি অ্যারে হয় তবে আপনাকে আলাদা `awardCount` প্রপের প্রয়োজন নেই। আপনি `awards.length` ব্যবহার করে পুরস্কারের সংখ্যা গুণতে পারেন। মনে রাখবেন যে প্রপস যেকোনো মান নিতে পারে, এবং এর মধ্যে অ্যারেও রয়েছে!
 
-Another solution, which is more similar to the earlier examples on this page, is to group all information about a person in a single object, and pass that object as one prop:
+আরেকটি সমাধান, যা এই পৃষ্ঠায় আগের উদাহরণগুলির সাথে আরও সাদৃশ্যপূর্ণ, হল একটি ব্যক্তির সম্পর্কে সমস্ত তথ্য একটি একক অবজেক্টে গ্রুপ করা এবং সেই অবজেক্টটি একটি প্রপ হিসেবে পাঠানো:
 
 <Sandpack>
 
@@ -727,15 +727,15 @@ li { margin: 5px; }
 
 </Sandpack>
 
-Although the syntax looks slightly different because you're describing properties of a JavaScript object rather than a collection of JSX attributes, these examples are mostly equivalent, and you can pick either approach.
+যদিও সিনট্যাক্সটি কিছুটা ভিন্ন দেখাচ্ছে কারণ আপনি একটি জাভাস্ক্রিপ্ট অবজেক্টের প্রপার্টি বর্ণনা করছেন, এটি JSX অ্যাট্রিবিউটগুলোর একটি সংগ্রহের পরিবর্তে, এই উদাহরণগুলি প্রধানত সমতুল্য, এবং আপনি যেকোনো একটি পদ্ধতি বেছে নিতে পারেন।
 
 </Solution>
 
-#### Adjust the image size based on a prop {/*adjust-the-image-size-based-on-a-prop*/}
+#### একটি প্রপের উপর ভিত্তি করে ইমেজের আকার সমন্বয় করুন {/*adjust-the-image-size-based-on-a-prop*/}
 
-In this example, `Avatar` receives a numeric `size` prop which determines the `<img>` width and height. The `size` prop is set to `40` in this example. However, if you open the image in a new tab, you'll notice that the image itself is larger (`160` pixels). The real image size is determined by which thumbnail size you're requesting.
+আপনার উদাহরণে, `Avatar` একটি সংখ্যাগত `size` প্রপ গ্রহণ করে যা `<img>` এর প্রস্থ এবং উচ্চতা নির্ধারণ করে। এই উদাহরণে, `size` প্রপটি `40` এ সেট করা হয়েছে। তবে, যদি আপনি নতুন ট্যাবে চিত্রটি খোলেন, আপনি লক্ষ্য করবেন যে চিত্রের আকার আসলে বড় (`160` পিক্সেল)। বাস্তব চিত্রের আকার নির্ধারণ করা হয় আপনি কোন থাম্বনেল আকারটি অনুরোধ করছেন তার দ্বারা।
 
-Change the `Avatar` component to request the closest image size based on the `size` prop. Specifically, if the `size` is less than `90`, pass `'s'` ("small") rather than `'b'` ("big") to the `getImageUrl` function. Verify that your changes work by rendering avatars with different values of the `size` prop and opening images in a new tab.
+`Avatar` উপাদানটি পরিবর্তন করুন যাতে `size` প্রপের উপর ভিত্তি করে সবচেয়ে কাছের চিত্রের আকার অনুরোধ করা হয়। বিশেষভাবে, যদি `size` `90` এর কম হয়, তাহলে `getImageUrl` ফাংশনে `'s'` ("ছোট") পাস করুন `'b'` ("বড়") এর পরিবর্তে। আপনার পরিবর্তনগুলি কার্যকর কিনা তা যাচাই করুন বিভিন্ন `size` প্রপ মান দিয়ে অ্যাভাটারগুলি রেন্ডার করে এবং নতুন ট্যাবে চিত্রগুলি খুলে।
 
 <Sandpack>
 
@@ -848,7 +848,7 @@ export function getImageUrl(person, size) {
 
 </Sandpack>
 
-You could also show a sharper image for high DPI screens by taking [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio) into account:
+আপনি উচ্চ DPI স্ক্রীনের জন্য আরও তীক্ষ্ণ চিত্রও দেখাতে পারেন `window.devicePixelRatio` কে বিবেচনায় নিয়ে: [MDN ডোকুমেন্টেশন](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio)
 
 <Sandpack>
 
@@ -919,13 +919,13 @@ export function getImageUrl(person, size) {
 
 </Sandpack>
 
-Props let you encapsulate logic like this inside the `Avatar` component (and change it later if needed) so that everyone can use the `<Avatar>` component without thinking about how the images are requested and resized.
+প্রপগুলি আপনাকে `Avatar` উপাদানের ভিতরে এইরকম লজিক এনক্যাপসুলেট করতে দেয় (এবং প্রয়োজনে পরে এটি পরিবর্তন করতে) যাতে সবাই `<Avatar>` উপাদানটি ব্যবহার করতে পারে চিন্তা না করেই যে চিত্রগুলি কিভাবে অনুরোধ করা হয় এবং আকার পরিবর্তন করা হয়।
 
 </Solution>
 
-#### Passing JSX in a `children` prop {/*passing-jsx-in-a-children-prop*/}
+#### `children` প্রপে JSX পাস করা {/*passing-jsx-in-a-children-prop*/}
 
-Extract a `Card` component from the markup below, and use the `children` prop to pass different JSX to it:
+নিচের মার্কআপ থেকে একটি `Card` উপাদান বের করুন এবং `children` প্রপ ব্যবহার করে এতে ভিন্ন ভিন্ন JSX পাঠান:
 
 <Sandpack>
 
@@ -983,13 +983,13 @@ h1 {
 
 <Hint>
 
-Any JSX you put inside of a component's tag will be passed as the `children` prop to that component.
+আপনি একটি উপাদানের ট্যাগের ভিতরে যে কোনও JSX রাখলে সেটি সেই উপাদানের `children` প্রপ হিসেবে পাঠানো হবে।
 
 </Hint>
 
 <Solution>
 
-This is how you can use the `Card` component in both places:
+এভাবে আপনি উভয় স্থানে `Card` উপাদানটি ব্যবহার করতে পারেন:
 
 <Sandpack>
 
@@ -1051,7 +1051,7 @@ h1 {
 
 </Sandpack>
 
-You can also make `title` a separate prop if you want every `Card` to always have a title:
+আপনি যদি চান যে প্রতিটি `Card`-এ সব সময় একটি শিরোনাম থাকুক, তাহলে `title`-কে একটি পৃথক প্রপ হিসাবেও তৈরি করতে পারেন:
 
 <Sandpack>
 
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index d37791456..ac463124c 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -1,31 +1,30 @@
 ---
-title: 'Tutorial: Tic-Tac-Toe'
+title: 'টিউটোরিয়াল: Tic-Tac-Toe'
 ---
 
 <Intro>
 
-You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you'll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React.
+আপনি এই টিউটোরিয়ালে একটি ছোট টিক-ট্যাক-টো গেম তৈরি করবেন। এই টিউটোরিয়ালটিতে কোনও পূর্ববর্তী রিয়েক্ট জ্ঞানের প্রয়োজনীয়তা নেই। আপনি যে প্রযুক্তিগুলি এই টিউটোরিয়ালে শিখবেন তা যেকোন রিয়েক্ট অ্যাপ তৈরি করার জন্য মৌলিক জ্ঞান, এবং এটি সম্পূর্ণভাবে বুঝতে পারলে এটি আপনাকে রিয়েক্ট সম্পর্কে একটি গভীর ধারণা দেবে।
 
 </Intro>
 
 <Note>
 
-This tutorial is designed for people who prefer to **learn by doing** and want to quickly try making something tangible. If you prefer learning each concept step by step, start with [Describing the UI.](/learn/describing-the-ui)
+এই টিউটোরিয়ালটি তাদের জন্য ডিজাইন করা হয়েছে যারা কাজ করে শিখতে পছন্দ করেন এবং দ্রুত কিছু বাস্তবধর্মী কিছু তৈরি করার চেষ্টা করতে চান। যদি আপনি ধাপে ধাপে প্রতিটি ধারণা শেখাকে অগ্রাধিকার দিতে চান, তবে [Describing the UI](/learn/describing-the-ui) দিয়ে শুরু করুন।
 
 </Note>
 
-The tutorial is divided into several sections:
+এই টিউটোরিয়ালটি কয়েকটি বিভাগে বিভক্ত:
 
-- [Setup for the tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial.
-- [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state.
-- [Completing the game](#completing-the-game) will teach you **the most common techniques** in React development.
-- [Adding time travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React.
+- [Setup for the tutorial](#setup-for-the-tutorial) আপনাকে একেবারে গোড়া থেকে শুরু করাবে, যাতে আপনি টিউটোরিয়ালটি অনুসরণ করতে পারেন।
+- [Overview](#overview) **রিয়েক্টের মৌলিক ধারণাগুলি** শেখাবে:যেমন ধরুন- কম্পোনেন্ট, প্রপস এবং স্টেট।
+- [Completing the game](#completing-the-game) আপনাকে **রিয়েক্ট ডেভেলপমেন্টে সবচেয়ে প্রচলিত কৌশলগুলি** শেখাবে।
+- [Adding time travel](#adding-time-travel) আপনাকে রিয়েক্টের অনন্য শক্তিগুলি সম্পর্কে **একটি গভীর পরিজ্ঞান** দেবে।
 
-### What are you building? {/*what-are-you-building*/}
+### আপনি কি তৈরি করছেন? {/*what-are-you-building*/}
 
-In this tutorial, you'll build an interactive tic-tac-toe game with React.
-
-You can see what it will look like when you're finished here:
+এই টিউটোরিয়ালে, আপনি রিয়েক্টের সাথে একটি ইন্টারঅ্যাকটিভ টিক-ট্যাক-টো গেম তৈরি করবেন।
+আপনি এখানে দেখতে পারেন এটি আপনার শেষ হওয়ার পর কেমন দেখতে হবে:
 
 <Sandpack>
 
@@ -194,15 +193,15 @@ body {
 
 </Sandpack>
 
-If the code doesn't make sense to you yet, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax.
+যদি কোডটি এখনও আপনার কাছে বোঝা না যায়, বা কোডের সিনট্যাক্সের সাথে আপনি পরিচিত না হন, তবে চিন্তা করবেন না! এই টিউটোরিয়ালের লক্ষ্য হল আপনাকে রিয়েক্ট এবং এর সিনট্যাক্স বুঝতে সাহায্য করা।
 
-We recommend that you check out the tic-tac-toe game above before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and it is updated as the game progresses.
+আমরা আপনাকে টিউটোরিয়ালটি চালিয়ে যাওয়ার আগে উপরের টিক-ট্যাক-টো গেমটি দেখার পরামর্শ দিচ্ছি। আপনি যে বৈশিষ্ট্যটি লক্ষ্য করবেন তা হল গেমের বোর্ডের ডান দিকে একটি নম্বরযুক্ত তালিকা রয়েছে। এই তালিকাটি গেমে ঘটে যাওয়া সমস্ত ধাপগুলির ইতিবৃত্ত দেখায় এবং এটি গেমের অগ্রগতির সাথে আপডেট হয়।
 
-Once you've played around with the finished tic-tac-toe game, keep scrolling. You'll start with a simpler template in this tutorial. Our next step is to set you up so that you can start building the game.
+একবার আপনি সম্পন্ন টিক-ট্যাক-টো গেমটি নিয়ে খেলা শুরু করলে, স্ক্রোল করতে থাকুন। এই টিউটোরিয়ালে আপনি একটি সহজ টেমপ্লেট দিয়ে শুরু করবেন। আমাদের পরবর্তী পদক্ষেপ হল আপনি যাতে গেমটি তৈরি করা শুরু করতে পারেন সেভাবে আপনাকে তৈরি করা।
 
-## Setup for the tutorial {/*setup-for-the-tutorial*/}
+## টিউটোরিয়ালের জন্য সেটআপ {/*setup-for-the-tutorial*/}
 
-In the live code editor below, click **Fork** in the top-right corner to open the editor in a new tab using the website CodeSandbox. CodeSandbox lets you write code in your browser and preview how your users will see the app you've created. The new tab should display an empty square and the starter code for this tutorial.
+নিচের লাইভ কোড এডিটরটিতে, **Fork** বাটনে ক্লিক করুন, যা উপরের ডান কোণায় রয়েছে, CodeSandbox ওয়েবসাইট ব্যবহার করে নতুন ট্যাবে এডিটরটিতে খুলতে। CodeSandbox আপনাকে আপনার ব্রাউজারে কোড লেখার সুযোগ দেয় এবং আপনি যে অ্যাপটি তৈরি করেছেন তা আপনার ব্যবহারকারীরা কিভাবে দেখতে পাবে তা প্রিভিউ করতে দেয়। নতুন ওপেন হওয়া ট্যাবটি একটি খালি বর্গ এবং এই টিউটোরিয়ালের জন্য শুরু কোড প্রদর্শন করবে।
 
 <Sandpack>
 
@@ -261,33 +260,33 @@ body {
 
 <Note>
 
-You can also follow this tutorial using your local development environment. To do this, you need to:
+আপনি আপনার পিসিতে লোকাল ডেভেলপমেন্ট করেও এই টিউটোরিয়ালটি অনুসরণ করতে পারেন। এটি করতে, আপনাকে:
 
-1. Install [Node.js](https://nodejs.org/en/)
-1. In the CodeSandbox tab you opened earlier, press the top-left corner button to open the menu, and then choose **Download Sandbox** in that menu to download an archive of the files locally
-1. Unzip the archive, then open a terminal and `cd` to the directory you unzipped
-1. Install the dependencies with `npm install`
-1. Run `npm start` to start a local server and follow the prompts to view the code running in a browser
+1. [Node.js](https://nodejs.org/en/) ইনস্টল করতে হবে।
+2.আপনি আগে খুলেছিলেন CodeSandbox ট্যাবে, উপরের বাম কোণের বোতামে ক্লিক করুন যাতে মেনু খুলে, এবং তারপর সেই মেনুতে **Download Sandbox** নির্বাচন করুন যাতে ফাইলগুলির একটি আর্কাইভ স্থানীয়ভাবে ডাউনলোড করা যায়।
+3. আর্কাইভটি আনজিপ করুন, তারপর একটি টার্মিনাল খুলুন এবং আনজিপ করা ডিরেক্টরিতে `cd` করুন।
+4. `npm install` দিয়ে ডিপেন্ডেন্সিগুলি ইনস্টল করুন।
+5. লোকাল সার্ভার শুরু করতে `npm start` চালান এবং একটি ব্রাউজারে কোডটি চলমান দেখতে প্রম্পট অনুসরণ করুন।
 
-If you get stuck, don't let this stop you! Follow along online instead and try a local setup again later.
+যদি আপনি আটকেও যান, থেমে যাবেন না! পরিবর্তে অনলাইনে অনুসরণ করুন এবং পরে আবার লোকাল সেটআপ করার চেষ্টা করুন।
 
 </Note>
 
-## Overview {/*overview*/}
+## ওভারভিউ {/*overview*/}
 
-Now that you're set up, let's get an overview of React!
+যেহেতু আপনার সেটআপ হয়ে গেছে, চলুন রিয়েক্টের একটি ওভারভিউ দেখা যাক!
 
-### Inspecting the starter code {/*inspecting-the-starter-code*/}
+### স্টার্টারকোড পর্যবেক্ষন {/*inspecting-the-starter-code*/}
 
-In CodeSandbox you'll see three main sections:
+CodeSandbox-এ আপনি তিনটি প্রধান বিভাগ দেখতে পাবেন:
 
 ![CodeSandbox with starter code](../images/tutorial/react-starter-code-codesandbox.png)
 
-1. The _Files_ section with a list of files like `App.js`, `index.js`, `styles.css` and a folder called `public`
-1. The _code editor_ where you'll see the source code of your selected file
-1. The _browser_ section where you'll see how the code you've written will be displayed
+1. _ফাইল_ সেকশনে `App.js`, `index.js`, `styles.css` এর মতো ফাইলগুলোর একটি তালিকা এবং `public` নামক একটি ফোল্ডার থাকবে।
+2. _কোড এডিটর_ যেখানে আপনি আপনার সিলেক্টেড ফাইলের সোর্স কোড দেখতে পাবেন।
+3. _ব্রাউজার_ পার্টে আপনি যে কোডটি লিখেছেন তা কিভাবে প্রদর্শিত হবে তা দেখতে পাবেন।
 
-The `App.js` file should be selected in the _Files_ section. The contents of that file in the _code editor_ should be:
+ফাইল সেকশনে `App.js` ফাইলটি নির্বাচিত থাকতে হবে। _কোড এডিটর_ এ সেই ফাইলের বিষয়বস্তু হবে:
 
 ```jsx
 export default function Square() {
@@ -295,15 +294,16 @@ export default function Square() {
 }
 ```
 
-The _browser_ section should be displaying a square with a X in it like this:
+_ব্রাউজার_ সেকশনটি একটি বর্গক্ষেত্রের মধ্যে X চিহ্ন দেখাচ্ছে, এরকম:
 
 ![x-filled square](../images/tutorial/x-filled-square.png)
 
-Now let's have a look at the files in the starter code.
+এখন আসুন স্টার্টার কোডের ফাইলগুলোর দিকে নজর দিই।
 
 #### `App.js` {/*appjs*/}
 
-The code in `App.js` creates a _component_. In React, a component is a piece of reusable code that represents a part of a user interface. Components are used to render, manage, and update the UI elements in your application. Let's look at the component line by line to see what's going on:
+`App.js`-এর কোড একটি _কম্পোনেন্ট_ তৈরি করে। React-এ, একটি কম্পোনেন্ট হলো পুনঃব্যবহারযোগ্য কোডের একটি অংশ, যা একটি ইউজার ইন্টারফেসের একটি অংশকে উপস্থাপন করে। কম্পোনেন্টগুলোকে আপনার অ্যাপ্লিকেশনে UI উপাদানগুলো রেন্ডার, পরিচালনা এবং আপডেট করার জন্য ব্যবহার করা হয়। চলুন লাইন ধরে ধরে দেখি এই কম্পোনেন্টটি কীভাবে কাজ করছে।
+
 
 ```js {1}
 export default function Square() {
@@ -311,7 +311,7 @@ export default function Square() {
 }
 ```
 
-The first line defines a function called `Square`. The `export` JavaScript keyword makes this function accessible outside of this file. The `default` keyword tells other files using your code that it's the main function in your file.
+প্রথম লাইনে `Square` নামের একটি ফাংশন সংজ্ঞায়িত করা হয়েছে। JavaScript এর `export` কিওয়ার্ডটি এই ফাংশনকে এই ফাইলের বাইরে থেকে অ্যাক্সেসযোগ্য করে তোলে। `default` কিওয়ার্ডটি অন্যান্য ফাইলকে জানায় যে এটি আপনার ফাইলে প্রধান ফাংশন:
 
 ```js {2}
 export default function Square() {
@@ -319,15 +319,15 @@ export default function Square() {
 }
 ```
 
-The second line returns a button. The `return` JavaScript keyword means whatever comes after is returned as a value to the caller of the function. `<button>` is a *JSX element*. A JSX element is a combination of JavaScript code and HTML tags that describes what you'd like to display. `className="square"` is a button property or *prop* that tells CSS how to style the button. `X` is the text displayed inside of the button and `</button>` closes the JSX element to indicate that any following content shouldn't be placed inside the button.
+দ্বিতীয় লাইনে একটি বাটন রিটার্ন করে। JavaScript এর `return` কিওয়ার্ডটি নির্দেশ করে যে, পরবর্তীতে যা আসবে তা ফাংশনের কলারের জন্য একটি মান হিসেবে ফেরত দেওয়া হবে। `<button>` একটি _JSX উপাদান_। একটি JSX উপাদান হলো JavaScript কোড এবং HTML ট্যাগের একটি সমন্বয়, যা আপনি যা প্রদর্শন করতে চান তা বর্ণনা করে। `className="square"` হলো একটি বাটন প্রপার্টি বা _prop_ যা CSS-কে বাটনটি কীভাবে স্টাইল করতে হবে তা জানায়। `X` হলো বাটনের ভিতরে প্রদর্শিত টেক্সট এবং `</button>` JSX উপাদানটি বন্ধ করে দেয়, যা নির্দেশ করে যে পরবর্তী কনটেন্টটি বাটনের ভিতরে রাখা উচিত নয়।
 
 #### `styles.css` {/*stylescss*/}
 
-Click on the file labeled `styles.css` in the _Files_ section of CodeSandbox. This file defines the styles for your React app. The first two _CSS selectors_ (`*` and `body`) define the style of large parts of your app while the `.square` selector defines the style of any component where the `className` property is set to `square`. In your code, that would match the button from your Square component in the `App.js` file.
+_ফাইল_ সেকশনে `styles.css` নামক ফাইলে ক্লিক করুন। এই ফাইলটি আপনার React অ্যাপের স্টাইলগুলি সংজ্ঞায়িত করে। প্রথম দুটি _CSS সিলেক্টর_ (`*` এবং `body`) আপনার অ্যাপের বড় অংশগুলোর স্টাইল নির্ধারণ করে, `.square` সিলেক্টরটি যেকোনো কম্পোনেন্টের স্টাইল নির্ধারণ করে যেখানে `className` প্রপার্টি `square` সেট করা হয়েছে। আপনার কোডে, এটি `App.js` ফাইলে আপনার Square কম্পোনেন্ট থেকে বাটনের সাথে মিলবে।
 
 #### `index.js` {/*indexjs*/}
 
-Click on the file labeled `index.js` in the _Files_ section of CodeSandbox. You won't be editing this file during the tutorial but it is the bridge between the component you created in the `App.js` file and the web browser.
+_CodeSandbox_এর ফাইল সেকশনে `index.js` নামক ফাইলে ক্লিক করুন। আপনি এই টিউটোরিয়াল চলাকালীন এই ফাইলটি এডিট করবেন না, কিন্তু এটি আপনার তৈরি করা `App.js` ফাইলের কম্পোনেন্ট এবং ওয়েব ব্রাউজারের মধ্যে একটি সেতুর কাজ করে।
 
 ```jsx
 import { StrictMode } from 'react';
@@ -337,20 +337,19 @@ import './styles.css';
 import App from './App';
 ```
 
-Lines 1-5 bring all the necessary pieces together: 
+এই লাইনগুলো সব প্রয়োজনীয় অংশকে একত্রে নিয়ে আসেঃ
+- React
+- ব্রাউজার(React DOM)এর সাথে ইন্টারাকশন এর জন্য React’s library
+- কম্পোনেন্ট এর জন্য স্টাইল
+- আপ্পনার তৈরি করা এপ কম্পোনেন্ট `App.js`.
 
-* React
-* React's library to talk to web browsers (React DOM)
-* the styles for your components
-* the component you created in `App.js`.
+ফাইলের বাকি অংশ সব টুকরোগুলোকে একত্রিত করে এবং চূড়ান্ত ফলাফল `public` ফোল্ডারের `index.html`-এ অন্তর্ভুক্ত করে।
 
-The remainder of the file brings all the pieces together and injects the final product into `index.html` in the `public` folder.
+### বোর্ড তৈরি করা {/*building-the-board*/}
 
-### Building the board {/*building-the-board*/}
+চলুন আবার `App.js`-এ ফিরে যাই। এখানে আপনি টিউটোরিয়ালটির বাকি সময় ব্যয় করবেন।
 
-Let's get back to `App.js`. This is where you'll spend the rest of the tutorial.
-
-Currently the board is only a single square, but you need nine! If you just try and copy paste your square to make two squares like this:
+বর্তমানে বোর্ডটি কেবল একটি একক বর্গ, কিন্তু আপনাকে নয়টি বর্গের প্রয়োজন! যদি আপনি কেবল কপি পেস্ট করার চেষ্টা করেন যাতে দুইটি বর্গ হয় এরকম:
 
 ```js {2}
 export default function Square() {
@@ -358,7 +357,7 @@ export default function Square() {
 }
 ```
 
-You'll get this error:
+তুমি এই এরোরটি দেখবে:
 
 <ConsoleBlock level="error">
 
@@ -366,7 +365,7 @@ You'll get this error:
 
 </ConsoleBlock>
 
-React components need to return a single JSX element and not multiple adjacent JSX elements like two buttons. To fix this you can use *Fragments* (`<>` and `</>`) to wrap multiple adjacent JSX elements like this:
+React কম্পোনেন্টগুলিকে একটি একক JSX উপাদান ফেরত দিতে হয় এবং একাধিক পাশাপাশি থাকা JSX উপাদান, যেমন দুটি বোতাম ফেরত দেওয়া যাবে না। এটি ঠিক করতে আপনি _Fragments_ (`<>` এবং `</>`) ব্যবহার করতে পারেন, যা একাধিক পাশাপাশি থাকা JSX উপাদানগুলিকে এরকমভাবে মোড়াবে:
 
 ```js {3-6}
 export default function Square() {
@@ -379,17 +378,17 @@ export default function Square() {
 }
 ```
 
-Now you should see:
+এখন এটা দেখা যাবে:
 
 ![two x-filled squares](../images/tutorial/two-x-filled-squares.png)
 
-Great! Now you just need to copy-paste a few times to add nine squares and...
+দারুণ! এখন আপনাকে কেবল কয়েকবার কপি-পেস্ট করতে হবে যাতে নয়টি স্কয়ার যোগ করা যায় এবং..
 
 ![nine x-filled squares in a line](../images/tutorial/nine-x-filled-squares.png)
 
-Oh no! The squares are all in a single line, not in a grid like you need for our board. To fix this you'll need to group your squares into rows with `div`s and add some CSS classes. While you're at it, you'll give each square a number to make sure you know where each square is displayed.
+ওহ না! সব স্কয়ার একটি লাইনেই রয়েছে, বোর্ডের মতো গ্রিডে নেই। এটি ঠিক করতে আপনাকে `div` দিয়ে স্কয়ারগুলোকে সারিতে সাজাতে হবে এবং কিছু CSS ক্লাস যোগ করতে হবে। একইসাথে, আপনি প্রতিটি স্কয়ারকে একটি নম্বর দেবেন, যাতে আপনি জানেন প্রতিটি স্কয়ার কোথায় প্রদর্শিত হচ্ছে।
 
-In the `App.js` file, update the `Square` component to look like this:
+`App.js` ফাইলে, `Square` কম্পোনেন্টটি এইভাবে আপডেট করুন:
 
 ```js {3-19}
 export default function Square() {
@@ -415,11 +414,11 @@ export default function Square() {
 }
 ```
 
-The CSS defined in `styles.css` styles the divs with the `className` of `board-row`. Now that you've grouped your components into rows with the styled `div`s you have your tic-tac-toe board:
+`styles.css`-এ সংজ্ঞায়িত CSS কোড `className` হিসাবে `board-row` যুক্ত div-এর স্টাইল নির্ধারণ করে। এখন আপনি আপনার কম্পোনেন্টগুলোকে স্টাইলযুক্ত `div` দিয়ে সারিতে গোষ্ঠীবদ্ধ করেছেন, ফলে আপনার টিক-ট্যাক-টো বোর্ড তৈরি হয়েছে:
 
 ![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png)
 
-But you now have a problem. Your component named `Square`, really isn't a square anymore. Let's fix that by changing the name to `Board`:
+কিন্তু এখন আপনার একটি সমস্যা হয়েছে। আপনার `Square` নামে যে কম্পোনেন্টটি আছে, তা আর সত্যিই একটি স্কয়ার নয়। চলুন এটি ঠিক করি নামটি `Board`-এ পরিবর্তন করে:
 
 ```js {1}
 export default function Board() {
@@ -427,7 +426,7 @@ export default function Board() {
 }
 ```
 
-At this point your code should look something like this:
+এ পর্যায়ে আপনার কোডটি কিছুটা এরকম দেখাবে:
 
 <Sandpack>
 
@@ -504,15 +503,15 @@ body {
 
 <Note>
 
-Psssst... That's a lot to type! It's okay to copy and paste code from this page. However, if you're up for a little challenge, we recommend only copying code that you've manually typed at least once yourself.
+এটি টাইপ করার জন্য অনেক কিছু! এই পেজ থেকে কোড কপি এবং পেস্ট করা ঠিক আছে। তবে, আপনি যদি একটু চ্যালেঞ্জ নিতে চান, আমরা পরামর্শ দেব যে আপনি শুধুমাত্র সেই কোডটি কপি করুন, যা আপনি অন্তত একবার নিজে হাতে টাইপ করেছেন।
 
 </Note>
 
-### Passing data through props {/*passing-data-through-props*/}
+### Props দিয়ে ডেটা পাঠানো {/*passing-data-through-props*/}
 
-Next, you'll want to change the value of a square from empty to "X" when the user clicks on the square. With how you've built the board so far you would need to copy-paste the code that updates the square nine times (once for each square you have)! Instead of copy-pasting, React's component architecture allows you to create a reusable component to avoid messy, duplicated code.
+এবার আপনি চাইবেন, ব্যবহারকারী যখন একটি স্কোয়ারে ক্লিক করবে, সেই স্কোয়ারের মানটি খালি থেকে “X” তে পরিবর্তিত হবে। আপনি যেভাবে বোর্ডটি তৈরি করেছেন, তাতে আপনাকে স্কোয়ারের মান আপডেট করার কোডটি নয়বার (প্রতিটি স্কোয়ারের জন্য একবার করে) কপি-পেস্ট করতে হবে! কপি-পেস্টের পরিবর্তে, React-এর কম্পোনেন্ট আর্কিটেকচার আপনাকে একটি পুনরায় ব্যবহারযোগ্য কম্পোনেন্ট তৈরি করার সুযোগ দেয় যাতে কোডের বিশৃঙ্খল ও পুনরাবৃত্তি এড়ানো যায়।
 
-First, you are going to copy the line defining your first square (`<button className="square">1</button>`) from your `Board` component into a new `Square` component:
+প্রথমে, আপনি আপনার `Board` কম্পোনেন্ট থেকে প্রথম স্কোয়ারের (`<button className="square">1</button>`) জন্য ডিফাইন করা লাইনটি কপি করে একটি নতুন `Square` কম্পোনেন্টে নিয়ে যাবেন।
 
 ```js {1-3}
 function Square() {
@@ -524,7 +523,7 @@ export default function Board() {
 }
 ```
 
-Then you'll update the Board component to render that `Square` component using JSX syntax:
+এরপর আপনি `Board` কম্পোনেন্টটি আপডেট করবেন যাতে এটি JSX সিনট্যাক্স ব্যবহার করে সেই `Square` কম্পোনেন্টটি রেন্ডার করে:
 
 ```js {5-19}
 // ...
@@ -551,15 +550,15 @@ export default function Board() {
 }
 ```
 
-Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter. 
+লক্ষ্য করুন, ব্রাউজারের `div`-এর মতো নয়, আপনার নিজের কম্পোনেন্টগুলো যেমন `Board` এবং `Square` অবশ্যই বড় হাতের অক্ষর দিয়ে শুরু হতে হবে। 
 
-Let's take a look:
+আসুন একবার দেখে নেই:
 
 ![one-filled board](../images/tutorial/board-filled-with-ones.png)
 
-Oh no! You lost the numbered squares you had before. Now each square says "1". To fix this, you will use *props* to pass the value each square should have from the parent component (`Board`) to its child (`Square`).
+ওহহো! আপনি আগের নম্বরযুক্ত স্কোয়ারগুলো হারিয়ে ফেলেছেন। এখন প্রতিটি স্কোয়ারই "1" দেখাচ্ছে। এটি ঠিক করার জন্য, আপনি _props_ ব্যবহার করবেন যাতে প্যারেন্ট কম্পোনেন্ট (`Board`) থেকে চাইল্ড কম্পোনেন্টে (`Square`) প্রতিটি স্কোয়ারের মান পাঠানো যায়।
 
-Update the `Square` component to read the `value` prop that you'll pass from the `Board`:
+`Square` কম্পোনেন্টটিকে আপডেট করুন যাতে এটি `Board` থেকে পাঠানো `value` প্রপটি পড়ে:
 
 ```js {1}
 function Square({ value }) {
@@ -567,9 +566,9 @@ function Square({ value }) {
 }
 ```
 
-`function Square({ value })` indicates the Square component can be passed a prop called `value`.
+`function Square({ value })` নির্দেশ করে যে `Square` কম্পোনেন্টে একটি `value` নামে প্রপ পাস করা যেতে পারে।
 
-Now you want to display that `value` instead of `1` inside every square. Try doing it like this:
+এখন আপনি প্রতিটি স্কোয়ারের ভিতরে "1"-এর পরিবর্তে সেই `value` প্রদর্শন করতে চান। এটি এইভাবে করার চেষ্টা করুন:
 
 ```js {2}
 function Square({ value }) {
@@ -577,11 +576,11 @@ function Square({ value }) {
 }
 ```
 
-Oops, this is not what you wanted:
+ওহ না, এটা তো আমরা যা চেয়েছিলাম তা নয়:
 
 ![value-filled board](../images/tutorial/board-filled-with-value.png)
 
-You wanted to render the JavaScript variable called `value` from your component, not the word "value". To "escape into JavaScript" from JSX, you need curly braces. Add curly braces around `value` in JSX like so:
+আমরা আমাদের কম্পোনেন্ট থেকে `value` নামে জাভাস্ক্রিপ্ট ভ্যারিয়েবলটি রেন্ডার করতে চেয়েছিলাম, “value” শব্দটি নয়। JSX থেকে জাভাস্ক্রিপ্টে "escape" করতে হলে আমাদের কার্লি ব্রেস ব্যবহার করতে হবে। JSX-এ `value` এর চারপাশে কার্লি ব্রেস যোগ করুন এইভাবে:
 
 ```js {2}
 function Square({ value }) {
@@ -589,11 +588,11 @@ function Square({ value }) {
 }
 ```
 
-For now, you should see an empty board:
+এখন, আমরা একটি খালি বোর্ড দেখতে পাওয়া উচিত:
 
 ![empty board](../images/tutorial/empty-board.png)
 
-This is because the `Board` component hasn't passed the `value` prop to each `Square` component it renders yet. To fix it you'll add the `value` prop to each `Square` component rendered by the `Board` component:
+এটি হচ্ছে কারণ `Board` কম্পোনেন্টটি এখনও প্রতিটি `Square` কম্পোনেন্টে রেন্ডার করার সময় `value` প্রপটি পাঠায়নি। এটি ঠিক করতে, আপনি `Board` কম্পোনেন্ট দ্বারা রেন্ডার করা প্রতিটি `Square` কম্পোনেন্টে `value` প্রপটি যোগ করবেন:
 
 ```js {5-7,10-12,15-17}
 export default function Board() {
@@ -619,11 +618,11 @@ export default function Board() {
 }
 ```
 
-Now you should see a grid of numbers again:
+এখন আপনি আবার সংখ্যার একটি গ্রিড দেখতে পাবেন:
 
 ![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png)
 
-Your updated code should look like this:
+আপনার আপডেট করা কোডটি এরকম দেখতে হওয়া উচিত:
 
 <Sandpack>
 
@@ -702,9 +701,9 @@ body {
 
 </Sandpack>
 
-### Making an interactive component {/*making-an-interactive-component*/}
+### ইন্টারেক্টিভ কম্পোনেন্ট তৈরি করা {/*making-an-interactive-component*/}
 
-Let's fill the `Square` component with an `X` when you click it. Declare a function called `handleClick` inside of the `Square`. Then, add `onClick` to the props of the button JSX element returned from the `Square`:
+যখন আপনি স্কোয়ারটিতে ক্লিক করবেন, তখন `Square` কম্পোনেন্টটিকে একটি `X` দিয়ে পূর্ণ করুন। `Square` এর ভিতরে একটি ফাংশন ঘোষণা করুন যাকে `handleClick` বলা হবে। তারপর, `Square` থেকে ফেরত দেওয়া বাটন JSX উপাদানের প্রপ্সে `onClick` যোগ করুন:
 
 ```js {2-4,9}
 function Square({ value }) {
@@ -723,19 +722,19 @@ function Square({ value }) {
 }
 ```
 
-If you click on a square now, you should see a log saying `"clicked!"` in the _Console_ tab at the bottom of the _Browser_ section in CodeSandbox. Clicking the square more than once will log `"clicked!"` again. Repeated console logs with the same message will not create more lines in the console. Instead, you will see an incrementing counter next to your first `"clicked!"` log.
+যদি আপনি এখন একটি স্কোয়ারে ক্লিক করেন, তাহলে আপনি _Browser_ সেকশনের নিচে _Console_ ট্যাবে `"clicked!"` লেখা একটি লগ দেখতে পাবেন। একাধিকবার স্কোয়ারটিতে ক্লিক করলে `"clicked!"` আবার লগ হবে। একই বার্তার পুনরাবৃত্তি লগ কনসোলে আরও লাইন তৈরি করবে না। পরিবর্তে, আপনার প্রথম `"clicked!"` লগের পাশে একটি বৃদ্ধি পাওয়া কাউন্টার দেখতে পাবেন।
 
 <Note>
 
-If you are following this tutorial using your local development environment, you need to open your browser's Console. For example, if you use the Chrome browser, you can view the Console with the keyboard shortcut **Shift + Ctrl + J** (on Windows/Linux) or **Option + ⌘ + J** (on macOS).
+যদি আপনি আপনার লোকাল ডেভেলপমেন্ট পরিবেশে এই টিউটোরিয়ালটি অনুসরণ করছেন, তাহলে আপনাকে আপনার ব্রাউজারের কনসোল খুলতে হবে। উদাহরণস্বরূপ, আপনি যদি ক্রোম ব্রাউজার ব্যবহার করেন, তাহলে **Shift + Ctrl + J** (Windows/Linux-এ) অথবা **Option + ⌘ + J** (macOS-এ) কীবোর্ড শর্টকাট ব্যবহার করে কনসোলটি দেখতে পারেন।
 
 </Note>
 
-As a next step, you want the Square component to "remember" that it got clicked, and fill it with an "X" mark. To "remember" things, components use *state*.
+পরবর্তী ধাপে, আপনি চান যে `Square` কম্পোনেন্টটি “মনে রাখুক” যে এটি ক্লিক করা হয়েছে এবং এটি একটি “X” চিহ্ন দিয়ে পূর্ণ করুক। “মনে রাখার” জন্য, কম্পোনেন্টগুলি _state_ ব্যবহার করে।
 
-React provides a special function called `useState` that you can call from your component to let it "remember" things. Let's store the current value of the `Square` in state, and change it when the `Square` is clicked.
+React একটি বিশেষ ফাংশন প্রদান করে যার নাম `useState`, যা আপনি আপনার কম্পোনেন্ট থেকে কল করতে পারেন যাতে এটি “মনে রাখে”। চলুন, `Square` এর বর্তমান মানটি স্টেটে সংরক্ষণ করি এবং যখন `Square` ক্লিক করা হয় তখন এটি পরিবর্তন করি।
 
-Import `useState` at the top of the file. Remove the `value` prop from the `Square` component. Instead, add a new line at the start of the `Square` that calls `useState`. Have it return a state variable called `value`:
+ফাইলের উপরের দিকে `useState` ইম্পোর্ট করুন। `Square` কম্পোনেন্ট থেকে `value` প্রপটি সরান। পরিবর্তে, `Square` এর শুরুর দিকে একটি নতুন লাইন যোগ করুন যা `useState` কল করে। এটি একটি স্টেট ভেরিয়েবল `value` ফিরিয়ে দেবে:
 
 ```js {1,3,4}
 import { useState } from 'react';
@@ -747,9 +746,9 @@ function Square() {
     //...
 ```
 
-`value` stores the value and `setValue` is a function that can be used to change the value. The `null` passed to `useState` is used as the initial value for this state variable, so `value` here starts off equal to `null`.
+`value` মানটি সংরক্ষণ করে এবং `setValue` একটি ফাংশন যা মান পরিবর্তন করতে ব্যবহৃত হতে পারে। `useState`-এ পাঠানো `null` এই স্টেট ভেরিয়েবলের প্রাথমিক মান হিসাবে ব্যবহৃত হয়, তাই এখানে `value` শুরুতে `null` সমান।
 
-Since the `Square` component no longer accepts props anymore, you'll remove the `value` prop from all nine of the Square components created by the Board component:
+যেহেতু `Square` কম্পোনেন্টটি এখন আর প্রপস গ্রহণ করে না, আপনি `Board` কম্পোনেন্ট দ্বারা তৈরি সব নয়টি `Square` কম্পোনেন্ট থেকে `value` প্রপটি সরিয়ে ফেলবেন:
 
 ```js {6-8,11-13,16-18}
 // ...
@@ -776,7 +775,7 @@ export default function Board() {
 }
 ```
 
-Now you'll change `Square` to display an "X" when clicked. Replace the `console.log("clicked!");` event handler with `setValue('X');`. Now your `Square` component looks like this:
+এখন আপনি `Square`-কে ক্লিক করা হলে একটি “X” প্রদর্শন করতে পরিবর্তন করবেন। `console.log("clicked!");` ইভেন্ট হ্যান্ডলারটি `setValue('X');` দিয়ে প্রতিস্থাপন করুন। এখন আপনার `Square` কম্পোনেন্টটি এরকম দেখতে হবে:
 
 ```js {5}
 function Square() {
@@ -797,13 +796,13 @@ function Square() {
 }
 ```
 
-By calling this `set` function from an `onClick` handler, you're telling React to re-render that `Square` whenever its `<button>` is clicked. After the update, the `Square`'s `value` will be `'X'`, so you'll see the "X" on the game board. Click on any Square, and "X" should show up:
+এই `set` ফাংশনটিকে একটি `onClick` হ্যান্ডলার থেকে কল করে, আপনি React-কে বলছেন যে `<button>` ক্লিক করার সময় সেই `Square`-টি পুনরায় রেন্ডার করতে হবে। আপডেটের পর, `Square` এর `value` `'X'` হবে, তাই আপনি গেম বোর্ডে “X” দেখতে পাবেন। যে কোনও স্কোয়ারে ক্লিক করুন, এবং “X” প্রদর্শিত হবে:
 
 ![adding xes to board](../images/tutorial/tictac-adding-x-s.gif)
 
-Each Square has its own state: the `value` stored in each Square is completely independent of the others. When you call a `set` function in a component, React automatically updates the child components inside too.
+প্রতিটি `Square`-এর নিজস্ব স্টেট রয়েছে: প্রতিটি `Square`-এ সংরক্ষিত `value` অন্যগুলোর থেকে সম্পূর্ণ স্বাধীন। যখন আপনি একটি কম্পোনেন্টে `set` ফাংশন কল করেন, React স্বয়ংক্রিয়ভাবে এর ভিতরের চাইল্ড কম্পোনেন্টগুলোকে আপডেট করে।
 
-After you've made the above changes, your code will look like this:
+আপনার উপরোক্ত পরিবর্তনগুলি করার পর, আপনার কোডটি এরকম দেখাবে:
 
 <Sandpack>
 
@@ -899,35 +898,35 @@ body {
 
 ### React Developer Tools {/*react-developer-tools*/}
 
-React DevTools let you check the props and the state of your React components. You can find the React DevTools tab at the bottom of the _browser_ section in CodeSandbox:
+React DevTools আপনাকে আপনার React কম্পোনেন্টগুলির প্রপস এবং স্টেট পরীক্ষা করতে দেয়। আপনি CodeSandbox-এ _browser_ সেকশনের নিচে React DevTools ট্যাবটি খুঁজে পাবেন:
 
 ![React DevTools in CodeSandbox](../images/tutorial/codesandbox-devtools.png)
 
-To inspect a particular component on the screen, use the button in the top left corner of React DevTools:
+React DevTools-এ কোনো নির্দিষ্ট কম্পোনেন্ট পরিদর্শন করতে, উপরের বাঁ দিকের বাটনটি ব্যবহার করুন:
 
 ![Selecting components on the page with React DevTools](../images/tutorial/devtools-select.gif)
 
 <Note>
 
-For local development, React DevTools is available as a [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), and [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) browser extension. Install it, and the *Components* tab will appear in your browser Developer Tools for sites using React.
+লোকাল ডেভেলপমেন্টের জন্য, React DevTools [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), এবং [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) ব্রাউজারের একটি এক্সটেনশন হিসেবে পাওয়া যায়। এটি ইনস্টল করুন, এবং React ব্যবহার করা সাইটগুলির জন্য আপনার ব্রাউজারের ডেভেলপার টুলসে _Components_ ট্যাবটি উপস্থিত হবে।
 
 </Note>
 
-## Completing the game {/*completing-the-game*/}
+## গেম সম্পূর্ণ করা {/*completing-the-game*/}
 
-By this point, you have all the basic building blocks for your tic-tac-toe game. To have a complete game, you now need to alternate placing "X"s and "O"s on the board, and you need a way to determine a winner.
+এই পর্যায়ে এসে, আপনার টিক-ট্যাক-টো গেমটির সব মৌলিক উপাদান প্রস্তুত। সম্পূর্ণ গেমটি তৈরি করতে, এখন আপনাকে বোর্ডে "X" এবং "O" পালাক্রমে বসানোর ব্যবস্থা করতে হবে এবং বিজয়ী নির্ধারণের একটি উপায় লাগবে।
 
-### Lifting state up {/*lifting-state-up*/}
+### স্টেট উপরে তোলা {/*lifting-state-up*/}
 
-Currently, each `Square` component maintains a part of the game's state. To check for a winner in a tic-tac-toe game, the `Board` would need to somehow know the state of each of the 9 `Square` components.
+বর্তমানে, প্রতিটি `Square` কম্পোনেন্ট গেমের স্টেটের একটি অংশ ধরে রাখছে। টিক-ট্যাক-টো গেমে বিজয়ী নির্ধারণ করতে `Board` কম্পোনেন্টের জন্য প্রতিটি ৯টি `Square` কম্পোনেন্টের স্টেট জানা প্রয়োজন।
 
-How would you approach that? At first, you might guess that the `Board` needs to "ask" each `Square` for that `Square`'s state. Although this approach is technically possible in React, we discourage it because the code becomes difficult to understand, susceptible to bugs, and hard to refactor. Instead, the best approach is to store the game's state in the parent `Board` component instead of in each `Square`. The `Board` component can tell each `Square` what to display by passing a prop, like you did when you passed a number to each Square.
+আপনি কীভাবে এই সমস্যার সমাধান করবেন? প্রথমে আপনার মনে হতে পারে যে, `Board` কম্পোনেন্ট প্রতিটি `Square`-এর স্টেট জানতে তাদের কাছে "জানতে" চাইবে। যদিও React-এ এই পদ্ধতি ব্যবহার করা সম্ভব, তবে আমরা এটি নিরুৎসাহিত করি কারণ এতে কোড জটিল হয়ে যায়, বাগের সম্ভাবনা বাড়ে এবং রিফ্যাক্টরিং করা কঠিন হয়ে যায়। এর পরিবর্তে, সবচেয়ে ভালো পদ্ধতি হল গেমের স্টেট প্রতিটি `Square` কম্পোনেন্টে রাখার পরিবর্তে পেরেন্ট `Board` কম্পোনেন্টে সংরক্ষণ করা। `Board` কম্পোনেন্ট প্রতিটি `Square`-কে প্রপসের মাধ্যমে জানিয়ে দিতে পারে যে তাদের কী প্রদর্শন করতে হবে, যেমনটি আপনি প্রতিটি `Square`-এ একটি সংখ্যা পাঠানোর সময় করেছিলেন।
 
-**To collect data from multiple children, or to have two child components communicate with each other, declare the shared state in their parent component instead. The parent component can pass that state back down to the children via props. This keeps the child components in sync with each other and with their parent.**
+**একাধিক চাইল্ডের থেকে ডেটা সংগ্রহ করার জন্য, অথবা দুটি চাইল্ড কম্পোনেন্টের মধ্যে যোগাযোগের জন্য, তাদের প্যারেন্ট কম্পোনেন্টে শেয়ার্ড স্টেট ঘোষণা করুন। প্যারেন্ট কম্পোনেন্ট সেই স্টেটটি চাইল্ডদের কাছে প্রপসের মাধ্যমে পাঠাতে পারে। এটি চাইল্ড কম্পোনেন্টগুলিকে একে অপরের এবং তাদের প্যারেন্টের সাথে সিঙ্ক রাখতে সাহায্য করে।**
 
-Lifting state into a parent component is common when React components are refactored.
+প্যারেন্ট কম্পোনেন্টে স্টেট লিফট করা একটি সাধারণ প্রক্রিয়া যখন React কম্পোনেন্টগুলি রিফ্যাক্টর করা হয়।
 
-Let's take this opportunity to try it out. Edit the `Board` component so that it declares a state variable named `squares` that defaults to an array of 9 nulls corresponding to the 9 squares:
+এখন আমরা এটি চেষ্টা করার সুযোগ নেব। `Board` কম্পোনেন্টটি সম্পাদনা করুন যাতে এটি একটি স্টেট ভেরিয়েবল ঘোষণা করে যার নাম `squares` এবং এটি 9টি null এর একটি অ্যারেতে ডিফল্ট থাকে, যা 9টি স্কোয়ারকে উপস্থাপন করে:
 
 ```js {3}
 // ...
@@ -939,13 +938,13 @@ export default function Board() {
 }
 ```
 
-`Array(9).fill(null)` creates an array with nine elements and sets each of them to `null`. The `useState()` call around it declares a `squares` state variable that's initially set to that array. Each entry in the array corresponds to the value of a square. When you fill the board in later, the `squares` array will look like this:
+`Array(9).fill(null)` একটি অ্যারে তৈরি করে যার মধ্যে নয়টি উপাদান থাকে এবং প্রতিটির মান `null` সেট করে। এর চারপাশে থাকা `useState()` কলটি একটি `squares` স্টেট ভেরিয়েবল ঘোষণা করে, যা প্রাথমিকভাবে সেই অ্যারেতে সেট করা হয়। অ্যারেটির প্রতিটি এন্ট্রি একটি স্কোয়ারের মানের সাথে সম্পর্কিত। যখন আপনি পরে বোর্ডটি পূর্ণ করবেন, `squares` অ্যারেটি এরকম দেখাবে:
 
 ```jsx
 ['O', null, 'X', 'X', 'X', 'O', 'O', null, null]
 ```
 
-Now your `Board` component needs to pass the `value` prop down to each `Square` that it renders:
+এখন আপনার `Board` কম্পোনেন্টটি যে প্রতিটি `Square` রেন্ডার করে, সেগুলিতে `value` প্রপটি পাঠাতে হবে:
 
 ```js {6-8,11-13,16-18}
 export default function Board() {
@@ -972,7 +971,7 @@ export default function Board() {
 }
 ```
 
-Next, you'll edit the `Square` component to receive the `value` prop from the Board component. This will require removing the Square component's own stateful tracking of `value` and the button's `onClick` prop:
+পরবর্তী পদক্ষেপে, আপনি `Square` কম্পোনেন্টটি আপডেট করবেন যাতে এটি `Board` কম্পোনেন্ট থেকে `value` প্রপটি গ্রহণ করে। এর জন্য `Square` কম্পোনেন্টের নিজস্ব স্টেটফুল ট্র্যাকিংটি `value` এবং বাটনের `onClick` প্রপটি সরাতে হবে:
 
 ```js {1,2}
 function Square({value}) {
@@ -980,11 +979,11 @@ function Square({value}) {
 }
 ```
 
-At this point you should see an empty tic-tac-toe board:
+এই পর্যায়ে আপনি একটি খালি টিক-ট্যাক-টো বোর্ড দেখতে পাবেন:
 
 ![empty board](../images/tutorial/empty-board.png)
 
-And your code should look like this:
+এবং আপনার কোডটি এরকম দেখতে হবে:
 
 <Sandpack>
 
@@ -1066,11 +1065,11 @@ body {
 
 </Sandpack>
 
-Each Square will now receive a `value` prop that will either be `'X'`, `'O'`, or `null` for empty squares.
+প্রতিটি `Square` এখন একটি `value` প্রপ গ্রহণ করবে যা `'X'`, `'O'`, অথবা খালি স্কোয়ারের জন্য `null` হবে।
 
-Next, you need to change what happens when a `Square` is clicked. The `Board` component now maintains which squares are filled. You'll need to create a way for the `Square` to update the `Board`'s state. Since state is private to a component that defines it, you cannot update the `Board`'s state directly from `Square`.
+পরবর্তী পদক্ষেপে, আপনাকে পরিবর্তন করতে হবে যে একটি `Square` ক্লিক করা হলে কী ঘটে। এখন `Board` কম্পোনেন্টটি কোন স্কোয়ারগুলি পূর্ণ হয়েছে তা বজায় রাখে। আপনাকে একটি উপায় তৈরি করতে হবে যাতে `Square` `Board` এর স্টেট আপডেট করতে পারে। যেহেতু স্টেট একটি কম্পোনেন্টের জন্য প্রাইভেট, তাই আপনি `Square` থেকে সরাসরি `Board` এর স্টেট আপডেট করতে পারবেন না।
 
-Instead, you'll pass down a function from the `Board` component to the `Square` component, and you'll have `Square` call that function when a square is clicked. You'll start with the function that the `Square` component will call when it is clicked. You'll call that function `onSquareClick`:
+বরং, আপনি `Board` কম্পোনেন্ট থেকে `Square` কম্পোনেন্টে একটি ফাংশন পাঠাবেন, এবং `Square` ক্লিক করার সময় সেই ফাংশনটি কল করবে। আপনি যে ফাংশনটি `Square` কম্পোনেন্টটি ক্লিক করার সময় কল করবে সেটি `onSquareClick` নামকরণ করবেন:
 
 ```js {3}
 function Square({ value }) {
@@ -1082,7 +1081,7 @@ function Square({ value }) {
 }
 ```
 
-Next, you'll add the `onSquareClick` function to the `Square` component's props:
+পরবর্তী পদক্ষেপে, আপনি `onSquareClick` ফাংশনটি `Square` কম্পোনেন্টের প্রপসে যুক্ত করবেন:
 
 ```js {1}
 function Square({ value, onSquareClick }) {
@@ -1094,7 +1093,7 @@ function Square({ value, onSquareClick }) {
 }
 ```
 
-Now you'll connect the `onSquareClick` prop to a function in the `Board` component that you'll name `handleClick`. To connect `onSquareClick` to `handleClick` you'll pass a function to the `onSquareClick` prop of the first `Square` component: 
+এখন আপনি `onSquareClick` প্রপটিকে `Board` কম্পোনেন্টের একটি ফাংশনের সাথে সংযুক্ত করবেন, যার নাম আপনি `handleClick` রাখবেন। `onSquareClick` কে `handleClick` এর সাথে সংযুক্ত করতে, আপনি প্রথম `Square` কম্পোনেন্টের `onSquareClick` প্রপটিতে একটি ফাংশন পাঠাবেন:
 
 ```js {7}
 export default function Board() {
@@ -1109,7 +1108,7 @@ export default function Board() {
 }
 ```
 
-Lastly, you will define the `handleClick` function inside the Board component to update the `squares` array holding your board's state:
+শেষে, আপনি `Board` কম্পোনেন্টের ভিতরে `handleClick` ফাংশনটি সংজ্ঞায়িত করবেন যাতে `squares` অ্যারেটি আপডেট হয়, যা আপনার বোর্ডের স্টেট ধারণ করে:
 
 ```js {4-8}
 export default function Board() {
@@ -1127,17 +1126,17 @@ export default function Board() {
 }
 ```
 
-The `handleClick` function creates a copy of the `squares` array (`nextSquares`) with the JavaScript `slice()` Array method. Then, `handleClick` updates the `nextSquares` array to add `X` to the first (`[0]` index) square.
+`handleClick` ফাংশনটি JavaScript `slice()` অ্যারে মেথড ব্যবহার করে `squares` অ্যারির একটি কপি (`nextSquares`) তৈরি করে। তারপর, `handleClick` প্রথম স্কোয়ারের (অর্থাৎ `[0]` ইনডেক্স) মান আপডেট করতে `nextSquares` অ্যারিটি `X` দিয়ে পরিবর্তন করে।
 
-Calling the `setSquares` function lets React know the state of the component has changed. This will trigger a re-render of the components that use the `squares` state (`Board`) as well as its child components (the `Square` components that make up the board).
+`setSquares` ফাংশনটি কল করলে React জানে যে কম্পোনেন্টের স্টেট পরিবর্তিত হয়েছে। এটি সেই কম্পোনেন্টগুলোর রেন্ডার পুনরায় করার জন্য ট্রিগার করবে যা `squares` স্টেট ব্যবহার করে (`Board`) এবং এর চাইল্ড কম্পোনেন্টগুলোর (বোর্ডের স্কোয়ার কম্পোনেন্টগুলো)।
 
 <Note>
 
-JavaScript supports [closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) which means an inner function (e.g. `handleClick`) has access to variables and functions defined in a outer function (e.g. `Board`). The `handleClick` function can read the `squares` state and call the `setSquares` method because they are both defined inside of the `Board` function.
+JavaScript [closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) সমর্থন করে, যার মানে একটি অভ্যন্তরীণ ফাংশন (যেমন `handleClick`) একটি বাইরের ফাংশনের (যেমন `Board`) মধ্যে সংজ্ঞায়িত ভেরিয়েবল এবং ফাংশনগুলির অ্যাক্সেস পায়। `handleClick` ফাংশনটি `squares` স্টেট পড়তে এবং `setSquares` মেথড কল করতে পারে কারণ উভয়ই `Board` ফাংশনের ভিতরে সংজ্ঞায়িত।
 
 </Note>
 
-Now you can add X's to the board...  but only to the upper left square. Your `handleClick` function is hardcoded to update the index for the upper left square (`0`). Let's update `handleClick` to be able to update any square. Add an argument `i` to the `handleClick` function that takes the index of the square to update:
+এখন আপনি বোর্ডে X যোগ করতে পারেন... কিন্তু শুধুমাত্র উপরের বাম স্কোয়ারে। আপনার `handleClick` ফাংশনটি উপরের বাম স্কোয়ারের ইনডেক্স (`0`) আপডেট করার জন্য হার্ডকোড করা। চলুন `handleClick` কে আপডেট করি যাতে এটি যেকোনো স্কোয়ার আপডেট করতে পারে। `handleClick` ফাংশনের একটি আর্গুমেন্ট `i` যোগ করুন, যা আপডেট করার স্কোয়ারের ইনডেক্স নেয়:
 
 ```js {4,6}
 export default function Board() {
@@ -1155,13 +1154,13 @@ export default function Board() {
 }
 ```
 
-Next, you will need to pass that `i` to `handleClick`. You could try to set the `onSquareClick` prop of square to be `handleClick(0)` directly in the JSX like this, but it won't work:
+পরবর্তী পদক্ষেপে, আপনাকে সেই `i` কে `handleClick` এ পাঠাতে হবে। আপনি `onSquareClick` প্রপটিকে সরাসরি JSX তে `handleClick(0)` হিসেবে সেট করার চেষ্টা করতে পারেন, তবে এটি কাজ করবে না:
 
 ```jsx
 <Square value={squares[0]} onSquareClick={handleClick(0)} />
 ```
 
-Here is why this doesn't work. The `handleClick(0)` call will be a part of rendering the board component. Because `handleClick(0)` alters the state of the board component by calling `setSquares`, your entire board component will be re-rendered again. But this runs `handleClick(0)` again, leading to an infinite loop:
+এটি কেন কাজ করে না তার কারণ হল। `handleClick(0)` কলটি বোর্ড কম্পোনেন্টের রেন্ডারিংয়ের অংশ হবে। যেহেতু `handleClick(0)` `setSquares` কল করে বোর্ড কম্পোনেন্টের স্টেট পরিবর্তন করে, আপনার সম্পূর্ণ বোর্ড কম্পোনেন্টটি আবার রেন্ডার হবে। কিন্তু এটি আবার `handleClick(0)` চালায়, যা একটি অসীম লুপের দিকে নিয়ে যায়:
 
 <ConsoleBlock level="error">
 
@@ -1169,13 +1168,13 @@ Too many re-renders. React limits the number of renders to prevent an infinite l
 
 </ConsoleBlock>
 
-Why didn't this problem happen earlier?
+এই সমস্যাটি কেন আগে ঘটেনি?
 
-When you were passing `onSquareClick={handleClick}`, you were passing the `handleClick` function down as a prop. You were not calling it! But now you are *calling* that function right away--notice the parentheses in `handleClick(0)`--and that's why it runs too early. You don't *want* to call `handleClick` until the user clicks!
+যখন আপনি `onSquareClick={handleClick}` পাঠাচ্ছিলেন, তখন আপনি `handleClick` ফাংশনটিকে একটি প্রপ হিসাবে নিচে পাঠাচ্ছিলেন। আপনি এটিকে কল করছেন না! কিন্তু এখন আপনি সেই ফাংশনটি সোজা সোজা কল করছেন—`handleClick(0)` এর মধ্যে প্যারেন্টেসিসগুলি লক্ষ্য করুন—এবং তাই এটি খুব তাড়াতাড়ি চলে। আপনি চান না যে ব্যবহারকারী ক্লিক না করা পর্যন্ত `handleClick` কে কল করা হোক!
 
-You could fix this by creating a function like `handleFirstSquareClick` that calls `handleClick(0)`, a function like `handleSecondSquareClick` that calls `handleClick(1)`, and so on. You would pass (rather than call) these functions down as props like `onSquareClick={handleFirstSquareClick}`. This would solve the infinite loop.
+আপনি এটি সমাধান করতে পারেন একটি ফাংশন তৈরি করে যেমন `handleFirstSquareClick` যা `handleClick(0)` কল করে, একটি ফাংশন যেমন `handleSecondSquareClick` যা `handleClick(1)` কল করে, এবং এভাবে। আপনি এই ফাংশনগুলিকে (কল করার পরিবর্তে) প্রপ হিসাবে নিচে পাঠাবেন যেমন `onSquareClick={handleFirstSquareClick}`। এটি অসীম লুপ সমাধান করবে।
 
-However, defining nine different functions and giving each of them a name is too verbose. Instead, let's do this:
+তবে নয়টি ভিন্ন ফাংশন সংজ্ঞায়িত করা এবং তাদের প্রতিটির একটি নাম দেওয়া খুব দীর্ঘ। বরং, চলুন এটি করি:
 
 ```js {6}
 export default function Board() {
@@ -1189,9 +1188,9 @@ export default function Board() {
 }
 ```
 
-Notice the new `() =>` syntax. Here, `() => handleClick(0)` is an *arrow function,* which is a shorter way to define functions. When the square is clicked, the code after the `=>` "arrow" will run, calling `handleClick(0)`.
+নতুন `() =>` সিনট্যাক্সটি লক্ষ্য করুন। এখানে, `() => handleClick(0)` একটি _অ্যারো ফাংশন,_ যা ফাংশন সংজ্ঞায়িত করার জন্য একটি ছোট উপায়। যখন স্কোয়ারটি ক্লিক করা হয়, `=>` "অ্যারো"-এর পরের কোডটি চলবে, যা `handleClick(0)` কল করবে।
 
-Now you need to update the other eight squares to call `handleClick` from the arrow functions you pass. Make sure that the argument for each call of the `handleClick` corresponds to the index of the correct square:
+এখন আপনাকে অন্যান্য আটটি স্কোয়ার আপডেট করতে হবে যাতে সেগুলো অ্যারো ফাংশনগুলির মাধ্যমে `handleClick` কল করে। প্রতিটি `handleClick` কলের জন্য আর্গুমেন্টটি সঠিক স্কোয়ারের ইনডেক্সের সাথে সঙ্গতিপূর্ণ তা নিশ্চিত করুন:
 
 ```js {6-8,11-13,16-18}
 export default function Board() {
@@ -1218,13 +1217,13 @@ export default function Board() {
 };
 ```
 
-Now you can again add X's to any square on the board by clicking on them:
+এখন আপনি আবার বোর্ডের যেকোনো স্কোয়ারে ক্লিক করে X যোগ করতে পারেন:
 
 ![filling the board with X](../images/tutorial/tictac-adding-x-s.gif)
 
-But this time all the state management is handled by the `Board` component!
+কিন্তু এই সময় সমস্ত স্টেট ম্যানেজমেন্ট `Board` কম্পোনেন্ট দ্বারা পরিচালিত হচ্ছে!
 
-This is what your code should look like:
+এখন আপনার কোডটি এভাবে দেখতে হবে:
 
 <Sandpack>
 
@@ -1317,27 +1316,27 @@ body {
 
 </Sandpack>
 
-Now that your state handling is in the `Board` component, the parent `Board` component passes props to the child `Square` components so that they can be displayed correctly. When clicking on a `Square`, the child `Square` component now asks the parent `Board` component to update the state of the board. When the `Board`'s state changes, both the `Board` component and every child `Square` re-renders automatically. Keeping the state of all squares in the `Board` component will allow it to determine the winner in the future.
+এখন যেহেতু আপনার স্টেট পরিচালনা `Board` কম্পোনেন্টে রয়েছে, অভিভাবক `Board` কম্পোনেন্টটি শিশু `Square` কম্পোনেন্টগুলিতে প্রপস প্রেরণ করে যাতে সেগুলি সঠিকভাবে প্রদর্শিত হতে পারে। যখন আপনি একটি `Square`-এ ক্লিক করেন, শিশু `Square` কম্পোনেন্টটি এখন অভিভাবক `Board` কম্পোনেন্টকে বোর্ডের স্টেট আপডেট করার জন্য অনুরোধ করে। যখন `Board`-এর স্টেট পরিবর্তন হয়, তখন `Board` কম্পোনেন্ট এবং এর সমস্ত শিশু স্বয়ংক্রিয়ভাবে পুনঃরূপরেখা তৈরি করে। সমস্ত স্কোয়ারের স্টেট `Board` কম্পোনেন্টে রাখতে সক্ষম হওয়া ভবিষ্যতে বিজয়ী নির্ধারণ করতে সহায়তা করবে।
 
-Let's recap what happens when a user clicks the top left square on your board to add an `X` to it:
+চলুন দেখে নিই যখন একজন ব্যবহারকারী আপনার বোর্ডের উপরের বাম স্কোয়ারে ক্লিক করে একটি `X` যুক্ত করতে চান, তখন কি ঘটে:
 
-1. Clicking on the upper left square runs the function that the `button` received as its `onClick` prop from the `Square`. The `Square` component received that function as its `onSquareClick` prop from the `Board`. The `Board` component defined that function directly in the JSX. It calls `handleClick` with an argument of `0`.
-1. `handleClick` uses the argument (`0`) to update the first element of the `squares` array from `null` to `X`.
-1. The `squares` state of the `Board` component was updated, so the `Board` and all of its children re-render. This causes the `value` prop of the `Square` component with index `0` to change from `null` to `X`.
+1. উপরের বাম স্কোয়ারে ক্লিক করার ফলে সেই ফাংশনটি চলে যা `Square` এর `onClick` প্রপস হিসাবে পেয়েছে। `Square` কম্পোনেন্টটি এই ফাংশনটি `Board` থেকে `onSquareClick` প্রপস হিসাবে পেয়েছে। `Board` কম্পোনেন্টটি সেই ফাংশনটি সরাসরি JSX-এ সংজ্ঞায়িত করেছে। এটি `handleClick` কে `0` আর্গুমেন্ট সহ কল করে।
+2. `handleClick` আর্গুমেন্ট (`0`) ব্যবহার করে `squares` অ্যারেতে প্রথম উপাদানটিকে `null` থেকে `X`-এ আপডেট করে।
+3. `Board` কম্পোনেন্টের `squares` স্টেট আপডেট হয়েছে, তাই `Board` এবং এর সমস্ত শিশু পুনঃরূপরেখা তৈরি করে। এর ফলে `0` ইনডেক্সের `Square` কম্পোনেন্টের `value` প্রপস `null` থেকে `X`-তে পরিবর্তিত হয়।
 
-In the end the user sees that the upper left square has changed from empty to having a `X` after clicking it.
+শেষে, ব্যবহারকারী দেখে যে উপরের বাম স্কোয়ারটি খালি থেকে `X`-তে পরিবর্তিত হয়েছে ক্লিক করার পর।
 
 <Note>
 
-The DOM `<button>` element's `onClick` attribute has a special meaning to React because it is a built-in component. For custom components like Square, the naming is up to you. You could give any name to the `Square`'s `onSquareClick` prop or `Board`'s `handleClick` function, and the code would work the same. In React, it's conventional to use `onSomething` names for props which represent events and `handleSomething` for the function definitions which handle those events.
+DOM `<button>` উপাদানের `onClick` অ্যাট্রিবিউটের একটি বিশেষ অর্থ রয়েছে React-এর জন্য কারণ এটি একটি বিল্ট-ইন কম্পোনেন্ট। `Square` এর মতো কাস্টম কম্পোনেন্টগুলির জন্য নামকরণ আপনার উপরে নির্ভর করে। আপনি `Square` এর `onSquareClick` প্রপস বা `Board` এর `handleClick` ফাংশনের জন্য যেকোন নাম দিতে পারেন, এবং কোডটি একইভাবে কাজ করবে। React-এ, ইভেন্টগুলিকে প্রতিনিধিত্বকারী প্রপসের জন্য `onSomething` নাম ব্যবহার করা এবং সেই ইভেন্টগুলিকে পরিচালনা করার জন্য ফাংশন সংজ্ঞাগুলির জন্য `handleSomething` ব্যবহার করা প্রথাগত।
 
 </Note>
 
-### Why immutability is important {/*why-immutability-is-important*/}
+### কেন ইমুইটাবিলিটি গুরুত্বপূর্ণ {/*why-immutability-is-important*/}
 
-Note how in `handleClick`, you call `.slice()` to create a copy of the `squares` array instead of modifying the existing array. To explain why, we need to discuss immutability and why immutability is important to learn.
+`handleClick`-এ লক্ষ্য করুন, আপনি বিদ্যমান অ্যারেটি পরিবর্তন করার পরিবর্তে `squares` অ্যারেটির একটি কপি তৈরি করতে `.slice()` কল করেন। কেন তার গুরুত্ব বোঝাতে আমাদের অমান্যযোগ্যতা এবং এর শিখন প্রয়োজন সম্পর্কে আলোচনা করতে হবে।
 
-There are generally two approaches to changing data. The first approach is to _mutate_ the data by directly changing the data's values. The second approach is to replace the data with a new copy which has the desired changes. Here is what it would look like if you mutated the `squares` array:
+ডেটা পরিবর্তনের জন্য সাধারণত দুটি পন্থা রয়েছে। প্রথম পন্থাটি হল ডেটাকে সরাসরি পরিবর্তন করে ডেটার মান পরিবর্তন করা। দ্বিতীয় পন্থাটি হল নতুন কপিটি তৈরি করা যা প্রয়োজনীয় পরিবর্তনগুলি অন্তর্ভুক্ত করে। এখানে কীভাবে আপনি `squares` অ্যারেটিকে পরিবর্তন করবেন তা হবে:
 
 ```jsx
 const squares = [null, null, null, null, null, null, null, null, null];
@@ -1345,7 +1344,7 @@ squares[0] = 'X';
 // Now `squares` is ["X", null, null, null, null, null, null, null, null];
 ```
 
-And here is what it would look like if you changed data without mutating the `squares` array:
+এবং যদি আপনি `squares` অ্যারের ডেটা পরিবর্তন করেন কিন্তু মিউটেট না করেন তবে এটি কেমন দেখাবে:
 
 ```jsx
 const squares = [null, null, null, null, null, null, null, null, null];
@@ -1353,17 +1352,17 @@ const nextSquares = ['X', null, null, null, null, null, null, null, null];
 // Now `squares` is unchanged, but `nextSquares` first element is 'X' rather than `null`
 ```
 
-The result is the same but by not mutating (changing the underlying data) directly, you gain several benefits.
+ফলাফল একই, কিন্তু সরাসরি (মৌলিক ডেটা পরিবর্তন না করে) মিউটেট না করে আপনি বেশ কিছু সুবিধা পান।
 
-Immutability makes complex features much easier to implement. Later in this tutorial, you will implement a "time travel" feature that lets you review the game's history and "jump back" to past moves. This functionality isn't specific to games--an ability to undo and redo certain actions is a common requirement for apps. Avoiding direct data mutation lets you keep previous versions of the data intact, and reuse them later.
+ইমিউটিবিলিটি জটিল বৈশিষ্ট্যগুলি বাস্তবায়ন করা অনেক সহজ করে তোলে। এই টিউটোরিয়ালের পরে, আপনি একটি “টাইম ট্রাভেল” বৈশিষ্ট্য বাস্তবায়ন করবেন যা আপনাকে গেমের ইতিহাস পর্যালোচনা করতে এবং “ফিরে আসতে” দেয়। এই কার্যকারিতা গেমগুলির জন্য বিশেষ নয়—কিছু ক্রিয়াকলাপ রিভার্স এবং রিডো করার ক্ষমতা অ্যাপগুলির জন্য একটি সাধারণ প্রয়োজন। সরাসরি ডেটা মিউটেশন এড়িয়ে চলা আপনাকে পূর্ববর্তী সংস্করণগুলি অক্ষুণ্ণ রাখতে এবং পরে পুনরায় ব্যবহার করতে দেয়।
 
-There is also another benefit of immutability. By default, all child components re-render automatically when the state of a parent component changes. This includes even the child components that weren't affected by the change. Although re-rendering is not by itself noticeable to the user (you shouldn't actively try to avoid it!), you might want to skip re-rendering a part of the tree that clearly wasn't affected by it for performance reasons. Immutability makes it very cheap for components to compare whether their data has changed or not. You can learn more about how React chooses when to re-render a component in [the `memo` API reference](/reference/react/memo).
+ইমিউটিবিলিটির আরেকটি সুবিধাও রয়েছে। ডিফল্টভাবে, সমস্ত শিশু উপাদানগুলি স্বয়ংক্রিয়ভাবে পুনঃরেন্ডার হয় যখন একটি অভিভাবক উপাদানের অবস্থা পরিবর্তিত হয়। এতে এমন শিশু উপাদানগুলিও অন্তর্ভুক্ত রয়েছে যেগুলি পরিবর্তনের দ্বারা প্রভাবিত হয়নি। যদিও পুনঃরেন্ডারিং নিজেই ব্যবহারকারীর কাছে লক্ষ্যযোগ্য নয় (আপনাকে এটি এড়ানোর জন্য সক্রিয়ভাবে চেষ্টা করা উচিত নয়!), তবে আপনি পারফরম্যান্সের কারণে পরিষ্কারভাবে প্রভাবিত না হওয়া একটি গাছের অংশ পুনঃরেন্ডারিং এড়াতে চাইতে পারেন। ইমিউটিবিলিটি উপাদানগুলিকে তুলনা করা খুব সস্তা করে যে তাদের ডেটা পরিবর্তিত হয়েছে কি না। আপনি [`memo` API রেফারেন্সে](/reference/react/memo) জানতে পারেন কিভাবে React নির্ধারণ করে কখন একটি উপাদান পুনঃরেন্ডার করা হবে।
 
-### Taking turns {/*taking-turns*/}
+### পালা বদলানো {/*taking-turns*/}
 
-It's now time to fix a major defect in this tic-tac-toe game: the "O"s cannot be marked on the board.
+এখন টিক-ট্যাক-টো গেমের একটি বড় ত্রুটি সংশোধন করার সময় হয়েছে: বোর্ডে "O" চিহ্ন দেওয়া যাচ্ছে না।
 
-You'll set the first move to be "X" by default. Let's keep track of this by adding another piece of state to the Board component:
+প্রথম মুভটিকে ডিফল্ট হিসেবে "X" নির্ধারণ করুন। এটি ট্র্যাক করতে `Board` কম্পোনেন্টে আরেকটি স্টেট যোগ করুন।
 
 ```js {2}
 function Board() {
@@ -1374,7 +1373,7 @@ function Board() {
 }
 ```
 
-Each time a player moves, `xIsNext` (a boolean) will be flipped to determine which player goes next and the game's state will be saved. You'll update the `Board`'s `handleClick` function to flip the value of `xIsNext`:
+প্রতি বার যখন একজন প্লেয়ার moves করে, `xIsNext` (একটি বুলিয়ান) পাল্টে যাবে যাতে নির্ধারণ করা যায় পরবর্তী প্লেয়ার কে এবং গেমের অবস্থা সংরক্ষিত হবে। আপনি `Board` এর `handleClick` ফাংশনটি আপডেট করবেন `xIsNext` এর মান পাল্টানোর জন্য:
 
 ```js {7,8,9,10,11,13}
 export default function Board() {
@@ -1398,15 +1397,15 @@ export default function Board() {
 }
 ```
 
-Now, as you click on different squares, they will alternate between `X` and `O`, as they should!
+এখন, যখন আপনি বিভিন্ন স্কোয়ারে ক্লিক করেন, তারা `X` এবং `O` এর মধ্যে পাল্টাতে থাকবে, যেমনটি হওয়া উচিত!
 
-But wait, there's a problem. Try clicking on the same square multiple times:
+কিন্তু অপেক্ষা করুন, একটি সমস্যা রয়েছে। একই স্কোয়ারে একাধিকবার ক্লিক করার চেষ্টা করুন:
 
 ![O overwriting an X](../images/tutorial/o-replaces-x.gif)
 
-The `X` is overwritten by an `O`! While this would add a very interesting twist to the game, we're going to stick to the original rules for now.
+`X` একটি `O` দ্বারা ওভাররাইট হচ্ছে! যদিও এটি গেমটিতে একটি খুব মজার মোড় যুক্ত করবে, আমরা আপাতত মূল নিয়মগুলি মেনে চলব।
 
-When you mark a square with a `X` or an `O` you aren't first checking to see if the square already has a `X` or `O` value. You can fix this by *returning early*. You'll check to see if the square already has a `X` or an `O`. If the square is already filled, you will `return` in the `handleClick` function early--before it tries to update the board state.
+যখন আপনি একটি স্কোয়ারকে `X` বা `O` দিয়ে চিহ্নিত করেন, আপনি প্রথমে পরীক্ষা করছেন না যে স্কোয়ারটিতে ইতিমধ্যে একটি `X` বা `O` মান রয়েছে কি না। আপনি এটি _আগে ফিরে আসা_ দ্বারা ঠিক করতে পারেন। আপনি পরীক্ষা করবেন যে স্কোয়ারটিতে ইতিমধ্যে একটি `X` বা `O` আছে কি না। যদি স্কোয়ারটি ইতিমধ্যে পূর্ণ হয়, তাহলে আপনি `handleClick` ফাংশনে আগে ফিরে আসবেন—এর আগে যে এটি বোর্ডের অবস্থা আপডেট করার চেষ্টা করে।
 
 ```js {2,3,4}
 function handleClick(i) {
@@ -1418,7 +1417,7 @@ function handleClick(i) {
 }
 ```
 
-Now you can only add `X`'s or `O`'s to empty squares! Here is what your code should look like at this point:
+এখন আপনি কেবল খালি স্কোয়ারে `X` অথবা `O` যুক্ত করতে পারেন! এখানে এই পর্যায়ে আপনার কোড কেমন হওয়া উচিত:
 
 <Sandpack>
 
@@ -1520,9 +1519,9 @@ body {
 
 </Sandpack>
 
-### Declaring a winner {/*declaring-a-winner*/}
+### বিজয়ী ঘোষণা করা {/*declaring-a-winner*/}
 
-Now that the players can take turns, you'll want to show when the game is won and there are no more turns to make. To do this you'll add a helper function called `calculateWinner` that takes an array of 9 squares, checks for a winner and returns `'X'`, `'O'`, or `null` as appropriate. Don't worry too much about the `calculateWinner` function; it's not specific to React:
+এখন যেহেতু খেলোয়াড়রা পালা নিতে পারে, আপনি দেখতে চাইবেন কখন গেমটি জিতেছে এবং আর কোনো পালা নেওয়ার নেই। এটি করার জন্য, আপনি একটি সহায়ক ফাংশন যোগ করবেন যাকে `calculateWinner` বলা হয়, যা ৯টি স্কোয়ার সম্বলিত একটি অ্যারে গ্রহণ করে, বিজয়ী পরীক্ষা করে এবং যথাযথভাবে `'X'`, `'O'`, বা `null` রিটার্ন করে। `calculateWinner` ফাংশন নিয়ে খুব বেশি চিন্তা করবেন না; এটি React এর জন্য বিশেষ নয়:
 
 ```js src/App.js
 export default function Board() {
@@ -1552,11 +1551,11 @@ function calculateWinner(squares) {
 
 <Note>
 
-It does not matter whether you define `calculateWinner` before or after the `Board`. Let's put it at the end so that you don't have to scroll past it every time you edit your components.
+আপনি `calculateWinner` ফাংশনটি `Board` এর আগে বা পরে সংজ্ঞায়িত করেছেন কিনা তা কোনো বিষয় নয়। আসুন এটি শেষে রাখি যাতে আপনাকে প্রতিবার আপনার উপাদানগুলি সম্পাদনা করার সময় এর মধ্য দিয়ে স্ক্রোল করতে না হয়।
 
 </Note>
 
-You will call `calculateWinner(squares)` in the `Board` component's `handleClick` function to check if a player has won. You can perform this check at the same time you check if a user has clicked a square that already has a `X` or and `O`. We'd like to return early in both cases:
+আপনি `Board` উপাদানের `handleClick` ফাংশনে `calculateWinner(squares)` কল করবেন যাতে পরীক্ষা করতে পারেন যে একজন খেলোয়াড় জিতেছে কি না। আপনি যখন পরীক্ষা করছেন যে একটি ব্যবহারকারী ইতিমধ্যে একটি `X` বা `O` রয়েছে এমন স্কোয়ার ক্লিক করেছে তখন একই সময়ে এই পরীক্ষা করতে পারেন। উভয় ক্ষেত্রেই আমরা আগে ফিরে আসতে চাই:
 
 ```js {2}
 function handleClick(i) {
@@ -1568,7 +1567,7 @@ function handleClick(i) {
 }
 ```
 
-To let the players know when the game is over, you can display text such as "Winner: X" or "Winner: O". To do that you'll add a `status` section to the `Board` component. The status will display the winner if the game is over and if the game is ongoing you'll display which player's turn is next:
+খেলোয়াড়দের গেমটি শেষ হলে জানাতে, আপনি “Winner: X” অথবা “Winner: O” মত লেখা প্রদর্শন করতে পারেন। এটি করার জন্য, আপনি `Board` উপাদানে একটি `status` সেকশন যোগ করবেন। গেমটি শেষ হলে স্ট্যাটাস বিজয়ী প্রদর্শন করবে এবং গেম চলমান থাকলে আপনি পরবর্তী কোন খেলোয়াড়ের পালা তা প্রদর্শন করবেন:
 
 ```js {3-9,13}
 export default function Board() {
@@ -1590,7 +1589,7 @@ export default function Board() {
 }
 ```
 
-Congratulations! You now have a working tic-tac-toe game. And you've just learned the basics of React too. So _you_ are the real winner here. Here is what the code should look like:
+অভিনন্দন! এখন আপনার কাছে একটি কার্যকর টিক-ট্যাক-টো গেম রয়েছে। এবং আপনি React এর মৌলিক বিষয়গুলি শিখেছেন। সুতরাং _আপিনিই_ এখানে সত্যিকারের বিজয়ী। এখানে কোড কেমন হওয়া উচিত:
 
 <Sandpack>
 
@@ -1721,17 +1720,17 @@ body {
 
 </Sandpack>
 
-## Adding time travel {/*adding-time-travel*/}
+## সময়ে ফিরে যাওয়া যোগ করা {/*adding-time-travel*/}
 
-As a final exercise, let's make it possible to "go back in time" to the previous moves in the game.
+শেষ একটি অনুশীলন হিসাবে, আসুন এটি সম্ভব করি যাতে গেমে পূর্ববর্তী পদক্ষেপগুলিতে "যেতে" পারি।
 
-### Storing a history of moves {/*storing-a-history-of-moves*/}
+### চালগুলির ইতিহাস সংরক্ষণ {/*storing-a-history-of-moves*/}
 
-If you mutated the `squares` array, implementing time travel would be very difficult.
+যদি আপনি `squares` অ্যারেটি মিউটেট করেন, তবে সময়ে ফিরে যাওয়া বাস্তবায়ন করা খুব কঠিন হবে।
 
-However, you used `slice()` to create a new copy of the `squares` array after every move, and treated it as immutable. This will allow you to store every past version of the `squares` array, and navigate between the turns that have already happened.
+তবে, আপনি প্রতি পদক্ষেপের পরে `squares` অ্যারেটির একটি নতুন কপি তৈরি করতে `slice()` ব্যবহার করেছেন এবং এটিকে অImmutable হিসাবে বিবেচনা করেছেন। এটি আপনাকে `squares` অ্যারেটির প্রতিটি অতীত সংস্করণ সংরক্ষণ করতে দেবে এবং ইতিমধ্যে ঘটে যাওয়া পালাগুলির মধ্যে নেভিগেট করতে সহায়তা করবে।
 
-You'll store the past `squares` arrays in another array called `history`, which you'll store as a new state variable. The `history` array represents all board states, from the first to the last move, and has a shape like this:
+আপনি অতীতের `squares` অ্যারেগুলিকে `history` নামক একটি অন্য অ্যারেতে সংরক্ষণ করবেন, যা একটি নতুন স্টেট ভেরিয়েবল হিসাবে সংরক্ষণ করবেন। `history` অ্যারে সমস্ত বোর্ডের অবস্থাগুলি উপস্থাপন করে, প্রথম থেকে শেষ পদক্ষেপ পর্যন্ত, এবং এর আকৃতি এই রকম:
 
 ```jsx
 [
@@ -1745,13 +1744,13 @@ You'll store the past `squares` arrays in another array called `history`, which
 ]
 ```
 
-### Lifting state up, again {/*lifting-state-up-again*/}
+### স্টেট উপরে উঠানো, আবার {/*lifting-state-up-again*/}
 
-You will now write a new top-level component called `Game` to display a list of past moves. That's where you will place the `history` state that contains the entire game history.
+আপনি এখন একটি নতুন শীর্ষ স্তরের উপাদান `Game` লিখবেন যা অতীতের পদক্ষেপগুলির একটি তালিকা প্রদর্শন করবে। সেখানেই আপনি পুরো গেমের ইতিহাস ধারণকারী `history` স্টেটটি স্থাপন করবেন।
 
-Placing the `history` state into the `Game` component will let you remove the `squares` state from its child `Board` component. Just like you "lifted state up" from the `Square` component into the `Board` component, you will now lift it up from the `Board` into the top-level `Game` component. This gives the `Game` component full control over the `Board`'s data and lets it instruct the `Board` to render previous turns from the `history`.
+`Game` উপাদানে `history` স্টেটটি স্থাপন করা আপনাকে এর সন্তান `Board` উপাদান থেকে `squares` স্টেটটি অপসারণ করতে দেবে। যেমন আপনি `Square` উপাদান থেকে `Board` উপাদানে “স্টেটটি উপরে তুলেছিলেন”, ঠিক তেমনই আপনি এখন এটি `Board` থেকে শীর্ষ স্তরের `Game` উপাদানে তুলবেন। এটি `Game` উপাদানটিকে `Board`’এর ডেটার সম্পূর্ণ নিয়ন্ত্রণ দেয় এবং এটি `Board` কে ইতিহাস থেকে পূর্ববর্তী পালাগুলি রেন্ডার করতে নির্দেশ দিতে সক্ষম করে।
 
-First, add a `Game` component with `export default`. Have it render the `Board` component and some markup:
+প্রথমে, `export default` সহ একটি `Game` উপাদান যুক্ত করুন। এটি `Board` উপাদানটি এবং কিছু মার্কআপ রেন্ডার করবে:
 
 ```js {1,5-16}
 function Board() {
@@ -1772,9 +1771,9 @@ export default function Game() {
 }
 ```
 
-Note that you are removing the `export default` keywords before the `function Board() {` declaration and adding them before the `function Game() {` declaration. This tells your `index.js` file to use the `Game` component as the top-level component instead of your `Board` component. The additional `div`s returned by the `Game` component are making room for the game information you'll add to the board later.
+নোট করুন যে আপনি `function Board() {` ঘোষণার আগে `export default` কিওয়ার্ডগুলি অপসারণ করছেন এবং `function Game() {` ঘোষণার আগে সেগুলি যোগ করছেন। এটি আপনার `index.js` ফাইলকে জানায় যে `Game` উপাদানটিকে শীর্ষ স্তরের উপাদান হিসেবে ব্যবহার করতে হবে, আপনার `Board` উপাদানের পরিবর্তে। `Game` উপাদান দ্বারা ফেরত দেওয়া অতিরিক্ত `div` গুলি পরে বোর্ডে আপনি যে গেমের তথ্যগুলি যোগ করবেন তার জন্য স্থান তৈরি করছে।
 
-Add some state to the `Game` component to track which player is next and the history of moves:
+আপনার পরবর্তী খেলোয়াড় এবং পদক্ষেপগুলির ইতিহাস ট্র্যাক করার জন্য `Game` উপাদানে কিছু স্টেট যোগ করুন:
 
 ```js {2-3}
 export default function Game() {
@@ -1783,9 +1782,9 @@ export default function Game() {
   // ...
 ```
 
-Notice how `[Array(9).fill(null)]` is an array with a single item, which itself is an array of 9 `null`s.
+নোটিস করুন যে `[Array(9).fill(null)]` হল একটি অ্যারে যা একটি একক আইটেম নিয়ে গঠিত, যা নিজেই 9টি `null` দিয়ে গঠিত একটি অ্যারে।
 
-To render the squares for the current move, you'll want to read the last squares array from the `history`. You don't need `useState` for this--you already have enough information to calculate it during rendering:
+বর্তমান মুভের জন্য স্কয়ারগুলি রেন্ডার করতে, আপনাকে `history` থেকে শেষ স্কয়ারস অ্যারেটি পড়তে হবে। আপনার জন্য `useState` প্রয়োজন নেই—আপনার কাছে এটি রেন্ডার করার সময় হিসাব করার জন্য যথেষ্ট তথ্য রয়েছে।
 
 ```js {4}
 export default function Game() {
@@ -1795,7 +1794,7 @@ export default function Game() {
   // ...
 ```
 
-Next, create a `handlePlay` function inside the `Game` component that will be called by the `Board` component to update the game. Pass `xIsNext`, `currentSquares` and `handlePlay` as props to the `Board` component:
+এখন, `Game` কম্পোনেন্টের ভিতরে একটি `handlePlay` ফাংশন তৈরি করুন যা `Board` কম্পোনেন্ট দ্বারা খেলার আপডেট করার জন্য কল করা হবে। `xIsNext`, `currentSquares` এবং `handlePlay` কে `Board` কম্পোনেন্টে প্রপস হিসাবে পাঠান:
 
 ```js {6-8,13}
 export default function Game() {
@@ -1816,7 +1815,7 @@ export default function Game() {
 }
 ```
 
-Let's make the `Board` component fully controlled by the props it receives. Change the `Board` component to take three props: `xIsNext`, `squares`, and a new `onPlay` function that `Board` can call with the updated squares array when a player makes a move. Next, remove the first two lines of the `Board` function that call `useState`:
+আমরা `Board` কম্পোনেন্টটিকে সম্পূর্ণরূপে সেই প্রপস দ্বারা নিয়ন্ত্রিত করি যা এটি গ্রহণ করে। `Board` কম্পোনেন্টটিকে তিনটি প্রপস নিতে পরিবর্তন করুন: `xIsNext`, `squares`, এবং একটি নতুন `onPlay` ফাংশন যা `Board` একটি প্লেয়ার যখন একটি মুভ করে, তখন আপডেট করা স্কয়ারস অ্যারে নিয়ে কল করতে পারে। এরপর, `Board` ফাংশনের প্রথম দুই লাইন মুছে ফেলুন যা `useState` কল করে:
 
 ```js {1}
 function Board({ xIsNext, squares, onPlay }) {
@@ -1827,7 +1826,7 @@ function Board({ xIsNext, squares, onPlay }) {
 }
 ```
 
-Now replace the `setSquares` and `setXIsNext` calls in `handleClick` in the `Board` component with a single call to your new `onPlay` function so the `Game` component can update the `Board` when the user clicks a square:
+এখন `Board` কম্পোনেন্টের `handleClick`-এ `setSquares` এবং `setXIsNext` কলগুলিকে আপনার নতুন `onPlay` ফাংশনের একটি একক কলের সাথে প্রতিস্থাপন করুন, যাতে `Game` কম্পোনেন্ট ব্যবহারকারী যখন একটি স্কয়ার ক্লিক করে তখন `Board` আপডেট করতে পারে:
 
 ```js {12}
 function Board({ xIsNext, squares, onPlay }) {
@@ -1847,11 +1846,11 @@ function Board({ xIsNext, squares, onPlay }) {
 }
 ```
 
-The `Board` component is fully controlled by the props passed to it by the `Game` component. You need to implement the `handlePlay` function in the `Game` component to get the game working again.
+`Board` কম্পোনেন্ট সম্পূর্ণরূপে `Game` কম্পোনেন্ট দ্বারা দেওয়া প্রপস দ্বারা নিয়ন্ত্রিত। আপনাকে আবার খেলা কাজ করতে `Game` কম্পোনেন্টে `handlePlay` ফাংশনটি বাস্তবায়ন করতে হবে।
 
-What should `handlePlay` do when called? Remember that Board used to call `setSquares` with an updated array; now it passes the updated `squares` array to `onPlay`.
+`handlePlay` কল করা হলে কী করা উচিত? মনে রাখবেন যে `Board` সাধারণত একটি আপডেট করা অ্যারির সাথে `setSquares` কল করত; এখন এটি আপডেট করা `squares` অ্যারিটি `onPlay` এর মাধ্যমে পাস করছে।
 
-The `handlePlay` function needs to update `Game`'s state to trigger a re-render, but you don't have a `setSquares` function that you can call any more--you're now using the `history` state variable to store this information. You'll want to update `history` by appending the updated `squares` array as a new history entry. You also want to toggle `xIsNext`, just as Board used to do:
+`handlePlay` ফাংশনটি `Game` এর স্টেট আপডেট করতে হবে যাতে একটি পুনরায় রেন্ডার ট্রিগার হয়, কিন্তু আপনার আর একটি `setSquares` ফাংশন নেই যা আপনি কল করতে পারেন—এখন আপনি এই তথ্য সংরক্ষণ করতে `history` স্টেট ভ্যারিয়েবল ব্যবহার করছেন। আপনাকে `history` আপডেট করতে হবে নতুন একটি ইতিহাস এন্ট্রি হিসাবে আপডেট করা `squares` অ্যারিটি সংযুক্ত করে। আপনাকে `xIsNext`-কে টগলও করতে হবে, যেমনটি `Board` আগে করত:
 
 ```js {4-5}
 export default function Game() {
@@ -1864,11 +1863,11 @@ export default function Game() {
 }
 ```
 
-Here, `[...history, nextSquares]` creates a new array that contains all the items in `history`, followed by `nextSquares`. (You can read the `...history` [*spread syntax*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) as "enumerate all the items in `history`".)
+এখানে, `[...history, nextSquares]` একটি নতুন অ্যারে তৈরি করে যা `history`-এর সমস্ত আইটেমকে অন্তর্ভুক্ত করে, তার পর `nextSquares`। (`...history` [*স্প্রেড সিনট্যাক্স*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) কে আপনি “`history`-এর সমস্ত আইটেম তালিকাভুক্ত করুন” হিসাবে পড়তে পারেন।)
 
-For example, if `history` is `[[null,null,null], ["X",null,null]]` and `nextSquares` is `["X",null,"O"]`, then the new `[...history, nextSquares]` array will be `[[null,null,null], ["X",null,null], ["X",null,"O"]]`.
+যদি উদাহরণস্বরূপ, `history` হয় `[[null,null,null], ["X",null,null]]` এবং `nextSquares` হয় `["X",null,"O"]`, তবে নতুন `[...history, nextSquares]` অ্যারিটি হবে `[[null,null,null], ["X",null,null], ["X",null,"O"]]`।
 
-At this point, you've moved the state to live in the `Game` component, and the UI should be fully working, just as it was before the refactor. Here is what the code should look like at this point:
+এই পর্যায়ে, আপনি স্টেটকে `Game` কম্পোনেন্টে স্থানান্তরিত করেছেন, এবং UI সম্পূর্ণরূপে কাজ করছে, যেমন এটি পুনর্গঠন করার আগে ছিল। এখন কোডটি এরকম হওয়া উচিত:
 
 <Sandpack>
 
@@ -2017,19 +2016,19 @@ body {
 
 </Sandpack>
 
-### Showing the past moves {/*showing-the-past-moves*/}
+### পূর্ববর্তী মুভগুলো প্রদর্শন করা {/*showing-the-past-moves*/}
 
-Since you are recording the tic-tac-toe game's history, you can now display a list of past moves to the player.
+যেহেতু আপনি টিক-ট্যাক-টো খেলার ইতিহাস রেকর্ড করছেন, আপনি এখন খেলোয়াড়ের জন্য পূর্ববর্তী মুভগুলির একটি তালিকা প্রদর্শন করতে পারেন।
 
-React elements like `<button>` are regular JavaScript objects; you can pass them around in your application. To render multiple items in React, you can use an array of React elements.
+React উপাদানগুলি যেমন `<button>` সাধারণ জাভাস্ক্রিপ্ট অবজেক্ট; আপনি এগুলো আপনার অ্যাপে একত্রিত করতে পারেন। React-এ একাধিক আইটেম রেন্ডার করতে, আপনি React উপাদানের একটি অ্যারে ব্যবহার করতে পারেন।
 
-You already have an array of `history` moves in state, so now you need to transform it to an array of React elements. In JavaScript, to transform one array into another, you can use the [array `map` method:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
+আপনার কাছে ইতিমধ্যে `history` মুভগুলির একটি অ্যারে রয়েছে, তাই এখন আপনাকে এটিকে React উপাদানের একটি অ্যারেতে রূপান্তর করতে হবে। জাভাস্ক্রিপ্টে, একটি অ্যারেকে অন্য একটি অ্যারেতে রূপান্তর করতে, আপনি [array `map` method:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) মেথড ব্যবহার করতে পারেন:
 
 ```jsx
 [1, 2, 3].map((x) => x * 2) // [2, 4, 6]
 ```
 
-You'll use `map` to transform your `history` of moves into React elements representing buttons on the screen, and display a list of buttons to "jump" to past moves. Let's `map` over the `history` in the Game component:
+আপনি `map` ব্যবহার করবেন আপনার মুভগুলোর `history`-কে React উপাদানে রূপান্তর করতে, যা স্ক্রিনে বোতামগুলি উপস্থাপন করে এবং পূর্ববর্তী মুভগুলিতে “জাম্প” করার জন্য বোতামের একটি তালিকা প্রদর্শন করে। আসুন `Game` কম্পোনেন্টে `history`-এর উপর `map` করি:
 
 ```js {11-13,15-27,35}
 export default function Game() {
@@ -2073,13 +2072,13 @@ export default function Game() {
 }
 ```
 
-You can see what your code should look like below. Note that you should see an error in the developer tools console that says: 
+আপনার কোডটি নিচে কেমন হবে তা দেখতে পারেন। লক্ষ্য করুন যে আপনাকে ডেভেলপার টুলস কনসোলে একটি ত্রুটি দেখতে হবে যা বলছে:
 
 <ConsoleBlock level="warning">
 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of &#96;Game&#96;.
 </ConsoleBlock>
   
-You'll fix this error in the next section.
+আপনি পরবর্তী বিভাগে এই ত্রুটিটি সমাধান করবেন।
 
 <Sandpack>
 
@@ -2247,24 +2246,24 @@ body {
 
 </Sandpack>
 
-As you iterate through `history` array inside the function you passed to `map`, the `squares` argument goes through each element of `history`, and the `move` argument goes through each array index: `0`, `1`, `2`, …. (In most cases, you'd need the actual array elements, but to render a list of moves you will only need indexes.)
+যখন আপনি `map`-এ পাঠানো ফাংশনের ভিতরে `history` অ্যারের মধ্য দিয়ে পুনরাবৃত্তি করেন, তখন `squares` আর্গুমেন্টটি `history` এর প্রতিটি উপাদান দিয়ে যায়, এবং `move` আর্গুমেন্টটি প্রতিটি ইনডেক্স দিয়ে যায়: `0`, `1`, `2`, …। (বেশিরভাগ ক্ষেত্রে, প্রকৃত অ্যারের উপাদানগুলি প্রয়োজন হয়, তবে মুভের একটি তালিকা রেন্ডার করতে শুধুমাত্র ইনডেক্স প্রয়োজন।)
 
-For each move in the tic-tac-toe game's history, you create a list item `<li>` which contains a button `<button>`. The button has an `onClick` handler which calls a function called `jumpTo` (that you haven't implemented yet).
+টিক-ট্যাক-টো গেমের `history` এর প্রতিটি মুভের জন্য, আপনি একটি তালিকা আইটেম `<li>` তৈরি করছেন যা একটি বোতাম `<button>` ধারণ করে। এই বোতামের একটি `onClick` হ্যান্ডলার রয়েছে, যা `jumpTo` নামের একটি ফাংশনকে কল করে (যা আপনি এখনো তৈরি করেননি)।
 
-For now, you should see a list of the moves that occurred in the game and an error in the developer tools console. Let's discuss what the "key" error means.
+এখন আপনি গেমে হওয়া মুভগুলোর একটি তালিকা দেখতে পাবেন এবং ডেভেলপার টুলের কনসোলে একটি ত্রুটি (error) দেখতে পাবেন। আসুন আলোচনা করি "key" ত্রুটির অর্থ কী।
 
-### Picking a key {/*picking-a-key*/}
+### কী নির্বাচন {/*picking-a-key*/}
 
-When you render a list, React stores some information about each rendered list item. When you update a list, React needs to determine what has changed. You could have added, removed, re-arranged, or updated the list's items.
+যখন আপনি একটি তালিকা রেন্ডার করেন, React প্রতিটি রেন্ডার করা তালিকা আইটেম সম্পর্কে কিছু তথ্য সংরক্ষণ করে। যখন আপনি একটি তালিকা আপডেট করেন, React-কে জানতে হবে কী পরিবর্তিত হয়েছে। আপনি তালিকার আইটেমগুলি যোগ করেছেন, মুছেছেন, পুনর্বিন্যস্ত করেছেন বা আপডেট করেছেন।
 
-Imagine transitioning from
+এখন থেকে ট্রানজিশন কল্পনা করুন:
 
 ```html
 <li>Alexa: 7 tasks left</li>
 <li>Ben: 5 tasks left</li>
 ```
 
-to
+থেকে
 
 ```html
 <li>Ben: 9 tasks left</li>
@@ -2272,7 +2271,7 @@ to
 <li>Alexa: 5 tasks left</li>
 ```
 
-In addition to the updated counts, a human reading this would probably say that you swapped Alexa and Ben's ordering and inserted Claudia between Alexa and Ben. However, React is a computer program and does not know what you intended, so you need to specify a _key_ property for each list item to differentiate each list item from its siblings. If your data was from a database, Alexa, Ben, and Claudia's database IDs could be used as keys.
+আপডেট হওয়া গণনার পাশাপাশি, একজন মানুষ এটি পড়ে সম্ভবত বলবে যে আপনি Alexa এবং Ben-এর ক্রম পরিবর্তন করেছেন এবং তাদের মধ্যে Claudia-কে যোগ করেছেন। তবে, React একটি কম্পিউটার প্রোগ্রাম এবং আপনার উদ্দেশ্য বোঝে না, তাই প্রতিটি তালিকা আইটেমকে তার অন্যান্য আইটেমের থেকে আলাদা করতে আপনাকে একটি _key_ প্রপার্টি নির্দিষ্ট করতে হবে। যদি আপনার ডেটা একটি ডেটাবেস থেকে আসত, তবে Alexa, Ben, এবং Claudia-র ডেটাবেস ID গুলো কী হিসেবে ব্যবহার করা যেত।
 
 ```js {1}
 <li key={user.id}>
@@ -2280,23 +2279,23 @@ In addition to the updated counts, a human reading this would probably say that
 </li>
 ```
 
-When a list is re-rendered, React takes each list item's key and searches the previous list's items for a matching key. If the current list has a key that didn't exist before, React creates a component. If the current list is missing a key that existed in the previous list, React destroys the previous component. If two keys match, the corresponding component is moved.
+যখন কোনো তালিকা পুনরায় রেন্ডার করা হয়, React প্রতিটি তালিকা আইটেমের `key` নিয়ে আগের তালিকার আইটেমগুলোর মধ্যে মিল খোঁজে। যদি বর্তমান তালিকায় এমন কোনো `key` থাকে যা আগে ছিল না, তাহলে React একটি নতুন কম্পোনেন্ট তৈরি করে। আর যদি আগের তালিকায় থাকা কোনো `key` বর্তমান তালিকায় না থাকে, তাহলে React সেই কম্পোনেন্টটি মুছে দেয়। যদি দুটি `key` মিলে যায়, তবে সংশ্লিষ্ট কম্পোনেন্টটিকে সরানো হয়।
 
-Keys tell React about the identity of each component, which allows React to maintain state between re-renders. If a component's key changes, the component will be destroyed and re-created with a new state.
+`key` React-কে প্রতিটি কম্পোনেন্টের পরিচয় সম্পর্কে জানায়, যা React-কে পুনরায় রেন্ডার করার সময় স্টেট বজায় রাখতে সাহায্য করে। যদি কোনো কম্পোনেন্টের `key` পরিবর্তিত হয়, তাহলে কম্পোনেন্টটি ধ্বংস করা হয় এবং নতুন স্টেট নিয়ে পুনরায় তৈরি হয়।
 
-`key` is a special and reserved property in React. When an element is created, React extracts the `key` property and stores the key directly on the returned element. Even though `key` may look like it is passed as props, React automatically uses `key` to decide which components to update. There's no way for a component to ask what `key` its parent specified.
+`key` একটি বিশেষ ও সংরক্ষিত প্রপার্টি React-এ। যখন কোনো এলিমেন্ট তৈরি হয়, React `key` প্রপার্টিটি নিয়ে সরাসরি সেই এলিমেন্টে সংরক্ষণ করে। যদিও `key` প্রপস হিসেবে মনে হতে পারে, React স্বয়ংক্রিয়ভাবে `key` ব্যবহার করে নির্ধারণ করে কোন কম্পোনেন্টগুলো আপডেট হবে। কোনো কম্পোনেন্ট তার প্যারেন্ট কী `key` নির্দিষ্ট করেছে তা জানতে পারে না।
 
-**It's strongly recommended that you assign proper keys whenever you build dynamic lists.** If you don't have an appropriate key, you may want to consider restructuring your data so that you do.
+**যখন আপনি ডায়নামিক তালিকা তৈরি করেন, তখন সঠিক `key` নির্ধারণ করা রেকমেন্ডেট।** যদি আপনার কাছে উপযুক্ত `key` না থাকে, তাহলে আপনি আপনার ডেটা পুনর্গঠন করার কথা বিবেচনা করতে পারেন যাতে আপনি তা পেতে পারেন।
 
-If no key is specified, React will report an error and use the array index as a key by default. Using the array index as a key is problematic when trying to re-order a list's items or inserting/removing list items. Explicitly passing `key={i}` silences the error but has the same problems as array indices and is not recommended in most cases.
+যদি কোনো `key` নির্দিষ্ট না করা হয়, React একটি ত্রুটি রিপোর্ট করবে এবং ডিফল্টভাবে অ্যারের ইনডেক্সকে `key` হিসেবে ব্যবহার করবে। অ্যারের ইনডেক্সকে `key` হিসেবে ব্যবহার করা তালিকার আইটেমগুলোকে পুনরায় সাজানোর সময় অথবা তালিকা থেকে আইটেম যোগ/মুছে ফেলার সময় সমস্যা সৃষ্টি করে। স্পষ্টভাবে `key={i}` পাঠানো ত্রুটিটি চাপা দেয়, কিন্তু এটি অ্যারের ইনডেক্সের মতো একই সমস্যা নিয়ে আসে এবং বেশিরভাগ ক্ষেত্রে এটি সুপারিশ করা হয় না।
 
-Keys do not need to be globally unique; they only need to be unique between components and their siblings.
+`key` গুলোর বিশ্বব্যাপী অনন্য হওয়া দরকার নেই; বরং এটি শুধুমাত্র কম্পোনেন্টগুলোর এবং তাদের সাথীদের মধ্যে অনন্য হতে হবে।
 
-### Implementing time travel {/*implementing-time-travel*/}
+### টাইম ট্রাভেল বাস্তবায়ন {/*implementing-time-travel*/}
 
-In the tic-tac-toe game's history, each past move has a unique ID associated with it: it's the sequential number of the move. Moves will never be re-ordered, deleted, or inserted in the middle, so it's safe to use the move index as a key.
+টিক-ট্যাক-টো খেলার ইতিহাসে, প্রতিটি পূর্ববর্তী মুভের সাথে একটি ইউনিক আইডি যুক্ত থাকে: এটি মুভের ক্রমিক সংখ্যা। মুভগুলিকে কখনই পুনর্বিন্যাস করা হবে না, মুছে ফেলা হবে না বা মাঝখানে যোগ করা হবে না, তাই মুভ ইনডেক্স কী হিসেবে ব্যবহার করা নিরাপদ।
 
-In the `Game` function, you can add the key as `<li key={move}>`, and if you reload the rendered game, React's "key" error should disappear:
+`Game` ফাংশনে, আপনি কীটি `li`-এ `key={move}` হিসাবে যোগ করতে পারেন, এবং যদি আপনি রেন্ডার করা খেলাটি রিলোড করেন, তাহলে React-এর “key” ত্রুটিটি অদৃশ্য হয়ে যাবে:
 
 ```js {4}
 const moves = history.map((squares, move) => {
@@ -2476,7 +2475,7 @@ body {
 
 </Sandpack>
 
-Before you can implement `jumpTo`, you need the `Game` component to keep track of which step the user is currently viewing. To do this, define a new state variable called `currentMove`, defaulting to `0`:
+`jumpTo` বাস্তবায়ন করার আগে, আপনাকে `Game` কম্পোনেন্টে ট্র্যাক রাখতে হবে যে ব্যবহারকারী কোন ধাপে বর্তমানে রয়েছে। এটি করতে, একটি নতুন স্টেট ভ্যারিয়েবল `currentMove` নামে সংজ্ঞায়িত করুন, যার ডিফল্ট মান হবে `0`:
 
 ```js {4}
 export default function Game() {
@@ -2488,7 +2487,7 @@ export default function Game() {
 }
 ```
 
-Next, update the `jumpTo` function inside `Game` to update that `currentMove`. You'll also set `xIsNext` to `true` if the number that you're changing `currentMove` to is even.
+পরবর্তী ধাপে, `Game` এর ভিতরে `jumpTo` ফাংশন আপডেট করুন যাতে এটি `currentMove` আপডেট করে। এছাড়াও, আপনি `currentMove`-কে যে সংখ্যায় পরিবর্তন করছেন তা যদি জোড় সংখ্যা হয়, তাহলে `xIsNext`-কে `true` সেট করবেন।
 
 ```js {4-5}
 export default function Game() {
@@ -2501,10 +2500,10 @@ export default function Game() {
 }
 ```
 
-You will now make two changes to the `Game`'s `handlePlay` function which is called when you click on a square.
+এখন আপনি `Game` এর `handlePlay` ফাংশনে দুটি পরিবর্তন করবেন, যা তখন কল করা হয় যখন আপনি একটি স্কয়ারে ক্লিক করেন।
 
-- If you "go back in time" and then make a new move from that point, you only want to keep the history up to that point. Instead of adding `nextSquares` after all items (`...` spread syntax) in `history`, you'll add it after all items in `history.slice(0, currentMove + 1)` so that you're only keeping that portion of the old history.
-- Each time a move is made, you need to update `currentMove` to point to the latest history entry.
+- যদি আপনি "সময়ের মধ্যে পিছনে যান" এবং তারপর সেই বিন্দু থেকে একটি নতুন মুভ করেন, তাহলে আপনি কেবল সেই পর্যন্ত ইতিহাস সংরক্ষণ করতে চান। `history`-এর সমস্ত আইটেমের (`...` স্প্রেড সিনট্যাক্স) পরে `nextSquares` যোগ করার পরিবর্তে, আপনি এটিকে `history.slice(0, currentMove + 1)`-এর পরে যোগ করবেন, যাতে আপনি কেবল পুরানো ইতিহাসের সেই অংশটি রাখছেন।
+- প্রতিবার একটি মুভ করা হলে, আপনাকে `currentMove` আপডেট করতে হবে যাতে এটি সর্বশেষ ইতিহাস এন্ট্রির দিকে নির্দেশ করে।
 
 ```js {2-4}
 function handlePlay(nextSquares) {
@@ -2515,7 +2514,7 @@ function handlePlay(nextSquares) {
 }
 ```
 
-Finally, you will modify the `Game` component to render the currently selected move, instead of always rendering the final move:
+শেষে, আপনি `Game` কম্পোনেন্টটি সংশোধন করবেন যাতে এটি সর্বদা শেষ মুভটি রেন্ডার করার পরিবর্তে বর্তমানে নির্বাচিত মুভটি রেন্ডার করে:
 
 ```js {5}
 export default function Game() {
@@ -2528,7 +2527,7 @@ export default function Game() {
 }
 ```
 
-If you click on any step in the game's history, the tic-tac-toe board should immediately update to show what the board looked like after that step occurred.
+যদি আপনি গেমের ইতিহাসের কোনো ধাপে ক্লিক করেন, তাহলে টিক-ট্যাক-টো বোর্ডটি সঙ্গে সঙ্গে আপডেট হবে এবং সেই ধাপের পর বোর্ড কেমন ছিল তা প্রদর্শন করবে।
 
 <Sandpack>
 
@@ -2699,11 +2698,11 @@ body {
 
 </Sandpack>
 
-### Final cleanup {/*final-cleanup*/}
+### চূড়ান্ত গোছগাছ {/*final-cleanup*/}
 
-If you look at the code very closely, you may notice that `xIsNext === true` when `currentMove` is even and `xIsNext === false` when `currentMove` is odd. In other words, if you know the value of `currentMove`, then you can always figure out what `xIsNext` should be.
+যদি আপনি কোডটি খুব নিবিড়ভাবে দেখেন, তাহলে আপনি লক্ষ্য করতে পারেন যে `xIsNext === true` হয় যখন `currentMove` জোড় সংখ্যা হয় এবং `xIsNext === false` হয় যখন `currentMove` বিজোড় সংখ্যা হয়। অর্থাৎ, আপনি যদি `currentMove` এর মান জানেন, তাহলে আপনি সবসময় নির্ণয় করতে পারবেন যে `xIsNext` কী হওয়া উচিত।
 
-There's no reason for you to store both of these in state. In fact, always try to avoid redundant state. Simplifying what you store in state reduces bugs and makes your code easier to understand. Change `Game` so that it doesn't store `xIsNext` as a separate state variable and instead figures it out based on the `currentMove`:
+এই কারণে, উভয়কেই স্টেটে সংরক্ষণ করার কোনো প্রয়োজন নেই। প্রকৃতপক্ষে, সবসময় অনুরূপ স্টেট সংরক্ষণ এড়াতে চেষ্টা করুন। স্টেটে যা সংরক্ষণ করছেন তা সরল করা বাগ কমায় এবং আপনার কোডটি বুঝতে সহজ করে তোলে। `Game` কে পরিবর্তন করুন যাতে এটি `xIsNext`-কে একটি আলাদা স্টেট ভ্যারিয়েবল হিসাবে সংরক্ষণ না করে এবং পরিবর্তে এটি `currentMove` এর উপর ভিত্তি করে নির্ধারণ করে:
 
 ```js {4,11,15}
 export default function Game() {
@@ -2725,20 +2724,19 @@ export default function Game() {
 }
 ```
 
-You no longer need the `xIsNext` state declaration or the calls to `setXIsNext`. Now, there's no chance for `xIsNext` to get out of sync with `currentMove`, even if you make a mistake while coding the components.
-
-### Wrapping up {/*wrapping-up*/}
+আপনার আর `xIsNext` স্টেট ডিক্লারেশন বা `setXIsNext` কলগুলির প্রয়োজন নেই। এখন, এমন কোনো সুযোগ নেই যে `xIsNext` এর মান `currentMove` এর সাথে অসামঞ্জস্যপূর্ণ হয়ে যাবে, এমনকি আপনি কম্পোনেন্ট কোডিং করার সময় কোনো ভুল করলেও।
 
-Congratulations! You've created a tic-tac-toe game that:
+### শেষ কথা {/*wrapping-up*/}
 
-- Lets you play tic-tac-toe,
-- Indicates when a player has won the game,
-- Stores a game's history as a game progresses,
-- Allows players to review a game's history and see previous versions of a game's board.
+অভিনন্দন! আপনি একটি টিক-ট্যাক-টো গেম তৈরি করেছেন যা:
+- আপনাকে টিক-ট্যাক-টো খেলতে দেয়,
+- দেখায় কখন একজন খেলোয়াড় গেমটি জিতেছে,
+- গেমের অগ্রগতির সাথে সাথে গেমের ইতিহাস সংরক্ষণ করে,
+- খেলোয়াড়দের গেমের ইতিহাস পর্যালোচনা করতে এবং গেমের বোর্ডের পূর্ববর্তী সংস্করণগুলি দেখতে দেয়।
 
-Nice work! We hope you now feel like you have a decent grasp of how React works.
+চমৎকার কাজ! আশা করি এখন আপনি React কীভাবে কাজ করে সে সম্পর্কে একটি ভালো ধারণা পেয়েছেন।
 
-Check out the final result here:
+ফাইনাল ফলাফলটি এখানে দেখুন:
 
 <Sandpack>
 
@@ -2907,12 +2905,12 @@ body {
 
 </Sandpack>
 
-If you have extra time or want to practice your new React skills, here are some ideas for improvements that you could make to the tic-tac-toe game, listed in order of increasing difficulty:
+যদি আপনার হাতে অতিরিক্ত সময় থাকে বা আপনি আপনার নতুন React দক্ষতা অনুশীলন করতে চান, এখানে কিছু উন্নতির আইডিয়া দেওয়া হল যা আপনি টিক-ট্যাক-টো গেমে করতে পারেন, ক্রমবর্ধমান কঠিনতার ভিত্তিতে তালিকাভুক্ত করা হয়েছে:
 
-1. For the current move only, show "You are at move #..." instead of a button.
-1. Rewrite `Board` to use two loops to make the squares instead of hardcoding them.
-1. Add a toggle button that lets you sort the moves in either ascending or descending order.
-1. When someone wins, highlight the three squares that caused the win (and when no one wins, display a message about the result being a draw).
-1. Display the location for each move in the format (row, col) in the move history list.
+1. শুধুমাত্র বর্তমান মুভটির জন্য, “You are at move #…” বার্তা দেখান একটি বোতামের পরিবর্তে।
+2. `Board`-কে পুনরায় লিখুন যাতে দুটি লুপ ব্যবহার করে স্কোয়ার তৈরি করা হয়, হার্ডকোড করার পরিবর্তে।
+3. এমন একটি টগল বোতাম যুক্ত করুন যা আপনাকে মুভগুলোকে উর্ধ্বগামী বা নিম্নগামী ক্রমে সাজানোর সুযোগ দেয়।
+4. যখন কেউ জিতে যায়, সেই তিনটি স্কোয়ারকে হাইলাইট করুন যা জয়ের কারণ হয়েছিল (এবং যখন কেউ জিততে পারে না, তখন ড্র হওয়ার বার্তা দেখান)।
+5. প্রতিটি মুভের অবস্থানকে (সারি, কলাম) ফরম্যাটে মুভ ইতিহাস তালিকায় দেখান।
 
-Throughout this tutorial, you've touched on React concepts including elements, components, props, and state. Now that you've seen how these concepts work when building a game, check out [Thinking in React](/learn/thinking-in-react) to see how the same React concepts work when build an app's UI.
+এই টিউটোরিয়ালে, আপনি React এর বিভিন্ন ধারণা যেমন এলিমেন্ট, কম্পোনেন্ট, প্রপস এবং স্টেট সম্পর্কে জেনেছেন। এখন আপনি কিভাবে গেম তৈরি করতে এই ধারণাগুলি ব্যবহার করেছেন তা দেখেছেন, [Thinking in React](/learn/thinking-in-react) চেক করে দেখুন কিভাবে একই React ধারণাগুলি অ্যাপের UI তৈরি করতে কাজ করে।
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index 6f49c7656..78d3cb38b 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -1,57 +1,57 @@
 ---
-title: Using TypeScript
+title: TypeScript ব্যাবহার করা
 re: https://github.com/reactjs/react.dev/issues/5960
 ---
 
 <Intro>
 
-TypeScript is a popular way to add type definitions to JavaScript codebases. Out of the box, TypeScript [supports JSX](/learn/writing-markup-with-jsx) and you can get full React Web support by adding [`@types/react`](https://www.npmjs.com/package/@types/react) and [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) to your project.
+TypeScript একটি জনপ্রিয় উপায় যা JavaScript কোডবেসে টাইপ ডিফিনিশন যোগ করতে ব্যবহৃত হয়। আউট অফ দ্য বক্স, TypeScript [JSX সমর্থন করে](/learn/writing-markup-with-jsx) এবং আপনি আপনার প্রকল্পে [`@types/react`](https://www.npmjs.com/package/@types/react) এবং [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) যোগ করে পূর্ণ React ওয়েব সমর্থন পেতে পারেন।
 
 </Intro>
 
 <YouWillLearn>
 
-* [TypeScript with React Components](/learn/typescript#typescript-with-react-components)
-* [Examples of typing with Hooks](/learn/typescript#example-hooks)
-* [Common types from `@types/react`](/learn/typescript/#useful-types)
-* [Further learning locations](/learn/typescript/#further-learning)
+* [React কম্পোনেন্টের সাথে TypeScript](/learn/typescript#typescript-with-react-components)
+* [হুকের সাথে টাইপিং এর উদাহরণ](/learn/typescript#example-hooks)
+* [`@types/react` থেকে সাধারণ টাইপগুলি](/learn/typescript/#useful-types)
+* [অতিরিক্ত শিক্ষার স্থান](/learn/typescript/#further-learning)
 
 </YouWillLearn>
 
-## Installation {/*installation*/}
+## ইন্সটলেশন {/*installation*/}
 
-All [production-grade React frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
+সব [প্রোডাকশন-গ্রেড React ফ্রেমওয়ার্ক](/learn/start-a-new-react-project#production-grade-react-frameworks) TypeScript ব্যবহারের সমর্থন দেয়। ইনস্টলেশনের জন্য ফ্রেমওয়ার্ক স্পেসিফিক গাইড অনুসরণ করুন:
 
 - [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript)
 - [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)
 - [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/)
 - [Expo](https://docs.expo.dev/guides/typescript/)
 
-### Adding TypeScript to an existing React project {/*adding-typescript-to-an-existing-react-project*/}
+### বিদ্যমান React প্রকল্পে টাইপস্ক্রিপ্ট যোগ করা {/*adding-typescript-to-an-existing-react-project*/}
 
-To install the latest version of React's type definitions:
+React-এর সর্বশেষ ভার্ষন টাইপ ডেফিনিশন ইনস্টল করতে:
 
 <TerminalBlock>
 npm install @types/react @types/react-dom
 </TerminalBlock>
 
-The following compiler options need to be set in your `tsconfig.json`:
+নিম্নলিখিত কম্পাইলার বিকল্পগুলি আপনার `tsconfig.json` ফাইলে সেট করতে হবে:
 
-1. `dom` must be included in [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Note: If no `lib` option is specified, `dom` is included by default).
-1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) must be set to one of the valid options. `preserve` should suffice for most applications.
-  If you're publishing a library, consult the [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) on what value to choose.
+1. `lib` তে [`dom`](https://www.typescriptlang.org/tsconfig/#lib) অন্তর্ভুক্ত থাকতে হবে। (নোট: যদি কোনো `lib` বিকল্প নির্দিষ্ট না করা হয়, তবে `dom` ডিফল্টভাবে অন্তর্ভুক্ত হয়।)
+2. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) একটি বৈধ অপশনে সেট করতে হবে। অধিকাংশ অ্যাপ্লিকেশনের জন্য `preserve` যথেষ্ট হবে।  
+   যদি আপনি একটি লাইব্রেরি প্রকাশ করছেন, তবে কোন মান নির্বাচন করতে হবে তা জানতে [`jsx` ডকুমেন্টেশন](https://www.typescriptlang.org/tsconfig/#jsx) পরামর্শ করুন।
 
-## TypeScript with React Components {/*typescript-with-react-components*/}
+## React কম্পোনেন্টের সাথে টাইপস্ক্রিপ্ট {/*typescript-with-react-components*/}
 
 <Note>
 
-Every file containing JSX must use the `.tsx` file extension. This is a TypeScript-specific extension that tells TypeScript that this file contains JSX.
+প্রত্যেক ফাইল যেখানে JSX থাকে, সেখানে `.tsx` ফাইল এক্সটেনশন ব্যবহার করতে হবে। এটি টাইপস্ক্রিপ্টকে জানায় যে এই ফাইলে JSX আছে।
 
 </Note>
 
-Writing TypeScript with React is very similar to writing JavaScript with React. The key difference when working with a component is that you can provide types for your component's props. These types can be used for correctness checking and providing inline documentation in editors.
+React এর সাথে টাইপস্ক্রিপ্ট ব্যবহার করা বেশিরভাগ ক্ষেত্রেই জাভাস্ক্রিপ্টের সাথে React ব্যবহারের মতো। মূল পার্থক্য হলো আপনার কম্পোনেন্টের প্রপসে টাইপ যোগ করতে পারেন। এই টাইপস সম্পূর্ণতার যাচাই এবং এডিটরে ইনলাইন ডকুমেন্টেশন প্রদান করতে ব্যবহৃত হতে পারে।
 
-Taking the [`MyButton` component](/learn#components) from the [Quick Start](/learn) guide, we can add a type describing the `title` for the button:
+[Quick Start](/learn) গাইড থেকে [`MyButton` কম্পোনেন্ট](/learn#components) নেওয়ার মাধ্যমে, আমরা বোতামের জন্য `title` বর্ণনা করতে একটি টাইপ যোগ করতে পারি:
 
 <Sandpack>
 
@@ -80,11 +80,11 @@ export default App = AppTSX;
 
  <Note>
 
-These sandboxes can handle TypeScript code, but they do not run the type-checker. This means you can amend the TypeScript sandboxes to learn, but you won't get any type errors or warnings. To get type-checking, you can use the [TypeScript Playground](https://www.typescriptlang.org/play) or use a more fully-featured online sandbox.
+এই স্যান্ডবক্সগুলো টাইপস্ক্রিপ্ট কোড হ্যান্ডেল করতে পারে, কিন্তু টাইপ-চেকার চালায় না। এর অর্থ হলো, আপনি টাইপস্ক্রিপ্ট স্যান্ডবক্সগুলো পরিবর্তন করতে পারেন, কিন্তু টাইপ এরর বা সতর্কতা পাবেন না। টাইপ-চেকিং পেতে [TypeScript Playground](https://www.typescriptlang.org/play) বা অন্য অনলাইন স্যান্ডবক্স ব্যবহার করতে পারেন।
 
 </Note>
 
-This inline syntax is the simplest way to provide types for a component, though once you start to have a few fields to describe it can become unwieldy. Instead, you can use an `interface` or `type` to describe the component's props:
+এই ইনলাইন সিনট্যাক্স কম্পোনেন্টের জন্য টাইপ প্রদান করার সহজতম উপায়, যদিও একাধিক ক্ষেত্র থাকলে এটি জটিল হতে পারে। পরিবর্তে, আপনি একটি `interface` বা `type` ব্যবহার করতে পারেন:
 
 <Sandpack>
 
@@ -119,32 +119,31 @@ export default App = AppTSX;
 
 </Sandpack>
 
-The type describing your component's props can be as simple or as complex as you need, though they should be an object type described with either a `type` or `interface`. You can learn about how TypeScript describes objects in [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) but you may also be interested in using [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) to describe a prop that can be one of a few different types and the [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) guide for more advanced use cases.
+আপনার কম্পোনেন্টের প্রপস বর্ণনা করার টাইপটি যতটা সহজ বা জটিল প্রয়োজন ততটাই হতে পারে, তবে এটি একটি `type` বা `interface` দিয়ে বর্ণনা করা একটি অবজেক্ট টাইপ হওয়া উচিত। TypeScript কীভাবে অবজেক্ট বর্ণনা করে তা শিখতে [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) দেখুন, তবে আপনি [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) ব্যবহার করতেও আগ্রহী হতে পারেন, যা একটি প্রপকে কয়েকটি ভিন্ন টাইপের মধ্যে একটির বর্ণনা করতে সক্ষম করে এবং [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) গাইডটি আরও উন্নত ব্যবহারের জন্য।
 
+## হুকের উদাহরণ {/*example-hooks*/}
 
-## Example Hooks {/*example-hooks*/}
+`@types/react` থেকে টাইপ ডিফিনিশনগুলি বিল্ট-ইন হুকগুলোর জন্য টাইপ অন্তর্ভুক্ত করে, তাই আপনি আপনার কম্পোনেন্টে অতিরিক্ত সেটআপ ছাড়াই সেগুলি ব্যবহার করতে পারেন। এগুলি আপনার কম্পোনেন্টে যে কোড আপনি লেখেন তার প্রতি মনোযোগ দিয়ে তৈরি করা হয়েছে, তাই আপনি অনেক সময় [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) পাবেন এবং আদর্শভাবে টাইপ সরবরাহ করার সূক্ষ্ম বিষয়গুলো পরিচালনা করার প্রয়োজন পড়বে না।
 
-The type definitions from `@types/react` include types for the built-in Hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types. 
-
-However, we can look at a few examples of how to provide types for Hooks.
+তবে, আমরা হুকগুলোর জন্য টাইপ প্রদান করার কয়েকটি উদাহরণ দেখতে পারি।
 
 ### `useState` {/*typing-usestate*/}
 
-The [`useState` Hook](/reference/react/useState) will re-use the value passed in as the initial state to determine what the type of the value should be. For example:
+[`useState` হুক](/reference/react/useState) প্রাথমিক অবস্থার জন্য দেওয়া মানটি পুনঃব্যবহার করবে এটি নির্ধারণ করতে যে মানের টাইপটি কী হওয়া উচিত। উদাহরণস্বরূপ:
 
 ```ts
 // Infer the type as "boolean"
 const [enabled, setEnabled] = useState(false);
 ```
 
-Will assign the type of `boolean` to `enabled`, and `setEnabled` will be a function accepting either a `boolean` argument, or a function that returns a `boolean`. If you want to explicitly provide a type for the state, you can do so by providing a type argument to the `useState` call:
+`enabled` এর জন্য `boolean` টাইপ নির্ধারণ করবে, এবং `setEnabled` হবে একটি ফাংশন যা বা একটি `boolean` আর্গুমেন্ট গ্রহণ করে, অথবা একটি ফাংশন যা একটি `boolean` ফেরত দেয়। যদি আপনি অবস্থার জন্য স্পষ্টভাবে একটি টাইপ প্রদান করতে চান, তবে আপনি `useState` কলের সাথে একটি টাইপ আর্গুমেন্ট প্রদান করে এটি করতে পারেন:
 
 ```ts 
 // Explicitly set the type to "boolean"
 const [enabled, setEnabled] = useState<boolean>(false);
 ```
 
-This isn't very useful in this case, but a common case where you may want to provide a type is when you have a union type. For example, `status` here can be one of a few different strings:
+এটি এই ক্ষেত্রে খুব বেশি কার্যকর নয়, তবে একটি সাধারণ ক্ষেত্রে যেখানে আপনি একটি টাইপ প্রদান করতে চাইতে পারেন তা হল যখন আপনার একটি ইউনিয়ন টাইপ থাকে। উদাহরণস্বরূপ, এখানে `status` কয়েকটি ভিন্ন স্ট্রিংয়ের মধ্যে একটি হতে পারে:
 
 ```ts
 type Status = "idle" | "loading" | "success" | "error";
@@ -152,7 +151,7 @@ type Status = "idle" | "loading" | "success" | "error";
 const [status, setStatus] = useState<Status>("idle");
 ```
 
-Or, as recommended in [Principles for structuring state](/learn/choosing-the-state-structure#principles-for-structuring-state), you can group related state as an object and describe the different possibilities via object types:
+অথবা, [State গঠন করার নীতির](https://reactjs.org/docs/faq-structure.html#principles-for-structuring-state) অনুসারে, আপনি সম্পর্কিত অবস্থাগুলিকে একটি অবজেক্ট হিসাবে গ্রুপ করতে পারেন এবং অবজেক্ট টাইপের মাধ্যমে বিভিন্ন সম্ভাবনাগুলি বর্ণনা করতে পারেন:
 
 ```ts
 type RequestState =
@@ -166,7 +165,7 @@ const [requestState, setRequestState] = useState<RequestState>({ status: 'idle'
 
 ### `useReducer` {/*typing-usereducer*/}
 
-The [`useReducer` Hook](/reference/react/useReducer) is a more complex Hook that takes a reducer function and an initial state. The types for the reducer function are inferred from the initial state. You can optionally provide a type argument to the `useReducer` call to provide a type for the state, but it is often better to set the type on the initial state instead:
+[`useReducer` হুক](/reference/react/useReducer) একটি আরও জটিল হুক যা একটি রিডিউসার ফাংশন এবং একটি প্রাথমিক অবস্থা নেয়। রিডিউসার ফাংশনের জন্য টাইপগুলি প্রাথমিক অবস্থাটি থেকে ইনফার করা হয়। আপনি ঐচ্ছিকভাবে `useReducer` কলের সাথে একটি টাইপ আর্গুমেন্ট প্রদান করে অবস্থার জন্য একটি টাইপ প্রদান করতে পারেন, তবে প্রায়শই এটি প্রাথমিক অবস্থার উপর টাইপ সেট করা ভাল:
 
 <Sandpack>
 
@@ -221,14 +220,14 @@ export default App = AppTSX;
 </Sandpack>
 
 
-We are using TypeScript in a few key places:
+আমরা TypeScript কয়েকটি গুরুত্বপূর্ণ স্থানে ব্যবহার করছি:
 
- - `interface State` describes the shape of the reducer's state.
- - `type CounterAction` describes the different actions which can be dispatched to the reducer.
- - `const initialState: State` provides a type for the initial state, and also the type which is used by `useReducer` by default.
- - `stateReducer(state: State, action: CounterAction): State` sets the types for the reducer function's arguments and return value.
+- `interface State` রিডিউসারের স্টেটের আকৃতি বর্ণনা করে।
+- `type CounterAction` বিভিন্ন অ্যাকশনগুলো বর্ণনা করে যা রিডিউসারে পাঠানো যেতে পারে।
+- `const initialState: State` প্রাথমিক স্টেটের জন্য টাইপ প্রদান করে এবং `useReducer`-এর ডিফল্ট টাইপ হিসেবেও ব্যবহৃত হয়।
+- `stateReducer(state: State, action: CounterAction): State` রিডিউসার ফাংশনের আর্গুমেন্ট এবং রিটার্ন ভ্যালুর টাইপ সেট করে।
 
-A more explicit alternative to setting the type on `initialState` is to provide a type argument to `useReducer`:
+প্রাথমিক স্টেটে টাইপ নির্ধারণের আরেকটি স্পষ্ট পদ্ধতি হলো `useReducer`-এ টাইপ আর্গুমেন্ট ব্যবহার করা:
 
 ```ts
 import { stateReducer, State } from './your-reducer-implementation';
@@ -242,9 +241,9 @@ export default function App() {
 
 ### `useContext` {/*typing-usecontext*/}
 
-The [`useContext` Hook](/reference/react/useContext) is a technique for passing data down the component tree without having to pass props through components. It is used by creating a provider component and often by creating a Hook to consume the value in a child component.
+[`useContext` হুক](/reference/react/useContext) হল কম্পোনেন্ট গাছের নিচে ডেটা পাঠানোর একটি কৌশল যা কম্পোনেন্টের মাধ্যমে প্রপ্স প্রেরণের প্রয়োজন নেই। এটি একটি প্রোভাইডার কম্পোনেন্ট তৈরি করে ব্যবহার করা হয় এবং প্রায়ই একটি হুক তৈরি করে একটি শিশু কম্পোনেন্টে মানটি ব্যবহার করতে হয়।
 
-The type of the value provided by the context is inferred from the value passed to the `createContext` call:
+কনটেক্সট দ্বারা প্রদত্ত মানের টাইপটি `createContext` কলের সাথে দেওয়া মান থেকে ইনফার করা হয়:
 
 <Sandpack>
 
@@ -284,9 +283,9 @@ export default App = AppTSX;
 
 </Sandpack>
 
-This technique works when you have a default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. 
+এই কৌশলটি যখন আপনার কাছে একটি ডিফল্ট মান থাকে যা যুক্তিযুক্ত হয় তখন কাজ করে—কিন্তু মাঝে মাঝে এমন পরিস্থিতি থাকতে পারে যখন আপনার ডিফল্ট মান নেই, এবং সেক্ষেত্রে `null` একটি যুক্তিযুক্ত ডিফল্ট মান হতে পারে। তবে, টাইপ সিস্টেমকে আপনার কোড বোঝাতে দিতে, আপনাকে `createContext`-এ স্পষ্টভাবে `ContextShape | null` সেট করতে হবে।
 
-This causes the issue that you need to eliminate the `| null` in the type for context consumers. Our recommendation is to have the Hook do a runtime check for it's existence and throw an error when not present:
+এটি কনটেক্সট কনজ্যুমারদের জন্য টাইপে `| null` বাদ দিতে হবে বলে একটি সমস্যা সৃষ্টি করে। আমাদের পরামর্শ হল, হুকটি তার অস্তিত্বের জন্য একটি রানটাইম চেক করতে পারে এবং যখন এটি উপস্থিত না থাকে তখন একটি এরোর থ্রো করে:
 
 ```js {5, 16-20}
 import { createContext, useContext, useState, useMemo } from 'react';
@@ -329,7 +328,7 @@ function MyComponent() {
 
 ### `useMemo` {/*typing-usememo*/}
 
-The [`useMemo`](/reference/react/useMemo) Hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the Hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the Hook.
+[`useMemo`](/reference/react/useMemo) হুক একটি মেমোরাইজড মান তৈরি বা পুনরায় অ্যাক্সেস করবে, যা নির্দিষ্ট একটি ফাংশন কল থেকে আসে। এই ফাংশনটি শুধুমাত্র তখনই পুনরায় রান করবে যখন দ্বিতীয় প্যারামিটার হিসাবে পাস করা নির্ভরশীল উপাদানগুলো পরিবর্তিত হয়। হুকটি কল করার ফলাফলটি প্রথম প্যারামিটারে দেওয়া ফাংশনের রিটার্ন মান থেকে অনুমান করা হয়। তবে আপনি টাইপিং আরো স্পষ্ট করতে চাইলে হুকে একটি টাইপ আর্গুমেন্টও সরবরাহ করতে পারেন।
 
 ```ts
 // The type of visibleTodos is inferred from the return value of filterTodos
@@ -339,8 +338,7 @@ const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
 
 ### `useCallback` {/*typing-usecallback*/}
 
-The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the Hook.
-
+[`useCallback`](/reference/react/useCallback) হুক একটি ফাংশনের স্থিতিশীল রেফারেন্স সরবরাহ করে যতক্ষণ দ্বিতীয় প্যারামিটারে পাস করা নির্ভরশীল উপাদানগুলো একই থাকে। `useMemo`-র মতো, ফাংশনের টাইপ প্রথম প্যারামিটারে দেওয়া ফাংশনের রিটার্ন মান থেকে অনুমান করা হয়, তবে আপনি চাইলে হুকে একটি টাইপ আর্গুমেন্ট দিয়ে এটিকে আরও স্পষ্ট করতে পারেন।
 
 ```ts
 const handleClick = useCallback(() => {
@@ -348,9 +346,9 @@ const handleClick = useCallback(() => {
 }, [todos]);
 ```
 
-When working in TypeScript strict mode `useCallback` requires adding types for the parameters in your callback. This is because the type of the callback is inferred from the return value of the function, and without parameters the type cannot be fully understood.
+টাইপস্ক্রিপ্টের স্ট্রিক্ট মোডে কাজ করার সময়, `useCallback`-এর জন্য কলব্যাক ফাংশনের প্যারামিটারগুলোর টাইপ যোগ করতে হয়। এর কারণ হলো, কলব্যাক ফাংশনের টাইপটি মূলত ফাংশনের রিটার্ন ভ্যালু থেকে নির্ণয় করা হয়, এবং প্যারামিটার ছাড়া টাইপটি সম্পূর্ণভাবে বোঝা যায় না।
 
-Depending on your code-style preferences, you could use the `*EventHandler` functions from the React types to provide the type for the event handler at the same time as defining the callback: 
+আপনার কোড-স্টাইল পছন্দের ওপর নির্ভর করে, আপনি *EventHandler ফাংশনগুলো ব্যবহার করতে পারেন React টাইপ থেকে। এটি আপনাকে একই সাথে কলব্যাক ফাংশন ডিফাইন এবং ইভেন্ট হ্যান্ডলারটির টাইপ প্রদান করতে সহায়তা করে।
 
 ```ts
 import { useState, useCallback } from 'react';
@@ -371,13 +369,13 @@ export default function Form() {
 }
 ```
 
-## Useful Types {/*useful-types*/}
+## উপকারী টাইপসমূহ {/*useful-types*/}
 
-There is quite an expansive set of types which come from the `@types/react` package, it is worth a read when you feel comfortable with how React and TypeScript interact. You can find them [in React's folder in DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). We will cover a few of the more common types here.
+`@types/react` প্যাকেজ থেকে আসা একটি বিস্তৃত টাইপ সেট রয়েছে, এটি পড়া উপকারী যখন আপনি বুঝতে পারবেন যে React এবং TypeScript কীভাবে взаимодействуют। আপনি এগুলি [DefinitelyTyped-এ React-এর ফোল্ডারে](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts) খুঁজে পেতে পারেন। এখানে আমরা কয়েকটি সাধারণ টাইপ নিয়ে আলোচনা করব।
 
-### DOM Events {/*typing-dom-events*/}
+### DOM ইভেন্টসমূহ {/*typing-dom-events*/}
 
-When working with DOM events in React, the type of the event can often be inferred from the event handler. However, when you want to extract a function to be passed to an event handler, you will need to explicitly set the type of the event.
+React-এ DOM ইভেন্ট নিয়ে কাজ করার সময়, সাধারণত ইভেন্ট হ্যান্ডলার থেকে ইভেন্টের টাইপটি নির্ধারণ করা যায়। তবে, যখন আপনি একটি ফাংশনকে ইভেন্ট হ্যান্ডলারে পাস করার জন্য বের করতে চান, তখন আপনাকে স্পষ্টভাবে ইভেন্টের টাইপ সেট করতে হবে।
 
 <Sandpack>
 
@@ -407,15 +405,17 @@ export default App = AppTSX;
 
 </Sandpack>
 
-There are many types of events provided in the React types - the full list can be found [here](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) which is based on the [most popular events from the DOM](https://developer.mozilla.org/en-US/docs/Web/Events).
+React টাইপগুলিতে অনেক ধরনের ইভেন্ট দেওয়া হয়েছে—পূর্ণ তালিকা [এখানে](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) পাওয়া যাবে, যা [DOM থেকে সবচেয়ে জনপ্রিয় ইভেন্টগুলির](https://developer.mozilla.org/en-US/docs/Web/Events) উপর ভিত্তি করে। 
 
-When determining the type you are looking for you can first look at the hover information for the event handler you are using, which will show the type of the event.
+আপনি যে টাইপটি খুঁজছেন তা নির্ধারণ করার সময়, আপনি প্রথমে যেই ইভেন্ট হ্যান্ডলারটি ব্যবহার করছেন তার হভার তথ্য দেখতে পারেন, যা ইভেন্টের টাইপটি দেখাবে। 
 
-If you need to use an event that is not included in this list, you can use the `React.SyntheticEvent` type, which is the base type for all events.
+যদি আপনার এমন একটি ইভেন্ট ব্যবহার করতে হয় যা এই তালিকায় অন্তর্ভুক্ত নয়, তাহলে আপনি `React.SyntheticEvent` টাইপ ব্যবহার করতে পারেন, যা সমস্ত ইভেন্টের জন্য বেস টাইপ।
 
 ### Children {/*typing-children*/}
 
-There are two common paths to describing the children of a component. The first is to use the `React.ReactNode` type, which is a union of all the possible types that can be passed as children in JSX:
+একটি কম্পোনেন্টের চাইল্ড বর্ণনা করার জন্য দুটি সাধারণ পদ্ধতি রয়েছে। প্রথমটি হল `React.ReactNode` টাইপ ব্যবহার করা, যা JSX-এ চাইল্ড হিসেবে পাস করা সমস্ত সম্ভাব্য টাইপের একটি ইউনিয়ন। 
+
+এখানে, "চাইল্ড" হচ্ছে প্রোগ্রামিংয়ের একটি ধারণা, যা নির্দেশ করে যে একটি কম্পোনেন্টের মধ্যে অন্য একটি কম্পোনেন্ট বা উপাদান কিভাবে নেস্ট করা হয়েছে।
 
 ```ts
 interface ModalRendererProps {
@@ -424,7 +424,7 @@ interface ModalRendererProps {
 }
 ```
 
-This is a very broad definition of children. The second is to use the `React.ReactElement` type, which is only JSX elements and not JavaScript primitives like strings or numbers:
+এটি চাইল্ডসমূহের একটি খুবই বিস্তৃত সংজ্ঞা। দ্বিতীয়টি হল `React.ReactElement` টাইপ ব্যবহার করা, যা শুধুমাত্র JSX উপাদান এবং স্ট্রিং বা সংখ্যা মতো জাভাস্ক্রিপ্ট প্রিমিটিভ নয়:
 
 ```ts
 interface ModalRendererProps {
@@ -433,13 +433,13 @@ interface ModalRendererProps {
 }
 ```
 
-Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `<li>` children. 
+দ্রষ্টব্য, আপনি TypeScript ব্যবহার করে বর্ণনা করতে পারবেন না যে চাইল্ডসমূহের একটি নির্দিষ্ট ধরনের JSX উপাদান, তাই আপনি টাইপ সিস্টেম ব্যবহার করে এমন একটি কম্পোনেন্ট বর্ণনা করতে পারবেন না যা কেবল `<li>` শিশু গ্রহণ করে।
 
-You can see an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA).
+আপনি উভয় `React.ReactNode` এবং `React.ReactElement` এর একটি উদাহরণ টাইপ-চেকার সহ [এই TypeScript প্লেগ্রাউন্ডে](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA) দেখতে পারেন।
 
-### Style Props {/*typing-style-props*/}
+### টাইল প্রপস {/*typing-style-props*/}
 
-When using inline styles in React, you can use `React.CSSProperties` to describe the object passed to the `style` prop. This type is a union of all the possible CSS properties, and is a good way to ensure you are passing valid CSS properties to the `style` prop, and to get auto-complete in your editor.
+React-এ ইনলাইন স্টাইল ব্যবহার করার সময়, আপনি `React.CSSProperties` ব্যবহার করে স্টাইল প্রপে পাস করা অবজেক্টটি বর্ণনা করতে পারেন। এই টাইপটি সমস্ত সম্ভাব্য CSS প্রপার্টির একটি ইউনিয়ন এবং এটি নিশ্চিত করার জন্য একটি ভালো উপায় যে আপনি স্টাইল প্রপে বৈধ CSS প্রপার্টি পাস করছেন, এবং আপনার এডিটরে অটো-কমপ্লিট পাওয়ার জন্য।
 
 ```ts
 interface MyComponentProps {
@@ -447,17 +447,16 @@ interface MyComponentProps {
 }
 ```
 
-## Further learning {/*further-learning*/}
+## আরও শেখা {/*further-learning*/}
 
-This guide has covered the basics of using TypeScript with React, but there is a lot more to learn.
-Individual API pages on the docs may contain more in-depth documentation on how to use them with TypeScript.
+এই গাইডে React এর সাথে TypeScript ব্যবহারের মৌলিক বিষয়গুলো আলোচনা করা হয়েছে, তবে শেখার জন্য আরও অনেক কিছু রয়েছে। ডকসের পৃথক API পৃষ্ঠাগুলো TypeScript এর সাথে কীভাবে ব্যবহার করতে হয় সে সম্পর্কে আরও গভীর ডকুমেন্টেশন ধারণ করতে পারে।
 
-We recommend the following resources:
+আমরা নিম্নলিখিত রিসোর্সগুলোর সুপারিশ করছি:
 
- - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) is the official documentation for TypeScript, and covers most key language features.
+- [TypeScript হ্যান্ডবুক](https://www.typescriptlang.org/docs/handbook/) হল TypeScript এর অফিসিয়াল ডকুমেন্টেশন, যা বেশিরভাগ মূল ভাষার বৈশিষ্ট্যগুলো আলোচনা করে।
 
- - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) cover new features in depth.
+- [TypeScript রিলিজ নোটস](https://devblogs.microsoft.com/typescript/) নতুন বৈশিষ্ট্যগুলো বিস্তারিতভাবে আলোচনা করে।
 
- - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document.
+- [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) হল TypeScript এর সাথে React ব্যবহার করার জন্য একটি কমিউনিটি দ্বারা রক্ষণাবেক্ষিত চিটশিট, যা অনেক কার্যকর প্রান্তের কেস এবং এই ডকুমেন্টের চেয়ে আরও বিস্তৃত বিষয়গুলি কভার করে।
 
- - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues.
+- [TypeScript কমিউনিটি ডিসকর্ড](https://discord.com/invite/typescript) TypeScript এবং React সমস্যাগুলির জন্য প্রশ্ন জিজ্ঞাসা করতে এবং সাহায্য পাওয়ার জন্য একটি চমৎকার জায়গা।
\ No newline at end of file
diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md
index 66cdc3117..52f2e876d 100644
--- a/src/content/learn/you-might-not-need-an-effect.md
+++ b/src/content/learn/you-might-not-need-an-effect.md
@@ -1,38 +1,39 @@
 ---
-title: 'You Might Not Need an Effect'
+title: 'আপনার সম্ভবত Effect প্রয়োজন নাও হতে পারে'
 ---
 
 <Intro>
 
-Effects are an escape hatch from the React paradigm. They let you "step outside" of React and synchronize your components with some external system like a non-React widget, network, or the browser DOM. If there is no external system involved (for example, if you want to update a component's state when some props or state change), you shouldn't need an Effect. Removing unnecessary Effects will make your code easier to follow, faster to run, and less error-prone.
+এফেক্ট হল রিয়্যাক্ট প্যারাডাইম থেকে বেরিয়ে আসার একটি মাধ্যম। এগুলি আপনাকে রিয়্যাক্টের বাইরে গিয়ে কিছু বাহ্যিক সিস্টেম যেমন কোনো নন-রিয়্যাক্ট উইজেট, নেটওয়ার্ক বা ব্রাউজারের DOM-এর সাথে আপনার কম্পোনেন্টগুলোকে সিঙ্ক্রোনাইজ করতে দেয়। যদি কোনো বাহ্যিক সিস্টেমের প্রয়োজন না থাকে (যেমন, কিছু প্রপস বা স্টেট পরিবর্তিত হলে কম্পোনেন্টের স্টেট আপডেট করতে চান), তাহলে ইফেক্ট প্রয়োজন হবে না। অপ্রয়োজনীয় ইফেক্ট অপসারণ করলে আপনার কোড অনুসরণ করা সহজ হবে, দ্রুত চলবে এবং কম ত্রুটি প্রবণ হবে।
 
 </Intro>
 
 <YouWillLearn>
 
-* Why and how to remove unnecessary Effects from your components
-* How to cache expensive computations without Effects
-* How to reset and adjust component state without Effects
-* How to share logic between event handlers
-* Which logic should be moved to event handlers
-* How to notify parent components about changes
+* কেন এবং কীভাবে আপনার কম্পোনেন্ট থেকে অপ্রয়োজনীয় ইফেক্ট থেকে অপসারণ করবেন
+* ইফেক্ট ছাড়াই ভারি কম্পিউটেশন কীভাবে ক্যাশ করবেন
+* ইফেক্ট ছাড়াই কীভাবে কম্পোনেন্টের স্টেট রিসেট এবং সামঞ্জস্য করবেন
+* কীভাবে ইভেন্ট হ্যান্ডলারের মধ্যে লজিক ভাগ করবেন
+* কোন লজিক ইভেন্ট হ্যান্ডলারে স্থানান্তর করা উচিত
+* কীভাবে পরিবর্তন সম্পর্কে প্যারেন্ট কম্পোনেন্টকে জানাবেন
 
 </YouWillLearn>
 
-## How to remove unnecessary Effects {/*how-to-remove-unnecessary-effects*/}
+## অপ্রয়োজনীয় ইফেক্ট কীভাবে অপসারণ করবেন {/*how-to-remove-unnecessary-effects*/}
 
-There are two common cases in which you don't need Effects:
+এ দুটি সাধারণ ক্ষেত্রে ইফেক্টের প্রয়োজন হয় না:
 
-* **You don't need Effects to transform data for rendering.** For example, let's say you want to filter a list before displaying it. You might feel tempted to write an Effect that updates a state variable when the list changes. However, this is inefficient. When you update the state, React will first call your component functions to calculate what should be on the screen. Then React will ["commit"](/learn/render-and-commit) these changes to the DOM, updating the screen. Then React will run your Effects. If your Effect *also* immediately updates the state, this restarts the whole process from scratch! To avoid the unnecessary render passes, transform all the data at the top level of your components. That code will automatically re-run whenever your props or state change.
-* **You don't need Effects to handle user events.** For example, let's say you want to send an `/api/buy` POST request and show a notification when the user buys a product. In the Buy button click event handler, you know exactly what happened. By the time an Effect runs, you don't know *what* the user did (for example, which button was clicked). This is why you'll usually handle user events in the corresponding event handlers.
+* **রেন্ডার করার জন্য ডেটা ট্রান্সফার করতে ইফেক্টের প্রয়োজন নেই।** ধরুন, আপনি একটি তালিকা ফিল্টার করতে চান প্রদর্শনের আগে। এখানে তালিকা পরিবর্তিত হলে ইফেক্ট লিখে একটি স্টেট ভেরিয়েবল আপডেট করার চিন্তা আসতে পারে। তবে এটি অকার্যকর। স্টেট আপডেট হলে, React প্রথমে কম্পোনেন্ট ফাংশনগুলোকে কল করে ঠিক করে কী স্ক্রিনে দেখানো হবে। এরপর React সেই পরিবর্তনগুলো DOM-এ ["কমিট"](/learn/render-and-commit) করে স্ক্রিন আপডেট করে। তারপর React ইফেক্টগুলো চালায়। যদি ইফেক্ট তৎক্ষণাৎ স্টেট আপডেট করে, তাহলে পুরো প্রক্রিয়া আবার শুরু হবে! এই অপ্রয়োজনীয় রেন্ডার পাস এড়াতে, সব ডেটা কম্পোনেন্টের শীর্ষ স্তরে রূপান্তর করুন। আপনার প্রপস বা স্টেট পরিবর্তিত হলে এই কোড স্বয়ংক্রিয়ভাবে পুনরায় চলবে।
 
-You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components.
+* **ইউজার ইভেন্ট হ্যান্ডল করতে ইফেক্টের প্রয়োজন নেই।** উদাহরণস্বরূপ, আপনি চাইছেন যে ইউজার কোনো পণ্য কিনলে একটি `/api/buy` POST রিকোয়েস্ট পাঠানো হবে এবং একটি নোটিফিকেশন দেখানো হবে। Buy বোতামের ক্লিক ইভেন্ট হ্যান্ডলারে, আপনি জানেন কী ঘটেছে। ইফেক্ট চালানোর সময়, আপনি জানেন না *ঠিক কী* ইউজার করেছেন (যেমন, কোন বোতামটি ক্লিক হয়েছে)। এ কারণেই সাধারণত ইউজার ইভেন্টগুলো সংশ্লিষ্ট ইভেন্ট হ্যান্ডলারে হ্যান্ডল করা হয়।
 
-To help you gain the right intuition, let's look at some common concrete examples!
+আপনাকে বাহ্যিক সিস্টেমের সাথে [সিঙ্ক্রোনাইজ](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) করতে ইফেক্টের প্রয়োজন। উদাহরণস্বরূপ, আপনি একটি ইফেক্ট লিখে একটি jQuery উইজেটকে React স্টেটের সাথে সিঙ্ক্রোনাইজ রাখতে পারেন। এছাড়াও, ইফেক্ট ব্যবহার করে ডেটা ফেচ করা যায়: উদাহরণস্বরূপ, বর্তমান সার্চ কুয়েরির সাথে সার্চ রেজাল্টকে সিঙ্ক্রোনাইজ করতে পারেন। মনে রাখবেন, আধুনিক [ফ্রেমওয়ার্কগুলো](/learn/start-a-new-react-project#production-grade-react-frameworks) সরাসরি কম্পোনেন্টে ইফেক্ট লেখার চেয়ে আরও এফিশিয়েন্ট বিল্ট-ইন ডেটা ফেচিং পদ্ধতি প্রদান করে।
 
-### Updating state based on props or state {/*updating-state-based-on-props-or-state*/}
+সঠিক ধারণা গড়ে তুলতে, আসুন কিছু সাধারণ উদাহরণ দেখি!
 
-Suppose you have a component with two state variables: `firstName` and `lastName`. You want to calculate a `fullName` from them by concatenating them. Moreover, you'd like `fullName` to update whenever `firstName` or `lastName` change. Your first instinct might be to add a `fullName` state variable and update it in an Effect:
+### প্রপস বা স্টেটের উপর ভিত্তি করে স্টেট আপডেট করা {/*updating-state-based-on-props-or-state*/}
+
+ধরুন, আপনার একটি কম্পোনেন্টে দুটি স্টেট ভেরিয়েবল রয়েছে: `firstName` এবং `lastName`। আপনি এগুলো যোগ করে একটি `fullName` তৈরি করতে চান। এর পাশাপাশি, `firstName` বা `lastName` পরিবর্তিত হলে `fullName` আপডেট হওয়া উচিত। আপনার প্রথম ধারণা হতে পারে একটি `fullName` স্টেট ভেরিয়েবল যোগ করা এবং একটি ইফেক্টে এটি আপডেট করা:
 
 ```js {5-9}
 function Form() {
@@ -48,7 +49,7 @@ function Form() {
 }
 ```
 
-This is more complicated than necessary. It is inefficient too: it does an entire render pass with a stale value for `fullName`, then immediately re-renders with the updated value. Remove the state variable and the Effect:
+এটি প্রয়োজনের তুলনায় বেশি জটিল এবং অকার্যকর: এটি `fullName` এর পুরনো মান দিয়ে একটি সম্পূর্ণ রেন্ডার পাস করে, তারপর আপডেট হওয়া মান নিয়ে পুনরায় রেন্ডার করে। স্টেট ভেরিয়েবল এবং ইফেক্টটি সরিয়ে দিন:
 
 ```js {4-5}
 function Form() {
@@ -60,11 +61,11 @@ function Form() {
 }
 ```
 
-**When something can be calculated from the existing props or state, [don't put it in state.](/learn/choosing-the-state-structure#avoid-redundant-state) Instead, calculate it during rendering.** This makes your code faster (you avoid the extra "cascading" updates), simpler (you remove some code), and less error-prone (you avoid bugs caused by different state variables getting out of sync with each other). If this approach feels new to you, [Thinking in React](/learn/thinking-in-react#step-3-find-the-minimal-but-complete-representation-of-ui-state) explains what should go into state.
+**যখন কিছু বিদ্যমান প্রপস বা স্টেট থেকে ক্যাল্কুলেট করা যায়, তখন [স্টেটে এটি রাখবেন না.](/learn/choosing-the-state-structure#avoid-redundant-state) পরিবর্তে, এটি রেন্ডার করার সময় ক্যাল্কুলেট করুন।** এর ফলে আপনার কোড দ্রুততর হয় (আপনি অতিরিক্ত "ক্যাসকেডিং" আপডেট এড়িয়ে যান), সহজতর হয় (কিছু কোড অপসারণ করেন), এবং কম ত্রুটি প্রবণ হয় (ভিন্ন স্টেট ভেরিয়েবলের সাথে সিঙ্ক্রোনাইজেশন সমস্যা এড়ান)। যদি এই পদ্ধতি আপনার জন্য নতুন মনে হয়, তাহলে [Thinking in React](/learn/thinking-in-react#step-3-find-the-minimal-but-complete-representation-of-ui-state) ব্যাখ্যা করে কী কী স্টেটে থাকা উচিত।
 
-### Caching expensive calculations {/*caching-expensive-calculations*/}
+### ভারি ক্যাল্কুলেশনগুলি ক্যাশ করা {/*caching-expensive-calculations*/}
 
-This component computes `visibleTodos` by taking the `todos` it receives by props and filtering them according to the `filter` prop. You might feel tempted to store the result in state and update it from an Effect:
+এই কম্পোনেন্টটি `todos` প্রপস থেকে পাওয়া টাস্কগুলোকে নিয়ে `visibleTodos` গণনা করে এবং সেগুলোকে `filter` প্রপস অনুযায়ী ফিল্টার করে। আপনি মনে করতে পারেন যে ফলাফলটি স্টেটে সংরক্ষণ করা উচিত এবং একটি ইফেক্ট থেকে এটি আপডেট করা উচিত:
 
 ```js {4-8}
 function TodoList({ todos, filter }) {
@@ -80,7 +81,7 @@ function TodoList({ todos, filter }) {
 }
 ```
 
-Like in the earlier example, this is both unnecessary and inefficient. First, remove the state and the Effect:
+পূর্ববর্তী উদাহরণের মতো, এটি অপ্রয়োজনীয় এবং অকার্যকর। প্রথমে, স্টেট এবং ইফেক্টটি অপসারণ করুন:
 
 ```js {3-4}
 function TodoList({ todos, filter }) {
@@ -91,9 +92,9 @@ function TodoList({ todos, filter }) {
 }
 ```
 
-Usually, this code is fine! But maybe `getFilteredTodos()` is slow or you have a lot of `todos`. In that case you don't want to recalculate `getFilteredTodos()` if some unrelated state variable like `newTodo` has changed.
+সাধারণত, এই কোডটি ঠিক আছে! তবে হয়তো `getFilteredTodos()` ধীর গতির অথবা আপনার কাছে অনেক `todos` রয়েছে। এ ক্ষেত্রে, আপনি চান না যে কিছু অসম্পর্কিত স্টেট ভেরিয়েবল যেমন `newTodo` পরিবর্তিত হলে `getFilteredTodos()` পুনরায় গণনা করা হোক।
 
-You can cache (or ["memoize"](https://en.wikipedia.org/wiki/Memoization)) an expensive calculation by wrapping it in a [`useMemo`](/reference/react/useMemo) Hook:
+আপনি একটি ভারি ক্যাল্কুলেশন ক্যাশ (অথবা ["মেমোইজ"](https://en.wikipedia.org/wiki/Memoization)) করতে পারেন এটি [`useMemo`](/reference/react/useMemo) হুকের মধ্যে স্থাপন করে:
 
 ```js {5-8}
 import { useMemo, useState } from 'react';
@@ -108,7 +109,7 @@ function TodoList({ todos, filter }) {
 }
 ```
 
-Or, written as a single line:
+অথবা, এক লাইনে লেখা:
 
 ```js {5-6}
 import { useMemo, useState } from 'react';
@@ -121,15 +122,15 @@ function TodoList({ todos, filter }) {
 }
 ```
 
-**This tells React that you don't want the inner function to re-run unless either `todos` or `filter` have changed.** React will remember the return value of `getFilteredTodos()` during the initial render. During the next renders, it will check if `todos` or `filter` are different. If they're the same as last time, `useMemo` will return the last result it has stored. But if they are different, React will call the inner function again (and store its result).
+**এটি React-কে জানায় যে আপনি চান না যে অভ্যন্তরীণ ফাংশনটি পুনরায় চলুক যতক্ষণ না `todos` অথবা `filter` পরিবর্তিত হয়।** React প্রথম রেন্ডারের সময় `getFilteredTodos()` এর রিটার্ন ভ্যালু মনে রাখবে। পরবর্তী রেন্ডারগুলিতে, এটি চেক করবে যে `todos` অথবা `filter` ভিন্ন কিনা। যদি সেগুলো আগের মতো একই থাকে, তবে `useMemo` সর্বশেষ ফলাফলটি ফিরিয়ে দেবে যা এটি সংরক্ষণ করেছে। কিন্তু যদি সেগুলো ভিন্ন হয়, তবে React আবার অভ্যন্তরীণ ফাংশনটিকে কল করবে (এবং এর ফলাফল সংরক্ষণ করবে)।
 
-The function you wrap in [`useMemo`](/reference/react/useMemo) runs during rendering, so this only works for [pure calculations.](/learn/keeping-components-pure)
+যে ফাংশনটি আপনি [`useMemo`](/reference/react/useMemo) এর মধ্যে রাখেন তা রেন্ডার করার সময় চলে, তাই এটি শুধুমাত্র [শুদ্ধ ক্যাল্কুলেশনের জন্য](/learn/keeping-components-pure) কাজ করে।
 
 <DeepDive>
 
-#### How to tell if a calculation is expensive? {/*how-to-tell-if-a-calculation-is-expensive*/}
+#### কীভাবে জানা যাবে যে ক্যাল্কুলেশনটি ভারি কিনা? {/*how-to-tell-if-a-calculation-is-expensive*/}
 
-In general, unless you're creating or looping over thousands of objects, it's probably not expensive. If you want to get more confidence, you can add a console log to measure the time spent in a piece of code:
+সাধারণভাবে, যতক্ষন না আপনি হাজার হাজার অবজেক্ট তৈরি করছেন বা লুপ করছেন, এটি সম্ভবত ভারি নয়। যদি আপনি আরও নিশ্চিত হতে চান, তাহলে একটি কনসোল লগ যোগ করতে পারেন কোডের একটি অংশে সময় পরিমাপ করতে:
 
 ```js {1,3}
 console.time('filter array');
@@ -137,7 +138,7 @@ const visibleTodos = getFilteredTodos(todos, filter);
 console.timeEnd('filter array');
 ```
 
-Perform the interaction you're measuring (for example, typing into the input). You will then see logs like `filter array: 0.15ms` in your console. If the overall logged time adds up to a significant amount (say, `1ms` or more), it might make sense to memoize that calculation. As an experiment, you can then wrap the calculation in `useMemo` to verify whether the total logged time has decreased for that interaction or not:
+আপনার পরিমাপ করা ইন্টারঅ্যাকশনটি সম্পাদন করুন(যেমন, ইনপুটে টাইপ করা)। এরপর কনসোলে `filter array: 0.15ms` এর মতো লগ দেখতে পাবেন। যদি সামগ্রিক লগ করা সময় একটি গুরুত্বপূর্ণ পরিমাণে (যেমন, `1ms` বা তার বেশি) হয়, তাহলে সেই ক্যাল্কুলেশটি মেমোইজ করা অর্থপূর্ণ হতে পারে। পরীক্ষা হিসেবে, আপনি তারপর ক্যাল্কুলেশটি `useMemo` এর মধ্যে আবৃত করতে পারেন এবং যাচাই করতে পারেন যে সেই ইন্টারঅ্যাকশনের জন্য মোট লগ করা সময় কমেছে কিনা:
 
 ```js
 console.time('filter array');
@@ -146,18 +147,17 @@ const visibleTodos = useMemo(() => {
 }, [todos, filter]);
 console.timeEnd('filter array');
 ```
+`useMemo` *প্রথম* রেন্ডারটি দ্রুত করবে না। এটি শুধুমাত্র আপডেটে অপ্রয়োজনীয় কাজ এড়াতে সাহায্য করে।
 
-`useMemo` won't make the *first* render faster. It only helps you skip unnecessary work on updates.
-
-Keep in mind that your machine is probably faster than your users' so it's a good idea to test the performance with an artificial slowdown. For example, Chrome offers a [CPU Throttling](https://developer.chrome.com/blog/new-in-devtools-61/#throttling) option for this.
+মনে রাখবেন, আপনার মেশিন হয়তো আপনার ব্যবহারকারীদের তুলনায় দ্রুত, তাই পারফরম্যান্স পরীক্ষার জন্য কৃত্রিমভাবে ধীরগতিতে পরীক্ষা করা ভালো। উদাহরণস্বরূপ, Chrome এ একটি [CPU Throttling](https://developer.chrome.com/blog/new-in-devtools-61/#throttling) অপশন প্রদান করে।
 
-Also note that measuring performance in development will not give you the most accurate results. (For example, when [Strict Mode](/reference/react/StrictMode) is on, you will see each component render twice rather than once.) To get the most accurate timings, build your app for production and test it on a device like your users have.
+এছাড়াও মনে রাখবেন যে ডেভেলপমেন্টে পারফরম্যান্স পরিমাপ করা সবচেয়ে সঠিক ফলাফল দেবে না। (যেমন, [Strict Mode](/reference/react/StrictMode) চালু থাকলে আপনি প্রতিটি কম্পোনেন্টের রেন্ডার একবারের পরিবর্তে দুইবার দেখবেন।) সবচেয়ে সঠিক টাইমিং পেতে আপনার অ্যাপটি প্রোডাকশনের জন্য তৈরি করুন এবং এটি ব্যবহারকারীদের মতো ডিভাইসে পরীক্ষা করুন।
 
 </DeepDive>
 
-### Resetting all state when a prop changes {/*resetting-all-state-when-a-prop-changes*/}
+### প্রপ পরিবর্তিত হলে সমস্ত স্টেট রিসেট করা {/*resetting-all-state-when-a-prop-changes*/}
 
-This `ProfilePage` component receives a `userId` prop. The page contains a comment input, and you use a `comment` state variable to hold its value. One day, you notice a problem: when you navigate from one profile to another, the `comment` state does not get reset. As a result, it's easy to accidentally post a comment on a wrong user's profile. To fix the issue, you want to clear out the `comment` state variable whenever the `userId` changes:
+এই `ProfilePage` কম্পোনেন্ট একটি `userId` প্রপ গ্রহণ করে। পেজটিতে একটি মন্তব্য ইনপুট রয়েছে, এবং আপনি এর মান সংরক্ষণের জন্য একটি `comment` স্টেট ভেরিয়েবল ব্যবহার করেন। একদিন, আপনি একটি সমস্যা লক্ষ্য করেন: যখন আপনি এক প্রোফাইল থেকে অন্য প্রোফাইলে যান, `comment` স্টেটটি রিসেট হয় না। ফলে, ভুল করে অন্য ব্যবহারকারীর প্রোফাইলে মন্তব্য পোস্ট করা সহজ হয়ে যায়। এই সমস্যাটি সমাধান করতে, আপনি চান যে `userId` পরিবর্তিত হলে `comment` স্টেট ভেরিয়েবলটি পরিষ্কার হয়ে যাক।
 
 ```js {4-7}
 export default function ProfilePage({ userId }) {
@@ -171,9 +171,9 @@ export default function ProfilePage({ userId }) {
 }
 ```
 
-This is inefficient because `ProfilePage` and its children will first render with the stale value, and then render again. It is also complicated because you'd need to do this in *every* component that has some state inside `ProfilePage`. For example, if the comment UI is nested, you'd want to clear out nested comment state too.
+এটি অকার্যকর কারণ `ProfilePage` এবং এর চাইল্ডরা প্রথমে পুরনো মান দিয়ে রেন্ডার হবে, এবং তারপর আবার রেন্ডার হবে। এটি জটিলও কারণ আপনাকে `ProfilePage`-এর ভিতরে থাকা প্রতিটি কম্পোনেন্টের স্টেটেও একই কাজ করতে হবে। উদাহরণস্বরূপ, যদি মন্তব্যের UIটি নেস্টেড থাকে, তবে আপনাকে নেস্টেড মন্তব্যের স্টেটও পরিষ্কার করতে হবে।
 
-Instead, you can tell React that each user's profile is conceptually a _different_ profile by giving it an explicit key. Split your component in two and pass a `key` attribute from the outer component to the inner one:
+এর পরিবর্তে, আপনি React-কে জানাতে পারেন যে প্রতিটি ব্যবহারকারীর প্রোফাইল ধারণাগতভাবে একটি _ভিন্ন_ প্রোফাইল, `key` প্রদান করে। আপনার কম্পোনেন্টটি দুটি ভাগে ভাগ করুন এবং বাইরের কম্পোনেন্ট থেকে ভিতরের কম্পোনেন্টে একটি `key` অ্যাট্রিবিউট পাস করুন:
 
 ```js {5,11-12}
 export default function ProfilePage({ userId }) {
@@ -192,15 +192,15 @@ function Profile({ userId }) {
 }
 ```
 
-Normally, React preserves the state when the same component is rendered in the same spot. **By passing `userId` as a `key` to the `Profile` component, you're asking React to treat two `Profile` components with different `userId` as two different components that should not share any state.** Whenever the key (which you've set to `userId`) changes, React will recreate the DOM and [reset the state](/learn/preserving-and-resetting-state#option-2-resetting-state-with-a-key) of the `Profile` component and all of its children. Now the `comment` field will clear out automatically when navigating between profiles.
+সাধারণত, একই স্থানে একই কম্পোনেন্ট রেন্ডার হলে React স্টেট সংরক্ষণ করে। **`Profile` কম্পোনেন্টে `userId`-কে `key` হিসেবে পাস করলে, আপনি React-কে বলছেন যে বিভিন্ন `userId` সহ দুটি `Profile` কম্পোনেন্টকে আলাদা কম্পোনেন্ট হিসেবে বিবেচনা করতে, যেগুলোর স্টেট শেয়ার হওয়া উচিত নয়।** যখনই `key` (যেটি আপনি `userId` হিসেবে সেট করেছেন) পরিবর্তিত হয়, React `Profile` কম্পোনেন্ট এবং এর সব চাইল্ডের DOM পুনরায় তৈরি করবে এবং [স্টেট রিসেট করবে](/learn/preserving-and-resetting-state#option-2-resetting-state-with-a-key)। এখন প্রোফাইলের মধ্যে নেভিগেট করার সময় `comment` ফিল্ড স্বয়ংক্রিয়ভাবে সাফ হয়ে যাবে।
 
-Note that in this example, only the outer `ProfilePage` component is exported and visible to other files in the project. Components rendering `ProfilePage` don't need to pass the key to it: they pass `userId` as a regular prop. The fact `ProfilePage` passes it as a `key` to the inner `Profile` component is an implementation detail.
+এই উদাহরণে, শুধুমাত্র বাইরের `ProfilePage` কম্পোনেন্টটি প্রোজেক্টের অন্যান্য ফাইলের জন্য এক্সপোর্ট করা হয়েছে এবং দৃশ্যমান। `ProfilePage`-কে রেন্ডার করা কম্পোনেন্টগুলোর `key` পাস করার দরকার নেই: তারা `userId`-কে একটি সাধারণ প্রপ হিসেবে পাস করে। `ProfilePage` এটিকে `key` হিসেবে ভিতরের `Profile` কম্পোনেন্টে পাস করে, যা একটি ইমপ্লিমেন্টেশন ডিটেইল।
 
-### Adjusting some state when a prop changes {/*adjusting-some-state-when-a-prop-changes*/}
+### প্রপ পরিবর্তিত হলে কিছু স্টেট সামঞ্জস্য করা {/*adjusting-some-state-when-a-prop-changes*/}
 
-Sometimes, you might want to reset or adjust a part of the state on a prop change, but not all of it.
+কখনও কখনও, প্রপ পরিবর্তিত হলে আপনি স্টেটের একটি অংশ রিসেট বা সামঞ্জস্য করতে চাইতে পারেন, তবে পুরোটা নয়।
 
-This `List` component receives a list of `items` as a prop, and maintains the selected item in the `selection` state variable. You want to reset the `selection` to `null` whenever the `items` prop receives a different array:
+এই `List` কম্পোনেন্টটি একটি `items` এর তালিকা প্রপ হিসেবে গ্রহণ করে এবং নির্বাচিত আইটেমটি `selection` স্টেট ভেরিয়েবলে রাখে। আপনি চান যখনই `items` প্রপ একটি ভিন্ন অ্যারে গ্রহণ করবে, `selection` কে `null` এ রিসেট করতে:
 
 ```js {5-8}
 function List({ items }) {
@@ -215,9 +215,9 @@ function List({ items }) {
 }
 ```
 
-This, too, is not ideal. Every time the `items` change, the `List` and its child components will render with a stale `selection` value at first. Then React will update the DOM and run the Effects. Finally, the `setSelection(null)` call will cause another re-render of the `List` and its child components, restarting this whole process again.
+এটিও আদর্শ নয়। প্রতি বার `items` পরিবর্তিত হলে, প্রথমে `List` এবং এর চাইল্ড কম্পোনেন্টগুলো পুরনো `selection` মান নিয়ে রেন্ডার হবে। তারপর React DOM আপডেট করবে এবং Effects চালাবে। শেষে `setSelection(null)` কলটি `List` এবং এর চাইল্ড কম্পোনেন্টগুলোকে পুনরায় রেন্ডার করবে, যা পুরো প্রক্রিয়াটি আবার শুরু করবে।
 
-Start by deleting the Effect. Instead, adjust the state directly during rendering:
+Effect মুছে ফেলার মাধ্যমে শুরু করুন। এর পরিবর্তে, সরাসরি রেন্ডারিংয়ের সময় স্টেটটি সামঞ্জস্য করুন।
 
 ```js {5-11}
 function List({ items }) {
@@ -234,11 +234,11 @@ function List({ items }) {
 }
 ```
 
-[Storing information from previous renders](/reference/react/useState#storing-information-from-previous-renders) like this can be hard to understand, but it’s better than updating the same state in an Effect. In the above example, `setSelection` is called directly during a render. React will re-render the `List` *immediately* after it exits with a `return` statement. React has not rendered the `List` children or updated the DOM yet, so this lets the `List` children skip rendering the stale `selection` value.
+[আগের রেন্ডার থেকে তথ্য সংরক্ষণ করা](/reference/react/useState#storing-information-from-previous-renders) এভাবে বোঝা কঠিন হতে পারে, কিন্তু এটি একই স্টেটকে একটি Effect-এ আপডেট করার চেয়ে ভালো। উপরোক্ত উদাহরণে, `setSelection` সরাসরি রেন্ডার চলাকালীন কল করা হয়েছে। React `return` স্টেটমেন্টের পরে `List`-কে *তাৎক্ষণিকভাবে* পুনরায় রেন্ডার করবে। React এখনও `List`-এর চাইল্ডদের রেন্ডার করেনি বা DOM আপডেট করেনি, তাই এটি `List`-এর চাইল্ডদের পুরনো `selection` মান রেন্ডার করা এড়াতে সাহায্য করে।
 
-When you update a component during rendering, React throws away the returned JSX and immediately retries rendering. To avoid very slow cascading retries, React only lets you update the *same* component's state during a render. If you update another component's state during a render, you'll see an error. A condition like `items !== prevItems` is necessary to avoid loops. You may adjust state like this, but any other side effects (like changing the DOM or setting timeouts) should stay in event handlers or Effects to [keep components pure.](/learn/keeping-components-pure)
+যখন আপনি একটি রেন্ডারের সময় কম্পোনেন্ট আপডেট করেন, React রিটার্ন করা JSX ফেলে দেয় এবং তাৎক্ষণিকভাবে পুনরায় রেন্ডার করার চেষ্টা করে। খুব ধীর গতির পুনরাবৃত্তি এড়াতে, React কেবল রেন্ডারের সময় *একই* কম্পোনেন্টের স্টেট আপডেট করার অনুমতি দেয়। যদি আপনি রেন্ডারের সময় অন্য কোনো কম্পোনেন্টের স্টেট আপডেট করেন, তাহলে একটি ত্রুটি দেখতে পাবেন। একটি শর্ত যেমন `items !== prevItems` লুপ এড়ানোর জন্য প্রয়োজনীয়। আপনি এভাবে স্টেট সামঞ্জস্য করতে পারেন, তবে DOM পরিবর্তন করা বা টাইমআউট সেট করার মতো যেকোনো সাইড ইফেক্ট ইভেন্ট হ্যান্ডলার বা Effect-এ থাকা উচিত [কম্পোনেন্টকে পিওর রাখার জন্য।](/learn/keeping-components-pure)
 
-**Although this pattern is more efficient than an Effect, most components shouldn't need it either.** No matter how you do it, adjusting state based on props or other state makes your data flow more difficult to understand and debug. Always check whether you can [reset all state with a key](#resetting-all-state-when-a-prop-changes) or [calculate everything during rendering](#updating-state-based-on-props-or-state) instead. For example, instead of storing (and resetting) the selected *item*, you can store the selected *item ID:*
+**যদিও এই প্যাটার্নটি একটি Effect-এর চেয়ে আরও কার্যকর, বেশিরভাগ কম্পোনেন্টের এটিও প্রয়োজন হয় না।** যেভাবেই করুন না কেন, প্রপ বা অন্য কোনো স্টেটের ভিত্তিতে স্টেট সামঞ্জস্য করা আপনার ডেটা ফ্লো বুঝতে এবং ডিবাগ করতে আরও কঠিন করে তোলে। সর্বদা পরীক্ষা করুন যে আপনি [একটি key দিয়ে সমস্ত স্টেট রিসেট করতে পারেন কি না](#resetting-all-state-when-a-prop-changes) বা [রেন্ডারিংয়ের সময় সবকিছু গণনা করতে পারেন কি না](#updating-state-based-on-props-or-state)। উদাহরণস্বরূপ, নির্বাচিত *item* সংরক্ষণ এবং রিসেট করার পরিবর্তে আপনি নির্বাচিত *item ID* সংরক্ষণ করতে পারেন:
 
 ```js {3-5}
 function List({ items }) {
@@ -250,11 +250,11 @@ function List({ items }) {
 }
 ```
 
-Now there is no need to "adjust" the state at all. If the item with the selected ID is in the list, it remains selected. If it's not, the `selection` calculated during rendering will be `null` because no matching item was found. This behavior is different, but arguably better because most changes to `items` preserve the selection.
+এখন স্টেট "সামঞ্জস্য" করার প্রয়োজন নেই। নির্বাচিত ID সহ আইটেমটি তালিকায় থাকলে, এটি নির্বাচিত থাকবে। যদি এটি না থাকে, তবে রেন্ডারিংয়ের সময় গণনা করা `selection` হবে `null` কারণ কোনো মেলানো আইটেম পাওয়া যায়নি। এই আচরণটি ভিন্ন, কিন্তু এটি যুক্তিসঙ্গতভাবে ভালো, কারণ `items` এর বেশিরভাগ পরিবর্তন সিলেকশকে সংরক্ষণ করে।
 
-### Sharing logic between event handlers {/*sharing-logic-between-event-handlers*/}
+### ইভেন্ট হ্যান্ডলারগুলির মধ্যে লজিক শেয়ার করা {/*sharing-logic-between-event-handlers*/}
 
-Let's say you have a product page with two buttons (Buy and Checkout) that both let you buy that product. You want to show a notification whenever the user puts the product in the cart. Calling `showNotification()` in both buttons' click handlers feels repetitive so you might be tempted to place this logic in an Effect:
+ধরি, আপনার একটি পণ্য পৃষ্ঠা আছে যার দুইটি বোতাম (Buy এবং Checkout) আছে, যেগুলো উভয়েই সেই পণ্যটি কেনার সুযোগ দেয়। আপনি চান যে ব্যবহারকারী পণ্যটি কার্টে রাখলেই একটি নোটিফিকেশন দেখানো হোক। উভয় বোতামের ক্লিক হ্যান্ডলারগুলিতে `showNotification()` কল করা পুনরাবৃত্তির মতো মনে হতে পারে, তাই আপনি এই লজিকটি একটি Effect-এ রাখতে লোভিত হতে পারেন:
 
 ```js {2-7}
 function ProductPage({ product, addToCart }) {
@@ -277,9 +277,9 @@ function ProductPage({ product, addToCart }) {
 }
 ```
 
-This Effect is unnecessary. It will also most likely cause bugs. For example, let's say that your app "remembers" the shopping cart between the page reloads. If you add a product to the cart once and refresh the page, the notification will appear again. It will keep appearing every time you refresh that product's page. This is because `product.isInCart` will already be `true` on the page load, so the Effect above will call `showNotification()`.
+এই Effect অপ্রয়োজনীয়। এটি সম্ভবত বাগও সৃষ্টি করবে। উদাহরণস্বরূপ, ধরুন আপনার অ্যাপটি পৃষ্ঠা রিফ্রেশের মধ্যে শপিং কার্টটি "মনে রাখে"। যদি আপনি একবার একটি পণ্য কার্টে যোগ করেন এবং পৃষ্ঠা রিফ্রেশ করেন, তবে নোটিফিকেশন আবারও দেখা যাবে। এই পণ্যটির পৃষ্ঠাটি রিফ্রেশ করার সময় এটি প্রতিবার দেখা যাবে। এর কারণ হল `product.isInCart` পৃষ্ঠা লোডের সময় ইতিমধ্যেই `true` থাকবে, তাই উপরে উল্লেখিত Effect `showNotification()` কল করবে।
 
-**When you're not sure whether some code should be in an Effect or in an event handler, ask yourself *why* this code needs to run. Use Effects only for code that should run *because* the component was displayed to the user.** In this example, the notification should appear because the user *pressed the button*, not because the page was displayed! Delete the Effect and put the shared logic into a function called from both event handlers:
+**যখন আপনি নিশ্চিত না হন যে কোন কোডটি Effect-এ থাকা উচিত বা ইভেন্ট হ্যান্ডলারে, তখন নিজেকে জিজ্ঞাসা করুন *কেন* এই কোডটি চলতে হবে। শুধু সেই কোডের জন্য Effects ব্যবহার করুন যা *ব্যবহারকারীর জন্য* কম্পোনেন্টটি প্রদর্শিত হওয়ার কারণে চলতে হবে।** এই উদাহরণে, নোটিফিকেশনটি ব্যবহারকারী *বোতামটি চাপার* কারণে প্রদর্শিত হওয়া উচিত, পৃষ্ঠা প্রদর্শিত হওয়ার কারণে নয়! Effect টি মুছে ফেলুন এবং উভয় ইভেন্ট হ্যান্ডলারে কল করার জন্য একটি ফাংশনে শেয়ার করা লজিকটি রাখুন:
 
 ```js {2-6,9,13}
 function ProductPage({ product, addToCart }) {
@@ -301,11 +301,11 @@ function ProductPage({ product, addToCart }) {
 }
 ```
 
-This both removes the unnecessary Effect and fixes the bug.
+এটি অপ্রয়োজনীয় Effect টি মুছে ফেলে এবং বাগটিও ঠিক করে।
 
-### Sending a POST request {/*sending-a-post-request*/}
+### পোস্ট রিকোয়েস্ট পাঠানো {/*sending-a-post-request*/}
 
-This `Form` component sends two kinds of POST requests. It sends an analytics event when it mounts. When you fill in the form and click the Submit button, it will send a POST request to the `/api/register` endpoint:
+এই `Form` কম্পোনেন্টটি দুটি ধরনের POST অনুরোধ পাঠায়। এটি মাউন্ট হওয়ার সময় একটি অ্যানালিটিক্স ইভেন্ট পাঠায়। ফর্মটি পূরণ করে যখন আপনি সাবমিট বোতামটি ক্লিক করেন, এটি `/api/register` এন্ডপয়েন্টে একটি POST অনুরোধ পাঠাবে:
 
 ```js {5-8,10-16}
 function Form() {
@@ -333,11 +333,11 @@ function Form() {
 }
 ```
 
-Let's apply the same criteria as in the example before.
+আগের উদাহরণের মতো একই মানদণ্ড এখানে প্রয়োগ করা যাক।
 
-The analytics POST request should remain in an Effect. This is because the _reason_ to send the analytics event is that the form was displayed. (It would fire twice in development, but [see here](/learn/synchronizing-with-effects#sending-analytics) for how to deal with that.)
+অ্যানালিটিক্স POST অনুরোধটি Effect এ থাকা উচিত। এর কারণ হলো অ্যানালিটিক্স ইভেন্টটি পাঠানোর উদ্দেশ্য হল ফর্মটি প্রদর্শিত হয়েছে। (এটি ডেভেলপমেন্টে দুইবার চলবে, তবে কীভাবে এটি সামলাতে হয়, তা জানতে [এখানে দেখুন](/learn/synchronizing-with-effects#sending-analytics)।)
 
-However, the `/api/register` POST request is not caused by the form being _displayed_. You only want to send the request at one specific moment in time: when the user presses the button. It should only ever happen _on that particular interaction_. Delete the second Effect and move that POST request into the event handler:
+তবে, `/api/register` POST অনুরোধটি ফর্মটি _প্রদর্শিত_ হওয়ার কারণে হয় না। আপনি এটি শুধুমাত্র একটি নির্দিষ্ট মুহূর্তে পাঠাতে চান: যখন ব্যবহারকারী বোতামটি চাপেন। এটি শুধু _সেই নির্দিষ্ট ইন্টারঅ্যাকশনে_ ঘটবে। দ্বিতীয় Effect টি মুছে ফেলুন এবং সেই POST অনুরোধটি ইভেন্ট হ্যান্ডলারে সরিয়ে নিন।
 
 ```js {12-13}
 function Form() {
@@ -358,11 +358,11 @@ function Form() {
 }
 ```
 
-When you choose whether to put some logic into an event handler or an Effect, the main question you need to answer is _what kind of logic_ it is from the user's perspective. If this logic is caused by a particular interaction, keep it in the event handler. If it's caused by the user _seeing_ the component on the screen, keep it in the Effect.
+কোনো লজিক ইভেন্ট হ্যান্ডলার বা Effect-এ রাখবেন কি না তা নির্ধারণ করার সময় প্রধান প্রশ্নটি হলো এটি ব্যবহারকারীর দৃষ্টিকোণ থেকে _কিসের লজিক_। যদি এই লজিকটি নির্দিষ্ট একটি ইন্টারঅ্যাকশনের কারণে হয়, তাহলে এটি ইভেন্ট হ্যান্ডলারে রাখুন। আর যদি এটি ব্যবহারকারী কম্পোনেন্টটি স্ক্রিনে _দেখার_ কারণে হয়, তাহলে এটি Effect-এ রাখুন।
 
-### Chains of computations {/*chains-of-computations*/}
+### গাণিতিক ক্রম {/*chains-of-computations*/}
 
-Sometimes you might feel tempted to chain Effects that each adjust a piece of state based on other state:
+কখনো কখনো আপনি একাধিক Effect ব্যবহার করতে প্রলুব্ধ হতে পারেন, যেখানে প্রতিটি Effect অন্য কোনো state এর উপর ভিত্তি করে একটি state সামঞ্জস্য করে:
 
 ```js {7-29}
 function Game() {
@@ -406,13 +406,13 @@ function Game() {
   // ...
 ```
 
-There are two problems with this code.
+এই কোডে দুটি সমস্যা রয়েছে।
 
-One problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below.
+প্রথম সমস্যা হলো এটি খুবই অকার্যকর; প্রতিটি `set` কলের মধ্যে কম্পোনেন্ট (এবং এর চাইল্ড কম্পোনেন্টগুলো) পুনরায় রেন্ডার হতে থাকে। উপরের উদাহরণে, সবচেয়ে খারাপ ক্ষেত্রে (`setCard` → রেন্ডার → `setGoldCardCount` → রেন্ডার → `setRound` → রেন্ডার → `setIsGameOver` → রেন্ডার) এই চেইনটি তিনবার অপ্রয়োজনীয়ভাবে পুনরায় রেন্ডার করে নিচের ট্রীটি।
 
-Even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile.
+এটি ধীর না হলেও, কোডটি যখন পরিবর্তিত হয়, তখন আপনি এমন পরিস্থিতিতে পড়বেন যেখানে এই "চেইন"টি নতুন চাহিদার সাথে সামঞ্জস্যপূর্ণ নয়। কল্পনা করুন আপনি গেমের মুভের ইতিহাসের মধ্য দিয়ে পর্যায়ক্রমে এগিয়ে যাওয়ার একটি উপায় যোগ করছেন। আপনি এটি প্রতিটি state ভেরিয়েবলকে অতীতের মানে আপডেট করে করবেন। তবে, অতীতের মানে `card` state সেট করলে Effect চেইনটি পুনরায় চালু হবে এবং আপনার প্রদর্শিত ডেটা পরিবর্তিত হবে। এ ধরনের কোড প্রায়শই কঠোর এবং ভঙ্গুর হয়।
 
-In this case, it's better to calculate what you can during rendering, and adjust the state in the event handler:
+এই ক্ষেত্রে, রেন্ডারিংয়ের সময় যা সম্ভব তা গণনা করাই ভালো এবং event handler এর মধ্যে state সামঞ্জস্য করা উচিত।
 
 ```js {6-7,14-26}
 function Game() {
@@ -446,17 +446,17 @@ function Game() {
   // ...
 ```
 
-This is a lot more efficient. Also, if you implement a way to view game history, now you will be able to set each state variable to a move from the past without triggering the Effect chain that adjusts every other value. If you need to reuse logic between several event handlers, you can [extract a function](#sharing-logic-between-event-handlers) and call it from those handlers.
+এটি অনেক বেশি কার্যকর। এছাড়াও, যদি আপনি গেমের ইতিহাস দেখার একটি উপায় বাস্তবায়ন করেন, তাহলে এখন আপনি প্রতিটি state ভেরিয়েবলকে অতীতের কোনো মুভে সেট করতে পারবেন এবং প্রতিটি মান পরিবর্তনের জন্য Trigger হওয়া Effect চেইনটি এড়াতে পারবেন। যদি একাধিক event handler-এ লজিক পুনঃব্যবহার করতে হয়, তাহলে আপনি একটি ফাংশন [প্রত্যাহার করে](#sharing-logic-between-event-handlers) সেই handler থেকে কল করতে পারেন।
 
-Remember that inside event handlers, [state behaves like a snapshot.](/learn/state-as-a-snapshot) For example, even after you call `setRound(round + 1)`, the `round` variable will reflect the value at the time the user clicked the button. If you need to use the next value for calculations, define it manually like `const nextRound = round + 1`.
+মনে রাখবেন যে event handler-এর মধ্যে, [state একটি snapshot-এর মতো আচরণ করে।](/learn/state-as-a-snapshot) উদাহরণস্বরূপ, `setRound(round + 1)` কল করার পরেও, `round` ভেরিয়েবলটি সেই মানকে প্রতিফলিত করবে যখন ব্যবহারকারী বোতামটি ক্লিক করেছিলেন। যদি গণনার জন্য পরবর্তী মানের প্রয়োজন হয়, তাহলে এটি ম্যানুয়ালি সংজ্ঞায়িত করুন যেমন `const nextRound = round + 1`।
 
-In some cases, you *can't* calculate the next state directly in the event handler. For example, imagine a form with multiple dropdowns where the options of the next dropdown depend on the selected value of the previous dropdown. Then, a chain of Effects is appropriate because you are synchronizing with network.
+কিছু ক্ষেত্রে, event handler-এ সরাসরি পরবর্তী state গণনা করা সম্ভব নয়। উদাহরণস্বরূপ, একটি ফর্মের কথা কল্পনা করুন যেখানে একাধিক dropdown রয়েছে এবং পরবর্তী dropdown-এর অপশন আগের dropdown-এর নির্বাচিত মানের উপর নির্ভর করে। তখন, Effects-এর একটি চেইন উপযুক্ত, কারণ আপনি নেটওয়ার্কের সাথে সিঙ্ক্রোনাইজ করছেন।
 
-### Initializing the application {/*initializing-the-application*/}
+### এপ্লিকেশন ইনিশিয়েলাইজ করা {/*initializing-the-application*/}
 
-Some logic should only run once when the app loads.
+আপনি হয়তো চাইবেন যে কিছু লজিক শুধুমাত্র অ্যাপটি লোড হলে একবারই রান হোক।
 
-You might be tempted to place it in an Effect in the top-level component:
+আপনি এই কোডটি অ্যাপের শীর্ষ স্তরের কম্পোনেন্টে একটি ইফেক্টে রাখার কথা ভাবতে পারেন।
 
 ```js {2-6}
 function App() {
@@ -469,9 +469,9 @@ function App() {
 }
 ```
 
-However, you'll quickly discover that it [runs twice in development.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development) This can cause issues--for example, maybe it invalidates the authentication token because the function wasn't designed to be called twice. In general, your components should be resilient to being remounted. This includes your top-level `App` component.
+তবে, আপনি দ্রুত বুঝতে পারবেন যে এটি [ডেভেলপমেন্টে দুবার রান করে ](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development)। এটি সমস্যার সৃষ্টি করতে পারে—যেমন, হয়তো এটি অথেনটিকেশন টোকেনকে অবৈধ করে ফেলছে কারণ ফাংশনটি দুবার কল করার জন্য ডিজাইন করা হয়নি। সাধারণভাবে, আপনার কম্পোনেন্টগুলো পুনরায় মাউন্ট হতে প্রতিরোধী হওয়া উচিত। এর মধ্যে আপনার শীর্ষ স্তরের `App` কম্পোনেন্টও অন্তর্ভুক্ত।
 
-Although it may not ever get remounted in practice in production, following the same constraints in all components makes it easier to move and reuse code. If some logic must run *once per app load* rather than *once per component mount*, add a top-level variable to track whether it has already executed:
+যদিও প্রোডাকশনে এটি পুনরায় মাউন্ট না-ও হতে পারে, সব কম্পোনেন্টে একই নিয়ম অনুসরণ করলে কোড সরানো এবং পুনঃব্যবহার করা সহজ হয়। যদি কোনো লজিক *অ্যাপ লোড প্রতি একবার* রান করতেই হয় এবং *কম্পোনেন্ট মাউন্ট প্রতি একবার* নয়, তাহলে ট্র্যাক করার জন্য একটি শীর্ষ স্তরের ভেরিয়েবল যোগ করুন যে এটি ইতোমধ্যেই একবার রান হয়েছে কি না।
 
 ```js {1,5-6,10}
 let didInit = false;
@@ -489,7 +489,7 @@ function App() {
 }
 ```
 
-You can also run it during module initialization and before the app renders:
+আপনি এটি মডিউল ইনিশিয়ালাইজেশনের সময় এবং অ্যাপ রেন্ডার হওয়ার আগে চালাতে পারেন:
 
 ```js {1,5}
 if (typeof window !== 'undefined') { // Check if we're running in the browser.
@@ -503,11 +503,11 @@ function App() {
 }
 ```
 
-Code at the top level runs once when your component is imported--even if it doesn't end up being rendered. To avoid slowdown or surprising behavior when importing arbitrary components, don't overuse this pattern. Keep app-wide initialization logic to root component modules like `App.js` or in your application's entry point.
+শীর্ষ স্তরের কোড একবার রান করে যখন আপনার কম্পোনেন্টটি আমদানি করা হয়—যদিও এটি রেন্ডার না-ও হতে পারে। বিভিন্ন কম্পোনেন্ট আমদানি করার সময় ধীরগতির বা বিস্ময়কর আচরণ এড়াতে, এই প্যাটার্নটি অতিরিক্ত ব্যবহার করবেন না। অ্যাপের সার্বজনীন ইনিশিয়ালাইজেশন লজিককে `App.js` এর মতো রুট কম্পোনেন্ট মডিউলগুলোতে বা আপনার অ্যাপ্লিকেশনের এন্ট্রি পয়েন্টে রাখুন।
 
-### Notifying parent components about state changes {/*notifying-parent-components-about-state-changes*/}
+### প্যারেন্ট কম্পোনেন্টগুলোকে স্টেট পরিবর্তন সম্পর্কে জানানো {/*notifying-parent-components-about-state-changes*/}
 
-Let's say you're writing a `Toggle` component with an internal `isOn` state which can be either `true` or `false`. There are a few different ways to toggle it (by clicking or dragging). You want to notify the parent component whenever the `Toggle` internal state changes, so you expose an `onChange` event and call it from an Effect:
+ধরি, আপনি একটি `Toggle` কম্পোনেন্ট লিখছেন যার একটি অভ্যন্তরীণ `isOn` স্টেট আছে যা `true` বা `false` হতে পারে। এটি টগল করার জন্য কিছু ভিন্ন উপায় আছে (ক্লিক করে বা ড্র্যাগ করে)। আপনি চান যে যখনই `Toggle` এর অভ্যন্তরীণ স্টেট পরিবর্তিত হয়, প্যারেন্ট কম্পোনেন্টকে জানানো হোক, তাই আপনি একটি `onChange` ইভেন্ট প্রকাশ করেন এবং একটি ইফেক্ট থেকে এটি কল করেন:
 
 ```js {4-7}
 function Toggle({ onChange }) {
@@ -534,9 +534,9 @@ function Toggle({ onChange }) {
 }
 ```
 
-Like earlier, this is not ideal. The `Toggle` updates its state first, and React updates the screen. Then React runs the Effect, which calls the `onChange` function passed from a parent component. Now the parent component will update its own state, starting another render pass. It would be better to do everything in a single pass.
+যেমন আগে বলা হয়েছিল, এটি আদর্শ নয়। `Toggle` প্রথমে তার স্টেট আপডেট করে, এবং তারপর React স্ক্রীনটি আপডেট করে। এর পরে React ইফেক্টটি রান করে, যা প্যারেন্ট কম্পোনেন্ট থেকে প্রাপ্ত `onChange` ফাংশনটি কল করে। এখন প্যারেন্ট কম্পোনেন্ট তার নিজের স্টেট আপডেট করবে, যা একটি নতুন রেন্ডার পাস শুরু করবে। সবকিছু একক পাসে করা আরও ভালো হবে।
 
-Delete the Effect and instead update the state of *both* components within the same event handler:
+ইফেক্টটি মুছে দিন এবং পরিবর্তে একই ইভেন্ট হ্যান্ডলারের মধ্যে *দুইটি* কম্পোনেন্টের স্টেট আপডেট করুন:
 
 ```js {5-7,11,16,18}
 function Toggle({ onChange }) {
@@ -564,9 +564,9 @@ function Toggle({ onChange }) {
 }
 ```
 
-With this approach, both the `Toggle` component and its parent component update their state during the event. React [batches updates](/learn/queueing-a-series-of-state-updates) from different components together, so there will only be one render pass.
+এই পদ্ধতির মাধ্যমে, `Toggle` কম্পোনেন্ট এবং এর প্যারেন্ট কম্পোনেন্ট উভয়ই ইভেন্টের সময় তাদের স্টেট আপডেট করে। React বিভিন্ন কম্পোনেন্ট থেকে [ব্যাচ আপডেট](/learn/queueing-a-series-of-state-updates) করে, তাই শুধুমাত্র একটি রেন্ডার পাস হবে।
 
-You might also be able to remove the state altogether, and instead receive `isOn` from the parent component:
+আপনি সম্ভবত সম্পূর্ণ স্টেটটি মুছেও দিতে পারেন, এবং পরিবর্তে প্যারেন্ট কম্পোনেন্ট থেকে `isOn` গ্রহণ করতে পারেন:
 
 ```js {1,2}
 // ✅ Also good: the component is fully controlled by its parent
@@ -587,11 +587,11 @@ function Toggle({ isOn, onChange }) {
 }
 ```
 
-["Lifting state up"](/learn/sharing-state-between-components) lets the parent component fully control the `Toggle` by toggling the parent's own state. This means the parent component will have to contain more logic, but there will be less state overall to worry about. Whenever you try to keep two different state variables synchronized, try lifting state up instead!
+["স্টেট উপরে তোলা"](/learn/sharing-state-between-components) প্যারেন্ট কম্পোনেন্টকে সম্পূর্ণরূপে `Toggle` নিয়ন্ত্রণ করার সুযোগ দেয় প্যারেন্টের নিজস্ব স্টেট টগল করে। এর মানে হলো প্যারেন্ট কম্পোনেন্টে আরও বেশি লজিক থাকতে হবে, তবে মোট স্টেট কম থাকবে যা নিয়ে চিন্তা করতে হবে। যখনই আপনি দুটি ভিন্ন স্টেট ভেরিয়েবলকে সমন্বয় করতে চেষ্টা করেন, তখন স্টেট উপরে তোলার চেষ্টা করুন!
 
-### Passing data to the parent {/*passing-data-to-the-parent*/}
+### পেরন্ট এ ডাটা পাস করা {/*passing-data-to-the-parent*/}
 
-This `Child` component fetches some data and then passes it to the `Parent` component in an Effect:
+এই `Child` কম্পোনেন্ট কিছু ডেটা Fetch করে এবং তারপর এটি একটি ইফেক্টের মাধ্যমে `Parent` কম্পোনেন্টে পাঠায়:
 
 ```js {9-14}
 function Parent() {
@@ -612,7 +612,7 @@ function Child({ onFetched }) {
 }
 ```
 
-In React, data flows from the parent components to their children. When you see something wrong on the screen, you can trace where the information comes from by going up the component chain until you find which component passes the wrong prop or has the wrong state. When child components update the state of their parent components in Effects, the data flow becomes very difficult to trace. Since both the child and the parent need the same data, let the parent component fetch that data, and *pass it down* to the child instead:
+React-এ, ডেটা প্যারেন্ট কম্পোনেন্ট থেকে তাদের সন্তানের দিকে প্রবাহিত হয়। যখন আপনি স্ক্রীনে কিছু ভুল দেখতে পান, আপনি কোন তথ্য কোথা থেকে এসেছে তা খুঁজে বের করার জন্য কম্পোনেন্ট চেইন উপরে উঠতে পারেন যতক্ষণ না আপনি খুঁজে পান কোন কম্পোনেন্টটি ভুল প্রপ্স পাস করছে বা ভুল স্টেট আছে। যখন সন্তানের কম্পোনেন্টগুলো তাদের প্যারেন্ট কম্পোনেন্টের স্টেট ইফেক্টে আপডেট করে, তখন ডেটার প্রবাহ অনুসরণ করা খুব কঠিন হয়ে পড়ে। যেহেতু সন্তানের এবং প্যারেন্টের উভয়েরই একই ডেটার প্রয়োজন, তাই প্যারেন্ট কম্পোনেন্টকে সেই ডেটা Fetch করতে দিন এবং *সন্তানের কাছে* পাস করুন:
 
 ```js {4-5}
 function Parent() {
@@ -627,11 +627,11 @@ function Child({ data }) {
 }
 ```
 
-This is simpler and keeps the data flow predictable: the data flows down from the parent to the child.
+এটি সহজ এবং ডেটার প্রবাহকে পূর্বানুমানযোগ্য রাখে: ডেটা প্যারেন্ট থেকে সন্তানের দিকে প্রবাহিত হয়।
 
-### Subscribing to an external store {/*subscribing-to-an-external-store*/}
+### এক্সটার্নাল স্টোরের জন্য সাবস্ক্রাইব করা {/*subscribing-to-an-external-store*/}
 
-Sometimes, your components may need to subscribe to some data outside of the React state. This data could be from a third-party library or a built-in browser API. Since this data can change without React's knowledge, you need to manually subscribe your components to it. This is often done with an Effect, for example:
+কখনও কখনও, আপনার কম্পোনেন্টগুলোকে React স্টেটের বাইরের কিছু ডেটার জন্য সাবস্ক্রাইব করতে হতে পারে। এই ডেটা একটি তৃতীয়-পক্ষ লাইব্রেরি বা একটি বিল্ট-ইন ব্রাউজার API থেকে আসতে পারে। যেহেতু এই ডেটা React এর জ্ঞানের বাইরে পরিবর্তিত হতে পারে, তাই আপনাকে হাতে হাতে আপনার কম্পোনেন্টগুলোকে এর সাথে সাবস্ক্রাইব করতে হবে। এটি প্রায়ই একটি ইফেক্টের মাধ্যমে করা হয়, উদাহরণস্বরূপ:
 
 ```js {2-17}
 function useOnlineStatus() {
@@ -660,9 +660,9 @@ function ChatIndicator() {
 }
 ```
 
-Here, the component subscribes to an external data store (in this case, the browser `navigator.onLine` API). Since this API does not exist on the server (so it can't be used for the initial HTML), initially the state is set to `true`. Whenever the value of that data store changes in the browser, the component updates its state.
+এখানে, কম্পোনেন্টটি একটি এক্সটার্নাল ডেটা স্টোরের জন্য সাবস্ক্রাইব করে (এই ক্ষেত্রে, ব্রাউজারের `navigator.onLine` API)। যেহেতু এই API সার্ভারে বিদ্যমান নেই (এটি প্রাথমিক HTML-এর জন্য ব্যবহার করা যায় না), শুরুতে স্টেট `true` সেট করা হয়। যখনই ব্রাউজারে সেই ডেটা স্টোরের মান পরিবর্তিত হয়, কম্পোনেন্ট তার স্টেট আপডেট করে।
 
-Although it's common to use Effects for this, React has a purpose-built Hook for subscribing to an external store that is preferred instead. Delete the Effect and replace it with a call to [`useSyncExternalStore`](/reference/react/useSyncExternalStore):
+যদিও এটি করার জন্য ইফেক্ট ব্যবহার করা সাধারণ, React-এ একটি বিশেষভাবে ডিজাইন করা হুক আছে যা একটি এক্সটার্নাল স্টোরের জন্য সাবস্ক্রাইব করতে ব্যবহার করা হয়, যা আরও পছন্দসই। ইফেক্টটি মুছে ফেলুন এবং [`useSyncExternalStore`](/reference/react/useSyncExternalStore) কলে প্রতিস্থাপন করুন:
 
 ```js {11-16}
 function subscribe(callback) {
@@ -689,11 +689,11 @@ function ChatIndicator() {
 }
 ```
 
-This approach is less error-prone than manually syncing mutable data to React state with an Effect. Typically, you'll write a custom Hook like `useOnlineStatus()` above so that you don't need to repeat this code in the individual components. [Read more about subscribing to external stores from React components.](/reference/react/useSyncExternalStore)
+এই পদ্ধতি ইফেক্টের মাধ্যমে মিউটেবল ডেটাকে React স্টেটের সাথে ম্যানুয়ালি সিঙ্ক করার চেয়ে কম ত্রুটিপূর্ণ। সাধারণত, আপনি উপরের মতো একটি কাস্টম হুক লিখবেন যেমন useOnlineStatus() যাতে আপনাকে পৃথক কম্পোনেন্টে এই কোডটি পুনরাবৃত্তি করতে না হয়। [এক্সটার্নাল স্টোরগুলোর জন্য React কম্পোনেন্ট থেকে সাবস্ক্রাইব করার বিষয়ে আরও পড়ুন।](/reference/react/useSyncExternalStore)
 
 ### Fetching data {/*fetching-data*/}
 
-Many apps use Effects to kick off data fetching. It is quite common to write a data fetching Effect like this:
+অনেক অ্যাপ্লিকেশন ডেটা Fetch করার জন্য ইফেক্ট ব্যবহার করে। একটি ডেটা Fetch করার ইফেক্ট এইভাবে লেখা খুব সাধারণ:
 
 ```js {5-10}
 function SearchResults({ query }) {
@@ -714,15 +714,15 @@ function SearchResults({ query }) {
 }
 ```
 
-You *don't* need to move this fetch to an event handler.
+আপনাকে এই ফেচটি একটি ইভেন্ট হ্যান্ডলারে স্থানান্তর করতে *হবেনা*।
 
-This might seem like a contradiction with the earlier examples where you needed to put the logic into the event handlers! However, consider that it's not *the typing event* that's the main reason to fetch. Search inputs are often prepopulated from the URL, and the user might navigate Back and Forward without touching the input.
+এটি প্রথম উদাহরণগুলোর সাথে একটি বৈপরীত্য মনে হতে পারে যেখানে আপনাকে লজিকটি ইভেন্ট হ্যান্ডলারগুলিতে রাখতে হয়েছে! তবে, মনে রাখবেন যে এটি *টাইপিং ইভেন্ট* নয় যা Fetch করার প্রধান কারণ। সার্চ ইনপুটগুলি প্রায়শই URL থেকে পূর্বনির্ধারিত হয়, এবং ব্যবহারকারী ইনপুটটি স্পর্শ না করেই ব্যাক এবং ফরোয়ার্ডে নেভিগেট করতে পারে।
 
-It doesn't matter where `page` and `query` come from. While this component is visible, you want to keep `results` [synchronized](/learn/synchronizing-with-effects) with data from the network for the current `page` and `query`. This is why it's an Effect.
+`page` এবং `query` কোথা থেকে আসছে তা গুরুত্বপূর্ণ নয়। যখন এই কম্পোনেন্টটি দৃশ্যমান থাকে, আপনি `results` কে বর্তমান `page` এবং `query` এর জন্য নেটওয়ার্কের ডেটার সাথে [সিঙ্ক্রোনাইজ](/learn/synchronizing-with-effects) রাখতে চান। এ কারণেই এটি একটি ইফেক্ট।
 
-However, the code above has a bug. Imagine you type `"hello"` fast. Then the `query` will change from `"h"`, to `"he"`, `"hel"`, `"hell"`, and `"hello"`. This will kick off separate fetches, but there is no guarantee about which order the responses will arrive in. For example, the `"hell"` response may arrive *after* the `"hello"` response. Since it will call `setResults()` last, you will be displaying the wrong search results. This is called a ["race condition"](https://en.wikipedia.org/wiki/Race_condition): two different requests "raced" against each other and came in a different order than you expected.
+তবে, উপরের কোডে একটি বাগ আছে। কল্পনা করুন আপনি দ্রুত `"hello"` টাইপ করছেন। তারপর `query` পরিবর্তিত হবে `"h"` থেকে `"he"`, `"hel"`, `"hell"` এবং `"hello"`-তে। এটি আলাদা ফেচগুলি শুরু করবে, কিন্তু প্রতিক্রিয়াগুলির কোন অর্ডারে আসবে তা নিশ্চিত নয়। উদাহরণস্বরূপ, `"hell"` প্রতিক্রিয়া আসতে পারে *এরপর* `"hello"` প্রতিক্রিয়ার। যেহেতু এটি শেষবার `setResults()` কল করবে, আপনি ভুল সার্চ ফলাফল প্রদর্শন করবেন। একে বলা হয় ["রেস কন্ডিশন"](https://en.wikipedia.org/wiki/Race_condition): দুটি ভিন্ন অনুরোধ "রেস" করেছে একে অপরের বিরুদ্ধে এবং প্রত্যাশিত অর্ডারের চেয়ে ভিন্ন অর্ডারে এসেছে।
 
-**To fix the race condition, you need to [add a cleanup function](/learn/synchronizing-with-effects#fetching-data) to ignore stale responses:**
+**রেস কন্ডিশনটি ঠিক করতে, আপনাকে [একটি ক্লিনআপ ফাংশন](/learn/synchronizing-with-effects#fetching-data) যোগ করতে হবে যাতে পুরানো প্রতিক্রিয়াগুলি উপেক্ষা করা হয়:**
 
 ```js {5,7,9,11-13}
 function SearchResults({ query }) {
@@ -747,13 +747,13 @@ function SearchResults({ query }) {
 }
 ```
 
-This ensures that when your Effect fetches data, all responses except the last requested one will be ignored.
+এটি নিশ্চিত করে যে যখন আপনার ইফেক্ট ডেটা ফেচ করে, তখন শেষ রিকোয়েস্ট করা রেসপন্স ছাড়া সব রিকোয়েস্ট উপেক্ষা করা হবে।
 
-Handling race conditions is not the only difficulty with implementing data fetching. You might also want to think about caching responses (so that the user can click Back and see the previous screen instantly), how to fetch data on the server (so that the initial server-rendered HTML contains the fetched content instead of a spinner), and how to avoid network waterfalls (so that a child can fetch data without waiting for every parent).
+ডেটা ফেচিং বাস্তবায়নের সাথে রেস কন্ডিশনগুলি পরিচালনা করা একমাত্র চ্যালেঞ্জ নয়। আপনি রেসপন্সগুলির ক্যাশিং সম্পর্কেও চিন্তা করতে চাইতে পারেন (যাতে ব্যবহারকারী ব্যাক ক্লিক করলে আগের স্ক্রিনটি তাত্ক্ষণিকভাবে দেখতে পারে), সার্ভারে ডেটা কীভাবে ফেচ করতে হবে (যাতে প্রাথমিক সার্ভার-রেন্ডার করা HTML-এ ফেচ করা কনটেন্ট থাকে স্পিনারের পরিবর্তে), এবং নেটওয়ার্ক ওয়াটারফলগুলি কীভাবে এড়ানো যায় (যাতে একটি সন্তান ডেটা ফেচ করতে পারে প্রতিটি প্যারেন্টের জন্য অপেক্ষা না করে)।
 
-**These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.**
+**এই সমস্যাগুলি যেকোন UI লাইব্রেরিতে প্রযোজ্য, শুধু React নয়। এগুলি সমাধান করা সহজ নয়, এজন্য আধুনিক [ফ্রেমওয়ার্কগুলি](/learn/start-a-new-react-project#production-grade-react-frameworks) ইফেক্টে ডেটা ফেচ করার চেয়ে আরও কার্যকর বিল্ট-ইন ডেটা ফেচিং যান্ত্রিক সরবরাহ করে।**
 
-If you don't use a framework (and don't want to build your own) but would like to make data fetching from Effects more ergonomic, consider extracting your fetching logic into a custom Hook like in this example:
+যদি আপনি একটি ফ্রেমওয়ার্ক ব্যবহার না করেন (এবং আপনার নিজস্ব তৈরি করতে না চান) তবে ইফেক্ট থেকে ডেটা ফেচিংকে আরও ব্যবহারকারী বান্ধব করতে চান, তবে এই উদাহরণের মতো আপনার ফেচিং লজিকটিকে একটি কাস্টম হুকের মধ্যে নিষ্কাশন করতে বিবেচনা করুন:
 
 ```js {4}
 function SearchResults({ query }) {
@@ -786,30 +786,30 @@ function useData(url) {
 }
 ```
 
-You'll likely also want to add some logic for error handling and to track whether the content is loading. You can build a Hook like this yourself or use one of the many solutions already available in the React ecosystem. **Although this alone won't be as efficient as using a framework's built-in data fetching mechanism, moving the data fetching logic into a custom Hook will make it easier to adopt an efficient data fetching strategy later.**
+আপনি সম্ভবত ত্রুটি পরিচালনার জন্য কিছু লজিক যুক্ত করতে চান এবং কন্টেন্ট লোড হচ্ছে কিনা তা ট্র্যাক করতে চান। আপনি নিজেই এমন একটি হুক তৈরি করতে পারেন অথবা React ইকোসিস্টেমে ইতিমধ্যেই উপলব্ধ অনেক সমাধানের মধ্যে একটি ব্যবহার করতে পারেন। **যদিও এটি একা একটি ফ্রেমওয়ার্কের বিল্ট-ইন ডেটা ফেচিং যান্ত্রিকের চেয়ে ততটা কার্যকর হবে না, একটি কাস্টম হুকে ডেটা ফেচিং লজিকটি স্থানান্তর করা পরবর্তীতে একটি কার্যকর ডেটা ফেচিং কৌশল গ্রহণ করা সহজ করবে।**
 
-In general, whenever you have to resort to writing Effects, keep an eye out for when you can extract a piece of functionality into a custom Hook with a more declarative and purpose-built API like `useData` above. The fewer raw `useEffect` calls you have in your components, the easier you will find to maintain your application.
+সাধারণভাবে, যখনই আপনাকে ইফেক্ট লিখতে বাধ্য হতে হয়, তখন নজর রাখুন কখন আপনি একটি কাস্টম হুকে একটি কার্যকরী অংশ নিষ্কাশন করতে পারেন একটি আরও ঘোষণামূলক এবং উদ্দেশ্য-নির্মিত API এর সাথে যেমন উপরে `useData`। আপনার কম্পোনেন্টগুলিতে যত কম কাঁচা `useEffect` কল থাকবে, আপনার অ্যাপ্লিকেশনটি বজায় রাখা ততটাই সহজ হবে।
 
 <Recap>
 
-- If you can calculate something during render, you don't need an Effect.
-- To cache expensive calculations, add `useMemo` instead of `useEffect`.
-- To reset the state of an entire component tree, pass a different `key` to it.
-- To reset a particular bit of state in response to a prop change, set it during rendering.
-- Code that runs because a component was *displayed* should be in Effects, the rest should be in events.
-- If you need to update the state of several components, it's better to do it during a single event.
-- Whenever you try to synchronize state variables in different components, consider lifting state up.
-- You can fetch data with Effects, but you need to implement cleanup to avoid race conditions.
+- যদি আপনি রেন্ডার করার সময় কিছু হিসাব করতে পারেন, তবে আপনাকে একটি ইফেক্টের প্রয়োজন নেই।
+- ব্যয়বহুল গণনা ক্যাশ করার জন্য, `useEffect` এর পরিবর্তে `useMemo` যুক্ত করুন।
+- একটি সম্পূর্ণ কম্পোনেন্ট গাছের স্টেট রিসেট করতে, এর জন্য একটি ভিন্ন `key` পাস করুন।
+- একটি প্রোপ পরিবর্তনের প্রতিক্রিয়া হিসাবে একটি নির্দিষ্ট স্টেটের অংশ রিসেট করতে, এটি রেন্ডারিংয়ের সময় সেট করুন।
+- কোড যা একটি কম্পোনেন্ট প্রদর্শিত হওয়ার কারণে চালিত হয় তা ইফেক্টে থাকা উচিত, বাকি অংশ ইভেন্টে থাকা উচিত।
+- যদি আপনাকে কয়েকটি কম্পোনেন্টের স্টেট আপডেট করতে হয়, তবে এটি একটি একক ইভেন্টের মধ্যে করা ভালো।
+- যখনই আপনি বিভিন্ন কম্পোনেন্টে স্টেট ভেরিয়েবলগুলিকে সিঙ্ক্রোনাইজ করতে চেষ্টা করেন, তাহলে স্টেটকে আপ করতে বিবেচনা করুন।
+- আপনি ইফেক্টের মাধ্যমে ডেটা ফেচ করতে পারেন, তবে রেস কন্ডিশন এড়ানোর জন্য ক্লিনআপ বাস্তবায়ন করতে হবে।
 
 </Recap>
 
 <Challenges>
 
-#### Transform data without Effects {/*transform-data-without-effects*/}
+#### এফেক্ট ছাড়া ডাটা ট্রান্সফর্ম {/*transform-data-without-effects*/}
 
-The `TodoList` below displays a list of todos. When the "Show only active todos" checkbox is ticked, completed todos are not displayed in the list. Regardless of which todos are visible, the footer displays the count of todos that are not yet completed.
+নিচের `TodoList` একটি টোডোর তালিকা প্রদর্শন করে। যখন "শুধুমাত্র সক্রিয় টু-ডো দেখান" চেকবক্সটি টিক দেওয়া হয়, সম্পন্ন টোডোগুলি তালিকায় প্রদর্শিত হয় না। যে কোন টোডো দৃশ্যমান হোক না কেন, ফুটারে এখনও সম্পন্ন না হওয়া টোডোগুলির সংখ্যা প্রদর্শিত হয়।
 
-Simplify this component by removing all the unnecessary state and Effects.
+এই কম্পোনেন্টটি সমস্ত অপ্রয়োজনীয় স্টেট এবং ইফেক্ট মুছে ফেলে সরল করুন।
 
 <Sandpack>
 
@@ -909,15 +909,15 @@ input { margin-top: 10px; }
 
 <Hint>
 
-If you can calculate something during rendering, you don't need state or an Effect that updates it.
+যদি আপনি রেন্ডার করার সময় কিছু গণনা করতে পারেন, তবে আপনাকে এমন স্টেট বা একটি ইফেক্টের প্রয়োজন নেই যা এটি আপডেট করে।
 
 </Hint>
 
 <Solution>
 
-There are only two essential pieces of state in this example: the list of `todos` and the `showActive` state variable which represents whether the checkbox is ticked. All of the other state variables are [redundant](/learn/choosing-the-state-structure#avoid-redundant-state) and can be calculated during rendering instead. This includes the `footer` which you can move directly into the surrounding JSX.
+এই উদাহরণে দুটি মূল স্টেট রয়েছে: `todos` এর তালিকা এবং `showActive` স্টেট ভেরিয়েবল যা চেকবক্সটি টিক দেওয়া হয়েছে কিনা তা প্রতিনিধিত্ব করে। অন্যান্য সমস্ত স্টেট ভেরিয়েবল [অপ্রয়োজনীয়](/learn/choosing-the-state-structure#avoid-redundant-state) এবং রেন্ডার করার সময় গণনা করা যেতে পারে। এর মধ্যে `footer` অন্তর্ভুক্ত যা আপনি সরাসরি চারপাশের JSX-তে স্থানান্তর করতে পারেন।
 
-Your result should end up looking like this:
+আপনার ফলাফলটি এরকম হবে:
 
 <Sandpack>
 
@@ -1002,15 +1002,15 @@ input { margin-top: 10px; }
 
 </Solution>
 
-#### Cache a calculation without Effects {/*cache-a-calculation-without-effects*/}
+#### এফেক্ট ছড়া ক্যালকুলেশ ক্যাশ করা {/*cache-a-calculation-without-effects*/}
 
-In this example, filtering the todos was extracted into a separate function called `getVisibleTodos()`. This function contains a `console.log()` call inside of it which helps you notice when it's being called. Toggle "Show only active todos" and notice that it causes `getVisibleTodos()` to re-run. This is expected because visible todos change when you toggle which ones to display.
+এই উদাহরণে, টোডোগুলিকে ফিল্টার করার জন্য একটি পৃথক ফাংশন `getVisibleTodos()` এ স্থানান্তরিত করা হয়েছে। এই ফাংশনের মধ্যে একটি `console.log()` কল রয়েছে যা আপনাকে দেখাতে সাহায্য করে কখন এটি কল হচ্ছে। "শুধুমাত্র সক্রিয় টোডো দেখান" টগল করলে লক্ষ্য করুন যে এটি `getVisibleTodos()` পুনরায় চালানোর কারণ হয়। এটি প্রত্যাশিত কারণ আপনি কোন টোডোগুলি প্রদর্শন করবেন তা টগল করলে দৃশ্যমান টোডোগুলি পরিবর্তিত হয়।
 
-Your task is to remove the Effect that recomputes the `visibleTodos` list in the `TodoList` component. However, you need to make sure that `getVisibleTodos()` does *not* re-run (and so does not print any logs) when you type into the input.
+আপনার কাজ হল `TodoList` কম্পোনেন্টে `visibleTodos` তালিকা পুনঃগণনা করা ইফেক্টটি মুছে ফেলা। তবে, আপনাকে নিশ্চিত করতে হবে যে `getVisibleTodos()` *পুনরায় চালানো হয় না* (এবং তাই কোনও লগ মুদ্রণ করে না) যখন আপনি ইনপুটে টাইপ করেন।
 
 <Hint>
 
-One solution is to add a `useMemo` call to cache the visible todos. There is also another, less obvious solution.
+একটি সমাধান হল দৃশ্যমান টোডোগুলিকে ক্যাশ করার জন্য একটি `useMemo` কল যুক্ত করা। একটি অন্য, কম স্পষ্ট সমাধানও রয়েছে।
 
 </Hint>
 
@@ -1096,7 +1096,7 @@ input { margin-top: 10px; }
 
 <Solution>
 
-Remove the state variable and the Effect, and instead add a `useMemo` call to cache the result of calling `getVisibleTodos()`:
+স্টেট ভেরিয়েবল এবং ইফেক্টটি মুছে ফেলুন, এবং পরিবর্তে `getVisibleTodos()` কল করার ফলাফল ক্যাশ করার জন্য একটি `useMemo` কল যুক্ত করুন:
 
 <Sandpack>
 
@@ -1177,9 +1177,9 @@ input { margin-top: 10px; }
 
 </Sandpack>
 
-With this change, `getVisibleTodos()` will be called only if `todos` or `showActive` change. Typing into the input only changes the `text` state variable, so it does not trigger a call to `getVisibleTodos()`.
+এই পরিবর্তনের সাথে, `getVisibleTodos()` কেবল তখনই কল হবে যদি `todos` অথবা `showActive` পরিবর্তিত হয়। ইনপুটে টাইপ করা কেবল `text` স্টেট ভেরিয়েবল পরিবর্তন করে, তাই এটি `getVisibleTodos()` কে কল করতে ট্রিগার করে না।
 
-There is also another solution which does not need `useMemo`. Since the `text` state variable can't possibly affect the list of todos, you can extract the `NewTodo` form into a separate component, and move the `text` state variable inside of it:
+আরও একটি সমাধান রয়েছে যা `useMemo` এর প্রয়োজন নেই। যেহেতু `text` স্টেট ভেরিয়েবল সম্ভবত টোডোর তালিকাকে প্রভাবিত করতে পারে না, আপনি `NewTodo` ফর্মটিকে একটি পৃথক কম্পোনেন্টে স্থানান্তরিত করতে পারেন এবং `text` স্টেট ভেরিয়েবলটিকে এর ভিতরে নিয়ে যেতে পারেন:
 
 <Sandpack>
 
@@ -1266,15 +1266,15 @@ input { margin-top: 10px; }
 
 </Sandpack>
 
-This approach satisfies the requirements too. When you type into the input, only the `text` state variable updates. Since the `text` state variable is in the child `NewTodo` component, the parent `TodoList` component won't get re-rendered. This is why `getVisibleTodos()` doesn't get called when you type. (It would still be called if the `TodoList` re-renders for another reason.)
+এই পদ্ধতিটি প্রয়োজনীয়তা মেটায়। যখন আপনি ইনপুটে টাইপ করেন, কেবল `text` স্টেট ভেরিয়েবল আপডেট হয়। যেহেতু `text` স্টেট ভেরিয়েবলটি সন্তানের `NewTodo` কম্পোনেন্টে আছে, তাই অভিভাবক `TodoList` কম্পোনেন্টটি পুনরায় রেন্ডার হবে না। এ কারণেই আপনি টাইপ করার সময় `getVisibleTodos()` কল হয় না। (যদি `TodoList` অন্য কোনও কারণে পুনরায় রেন্ডার হয় তবে এটি এখনও কল হবে।)
 
 </Solution>
 
-#### Reset state without Effects {/*reset-state-without-effects*/}
+#### ইফেক্ট ছাড়া স্টেট রিসেট করা {/*reset-state-without-effects*/}
 
-This `EditContact` component receives a contact object shaped like `{ id, name, email }` as the `savedContact` prop. Try editing the name and email input fields. When you press Save, the contact's button above the form updates to the edited name. When you press Reset, any pending changes in the form are discarded. Play around with this UI to get a feel for it.
+এই `EditContact` কম্পোনেন্টটি `{ id, name, email }` আকারের একটি যোগাযোগ অবজেক্ট `savedContact` প্রপ হিসেবে গ্রহণ করে। নাম এবং ইমেইল ইনপুট ফিল্ডগুলি সম্পাদনা করার চেষ্টা করুন। আপনি যখন সেভ চাপেন, ফর্মের উপরে যোগাযোগের বাটনটি সম্পাদিত নামের সাথে আপডেট হয়। আপনি যখন রিসেট চাপেন, ফর্মে কোনও চলমান পরিবর্তন বাতিল হয়ে যায়। এটি অনুভব করার জন্য এই UI-তে খেলা করুন।
 
-When you select a contact with the buttons at the top, the form resets to reflect that contact's details. This is done with an Effect inside `EditContact.js`. Remove this Effect. Find another way to reset the form when `savedContact.id` changes.
+আপনি যখন উপরের বাটনগুলির সাহায্যে একটি যোগাযোগ নির্বাচন করেন, ফর্মটি সেই যোগাযোগের বিস্তারিত তথ্য প্রতিফলিত করতে রিসেট হয়। এটি `EditContact.js` এর মধ্যে একটি ইফেক্টের মাধ্যমে করা হয়। এই ইফেক্টটি মুছে ফেলুন। `savedContact.id` পরিবর্তিত হলে ফর্মটি রিসেট করার জন্য আরেকটি উপায় খুঁজুন।
 
 <Sandpack>
 
@@ -1432,13 +1432,13 @@ button {
 
 <Hint>
 
-It would be nice if there was a way to tell React that when `savedContact.id` is different, the `EditContact` form is conceptually a _different contact's form_ and should not preserve state. Do you recall any such way?
+এটি খুবই ভালো হবে যদি কোনও উপায় থাকত যা রিঅ্যাক্টকে বলতে পারে যে `savedContact.id` পরিবর্তিত হলে `EditContact` ফর্মটি ধারণাগতভাবে একটি _বিভিন্ন যোগাযোগের ফর্ম_ এবং এটি স্টেট সংরক্ষণ করা উচিত নয়। আপনি কি এমন কোনও উপায় মনে করতে পারেন?
 
 </Hint>
 
 <Solution>
 
-Split the `EditContact` component in two. Move all the form state into the inner `EditForm` component. Export the outer `EditContact` component, and make it pass `savedContact.id` as the `key` to the inner `EditForm` component. As a result, the inner `EditForm` component resets all of the form state and recreates the DOM whenever you select a different contact.
+`EditContact` কম্পোনেন্টটিকে দুটি অংশে ভাগ করুন। সমস্ত ফর্ম স্টেটকে অভ্যন্তরীণ `EditForm` কম্পোনেন্টে স্থানান্তরিত করুন। বাইরের `EditContact` কম্পোনেন্টটি এক্সপোর্ট করুন এবং এটি অভ্যন্তরীণ `EditForm` কম্পোনেন্টকে `savedContact.id` কে `key` হিসেবে পাঠাতে বলুন। এর ফলস্বরূপ, অভ্যন্তরীণ `EditForm` কম্পোনেন্টটি যখন আপনি একটি ভিন্ন যোগাযোগ নির্বাচন করেন, তখন সমস্ত ফর্ম স্টেট রিসেট করে এবং DOM পুনরায় তৈরি করে।
 
 <Sandpack>
 
@@ -1600,17 +1600,17 @@ button {
 
 </Solution>
 
-#### Submit a form without Effects {/*submit-a-form-without-effects*/}
+#### এফেক্ট ছাড়া ফর্ম সাবমিট করা {/*submit-a-form-without-effects*/}
 
-This `Form` component lets you send a message to a friend. When you submit the form, the `showForm` state variable is set to `false`. This triggers an Effect calling `sendMessage(message)`, which sends the message (you can see it in the console). After the message is sent, you see a "Thank you" dialog with an "Open chat" button that lets you get back to the form.
+এই `Form` উপাদানটি আপনাকে একটি বন্ধুদের কাছে বার্তা পাঠানোর সুযোগ দেয়। যখন আপনি ফর্মটি জমা দেন, `showForm` রাষ্ট্র পরিবর্তনশীলটি `false` সেট করা হয়। এটি একটি প্রভাবকে সক্রিয় করে যা `sendMessage(message)` কল করে, যা বার্তাটি পাঠায় (আপনি এটি কনসোলে দেখতে পাবেন)। বার্তা পাঠানোর পরে, আপনি একটি "ধন্যবাদ" সংলাপ দেখবেন যার একটি "চ্যাট খুলুন" বোতাম রয়েছে যা আপনাকে আবার ফর্মে ফিরিয়ে নিয়ে যায়।
 
-Your app's users are sending way too many messages. To make chatting a little bit more difficult, you've decided to show the "Thank you" dialog *first* rather than the form. Change the `showForm` state variable to initialize to `false` instead of `true`. As soon as you make that change, the console will show that an empty message was sent. Something in this logic is wrong!
+আপনার অ্যাপের ব্যবহারকারীরা অনেক বেশি বার্তা পাঠাচ্ছেন। চ্যাটিংকে কিছুটা আরও কঠিন করার জন্য, আপনি সিদ্ধান্ত নিয়েছেন যে "ধন্যবাদ" সংলাপটি *প্রথমে* প্রদর্শন করবেন ফর্মের পরিবর্তে। এই পরিবর্তনটি করার সাথে সাথেই `showForm` রাষ্ট্র পরিবর্তনশীলটিকে `true` থেকে `false`তে সেট করুন। যখন আপনি এই পরিবর্তনটি করবেন, কনসোলে একটি খালি বার্তা পাঠানো হয়েছে এমন একটি বার্তা প্রদর্শিত হবে। এই লজিকে কিছু ভুল রয়েছে!
 
-What's the root cause of this problem? And how can you fix it?
+সমস্যার মূল কারণ কী? এবং আপনি এটি কিভাবে ঠিক করতে পারেন?
 
 <Hint>
 
-Should the message be sent _because_ the user saw the "Thank you" dialog? Or is it the other way around?
+Should the message be sent _because_ the user saw the "Thank you" dialog? Or is it the other way around ব্যবহারকারী "ধন্যবাদ" দেখার _কারণে_ মেসেজটি পাঠানো উচিত কি? নাকি উল্টোটা?
 
 </Hint>
 
@@ -1675,7 +1675,7 @@ label, textarea { margin-bottom: 10px; display: block; }
 
 <Solution>
 
-The `showForm` state variable determines whether to show the form or the "Thank you" dialog. However, you aren't sending the message because the "Thank you" dialog was _displayed_. You want to send the message because the user has _submitted the form._ Delete the misleading Effect and move the `sendMessage` call inside the `handleSubmit` event handler:
+`showForm` রাষ্ট্র পরিবর্তনশীলটি ফর্ম বা "ধন্যবাদ" সংলাপটি প্রদর্শন করা হবে কিনা তা নির্ধারণ করে। তবে, আপনি বার্তাটি পাঠাচ্ছেন না কারণ "ধন্যবাদ" সংলাপটি _প্রদর্শিত_ হয়েছে। আপনি বার্তা পাঠাতে চান কারণ ব্যবহারকারী _ফর্মটি জমা দিয়েছে।_ বিভ্রান্তিকর প্রভাবটি মুছে ফেলুন এবং `sendMessage` কলটিকে `handleSubmit` ইভেন্ট হ্যান্ডলারের ভিতরে স্থানান্তর করুন:
 
 <Sandpack>
 
@@ -1731,7 +1731,7 @@ label, textarea { margin-bottom: 10px; display: block; }
 
 </Sandpack>
 
-Notice how in this version, only _submitting the form_ (which is an event) causes the message to be sent. It works equally well regardless of whether `showForm` is initially set to `true` or `false`. (Set it to `false` and notice no extra console messages.)
+দেখুন, এই সংস্করণে, শুধুমাত্র _ফর্মটি জমা দেওয়া_ (যা একটি ইভেন্ট) বার্তা পাঠানোর কারণ হয়। এটি `showForm` যদি প্রাথমিকভাবে `true` বা `false` হিসাবে সেট করা হয়, উভয় ক্ষেত্রেই সমানভাবে কাজ করে। (এটি `false` এ সেট করুন এবং দেখুন অতিরিক্ত কনসোল বার্তা নেই।)
 
 </Solution>
 
diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md
index 17fa01e98..0c08c5579 100644
--- a/src/content/learn/your-first-component.md
+++ b/src/content/learn/your-first-component.md
@@ -1,24 +1,24 @@
 ---
-title: Your First Component
+title: আপনার প্রথম কম্পোনেন্ট
 ---
 
 <Intro>
 
-*Components* are one of the core concepts of React. They are the foundation upon which you build user interfaces (UI), which makes them the perfect place to start your React journey!
+*কম্পোনেন্ট* হলো React-এর মূল ধারণাগুলোর একটি। এগুলো ব্যবহারকারী ইন্টারফেস (UI) তৈরির ভিত্তি, যা আপনার React যাত্রা শুরু করার জন্য একটি চমৎকার স্থান!
 
 </Intro>
 
 <YouWillLearn>
 
-* What a component is
-* What role components play in a React application
-* How to write your first React component
+- একটি কম্পোনেন্ট কী
+- React অ্যাপ্লিকেশনে কম্পোনেন্ট কী ভূমিকা পালন করে
+- কীভাবে আপনার প্রথম React কম্পোনেন্ট লিখবেন
 
 </YouWillLearn>
 
-## Components: UI building blocks {/*components-ui-building-blocks*/}
+## কম্পোনেন্ট: UI বিল্ডিং ব্লক {/*components-ui-building-blocks*/}
 
-On the Web, HTML lets us create rich structured documents with its built-in set of tags like `<h1>` and `<li>`:
+ওয়েব-এ, HTML আমাদেরকে বিল্ট-ইন ট্যাগগুলোর মাধ্যমে সমৃদ্ধ কাঠামোবদ্ধ ডকুমেন্ট তৈরি করতে দেয়, যেমন `<h1>` এবং `<li>`:
 
 ```html
 <article>
@@ -31,11 +31,10 @@ On the Web, HTML lets us create rich structured documents with its built-in set
 </article>
 ```
 
-This markup represents this article `<article>`, its heading `<h1>`, and an (abbreviated) table of contents as an ordered list `<ol>`. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web.
+এই মার্কআপটি এই প্রবন্ধটি `<article>`, এর শিরোনাম `<h1>`, এবং একটি (সংক্ষেপিত) বিষয়সূচী একটি ক্রম তালিকা `<ol>` হিসেবে উপস্থাপন করে। এই মার্কআপ, CSS-এর স্টাইল এবং JavaScript-এর ইন্টার‌্যাক্টিভিটি মিলিয়ে প্রতিটি UI উপাদানের পেছনে কাজ করে যা আপনি ওয়েবে দেখতে পান।
+React আপনাকে আপনার মার্কআপ, CSS, এবং JavaScript কাস্টম "কম্পোনেন্ট" হিসেবে একত্রিত করতে দেয়, **আপনার অ্যাপের জন্য পুনঃব্যবহারযোগ্য UI উপাদান।** উপরের বিষয়সূচীর কোডটি একটি `<TableOfContents />` কম্পোনেন্টে পরিণত করা যেতে পারে যা আপনি প্রতিটি পৃষ্ঠায় রেন্ডার করতে পারেন। ভিতরে, এটি এখনও একই HTML ট্যাগগুলি ব্যবহার করে যেমন `<article>`, `<h1>`, ইত্যাদি।
 
-React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a `<TableOfContents />` component you could render on every page. Under the hood, it still uses the same HTML tags like `<article>`, `<h1>`, etc.
-
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+HTML ট্যাগগুলির মতোই, আপনি পুরো পৃষ্ঠাগুলি ডিজাইন করতে কম্পোনেন্টগুলোকে কম্পোজ, অর্ডার এবং নেস্ট করতে পারেন। উদাহরণস্বরূপ, আপনি যে ডকুমেন্টেশন পৃষ্ঠাটি পড়ছেন তা React কম্পোনেন্ট দিয়ে তৈরি:
 
 ```js
 <PageLayout>
@@ -51,11 +50,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
 </PageLayout>
 ```
 
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `<TableOfContents />`! You can even jumpstart your project with the thousands of components shared by the React open source community like [Chakra UI](https://chakra-ui.com/) and [Material UI.](https://material-ui.com/)
+যখন আপনার প্রকল্প বড় হয়, আপনি দেখবেন যে আপনার অনেক ডিজাইন আপনি ইতিমধ্যে লিখিত কম্পোনেন্ট পুনঃব্যবহার করে তৈরি করতে পারবেন, যা আপনার ডেভেলপমেন্টকে দ্রুততর করবে। আমাদের উপরের বিষয়সূচীটি `<TableOfContents />` ব্যবহার করে যে কোনো স্ক্রিনে যুক্ত করা যেতে পারে! এমনকি React ওপেন সোর্স কমিউনিটির হাজারো কম্পোনেন্ট যেমন [Chakra UI](https://chakra-ui.com/) এবং [Material UI.](https://material-ui.com/) দিয়ে আপনার প্রকল্পটি দ্রুত শুরু করতে পারেন।
 
-## Defining a component {/*defining-a-component*/}
+## কম্পোনেন্টকে সংজ্ঞায়িত করা {/*defining-a-component*/}
 
-Traditionally when creating web pages, web developers marked up their content and then added interaction by sprinkling on some JavaScript. This worked great when interaction was a nice-to-have on the web. Now it is expected for many sites and all apps. React puts interactivity first while still using the same technology: **a React component is a JavaScript function that you can _sprinkle with markup_.** Here's what that looks like (you can edit the example below):
+প্রথাগতভাবে, ওয়েব পেজ তৈরি করার সময়, ওয়েব ডেভেলপাররা তাদের কনটেন্টকে মার্কআপ করেন এবং তারপর কিছু জাভাস্ক্রিপ্ট যোগ করে ইন্টারঅ্যাকশন যুক্ত করেন। যখন ইন্টারঅ্যাকশন ওয়েবের জন্য একটি অতিরিক্ত সুবিধা ছিল, তখন এটি খুব ভাল কাজ করেছিল। তবে এখন অনেক সাইট এবং সমস্ত অ্যাপের জন্য এটি প্রত্যাশিত। React ইন্টারঅ্যাকশনকে প্রথম স্থানে রাখে, তবুও একই প্রযুক্তি ব্যবহার করে: **একটি React কম্পোনেন্ট একটি জাভাস্ক্রিপ্ট ফাংশন যা আপনি মার্কআপের সাথে _ছিটিয়ে_ দিতে পারেন।** নিচের উদাহরণটি দেখুন (আপনি নিচের উদাহরণটি সম্পাদনা করতে পারেন):
 
 <Sandpack>
 
@@ -76,27 +75,32 @@ img { height: 200px; }
 
 </Sandpack>
 
-And here's how to build a component:
+Here’s the translation of the provided text into Bengali:
 
-### Step 1: Export the component {/*step-1-export-the-component*/}
+এবং এখানে একটি কম্পোনেন্ট তৈরির পদক্ষেপ রয়েছে:
 
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+### ধাপ ১: কম্পোনেন্টটি এক্সপোর্ট করুন {/*step-1-export-the-component*/}
 
-### Step 2: Define the function {/*step-2-define-the-function*/}
+`export default` প্রিফিক্সটি একটি [মানক জাভাস্ক্রিপ্ট সিনট্যাক্স](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (যা React-এর জন্য বিশেষ নয়)। এটি আপনাকে একটি ফাইলে প্রধান ফাংশন চিহ্নিত করতে দেয় যাতে আপনি পরে এটি অন্য ফাইল থেকে আমদানি করতে পারেন। (কম্পোনেন্ট আমদানির বিষয়ে আরও জানুন [কম্পোনেন্ট আমদানি এবং রপ্তানি](/learn/importing-and-exporting-components)!)
 
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
 
-<Pitfall>
+### ধাপ ২: ফাংশনটি সংজ্ঞায়িত করুন {/*step-2-define-the-function*/}
 
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+`function Profile() { }` দিয়ে আপনি `Profile` নামে একটি জাভাস্ক্রিপ্ট ফাংশন সংজ্ঞায়িত করেন।
 
-</Pitfall>
+If you need any more translations or further assistance, just let me know!
+
+<pitfall>
+
+React কম্পোনেন্টগুলো সাধারণ JavaScript ফাংশন, তবে **এগুলোর নাম অবশ্যই বড় অক্ষরে শুরু করতে হবে** না হলে এগুলো কাজ করবে না!
 
-### Step 3: Add markup {/*step-3-add-markup*/}
+</pitfall>
 
-The component returns an `<img />` tag with `src` and `alt` attributes. `<img />` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+### Step 3: মার্কআপ যোগ করা {/*step-3-add-markup*/}
 
-Return statements can be written all on one line, as in this component:
+কম্পোনেন্টটি একটি `<img />` ট্যাগ রিটার্ন করে যার `src` এবং `alt` অ্যাট্রিবিউট রয়েছে। `<img />` এইচটিএমএল-এর মতো লেখা হয়, কিন্তু এটি আসলে পিছনে জাভাস্ক্রিপ্ট! এই সিনট্যাক্সকে [JSX](/learn/writing-markup-with-jsx) বলা হয়, এবং এটি আপনাকে জাভাস্ক্রিপ্টের মধ্যে মার্কআপ এম্বেড করতে দেয়।
+
+রিটার্ন স্টেটমেন্টগুলি এই কম্পোনেন্টের মতো একটি লাইনে লেখা যেতে পারে:
 
 ```js
 return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
@@ -118,9 +122,9 @@ Without parentheses, any code on the lines after `return` [will be ignored](http
 
 </Pitfall>
 
-## Using a component {/*using-a-component*/}
+## কম্পোনেন্ট এর ব্যবহার {/*using-a-component*/}
 
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+আপনি যখন `Profile` কম্পোনেন্টটি সংজ্ঞায়িত করেছেন, আপনি এটি অন্যান্য কম্পোনেন্টের ভিতরে নেস্ট করতে পারেন। উদাহরণস্বরূপ, আপনি একটি `Gallery` কম্পোনেন্ট এক্সপোর্ট করতে পারেন যা একাধিক `Profile` কম্পোনেন্ট ব্যবহার করে:
 
 <Sandpack>
 
@@ -152,14 +156,12 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-### What the browser sees {/*what-the-browser-sees*/}
-
-Notice the difference in casing:
+### ব্রাউজার কী দেখে {/*what-the-browser-sees*/}
 
-* `<section>` is lowercase, so React knows we refer to an HTML tag.
-* `<Profile />` starts with a capital `P`, so React knows that we want to use our component called `Profile`.
-
-And `Profile` contains even more HTML: `<img />`. In the end, this is what the browser sees:
+লেটার কেসিং-এর পার্থক্য লক্ষ্য করুন:
+- `<section>` ছোট হাতের অক্ষরে, তাই React জানে আমরা একটি HTML ট্যাগ উল্লেখ করছি।
+- `<Profile />` বড় হাতের `P` দিয়ে শুরু হয়েছে, তাই React জানে যে আমরা `Profile` নামের কম্পোনেন্টটি ব্যবহার করতে চাই।
+এবং `Profile`-এ আরও HTML রয়েছে: `<img />`। শেষ পর্যন্ত, ব্রাউজার এটিই দেখে:
 
 ```html
 <section>
@@ -170,15 +172,15 @@ And `Profile` contains even more HTML: `<img />`. In the end, this is what the b
 </section>
 ```
 
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### কম্পোনেন্ট নেস্টিং এবং সংগঠিত করা {/*nesting-and-organizing-components*/}
 
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+কম্পোনেন্টগুলি নিয়মিত জাভাস্ক্রিপ্ট ফাংশন, তাই আপনি একি ফাইলে একাধিক কম্পোনেন্ট রাখতে পারেন। যখন কম্পোনেন্টগুলি তুলনামূলকভাবে ছোট বা একে অপরের সাথে ঘনিষ্ঠভাবে সম্পর্কিত হয় তখন এটি সুবিধাজনক। যদি এই ফাইলটি ব্যস্ত হয়ে যায়, তবে আপনি সর্বদা `Profile`-কে একটি পৃথক ফাইলে স্থানান্তরিত করতে পারেন। আপনি শীঘ্রই [ইম্পোর্ট পেজে](/learn/importing-and-exporting-components) এটি করতে শিখবেন।
 
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+যেহেতু `Profile` কম্পোনেন্টগুলি `Gallery` এর ভিতরে রেন্ডার হয়—এমনকি কয়েকবার!—আমরা বলতে পারি যে `Gallery` একটি **প্যারেন্ট কম্পোনেন্ট,** যা প্রতিটি `Profile` কে "চাইল্ড" হিসেবে রেন্ডার করছে। এটি React-এর একটি অংশ: আপনি একবার একটি কম্পোনেন্ট সংজ্ঞায়িত করতে পারেন, এবং তারপর এটি যতবার এবং যত স্থানে ইচ্ছা ব্যবহার করতে পারেন।
 
 <Pitfall>
 
-Components can render other components, but **you must never nest their definitions:**
+কম্পোনেন্টগুলো অন্যান্য কম্পোনেন্ট রেন্ডার করতে পারে, তবে **আপনি কখনোই তাদের সংজ্ঞাগুলো নেস্ট করবেন না:**
 
 ```js {2-5}
 export default function Gallery() {
@@ -190,7 +192,7 @@ export default function Gallery() {
 }
 ```
 
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+উপরের খন্ড-কোডটি [অত্যন্ত ধীর এবং বাগ সৃষ্টি করে।](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) পরিবর্তে, প্রতিটি কম্পোনেন্ট শীর্ষ স্তরে সংজ্ঞায়িত করুন:
 
 ```js {5-8}
 export default function Gallery() {
@@ -203,34 +205,33 @@ function Profile() {
 }
 ```
 
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+যখন একটি চাইল্ড কম্পোনেন্টের একটি প্যারেন্ট থেকে কিছু ডেটার প্রয়োজন হয়, [এটি প্রপসের মাধ্যমে পাঠান](/learn/passing-props-to-a-component) সংজ্ঞাগুলি নেস্ট করার পরিবর্তে।
 
 </Pitfall>
 
 <DeepDive>
 
-#### Components all the way down {/*components-all-the-way-down*/}
+#### কম্পোনেন্টগুলি পুরোপুরি। {/*components-all-the-way-down*/}
 
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or if you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+আপনার React অ্যাপ্লিকেশন একটি "রুট" কম্পোনেন্ট দিয়ে শুরু হয়। সাধারণত, এটি নতুন প্রকল্প শুরু করার সময় স্বয়ংক্রিয়ভাবে তৈরি হয়। উদাহরণস্বরূপ, আপনি যদি [CodeSandbox](https://codesandbox.io/) ব্যবহার করেন বা [Next.js](https://nextjs.org/) ফ্রেমওয়ার্ক ব্যবহার করেন, তবে রুট কম্পোনেন্টটি `pages/index.js`-এ সংজ্ঞায়িত হয়। এই উদাহরণগুলিতে, আপনি রুট কম্পোনেন্টগুলি এক্সপোর্ট করছেন।
 
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+বেশিরভাগ React অ্যাপ্লিকেশন পুরোপুরি কম্পোনেন্ট ব্যবহার করে। এর মানে হল আপনি শুধুমাত্র পুনরায় ব্যবহারযোগ্য অংশগুলির জন্য যেমন বোতামগুলির জন্য কম্পোনেন্ট ব্যবহার করবেন না, বরং বড় অংশগুলির জন্য যেমন সাইডবার, তালিকা এবং অবশেষে সম্পূর্ণ পৃষ্ঠা! কম্পোনেন্টগুলি UI কোড এবং মার্কআপ সংগঠিত করার একটি সুবিধাজনক উপায়, এমনকি যদি তাদের মধ্যে কিছু কেবল একবারই ব্যবহার করা হয়।
 
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+[React-ভিত্তিক ফ্রেমওয়ার্কগুলি](/learn/start-a-new-react-project) এটি একটি পদক্ষেপ এগিয়ে নিয়ে যায়। খালি HTML ফাইল ব্যবহার করার পরিবর্তে এবং React-কে JavaScript দিয়ে পৃষ্ঠাটি "নিয়ন্ত্রণ" করতে দেওয়ার পরিবর্তে, তারা *অটোমেটিক্যালি* আপনার React কম্পোনেন্টগুলি থেকে HTML তৈরি করে। এটি আপনার অ্যাপ্লিকেশনকে JavaScript কোড লোড হওয়ার আগে কিছু কনটেন্ট প্রদর্শন করার অনুমতি দেয়।
 
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+তবুও, অনেক ওয়েবসাইট শুধুমাত্র বিদ্যমান HTML পৃষ্ঠাগুলিতে [ইন্টারঅ্যাকটিভিটি যুক্ত করতে React ব্যবহার করে।](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) তাদের সম্পূর্ণ পৃষ্ঠার জন্য একটি একক রুট কম্পোনেন্টের পরিবর্তে অনেক রুট কম্পোনেন্ট রয়েছে। আপনি যতটুকু—অথবা যত কম—React ব্যবহার করতে চান ততটুকু ব্যবহার করতে পারেন।
 
 </DeepDive>
 
 <Recap>
 
-You've just gotten your first taste of React! Let's recap some key points.
-
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+আপনি মাত্রই React-এর প্রথম টেস্ট পেয়েছেন! কিছু মূল পয়েন্ট পুনরায় সংক্ষেপে দেখা যাক।
+- React আপনাকে কম্পোনেন্ট তৈরি করতে দেয়, **আপনার অ্যাপের জন্য পুনঃব্যবহারযোগ্য UI উপাদান।**
+- একটি React অ্যাপে, প্রতিটি UI উপাদান একটি কম্পোনেন্ট।    
+- React কম্পোনেন্ট হলো সাধারণ JavaScript ফাংশন শুধুমাত্র:    
+    1. তাদের নাম সর্বদা বড় হাতের অক্ষরে শুরু হয়।
+    2. তারা তাদের মার্কআপ JSX-এ রিটার্ন করে।
 
-  1. Their names always begin with a capital letter.
-  2. They return JSX markup.
 
 </Recap>
 
@@ -240,7 +241,7 @@ You've just gotten your first taste of React! Let's recap some key points.
 
 #### Export the component {/*export-the-component*/}
 
-This sandbox doesn't work because the root component is not exported:
+এই স্যান্ডবক্সটি কাজ করে না কারণ রুট কম্পোনেন্টটি এক্সপোর্ট করা হয়নি:
 
 <Sandpack>
 
@@ -261,11 +262,11 @@ img { height: 181px; }
 
 </Sandpack>
 
-Try to fix it yourself before looking at the solution!
+সমাধান দেখার আগে এটি নিজে ঠিক করার চেষ্টা করুন!
 
 <Solution>
 
-Add `export default` before the function definition like so:
+ফাংশন সংজ্ঞার আগে `export default` যোগ করুন এইভাবে:
 
 <Sandpack>
 
@@ -286,17 +287,17 @@ img { height: 181px; }
 
 </Sandpack>
 
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+আপনি হয়তো ভাবছেন কেন শুধু `export` লেখা এই উদাহরণটি ঠিক করতে যথেষ্ট নয়। আপনি [Importing and Exporting Components](/learn/importing-and-exporting-components) `export` এবং `export default` এর মধ্যে পার্থক্য শিখতে পারেন।
 
 </Solution>
 
 #### Fix the return statement {/*fix-the-return-statement*/}
 
-Something isn't right about this `return` statement. Can you fix it?
+এই `return` স্টেটমেন্টের কিছু সমস্যা আছে। আপনি কি এটি ঠিক করতে পারেন?
 
 <Hint>
 
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+আপনি এটি ঠিক করার চেষ্টা করার সময় "Unexpected token" ত্রুটি পেতে পারেন। সেই ক্ষেত্রে, পরীক্ষা করুন যে সেমিকোলনটি বন্ধ করা বন্ধনীর *পরে* রয়েছে। `return ( )` এর ভিতরে সেমিকোলন রেখে দেওয়া ত্রুটি সৃষ্টি করবে।
 
 </Hint>
 
@@ -318,7 +319,7 @@ img { height: 180px; }
 
 <Solution>
 
-You can fix this component by moving the return statement to one line like so:
+আপনি এই কম্পোনেন্টটি ঠিক করতে `return` স্টেটমেন্টটিকে এক লাইনে স্থানান্তরিত করতে পারেন এইভাবে:
 
 <Sandpack>
 
@@ -334,7 +335,7 @@ img { height: 180px; }
 
 </Sandpack>
 
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+অথবা `return` এর ঠিক পরে খোলা বন্ধনীতে ফেরত দেওয়া JSX মার্কআপটি মোড়ানো:
 
 <Sandpack>
 
@@ -359,7 +360,7 @@ img { height: 180px; }
 
 #### Spot the mistake {/*spot-the-mistake*/}
 
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+`Profile` কম্পোনেন্টটি কীভাবে ডিক্লেয়ার এবং ব্যবহার করা হয়েছে তাতে কিছু ভুল রয়েছে। আপনি কি ভুলটি খুঁজে পেতে পারবেন? (React কীভাবে কম্পোনেন্টগুলোকে সাধারণ HTML ট্যাগ থেকে আলাদা করে তা মনে রাখার চেষ্টা করুন!)
 
 <Sandpack>
 
@@ -393,9 +394,9 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 <Solution>
 
-React component names must start with a capital letter.
+React কম্পোনেন্টের নামগুলি একটি বড় অক্ষর দিয়ে শুরু হতে হবে।
 
-Change `function profile()` to `function Profile()`, and then change every `<profile />` to `<Profile />`:
+`function profile()` কে `function Profile()`-এ পরিবর্তন করুন, এবং তারপর প্রতিটি `<profile />`-কে `<Profile />`-এ পরিবর্তন করুন:
 
 <Sandpack>
 
@@ -431,7 +432,7 @@ img { margin: 0 10px 10px 0; }
 
 #### Your own component {/*your-own-component*/}
 
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `<h1>Good job!</h1>`. Don't forget to export it!
+শূন্য থেকে একটি কম্পোনেন্ট লিখুন। আপনি এটি যেকোনো বৈধ নাম দিতে পারেন এবং যেকোনো মার্কআপ ফেরত দিতে পারেন। যদি আপনার ধারণার অভাব হয়, তবে আপনি একটি `Congratulations` কম্পোনেন্ট লিখতে পারেন যা `<h1>Good job!</h1>` দেখায়। এটি এক্সপোর্ট করতে ভুলবেন না!
 
 <Sandpack>