diff --git a/beta/src/content/learn/conditional-rendering.md b/beta/src/content/learn/conditional-rendering.md index 7512b951..793018a7 100644 --- a/beta/src/content/learn/conditional-rendering.md +++ b/beta/src/content/learn/conditional-rendering.md @@ -258,7 +258,7 @@ This style works well for simple conditions, but use it in moderation. If your c ### Logical AND operator (`&&`) {/*logical-and-operator-*/} -Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.). Inside React components, it often comes up when you want to render some JSX when the condition is true, **or render nothing otherwise.** With `&&`, you could conditionally render the checkmark only if `isPacked` is `true`: +Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Inside React components, it often comes up when you want to render some JSX when the condition is true, **or render nothing otherwise.** With `&&`, you could conditionally render the checkmark only if `isPacked` is `true`: ```js return ( diff --git a/beta/src/content/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/content/learn/javascript-in-jsx-with-curly-braces.md index 00e7d6e2..cb38e240 100644 --- a/beta/src/content/learn/javascript-in-jsx-with-curly-braces.md +++ b/beta/src/content/learn/javascript-in-jsx-with-curly-braces.md @@ -116,7 +116,7 @@ export default function TodoList() { You can only use curly braces in two ways inside JSX: 1. **As text** directly inside a JSX tag: `

{name}'s To Do List

` works, but `<{tag}>Gregorio Y. Zara's To Do List` will not. -2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `{avatar}`. +2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `"{avatar}"`. ## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/} @@ -426,7 +426,7 @@ body > div > div { padding: 20px; } #### Write an expression inside JSX curly braces {/*write-an-expression-inside-jsx-curly-braces*/} -In the object below, the full image URL is split into four parts: base URL, `imageId`, `imageSize`, and file extension. +In the object below, the full image URL is split into four parts: base URL, `imageId`, `imageSize`, and file extension. We want the image URL to combine these attributes together: base URL (always `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), and file extension (always `'.jpg'`). However, something is wrong with how the `` tag specifies its `src`. diff --git a/beta/src/content/learn/keeping-components-pure.md b/beta/src/content/learn/keeping-components-pure.md index d07b709b..b809f511 100644 --- a/beta/src/content/learn/keeping-components-pure.md +++ b/beta/src/content/learn/keeping-components-pure.md @@ -43,7 +43,7 @@ function double(number) { } ``` -In the above example, `double()` is a **pure function.** If you pass it `3`, it will return `6`. Always. +In the above example, `double` is a **pure function.** If you pass it `3`, it will return `6`. Always. React is designed around this concept. **React assumes that every component you write is a pure function.** This means that React components you write must always return the same JSX given the same inputs: @@ -215,7 +215,7 @@ Every new React feature we're building takes advantage of purity. From data fetc * **It minds its own business.** It should not change any objects or variables that existed before rendering. * **Same inputs, same output.** Given the same inputs, a component should always return the same JSX. * Rendering can happen at any time, so components should not depend on each others' rendering sequence. -* You should not mutate any of the inputs that your components use for rendering. That includes props, state, and context. To update the screen, ["set" state](reacting-to-input-with-state) instead of mutating preexisting objects. +* You should not mutate any of the inputs that your components use for rendering. That includes props, state, and context. To update the screen, ["set" state](/learn/state-a-components-memory) instead of mutating preexisting objects. * Strive to express your component's logic in the JSX you return. When you need to "change things", you'll usually want to do it in an event handler. As a last resort, you can `useEffect`. * Writing pure functions takes a bit of practice, but it unlocks the power of React's paradigm. diff --git a/beta/src/content/learn/writing-markup-with-jsx.md b/beta/src/content/learn/writing-markup-with-jsx.md index cb156a70..84cbd40d 100644 --- a/beta/src/content/learn/writing-markup-with-jsx.md +++ b/beta/src/content/learn/writing-markup-with-jsx.md @@ -169,7 +169,7 @@ If you don't want to add an extra `
` to your markup, you can write `<>` and ``` -This empty tag is called a *[React fragment](/apis/react/Fragment)*. React fragments let you group things without leaving any trace in the browser HTML tree. +This empty tag is called a *[React fragment.](/apis/react/Fragment)* React fragments let you group things without leaving any trace in the browser HTML tree.