@ -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>
<Recipedrinkers={1}/>
<h2>For two</h2>
<Recipedrinkers={2}/>
<h2>For a gathering</h2>
<Recipedrinkers={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)
<Illustrationsrc="/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!"/>
<Illustrationsrc="/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*/}