Task/preserve state #73

S907 · 2023-07-10T08:46:49Z

No description provided.

moshfiqrony

Thanks for the contribution. Please read the whole translation one more time. It seems to have very irrelevant translation for Bangla. Sometime doing the bangla of english words is not translation. You have to understand the meaning and translate accordingly.

moshfiqrony · 2023-07-17T04:16:56Z

src/content/learn/preserving-and-resetting-state.md

 ---

 <Intro>

-State is isolated between components. React keeps track of which state belongs to which component based on their place in the UI tree. You can control when to preserve state and when to reset it between re-renders.
+State কম্পোনেন্টের মধ্যে ভিন্ন রাখা হয়। React একটি UI ট্রি এর ভিতরে কোন State কোন কম্পোনেন্টের সঙ্গে সংযোগস্থলে পরিচয় রেখে থাকে। আপনি নিয়ন্ত্রণ করতে পারেন যখন অবস্থা সংরক্ষণ করতে হবে এবং যখন রি-রেন্ডার এর মধ্যে তা পুনরায় সেট করতে হবে। 


Sentence gulo onek kothin hoyeche. Please take another tab at it and try to write in simple bangla.

moshfiqrony · 2023-07-17T04:17:58Z

src/content/learn/preserving-and-resetting-state.md

-* How to force React to reset component's state
-* How keys and types affect whether the state is preserved
+* React কীভাবে কম্পোনেন্ট স্ট্রাকচারগুলি "দেখে"
+* React কোন সময়ে State সংরক্ষণ বা রিসেট করতে সিলেক্ট করে


Suggested change

* React কোন সময়ে State সংরক্ষণ বা রিসেট করতে সিলেক্ট করে

* React কোন সময়ে State সংরক্ষণ বা রিসেট করে

moshfiqrony · 2023-07-17T04:19:04Z

src/content/learn/preserving-and-resetting-state.md

+* React কীভাবে কম্পোনেন্ট স্ট্রাকচারগুলি "দেখে"
+* React কোন সময়ে State সংরক্ষণ বা রিসেট করতে সিলেক্ট করে
+* React এ কীভাবে কম্পোনেন্টের অবস্থা রিসেট করতে বাধ্য করা যায়
+* React এ State সংরক্ষণ কি ভাবে প্রভাহিত হয় কীস (keys) এবং প্রকার (types) এর জন্য


Suggested change

* React এ State সংরক্ষণ কি ভাবে প্রভাহিত হয় কীস (keys) এবং প্রকার (types) এর জন্য

* React এ State সংরক্ষণ কি ভাবে প্রভাহিত হয় keys এবং types এর জন্য

*প্রভাবিত

moshfiqrony · 2023-07-17T04:24:48Z

src/content/learn/preserving-and-resetting-state.md


-React also uses tree structures to manage and model the UI you make. React makes **UI trees** from your JSX. Then React DOM updates the browser DOM elements to match that UI tree. (React Native translates these trees into elements specific to mobile platforms.)
+React সাধারণতঃ UI গড়ে তুলতে এবং পরিচালনা করতে ট্রি স্ট্রাকচার ব্যবহার করে। React JSX থেকে UI ট্রি তৈরি করে। তারপরে React DOM ব্রাউজারের DOM উপাদানগুলি আপডেট করে যাতে সেই UI ট্রির সাথে মিল খায়। (React Native এই ট্রিগুলি মোবাইল প্ল্যাটফর্মের উপাদানগুলির জন্য প্রতিষ্ঠান করে।)।


Suggested change

React সাধারণতঃ UI গড়ে তুলতে এবং পরিচালনা করতে ট্রি স্ট্রাকচার ব্যবহার করে। React JSX থেকে UI ট্রি তৈরি করে। তারপরে React DOM ব্রাউজারের DOM উপাদানগুলি আপডেট করে যাতে সেই UI ট্রির সাথে মিল খায়। (React Native এই ট্রিগুলি মোবাইল প্ল্যাটফর্মের উপাদানগুলির জন্য প্রতিষ্ঠান করে।)।

React সাধারণতঃ UI গড়ে তুলতে এবং পরিচালনা করতে ট্রি স্ট্রাকচার ব্যবহার করে। React JSX থেকে UI ট্রি তৈরি করে। তারপর React DOM সেই UI ট্রির সাথে মিল রেখে ব্রাউজারের DOM উপাদানগুলি আপডেট করে। (React Native এই ট্রিগুলি মোবাইল প্ল্যাটফর্মের উপাদানগুলির জন্য তৈরি করে।)।

moshfiqrony · 2023-07-17T04:27:46Z

src/content/learn/preserving-and-resetting-state.md


 </Diagram>

 </DiagramGroup>

-**These are two separate counters because each is rendered at its own position in the tree.** You don't usually have to think about these positions to use React, but it can be useful to understand how it works.
+**এগুলি দুটি আলাদা কাউন্টার কারণ প্রতিটি নিজস্ব অবস্থানে ট্রি এর মধ্যে রেন্ডার করা হয়েছে।** আপনাকে সাধারণতঃ রিয়েক্ট ব্যবহার করার সময় এই অবস্থানগুলি চিন্তা করতে হয় না, তবে কিভাবে এটি কার্য করে তা বোঝার জন্য এটা কার্যকর হতে পারে।


Suggested change

**এগুলি দুটি আলাদা কাউন্টার কারণ প্রতিটি নিজস্ব অবস্থানে ট্রি এর মধ্যে রেন্ডার করা হয়েছে।** আপনাকে সাধারণতঃ রিয়েক্ট ব্যবহার করার সময় এই অবস্থানগুলি চিন্তা করতে হয় না, তবে কিভাবে এটি কার্য করে তা বোঝার জন্য এটা কার্যকর হতে পারে।

**এগুলি দুটি আলাদা কাউন্টার কারণ প্রতিটি নিজস্ব অবস্থানে ট্রি এর মধ্যে রেন্ডার করা হয়েছে।** আপনাকে সাধারণতঃ React ব্যবহার করার সময় এই অবস্থানগুলি চিন্তা করতে হয় না, তবে কিভাবে এটি কার্য করে তা বোঝার জন্য এটা কার্যকর হতে পারে।

moshfiqrony · 2023-07-17T04:28:22Z

src/content/learn/preserving-and-resetting-state.md


-When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the UI tree.
+যখন আপনি কোন কম্পোনেন্টকে স্টেট দিন, আপনি সম্প্রতি মনে করতে পারেন যে স্টেটটি কেবলমাত্র কম্পোনেন্টের "ভিতরে" বসে থাকে। কিন্তু স্টেটটি প্রদত্তক্ষেত্রে বাস করে যেমন রিয়েক্টে। রিয়েক্ট প্রতিটি স্টেট টুকরা সঠিক কম্পোনেন্ট সঙ্গে যুক্ত করে রাখে যেখানে ঐ কম্পোনেন্টটি UI ট্রি এর মধ্যে অবস্থান করে।


Line ta porar shomoy ektu ajob lage.

like

যখন আপনি কোন কম্পোনেন্টকে স্টেট দিন,

কম্পোনেন্টের "ভিতরে" বসে থাকে।

Thank you, for the feedback ami changes gulo accordingly korchi then abar submit korbo tahole and help lagle discord ei janabo then.

Thanks for the 🚀 response

nomandhoni-cs · 2023-07-18T11:40:47Z

@nafistiham Bhai kindly ekbar review kore diyen. Ami kicu din holo gram e asci (Network er bahire ami)

nafistiham · 2023-07-18T11:58:24Z

Will do

nafistiham

আমরা যেভাবে অনুবাদ করে এসেছি, এখানে বেশ ভিন্নভাবে করা। যে কারণে আমি যদি প্রতিটা ক্ষেত্রে আমার যেটা হওয়া উচিত মনে হয়, লিখতে যাই, তাহলে বেশ অনেক গুলো বাক্যেই লিখতে হবে। তাই কিছু সাধারণ নির্দেশনা অনুসরণ করার অনুরোধ করব।
১। প্রতিটা অনুবাদ লাইনে লাইনে হবে। অর্থাৎ, ইংরেজিতে যে লাইন নম্বর, ঠিক অতটুকু অনুবাদ বাংলাতেও হবে। অন্য অনুবাদগুলো দেখলে বুঝতে পারবেন।
২। বেশ অনেক শব্দ যা ইংরেজি রেখে দিলেও হয় সেটা বাংলা করা হয়ে গেছে। অনেক জায়গায় খুবই সাধু বা তৎসম শব্দের ব্যবহার হয়েছে। একদম আক্ষরিক অনুবাদ আমরা করছি না। একজন আগ্রহী ডেভেলপার যাতে পড়ে বুঝে, এমন করলেই হবে। বাক্যের অনেক অংশই এ জন্য ইংরেজি বা বাংলা উচ্চারণে ইংরেজি করা থাকতে পারে।
৩। কোডের কমেন্ট ব্যতীত কিছুই বাংলা করা যাবে না। কোডের কোন অংশ যদি ব্যখ্যায় লেখা থাকে, যেমন বাটনের নাম বা কিছু সেটা অবশ্যই সেভাবেই রাখতে হবে।
৪। React লিখতে হবে। বাংলায় লেখা যাবে না।

এই বিষয়গুলো মাথায় রেখে আবার রিভিউ করুন। আশা করি সবারই এতে কষ্ট কম হবে, সময় বাচবে।

nafistiham · 2023-07-18T16:13:45Z

src/content/learn/preserving-and-resetting-state.md

+* React কীভাবে কম্পোনেন্ট স্ট্রাকচারগুলি "দেখে"
+* React কোন সময়ে State সংরক্ষণ বা রিসেট করতে সিলেক্ট করে
+* React এ কীভাবে কম্পোনেন্টের অবস্থা রিসেট করতে বাধ্য করা যায়
+* React এ State সংরক্ষণ কি ভাবে প্রভাহিত হয় কীস (keys) এবং প্রকার (types) এর জন্য


*প্রভাবিত

nafistiham · 2023-07-18T16:14:49Z

src/content/learn/preserving-and-resetting-state.md


 <DiagramGroup>

 <Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagram with three sections arranged horizontally. In the first section, there are three rectangles stacked vertically, with labels 'Component A', 'Component B', and 'Component C'. Transitioning to the next pane is an arrow with the React logo on top labeled 'React'. The middle section contains a tree of components, with the root labeled 'A' and two children labeled 'B' and 'C'. The next section is again transitioned using an arrow with the React logo on top labeled 'React'. The third and final section is a wireframe of a browser, containing a tree of 8 nodes, which has only a subset highlighted (indicating the subtree from the middle section).">

-From components, React creates a UI tree which React DOM uses to render the DOM
-
+কম্পোনেন্ট থেকে শুরু করে, React একটি UI ট্রি তৈরি করে যা React DOM ব্যবহার করে ডম রেন্ডার করতে।


৩১ নাম্বার লাইনে একটা নিউ লাইন ছিল। সেটা বাদ গেছে। আগের মত করে নিতে হবে।

DOM কে হয় উরা পেইজ জুড়ে DOM লিখতে হবে, অথবা ডম।
DOM লেখাই ভাল। সব ডম DOM করে ফেলতে হবে।

nafistiham · 2023-07-18T16:17:15Z

src/content/learn/preserving-and-resetting-state.md


 </Diagram>

 </DiagramGroup>


-React will keep the state around for as long as you render the same component at the same position. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
+React ততোক্ষণ State ধরে রাকবে যতক্ষণ একই পজিশনে একই কম্পোনেন্ট রেন্ডার করা হচ্ছে। এটা দেখতে, দুটি কাউন্টারের মান বাড়ানোর পর দ্বিতীয় কম্পোনেন্টটি সরানোর জন্য "দ্বিতীয় কাউন্টার রেন্ডার করুন" চেকবক্স আনচেক করুন, এবং তারপরে আবার সেইটি যুক্ত করতে আবার চেক করুন।


রাখবে*

nafistiham · 2023-07-18T16:17:41Z

src/content/learn/preserving-and-resetting-state.md


 <DiagramGroup>

 <Diagram name="preserving_state_remove_component" height={253} width={422} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is missing, and in its place is a yellow 'poof' image, highlighting the component being deleted from the tree.">

-Deleting a component
+কোম্পোনেন্টটি মুছে ফেলা হল


কম্পোনেন্টটি

nafistiham · 2023-07-18T16:18:34Z

src/content/learn/preserving-and-resetting-state.md


 </Diagram>

 </DiagramGroup>
-
-When you tick "Render the second counter", a second `Counter` and its state are initialized from scratch (`score = 0`) and added to the DOM.
+যখন আপনি "দ্বিতীয় কাউন্টার রেন্ডার করুন" টিক চিহ্নতে টিক করেন, তখন একটি দ্বিতীয় `Counter` এবং এর স্টেটটি শূন্য থেকে শুরু করা হয়  (`score = 0`) এবং এটি DOM-এ যুক্ত করা হয়।


বাটনের কথা বাংলা করা যাবে না। কারণ পেইজে ইংরেজি ই থাকছে।
Render the second counter
ই লিখতে হবে। যদি অন্য কোথাও বিষয়টা মিস করে থাকি, ঠিক করে নেবেন।

nafistiham · 2023-07-19T03:19:23Z

src/content/learn/preserving-and-resetting-state.md


 <Pitfall>

-Remember that **it's the position in the UI tree--not in the JSX markup--that matters to React!** This component has two `return` clauses with different `<Counter />` JSX tags inside and outside the `if`:
+


একটা লাইন অতিরিক্ত এসেছে। বাদ দিতে হবে।

nafistiham · 2023-07-19T03:20:06Z

src/content/learn/preserving-and-resetting-state.md


-In this example, there are two different `<Counter />` tags:
+## একই কম্পোনেন্ট একই অবস্থানে থাকলে State সংরক্ষিত থাকে {/*same-component-at-the-same-position-preserves-state*/}


এই জায়গা গুলো লাইনের হিসেবে মিলাতে হবে।

moshfiqrony · 2023-07-30T03:48:29Z

Any update on this?

S907 added 3 commits June 28, 2023 22:46

intro fix

6bf1493

isFancy part

2a8db1b

last commit

f2d4d57

vercel bot deployed to Preview July 10, 2023 08:47 View deployment

moshfiqrony mentioned this pull request Jul 17, 2023

Bengali Translation Progress #1

Open

moshfiqrony requested changes Jul 17, 2023

View reviewed changes

moshfiqrony requested review from nafistiham and nomandhoni-cs July 17, 2023 04:31

nafistiham requested changes Jul 19, 2023

View reviewed changes

nafistiham marked this pull request as draft August 10, 2023 10:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Task/preserve state #73

Task/preserve state #73

S907 commented Jul 10, 2023

moshfiqrony left a comment

moshfiqrony Jul 17, 2023

moshfiqrony Jul 17, 2023

moshfiqrony Jul 17, 2023

nafistiham Jul 18, 2023

moshfiqrony Jul 17, 2023

moshfiqrony Jul 17, 2023

moshfiqrony Jul 17, 2023

S907 Jul 17, 2023

moshfiqrony Jul 17, 2023

nomandhoni-cs commented Jul 18, 2023

nafistiham commented Jul 18, 2023

nafistiham left a comment •

edited

nafistiham Jul 18, 2023

nafistiham Jul 18, 2023

nafistiham Jul 18, 2023

nafistiham Jul 18, 2023

nafistiham Jul 18, 2023

nafistiham Jul 18, 2023

nafistiham Jul 19, 2023

nafistiham Jul 19, 2023

moshfiqrony commented Jul 30, 2023

	* React কোন সময়ে State সংরক্ষণ বা রিসেট করতে সিলেক্ট করে
	* React কোন সময়ে State সংরক্ষণ বা রিসেট করে

	* React এ State সংরক্ষণ কি ভাবে প্রভাহিত হয় কীস (keys) এবং প্রকার (types) এর জন্য
	* React এ State সংরক্ষণ কি ভাবে প্রভাহিত হয় keys এবং types এর জন্য


		React also uses tree structures to manage and model the UI you make. React makes UI trees from your JSX. Then React DOM updates the browser DOM elements to match that UI tree. (React Native translates these trees into elements specific to mobile platforms.)
		React সাধারণতঃ UI গড়ে তুলতে এবং পরিচালনা করতে ট্রি স্ট্রাকচার ব্যবহার করে। React JSX থেকে UI ট্রি তৈরি করে। তারপরে React DOM ব্রাউজারের DOM উপাদানগুলি আপডেট করে যাতে সেই UI ট্রির সাথে মিল খায়। (React Native এই ট্রিগুলি মোবাইল প্ল্যাটফর্মের উপাদানগুলির জন্য প্রতিষ্ঠান করে।)।


		When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the UI tree.
		যখন আপনি কোন কম্পোনেন্টকে স্টেট দিন, আপনি সম্প্রতি মনে করতে পারেন যে স্টেটটি কেবলমাত্র কম্পোনেন্টের "ভিতরে" বসে থাকে। কিন্তু স্টেটটি প্রদত্তক্ষেত্রে বাস করে যেমন রিয়েক্টে। রিয়েক্ট প্রতিটি স্টেট টুকরা সঠিক কম্পোনেন্ট সঙ্গে যুক্ত করে রাখে যেখানে ঐ কম্পোনেন্টটি UI ট্রি এর মধ্যে অবস্থান করে।


		<Pitfall>

		Remember that it's the position in the UI tree--not in the JSX markup--that matters to React! This component has two `return` clauses with different `<Counter />` JSX tags inside and outside the `if`:


		In this example, there are two different `<Counter />` tags:
		## একই কম্পোনেন্ট একই অবস্থানে থাকলে State সংরক্ষিত থাকে {/same-component-at-the-same-position-preserves-state/}

Task/preserve state #73

Are you sure you want to change the base?

Task/preserve state #73

Conversation

S907 commented Jul 10, 2023

moshfiqrony left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nomandhoni-cs commented Jul 18, 2023

nafistiham commented Jul 18, 2023

nafistiham left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moshfiqrony commented Jul 30, 2023

nafistiham left a comment •

edited