Create 02-displaying-data.ru-RU.md
Translation for language code ru-RU
Andrey Safronov committed
May 1, 2016 at 15:52 UTC
eeb59246b2f39b60da962d72d742eb5b0e38e918
1 file changed
+124
docs/docs/02-displaying-data.ru-RU.md
new
+124
@@ -0,0 +1,124 @@
1
+---
2
+id: displaying-data
3
+title: Ввывод данных
4
+permalink: displaying-data.html
5
+prev: why-react.html
6
+next: jsx-in-depth.html
7
+---
8
+
9
+Самое основное что ты можешь сделать с помомщью интерфейса — это показать данные. React делает вывод данных простым и меняет интерфейс сразу, как только данные изменятся.
10
+
11
+## Начало
12
+
13
+Давайте рассмотрим простой пример. Создайте файл `hello-react.html` со следующим текстом:
14
+
15
+```html
16
+<!DOCTYPE html>
17
+<html>
18
+ <head>
19
+ <meta charset="UTF-8" />
20
+ <title>Hello React</title>
21
+ <script src="https://fb.me/react-{{site.react_version}}.js"></script>
22
+ <script src="https://fb.me/react-dom-{{site.react_version}}.js"></script>
23
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
24
+ </head>
25
+ <body>
26
+ <div id="example"></div>
27
+ <script type="text/babel">
28
+
29
+ // ** Ваш код будет здесь! **
30
+
31
+ </script>
32
+ </body>
33
+</html>
34
+```
35
+
36
+Далее мы сфокусируемся на JavaScript коде и вставим его в наш шаблон. Замените комментарий выше на следующий JSX-код:
37
+
38
+```javascript
39
+var HelloWorld = React.createClass({
40
+ render: function() {
41
+ return (
42
+ <p>
43
+ Hello, <input type="text" placeholder="Your name here" />!
44
+ It is {this.props.date.toTimeString()}
45
+ </p>
46
+ );
47
+ }
48
+});
49
+
50
+setInterval(function() {
51
+ ReactDOM.render(
52
+ <HelloWorld date={new Date()} />,
53
+ document.getElementById('example')
54
+ );
55
+}, 500);
56
+```
57
+
58
+## Реактивные обновления
59
+
60
+Откройте `hello-react.html` в браузере и введите в текстовое поле свое имя. Заметьте что в интерефейсе React меняет только время — всё что вы вводите не пропадает и не меняется, хотя вы даже не написали ни строчки кода для такого его поведения. React отлично понимает что ему надо делать и делает это правильно.
61
+
62
+Дело в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. **Чтобы отразить изменения React использует быстрое внутреннее представление DOM-дерева и максимально эффективно просчитывает как это сделать**
63
+
64
+Введенные в компонент данные называются `props` — сокращенно от "properties". Они передаются как атрибуты в JSX коде. Вы можете считать их неизменяемыми внутри компонента, но **никогда не пишите `this.props`**.
65
+
66
+## Компоненты как функции
67
+
68
+Компоненты React чрезвычайно просты. Вы можете считать их простыми функциями, которые принимают `props` и `state` (см. ниже) и отрисовывают HTML. Если помнить об этом, то компоненты становятся простыми для понимания.
69
+
70
+> Замечание:
71
+>
72
+> **Есть одно ограничение**: React компоненты могут отрисовывать только один корневой узел. Если вам надо вернуть сразу несколько узлов - они *должны* быть обернуты в один корневой узел.
73
+
74
+## JSX синтаксис
75
+
76
+Мы убеждены что компоненты — самый подходящий способ разделения отвественностей, и более удобный чем "шаблоны" и "логика вывода". Мы считаем, что разметка и код, который её генерирует взаимосвязаны и неотделимы друг от друга. Плюс, логика вывода часто бывает запутанной и использование шаблонизаторов чтобы описать её только затрудняет работу.
77
+
78
+Мы решили, что самым лучшим вариантом будет — генерировать HTML и деревья компонентов прямо из JS кода. Так что вы сможете зайдействовать всю выразительную мощь современного языка программирования для создания интерфейсов.
79
+
80
+Так, чтобы упростить создание узлов дерева в React, мы ввели простой **опциональный** HTML-подобный синтаксис.
81
+
82
+**JSX позволяет вам создавать JavaScript объекты используя синтаксис HTML**. Для генерации ссылки в React вы напишете на чистом JavaScript:
83
+
84
+`React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')`
85
+
86
+С JSX это станет:
87
+
88
+`<a href="https://facebook.github.io/react/">Hello!</a>`
89
+
90
+Мы установили, что с JSX создавать React приложения проще и дизайнеров как правило устраивает его синтаксис, но у каждого свои привычки в работе, поэтому **JSX необязателен при работе с React.**
91
+
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
+
96
+[Babel предлагает несколько способов начать работу с JSX](http://babeljs.io/docs/setup/), от консольных утилит до интеграций с Ruby on Rails. Выберете тот инструмент, который лучше всего вам подходит.
97
+
98
+## React без использования JSX
99
+
100
+JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React элементы на чистом JavaScript используя функцию `React.createElement`, которая принимает имя тега или компонента, объект со свойствами, и опционально несколько дочерних аргументов.
101
+
102
+```javascript
103
+var child1 = React.createElement('li', null, 'First Text Content');
104
+var child2 = React.createElement('li', null, 'Second Text Content');
105
+var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
106
+ReactDOM.render(root, document.getElementById('example'));
107
+```
108
+
109
+Для удобства, вы можете создать сокращенные фабричные функции, чтобы создавать элементы из ваших собственных компонентов.
110
+
111
+```javascript
112
+var Factory = React.createFactory(ComponentClass);
113
+...
114
+var root = Factory({ custom: 'prop' });
115
+ReactDOM.render(root, document.getElementById('example'));
116
+```
117
+
118
+В React уже есть встроенные фабрики для базовых HTML тегов:
119
+
120
+```javascript
121
+var root = React.DOM.ul({ className: 'my-list' },
122
+ React.DOM.li(null, 'Text Content')
123
+ );
124
+```