From a220bb3f21170210fb37375f349c943150a5364d Mon Sep 17 00:00:00 2001 From: k8o <61353435+k35o@users.noreply.github.com> Date: Thu, 22 Aug 2024 16:46:36 +0900 Subject: [PATCH 1/5] docs: replace check mark emoji to check mark button emoji (#7121) --- .../blog/2023/03/16/introducing-react-dev.md | 4 +-- src/content/learn/conditional-rendering.md | 32 +++++++++---------- src/content/learn/describing-the-ui.md | 2 +- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md index 2498f40d..c4da2b61 100644 --- a/src/content/blog/2023/03/16/introducing-react-dev.md +++ b/src/content/blog/2023/03/16/introducing-react-dev.md @@ -269,7 +269,7 @@ Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); } @@ -307,7 +307,7 @@ export default function PackingList() { function Item({ name, isPacked }) { return (
  • - {name} {isPacked ? '✔' : '❌'} + {name} {isPacked ? '✅' : '❌'}
    • ); } diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index 895d610d..95be5d2e 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -52,13 +52,13 @@ export default function PackingList() { -Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✔) to packed items if `isPacked={true}`. +Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✅) to packed items if `isPacked={true}`. You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so: ```js if (isPacked) { - return
  • {name} ✔
    • ; + return
  • {name} ✅
    • ; } return
  • {name}
    • ; ``` @@ -70,7 +70,7 @@ If the `isPacked` prop is `true`, this code **returns a different JSX tree.** Wi ```js function Item({ name, isPacked }) { if (isPacked) { - return
  • {name} ✔
    • ; + return
  • {name} ✅
    • ; } return
  • {name}
    • ; } @@ -159,7 +159,7 @@ In practice, returning `null` from a component isn't common because it might sur In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output: ```js -
  • {name} ✔
    • +
  • {name} ✅
    • ``` is very similar to @@ -172,7 +172,7 @@ Both of the conditional branches return `
  • ...
    • `: ```js if (isPacked) { - return
  • {name} ✔
    • ; + return
  • {name} ✅
    • ; } return
  • {name}
    • ; ``` @@ -187,7 +187,7 @@ Instead of this: ```js if (isPacked) { - return
  • {name} ✔
    • ; + return
  • {name} ✅
    • ; } return
  • {name}
    • ; ``` @@ -197,12 +197,12 @@ You can write this: ```js return (
  • - {isPacked ? name + ' ✔' : name} + {isPacked ? name + ' ✅' : name}
    • ); ``` -You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`"*. +You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✅'`, otherwise (`:`) render `name`"*. @@ -222,7 +222,7 @@ function Item({ name, isPacked }) {
  • {isPacked ? ( - {name + ' ✔'} + {name + ' ✅'} ) : ( name @@ -265,7 +265,7 @@ Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) o ```js return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); ``` @@ -280,7 +280,7 @@ Here it is in action: function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); } @@ -337,7 +337,7 @@ Use an `if` statement to reassign a JSX expression to `itemContent` if `isPacked ```js if (isPacked) { - itemContent = name + " ✔"; + itemContent = name + " ✅"; } ``` @@ -357,7 +357,7 @@ This style is the most verbose, but it's also the most flexible. Here it is in a function Item({ name, isPacked }) { let itemContent = name; if (isPacked) { - itemContent = name + " ✔"; + itemContent = name + " ✅"; } return (
  • @@ -401,7 +401,7 @@ function Item({ name, isPacked }) { if (isPacked) { itemContent = ( - {name + " ✔"} + {name + " ✅"} ); } @@ -464,7 +464,7 @@ Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); } @@ -502,7 +502,7 @@ export default function PackingList() { function Item({ name, isPacked }) { return (
  • - {name} {isPacked ? '✔' : '❌'} + {name} {isPacked ? '✅' : '❌'}
    • ); } diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index ce49b85c..34ee0c01 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -327,7 +327,7 @@ In this example, the JavaScript `&&` operator is used to conditionally render a function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); } From b5f28b48441e7e46c11ba066110a3c952c33c4ba Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski <70535775+BartoszKlonowski@users.noreply.github.com> Date: Fri, 23 Aug 2024 14:21:11 +0200 Subject: [PATCH 2/5] Redirect lists-and-keys to rendering-lists describing key (#7120) --- vercel.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/vercel.json b/vercel.json index eac0efb9..8b0546e3 100644 --- a/vercel.json +++ b/vercel.json @@ -24,6 +24,11 @@ "destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key", "permanent": false }, + { + "source": "/docs/lists-and-keys", + "destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key", + "permanent": false + }, { "source": "/link/invalid-hook-call", "destination": "/warnings/invalid-hook-call-warning", From 7d50c3ffd4df2dc7903f4e41069653a456a9c223 Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski <70535775+BartoszKlonowski@users.noreply.github.com> Date: Sun, 25 Aug 2024 22:32:42 +0200 Subject: [PATCH 3/5] Emphasize the second problem paragraph with chain of effects example (#7108) * Emphasize the second problem acapit with chain of effects example * Replace 'One' with 'First' to keep problems counting consistent --- src/content/learn/you-might-not-need-an-effect.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 66cdc311..27031720 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -408,9 +408,9 @@ function Game() { There are two problems with this code. -One problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below. +First problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below. -Even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile. +The second problem is that even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile. In this case, it's better to calculate what you can during rendering, and adjust the state in the event handler: From ac003df125add7564327c0594756ab092c45cc98 Mon Sep 17 00:00:00 2001 From: Dzmitry Zubialevich Date: Mon, 26 Aug 2024 15:10:04 +0200 Subject: [PATCH 4/5] Update conditional-rendering.md --- src/content/learn/conditional-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index d9617a35..30fe4215 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -53,7 +53,7 @@ export default function PackingList() { <<<<<<< HEAD -Звярніце ўвагу, што ў некаторых кампанентаў `Item` пропс `isPacked` мае значэнне `true` замест `false`. Калі `isPacked={true}`, мы хочам дадаць галачку(✔) да спакаваных рэчаў. +Звярніце ўвагу, што ў некаторых кампанентаў `Item` пропс `isPacked` мае значэнне `true` замест `false`. Калі `isPacked={true}`, мы хочам дадаць галачку(✅) да спакаваных рэчаў. ======= Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✅) to packed items if `isPacked={true}`. >>>>>>> 7d50c3ffd4df2dc7903f4e41069653a456a9c223 From e73aacd4282a503dfb30e287a3df3fad894d9411 Mon Sep 17 00:00:00 2001 From: Aliaksiej Date: Mon, 26 Aug 2024 17:09:33 +0200 Subject: [PATCH 5/5] Fix merge conflicts for conditional-rendering.md --- src/content/learn/conditional-rendering.md | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index 30fe4215..0bda666a 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -52,11 +52,7 @@ export default function PackingList() { -<<<<<<< HEAD Звярніце ўвагу, што ў некаторых кампанентаў `Item` пропс `isPacked` мае значэнне `true` замест `false`. Калі `isPacked={true}`, мы хочам дадаць галачку(✅) да спакаваных рэчаў. -======= -Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✅) to packed items if `isPacked={true}`. ->>>>>>> 7d50c3ffd4df2dc7903f4e41069653a456a9c223 Вы можаце зрабіць гэта з дапамогай [канструкцыі `if`/`else`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) такім чынам: @@ -206,11 +202,7 @@ return ( ); ``` -<<<<<<< HEAD -Гэта можна прачытаць як: *«Калі `ispacked` роўны `true`, тады (`?`) рэндэрым `name + ' ✔'`, інакш (`:`) рэндэрым `name`»*. -======= -You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✅'`, otherwise (`:`) render `name`"*. ->>>>>>> 7d50c3ffd4df2dc7903f4e41069653a456a9c223 +Гэта можна прачытаць як: *«Калі `ispacked` роўны `true`, тады (`?`) рэндэрым `name + ' ✅'`, інакш (`:`) рэндэрым `name`»*.