[Beta] Change "You will learn" for chapters (#4239)

beta/src/components/MDX/MDXComponents.tsx

@@ -135,8 +135,15 @@ function MathI({children}: {children: any}) {
   );
 }
 
-function YouWillLearn({children}: {children: any}) {
-  return <SimpleCallout title="You will learn">{children}</SimpleCallout>;
+function YouWillLearn({
+  children,
+  isChapter,
+}: {
+  children: any;
+  isChapter?: boolean;
+}) {
+  let title = isChapter ? 'In this chapter' : 'You will learn';
+  return <SimpleCallout title={title}>{children}</SimpleCallout>;
 }
 
 // TODO: typing.

beta/src/pages/learn/adding-interactivity.md

@@ -8,7 +8,7 @@ Some things on the screen update in response to user input. For example, clickin
 
 </Intro>
 
-<YouWillLearn>
+<YouWillLearn isChapter={true}>
 
 * [How to handle user-initiated events](/learn/responding-to-events)
 * [How to make components "remember" information with state](/learn/state-a-components-memory)

beta/src/pages/learn/describing-the-ui.md

@@ -8,7 +8,7 @@ React is a JavaScript library for rendering user interfaces (UI). UI is built fr
 
 </Intro>
 
-<YouWillLearn>
+<YouWillLearn isChapter={true}>
 
 * [How to write your first React component](/learn/your-first-component)
 * [When and how to create multi-component files](/learn/importing-and-exporting-components)

beta/src/pages/learn/installation.md

@@ -8,7 +8,7 @@ React has been designed from the start for gradual adoption, and you can use as
 
 </Intro>
 
-<YouWillLearn>
+<YouWillLearn isChapter={true}>
 
 * [How to add React to an HTML page](/learn/add-react-to-a-website)
 * [How to start a standalone React project](/learn/start-a-new-react-project)

beta/src/pages/learn/managing-state.md

@@ -8,7 +8,7 @@ As your application grows, it helps to be more intentional about how your state
 
 </Intro>
 
-<YouWillLearn>
+<YouWillLearn isChapter={true}>
 
 * [How to think about UI changes as state changes](/learn/reacting-to-input-with-state)
 * [How to structure state well](/learn/choosing-the-state-structure)