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.

Sign up for GitHub

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

Jump to bottom

translate file: Preserving-and-resetting-state #895

Open

AnastasyaAntonova wants to merge 1 commit into reactjs:main from AnastasyaAntonova:translate

AnastasyaAntonova commented Jun 3, 2023

Если ваш пулреквест является исправлением бага, а не переводом, то сперва убедитесь, что проблема относится ТОЛЬКО к https://ru.reactjs.org, а не к https://reactjs.org. Если это не так, то пулреквест следует открыть в родительском репозитории.


          translate preserving-and-resetting-state

2ffe4a3

vercel bot deployed to Preview – ru-react-dev

June 3, 2023 20:22

View deployment

AnastasyaAntonova mentioned this pull request

New Russian Translation Progress #843

Open

Author

AnastasyaAntonova commented Jun 3, 2023

@wwoffxx @Vo-one

wwoffxx approved these changes

View reviewed changes

wwoffxx left a comment

very fine

Vo-one approved these changes

View reviewed changes

Vo-one left a comment

rep, idealno

titovmx requested changes

View reviewed changes

Collaborator

titovmx left a comment

Спасибо за перевод! Мне понравилось, как вы передали суть.
Оставил несколько замечаний. Обратите внимание, что многие из них актульны для всего перевода.

src/content/learn/preserving-and-resetting-state.md

    
              Browsers use many tree structures to model UI. The [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) represents HTML elements, the [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) does the same for CSS. There's even an [Accessibility tree](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)!

              Браузеры используют множество древовидных структур для моделирования пользовательского UI. The [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) представляет элементы HTML, [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) делает тоже самое для CSS. Есть даже [Дерево специальных возможностей](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)!

Collaborator

titovmx Aug 14, 2023

Suggested change

      
            Браузеры используют множество древовидных структур для моделирования пользовательского UI. The [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) представляет элементы HTML, [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) делает тоже самое для CSS. Есть даже [Дерево специальных возможностей](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)!
          
            Браузеры используют множество древовидных структур для моделирования пользовательского интерфейса. [DOM](https://developer.mozilla.org/ru/docs/Web/API/Document_Object_Model/Introduction) представляет элементы HTML, [CSSOM](https://developer.mozilla.org/ru/docs/Web/API/CSS_Object_Model) делает тоже самое для CSS. Есть даже [Дерево доступности](https://developer.mozilla.org/ru/docs/Glossary/Accessibility_tree)!

"Пользовательский UI" звучит излишне, предлагаю использовать "пользовательский интерфейс" или UI
Обновил ссылки, чтобы явно вели на русскоязычные версии.
Перевод mdn предлагает Дерево доступности для AOM.

src/content/learn/preserving-and-resetting-state.md

    
              React also uses tree structures to manage and model the UI you make. React makes **UI trees** from your JSX. Then React DOM updates the browser DOM elements to match that UI tree. (React Native translates these trees into elements specific to mobile platforms.)

              React также использует древовидные структуры для управления и моделирования пользовательского интерфейса, который вы создаете. React создает **UI деревья** из вашего JSX. Затем React DOM обновляет элементы DOM браузера, чтобы они соответствовали этому дереву пользовательского интерфейса. (React Native переводит эти деревья в элементы, специфичные для мобильных платформ.)

Collaborator

titovmx Aug 14, 2023

Suggested change

      
            React также использует древовидные структуры для управления и моделирования пользовательского интерфейса, который вы создаете. React создает **UI деревья** из вашего JSX. Затем React DOM обновляет элементы DOM браузера, чтобы они соответствовали этому дереву пользовательского интерфейса. (React Native переводит эти деревья в элементы, специфичные для мобильных платформ.)
          
            React также использует древовидные структуры для управления и моделирования пользовательского интерфейса, который вы создаете. React создает **UI-деревья** из вашего JSX. Затем React DOM обновляет DOM-элементы в браузере, чтобы они соответствовали этому дереву пользовательского интерфейса. (React Native переводит эти деревья в элементы, специфичные для мобильных платформ.)

для сложных существительных, состоящих из двух, следует ставить дефис.
также чуть-чуть поменял порядок, мне кажется, так легче прочитать несколько существительных подряд в этом случае. Что думаете?

src/content/learn/preserving-and-resetting-state.md

    
              React also uses tree structures to manage and model the UI you make. React makes **UI trees** from your JSX. Then React DOM updates the browser DOM elements to match that UI tree. (React Native translates these trees into elements specific to mobile platforms.)

              React также использует древовидные структуры для управления и моделирования пользовательского интерфейса, который вы создаете. React создает **UI деревья** из вашего JSX. Затем React DOM обновляет элементы DOM браузера, чтобы они соответствовали этому дереву пользовательского интерфейса. (React Native переводит эти деревья в элементы, специфичные для мобильных платформ.)

              <DiagramGroup>

              <Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagram with three sections arranged horizontally. In the first section, there are three rectangles stacked vertically, with labels 'Component A', 'Component B', and 'Component C'. Transitioning to the next pane is an arrow with the React logo on top labeled 'React'. The middle section contains a tree of components, with the root labeled 'A' and two children labeled 'B' and 'C'. The next section is again transitioned using an arrow with the React logo on top labeled 'React'. The third and final section is a wireframe of a browser, containing a tree of 8 nodes, which has only a subset highlighted (indicating the subtree from the middle section).">

Collaborator

titovmx Aug 14, 2023

вы могли бы перевести содержимое атрибута alt? оно очень важно для хорошей доступности, в том числе читается скрин-ридерами

src/content/learn/preserving-and-resetting-state.md

    
              <DiagramGroup>

              <Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagram with three sections arranged horizontally. In the first section, there are three rectangles stacked vertically, with labels 'Component A', 'Component B', and 'Component C'. Transitioning to the next pane is an arrow with the React logo on top labeled 'React'. The middle section contains a tree of components, with the root labeled 'A' and two children labeled 'B' and 'C'. The next section is again transitioned using an arrow with the React logo on top labeled 'React'. The third and final section is a wireframe of a browser, containing a tree of 8 nodes, which has only a subset highlighted (indicating the subtree from the middle section).">

              From components, React creates a UI tree which React DOM uses to render the DOM

              Из компонентов React создает UI дерево, которое React DOM использует для рендеринга DOM.

Collaborator

titovmx Aug 14, 2023

Suggested change

      
            Из компонентов React создает UI дерево, которое React DOM использует для рендеринга DOM.
          
            Из компонентов React создает UI-дерево, которое React DOM использует для рендеринга DOM.

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

src/content/learn/preserving-and-resetting-state.md

    
              Here, there is only one `<Counter />` JSX tag, but it's rendered at two different positions:

              Здесь есть только один `<Counter />` тег JSX, но он отображается в двух разных позициях:

Collaborator

titovmx Aug 14, 2023

вы могли бы также перевести тексты в примерах, которые отображаются конечным пользователям? Такой как "Add one" здесь.

src/content/learn/preserving-and-resetting-state.md

    
              - You might also use a different source in addition to React state. For example, you probably want a message draft to persist even if the user accidentally closes the page. To implement this, you could have the `Chat` component initialize its state by reading from the [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), and save the drafts there too.

              - Вы можете отобразить _все_ чаты, а не только текущий, но скрыть все остальные с помощью CSS. Чаты не будут удалены из дерева, поэтому их локальное состояние будет сохранено. Это решение отлично работает для простых пользовательских интерфейсов. Но это может быть очень медленным, если скрытые деревья большие и содержат много узлов DOM.

              - Вы можете [поднять состояние](/learn/sharing-state-between-components) и сохранить ожидающее сообщение для каждого получателя в родительском компоненте. Таким образом, когда удаляются дочерние компоненты, это не имеет значения, потому что родительский компонент сохраняет важную информацию. Это наиболее распространенное решение.

              - Вы также можете использовать другой источник в дополнение к состоянию React. Например, вы, вероятно, хотите, чтобы черновик сообщения сохранялся, даже если пользователь случайно закроет страницу. Чтобы реализовать это, вы можете сделать так, чтобы `Chat` компонент инициализировал свое состояние, читая из файла [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), и сохранял там черновики.

Collaborator

titovmx Aug 14, 2023

Suggested change

      
            - Вы также можете использовать другой источник в дополнение к состоянию React. Например, вы, вероятно, хотите, чтобы черновик сообщения сохранялся, даже если пользователь случайно закроет страницу. Чтобы реализовать это, вы можете сделать так, чтобы `Chat` компонент инициализировал свое состояние, читая из файла [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), и сохранял там черновики.
          
            - Вы также можете использовать другой источник в дополнение к состоянию React. Например, вы, вероятно, хотите, чтобы черновик сообщения сохранялся, даже если пользователь случайно закроет страницу. Чтобы реализовать это, вы можете сделать так, чтобы `Chat` компонент инициализировал свое состояние, читая из [`localStorage`](https://developer.mozilla.org/ru/docs/Web/API/Window/localStorage), и сохранял там черновики.

Обновил ссылку

src/content/learn/preserving-and-resetting-state.md

    
              No matter which strategy you pick, a chat _with Alice_ is conceptually distinct from a chat _with Bob_, so it makes sense to give a `key` to the `<Chat>` tree based on the current recipient.

              Независимо от того, какую стратегию вы выберете, чат _с Алисой_ концептуально отличается от чата _с Бобом_, поэтому имеет смысл задать `key` `<Chat>` на основе текущего получателя.

Collaborator

titovmx Aug 14, 2023

Suggested change

      
            Независимо от того, какую стратегию вы выберете, чат _с Алисой_ концептуально отличается от чата _с Бобом_, поэтому имеет смысл задать `key` `<Chat>` на основе текущего получателя.
          
            Независимо от того, какую стратегию вы выберете, чат _с Алисой_ концептуально отличается от чата _с Бобом_, поэтому имеет смысл задать `key` для компонента `<Chat>` на основе текущего получателя.

не хватает связки

src/content/learn/preserving-and-resetting-state.md


		This form lets you enter first and last name. It also has a checkbox controlling which field goes first. When you tick the checkbox, the "Last name" field will appear before the "First name" field.
		Эта форма позволяет ввести имя и фамилию. Он также имеет флажок, определяющий, какое поле будет первым. При установке флажка поле «Фамилия» появится перед полем «Имя».

Collaborator

titovmx Aug 14, 2023

Suggested change

      
            Эта форма позволяет ввести имя и фамилию. Он также имеет флажок, определяющий, какое поле будет первым. При установке флажка поле «Фамилия» появится перед полем «Имя».
          
            Эта форма позволяет ввести имя и фамилию. Она также имеет флажок, определяющий, какое поле будет первым. При установке флажка поле «Фамилия» появится перед полем «Имя».

src/content/learn/preserving-and-resetting-state.md

    
            @@ -1934,7 +1934,7 @@ img { width: 150px; height: 150px; }
          
              <Solution>

              You can provide a `key` to the `<img>` tag. When that `key` changes, React will re-create the `<img>` DOM node from scratch. This causes a brief flash when each image loads, so it's not something you'd want to do for every image in your app. But it makes sense if you want to ensure the image always matches the text.

              Вы можете предоставить `key` тегу `<img>`. Когда `key` изменится, React заново создаст узел `<img>` DOM с нуля. Это вызывает краткую вспышку при загрузке каждого изображения, так что это не то, что вы хотели бы делать для каждого изображения в вашем приложении. Но это имеет смысл, если вы хотите, чтобы изображение всегда соответствовало тексту.

Collaborator

titovmx Aug 14, 2023

Suggested change

      
            Вы можете предоставить `key` тегу `<img>`. Когда `key` изменится, React заново создаст узел `<img>` DOM с нуля. Это вызывает краткую вспышку при загрузке каждого изображения, так что это не то, что вы хотели бы делать для каждого изображения в вашем приложении. Но это имеет смысл, если вы хотите, чтобы изображение всегда соответствовало тексту.
          
            Вы можете предоставить `key` тегу `<img>`. Когда `key` изменится, React заново создаст DOM-узел `<img>` с нуля. Это вызывает краткую вспышку при загрузке каждого изображения, так что это не то, что вы хотели бы делать для каждого изображения в вашем приложении. Но это имеет смысл, если вы хотите, чтобы изображение всегда соответствовало тексту.

src/content/learn/preserving-and-resetting-state.md

    
              Using the contact ID as a `key` instead fixes the issue:

              Вместо этого использование идентификатора контакта `key` устраняет проблему:

Collaborator

titovmx Aug 14, 2023

Suggested change

      
            Вместо этого использование идентификатора контакта `key` устраняет проблему:
          
            Вместо этого использование идентификатора контакта как `key` устраняет проблему:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment