From ab7df29f316c1a6247bd5a7a92edc500471620b1 Mon Sep 17 00:00:00 2001
From: "translate-react-bot[bot]"
<251169733+translate-react-bot[bot]@users.noreply.github.com>
Date: Wed, 4 Feb 2026 15:04:03 +0000
Subject: [PATCH 1/2] =?UTF-8?q?docs:=20translate=20`add-react-to-an-existi?=
=?UTF-8?q?ng-project.md`=20to=20=D0=A0=D1=83=D1=81=D1=81=D0=BA=D0=B8?=
=?UTF-8?q?=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../learn/add-react-to-an-existing-project.md | 92 +++++++++----------
1 file changed, 46 insertions(+), 46 deletions(-)
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 4684fb5b07..f359bdd4f1 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 в существующий проект
---
-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-компоненты где угодно.
-**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.
-## 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/app/api-reference/config/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/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-приложением.
-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.
+Это гарантирует, что React-часть вашего приложения сможет [воспользоваться лучшими практиками](/learn/start-a-new-react-project#can-i-use-react-without-a-framework), встроенными в эти фреймворки.
-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` output](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 `` 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`,** попробуйте использовать уже имеющуюся настройку. Проверьте, вызывает ли написание `` в вашем JS-коде ошибку синтаксиса. Если это вызывает ошибку синтаксиса, вам может потребоваться [трансформировать ваш JavaScript-код с помощью Babel](https://babeljs.io/setup) и включить [Babel React preset](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://vite.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://vite.dev/guide/backend-integration.html) to manually integrate Vite builds with your backend.
+* **Если у вашего приложения нет существующей настройки для компиляции модулей JavaScript,** настройте ее с помощью [Vite](https://vite.dev/). Сообщество Vite поддерживает [множество интеграций с бэкенд-фреймворками](https://github.com/vitejs/awesome-vite#integrations-with-backends), включая Rails, Django и Laravel. Если вашего бэкенд-фреймворка нет в списке, [следуйте этому руководству](https://vite.dev/guide/backend-integration.html), чтобы вручную интегрировать сборки Vite с вашим бэкендом.
-To check whether your setup works, run this command in your project folder:
+Чтобы проверить, работает ли ваша настройка, выполните эту команду в папке вашего проекта:
npm install react react-dom
-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`):
@@ -62,7 +62,7 @@ Then add these lines of code at the top of your main JavaScript file (it might b
My app
-
+
@@ -71,52 +71,52 @@ Then add these lines of code at the top of your main JavaScript file (it might b
```js src/index.js active
import { createRoot } from 'react-dom/client';
-// Clear the existing HTML content
+// Очищаем существующий HTML-контент
document.body.innerHTML = '';
-// Render your React component instead
+// Рендерим ваш React-компонент вместо него
const root = createRoot(document.getElementById('app'));
root.render(
Hello, world
);
```
-If the entire content of your page was replaced by a "Hello, world!", everything worked! Keep reading.
+Если весь контент вашей страницы был заменен на "Hello, world!", значит, все сработало! Продолжайте читать.
-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.vite.dev/).
+Интеграция модульной JavaScript-среды в существующий проект впервые может показаться пугающей, но оно того стоит! Если у вас возникнут трудности, обратитесь к нашим [ресурсам сообщества](/community) или в [чат Vite](https://chat.vite.dev/).
-### 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 = '';
-// Render your React component instead
+// Рендерим ваш React-компонент вместо него
const root = createRoot(document.getElementById('app'));
root.render(
Hello, world
);
```
-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
-
+
-
+
```
-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-компонент внутри:
@@ -125,9 +125,9 @@ This lets you find that HTML element with [`document.getElementById`](https://de
My app
-
This paragraph is a part of HTML.
+
Этот параграф является частью HTML.
-
This paragraph is also a part of HTML.
+
Этот параграф также является частью HTML.
```
@@ -136,8 +136,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
;
}
const domNode = document.getElementById('navigation');
@@ -147,10 +147,10 @@ root.render();
-Notice how the original HTML content from `index.html` is preserved, but your own `NavigationBar` React component now appears inside the `