Corrections

src/content/learn/reacting-to-input-with-state.md

@@ -4,35 +4,35 @@ title: State ব্যবহার করে ইনপুটের উপর প
 
 <Intro>
 
-React UI ম্যানিপুলেট করার জন্য একটি ঘোষণামূলক উপায় সরবরাহ করে। UI-র প্রতিটি টুকরো সরাসরি ম্যানিপুলেট করার পরিবর্তে, আপনি আপনার কম্পোনেন্টের বিভিন্ন state-র বর্ণনা করেন, এবং ব্যবহারকারীর input-র জন্য তাদের মাঝে switch করেন। এটি UI-র বিষয়ে ডিজাইনাররা কীভাবে চিন্তা করে, তার মতো।
+React UI ম্যানিপুলেট করার জন্য একটি declarative উপায় সরবরাহ করে। UI-র প্রতিটি টুকরো সরাসরি ম্যানিপুলেট করার পরিবর্তে, আপনি আপনার কম্পোনেন্টের বিভিন্ন state-র বর্ণনা করেন, এবং ব্যবহারকারীর input-র জন্য তাদের মাঝে switch করেন। এটি UI-র বিষয়ে ডিজাইনাররা কীভাবে চিন্তা করে, তার মতো।
 
 </Intro>
 
 <YouWillLearn>
 
-* কিভাবে declarative UI প্রোগ্রামিং অপরিহার্য UI প্রোগ্রামিং থেকে আলাদা
+* কিভাবে declarative UI প্রোগ্রামিং imperative UI প্রোগ্রামিং থেকে আলাদা
 * আপনার কম্পোনেন্ট যে বিভিন্ন ভিজ্যুয়াল অবস্থায় থাকতে পারে তা কীভাবে গণনা করবেন
 * কোড থেকে বিভিন্ন ভিজ্যুয়াল স্টেটের মধ্যে পরিবর্তনগুলি কীভাবে ট্রিগার করবেন
 
 </YouWillLearn>
 
-## কীভাবে ঘোষণামূলক UI অপরিহার্য UI-র সাথে তুলনা করে {/*how-declarative-ui-compares-to-imperative*/}
+## কীভাবে Declarative UI Imperative UI-র সাথে তুলনা করে {/*how-declarative-ui-compares-to-imperative*/}
 
 আপনি যখন UI ইন্টারঅ্যাকশন ডিজাইন করেন, আপনি সম্ভবত ব্যবহারকারীর ক্রিয়াকলাপের প্রতিক্রিয়ায় UI কীভাবে *পরিবর্তিত*  হয় সে সম্পর্কে চিন্তা করেন। এমন একটি ফর্ম বিবেচনা করুন যা ব্যবহারকারীকে একটি উত্তর জমা দিতে দেয়:
 
-* আপনি যখন ফর্মে কিছু টাইপ করেন, তখন "জমা দিন" বোতামটি **সক্রিয় হয়ে যায়।**
-* আপনি যখন "জমা দিন" টিপুন, ফর্ম এবং বোতাম উভয়ই **নিষ্ক্রিয় হয়ে যায়** এবং একটি **স্পিনার উপস্থিত হয়।**
+* আপনি যখন ফর্মে কিছু টাইপ করেন, তখন "Submit" বোতামটি **সক্রিয় হয়ে যায়।**
+* আপনি যখন "Submit" বোতামটি টিপবেন, ফর্ম এবং বোতাম দুটোই **নিষ্ক্রিয় হয়ে যায়** এবং একটি **স্পিনার উপস্থিত হয়।**
 * নেটওয়ার্ক অনুরোধ সফল হলে, ফর্মটি **লুকানো হবে** এবং "Thank you" বার্তাটি **প্রদর্শিত হবে।**
 * নেটওয়ার্ক অনুরোধ ব্যর্থ হলে, একটি ত্রুটি বার্তা **প্রদর্শিত হবে**, এবং ফর্ম আবার **সক্রিয় হয়ে যাবে ।**
 
 
-**অপরিহার্য প্রোগ্রামিং**-এ, আপনি কীভাবে ইন্টারঅ্যাকশন বাস্তবায়ন করেন তার সাথে উপরে কি লেখা আছে সরাসরি মিলে যায়। এইমাত্র যা ঘটেছে তার উপর নির্ভর করে UI ম্যানিপুলেট করার জন্য আপনাকে সঠিক নির্দেশাবলী লিখতে হবে। এটি সম্পর্কে চিন্তা করার আরেকটি উপায় এখানে রয়েছে: কল্পনা করুন যে একজন গাড়িতে কারও পাশে চড়ছেন এবং তাদের বলুন কোথায় যেতে হবে।
+**Imperative প্রোগ্রামিং**-এ, আপনি কীভাবে ইন্টারঅ্যাকশন বাস্তবায়ন করেন তার সাথে উপরে কি লেখা আছে সরাসরি মিলে যায়। এইমাত্র যা ঘটেছে তার উপর নির্ভর করে UI ম্যানিপুলেট করার জন্য আপনাকে সঠিক নির্দেশাবলী লিখতে হবে। এটি সম্পর্কে চিন্তা করার আরেকটি উপায় এখানে রয়েছে: কল্পনা করুন যে একজন গাড়িতে কারও পাশে চড়ছেন এবং তাদের বলুন কোথায় যেতে হবে।
 
 <Illustration src="/images/docs/illustrations/i_imperative-ui-programming.png"  alt="In a car driven by an anxious-looking person representing JavaScript, a passenger orders the driver to execute a sequence of complicated turn by turn navigations." />
 
-তারা জানে না আপনি কোথায় যেতে চান, তারা শুধু আপনার আদেশ অনুসরণ করে। (এবং যদি আপনি ভুল দিকনির্দেশ পান, তাহলে আপনি ভুল জায়গায় পৌঁছে যাবেন!) এটাকে *অপরিহার্য*  বলা হয় কারণ আপনাকে স্পিনার থেকে বোতাম পর্যন্ত প্রতিটি উপাদানকে "কমান্ড" করতে হবে, কম্পিউটারকে কীভাবে UI আপডেট করতে হবে তা বলতে হবে
+তারা জানে না আপনি কোথায় যেতে চান, তারা শুধু আপনার আদেশ অনুসরণ করে। (এবং যদি আপনি ভুল দিকনির্দেশ দেন, তাহলে আপনি ভুল জায়গায় পৌঁছে যাবেন!) এটাকে *imperative*  বলা হয় কারণ আপনাকে স্পিনার থেকে বোতাম পর্যন্ত প্রতিটি কম্পনেন্টকে "কমান্ড" করতে হবে, কম্পিউটারকে কীভাবে UI আপডেট করতে হবে তা বলতে হবে।
 
-অপরিহার্য UI প্রোগ্রামিংয়ের এই উদাহরণে, ফর্মটি  React *ব্যবহার না করেই*  তৈরি করা হয়েছে। এটি শুধুমাত্র ব্রাউজার [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) ব্যবহার করে:
+Imperative UI প্রোগ্রামিংয়ের এই উদাহরণে, ফর্মটি  React *ব্যবহার না করেই*  তৈরি করা হয়েছে। এটি শুধুমাত্র ব্রাউজার [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) ব্যবহার করে:
 
 <Sandpack>
 
@@ -132,21 +132,21 @@ body { font-family: sans-serif; margin: 20px; padding: 0; }
 
 </Sandpack>
 
-UI ম্যানিপুলেট করা অপরিহার্যভাবে বিচ্ছিন্ন উদাহরণগুলির জন্য যথেষ্ট ভাল কাজ করে, তবে আরও জটিল সিস্টেমে এটি পরিচালনা করা দ্রুতগতিতে আরও কঠিন হয়ে যায়। এই মত বিভিন্ন ফর্ম পূর্ণ একটি পৃষ্ঠা আপডেট করার কল্পনা করুন. একটি নতুন UI উপাদান বা একটি নতুন ইন্টারঅ্যাকশন যোগ করার জন্য আপনি একটি বাগ (উদাহরণস্বরূপ, কিছু দেখাতে বা লুকাতে ভুলে গেছেন) তা নিশ্চিত করতে সমস্ত বিদ্যমান কোড সাবধানে পরীক্ষা করতে হবে
+UI ম্যানিপুলেট করা imperative ভাবে বিচ্ছিন্ন উদাহরণগুলির জন্য যথেষ্ট ভাল কাজ করে, তবে আরও জটিল সিস্টেমে এটি পরিচালনা করা দ্রুতগতিতে আরও কঠিন হয়ে যায়। এই মত বিভিন্ন ফর্ম পূর্ণ একটি পৃষ্ঠা আপডেট করার কল্পনা করুন. একটি নতুন UI উপাদান বা একটি নতুন ইন্টারঅ্যাকশন যোগ করার জন্য আপনি একটি বাগ (উদাহরণস্বরূপ, কিছু দেখাতে বা লুকাতে ভুলে গেছেন) তা নিশ্চিত করতে সমস্ত বিদ্যমান কোড সাবধানে পরীক্ষা করতে হবে
 
 React বানানোই হয়েছিল এই সমস্যাটি সমাধান করার জন্য।
 
-React-এ, আপনি সরাসরি UI-কে ম্যানিপুলেট করবেন না--অর্থাৎ আপনি সরাসরি উপাদানগুলি সক্রিয়, নিষ্ক্রিয়, দেখান বা লুকাবেন না। পরিবর্তে, আপনি **কী দেখাতে চান তা ঘোষণা করেন** এবং React ভেবে নেয় কিভাবে UI আপডেট করতে হবে। একটি ট্যাক্সিতে উঠার কথা ভাবুন এবং ড্রাইভারকে ঠিক কোথায় ঘুরতে হবে না বোলে বলুন আপনি কোথায় যেতে চান । আপনাকে সেখানে নিয়ে যাওয়া ড্রাইভারের কাজ, এবং তারা এমন কিছু শর্টকাটও জানতে পারে যা আপনি বিবেচনা করেননি!
+React-এ, আপনি সরাসরি UI-কে ম্যানিপুলেট করবেন না--অর্থাৎ আপনি সরাসরি কম্পনেন্টগুলি সক্রিয়, নিষ্ক্রিয়, দেখান বা লুকাবেন না। পরিবর্তে, আপনি **কী দেখাতে চান তা ঘোষণা করেন** এবং React ভেবে নেয় কিভাবে UI আপডেট করতে হবে। একটি ট্যাক্সিতে উঠার কথা ভাবুন এবং ড্রাইভারকে ঠিক কোথায় ঘুরতে হবে না বোলে বলুন আপনি কোথায় যেতে চান । আপনাকে সেখানে নিয়ে যাওয়া ড্রাইভারের কাজ, এবং তারা এমন কিছু শর্টকাটও জানতে পারে যা আপনি বিবেচনা করেননি!
 
 <Illustration src="/images/docs/illustrations/i_declarative-ui-programming.png" alt="In a car driven by React, a passenger asks to be taken to a specific place on the map. React figures out how to do that." />
 
 ## Declarative ভাবে UI সম্পর্কে চিন্তা করা  {/*thinking-about-ui-declaratively*/}
 
-আপনি উপরে দেখেছেন কিভাবে একটি ফর্ম অপরিহার্যভাবে বাস্তবায়ন করতে হয়। React-এ কীভাবে চিন্তা করতে হয় তা আরও ভালোভাবে বোঝার জন্য, আপনি React-এ এই UI পুনরায় প্রয়োগ করবেন:
+আপনি উপরে দেখেছেন কিভাবে একটি ফর্ম imperative ভাবে বাস্তবায়ন করতে হয়। React-এ কীভাবে চিন্তা করতে হয় তা আরও ভালোভাবে বোঝার জন্য, আপনি React-এ এই UI পুনরায় প্রয়োগ করবেন:
 
 1. কম্পোনেন্ট এর বিভিন্ন ভিজুয়্যাল states **চিহ্নিত** করা
 2. State-র পরিবর্তনের কারণ কী তা **নির্ধারণ** করুন
-3. `useState` ব্যবহার করে মেমরিতে রাষ্ট্রের **প্রতিনিধিত্ব** করুন
+3. `useState` ব্যবহার করে মেমরিতে state-র **প্রতিনিধিত্ব** করুন
 4. কোনো অপ্রয়োজনীয় state ভেরিয়েবল কে **সরিয়ে** দিন
 5. state সেট করতে ইভেন্ট হ্যান্ডলারদের সাথে **সংযোগ** করুন
 
@@ -156,11 +156,11 @@ React-এ, আপনি সরাসরি UI-কে ম্যানিপুল
 
 প্রথমত, আপনাকে ব্যবহারকারী দেখতে পারে এমন UI এর সমস্ত ভিন্ন "state" কল্পনা করতে হবে:
 
-* **খালি**: ফর্মটিতে একটি নিষ্ক্রিয় "জমা দিন" বোতাম রয়েছে।
-* **টাইপিং**: ফর্মটিতে একটি সক্রিয় "জমা দিন" বোতাম রয়েছে।
-* **জমা করা**: ফর্ম সম্পূর্ণরূপে অক্ষম। স্পিনার দেখানো হয়।
-* **সফল**: একটি ফর্মের পরিবর্তে "ধন্যবাদ" বার্তাটি দেখানো হয়েছে।
-* **ত্রুটি**: টাইপিং অবস্থার মতো, কিন্তু একটি অতিরিক্ত ত্রুটি বার্তা সহ.
+* **Empty**: ফর্মটিতে একটি নিষ্ক্রিয় "Submit" বোতাম রয়েছে।
+* **Typing**: ফর্মটিতে একটি সক্রিয় "Submit" বোতাম রয়েছে।
+* **Submitting**: ফর্ম সম্পূর্ণরূপে অক্ষম। স্পিনার দেখানো হয়।
+* **Success**: একটি ফর্মের পরিবর্তে "Thank You" বার্তাটি দেখানো হয়েছে।
+* **Error**: Typing অবস্থার মতো, কিন্তু একটি অতিরিক্ত ত্রুটি বার্তা সহ.
 
 ঠিক একজন ডিজাইনারের মতো, আপনি যুক্তি যোগ করার আগে বিভিন্ন state-র জন্য "মকআপ" বা "মক" তৈরি করতে চাইবেন। উদাহরণস্বরূপ, এখানে ফর্মের শুধুমাত্র ভিজ্যুয়াল অংশের জন্য একটি মক। এই মকআপটি `status` নামক একটি prop দ্বারা নিয়ন্ত্রিত হয় যার একটি ডিফল্ট মান `'empty'`:
 
@@ -243,7 +243,7 @@ export default function Form({
 
 #### একবারে অনেক ভিজ্যুয়াল state প্রদর্শন করা{/*displaying-many-visual-states-at-once*/}
 
-যদি একটি উপাদানের অনেকগুলি ভিজ্যুয়াল state থাকে, তবে সেগুলিকে এক পৃষ্ঠায় দেখানো সুবিধাজনক হতে পারে:
+যদি একটি কম্পোনেন্টের অনেকগুলি ভিজ্যুয়াল state থাকে, তবে সেগুলিকে এক পৃষ্ঠায় দেখানো সুবিধাজনক হতে পারে:
 
 <Sandpack>
 
@@ -1232,5 +1232,4 @@ label { display: block; margin-bottom: 20px; }
 The `updateDOM` function you wrote shows what React does under the hood when you set the state. (However, React also avoids touching the DOM for properties that have not changed since the last time they were set.)
 
 </Solution>
-
 </Challenges>