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 03f491211..ebd42c0d6 100644
--- a/src/content/learn/add-react-to-an-existing-project.md
+++ b/src/content/learn/add-react-to-an-existing-project.md
@@ -1,59 +1,59 @@
 ---
-title: Add React to an Existing Project
+title: Інтеграція React в існуючий проект
 ---
 
 <Intro>
 
-If you want to add some interactivity to your existing project, you don't have to rewrite it in React. Add React to your existing stack, and render interactive React components anywhere.
+Якщо ви хочете додати інтерактивності до вашого існуючого проєкту, не потрібно переписувати його на React. Додайте React до вашого наявного технологічного стеку і ви зможете рендерити інтерактивні React компоненти будь-де.
 
 </Intro>
 
 <Note>
 
-**You need to install [Node.js](https://nodejs.org/en/) for local development.** Although you can [try React](/learn/installation#try-react) online or with a simple HTML page, realistically most JavaScript tooling you'll want to use for development requires Node.js.
+**Вам потрібно встановити [Node.js](https://nodejs.org/en/) для локальної розробки.** Не дивлячись на те, що ви можете [спробувати React](/learn/installation#try-react) онлайн або на простій HTML сторінці, в реальності більшість JavaScript інструментів, які ви захочете використовувати для розробки, потребують Node.js.
 
 </Note>
 
-## Using React for an entire subroute of your existing website {/*using-react-for-an-entire-subroute-of-your-existing-website*/}
+## Використання React для усього саброуту існуючого вебсайту {/*using-react-for-an-entire-subroute-of-your-existing-website*/}
 
-Let's say you have an existing web app at `example.com` built with another server technology (like Rails), and you want to implement all routes starting with `example.com/some-app/` fully with React.
+Припустимо, що у вас є веб застосунок, що існує за адресою `example.com`, створений за допомогою іншої серверної технології (такої як Rails) і ви хочете реалізувати всі роути, які починаються з `example.com/some-app/` повністю використовуючи React.
 
-Here's how we recommend to set it up:
+Ось як ми рекомендуємо це налаштувати:
 
-1. **Build the React part of your app** using one of the [React-based frameworks](/learn/start-a-new-react-project).
-2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [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. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app.
+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-додатком.
 
-This ensures the React part of your app can [benefit from the best practices](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) baked into those frameworks.
+Це забезпечує можливість отримати всі [переваги найкращих практик](/learn/start-a-new-react-project#can-i-use-react-without-a-framework), вбудованих у ці фреймворки для React-частини вашого застосунку.
 
-Many React-based frameworks are full-stack and let your React app take advantage of the server. However, you can use the same approach even if you can't or don't want to run JavaScript on the server. In that case, serve the HTML/CSS/JS export ([`next export` output](https://nextjs.org/docs/advanced-features/static-html-export) for Next.js, default for Gatsby) at `/some-app/` instead.
+Багато фреймворків на основі React є повностековими та дозволяють вашому React-додатку скористатися можливостями сервера. Однак ви можете використовувати цей же підхід, навіть якщо ви не можете або не хочете виконувати JavaScript на сервері. У цьому випадку, слід надавати HTML/CSS/JS експорт ([`next export` вихід](https://nextjs.org/docs/advanced-features/static-html-export) для Next.js, за замовчуванням для Gatsby) за адресою `/some-app/`.
 
-## Using React for a part of your existing page {/*using-react-for-a-part-of-your-existing-page*/}
+## Використання React для частини існуючої сторінки {/*using-react-for-a-part-of-your-existing-page*/}
 
-Let's say you have an existing page built with another technology (either a server one like Rails, or a client one like Backbone), and you want to render interactive React components somewhere on that page. That's a common way to integrate React--in fact, it's how most React usage looked at Meta for many years!
+Припустимо що у вас є наявна сторінка, побудована за допомогою іншої технології (будь то серверна, така як Rails, або клієнтська, така як Backbone), і ви хочете рендерити інтерактивні React компоненти десь на цій сторінці. Це поширений спосіб інтегрувати React--насправді, це те, як більша частина використання React виглядала в Meta протягом багатьох років! 
 
-You can do this in two steps:
+Ви можете зробити це у два етапи:
 
-1. **Set up a JavaScript environment** that lets you use the [JSX syntax](/learn/writing-markup-with-jsx), split your code into modules with the [`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) syntax, and use packages (for example, React) from the [npm](https://www.npmjs.com/) package registry.
-2. **Render your React components** where you want to see them on the page.
+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/) реєстру пакетів.
+2. **Рендеріть ваші React компоненти** там, де ви б хотіли бачити їх на сторінці.
 
-The exact approach depends on your existing page setup, so let's walk through some details.
+Конкретний підхід залежить від налаштувань вашої наявної сторінки, тому розглянемо деякі деталі.
 
-### Step 1: Set up a modular JavaScript environment {/*step-1-set-up-a-modular-javascript-environment*/}
+### Крок 1: Налаштуйте модульне JavaScript оточення {/*step-1-set-up-a-modular-javascript-environment*/}
 
-A modular JavaScript environment lets you write your React components in individual files, as opposed to writing all of your code in a single file. It also lets you use all the wonderful packages published by other developers on the [npm](https://www.npmjs.com/) registry--including React itself! How you do this depends on your existing setup:
+Модульне JavaScript оточення дозволяє вам писати ваші React компоненти в окремих файлах замість того, щоб писати весь ваш код в єдиному файлі. Воно також дозволяє вам використовувати всі прекрасні пакети, опубліковані іншими розробниками до [npm](https://www.npmjs.com/) реєстру--включаючи сам React! Те, як ви це зробите, залежить від ваших наявних налаштувань:
 
-* **If your app is already split into files that use `import` statements,** try to use the setup you already have. Check whether writing `<div />` in your JS code causes a syntax error. If it causes a syntax error, you might need to [transform your JavaScript code with Babel](https://babeljs.io/setup), and enable the [Babel React preset](https://babeljs.io/docs/babel-preset-react) to use JSX.
+* **Якщо ваш застосунок вже розділяє файли, які використовують `import` констатування,** спробуйте використовувати ті налаштування, які в вас вже є. Перевірте чи написання `<div />` в вашому JS коді спричиняє синтаксичну помилку. Якщо це спричиняє синтаксичну помилку, мабуть, вам потрібно [трансформувати ваш JavaScript код використовуючи Babel](https://babeljs.io/setup) і включити [попереднє налаштування Babel React](https://babeljs.io/docs/babel-preset-react), щоб користуватися JSX.
 
-* **If your app doesn't have an existing setup for compiling JavaScript modules,** set it up with [Vite](https://vitejs.dev/). The Vite community maintains [many integrations with backend frameworks](https://github.com/vitejs/awesome-vite#integrations-with-backends), including Rails, Django, and Laravel. If your backend framework is not listed, [follow this guide](https://vitejs.dev/guide/backend-integration.html) to manually integrate Vite builds with your backend.
+* **Якщо ваш застосунок не налаштований, щоб компілювати 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 білди з вашим бекендом.
 
-To check whether your setup works, run this command in your project folder:
+Щоб перевірити, що ваше налаштування працює, запустіть цю команду з папки проєкту:
 
 <TerminalBlock>
 npm install react react-dom
 </TerminalBlock>
 
-Then add these lines of code at the top of your main JavaScript file (it might be called `index.js` or `main.js`):
+Після цього додайте ці рядки коду на початку вашого основного JavaScript-файлу (він може називатися index.js або main.js):
 
 <Sandpack>
 
@@ -62,7 +62,7 @@ Then add these lines of code at the top of your main JavaScript file (it might b
 <html>
   <head><title>My app</title></head>
   <body>
-    <!-- Your existing page content (in this example, it gets replaced) -->
+    <!-- Присутній зміст вашої сторінки (у цьому прикладі, він підміняється) -->
   </body>
 </html>
 ```
@@ -70,52 +70,52 @@ Then add these lines of code at the top of your main JavaScript file (it might b
 ```js index.js active
 import { createRoot } from 'react-dom/client';
 
-// Clear the existing HTML content
+// Очистимо існуючий зміст HTML
 document.body.innerHTML = '<div id="app"></div>';
 
-// Render your React component instead
+// Замість нього відрендеримо ваш React компонент
 const root = createRoot(document.getElementById('app'));
 root.render(<h1>Hello, world</h1>);
 ```
 
 </Sandpack>
 
-If the entire content of your page was replaced by a "Hello, world!", everything worked! Keep reading.
+Якщо весь зміст вашої сторінки був замінений на "Hello, world!", все спрацювало! Продовжуйте читати.
 
 <Note>
 
-Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it's worth it! If you get stuck, try our [community resources](/community) or the [Vite Chat](https://chat.vitejs.dev/).
+Інтеграція модульного середовища JavaScript у наявний проєкт вперше може викликати певну незручність, але це того варте! Якщо ви застрягли, спробуйте скористатися [ресурсами нашої спільноти](/community) або [чатом Vite](https://chat.vitejs.dev/).
 
 </Note>
 
-### Step 2: Render React components anywhere on the page {/*step-2-render-react-components-anywhere-on-the-page*/}
+### Крок 2: Рендеріть React компоненти будь-де на сторінці {/*step-2-render-react-components-anywhere-on-the-page*/}
 
-In the previous step, you put this code at the top of your main file:
+У попередньому кроці, ви записали цей код на початку вашого основного файлу:
 
 ```js
 import { createRoot } from 'react-dom/client';
 
-// Clear the existing HTML content
+// Очистимо існуючий зміст HTML
 document.body.innerHTML = '<div id="app"></div>';
 
-// Render your React component instead
+// Замість нього відрендеримо ваш React компонент
 const root = createRoot(document.getElementById('app'));
 root.render(<h1>Hello, world</h1>);
 ```
 
-Of course, you don't actually want to clear the existing HTML content!
+Звісно, ви навряд чи хочете видаляти чинний зміст HTML!
 
-Delete this code.
+Видалите цей код.
 
-Instead, you probably want to render your React components in specific places in your HTML. Open your HTML page (or the server templates that generate it) and add a unique [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) attribute to any tag, for example:
+Замість цього, мабуть, ви хочете рендерити ваші React компоненти в специфічні місця вашого HTML. Відкрийте вашу HTML сторінку (або серверний шаблон що генерує її) і додайте унікальний [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) атрибут будь-якому тегу, наприклад:
 
 ```html
-<!-- ... somewhere in your html ... -->
+<!-- ... десь у вашому html ... -->
 <nav id="navigation"></nav>
-<!-- ... more html ... -->
+<!-- ... інший html ... -->
 ```
 
-This lets you find that HTML element with [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) and pass it to [`createRoot`](/reference/react-dom/client/createRoot) so that you can render your own React component inside:
+Це дозволяє вам знайти цей HTML елемент, використовуючи [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) і передати його у [`createRoot`](/reference/react-dom/client/createRoot), щоб ви мали змогу рендерити ваші React компоненти всередині нього:
 
 <Sandpack>
 
@@ -124,9 +124,9 @@ This lets you find that HTML element with [`document.getElementById`](https://de
 <html>
   <head><title>My app</title></head>
   <body>
-    <p>This paragraph is a part of HTML.</p>
+    <p>Цей параграф є частиною HTML.</p>
     <nav id="navigation"></nav>
-    <p>This paragraph is also a part of HTML.</p>
+    <p>Цей параграф також є частиною HTML.</p>
   </body>
 </html>
 ```
@@ -135,8 +135,8 @@ This lets you find that HTML element with [`document.getElementById`](https://de
 import { createRoot } from 'react-dom/client';
 
 function NavigationBar() {
-  // TODO: Actually implement a navigation bar
-  return <h1>Hello from React!</h1>;
+  // TODO: Насправді створити навігацію
+  return <h1>Привіт з React!</h1>;
 }
 
 const domNode = document.getElementById('navigation');
@@ -146,10 +146,10 @@ root.render(<NavigationBar />);
 
 </Sandpack>
 
-Notice how the original HTML content from `index.html` is preserved, but your own `NavigationBar` React component now appears inside the `<nav id="navigation">` from your HTML. Read the [`createRoot` usage documentation](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) to learn more about rendering React components inside an existing HTML page.
+Зверніть увагу як оригінальний зміст HTML з `index.html` зберігся, проте ваш власний `NavigationBar` React компоненти тепер зображуються всередині `<nav id="navigation">` з вашого HTML. Читайте [документацію використання `createRoot`](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react), щоб дізнатися більше про рендерінг React компонентів всередині наявної HTML сторінки.
 
-When you adopt React in an existing project, it's common to start with small interactive components (like buttons), and then gradually keep "moving upwards" until eventually your entire page is built with React. If you ever reach that point, we recommend migrating to [a React framework](/learn/start-a-new-react-project) right after to get the most out of React.
+Коли ви впроваджуєте React у наявний проєкт, зазвичай починають з невеликих інтерактивних компонентів (наприклад, кнопок), а потім поступово "підіймаються вгору" до того часу, поки увесь ваш вебсайт не буде побудований з використанням React. Якщо ви досягнете цієї точки, ми рекомендуємо одразу перейти до [фреймворку React](/learn/start-a-new-react-project), щоб найбільш ефективно його використовувати.
 
-## Using React Native in an existing native mobile app {/*using-react-native-in-an-existing-native-mobile-app*/}
+## Використання React Native в існуючому нативному застосунку {/*using-react-native-in-an-existing-native-mobile-app*/}
 
-[React Native](https://reactnative.dev/) can also be integrated into existing native apps incrementally. If you have an existing native app for Android (Java or Kotlin) or iOS (Objective-C or Swift), [follow this guide](https://reactnative.dev/docs/integration-with-existing-apps) to add a React Native screen to it.
+[React Native](https://reactnative.dev/) також може бути інтегрований в існуючи нативні застосунки поступово. Якщо у вас є наявний нативний застосунок для Android (Java або Kotlin) або iOS (Objective-C або Swift), [дотримуйтесь цього посібника](https://reactnative.dev/docs/integration-with-existing-apps), щоб додати React Native екран до нього.