diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml new file mode 100644 index 000000000..ff2caa1bf --- /dev/null +++ b/.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 }} \ No newline at end of file diff --git a/TRANSLATION.md b/TRANSLATION.md index a7aec3ceb..31731ee2e 100644 --- a/TRANSLATION.md +++ b/TRANSLATION.md @@ -178,6 +178,9 @@ | rendered markup | відрендерена розмітка | | ref | реф | | refs | рефи | +| route | маршрут | +| router | маршрутизатор | +| routing | маршрутизація | | (previous/next) section | (попередній/наступний) розділ *(тільки в розділі Основні поняття)* | | shallow | поверхове(а) (порівняння, рівність), поверховий (рендер) | | side effect | побічний ефект | diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx index fc13af338..7d95a6532 100644 --- a/src/components/MDX/TerminalBlock.tsx +++ b/src/components/MDX/TerminalBlock.tsx @@ -71,7 +71,7 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 6b95c64c6..85ffe9831 100644 --- a/src/content/community/conferences.md +++ b/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*/} diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index bb846e16e..32c5df338 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -1,53 +1,53 @@ --- -title: Інтеграція React в існуючий проект +title: Інтеграція React у наявний проєкт --- -Якщо ви хочете додати інтерактивності до вашого існуючого проєкту, не потрібно переписувати його на React. Додайте React до вашого наявного технологічного стеку і ви зможете рендерити інтерактивні React компоненти будь-де. +Якщо ви хочете додати інтерактивності до вашого проєкту, не потрібно переписувати його на React. Додайте React до вашого наявного технологічного стеку і ви зможете рендерити інтерактивні компоненти React будь-де. -**Вам потрібно встановити [Node.js](https://nodejs.org/en/) для локальної розробки.** Не дивлячись на те, що ви можете [спробувати React](/learn/installation#try-react) онлайн або на простій HTML сторінці, в реальності більшість JavaScript інструментів, які ви захочете використовувати для розробки, потребують Node.js. +**Вам потрібно встановити [Node.js](https://nodejs.org/en/) для локальної розробки.** Не дивлячись на те, що ви можете [спробувати React](/learn/installation#try-react) онлайн або на простій HTML-сторінці, насправді більшість JavaScript-інструментів, які ви захочете використовувати для розробки, потребують Node.js. -## Використання React для усього саброуту існуючого вебсайту {/*using-react-for-an-entire-subroute-of-your-existing-website*/} +## Використання React для усього підмаршруту наявного вебсайту {/*using-react-for-an-entire-subroute-of-your-existing-website*/} -Припустимо, що у вас є веб застосунок, що існує за адресою `example.com`, створений за допомогою іншої серверної технології (такої як Rails) і ви хочете реалізувати всі роути, які починаються з `example.com/some-app/` повністю використовуючи React. +Припустимо, що у вас є вебзастосунок, що існує за адресою `example.com` та створений за допомогою іншої серверної технології (як-от Rails), і ви хочете реалізувати всі маршрути, які починаються з `example.com/some-app/`, використовуючи лише React. Ось як ми рекомендуємо це налаштувати: -1. **Побудуйте React частину вашого додатку**, використовуючи один із [фреймворків на основі React](/learn/start-a-new-react-project). -2. **Позначте `/some-app` як *базовий шлях*** в конфігурації вашого фреймворку (ось як: [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)). -3. **Налаштуйте свій проксі або сервер**, щоб всі запити під шляхом `/some-app/` оброблялися вашим React-додатком. +1. **Побудуйте React-частину вашого застосунку**, використовуючи один із [фреймворків на основі React](/learn/start-a-new-react-project). +2. **Позначте `/some-app` як *базовий шлях*** у конфігурації вашого фреймворку (ось як: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)). +3. **Налаштуйте свій сервер або проксі**, щоб всі запити під шляхом `/some-app/` оброблялися вашим React-застосунком. -Це забезпечує React-частині вашого застосунку отримання всіх [переваг найкращих практик](/learn/start-a-new-react-project#can-i-use-react-without-a-framework), вбудованих у ці фреймворки. +Це надасть React-частині вашого застосунку всі [переваги від найкращих практик](/learn/start-a-new-react-project#can-i-use-react-without-a-framework), вбудованих у ці фреймворки. -Багато фреймворків на основі React є повностековими та дозволяють вашому React-додатку скористатися можливостями сервера. Однак ви можете використовувати цей же підхід, навіть якщо ви не можете або не хочете виконувати JavaScript на сервері. У цьому випадку, слід надавати HTML/CSS/JS експорт ([`next export` вихід](https://nextjs.org/docs/advanced-features/static-html-export) для Next.js, за замовчуванням для Gatsby) за адресою `/some-app/`. +Багато фреймворків на основі React є повностековими (full-stack) та дають змогу вашому React-застосунку скористатися можливостями сервера. Однак ви можете використовувати цей же підхід, навіть якщо у вас немає змоги або бажання виконувати JavaScript на сервері. У цьому випадку слід надавати експорт HTML/CSS/JS ([результат `next export`](https://nextjs.org/docs/advanced-features/static-html-export) для Next.js, стандартно для Gatsby) за адресою `/some-app/`. -## Використання React для частини існуючої сторінки {/*using-react-for-a-part-of-your-existing-page*/} +## Використання React для частини наявної сторінки {/*using-react-for-a-part-of-your-existing-page*/} -Припустимо, що у вас є існуюча сторінка, побудована за допомогою іншої технології (будь то серверна, така як Rails, або клієнтська, така як Backbone), і ви хочете рендерити інтерактивні React компоненти десь на цій сторінці. Це поширений спосіб інтегрувати React--насправді, це те, як більша частина використання React виглядала в Meta протягом багатьох років! +Припустимо, що у вас вже є сторінка, побудована за допомогою іншої технології (чи то серверна, як-от Rails, чи клієнтська, як-от Backbone), і ви хочете рендерити інтерактивні React-компоненти десь на цій сторінці. Це поширений спосіб інтегрувати React — так, насправді, здебільшого використовувався React у Meta протягом багатьох років! Ви можете зробити це у два кроки: -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 компоненти** там, де ви б хотіли бачити їх на сторінці. +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-компоненти** там, де ви б хотіли бачити їх на сторінці. -Конкретний підхід залежить від налаштувань вашої існуючої сторінки, тому розглянемо деякі деталі. +Конкретний підхід залежить від налаштувань вашої сторінки, тому розглянемо детальніше. -### Крок 1: Налаштуйте модульне JavaScript середовище {/*step-1-set-up-a-modular-javascript-environment*/} +### Крок 1: Налаштуйте модульне JavaScript-середовище {/*step-1-set-up-a-modular-javascript-environment*/} -Модульне JavaScript середовище дозволяє вам писати ваші React компоненти в окремих файлах замість того, щоб писати весь ваш код в єдиному файлі. Воно також дозволяє вам використовувати всі дивовижні пакети, опубліковані іншими розробниками до [npm](https://www.npmjs.com/) реєстру--включаючи сам React! Те, як ви це зробите, залежить від ваших наявних налаштувань: +Модульне середовище JavaScript дає вам змогу писати ваші React-компоненти в окремих файлах замість того, щоб писати весь ваш код у єдиному файлі. Воно також дає змогу використовувати всі дивовижні пакети, опубліковані іншими розробниками у [npm](https://www.npmjs.com/)-реєстрі — включно із React! Те, як ви це зробите, залежить від ваших наявних налаштувань: -* **Якщо ваш додаток вже розділений на файли, які використовують `import` вираз,** спробуйте використовувати ті налаштування, які в вас вже є. Перевірте, чи написання `
` в вашому JS коді спричиняє синтаксичну помилку. Якщо це спричиняє синтаксичну помилку, мабуть, вам потрібно [трансформувати ваш JavaScript код використовуючи Babel](https://babeljs.io/setup) і включити [попереднє налаштування Babel React](https://babeljs.io/docs/babel-preset-react), щоб користуватися JSX. +* **Якщо ваш застосунок вже розділений на файли, які використовують вираз `import`,** спробуйте використовувати ті налаштування, які у вас вже є. Перевірте, чи написання `
` у вашому JS-коді спричиняє синтаксичну помилку. Якщо це так, ймовірно, вам потрібно [трансформувати ваш JavaScript-код, використовуючи Babel](https://babeljs.io/setup), і включити [попереднє налаштування Babel React](https://babeljs.io/docs/babel-preset-react), щоб користуватися JSX. -* **Якщо ваш застосунок не налаштований, щоб компілювати JavaScript модулі,** налаштуйте його використовуючи [Vite](https://vitejs.dev/). Спільнота Vite утримує [багато інтеграцій з бекенд фреймворками](https://github.com/vitejs/awesome-vite#integrations-with-backends), включаючи Rails, Django і Laravel. Якщо вашого бекенд фреймворку немає в списку, [дотримуйтесь цього посібника](https://vitejs.dev/guide/backend-integration.html), щоб вручну інтегрувати Vite білди з вашим бекендом. +* **Якщо ваш застосунок не налаштований, щоб компілювати JavaScript-модулі,** налаштуйте його за допомогою [Vite](https://vitejs.dev/). Спільнота Vite підтримує [багато інтеграцій із фреймворками для сервера](https://github.com/vitejs/awesome-vite#integrations-with-backends), включно з Rails, Django і Laravel. Якщо вашого серверного фреймворку немає у списку, [дотримуйтеся цього посібника](https://vitejs.dev/guide/backend-integration.html), щоб із ним вручну інтегрувати Vite-збірку. -Щоб перевірити, що ваше налаштування працює, запустіть цю команду з папки проєкту: +Щоб перевірити, що ваше налаштування працює, виконайте цю команду з директорії проєкту: npm install react react-dom @@ -62,7 +62,7 @@ npm install react react-dom My app - + ``` @@ -70,10 +70,10 @@ npm install react react-dom ```js src/index.js active import { createRoot } from 'react-dom/client'; -// Очистимо існуючий зміст HTML +// Очистимо наявний зміст HTML document.body.innerHTML = '
'; -// Замість нього відрендеримо ваш React компонент +// Замість нього відрендеримо ваш React-компонент const root = createRoot(document.getElementById('app')); root.render(

Hello, world

); ``` @@ -84,30 +84,30 @@ root.render(

Hello, world

); -Інтеграція модульного середовища JavaScript в існуючий проєкт вперше може може відчуватись лякаюче, але це того варте! Якщо ви застрягли, спробуйте скористатися [ресурсами нашої спільноти](/community) або [чатом Vite](https://chat.vitejs.dev/). +Перша інтеграція модульного середовища JavaScript у наявний проєкт може лякати, але це того варте! Якщо ви застрягли, спробуйте скористатися [ресурсами нашої спільноти](/community) або [чатом Vite](https://chat.vitejs.dev/). -### Крок 2: Рендеріть React компоненти будь-де на сторінці {/*step-2-render-react-components-anywhere-on-the-page*/} +### Крок 2: Рендеріть React-компоненти будь-де на сторінці {/*step-2-render-react-components-anywhere-on-the-page*/} -У попередньому кроці, ви записали цей код на початку вашого основного файлу: +На попередньому кроці ви записали цей код на початку вашого основного файлу: ```js import { createRoot } from 'react-dom/client'; -// Очистимо існуючий зміст HTML +// Очистимо наявний зміст HTML document.body.innerHTML = '
'; -// Замість нього відрендеримо ваш React компонент +// Замість нього відрендеримо ваш React-компонент const root = createRoot(document.getElementById('app')); root.render(

Hello, world

); ``` -Звісно, насправді ви не хочете видаляти поточний HTML вміст! +Звісно, насправді ви не хочете видаляти поточний HTML-вміст! Видаліть цей код. -Замість цього, мабуть, ви хочете рендерити ваші React компоненти в специфічних місцях вашого HTML. Відкрийте вашу HTML сторінку (або серверний шаблон що генерує її) і додайте унікальний [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) атрибут будь-якому тегові, наприклад: +Замість цього, мабуть, ви хочете рендерити ваші React-компоненти у специфічних місцях вашого HTML. Відкрийте вашу HTML-сторінку (або серверний шаблон, що генерує її) і додайте унікальний атрибут [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) будь-якому тегові, наприклад: ```html @@ -115,7 +115,7 @@ root.render(

Hello, world

); ``` -Це дозволяє вам знайти цей HTML елемент, використовуючи [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) і передати його у [`createRoot`](/reference/react-dom/client/createRoot), щоб ви мали змогу рендерити ваші React компоненти всередині нього: +Це дає вам змогу знайти цей HTML-елемент, використовуючи [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById), і передати його у [`createRoot`](/reference/react-dom/client/createRoot), щоб ви могли рендерити ваші React-компоненти всередині нього: @@ -146,10 +146,10 @@ root.render(); -Зверніть увагу як оригінальний зміст HTML з `index.html` зберігся, проте ваш власний `NavigationBar` React компонент тепер зображуються всередині `