Merge branch 'reactjs:main' into uk-translation-suspense

Author: GeorgeShvab

TRANSLATION.md

@@ -16,6 +16,18 @@
 - Вичитуйте тексти, що перекладені за допомогою зовнішніх сервісів (Google Translate, ChatGPT тощо).
 - Якщо український відповідник є рідковживаним або має декілька значень, то краще залишити після нього оригінальне слово у дужках, щоб полегшити розуміння читачем.
 
+### Заміна посилань
+
+Потрібно замінювати посилання на матеріал англійською посиланням на його переклад українською, якщо такий переклад існує. Нижче наведена таблиця вебсайтів, що мають українські відповідники, де варто шукати заміну зовнішнім посиланням.
+
+| Оригінальний сайт     | Варіант українською |
+| --------------------- | ------------------- |
+| en.wikipedia.org      | uk.wikipedia.org    |
+| javascript.info       | uk.javascript.info  |
+| developer.mozilla.org | webdoky.org         |
+
+Цей список не є вичерпним.
+
 ## Процес перевірки перекладу
 
 1. Мейнтейнер переглядає усі змінені файли PR'у.

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 (
     <li className="item">
-      {name} {isPacked && '✔'}
+      {name} {isPacked && '✅'}
     </li>
   );
 }
@@ -307,7 +307,7 @@ export default function PackingList() {
 function Item({ name, isPacked }) {
   return (
     <li className="item">
-      {name} {isPacked ? '✔' : '❌'}
+      {name} {isPacked ? '✅' : '❌'}
     </li>
   );
 }

src/content/learn/add-react-to-an-existing-project.md

@@ -34,7 +34,7 @@ title: Інтеграція React в існуючий проект
 
 Ви можете зробити це у два кроки:
 
-1. **Налаштуйте JavaScript середовище**, яке б дозволяло вам використовувати [JSX синтаксис](/learn/writing-markup-with-jsx), розділіть ваш код на модулі з [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) синтаксисом і користуйтеся пакетами (наприклад, React) з [npm](https://www.npmjs.com/) реєстру пакетів.
+1. **Налаштуйте JavaScript середовище**, яке б дозволяло вам використовувати [JSX синтаксис](/learn/writing-markup-with-jsx), розділіть ваш код на модулі з [`import`](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) синтаксисом і користуйтеся пакетами (наприклад, React) з [npm](https://www.npmjs.com/) реєстру пакетів.
 2. **Рендеріть ваші React компоненти** там, де ви б хотіли бачити їх на сторінці.
 
 Конкретний підхід залежить від налаштувань вашої існуючої сторінки, тому розглянемо деякі деталі.

src/content/learn/conditional-rendering.md

@@ -52,13 +52,13 @@ export default function PackingList() {
 
 </Sandpack>
 
-Зверніть увагу, що деякі компоненти `Item` мають проп `isPacked` встановлений на `true` замість `false`. Ви хочете додати позначку (✔) до запакованих речей, якщо `isPacked={true}`.
+Зверніть увагу, що деякі компоненти `Item` мають проп `isPacked` встановлений на `true` замість `false`. Ви хочете додати позначку (✅) до запакованих речей, якщо `isPacked={true}`.
 
-Ви можете зробити це за допомогою [оператора `if`/`else`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) ось так:
+Ви можете зробити це за допомогою [оператора `if`/`else`](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Statements/if...else) ось так:
 
 ```js
 if (isPacked) {
-  return <li className="item">{name} ✔</li>;
+  return <li className="item">{name} ✅</li>;
 }
 return <li className="item">{name}</li>;
 ```
@@ -70,7 +70,7 @@ return <li className="item">{name}</li>;
 ```js
 function Item({ name, isPacked }) {
   if (isPacked) {
-    return <li className="item">{name} ✔</li>;
+    return <li className="item">{name} ✅</li>;
   }
   return <li className="item">{name}</li>;
 }
@@ -159,7 +159,7 @@ export default function PackingList() {
 У попередньому прикладі ви контролювали, яке JSX-дерево буде повернено компонентом. Ви вже могли помітити деяке дублювання у виводі рендеру:
 
 ```js
-<li className="item">{name} ✔</li>
+<li className="item">{name} ✅</li>
 ```
 
 дуже схоже на
@@ -172,7 +172,7 @@ export default function PackingList() {
 
 ```js
 if (isPacked) {
-  return <li className="item">{name} ✔</li>;
+  return <li className="item">{name} ✅</li>;
 }
 return <li className="item">{name}</li>;
 ```
@@ -181,13 +181,13 @@ return <li className="item">{name}</li>;
 
 ### Умовний (тернарний) оператор (`? :`) {/*conditional-ternary-operator--*/}
 
-JavaScript має компактний синтаксис для написання умовного виразу -- [умовний оператор](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) або "тернарний оператор".
+JavaScript має компактний синтаксис для написання умовного виразу -- [умовний оператор](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Operators/Conditional_operator) або "тернарний оператор".
 
 Замість цього:
 
 ```js
 if (isPacked) {
-  return <li className="item">{name} ✔</li>;
+  return <li className="item">{name} ✅</li>;
 }
 return <li className="item">{name}</li>;
 ```
@@ -197,12 +197,12 @@ return <li className="item">{name}</li>;
 ```js
 return (
   <li className="item">
-    {isPacked ? name + ' ✔' : name}
+    {isPacked ? name + ' ✅' : name}
   </li>
 );
 ```
 
-Це можна прочитати як *"якщо `isPacked` є true, тоді (`?`) відобразити `name + ' ✔'`, в іншому випадку (`:`) відобразити `name`"*.
+Це можна прочитати як *"якщо `isPacked` є true, тоді (`?`) рендерити `name + ' ✅'`, в іншому випадку (`:`) рендерити `name`"*.
 
 <DeepDive>
 
@@ -222,7 +222,7 @@ function Item({ name, isPacked }) {
     <li className="item">
       {isPacked ? (
         <del>
-          {name + ' ✔'}
+          {name + ' ✅'}
         </del>
       ) : (
         name
@@ -260,12 +260,12 @@ export default function PackingList() {
 
 ### Логічний оператор AND (`&&`) {/*logical-and-operator-*/}
 
-Ще одне поширене скорочення, з яким ви зіткнетеся -- [логічний оператор AND (`&&`) JavaScript.](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.) Всередині компонентів React він часто з'являється, коли ви хочете відрендерити деякий JSX, коли умова є `true`, **або нічого не рендерити в іншому випадку.** З `&&` ви могли б умовно відрендерити позначку, лише якщо `isPacked` є `true`:
+Ще одне поширене скорочення, з яким ви зіткнетеся -- [логічний оператор AND (`&&`) JavaScript.](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Всередині компонентів React він часто з'являється, коли ви хочете відрендерити деякий JSX, коли умова є `true`, **або нічого не рендерити в іншому випадку.** З `&&` ви могли б умовно відрендерити позначку, лише якщо `isPacked` є `true`:
 
 ```js
 return (
   <li className="item">
-    {name} {isPacked && '✔'}
+    {name} {isPacked && '✅'}
   </li>
 );
 ```
@@ -280,7 +280,7 @@ return (
 function Item({ name, isPacked }) {
   return (
     <li className="item">
-      {name} {isPacked && '✔'}
+      {name} {isPacked && '✅'}
     </li>
   );
 }
@@ -310,7 +310,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-[JavaScript && вираз](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) повертає значення своєї правої сторони (у нашому випадку, позначку) якщо ліва сторона (наша умова) `true`. Але якщо умова `false`, то весь вираз стає `false`. React розглядає `false` як "діру" в JSX дереві, так само як `null` або `undefined`, і не рендерить нічого на його місці.
+[JavaScript && вираз](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Operators/Logical_AND) повертає значення своєї правої сторони (у нашому випадку, позначку) якщо ліва сторона (наша умова) `true`. Але якщо умова `false`, то весь вираз стає `false`. React розглядає `false` як "діру" в JSX дереві, так само як `null` або `undefined`, і не рендерить нічого на його місці.
 
 
 <Pitfall>
@@ -327,7 +327,7 @@ export default function PackingList() {
 
 ### Умовне присвоєння JSX змінній {/*conditionally-assigning-jsx-to-a-variable*/}
 
-Коли скорочення заважають писати звичайний код, спробуйте використати оператор `if` та змінну. Ви можете переприсвоювати змінні, визначені за допомогою [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), тому почніть з задання вмісту за замовчуванням, який ви хочете відобразити, name:
+Коли скорочення заважають писати звичайний код, спробуйте використати оператор `if` та змінну. Ви можете переприсвоювати змінні, визначені за допомогою [`let`](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Statements/let), тому почніть з задання вмісту за замовчуванням, який ви хочете відобразити, name:
 
 ```js
 let itemContent = name;
@@ -337,7 +337,7 @@ let itemContent = name;
 
 ```js
 if (isPacked) {
-  itemContent = name + " ✔";
+  itemContent = name + " ✅";
 }
 ```
 
@@ -357,7 +357,7 @@ if (isPacked) {
 function Item({ name, isPacked }) {
   let itemContent = name;
   if (isPacked) {
-    itemContent = name + " ✔";
+    itemContent = name + " ✅";
   }
   return (
     <li className="item">
@@ -401,7 +401,7 @@ function Item({ name, isPacked }) {
   if (isPacked) {
     itemContent = (
       <del>
-        {name + " ✔"}
+        {name + " ✅"}
       </del>
     );
   }
@@ -464,7 +464,7 @@ export default function PackingList() {
 function Item({ name, isPacked }) {
   return (
     <li className="item">
-      {name} {isPacked && '✔'}
+      {name} {isPacked && '✅'}
     </li>
   );
 }
@@ -502,7 +502,7 @@ export default function PackingList() {
 function Item({ name, isPacked }) {
   return (
     <li className="item">
-      {name} {isPacked ? '✔' : '❌'}
+      {name} {isPacked ? '✅' : '❌'}
     </li>
   );
 }

src/content/learn/describing-the-ui.md

@@ -327,7 +327,7 @@ export function getImageUrl(person, size = 's') {
 function Item({ name, isPacked }) {
   return (
     <li className="item">
-      {name} {isPacked && '✔'}
+      {name} {isPacked && '✅'}
     </li>
   );
 }

src/content/learn/index.md

@@ -95,7 +95,7 @@ function AboutPage() {
 
 ## Додавання стилів {/*adding-styles*/}
 
-У React, ви вказуєте клас CSS за допомогою `className`. Він працює так само, як атрибут [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) у HTML:
+У React, ви вказуєте клас CSS за допомогою `className`. Він працює так само, як атрибут [`class`](https://webdoky.org/uk/docs/Web/HTML/Global_attributes/class) у HTML:
 
 ```js
 <img className="avatar" />
@@ -111,7 +111,7 @@ function AboutPage() {
 ```
 
 
-React не вказує, як додавати файли CSS. У найпростішому випадку ви додасте тег [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) до свого HTML. Якщо ви використовуєте інструмент збірки або фреймворк, зверніться до його документації, щоб дізнатися, як додати файл CSS до вашого проекту.
+React не вказує, як додавати файли CSS. У найпростішому випадку ви додасте тег [`<link>`](https://webdoky.org/uk/docs/Web/HTML/Element/link) до свого HTML. Якщо ви використовуєте інструмент збірки або фреймворк, зверніться до його документації, щоб дізнатися, як додати файл CSS до вашого проекту.
 
 ## Відображення даних {/*displaying-data*/}
 
@@ -182,7 +182,7 @@ export default function Profile() {
 ## Умовний рендер {/*conditional-rendering*/}
 
 
-У React немає спеціального синтаксису для запису умов. Замість цього ви будете використовувати ті ж прийоми, що й під час написання звичайного JavaScript коду. Наприклад, ви можете використовувати оператор [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else), щоб умовно включати JSX:
+У React немає спеціального синтаксису для запису умов. Замість цього ви будете використовувати ті ж прийоми, що й під час написання звичайного JavaScript коду. Наприклад, ви можете використовувати оператор [`if`](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Statements/if...else), щоб умовно включати JSX:
 
 ```js
 let content;
@@ -198,7 +198,7 @@ return (
 );
 ```
 
-Якщо ви віддаєте перевагу більш компактному коду, ви можете використовувати [умовний оператор `?`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator). На відміну від `if`, він працює в JSX:
+Якщо ви віддаєте перевагу більш компактному коду, ви можете використовувати [умовний оператор `?`](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Operators/Conditional_operator). На відміну від `if`, він працює в JSX:
 
 ```js
 <div>
@@ -210,7 +210,7 @@ return (
 </div>
 ```
 
-Якщо вам не потрібна гілка `else`, ви також можете використовувати коротший [логічний синтаксис `&&`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation):
+Якщо вам не потрібна гілка `else`, ви також можете використовувати коротший [логічний синтаксис `&&`](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Operators/Logical_AND#zakorochennia-obchyslennia):
 
 ```js
 <div>
@@ -221,7 +221,7 @@ return (
 
 ## Рендер списків {/*rendering-lists*/}
 
-Для рендеру списків компонентів ви будете покладатися на такі особливості JavaScript, як [цикл `for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) та [метод масивів `map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map).
+Для рендеру списків компонентів ви будете покладатися на такі особливості JavaScript, як [цикл `for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) та [метод масивів `map()`](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/map).
 
 Наприклад, припустімо, що у вас є масив продуктів:
 

src/content/learn/react-compiler.md

@@ -121,7 +121,7 @@ In addition to these docs, we recommend checking the [React Compiler Working Gro
 Prior to installing the compiler, you can first check to see if your codebase is compatible:
 
 <TerminalBlock>
-npx react-compiler-healthcheck@latest
+npx react-compiler-healthcheck@experimental
 </TerminalBlock>
 
 This script will:
@@ -143,7 +143,7 @@ Found no usage of incompatible libraries.
 React Compiler also powers an eslint plugin. The eslint plugin can be used **independently** of the compiler, meaning you can use the eslint plugin even if you don't use the compiler.
 
 <TerminalBlock>
-npm install eslint-plugin-react-compiler
+npm install eslint-plugin-react-compiler@experimental
 </TerminalBlock>
 
 Then, add it to your eslint config:
@@ -203,7 +203,7 @@ If you're starting a new project, you can enable the compiler on your entire cod
 ### Babel {/*usage-with-babel*/}
 
 <TerminalBlock>
-npm install babel-plugin-react-compiler
+npm install babel-plugin-react-compiler@experimental
 </TerminalBlock>
 
 The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler.
@@ -258,7 +258,7 @@ Next.js has an experimental configuration to enable the React Compiler. It autom
 - Install `babel-plugin-react-compiler`
 
 <TerminalBlock>
-npm install next@canary babel-plugin-react-compiler
+npm install next@canary babel-plugin-react-compiler@experimental
 </TerminalBlock>
 
 Then configure the experimental option in `next.config.js`: