Update 02-displaying-data.ru-RU
Многие предложения перестроены, добавлены запятые
Andrey Safronov committed
May 2, 2016 at 18:43 UTC
b6c2973b5511b9950187d017881f36a9d6098d9a
1 file changed
+16
-16
docs/docs/02-displaying-data.ru-RU.md
+16
-16
@@ -1,12 +1,12 @@
1
---
2
id: displaying-data
3
-title: Ввывод данных
3
+title: Отображение данных
4
permalink: displaying-data.html
5
prev: why-react.html
6
next: jsx-in-depth.html
7
---
8
9
-Самое основное что ты можешь сделать с помомщью интерфейса — это показать данные. React делает вывод данных простым и меняет интерфейс сразу, как только данные изменятся.
9
+Главная задача интерфейса — это отображать данные. React делает это легко и обновляет интерфейс сразу, как только изменятся данные.
10
11
## Начало
12
@@ -33,7 +33,7 @@ next: jsx-in-depth.html
33
</html>
34
```
35
36
-Далее мы сфокусируемся на JavaScript коде и вставим его в наш шаблон. Замените комментарий выше на следующий JSX-код:
36
+Добавим в этот шаблон немного JavaScript. Замените комментарий на следующий JSX-код:
37
38
```javascript
39
var HelloWorld = React.createClass({
@@ -57,27 +57,27 @@ setInterval(function() {
57
58
## Реактивные обновления
59
60
-Откройте `hello-react.html` в браузере и введите в текстовое поле свое имя. Заметьте что в интерефейсе React меняет только время — всё что вы вводите не пропадает и не меняется, хотя вы даже не написали ни строчки кода для такого его поведения. React отлично понимает что ему надо делать и делает это правильно.
60
+Откройте `hello-react.html` в браузере и введите в текстовое поле свое имя. Что происходит со страницей? Каждые пол-секунды обновляется время, остальные же части страницы остаются без изменений. Вот так, не написав ни строчки кода, наша страница уже обладает своим поведением. React сам отлично понимает что надо делать и обновляет элементы на странице по мере необходимости.
61
62
-Дело в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. **Чтобы отразить изменения React использует быстрое внутреннее представление DOM-дерева и максимально эффективно просчитывает как это сделать**
62
+Суть в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. **Чтобы отразить изменения React использует быстрое внутреннее представление DOM-дерева и максимально эффективно просчитывает как это сделать**
63
64
-Введенные в компонент данные называются `props` — сокращенно от "properties". Они передаются как атрибуты в JSX коде. Вы можете считать их неизменяемыми внутри компонента, но **никогда не пишите `this.props`**.
64
+Передаваемые в компонент данные называются `props` — сокращенно от "properties". В JSX коде они передаются как атрибуты компонента. Можно считать `props` неизменяемыми внутри компонента, но **никогда сами не меняйте их значения**.
65
66
## Компоненты как функции
67
68
-Компоненты React чрезвычайно просты. Вы можете считать их простыми функциями, которые принимают `props` и `state` (см. ниже) и отрисовывают HTML. Если помнить об этом, то компоненты становятся простыми для понимания.
68
+Компоненты React довольно простые сущности. Можно считать их обыкновенными функциями, которые принимают на входе `props` и `state` (см. далее) и возвращают HTML. Если помнить об этом, то компоненты становятся простыми для понимания.
69
70
> Замечание:
71
>
72
-> **Есть одно ограничение**: React компоненты могут отрисовывать только один корневой узел. Если вам надо вернуть сразу несколько узлов - они *должны* быть обернуты в один корневой узел.
72
+> **Есть одно ограничение**: React компоненты умеют возвращать только один узел. Если вам надо вернуть сразу несколько - они *должны* быть обернуты в один корневой узел.
73
74
## JSX синтаксис
75
76
-Мы убеждены что компоненты — самый подходящий способ разделения отвественностей, и более удобный чем "шаблоны" и "логика вывода". Мы считаем, что разметка и код, который её генерирует взаимосвязаны и неотделимы друг от друга. Плюс, логика вывода часто бывает запутанной и использование шаблонизаторов чтобы описать её только затрудняет работу.
76
+Мы убеждены, что компоненты — самый подходящий способ разделения ответственностей, гораздо более удобный чем "шаблоны" и "вынесение логики на страницу". Мы считаем, что разметка и код, который её генерирует, неотделимы друг от друга. Плюс, логика на странице часто бывает запутанной, и использование шаблонизаторов, чтобы описать её, только затрудняет работу.
77
78
-Мы решили, что самым лучшим вариантом будет — генерировать HTML и деревья компонентов прямо из JS кода. Так что вы сможете зайдействовать всю выразительную мощь современного языка программирования для создания интерфейсов.
78
+Мы решили, что лучшим вариантом будет генерировать HTML и деревья компонентов прямо из JS кода. Так вы сможете зайдействовать всю выразительную мощь современного языка программирования для создания интерфейсов.
79
80
-Так, чтобы упростить создание узлов дерева в React, мы ввели простой **опциональный** HTML-подобный синтаксис.
80
+А чтобы упростить создание узлов дерева, мы ввели **опциональный** HTML-подобный синтаксис.
81
82
**JSX позволяет вам создавать JavaScript объекты используя синтаксис HTML**. Для генерации ссылки в React вы напишете на чистом JavaScript:
83
@@ -87,9 +87,9 @@ setInterval(function() {
87
88
`<a href="https://facebook.github.io/react/">Hello!</a>`
89
90
-Мы установили, что с JSX создавать React приложения проще и дизайнеров как правило устраивает его синтаксис, но у каждого свои привычки в работе, поэтому **JSX необязателен при работе с React.**
90
+Мы установили, что с JSX создавать React приложения проще и дизайнеров как правило устраивает его синтаксис. Но у каждого свои привычки в работе, поэтому стоит сказать, что **JSX необязателен при работе с React.**
91
92
-JSX очень мал. Чтобы узнать о нем больше, посмотрите на [JSX в детелях](/react/docs/jsx-in-depth.html). Или можете испытать его через [Babel REPL](https://babeljs.io/repl/).
92
+JSX сам по себе очень мал. Чтобы узнать о нем больше, посмотрите на [JSX в детелях](/react/docs/jsx-in-depth.html). Или можете испытать его через [Babel REPL](https://babeljs.io/repl/).
93
94
JSX похож на HTML, но не повторяет его. Посмотрите [подводные камни JSX](/react/docs/jsx-gotchas.html) чтобы понять их ключевые различия.
95
@@ -97,7 +97,7 @@ JSX похож на HTML, но не повторяет его. Посмотри
97
98
## React без использования JSX
99
100
-JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React элементы на чистом JavaScript используя функцию `React.createElement`, которая принимает имя тега или компонента, объект со свойствами, и опционально несколько дочерних аргументов.
100
+JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React-элементы на чистом JavaScript используя функцию `React.createElement`, которая принимает имя тега или компонента, объект со свойствами, и опционально несколько дочерних аргументов.
101
102
```javascript
103
var child1 = React.createElement('li', null, 'First Text Content');
@@ -106,7 +106,7 @@ var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
106
ReactDOM.render(root, document.getElementById('example'));
107
```
108
109
-Для удобства, вы можете создать сокращенные фабричные функции, чтобы создавать элементы из ваших собственных компонентов.
109
+Для удобства, вы можете создать сокращенные фабричные функции, чтобы создавать React-элементы из ваших собственных компонентов.
110
111
```javascript
112
var Factory = React.createFactory(ComponentClass);
@@ -115,7 +115,7 @@ var root = Factory({ custom: 'prop' });
115
ReactDOM.render(root, document.getElementById('example'));
116
```
117
118
-В React уже есть встроенные фабрики для базовых HTML тегов:
118
+А для базовых HTML тегов в React уже есть встроенные фабрики:
119
120
```javascript
121
var root = React.DOM.ul({ className: 'my-list' },