Browse Source

[Beta] Remove superfluous IllustrationBlock title prop

main
Dan Abramov 2 years ago
parent
commit
415751c190
  1. 7
      beta/src/components/MDX/MDXComponents.tsx
  2. 10
      beta/src/content/learn/reacting-to-input-with-state.md
  3. 2
      beta/src/content/learn/state-as-a-snapshot.md

7
beta/src/components/MDX/MDXComponents.tsx

@ -229,13 +229,11 @@ function Illustration({
} }
function IllustrationBlock({ function IllustrationBlock({
title,
sequential, sequential,
author, author,
authorLink, authorLink,
children, children,
}: { }: {
title: string;
author: string; author: string;
authorLink: string; authorLink: string;
sequential: boolean; sequential: boolean;
@ -258,11 +256,6 @@ function IllustrationBlock({
)); ));
return ( return (
<div className="my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl"> <div className="my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
{title ? (
<h3 className="text-center text-xl font-bold leading-9 mb-4">
{title}
</h3>
) : null}
{sequential ? ( {sequential ? (
<ol className="mdx-illustration-block flex"> <ol className="mdx-illustration-block flex">
{images.map((x: any, i: number) => ( {images.map((x: any, i: number) => (

10
beta/src/content/learn/reacting-to-input-with-state.md

@ -311,16 +311,16 @@ Pages like this are often called "living styleguides" or "storybooks".
### Step 2: Determine what triggers those state changes {/*step-2-determine-what-triggers-those-state-changes*/} ### Step 2: Determine what triggers those state changes {/*step-2-determine-what-triggers-those-state-changes*/}
<IllustrationBlock title="Types of inputs">
<Illustration caption="Human inputs" alt="A finger." src="/images/docs/illustrations/i_inputs1.png" />
<Illustration caption="Computer inputs" alt="Ones and zeroes." src="/images/docs/illustrations/i_inputs2.png" />
</IllustrationBlock>
You can trigger state updates in response to two kinds of inputs: You can trigger state updates in response to two kinds of inputs:
* **Human inputs,** like clicking a button, typing in a field, navigating a link. * **Human inputs,** like clicking a button, typing in a field, navigating a link.
* **Computer inputs,** like a network response arriving, a timeout completing, an image loading. * **Computer inputs,** like a network response arriving, a timeout completing, an image loading.
<IllustrationBlock>
<Illustration caption="Human inputs" alt="A finger." src="/images/docs/illustrations/i_inputs1.png" />
<Illustration caption="Computer inputs" alt="Ones and zeroes." src="/images/docs/illustrations/i_inputs2.png" />
</IllustrationBlock>
In both cases, **you must set [state variables](/learn/state-a-components-memory#anatomy-of-usestate) to update the UI.** For the form you're developing, you will need to change state in response to a few different inputs: In both cases, **you must set [state variables](/learn/state-a-components-memory#anatomy-of-usestate) to update the UI.** For the form you're developing, you will need to change state in response to a few different inputs:
* **Changing the text input** (human) should switch it from the *Empty* state to the *Typing* state or back, depending on whether the text box is empty or not. * **Changing the text input** (human) should switch it from the *Empty* state to the *Typing* state or back, depending on whether the text box is empty or not.

2
beta/src/content/learn/state-as-a-snapshot.md

@ -81,7 +81,7 @@ When React re-renders a component:
2. Your function returns a new JSX snapshot. 2. Your function returns a new JSX snapshot.
3. React then updates the screen to match the snapshot you've returned. 3. React then updates the screen to match the snapshot you've returned.
<IllustrationBlock title="Re-rendering" sequential> <IllustrationBlock sequential>
<Illustration caption="React executing the function" src="/images/docs/illustrations/i_render1.png" /> <Illustration caption="React executing the function" src="/images/docs/illustrations/i_render1.png" />
<Illustration caption="Calculating the snapshot" src="/images/docs/illustrations/i_render2.png" /> <Illustration caption="Calculating the snapshot" src="/images/docs/illustrations/i_render2.png" />
<Illustration caption="Updating the DOM tree" src="/images/docs/illustrations/i_render3.png" /> <Illustration caption="Updating the DOM tree" src="/images/docs/illustrations/i_render3.png" />

Loading…
Cancel
Save