From 16f90a936a1b1d29811a125c3554586390c30f7c Mon Sep 17 00:00:00 2001
From: Matt Carroll <7158882+mattcarrollcode@users.noreply.github.com>
Date: Fri, 20 Oct 2023 14:00:10 -0700
Subject: [PATCH] Minor fixes to Understand Your UI as a Tree learn doc (#6365)

---
 .../learn/understanding-your-ui-as-a-tree.md  | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md
index 948f85790..2a5a24b85 100644
--- a/src/content/learn/understanding-your-ui-as-a-tree.md
+++ b/src/content/learn/understanding-your-ui-as-a-tree.md
@@ -1,12 +1,12 @@
 ---
-title: Understanding your UI as a Tree 
+title: Understanding Your UI as a Tree
 ---
 
 <Intro>
 
 Your React app is taking shape with many components being nested within each other. How does React keep track of your app's component structure?
 
-React, and many other UI libraries, model UI as a tree. Thinking of your app as a tree is useful for understanding the relationship between components to debug future concepts like performance and state management.
+React, and many other UI libraries, model UI as a tree. Thinking of your app as a tree is useful for understanding the relationship between components. This understanding will help you debug future concepts like performance and state management.
 
 </Intro>
 
@@ -20,7 +20,7 @@ React, and many other UI libraries, model UI as a tree. Thinking of your app as
 
 ## Your UI as a tree {/*your-ui-as-a-tree*/}
 
-Trees are a relationship model between items and UI is often represented using tree structures. For example, browsers use tree structures to model HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) and CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Mobile platforms also use trees to represent their view hierarchy. 
+Trees are a relationship model between items and UI is often represented using tree structures. For example, browsers use tree structures to model HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) and CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Mobile platforms also use trees to represent their view hierarchy.
 
 <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).">
 
@@ -31,11 +31,11 @@ Like browsers and mobile platforms, React also uses tree structures to manage an
 
 ## The Render Tree {/*the-render-tree*/}
 
-A major feature of components is the ability to compose components of other components. As we [nest components](/learn/your-first-component#nesting-and-organizing-components), we have the concept of parent and child components, where each parent component may itself be a child of another component. 
+A major feature of components is the ability to compose components of other components. As we [nest components](/learn/your-first-component#nesting-and-organizing-components), we have the concept of parent and child components, where each parent component may itself be a child of another component.
 
 When we render a React app, we can model this relationship in a tree, known as the render tree.
 
-Here is a React app that renders inspirational quotes. 
+Here is a React app that renders inspirational quotes.
 
 <Sandpack>
 
@@ -120,13 +120,14 @@ export default [
 
 <Diagram name="render_tree" height={250} width={500} alt="Tree graph with five nodes. Each node represents a component. The root of the tree is App, with two arrows extending from it to 'InspirationGenerator' and 'FancyText'. The arrows are labelled with the word 'renders'. 'InspirationGenerator' node also has two arrows pointing to nodes 'FancyText' and 'Copyright'.">
 
-React creates a UI tree made of components rendered, known as a render tree.
+React creates a *render tree*, a UI tree, composed of the rendered components.
+
 
 </Diagram>
 
-From the example app, we can construct the above render tree. 
+From the example app, we can construct the above render tree.
 
-The tree is composed of nodes, each of which represents a component. `App`, `FancyText`, `Copyright`, to name a few, are all nodes in our tree. 
+The tree is composed of nodes, each of which represents a component. `App`, `FancyText`, `Copyright`, to name a few, are all nodes in our tree.
 
 The root node in a React render tree is the [root component](/learn/importing-and-exporting-components#the-root-component-file) of the app. In this case, the root component is `App` and it is the first component React renders. Each arrow in the tree points from a parent component to a child component.
 
@@ -134,7 +135,7 @@ The root node in a React render tree is the [root component](/learn/importing-an
 
 #### Where are the HTML tags in the render tree? {/*where-are-the-html-elements-in-the-render-tree*/}
 
-You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](learn/your-first-component#components-ui-building-blocks). 
+You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](learn/your-first-component#components-ui-building-blocks).
 
 React, as a UI framework, is platform agnostic. On react.dev, we showcase examples that render to the web, which uses HTML markup as its UI primitives. But a React app could just as likely render to a mobile or desktop platform, which may use different UI primitives like [UIView](https://developer.apple.com/documentation/uikit/uiview) or [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0).
 
@@ -176,7 +177,7 @@ export default function FancyText({title, text}) {
 
 ```js Color.js
 export default function Color({value}) {
-  return <div className="colorbox" style={{backgroundColor: value}} / >
+  return <div className="colorbox" style={{backgroundColor: value}} />
 }
 ```
 
@@ -197,7 +198,7 @@ export default function InspirationGenerator({children}) {
       {inspiration.type === 'quote'
       ? <FancyText text={inspiration.value} />
       : <Color value={inspiration.value} />}
-      
+
       <button onClick={next}>Inspire me again</button>
       {children}
     </>
@@ -252,17 +253,17 @@ With conditional rendering, across different renders, the render tree may render
 
 In this example, depending on what `inspiration.type` is, we may render `<FancyText>` or `<Color>`. The render tree may be different for each render pass.
 
-Although render trees may differ across render pases, these trees are generally helpful for identifying what the top-level and leaf components are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered. 
+Although render trees may differ across render pases, these trees are generally helpful for identifying what the top-level and leaf components are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered.
 
 Identifying these categories of components are useful for understanding data flow and performance of your app.
 
 ## The Module Dependency Tree {/*the-module-dependency-tree*/}
 
-Another relationship in a React app that can be modeled with a tree are an app's module dependencies. As we [break up our components](/learn/importing-and-exporting-components#exporting-and-importing-a-component) and logic into separate files, we create [JS modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) where we may export components, functions, or constants. 
+Another relationship in a React app that can be modeled with a tree are an app's module dependencies. As we [break up our components](/learn/importing-and-exporting-components#exporting-and-importing-a-component) and logic into separate files, we create [JS modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) where we may export components, functions, or constants.
 
 Each node in a module dependency tree is a module and each branch represents an `import` statement in that module.
 
-If we take the previous Inspirations app, we can build a module dependency tree, or dependency tree for short. 
+If we take the previous Inspirations app, we can build a module dependency tree, or dependency tree for short.
 
 <Diagram name="module_dependency_tree" height={250} width={658} alt="A tree graph with seven nodes. Each node is labelled with a module name. The top level node of the tree is labelled 'App.js'. There are three arrows pointing to the modules 'InspirationGenerator.js', 'FancyText.js' and 'Copyright.js' and the arrows are labelled with 'imports'. From the 'InspirationGenerator.js' node, there are three arrows that extend to three modules: 'FancyText.js', 'Color.js', and 'inspirations.js'. The arrows are labelled with 'imports'.">
 
@@ -274,13 +275,13 @@ The root node of the tree is the root module, also known as the entrypoint file.
 
 Comparing to the render tree of the same app, there are similar structures but some notable differences:
 
-* The nodes that make-up the tree represent modules, not components. 
+* The nodes that make-up the tree represent modules, not components.
 * Non-component modules, like `inspirations.js`, are also represented in this tree. The render tree only encapsulates components.
 * `Copyright.js` appears under `App.js` but in the render tree, `Copyright`, the component, appears as a child of `InspirationGenerator`. This is because `InspirationGenerator` accepts JSX as [children props](/learn/passing-props-to-a-component#passing-jsx-as-children), so it renders `Copyright` as a child component but does not import the module.
 
 Dependency trees are useful to determine what modules are necessary to run your React app. When building a React app for production, there is typically a build step that will bundle all the necessary JavaScript to ship to the client. The tool responsible for this is called a [bundler](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem), and bundlers will use the dependency tree to determine what modules should be included.
 
-As your app grows, often the bundle size does too. Large bundle sizes are expensive for a client to download and run and delays the time for your UI to get drawn. Getting a sense of your app's dependency tree may help with debugging these issues.
+As your app grows, often the bundle size does too. Large bundle sizes are expensive for a client to download and run. Large bundle sizes can delay the time for your UI to get drawn. Getting a sense of your app's dependency tree may help with debugging these issues.
 
 [comment]: <> (perhaps we should also deep dive on conditional imports)
 
@@ -288,7 +289,7 @@ As your app grows, often the bundle size does too. Large bundle sizes are expens
 
 * Trees are a common way to represent the relationship between entities. They are often used to model UI.
 * Render trees represent the nested relationship between React components across a single render.
-* With conditional rendering, the render tree may change across different renders. With different prop values, components may render different children components. 
+* With conditional rendering, the render tree may change across different renders. With different prop values, components may render different children components.
 * Render trees help identify what the top-level and leaf components are. Top-level components affect the rendering performance of all components beneath them and leaf components are often re-rendered frequently. Identifying them is useful for understanding and debugging rendering performance.
 * Dependency trees represent the module dependencies in a React app.
 * Dependency trees are used by build tools to bundle the necessary code to ship an app.
@@ -296,4 +297,4 @@ As your app grows, often the bundle size does too. Large bundle sizes are expens
 
 </Recap>
 
-[TODO]: <> (Add challenges)
\ No newline at end of file
+[TODO]: <> (Add challenges)