Skip to content

Added page translation: basics -> rendering elements #11

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

Merged
merged 11 commits into from
Feb 10, 2019
Merged
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 26 additions & 26 deletions content/docs/rendering-elements.md
Original file line number Diff line number Diff line change
@@ -1,75 +1,75 @@
---
id: rendering-elements
title: Rendering Elements
title: Отрисовка Элементов
Copy link
Member

Choose a reason for hiding this comment

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

Давайте делать заголовки в русском стиле, без множественных заглавных. Рендеринг элементов.

permalink: docs/rendering-elements.html
redirect_from:
- "docs/displaying-data.html"
prev: introducing-jsx.html
next: components-and-props.html
---

Elements are the smallest building blocks of React apps.
Элементы являются самыми маленькими строительными блоками в React-приложениях.
Copy link
Member

Choose a reason for hiding this comment

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

«являются» немножко длинно, может просто:

Элементы — мельчайшие частицы React-приложений.

Copy link
Member

@gaearon gaearon Feb 9, 2019

Choose a reason for hiding this comment

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

ну или строительные блоки, или кирпичики )

Мой коммент в первую очередь про «являются». Но и про то что метафора получилась растянутая на очень большое количество слогов. Попробуйте прочитать вслух оригинал и перевод. Должно звучать звонко.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Частицы и реакт навевают интересные ассоциации. Мне тоже не нравится "строительные блоки". Кирпичики, наверное, лучший вариант.


An element describes what you want to see on the screen:
Элемент опысывает то, что вы хотите увидеть на экране:
Copy link
Member

Choose a reason for hiding this comment

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

опечатка: описывает


```js
const element = <h1>Hello, world</h1>;
```

Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.
В отличии от DOM-элементов, элементы React — это простые объексты, на их создание уходит немного ресурсов. React DOM обновляет DOM, чтобы он соотвествовал элементам React.
Copy link
Member

Choose a reason for hiding this comment

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

опечатка: объекты

на их создание уходит немного ресурсов.

Тут легко прочитать с ударением на «ресурсов» и услышать обратный смысл.

Может быть надо перефразировать, чтобы подчеркнуть, что они легкие.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

простые объекты, не затрачивающие много ресурсов.

Copy link
Member

Choose a reason for hiding this comment

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

В отличии -> В отличие


>**Note:**
>**Заметка:**
Copy link
Member

Choose a reason for hiding this comment

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

Примечание? Я внесу в глоссарий

Copy link
Member

Choose a reason for hiding this comment

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

#15

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Да, лучше примечание.

>
>One might confuse elements with a more widely known concept of "components". We will introduce components in the [next section](/docs/components-and-props.html). Elements are what components are "made of", and we encourage you to read this section before jumping ahead.
>Элементы можно перепутать с более известной концепцией "компонентов". Про компоненты будет рассказано в [следующей главе](/docs/components-and-props.html). Элементы — это то, "из чего сделаны" компоненты, и мы рекомендуем вам дочитать эту главу, прежде чем двигаться дальше.
Copy link
Member

Choose a reason for hiding this comment

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

Избегаем пассива. "будет рассказано" -> "мы узнаем о" или "с компонентами мы ознакомимся" и тд

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

"с компонентами мы ознакомимся"

Copy link
Member

Choose a reason for hiding this comment

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

"будет рассказано" — пассив


## Rendering an Element into the DOM {#rendering-an-element-into-the-dom}
## Как отрисовать элемент в DOM {#rendering-an-element-into-the-dom}

Let's say there is a `<div>` somewhere in your HTML file:
Дапустим, в вашем HTML-файле есть `<div>`:

```html
<div id="root"></div>
```

We call this a "root" DOM node because everything inside it will be managed by React DOM.
Мы называем его "корневым" узлом DOM, так как всё, что находится в нём, будет управляться React DOM.
Copy link
Member

Choose a reason for hiding this comment

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

Мне кажется по-русски «мы назовём» лучше тут


Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
Обычно в приложения, написанных польностью на React, есть только один единственный корневой элемент. Если вы хотите использовать React в существующем приложении, то вы можете создать столько независимых корневых элементов, сколько посчитаете нужным.

To render a React element into a root DOM node, pass both to `ReactDOM.render()`:
Чтобы отрисовать React-элемент в корневой узел DOM, передайте их в качестве параметров в `ReactDOM.render()`:
Copy link
Member

Choose a reason for hiding this comment

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

"передайте их" => "передайте оба из них"? Я немножко тут споткнулся.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Можно "передайте их в качестве аргументов" или

вызовите ReactDOM.render() с React-элементом и корневым DOM узлом в качестве аргументов.


`embed:rendering-elements/render-an-element.js`

[](codepen://rendering-elements/render-an-element)

It displays "Hello, world" on the page.
На странице будет написано "Hello, world".

## Updating the Rendered Element {#updating-the-rendered-element}
## Обновление отрисованных элементов {#updating-the-rendered-element}

React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.
Элементы React [неизменяемы](https://ru.wikipedia.org/wiki/%D0%9D%D0%B5%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D1%8F%D0%B5%D0%BC%D1%8B%D0%B9_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82). После создания элемента, нельзя изменить его потомков или аттрибуты. Элемент похож на единичный кадр в фильме: он отразает состояние интерфейса в конкретный момент времени.
Copy link
Member

Choose a reason for hiding this comment

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

Запятая перед нельзя вроде не нужна

Copy link
Member

Choose a reason for hiding this comment

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

immutable -> иммутабельны
аттрибуты -> атрибуты

Copy link
Member

Choose a reason for hiding this comment

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

мы поменяли на "иммутабельны" (хотя еще есть предложение "немутируемы") #12


With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`.
Как нам теперь известно, единственный способ обновить интерфейс — это создать новый элемент и передать его в `ReactDOM.render()`.
Copy link
Member

Choose a reason for hiding this comment

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

Как нам теперь известно

оригинальный смысл это "Пока что, мы знаем только один способ ..."


Consider this ticking clock example:
Рассмотрим пример с часами:

`embed:rendering-elements/update-rendered-element.js`

[](codepen://rendering-elements/update-rendered-element)

It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
В примере выше `ReactDOM.render()` вызывается каждую секунду с помощью коллбека [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)
Copy link
Member

Choose a reason for hiding this comment

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

"колбэка"


>**Note:**
>**Заметка:**
>
>In practice, most React apps only call `ReactDOM.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html).
>На практике, большинство React-приложений вызывают `ReactDOM.render()` только один раз. В следующем разделе вы узнаете как создать [компонент с состоянием](/docs/state-and-lifecycle.html).
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
>На практике, большинство React-приложений вызывают `ReactDOM.render()` только один раз. В следующем разделе вы узнаете как создать [компонент с состоянием](/docs/state-and-lifecycle.html).
>На практике большинство React-приложений вызывают `ReactDOM.render()` только один раз. В следующем разделе вы узнаете, как создать [компонент с состоянием](/docs/state-and-lifecycle.html).

Copy link
Member

Choose a reason for hiding this comment

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

Тут теряется логическая связь предложений. Непонятно, при чем тут компонент с состоянием.

>
>We recommend that you don't skip topics because they build on each other.
>Мы рекомендуем не пропускать разделы, поскольку в них используется информация из предыдущих разделов.

## React Only Updates What's Necessary {#react-only-updates-whats-necessary}
## React обновляет только то, что необходимо {#react-only-updates-whats-necessary}

React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
React DOM сравнивает элемент и его потомков с предыдущим состоянием и делает только те изменения в DOM, которые необходимы для приведения элемента в новое состояние.
Copy link
Member

Choose a reason for hiding this comment

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

"состояние" имеет конкретное значение, так что лучше здесь избежать — особенно дважды.

"изменения необходимые для приведения в состояние" — нагромождение существительных, пожалуйста разбавьте глаголами :-) https://github.com/reactjs/ru.reactjs.org/blob/master/TRANSLATION.md#%D1%81%D0%BB%D0%BE%D0%B2%D0%BE-%D0%B6%D0%B8%D0%B2%D0%BE%D0%B5-%D0%B8-%D0%BC%D1%91%D1%80%D1%82%D0%B2%D0%BE%D0%B5

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

React DOM сравнивает элемент и его потомков с отображаемым на странице и вносит в DOM только те изменения, которые необходимы, чтобы на странице оказался новый элемент.

Copy link
Member

@gaearon gaearon Feb 9, 2019

Choose a reason for hiding this comment

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

Это кстати не совсем верно, потому что Реакт сравнивает с предыдущим Реакт-элементом. На дом он не смотрит.

Мое предложение:

React DOM сравнивает дерево React-элементов с их предыдущей версией и только обновляет DOM там, где это необходимо.

Choose a reason for hiding this comment

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

Я бы поменял акцент у "только"

React DOM сравнивает дерево React-элементов с их предыдущей версией и обновляет DOM только там, где это необходимо.


You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools:
Вы можете увидеть это, рассмотрев [последний пример](codepen://rendering-elements/update-rendered-element) с помощью инструментов разработчика в браузере:
Copy link
Member

Choose a reason for hiding this comment

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

Вы можете увидеть это, рассмотрев

Тавтология.

Вы можете убедиться в этом на последнем примере


![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif)
![В DOM видно частичное обновление](../images/docs/granular-dom-updates.gif)

Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM.
Несмотря на то, что мы создаем элемент, описывающий все дерево пользовательского интерфейса, каждую секунду, React DOM изменяет только текстовый узел, содержимое которого изменилось.
Copy link
Member

Choose a reason for hiding this comment

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

не нужна запятая перед React DOM


In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs.
Согласно нашему опыту, удаётся избежать многих ошибок, если думать о том, как должен выглядеть интерфейс в каждый конкретный момент времени, а не о том, как его изменять.
Copy link
Member

Choose a reason for hiding this comment

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

Может разбить на два предложения?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Наш опыт подсказывает, что при реализации изменений в интерфейсе возникает много ошибок. Их можно избежать, если думать о том, как должно выглядеть приложение, а не как внести изменения.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

В целом, очень жаль, что нет короткого термина для UI.

Copy link
Member

Choose a reason for hiding this comment

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

Реализация изменений в интерфейсе — все равно очень много существительных.

Copy link
Member

Choose a reason for hiding this comment

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

UI я думаю кстати окей оставить

Copy link
Member

@gaearon gaearon Feb 9, 2019

Choose a reason for hiding this comment

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

Предлагаю:

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