Merge pull request #99 from reactjs/sync-a0cacd7d

Sync with react.dev @ a0cacd7

src/content/community/meetups.md

@@ -48,6 +48,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
 * [Vancouver, BC](https://www.meetup.com/ReactJS-Vancouver-Meetup/)
 * [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
+* [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/)
 * [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/)
 
 ## Chile {/*chile*/}

src/content/learn/describing-the-ui.md

@@ -18,6 +18,7 @@ React একটা জাভাস্ক্রিপ্ট লাইব্রে
 * [কীভাবে কম্পোনেন্ট কন্ডিশনালি রেন্ডার করবেন](/learn/conditional-rendering)
 * [কীভাবে এক সাথে একাধিক কম্পোনেন্ট রেন্ডার করবেন](/learn/rendering-lists)
 * [কীভাবে কম্পোনেন্ট pure রাখার মাধ্যমে বিভ্রান্তিকর বাগ এড়িয়ে চলবেন](/learn/keeping-components-pure)
+* [কেন আপনার UI কে tree হিসেবে বুঝাটা কার্যকর](/learn/understanding-your-ui-as-a-tree)
 
 </YouWillLearn>
 
@@ -523,6 +524,29 @@ export default function TeaSet() {
 
 </LearnMore>
 
+## Tree হিসেবে আপনার UI {/*your-ui-as-a-tree*/}
+
+React কম্পোনেন্ট এবং মডিউলের ভেতরকার সম্পর্ক মডেল করবার জন্য tree ব্যবহার করে।
+
+একটা React রেন্ডার ট্রি হল কম্পোনেন্টের মাঝে থাকা প্যারেন্ট-চাইল্ড সম্পর্কের একটা প্রতিফলন।
+
+<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">React রেন্ডার ট্রিয়ের একটি উদাহরণ।</Diagram>
+
+ট্রি এর শীর্ষের কাছে থাকা কম্পোনেন্ট, যেগুলো রুটেরও কাছে, সেগুলোকে top-level কম্পোনেন্ট হিসেবে ধরা হয়। যেসব কম্পোনেন্টের কোন চাইল্ড নেই সেগুলোকে leaf কম্পোনেন্ট বলে। দেটা ফলো এবং রেন্ডারিং পারফরম্যান্স বুঝবার জন্য কম্পোনেন্টের এই বিভাজন কাজে লাগে।
+
+জাভাস্ক্রিপ্ট মডিউলগুলোর মধ্যকার সম্পর্ক মডেলিং আপনার অ্যাপ বুঝবার জন্য অন্য একটি কার্যকর উপায়। এটাকে আমরা module dependency tree বলে অভিহিত করি।
+
+<Diagram name="generic_dependency_tree" height={250} width={500} alt="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'.">Module dependency tree এর একটি উদাহরণ।</Diagram>
+
+একটি ডিপেন্ডেন্সি ট্রি বেশিরভাগ সময় বিল্ড টুল ব্যবহার করে তৈরি করা হয়, যেন দরকারি পুরো জাভাস্ক্রিপ্ট কোড একত্রিত করে ক্লায়েন্ট ডাউনলোড এবং রেন্ডার করতে পারেন। React অ্যাপের ক্ষেত্রে একটা বড় বান্ডল সাইজ user experience এ বিঘ্ন ঘটায়। এরকম সমস্যা ডিবাগ করার জন্য মডিউল ডিপেন্ডেন্সি ট্রি কাজে লাগে।
+
+<LearnMore path="/learn/understanding-your-ui-as-a-tree">
+
+**[Tree হিসেবে আপনার UI](/learn/understanding-your-ui-as-a-tree)** পড়ুন যাতে আপনি শিখতে পারেন কীভাবে একটি React অ্যাপের জন্য একটি মডিউল ডিপেন্ডেন্সি ট্রি তৈরি করতে হয় এবং রেন্ডার করতে হয় এবং কীভাবে ইউজার এক্সপিরিয়েন্স এবং পারফরম্যান্সের জন্য এগুলো কার্যকর মেন্টাল মডেল।
+
+</LearnMore>
+
+
 ## এর পর তাহলে কী? {/*whats-next*/}
 
 এই অধ্যায়টি গুছিয়ে পড়া শুরু করতে চলে যান  [আপনার প্রথম কম্পোনেন্ট](/learn/your-first-component) অংশে।

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

@@ -10,33 +10,17 @@ State is isolated between components. React keeps track of which state belongs t
 
 <YouWillLearn>
 
-* How React "sees" component structures
 * When React chooses to preserve or reset the state
 * How to force React to reset component's state
 * How keys and types affect whether the state is preserved
 
 </YouWillLearn>
 
-## The UI tree {/*the-ui-tree*/}
+## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}
 
-Browsers use many tree structures to model UI. The [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) represents HTML elements, the [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) does the same for CSS. There's even an [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.)
-
-<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
-
-</Diagram>
-
-</DiagramGroup>
-
-## State is tied to a position in the tree {/*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.
+React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
 
+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 render tree.
 
 Here, there is only one `<Counter />` JSX tag, but it's rendered at two different positions:
 
@@ -190,7 +174,7 @@ Updating state
 </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 will keep the state around for as long as you render the same component at the same position in the tree. 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:
 
 <Sandpack>