Skip to content

Commit 92bbee0

Browse files
translate-react-bot[bot]translate-react-bot[bot]
authored
docs: translate add-react-to-an-existing-project.md to Русский
1 parent ab7df29 commit 92bbee0

1 file changed

Lines changed: 22 additions & 23 deletions

File tree

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

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
---
22
title: Добавление React в существующий проект
33
---
4-
54
<Intro>
65

7-
Если вы хотите добавить интерактивность в существующий проект, вам не обязательно переписывать его на React. Вы можете добавить React в свой текущий стек и рендерить интерактивные React-компоненты где угодно.
6+
Если вы хотите добавить интерактивность в существующий проект, вам не нужно переписывать его на React. Добавьте React в свой текущий стек и отображайте интерактивные React-компоненты где угодно.
87

98
</Intro>
109

1110
<Note>
1211

13-
**Для локальной разработки вам необходимо установить [Node.js](https://nodejs.org/en/).** Хотя вы можете [попробовать React](/learn/installation#try-react) онлайн или с простой HTML-страницей, большинство инструментов для разработки на JavaScript требуют Node.js.
12+
**Для локальной разработки вам необходимо установить [Node.js](https://nodejs.org/en/).** Хотя вы можете [попробовать React](/learn/installation#try-react) онлайн или с простой HTML-страницей, на практике большинство инструментов для разработки на JavaScript, которые вы захотите использовать, требуют Node.js.
1413

1514
</Note>
1615

@@ -22,30 +21,30 @@ title: Добавление React в существующий проект
2221

2322
1. **Создайте React-часть вашего приложения**, используя один из [фреймворков на базе React](/learn/start-a-new-react-project).
2423
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/)).
25-
3. **Настройте ваш сервер или прокси**, чтобы все запросы по адресу `/some-app/` обрабатывались вашим React-приложением.
24+
3. **Настройте ваш сервер или прокси-сервер** так, чтобы все запросы по адресу `/some-app/` обрабатывались вашим React-приложением.
2625

27-
Это гарантирует, что React-часть вашего приложения сможет [воспользоваться лучшими практиками](/learn/start-a-new-react-project#can-i-use-react-without-a-framework), встроенными в эти фреймворки.
26+
Это гарантирует, что React-часть вашего приложения сможет [воспользоваться лучшими практиками](/learn/start-a-new-react-project#can-i-use-react-without-a-framework), заложенными в этих фреймворках.
2827

29-
Многие фреймворки на базе React являются полнофункциональными и позволяют вашему React-приложению использовать сервер. Однако вы можете использовать тот же подход, даже если вы не можете или не хотите запускать JavaScript на сервере. В этом случае вместо этого предоставьте HTML/CSS/JS экспорт ([`next export` output](https://nextjs.org/docs/advanced-features/static-html-export) для Next.js, по умолчанию для Gatsby) по адресу `/some-app/`.
28+
Многие фреймворки на базе React являются полнофункциональными и позволяют вашему React-приложению использовать сервер. Однако вы можете использовать тот же подход, даже если вы не можете или не хотите запускать JavaScript на сервере. В этом случае вместо этого предоставьте HTML/CSS/JS экспорт ([вывод `next export`](https://nextjs.org/docs/advanced-features/static-html-export) для Next.js, по умолчанию для Gatsby) по адресу `/some-app/`.
3029

3130
## Использование React для части существующей страницы {/*using-react-for-a-part-of-your-existing-page*/}
3231

33-
Предположим, у вас есть существующая страница, созданная с использованием другой технологии (серверной, такой как Rails, или клиентской, такой как Backbone), и вы хотите рендерить интерактивные React-компоненты где-то на этой странице. Это распространенный способ интеграции React — на самом деле, именно так большая часть использования React выглядела в Meta на протяжении многих лет!
32+
Предположим, у вас есть существующая страница, созданная с использованием другой технологии (либо серверной, как Rails, либо клиентской, как Backbone), и вы хотите отображать интерактивные React-компоненты где-то на этой странице. Это распространенный способ интеграции React — на самом деле, именно так выглядело большинство использований React в Meta на протяжении многих лет!
3433

3534
Вы можете сделать это в два шага:
3635

3736
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/).
38-
2. **Рендерите ваши React-компоненты** там, где вы хотите их видеть на странице.
37+
2. **Отобразите ваши React-компоненты** там, где вы хотите их видеть на странице.
3938

4039
Точный подход зависит от вашей существующей конфигурации страницы, поэтому давайте рассмотрим некоторые детали.
4140

4241
### Шаг 1: Настройка модульной JavaScript-среды {/*step-1-set-up-a-modular-javascript-environment*/}
4342

44-
Модульная JavaScript-среда позволяет писать ваши React-компоненты в отдельных файлах, в отличие от написания всего кода в одном файле. Она также позволяет использовать все замечательные пакеты, опубликованные другими разработчиками в реестре [npm](https://www.npmjs.com/) — включая сам React! Как это сделать, зависит от вашей существующей конфигурации:
43+
Модульная JavaScript-среда позволяет писать ваши React-компоненты в отдельных файлах, в отличие от написания всего кода в одном файле. Она также позволяет использовать все замечательные пакеты, опубликованные другими разработчиками в реестре [npm](https://www.npmjs.com/) — включая сам React! То, как вы это сделаете, зависит от вашей существующей конфигурации:
4544

46-
* **Если ваше приложение уже разбито на файлы, использующие операторы `import`,** попробуйте использовать уже имеющуюся настройку. Проверьте, вызывает ли написание `<div />` в вашем JS-коде ошибку синтаксиса. Если это вызывает ошибку синтаксиса, вам может потребоваться [трансформировать ваш JavaScript-код с помощью Babel](https://babeljs.io/setup) и включить [Babel React preset](https://babeljs.io/docs/babel-preset-react) для использования JSX.
45+
* **Если ваше приложение уже разбито на файлы, использующие `import`**, попробуйте использовать уже имеющуюся настройку. Проверьте, вызывает ли написание `<div />` в вашем JS-коде ошибку синтаксиса. Если это вызывает ошибку синтаксиса, вам может потребоваться [трансформировать ваш JavaScript-код с помощью Babel](https://babeljs.io/setup) и включить [Babel React preset](https://babeljs.io/docs/babel-preset-react) для использования JSX.
4746

48-
* **Если у вашего приложения нет существующей настройки для компиляции модулей 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 с вашим бэкендом.
47+
* **Если у вашего приложения нет существующей настройки для компиляции 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 с вашим бэкендом.
4948

5049
Чтобы проверить, работает ли ваша настройка, выполните эту команду в папке вашего проекта:
5150

@@ -71,10 +70,10 @@ npm install react react-dom
7170
```js src/index.js active
7271
import { createRoot } from 'react-dom/client';
7372

74-
// Очищаем существующий HTML-контент
73+
// Очистить существующий HTML-контент
7574
document.body.innerHTML = '<div id="app"></div>';
7675

77-
// Рендерим ваш React-компонент вместо него
76+
// Отобразить ваш React-компонент вместо этого
7877
const root = createRoot(document.getElementById('app'));
7978
root.render(<h1>Hello, world</h1>);
8079
```
@@ -85,21 +84,21 @@ root.render(<h1>Hello, world</h1>);
8584

8685
<Note>
8786

88-
Интеграция модульной JavaScript-среды в существующий проект впервые может показаться пугающей, но оно того стоит! Если у вас возникнут трудности, обратитесь к нашим [ресурсам сообщества](/community) или в [чат Vite](https://chat.vite.dev/).
87+
Интеграция модульной JavaScript-среды в существующий проект впервые может показаться сложной, но оно того стоит! Если у вас возникнут трудности, обратитесь к нашим [ресурсам сообщества](/community) или в [чат Vite](https://chat.vite.dev/).
8988

9089
</Note>
9190

92-
### Шаг 2: Рендеринг React-компонентов в любом месте страницы {/*step-2-render-react-components-anywhere-on-the-page*/}
91+
### Шаг 2: Отображение React-компонентов в любом месте страницы {/*step-2-render-react-components-anywhere-on-the-page*/}
9392

94-
В предыдущем шаге вы добавили этот код в начало вашего основного файла:
93+
В предыдущем шаге вы поместили этот код в начало вашего основного файла:
9594

9695
```js
9796
import { createRoot } from 'react-dom/client';
9897

99-
// Очищаем существующий HTML-контент
98+
// Очистить существующий HTML-контент
10099
document.body.innerHTML = '<div id="app"></div>';
101100

102-
// Рендерим ваш React-компонент вместо него
101+
// Отобразить ваш React-компонент вместо этого
103102
const root = createRoot(document.getElementById('app'));
104103
root.render(<h1>Hello, world</h1>);
105104
```
@@ -108,15 +107,15 @@ root.render(<h1>Hello, world</h1>);
108107

109108
Удалите этот код.
110109

111-
Вместо этого вы, вероятно, захотите рендерить ваши React-компоненты в определенных местах вашего HTML. Откройте вашу HTML-страницу (или серверные шаблоны, которые ее генерируют) и добавьте уникальный атрибут [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) к любому тегу, например:
110+
Вместо этого вы, вероятно, захотите отображать ваши React-компоненты в определенных местах вашего HTML. Откройте вашу HTML-страницу (или серверные шаблоны, которые ее генерируют) и добавьте уникальный атрибут [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) к любому тегу, например:
112111

113112
```html
114113
<!-- ... где-то в вашем html ... -->
115114
<nav id="navigation"></nav>
116115
<!-- ... еще html ... -->
117116
```
118117

119-
Это позволит вам найти этот HTML-элемент с помощью [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) и передать его в [`createRoot`](/reference/react-dom/client/createRoot), чтобы вы могли рендерить свой собственный React-компонент внутри:
118+
Это позволит вам найти этот HTML-элемент с помощью [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) и передать его в [`createRoot`](/reference/react-dom/client/createRoot), чтобы вы могли отобразить свой собственный React-компонент внутри:
120119

121120
<Sandpack>
122121

@@ -136,7 +135,7 @@ root.render(<h1>Hello, world</h1>);
136135
import { createRoot } from 'react-dom/client';
137136

138137
function NavigationBar() {
139-
// TODO: Реализовать навигационную панель
138+
// TODO: Реально реализовать панель навигации
140139
return <h1>Привет из React!</h1>;
141140
}
142141

@@ -149,8 +148,8 @@ root.render(<NavigationBar />);
149148

150149
Обратите внимание, как исходный HTML-контент из `index.html` сохраняется, но ваш собственный React-компонент `NavigationBar` теперь отображается внутри `<nav id="navigation">` из вашего HTML. Прочтите [документацию по использованию `createRoot`](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react), чтобы узнать больше о рендеринге React-компонентов внутри существующей HTML-страницы.
151150

152-
Когда вы внедряете React в существующий проект, часто начинают с небольших интерактивных компонентов (например, кнопок), а затем постепенно "движутся вверх", пока в конечном итоге вся ваша страница не будет построена с помощью React. Если вы когда-нибудь достигнете этой точки, мы рекомендуем сразу же перейти на [фреймворк React](/learn/start-a-new-react-project), чтобы получить максимальную отдачу от React.
151+
Когда вы внедряете React в существующий проект, обычно начинают с небольших интерактивных компонентов (например, кнопок), а затем постепенно "движутся вверх", пока в конечном итоге вся ваша страница не будет построена с помощью React. Если вы когда-нибудь достигнете этой точки, мы рекомендуем сразу же перейти на [фреймворк React](/learn/start-a-new-react-project), чтобы получить максимальную отдачу от React.
153152

154153
## Использование React Native в существующем нативном мобильном приложении {/*using-react-native-in-an-existing-native-mobile-app*/}
155154

156-
[React Native](https://reactnative.dev/) также можно инкрементально интегрировать в существующие нативные приложения. Если у вас есть существующее нативное приложение для Android (Java или Kotlin) или iOS (Objective-C или Swift), [следуйте этому руководству](https://reactnative.dev/docs/integration-with-existing-apps), чтобы добавить в него экран React Native.
155+
[React Native](https://reactnative.dev/) также можно постепенно интегрировать в существующие нативные приложения. Если у вас есть существующее нативное приложение для Android (Java или Kotlin) или iOS (Objective-C или Swift), [следуйте этому руководству](https://reactnative.dev/docs/integration-with-existing-apps), чтобы добавить в него экран React Native.

0 commit comments

Comments
 (0)