Skip to content
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

Translate add react to an existing project #902

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

rkashigin
Copy link

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

Copy link

@AbdullahWins AbdullahWins left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

well done!

Copy link
Collaborator

@titovmx titovmx left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


</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.
Copy link
Collaborator

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*/}
Copy link
Collaborator

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).
Copy link
Collaborator

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-пакета


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/`.
Copy link
Collaborator

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

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


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 на протяжении многих лет!
Copy link
Collaborator

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 на протяжении многих лет!


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

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

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 контент!
Copy link
Collaborator

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

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" как "содержимое" согласно словарю Веб-стандартов. Стоит перепроверить все использования.

@@ -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
Copy link
Collaborator

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: реализовать панель навигации

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


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.
Copy link
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants