From e46b02f40b2aac36c877880fae48150596901ed4 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 7 May 2022 18:41:49 +0100
Subject: [PATCH] Tweak captions

---
 beta/src/pages/learn/index.md                          | 8 ++++----
 beta/src/pages/learn/preserving-and-resetting-state.md | 4 ++--
 beta/src/pages/learn/reacting-to-input-with-state.md   | 2 +-
 beta/src/pages/learn/writing-markup-with-jsx.md        | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 9dfb71467..827c92fa5 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -394,13 +394,13 @@ In the previous example, each `MyButton` had its own independent `count`, and wh
 
 <Diagram name="sharing_data_child" height={734} width={814} alt="Diagram showing a tree of three components, one parent labeled MyApp and two children labeled MyButton. Both MyButton components contain a count with value zero.">
 
-Before clicking, each MyButton has a count value set to zero.
+Initially, each `MyButton`'s `count` state is `0`
 
 </Diagram>
 
 <Diagram name="sharing_data_child_clicked" height={734} width={814} alt="The same diagram as the previous, with the count of the first child MyButton component highlighted indicating a click with the count value incremented to one. The second MyButton component still contains value zero." >
 
-After clicking, only one MyButton count value has updated.
+On click, the first `MyButton` updates its `count` state to `1`
 
 </Diagram>
 
@@ -416,13 +416,13 @@ In this example, it is `MyApp`:
 
 <Diagram name="sharing_data_parent" height={770} width={820} alt="Diagram showing a tree of three components, one parent labeled MyApp and two children labeled MyButton. MyApp contains a count value of zero which is passed down to both of the MyButton components, which also show value zero." >
 
-Before clicking, count is stored in MyApp and passed down to both children as props.
+Initially, `MyApp`'s `count` state is `0` and is passed down to both children
 
 </Diagram>
 
 <Diagram name="sharing_data_parent_clicked" height={770} width={820} alt="The same diagram as the previous, with the count of the parent MyApp component highlighted indicating a click with the value incremented to one. The flow to both of the children MyButton components is also highlighted, and the count value in each child is set to one indicating the value was passed down." >
 
-After clicking, count updates in MyApp and the new value is passed to both children as props.
+On click, `MyApp` updates its `count` state to `1` and passes it down to both children
 
 </Diagram>
 
diff --git a/beta/src/pages/learn/preserving-and-resetting-state.md b/beta/src/pages/learn/preserving-and-resetting-state.md
index e3d3f7319..80135a1a2 100644
--- a/beta/src/pages/learn/preserving-and-resetting-state.md
+++ b/beta/src/pages/learn/preserving-and-resetting-state.md
@@ -27,7 +27,7 @@ React also uses tree structures to manage and model the UI you make. React makes
 
 <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. 
+From components, React creates a UI tree which React DOM uses to render the DOM
 
 </Diagram>
 
@@ -383,7 +383,7 @@ When you tick or clear the checkbox, the counter state does not get reset. Wheth
 
 <Diagram name="preserving_state_same_component" height={461} width={600} alt="Diagram with two sections separated by an arrow transitioning between them. Each section contains a layout of components with a parent labeled 'App' containing a state bubble labeled isFancy. This component has one child labeled 'div', which leads to a prop bubble containing isFancy (highlighted in purple) passed down to the only child. The last child is labeled 'Counter' and contains a state bubble with label 'count' and value 3 in both diagrams. In the left section of the diagram, nothing is highlighted and the isFancy parent state value is false. In the right section of the diagram, the isFancy parent state value has changed to true and it is highlighted in yellow, and so is the props bubble below, which has also changed its isFancy value to true.">
 
-Updating the `App` state does not reset the `Counter` state because it stays in the same position
+Updating the `App` state does not reset the `Counter` because `Counter` stays in the same position
 
 </Diagram>
 
diff --git a/beta/src/pages/learn/reacting-to-input-with-state.md b/beta/src/pages/learn/reacting-to-input-with-state.md
index 48ef3f584..7cf077e44 100644
--- a/beta/src/pages/learn/reacting-to-input-with-state.md
+++ b/beta/src/pages/learn/reacting-to-input-with-state.md
@@ -336,7 +336,7 @@ To help visualize this flow, try drawing each state on paper as a labeled circle
 
 <Diagram name="responding_to_input_flow" height={350} width={688} alt="Flow chart moving left to right with 5 nodes. The first node labeled 'empty' has one edge labeled 'start typing' connected to a node labeled 'typing'. That node has one edge labeled 'press submit' connected to a node labeled 'submitting', which has two edges. The left edge is labeled 'network error' connecting to a node labeled 'error'. The right edge is labeled 'network success' connecting to a node labeled 'success'.">
 
-Form States
+Form states
 
 </Diagram>
 
diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md
index 127c516d9..4e4ff9298 100644
--- a/beta/src/pages/learn/writing-markup-with-jsx.md
+++ b/beta/src/pages/learn/writing-markup-with-jsx.md
@@ -36,19 +36,19 @@ JavaScript
 
 </DiagramGroup>
 
-But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components!**
+But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components.**
 
 <DiagramGroup>
 
 <Diagram name="writing_jsx_sidebar" height={330} width={325} alt="React component with HTML and JavaScript from previous examples mixed. Function name is Sidebar which calls the function isLoggedIn, highlighted in yellow. Nested inside the function highlighted in purple is the p tag from before, and a Form tag referencing the component shown in the next diagram.">
 
-Sidebar.js
+`Sidebar.js` React component
 
 </Diagram>
 
 <Diagram name="writing_jsx_form" height={330} width={325} alt="React component with HTML and JavaScript from previous examples mixed. Function name is Form containing two handlers onClick and onSubmit highlighted in yellow. Following the handlers is HTML highlighted in purple. The HTML contains a form element with a nested input element, each with an onClick prop.">
 
-Form.js
+`Form.js` React component
 
 </Diagram>