Translate add react to an existing project #902

rkashigin · 2023-06-29T17:33:43Z

Перевод раздела add react to an existing project

AbdullahWins

well done!

titovmx

Спасибо за перевод! Оставил несколько замечаний и предложений

titovmx · 2023-08-22T13:50:15Z

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


 </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.


Suggested change

**Вам нужно установить [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.

англоязычные термины в связке с другим существительным образуют сложные существительные и требуют использования дефиса. Пожалуйста, перепроверьте подобные случаи по всему переводу.

titovmx · 2023-08-22T13:56:44Z

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


 </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*/}


Suggested change

## Использование React для выбранного пути имеющегося веб-сайта {/*using-react-for-an-entire-subroute-of-your-existing-website*/}

## Использование React для подраздела имеющегося веб-сайта {/*using-react-for-an-entire-subroute-of-your-existing-website*/}

что думаете насчёт такого варианта? менее точен по сравнению с оригиналом, но может чуть полаконичнее суть передана

titovmx · 2023-08-22T13:58:28Z

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

-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,** используя один из [фреймворков основанных на нем](/learn/start-a-new-react-project).


Suggested change

1. **Разработайте часть приложения с использованием React,** используя один из [фреймворков основанных на нем](/learn/start-a-new-react-project).

1. **Разработайте часть приложения с использованием React,** используя один из [фреймворков основанных на нём](/learn/start-a-new-react-project).

пожалуйста, проверьте, что везде в переводе использована буква Ё. Это можно удобно сделать при помощи npm-пакета

titovmx · 2023-08-22T14:06:07Z

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


-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 являются full-stack решениями и позволяют вашему React приложению получать больше преимуществ за счет использования сервера. Однако, вы можете использовать такой подход даже если вы не можете или не хотите запускать JavaScript на стороне сервера. В таком случае, используйте именованный экспорт HTML/CSS/JS ([см. раздел `next export`](https://nextjs.org/docs/advanced-features/static-html-export) для Next.js, и по умолчанию для Gatsby) на пути `/some-app/`.


Suggested change

Большинство фреймворков построенных на основе 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, являются фулстек-решениями и позволяют вашему React-приложению получать больше преимуществ за счёт использования сервера. Однако, вы можете использовать такой подход, даже если вы не можете или не хотите запускать JavaScript на стороне сервера. В таком случае, используйте именованный экспорт HTML/CSS/JS ([см. раздел `next export`](https://nextjs.org/docs/advanced-features/static-html-export) для Next.js, и по умолчанию для Gatsby) на пути `/some-app/`.

Фулстек переводится согласно словарю терминов от Веб-стандартов. Также поправил запятые и Ё.

titovmx · 2023-08-22T14:07:46Z

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


-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. Стоит заметить, что такой подход являлся также наиболее распространенным в компании Meta на протяжении многих лет!


Suggested change

Предположим, что у вас уже есть веб-страница, разработанная с использованием другой технологии (или серверной, например, Rails, или клиентской, например, Backbone), и вы хотите отображать интерактивные React компоненты где-либо на этой странице. Далее приведен общепринятый подход к интеграции Данный подход является наиболее распространенным для интеграции React. Стоит заметить, что такой подход являлся также наиболее распространенным в компании Meta на протяжении многих лет!

Предположим, что у вас уже есть веб-страница, разработанная с использованием другой технологии (или серверной, например, Rails, или клиентской, например, Backbone), и вы хотите отображать интерактивные React компоненты где-либо на этой странице. Далее приведен общепринятый подход к интеграции. Данный подход является наиболее распространенным для интеграции React. Стоит заметить, что такой подход являлся также наиболее распространенным в компании Meta на протяжении многих лет!

titovmx · 2023-08-22T14:20:05Z

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


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

-// Clear the existing HTML content
+// Очищаем существующий HTML контент


Suggested change

// Очищаем существующий HTML контент

// Очищаем текущее содержимое HTML

titovmx · 2023-08-22T14:20:56Z

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

 ```

-Of course, you don't actually want to clear the existing HTML content!
+Однако, как было описано ранее, это приведет к полному удалению контента страницы. Конечно же, вы не горите желанием удалять существующий HTML контент!


Suggested change

Однако, как было описано ранее, это приведет к полному удалению контента страницы. Конечно же, вы не горите желанием удалять существующий HTML контент!

Однако, как было описано ранее, это приведет к полному удалению содержимого страницы. Конечно же, вы не горите желанием удалять существующий HTML!

titovmx · 2023-08-22T14:22:55Z

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


-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) атрибуты к любому тегу, например:


Suggested change

Вместо полной замены контента, вы, скорее всего, хотите отображать ваши 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) атрибуты к любому тегу, например:

В нескольких местах предлагаю переводить "content" как "содержимое" согласно словарю Веб-стандартов. Стоит перепроверить все использования.

titovmx · 2023-08-22T14:24:44Z

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

@@ -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: реализовать NavBar


Suggested change

// TODO: реализовать NavBar

// TODO: реализовать панель навигации

почему бы не перевести :)

titovmx · 2023-08-22T14:26:26Z

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


-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) сразу после этого, чтобы получить максимум выгоды от использования React.


Suggested change

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

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

Roman Kashigin added 2 commits May 1, 2023 22:13

Добавл перевод для страницы Add react to an existing project

109649c

Исправил ошибки

0991b54

vercel bot deployed to Preview – ru-react-dev June 29, 2023 17:34 View deployment

rkashigin mentioned this pull request Jun 29, 2023

New Russian Translation Progress #843

Open

AbdullahWins approved these changes Aug 22, 2023

View reviewed changes

titovmx requested changes Aug 22, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Translate add react to an existing project #902

Translate add react to an existing project #902

rkashigin commented Jun 29, 2023

AbdullahWins left a comment

titovmx left a comment

titovmx Aug 22, 2023

titovmx Aug 22, 2023

titovmx Aug 22, 2023

titovmx Aug 22, 2023

titovmx Aug 22, 2023

titovmx Aug 22, 2023

titovmx Aug 22, 2023

titovmx Aug 22, 2023

titovmx Aug 22, 2023

titovmx Aug 22, 2023

	## Использование React для выбранного пути имеющегося веб-сайта {/using-react-for-an-entire-subroute-of-your-existing-website/}
	## Использование React для подраздела имеющегося веб-сайта {/using-react-for-an-entire-subroute-of-your-existing-website/}

	1. Разработайте часть приложения с использованием React, используя один из [фреймворков основанных на нем](/learn/start-a-new-react-project).
	1. Разработайте часть приложения с использованием React, используя один из [фреймворков основанных на нём](/learn/start-a-new-react-project).


		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 являются full-stack решениями и позволяют вашему React приложению получать больше преимуществ за счет использования сервера. Однако, вы можете использовать такой подход даже если вы не можете или не хотите запускать JavaScript на стороне сервера. В таком случае, используйте именованный экспорт HTML/CSS/JS ([см. раздел `next export`](https://nextjs.org/docs/advanced-features/static-html-export) для Next.js, и по умолчанию для Gatsby) на пути `/some-app/`.


		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. Стоит заметить, что такой подход являлся также наиболее распространенным в компании Meta на протяжении многих лет!

	// Очищаем существующий HTML контент
	// Очищаем текущее содержимое HTML

	Однако, как было описано ранее, это приведет к полному удалению контента страницы. Конечно же, вы не горите желанием удалять существующий HTML контент!
	Однако, как было описано ранее, это приведет к полному удалению содержимого страницы. Конечно же, вы не горите желанием удалять существующий HTML!


		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) атрибуты к любому тегу, например:

	// TODO: реализовать NavBar
	// TODO: реализовать панель навигации


		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) сразу после этого, чтобы получить максимум выгоды от использования React.

Translate add react to an existing project #902

Are you sure you want to change the base?

Translate add react to an existing project #902

Conversation

rkashigin commented Jun 29, 2023

AbdullahWins left a comment

Choose a reason for hiding this comment

titovmx left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment