Added page translation: basics -> rendering elements #11

Heegiiny · 2019-02-09T00:23:26Z

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

lex111

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

gaearon

Спасибо! Я немножко попридираюсь. )

gaearon · 2019-02-09T00:36:35Z

content/docs/rendering-elements.md

@@ -1,75 +1,75 @@
 ---
 id: rendering-elements
-title: Rendering Elements
+title: Отрисовка Элементов


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

gaearon · 2019-02-09T01:06:16Z

content/docs/rendering-elements.md


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


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

gaearon · 2019-02-09T01:07:06Z

content/docs/rendering-elements.md

 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-приложениях.


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

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

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

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

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

gaearon · 2019-02-09T01:24:13Z

content/docs/rendering-elements.md


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


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

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

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

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

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

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

gaearon · 2019-02-09T01:25:24Z

content/docs/rendering-elements.md


->**Note:**
+>**Заметка:**


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

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

gaearon · 2019-02-09T01:48:41Z

content/docs/rendering-elements.md


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


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

gaearon · 2019-02-09T01:53:11Z

content/docs/rendering-elements.md


-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, которые необходимы для приведения элемента в новое состояние.


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

"изменения необходимые для приведения в состояние" — нагромождение существительных, пожалуйста разбавьте глаголами :-) 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

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

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

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

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

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

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

gaearon · 2019-02-09T01:53:50Z

content/docs/rendering-elements.md


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


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

Тавтология.

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

gaearon · 2019-02-09T01:54:04Z

content/docs/rendering-elements.md


-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 изменяет только текстовый узел, содержимое которого изменилось.


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

gaearon · 2019-02-09T01:55:02Z

content/docs/rendering-elements.md


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


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

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

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

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

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

Предлагаю:

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

gaearon · 2019-02-09T02:42:08Z

content/docs/rendering-elements.md

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

-Элементы являются самыми маленькими строительными блоками в React-приложениях.
+Элементы — мельчайшие кирпичики React-приложениях.


приложений

Heegiiny · 2019-02-09T02:45:24Z

Rendering an element into the dom срендерить элемент в dom? Вставить, наверное, лучше будет звучать?

Heegiiny · 2019-02-09T02:50:41Z

Тот же вопрос касается Обновление отрисованных элементов updating-the-rendered-element
Срендеренных? Обновление элементов на странице?
И, кстати, всегда интересовало, как переводить заголовки типа "Updating"? "Обновление" или "как обновить"?

alexzherdev · 2019-02-09T04:56:08Z

content/docs/rendering-elements.md


-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 в существующем приложении, то вы можете создать столько независимых корневых элементов, сколько посчитаете нужным.


Suggested change

Обычно в приложениях, написанных польностью на React, есть только один единственный корневой элемент. Если вы хотите использовать React в существующем приложении, то вы можете создать столько независимых корневых элементов, сколько посчитаете нужным.

Обычно в приложениях, написанных полностью на React, есть только один единственный корневой элемент. Если вы хотите использовать React в существующем приложении, то вы можете создать столько независимых корневых элементов, сколько посчитаете нужным.

Один единственный => один? Не уверен зачем усиление

alexzherdev · 2019-02-09T04:56:45Z

content/docs/rendering-elements.md


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


Suggested change

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

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

«Единичный» звучит странно, синоним попроще?

alexzherdev · 2019-02-09T04:58:22Z

content/docs/rendering-elements.md

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


Suggested change

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

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

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

gaearon · 2019-02-09T12:06:31Z

content/docs/rendering-elements.md


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


Может «соответствовал переданным React-элементам». По-моему так чуть понятнее.

gaearon · 2019-02-09T12:06:50Z

content/docs/rendering-elements.md

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


Пожалуйста кавычки-ёлочки здесь (я не уверен, сделает ли их сайт автоматом)

gaearon · 2019-02-09T12:09:05Z

content/docs/rendering-elements.md


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


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

gaearon · 2019-02-09T12:10:15Z

content/docs/rendering-elements.md


-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 в существующем приложении, то вы можете создать столько независимых корневых элементов, сколько посчитаете нужным.


Один единственный => один? Не уверен зачем усиление

gaearon · 2019-02-09T12:11:18Z

content/docs/rendering-elements.md


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


«Единичный» звучит странно, синоним попроще?

gaearon · 2019-02-09T12:12:08Z

content/docs/rendering-elements.md


 `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)


«В этом примере»

gaearon · 2019-02-09T12:13:27Z

content/docs/rendering-elements.md

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


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

gaearon · 2019-02-09T12:14:45Z

content/docs/rendering-elements.md


-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 только те изменения, которые необходимы, чтобы на странице оказался новый элемент.


Можно «с предыдущей версией» или что-то ещё, чтобы избежать некорректного вывода что реакт сравнивает с DOM?

gaearon · 2019-02-09T12:16:26Z

content/docs/rendering-elements.md


-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 изменяет только текстовый узел, содержимое которого изменилось.


«Дерево пользовательского интерфейса» очень длинно. Предлагаю UI-дерево. У нас UI будет часто встречаться.

gaearon · 2019-02-09T12:17:59Z

content/docs/rendering-elements.md


-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.
+Наш опыт подсказывает, что при реализации изменений в интерфейсе возникает много ошибок. Их можно избежать, если думать о том, как должно выглядеть приложение, а не как внести изменения.


Это непонятно. «Реализация изменений в интерфейсе» это во-первых три существительных, а во-вторых кажется что речь про изменение кода.

Предлагаю:

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

Heegiiny · 2019-02-10T11:55:42Z

Заменил отрисовку на рендеринг, исправил опечатки и некрасивые предложения.

gaearon · 2019-02-10T22:06:53Z

Я пару мелочей пошлю вдогонку.

gaearon · 2019-02-10T22:09:28Z

#77

Heegiiny added 3 commits February 9, 2019 03:12

translated rendering-elements.md

1800ae6

Merge branch 'master' of https://github.com/reactjs/ru.reactjs.org

b449557

translated rendering-elements.md

d6ccdca

tesseralis mentioned this pull request Feb 9, 2019

Russian Translation Progress #1

Closed

88 tasks

gaearon mentioned this pull request Feb 9, 2019

Discussing glossary and style guide on translation #4

Closed

lex111 reviewed Feb 9, 2019

View reviewed changes

gaearon requested changes Feb 9, 2019

View reviewed changes

Heegiiny added 2 commits February 9, 2019 05:40

corrections

30e717c

corrections fix

c54f04a

gaearon reviewed Feb 9, 2019

View reviewed changes

Heegiiny added 2 commits February 9, 2019 05:42

corrections fix 2

80c9393

corrections fix 3

9bd71ae

alexzherdev reviewed Feb 9, 2019

View reviewed changes

another-guy mentioned this pull request Feb 9, 2019

Перевод "introducing-jsx.md" на русский #17

Merged

another-guy changed the title ~~Added page translation: basics -> reandering elements~~ Added page translation: basics -> rendering elements Feb 9, 2019

gaearon reviewed Feb 9, 2019

View reviewed changes

lex111 added the work in progress Author opened the pull-request but it's still being worked on label Feb 9, 2019

Heegiiny added 3 commits February 10, 2019 14:23

corrections

532aaab

type fix

69bca29

type fix 2

6518971

Heegiiny added needs review A pull request ready to be reviewed and removed work in progress Author opened the pull-request but it's still being worked on labels Feb 10, 2019

type fix 3

2723ec7

Heegiiny merged commit 2baab7a into reactjs:master Feb 10, 2019

Heegiiny removed the needs review A pull request ready to be reviewed label Feb 13, 2019

vvscode mentioned this pull request Mar 19, 2019

Перевод блога #273

Open


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


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


		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, которые необходимы для приведения элемента в новое состояние.


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


		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 изменяет только текстовый узел, содержимое которого изменилось.


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


		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 в существующем приложении, то вы можете создать столько независимых корневых элементов, сколько посчитаете нужным.


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

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


		>Note:
		>Заметка:

Added page translation: basics -> rendering elements #11

Added page translation: basics -> rendering elements #11

Conversation

Heegiiny commented Feb 9, 2019

lex111 left a comment

Choose a reason for hiding this comment

gaearon 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

gaearon Feb 9, 2019 • edited Loading

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

gaearon Feb 9, 2019 • edited Loading

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

gaearon Feb 9, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Heegiiny commented Feb 9, 2019

Heegiiny commented Feb 9, 2019

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

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

Heegiiny commented Feb 10, 2019

gaearon commented Feb 10, 2019

gaearon commented Feb 10, 2019

gaearon Feb 9, 2019 •

edited

Loading

gaearon Feb 9, 2019 •

edited

Loading

gaearon Feb 9, 2019 •

edited

Loading