Browse Source

[beta] Fix Chai recipe in docs (#5342)

* [beta] Fix Chai recipe in docs

* Cut down recipe to 3 points

* Adjust explanation

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
main
ashrene-roy 2 years ago
committed by GitHub
parent
commit
6031b0005f
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. BIN
      beta/public/images/docs/illustrations/i_puritea-recipe.png
  2. 16
      beta/src/content/learn/keeping-components-pure.md

BIN
beta/public/images/docs/illustrations/i_puritea-recipe.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 210 KiB

16
beta/src/content/learn/keeping-components-pure.md

@ -53,9 +53,9 @@ React is designed around this concept. **React assumes that every component you
function Recipe({ drinkers }) {
return (
<ol>
<li>Boil {drinkers} cups of milk.</li>
<li>Add {2 * drinkers} spoons of masala spices.</li>
<li>Remove from heat, and add {drinkers} spoons of tea.</li>
<li>Boil {drinkers} cups of water.</li>
<li>Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.</li>
<li>Add {0.5 * drinkers} cups of milk to boil and sugar to taste.</li>
</ol>
);
}
@ -64,8 +64,8 @@ export default function App() {
return (
<section>
<h1>Spiced Chai Recipe</h1>
<h2>For one</h2>
<Recipe drinkers={1} />
<h2>For two</h2>
<Recipe drinkers={2} />
<h2>For a gathering</h2>
<Recipe drinkers={4} />
</section>
@ -75,15 +75,15 @@ export default function App() {
</Sandpack>
When you pass `drinkers={1}` to `Recipe`, it will return JSX containing `1 cups of milk`. Always.
When you pass `drinkers={2}` to `Recipe`, it will return JSX containing `2 cups of water`. Always.
If you pass `drinkers={4}`, it will return JSX containing `4 cups of milk`. Always.
If you pass `drinkers={4}`, it will return JSX containing `4 cups of water`. Always.
Just like a math formula.
You could think of your components as recipes: if you follow them and don't introduce new ingredients during the cooking process, you will get the same dish every time. That "dish" is the JSX that the component serves to React to [render.](/learn/render-and-commit)
<Illustration src="/images/docs/illustrations/i_puritea-recipe.png" alt="A tea recipe for x people: take x cups of water, add 2x spoons of spices, and x spoons of tea!" />
<Illustration src="/images/docs/illustrations/i_puritea-recipe.png" alt="A tea recipe for x people: take x cups of water, add x spoons of tea and 0.5x spoons of spices, and 0.5x cups of milk" />
## Side Effects: (un)intended consequences {/*side-effects-unintended-consequences*/}

Loading…
Cancel
Save