-
Notifications
You must be signed in to change notification settings - Fork 391
Translate add react to an existing project #902
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
rkashigin
wants to merge
2
commits into
reactjs:main
from
rkashigin:translate-add-react-to-an-existing-projec
Open
Translate add react to an existing project #902
rkashigin
wants to merge
2
commits into
reactjs:main
from
rkashigin:translate-add-react-to-an-existing-projec
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
AbdullahWins
AbdullahWins
approved these changes
Aug 22, 2023
@AbdullahWins
AbdullahWins
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
well done!
titovmx
titovmx
requested changes
Aug 22, 2023
Collaborator
@titovmx
titovmx
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Спасибо за перевод! Оставил несколько замечаний и предложений
<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.
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
англоязычные термины в связке с другим существительным образуют сложные существительные и требуют использования дефиса. Пожалуйста, перепроверьте подобные случаи по всему переводу.
</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*/}
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
## Использование React для выбранного пути имеющегося веб-сайта {/*using-react-for-an-entire-subroute-of-your-existing-website*/}
## Использование React для подраздела имеющегося веб-сайта {/*using-react-for-an-entire-subroute-of-your-existing-website*/}
что думаете насчёт такого варианта? менее точен по сравнению с оригиналом, но может чуть полаконичнее суть передана
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).
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
1. **Разработайте часть приложения с использованием React,** используя один из [фреймворков основанных на нем](/learn/start-a-new-react-project).
1. **Разработайте часть приложения с использованием React,** используя один из [фреймворков основанных на нём](/learn/start-a-new-react-project).
пожалуйста, проверьте, что везде в переводе использована буква Ё. Это можно удобно сделать при помощи npm-пакета
Такой подход гарантирует, что часть вашего приложения, написанная на React, сможет [получить максимум от best-practice подходов](/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 являются full-stack решениями и позволяют вашему React приложению получать больше преимуществ за счет использования сервера. Однако, вы можете использовать такой подход даже если вы не можете или не хотите запускать JavaScript на стороне сервера. В таком случае, используйте именованный экспорт HTML/CSS/JS ([см. раздел `next export`](https://nextjs.org/docs/advanced-features/static-html-export) для Next.js, и по умолчанию для Gatsby) на пути `/some-app/`.
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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/`.
Фулстек переводится согласно словарю терминов от Веб-стандартов. Также поправил запятые и Ё.
## Использование 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. Стоит заметить, что такой подход являлся также наиболее распространенным в компании Meta на протяжении многих лет!
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
Предположим, что у вас уже есть веб-страница, разработанная с использованием другой технологии (или серверной, например, Rails, или клиентской, например, Backbone), и вы хотите отображать интерактивные React компоненты где-либо на этой странице. Далее приведен общепринятый подход к интеграции Данный подход является наиболее распространенным для интеграции React. Стоит заметить, что такой подход являлся также наиболее распространенным в компании Meta на протяжении многих лет!
Предположим, что у вас уже есть веб-страница, разработанная с использованием другой технологии (или серверной, например, Rails, или клиентской, например, Backbone), и вы хотите отображать интерактивные React компоненты где-либо на этой странице. Далее приведен общепринятый подход к интеграции. Данный подход является наиболее распространенным для интеграции React. Стоит заметить, что такой подход являлся также наиболее распространенным в компании Meta на протяжении многих лет!
import { createRoot } from 'react-dom/client';
// Clear the existing HTML content
// Очищаем существующий HTML контент
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
// Очищаем существующий HTML контент
// Очищаем текущее содержимое HTML
```
Of course, you don't actually want to clear the existing HTML content!
Однако, как было описано ранее, это приведет к полному удалению контента страницы. Конечно же, вы не горите желанием удалять существующий HTML контент!
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
Однако, как было описано ранее, это приведет к полному удалению контента страницы. Конечно же, вы не горите желанием удалять существующий 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) атрибуты к любому тегу, например:
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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" как "содержимое" согласно словарю Веб-стандартов. Стоит перепроверить все использования.
function NavigationBar() {
// TODO: Actually implement a navigation bar
return <h1>Hello from React!</h1>;
// TODO: реализовать NavBar
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
// TODO: реализовать NavBar
// TODO: реализовать панель навигации
почему бы не перевести :)
Обратите внимание, что оригинальный HTML контент, находящийся внутри файла `index.html` сохраняется и, в то же время, ваш React компонент `NavigationBar` так же отображается внутри элемента `<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) сразу после этого, чтобы получить максимум выгоды от использования React.
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
Когда вы внедряете React в существующий проект, распространенным подходом является начинать с интеграции небольших интерактивных компонентов (например, кнопок), и затем постепенно продолжать"двигаться вперед" до тех пор, пока наконец, вся ваша страница не будет построена с использованием React. Если вы друг достигнете этой точки, то мы рекомендуем провести полную миграцию на любой [основанный на React фреймворк](/learn/start-a-new-react-project) сразу после этого, чтобы получить максимум выгоды от использования React.
Когда вы внедряете React в существующий проект, распространенным подходом является начинать с интеграции небольших интерактивных компонентов (например, кнопок), и затем постепенно продолжать"двигаться вперед" до тех пор, пока наконец, вся ваша страница не будет построена с использованием React. Если вы достигнете этой точки, то мы рекомендуем провести полную миграцию на любой [основанный на React фреймворк](/learn/start-a-new-react-project) сразу после этого, чтобы получить максимум выгоды от использования React.
Contributor
dimatitov
commented
May 12, 2025
@rkashigin Привет! Есть ли планы вернуться к этому ПРу? Если что, могу помочь с правками или доработать его
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Перевод раздела add react to an existing project