Conversation
moshfiqrony
left a comment
There was a problem hiding this comment.
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.
| <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 কোন কম্পোনেন্টের সঙ্গে সংযোগস্থলে পরিচয় রেখে থাকে। আপনি নিয়ন্ত্রণ করতে পারেন যখন অবস্থা সংরক্ষণ করতে হবে এবং যখন রি-রেন্ডার এর মধ্যে তা পুনরায় সেট করতে হবে। |
There was a problem hiding this comment.
Sentence gulo onek kothin hoyeche. Please take another tab at it and try to write in simple bangla.
| * How to force React to reset component's state | ||
| * How keys and types affect whether the state is preserved | ||
| * React কীভাবে কম্পোনেন্ট স্ট্রাকচারগুলি "দেখে" | ||
| * React কোন সময়ে State সংরক্ষণ বা রিসেট করতে সিলেক্ট করে |
There was a problem hiding this comment.
| * React কোন সময়ে State সংরক্ষণ বা রিসেট করতে সিলেক্ট করে | |
| * React কোন সময়ে State সংরক্ষণ বা রিসেট করে |
| * React কীভাবে কম্পোনেন্ট স্ট্রাকচারগুলি "দেখে" | ||
| * React কোন সময়ে State সংরক্ষণ বা রিসেট করতে সিলেক্ট করে | ||
| * React এ কীভাবে কম্পোনেন্টের অবস্থা রিসেট করতে বাধ্য করা যায় | ||
| * React এ State সংরক্ষণ কি ভাবে প্রভাহিত হয় কীস (keys) এবং প্রকার (types) এর জন্য |
There was a problem hiding this comment.
| * React এ State সংরক্ষণ কি ভাবে প্রভাহিত হয় কীস (keys) এবং প্রকার (types) এর জন্য | |
| * React এ State সংরক্ষণ কি ভাবে প্রভাহিত হয় keys এবং types এর জন্য |
| ব্রাউজার অনেক ধরনের ট্রি কাঠামো ব্যবহার করে থাকে UI মডেল করার জন্য। [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) HTML উপাদানগুলি প্রতিষ্ঠা করে, [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) একইভাবে CSS এর জন্য করে। এখানে [Accessibility tree](https://developer.mozilla.org/docs/Glossary/Accessibility_tree) নামক ট্রি আছে। | ||
|
|
||
| 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 এই ট্রিগুলি মোবাইল প্ল্যাটফর্মের উপাদানগুলির জন্য প্রতিষ্ঠান করে।)। |
There was a problem hiding this comment.
| React সাধারণতঃ UI গড়ে তুলতে এবং পরিচালনা করতে ট্রি স্ট্রাকচার ব্যবহার করে। React JSX থেকে UI ট্রি তৈরি করে। তারপরে React DOM ব্রাউজারের DOM উপাদানগুলি আপডেট করে যাতে সেই UI ট্রির সাথে মিল খায়। (React Native এই ট্রিগুলি মোবাইল প্ল্যাটফর্মের উপাদানগুলির জন্য প্রতিষ্ঠান করে।)। | |
| React সাধারণতঃ UI গড়ে তুলতে এবং পরিচালনা করতে ট্রি স্ট্রাকচার ব্যবহার করে। React JSX থেকে UI ট্রি তৈরি করে। তারপর React DOM সেই UI ট্রির সাথে মিল রেখে ব্রাউজারের DOM উপাদানগুলি আপডেট করে। (React Native এই ট্রিগুলি মোবাইল প্ল্যাটফর্মের উপাদানগুলির জন্য তৈরি করে।)। |
| </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. | ||
| **এগুলি দুটি আলাদা কাউন্টার কারণ প্রতিটি নিজস্ব অবস্থানে ট্রি এর মধ্যে রেন্ডার করা হয়েছে।** আপনাকে সাধারণতঃ রিয়েক্ট ব্যবহার করার সময় এই অবস্থানগুলি চিন্তা করতে হয় না, তবে কিভাবে এটি কার্য করে তা বোঝার জন্য এটা কার্যকর হতে পারে। |
There was a problem hiding this comment.
| **এগুলি দুটি আলাদা কাউন্টার কারণ প্রতিটি নিজস্ব অবস্থানে ট্রি এর মধ্যে রেন্ডার করা হয়েছে।** আপনাকে সাধারণতঃ রিয়েক্ট ব্যবহার করার সময় এই অবস্থানগুলি চিন্তা করতে হয় না, তবে কিভাবে এটি কার্য করে তা বোঝার জন্য এটা কার্যকর হতে পারে। | |
| **এগুলি দুটি আলাদা কাউন্টার কারণ প্রতিটি নিজস্ব অবস্থানে ট্রি এর মধ্যে রেন্ডার করা হয়েছে।** আপনাকে সাধারণতঃ React ব্যবহার করার সময় এই অবস্থানগুলি চিন্তা করতে হয় না, তবে কিভাবে এটি কার্য করে তা বোঝার জন্য এটা কার্যকর হতে পারে। |
| ## State ট্রির একটি অবস্থানের সাথে বাঁধা রয়েছে {/*state-is-tied-to-a-position-in-the-tree*/} | ||
|
|
||
| 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 ট্রি এর মধ্যে অবস্থান করে। |
There was a problem hiding this comment.
Line ta porar shomoy ektu ajob lage.
like
- যখন আপনি কোন কম্পোনেন্টকে স্টেট দিন,
- কম্পোনেন্টের "ভিতরে" বসে থাকে।
There was a problem hiding this comment.
Thank you, for the feedback ami changes gulo accordingly korchi then abar submit korbo tahole and help lagle discord ei janabo then.
There was a problem hiding this comment.
Thanks for the 🚀 response
|
@nafistiham Bhai kindly ekbar review kore diyen. Ami kicu din holo gram e asci (Network er bahire ami) |
|
Will do |
There was a problem hiding this comment.
আমরা যেভাবে অনুবাদ করে এসেছি, এখানে বেশ ভিন্নভাবে করা। যে কারণে আমি যদি প্রতিটা ক্ষেত্রে আমার যেটা হওয়া উচিত মনে হয়, লিখতে যাই, তাহলে বেশ অনেক গুলো বাক্যেই লিখতে হবে। তাই কিছু সাধারণ নির্দেশনা অনুসরণ করার অনুরোধ করব।
১। প্রতিটা অনুবাদ লাইনে লাইনে হবে। অর্থাৎ, ইংরেজিতে যে লাইন নম্বর, ঠিক অতটুকু অনুবাদ বাংলাতেও হবে। অন্য অনুবাদগুলো দেখলে বুঝতে পারবেন।
২। বেশ অনেক শব্দ যা ইংরেজি রেখে দিলেও হয় সেটা বাংলা করা হয়ে গেছে। অনেক জায়গায় খুবই সাধু বা তৎসম শব্দের ব্যবহার হয়েছে। একদম আক্ষরিক অনুবাদ আমরা করছি না। একজন আগ্রহী ডেভেলপার যাতে পড়ে বুঝে, এমন করলেই হবে। বাক্যের অনেক অংশই এ জন্য ইংরেজি বা বাংলা উচ্চারণে ইংরেজি করা থাকতে পারে।
৩। কোডের কমেন্ট ব্যতীত কিছুই বাংলা করা যাবে না। কোডের কোন অংশ যদি ব্যখ্যায় লেখা থাকে, যেমন বাটনের নাম বা কিছু সেটা অবশ্যই সেভাবেই রাখতে হবে।
৪। React লিখতে হবে। বাংলায় লেখা যাবে না।
এই বিষয়গুলো মাথায় রেখে আবার রিভিউ করুন। আশা করি সবারই এতে কষ্ট কম হবে, সময় বাচবে।
| * React কীভাবে কম্পোনেন্ট স্ট্রাকচারগুলি "দেখে" | ||
| * React কোন সময়ে State সংরক্ষণ বা রিসেট করতে সিলেক্ট করে | ||
| * React এ কীভাবে কম্পোনেন্টের অবস্থা রিসেট করতে বাধ্য করা যায় | ||
| * React এ State সংরক্ষণ কি ভাবে প্রভাহিত হয় কীস (keys) এবং প্রকার (types) এর জন্য |
|
|
||
| From components, React creates a UI tree which React DOM uses to render the DOM | ||
|
|
||
| কম্পোনেন্ট থেকে শুরু করে, React একটি UI ট্রি তৈরি করে যা React DOM ব্যবহার করে ডম রেন্ডার করতে। |
There was a problem hiding this comment.
৩১ নাম্বার লাইনে একটা নিউ লাইন ছিল। সেটা বাদ গেছে। আগের মত করে নিতে হবে।
There was a problem hiding this comment.
DOM কে হয় উরা পেইজ জুড়ে DOM লিখতে হবে, অথবা ডম।
DOM লেখাই ভাল। সব ডম DOM করে ফেলতে হবে।
|
|
||
|
|
||
| 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 ধরে রাকবে যতক্ষণ একই পজিশনে একই কম্পোনেন্ট রেন্ডার করা হচ্ছে। এটা দেখতে, দুটি কাউন্টারের মান বাড়ানোর পর দ্বিতীয় কম্পোনেন্টটি সরানোর জন্য "দ্বিতীয় কাউন্টার রেন্ডার করুন" চেকবক্স আনচেক করুন, এবং তারপরে আবার সেইটি যুক্ত করতে আবার চেক করুন। |
| <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 | ||
| কোম্পোনেন্টটি মুছে ফেলা হল |
| </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-এ যুক্ত করা হয়। |
There was a problem hiding this comment.
বাটনের কথা বাংলা করা যাবে না। কারণ পেইজে ইংরেজি ই থাকছে।
Render the second counter
ই লিখতে হবে। যদি অন্য কোথাও বিষয়টা মিস করে থাকি, ঠিক করে নেবেন।
| <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`: | ||
|
|
There was a problem hiding this comment.
একটা লাইন অতিরিক্ত এসেছে। বাদ দিতে হবে।
| ## Same component at the same position preserves state {/*same-component-at-the-same-position-preserves-state*/} | ||
|
|
||
| In this example, there are two different `<Counter />` tags: | ||
| ## একই কম্পোনেন্ট একই অবস্থানে থাকলে State সংরক্ষিত থাকে {/*same-component-at-the-same-position-preserves-state*/} |
There was a problem hiding this comment.
এই জায়গা গুলো লাইনের হিসেবে মিলাতে হবে।
|
Any update on this? |
No description provided.