Merge pull request #585 from reactjs/sync-9000e6e0

Sync with react.dev @ 9000e6e

Author: alinkedd

.github/workflows/discord_notify.yml

@@ -0,0 +1,21 @@
+name: Discord Notify
+
+on:
+  pull_request_target:
+    types: [ labeled ]
+
+jobs:
+  notify:
+    if: ${{ github.event.label.name == 'React Core Team' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@v6.0.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          embed-author-name: ${{ github.event.pull_request.user.login }}
+          embed-author-url: ${{ github.event.pull_request.user.html_url }}
+          embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }}
+          embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}'
+          embed-description: ${{ github.event.pull_request.body }}
+          embed-url: ${{ github.event.pull_request.html_url }}

TRANSLATION.md

@@ -178,6 +178,9 @@
 | rendered markup | відрендерена розмітка |
 | ref | реф |
 | refs | рефи |
+| route | маршрут |
+| router | маршрутизатор |
+| routing | маршрутизація |
 | (previous/next) section | (попередній/наступний) розділ *(тільки в розділі Основні поняття)* |
 | shallow | поверхове(а) (порівняння, рівність), поверховий (рендер) |
 | side effect | побічний ефект |

src/components/MDX/TerminalBlock.tsx

@@ -71,7 +71,7 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
         </div>
       </div>
       <div
-        className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre overflow-x-scroll"
+        className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre overflow-x-auto"
         translate="no"
         dir="ltr">
         <LevelText type={level} />

src/content/community/conferences.md

@@ -25,6 +25,11 @@ June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event)
 
 [Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit)
 
+### React Universe Conf 2025 {/*react-universe-conf-2025*/}
+September 2-4, 2025. Wrocław, Poland.
+
+[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
+
 ## Past Conferences {/*past-conferences*/}
 
 ### React Africa 2024 {/*react-africa-2024*/}

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

@@ -52,7 +52,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Ці компоненти зараз знаходяться у **файлі кореневого компонента** з назвою `App.js` у цьому прикладі. Залежно від вашої конфігурації ваш кореневий компонент може бути в іншому файлі. Якщо ви використовуєте фреймворк з роутингом на основі файлів, як-от Next.js, ваш кореневий компонент буде різним для кожної сторінки.
+Ці компоненти зараз знаходяться у **файлі кореневого компонента** з назвою `App.js` у цьому прикладі. Залежно від вашої конфігурації ваш кореневий компонент може бути в іншому файлі. Якщо ви використовуєте фреймворк із маршрутизацією на основі файлів, як-от Next.js, ваш кореневий компонент буде різним для кожної сторінки.
 
 ## Експорт та імпорт компонента {/*exporting-and-importing-a-component*/}
 

src/content/learn/importing-and-exporting-components.md

@@ -21,7 +21,7 @@ title: Швидкий старт
 
 ## Створення та вкладення компонентів {/*components*/}
 
-React додатки складаються з *компонентів*. Компонент це частина UI (інтерфейсу користувача), яка має власну логіку та зовнішній вигляд. Компонент може бути маленьким, як кнопка, або ж розміром з цілу сторінку.
+React-застосунки складаються з *компонентів*. Компонент це частина UI (інтерфейсу користувача), яка має власну логіку та зовнішній вигляд. Компонент може бути маленьким, як кнопка, або ж розміром з цілу сторінку.
 
 React компоненти це JavaScript функції які повертають розмітку:
 
@@ -39,7 +39,7 @@ function MyButton() {
 export default function MyApp() {
   return (
     <div>
-      <h1>Ласкаво просимо до мого додатку</h1>
+      <h1>Ласкаво просимо до мого застосунку</h1>
       <MyButton />
     </div>
   );
@@ -64,7 +64,7 @@ function MyButton() {
 export default function MyApp() {
   return (
     <div>
-      <h1>Ласкаво просимо до мого додатку</h1>
+      <h1>Ласкаво просимо до мого застосунку</h1>
       <MyButton />
     </div>
   );
@@ -77,7 +77,7 @@ export default function MyApp() {
 
 ## Написання розмітки з використанням JSX {/*writing-markup-with-jsx*/}
 
-Синтаксис розмітки, яку ви бачили вище, має назву *JSX*. Це необов'язково, але більшість React-проектів використовують JSX для зручності. Усі  [інструменти, які ми рекомендуємо для локальної розробки](/learn/installation) підтримують JSX за замовчуванням.
+Синтаксис розмітки, яку ви бачили вище, має назву *JSX*. Це необов'язково, але більшість React-проєктів використовують JSX для зручності. Усі  [інструменти, які ми рекомендуємо для локальної розробки](/learn/installation) підтримують JSX за замовчуванням.
 
 JSX більш строгий, ніж HTML. Ви зобов'язані закривати такі теги як `<br />`. Також ваш компонент не може повертати декілька JSX тегів. Ви повинні огортати їх у спільний батьківський елемент, такий як `<div>...</div>` або пусту `<>...</>` обгортку:
 
@@ -111,7 +111,7 @@ function AboutPage() {
 ```
 
 
-React не вказує, як додавати файли CSS. У найпростішому випадку ви додасте тег [`<link>`](https://webdoky.org/uk/docs/Web/HTML/Element/link) до свого HTML. Якщо ви використовуєте інструмент збірки або фреймворк, зверніться до його документації, щоб дізнатися, як додати файл CSS до вашого проекту.
+React не вказує, як додавати файли CSS. У найпростішому випадку ви додасте тег [`<link>`](https://webdoky.org/uk/docs/Web/HTML/Element/link) до свого HTML. Якщо ви використовуєте інструмент збірки або фреймворк, зверніться до його документації, щоб дізнатися, як додати файл CSS до вашого проєкту.
 
 ## Відображення даних {/*displaying-data*/}
 
@@ -383,7 +383,7 @@ button {
 
 ## Використання хуків {/*using-hooks*/}
 
-Функції, що починаються з `use`, називаються *Хуками*. `useState` — це вбудований Хук, наданий React. Ви можете знайти інші вбудовані Хуки в [API довіднику](/reference/react). Також ви можете написати власні Хуки, комбінуючи існуючі.
+Функції, що починаються з `use`, називаються *Хуками*. `useState` — це вбудований Хук, наданий React. Ви можете знайти інші вбудовані Хуки в [API довіднику](/reference/react). Також ви можете написати власні Хуки, комбінуючи наявні.
 
 Хуки є більш обмежувальними, ніж інші функції. Ви можете викликати Хуки лише *на верхньому рівні* ваших компонентів (або інших Хуків). Якщо ви хочете використовувати `useState` в умові або циклі, витягніть це в новий компонент і помістіть його туди.
 
@@ -535,4 +535,4 @@ button {
 
 Тепер ви знаєте основи написання React коду!
 
-Перегляньте [Туторіал](/learn/tutorial-tic-tac-toe) щоб застосувати їх на практиці та створити свій перший міні-додаток із React.
+Перегляньте [Туторіал](/learn/tutorial-tic-tac-toe) щоб застосувати їх на практиці та створити свій перший міні-застосунок із React.

src/content/learn/index.md

@@ -11,7 +11,7 @@ title: Встановлення
 <YouWillLearn isChapter={true}>
 
 * [Як почати новий React-проєкт](/learn/start-a-new-react-project)
-* [Як інтегрувати React в існуючий проєкт](/learn/add-react-to-an-existing-project)
+* [Як інтегрувати React у наявний проєкт](/learn/add-react-to-an-existing-project)
 * [Як налаштувати редактор коду](/learn/editor-setup)
 * [Як встановити інструменти React розробника](/learn/react-developer-tools)
 
@@ -47,9 +47,9 @@ export default function App() {
 
 Якщо ви хочете створити застосунок або вебсайт за допомогою React, [почніть новий React-проєкт.](/learn/start-a-new-react-project)
 
-## Інтегрувати React в існуючий проєкт {/*add-react-to-an-existing-project*/}
+## Інтегрувати React у наявний проєкт {/*add-react-to-an-existing-project*/}
 
-Якщо ви хочете використати React у власному застосунку або вебсайті, [інтегруйте React в існуючий проєкт.](/learn/add-react-to-an-existing-project)
+Якщо ви хочете використати React у власному застосунку або вебсайті, [інтегруйте React у наявний проєкт.](/learn/add-react-to-an-existing-project)
 
 ## Подальші кроки {/*next-steps*/}
 

src/content/learn/installation.md

@@ -88,7 +88,7 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-Натомість створіть *новий* масив, який містить існуючі елементи *і* новий елемент у кінці. Це можна зробити кількома способами, але найпростішим є використання `...` — синтаксису [spread для масиву](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals):
+Натомість створіть *новий* масив, який містить наявні елементи *і* новий елемент у кінці. Це можна зробити кількома способами, але найпростішим є використання `...` — синтаксису [spread для масиву](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals):
 
 ```js
 setArtists( // Замінити стан
@@ -443,7 +443,7 @@ export default function List() {
 
 Тут ви використовуєте spread-синтаксис `[...list]`, щоб спочатку створити копію вихідного масиву. Тепер, коли маєте копію, можете використовувати методи зміни, як-от `nextList.reverse()` або `nextList.sort()`, або навіть призначати окремі елементи за допомогою `nextList[0] = "something"`.
 
-Однак, **навіть якщо скопіюєте масив, ви не зможете змінити існуючі елементи _всередині_ нього безпосередньо.** Це пояснюється тим, що копіювання неглибоке — новий масив міститиме ті самі елементи, що й оригінальний. Отже, якщо змінюєте об'єкт у скопійованому масиві, ви змінюєте наявний стан. Наприклад, такий код є проблемою.
+Однак, **навіть якщо скопіюєте масив, ви не зможете змінити наявні елементи _всередині_ нього безпосередньо.** Це пояснюється тим, що копіювання неглибоке — новий масив міститиме ті самі елементи, що й оригінальний. Отже, якщо змінюєте об'єкт у скопійованому масиві, ви змінюєте наявний стан. Наприклад, такий код є проблемою.
 
 ```js
 const nextList = [...list];
@@ -544,7 +544,7 @@ function ItemList({ artworks, onToggle }) {
 ```js
 const myNextList = [...myList];
 const artwork = myNextList.find(a => a.id === artworkId);
-artwork.seen = nextSeen; // Проблема: мутація існуючого елементу
+artwork.seen = nextSeen; // Проблема: мутація наявного елементу
 setMyList(myNextList);
 ```
 
@@ -566,7 +566,7 @@ setMyList(myList.map(artwork => {
 
 Тут `...` — синтаксис spread об'єкта, який використовується для [створення копії об'єкта.](/learn/updating-objects-in-state#copying-objects-with-the-spread-syntax)
 
-За допомогою цього підходу жоден із існуючих елементів стану не змінюється, і помилку виправлено:
+За допомогою цього підходу жоден із наявних елементів стану не змінюється, і помилку виправлено:
 
 <Sandpack>