Hello React<\/title>\n+ <script src=\"https:\/\/fb.me\/react-{{site.react_version}}.js\"><\/script>\n+ <script src=\"https:\/\/fb.me\/react-dom-{{site.react_version}}.js\"><\/script>\n+ <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-core\/5.8.23\/browser.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"example\"><\/div>\n+ <script type=\"text\/babel\">\n+\n+ \/\/ ** Ваш код будет здесь! **\n+\n+ <\/script>\n+ <\/body>\n+<\/html>\n+```\n+\n+Далее мы сфокусируемся на JavaScript коде и вставим его в наш шаблон. Замените комментарий выше на следующий JSX-код:\n+\n+```javascript\n+var HelloWorld = React.createClass({\n+ render: function() {\n+ return (\n+ <p>\n+ Hello, <input type=\"text\" placeholder=\"Your name here\" \/>!\n+ It is {this.props.date.toTimeString()}\n+ <\/p>\n+ );\n+ }\n+});\n+\n+setInterval(function() {\n+ ReactDOM.render(\n+ <HelloWorld date={new Date()} \/>,\n+ document.getElementById('example')\n+ );\n+}, 500);\n+```\n+\n+## Реактивные обновления\n+\n+Откройте `hello-react.html` в браузере и введите в текстовое поле свое имя. Заметьте что в интерефейсе React меняет только время — всё что вы вводите не пропадает и не меняется, хотя вы даже не написали ни строчки кода для такого его поведения. React отлично понимает что ему надо делать и делает это правильно.\n+\n+Дело в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. **Чтобы отразить изменения React использует быстрое внутреннее представление DOM-дерева и максимально эффективно просчитывает как это сделать**\n+\n+Введенные в компонент данные называются `props` — сокращенно от \"properties\". Они передаются как атрибуты в JSX коде. Вы можете считать их неизменяемыми внутри компонента, но **никогда не пишите `this.props`**.\n+\n+## Компоненты как функции\n+\n+Компоненты React чрезвычайно просты. Вы можете считать их простыми функциями, которые принимают `props` и `state` (см. ниже) и отрисовывают HTML. Если помнить об этом, то компоненты становятся простыми для понимания.\n+\n+> Замечание:\n+>\n+> **Есть одно ограничение**: React компоненты могут отрисовывать только один корневой узел. Если вам надо вернуть сразу несколько узлов - они *должны* быть обернуты в один корневой узел.\n+\n+## JSX синтаксис\n+\n+Мы убеждены что компоненты — самый подходящий способ разделения отвественностей, и более удобный чем \"шаблоны\" и \"логика вывода\". Мы считаем, что разметка и код, который её генерирует взаимосвязаны и неотделимы друг от друга. Плюс, логика вывода часто бывает запутанной и использование шаблонизаторов чтобы описать её только затрудняет работу.\n+\n+Мы решили, что самым лучшим вариантом будет — генерировать HTML и деревья компонентов прямо из JS кода. Так что вы сможете зайдействовать всю выразительную мощь современного языка программирования для создания интерфейсов.\n+\n+Так, чтобы упростить создание узлов дерева в React, мы ввели простой **опциональный** HTML-подобный синтаксис.\n+\n+**JSX позволяет вам создавать JavaScript объекты используя синтаксис HTML**. Для генерации ссылки в React вы напишете на чистом JavaScript:\n+\n+`React.createElement('a', {href: 'https:\/\/facebook.github.io\/react\/'}, 'Hello!')`\n+\n+С JSX это станет:\n+\n+`<a href=\"https:\/\/facebook.github.io\/react\/\">Hello!<\/a>`\n+\n+Мы установили, что с JSX создавать React приложения проще и дизайнеров как правило устраивает его синтаксис, но у каждого свои привычки в работе, поэтому **JSX необязателен при работе с React.**\n+\n+JSX очень мал. Чтобы узнать о нем больше, посмотрите на [JSX в детелях](\/react\/docs\/jsx-in-depth.html). Или можете испытать его через [Babel REPL](https:\/\/babeljs.io\/repl\/).\n+\n+JSX похож на HTML, но не повторяет его. Посмотрите [подводные камни JSX](\/react\/docs\/jsx-gotchas.html) чтобы понять их ключевые различия.\n+\n+[Babel предлагает несколько способов начать работу с JSX](http:\/\/babeljs.io\/docs\/setup\/), от консольных утилит до интеграций с Ruby on Rails. Выберете тот инструмент, который лучше всего вам подходит.\n+\n+## React без использования JSX\n+\n+JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React элементы на чистом JavaScript используя функцию `React.createElement`, которая принимает имя тега или компонента, объект со свойствами, и опционально несколько дочерних аргументов.\n+\n+```javascript\n+var child1 = React.createElement('li', null, 'First Text Content');\n+var child2 = React.createElement('li', null, 'Second Text Content');\n+var root = React.createElement('ul', { className: 'my-list' }, child1, child2);\n+ReactDOM.render(root, document.getElementById('example'));\n+```\n+\n+Для удобства, вы можете создать сокращенные фабричные функции, чтобы создавать элементы из ваших собственных компонентов.\n+\n+```javascript\n+var Factory = React.createFactory(ComponentClass);\n+...\n+var root = Factory({ custom: 'prop' });\n+ReactDOM.render(root, document.getElementById('example'));\n+```\n+\n+В React уже есть встроенные фабрики для базовых HTML тегов:\n+\n+```javascript\n+var root = React.DOM.ul({ className: 'my-list' },\n+ React.DOM.li(null, 'Text Content')\n+ );\n+```\n","commit":{"shortRevision":"eeb59246b2","authorEmail":"a.safronov87@gmail.com","authorName":"Andrey Safronov","authoredAt":"2016-05-01T15:52:42+04:00","subject":"Create 02-displaying-data.ru-RU.md","revision":"eeb59246b2f39b60da962d72d742eb5b0e38e918"},"body":"Translation for language code ru-RU"}</article></body></html>

{"parents":["256753b83011f18dab8f6f12535afc78c5652b69"],"files":[{"path":"docs\/docs\/02-displaying-data.ru-RU.md","status":"A"}],"patch":"diff --git a\/docs\/docs\/02-displaying-data.ru-RU.md b\/docs\/docs\/02-displaying-data.ru-RU.md\nnew file mode 100644\nindex 0000000000..9ea36f1a39\n--- \/dev\/null\n+++ b\/docs\/docs\/02-displaying-data.ru-RU.md\n@@ -0,0 +1,124 @@\n+---\n+id: displaying-data\n+title: Ввывод данных\n+permalink: displaying-data.html\n+prev: why-react.html\n+next: jsx-in-depth.html\n+---\n+\n+Самое основное что ты можешь сделать с помомщью интерфейса — это показать данные. React делает вывод данных простым и меняет интерфейс сразу, как только данные изменятся.\n+\n+## Начало\n+\n+Давайте рассмотрим простой пример. Создайте файл `hello-react.html` со следующим текстом:\n+\n+```html\n+\n+\n+ \n+ \n+ Hello React<\/title>\n+ <script src=\"https:\/\/fb.me\/react-{{site.react_version}}.js\"><\/script>\n+ <script src=\"https:\/\/fb.me\/react-dom-{{site.react_version}}.js\"><\/script>\n+ <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-core\/5.8.23\/browser.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"example\"><\/div>\n+ <script type=\"text\/babel\">\n+\n+ \/\/ ** Ваш код будет здесь! **\n+\n+ <\/script>\n+ <\/body>\n+<\/html>\n+```\n+\n+Далее мы сфокусируемся на JavaScript коде и вставим его в наш шаблон. Замените комментарий выше на следующий JSX-код:\n+\n+```javascript\n+var HelloWorld = React.createClass({\n+ render: function() {\n+ return (\n+ <p>\n+ Hello, <input type=\"text\" placeholder=\"Your name here\" \/>!\n+ It is {this.props.date.toTimeString()}\n+ <\/p>\n+ );\n+ }\n+});\n+\n+setInterval(function() {\n+ ReactDOM.render(\n+ <HelloWorld date={new Date()} \/>,\n+ document.getElementById('example')\n+ );\n+}, 500);\n+```\n+\n+## Реактивные обновления\n+\n+Откройте `hello-react.html` в браузере и введите в текстовое поле свое имя. Заметьте что в интерефейсе React меняет только время — всё что вы вводите не пропадает и не меняется, хотя вы даже не написали ни строчки кода для такого его поведения. React отлично понимает что ему надо делать и делает это правильно.\n+\n+Дело в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. **Чтобы отразить изменения React использует быстрое внутреннее представление DOM-дерева и максимально эффективно просчитывает как это сделать**\n+\n+Введенные в компонент данные называются `props` — сокращенно от \"properties\". Они передаются как атрибуты в JSX коде. Вы можете считать их неизменяемыми внутри компонента, но **никогда не пишите `this.props`**.\n+\n+## Компоненты как функции\n+\n+Компоненты React чрезвычайно просты. Вы можете считать их простыми функциями, которые принимают `props` и `state` (см. ниже) и отрисовывают HTML. Если помнить об этом, то компоненты становятся простыми для понимания.\n+\n+> Замечание:\n+>\n+> **Есть одно ограничение**: React компоненты могут отрисовывать только один корневой узел. Если вам надо вернуть сразу несколько узлов - они *должны* быть обернуты в один корневой узел.\n+\n+## JSX синтаксис\n+\n+Мы убеждены что компоненты — самый подходящий способ разделения отвественностей, и более удобный чем \"шаблоны\" и \"логика вывода\". Мы считаем, что разметка и код, который её генерирует взаимосвязаны и неотделимы друг от друга. Плюс, логика вывода часто бывает запутанной и использование шаблонизаторов чтобы описать её только затрудняет работу.\n+\n+Мы решили, что самым лучшим вариантом будет — генерировать HTML и деревья компонентов прямо из JS кода. Так что вы сможете зайдействовать всю выразительную мощь современного языка программирования для создания интерфейсов.\n+\n+Так, чтобы упростить создание узлов дерева в React, мы ввели простой **опциональный** HTML-подобный синтаксис.\n+\n+**JSX позволяет вам создавать JavaScript объекты используя синтаксис HTML**. Для генерации ссылки в React вы напишете на чистом JavaScript:\n+\n+`React.createElement('a', {href: 'https:\/\/facebook.github.io\/react\/'}, 'Hello!')`\n+\n+С JSX это станет:\n+\n+`<a href=\"https:\/\/facebook.github.io\/react\/\">Hello!<\/a>`\n+\n+Мы установили, что с JSX создавать React приложения проще и дизайнеров как правило устраивает его синтаксис, но у каждого свои привычки в работе, поэтому **JSX необязателен при работе с React.**\n+\n+JSX очень мал. Чтобы узнать о нем больше, посмотрите на [JSX в детелях](\/react\/docs\/jsx-in-depth.html). Или можете испытать его через [Babel REPL](https:\/\/babeljs.io\/repl\/).\n+\n+JSX похож на HTML, но не повторяет его. Посмотрите [подводные камни JSX](\/react\/docs\/jsx-gotchas.html) чтобы понять их ключевые различия.\n+\n+[Babel предлагает несколько способов начать работу с JSX](http:\/\/babeljs.io\/docs\/setup\/), от консольных утилит до интеграций с Ruby on Rails. Выберете тот инструмент, который лучше всего вам подходит.\n+\n+## React без использования JSX\n+\n+JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React элементы на чистом JavaScript используя функцию `React.createElement`, которая принимает имя тега или компонента, объект со свойствами, и опционально несколько дочерних аргументов.\n+\n+```javascript\n+var child1 = React.createElement('li', null, 'First Text Content');\n+var child2 = React.createElement('li', null, 'Second Text Content');\n+var root = React.createElement('ul', { className: 'my-list' }, child1, child2);\n+ReactDOM.render(root, document.getElementById('example'));\n+```\n+\n+Для удобства, вы можете создать сокращенные фабричные функции, чтобы создавать элементы из ваших собственных компонентов.\n+\n+```javascript\n+var Factory = React.createFactory(ComponentClass);\n+...\n+var root = Factory({ custom: 'prop' });\n+ReactDOM.render(root, document.getElementById('example'));\n+```\n+\n+В React уже есть встроенные фабрики для базовых HTML тегов:\n+\n+```javascript\n+var root = React.DOM.ul({ className: 'my-list' },\n+ React.DOM.li(null, 'Text Content')\n+ );\n+```\n","commit":{"shortRevision":"eeb59246b2","authorEmail":"a.safronov87@gmail.com","authorName":"Andrey Safronov","authoredAt":"2016-05-01T15:52:42+04:00","subject":"Create 02-displaying-data.ru-RU.md","revision":"eeb59246b2f39b60da962d72d742eb5b0e38e918"},"body":"Translation for language code ru-RU"}</article></body></html>

dillon1000/react

Files changed