From 03985d5635a84f4e4503937f8f8ecb250fb250d0 Mon Sep 17 00:00:00 2001 From: Andrey Safronov Date: Sun, 1 May 2016 15:52:42 +0400 Subject: [PATCH 1/4] Create 02-displaying-data.ru-RU.md Translation for language code ru-RU --- docs/02-displaying-data.ru-RU.md | 124 +++++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 docs/02-displaying-data.ru-RU.md diff --git a/docs/02-displaying-data.ru-RU.md b/docs/02-displaying-data.ru-RU.md new file mode 100644 index 00000000..9ea36f1a --- /dev/null +++ b/docs/02-displaying-data.ru-RU.md @@ -0,0 +1,124 @@ +--- +id: displaying-data +title: Ввывод данных +permalink: displaying-data.html +prev: why-react.html +next: jsx-in-depth.html +--- + +Самое основное что ты можешь сделать с помомщью интерфейса — это показать данные. React делает вывод данных простым и меняет интерфейс сразу, как только данные изменятся. + +## Начало + +Давайте рассмотрим простой пример. Создайте файл `hello-react.html` со следующим текстом: + +```html + + + + + Hello React + + + + + +
+ + + +``` + +Далее мы сфокусируемся на JavaScript коде и вставим его в наш шаблон. Замените комментарий выше на следующий JSX-код: + +```javascript +var HelloWorld = React.createClass({ + render: function() { + return ( +

+ Hello, ! + It is {this.props.date.toTimeString()} +

+ ); + } +}); + +setInterval(function() { + ReactDOM.render( + , + document.getElementById('example') + ); +}, 500); +``` + +## Реактивные обновления + +Откройте `hello-react.html` в браузере и введите в текстовое поле свое имя. Заметьте что в интерефейсе React меняет только время — всё что вы вводите не пропадает и не меняется, хотя вы даже не написали ни строчки кода для такого его поведения. React отлично понимает что ему надо делать и делает это правильно. + +Дело в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. **Чтобы отразить изменения React использует быстрое внутреннее представление DOM-дерева и максимально эффективно просчитывает как это сделать** + +Введенные в компонент данные называются `props` — сокращенно от "properties". Они передаются как атрибуты в JSX коде. Вы можете считать их неизменяемыми внутри компонента, но **никогда не пишите `this.props`**. + +## Компоненты как функции + +Компоненты React чрезвычайно просты. Вы можете считать их простыми функциями, которые принимают `props` и `state` (см. ниже) и отрисовывают HTML. Если помнить об этом, то компоненты становятся простыми для понимания. + +> Замечание: +> +> **Есть одно ограничение**: React компоненты могут отрисовывать только один корневой узел. Если вам надо вернуть сразу несколько узлов - они *должны* быть обернуты в один корневой узел. + +## JSX синтаксис + +Мы убеждены что компоненты — самый подходящий способ разделения отвественностей, и более удобный чем "шаблоны" и "логика вывода". Мы считаем, что разметка и код, который её генерирует взаимосвязаны и неотделимы друг от друга. Плюс, логика вывода часто бывает запутанной и использование шаблонизаторов чтобы описать её только затрудняет работу. + +Мы решили, что самым лучшим вариантом будет — генерировать HTML и деревья компонентов прямо из JS кода. Так что вы сможете зайдействовать всю выразительную мощь современного языка программирования для создания интерфейсов. + +Так, чтобы упростить создание узлов дерева в React, мы ввели простой **опциональный** HTML-подобный синтаксис. + +**JSX позволяет вам создавать JavaScript объекты используя синтаксис HTML**. Для генерации ссылки в React вы напишете на чистом JavaScript: + +`React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')` + +С JSX это станет: + +`Hello!` + +Мы установили, что с JSX создавать React приложения проще и дизайнеров как правило устраивает его синтаксис, но у каждого свои привычки в работе, поэтому **JSX необязателен при работе с React.** + +JSX очень мал. Чтобы узнать о нем больше, посмотрите на [JSX в детелях](/react/docs/jsx-in-depth.html). Или можете испытать его через [Babel REPL](https://babeljs.io/repl/). + +JSX похож на HTML, но не повторяет его. Посмотрите [подводные камни JSX](/react/docs/jsx-gotchas.html) чтобы понять их ключевые различия. + +[Babel предлагает несколько способов начать работу с JSX](http://babeljs.io/docs/setup/), от консольных утилит до интеграций с Ruby on Rails. Выберете тот инструмент, который лучше всего вам подходит. + +## React без использования JSX + +JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React элементы на чистом JavaScript используя функцию `React.createElement`, которая принимает имя тега или компонента, объект со свойствами, и опционально несколько дочерних аргументов. + +```javascript +var child1 = React.createElement('li', null, 'First Text Content'); +var child2 = React.createElement('li', null, 'Second Text Content'); +var root = React.createElement('ul', { className: 'my-list' }, child1, child2); +ReactDOM.render(root, document.getElementById('example')); +``` + +Для удобства, вы можете создать сокращенные фабричные функции, чтобы создавать элементы из ваших собственных компонентов. + +```javascript +var Factory = React.createFactory(ComponentClass); +... +var root = Factory({ custom: 'prop' }); +ReactDOM.render(root, document.getElementById('example')); +``` + +В React уже есть встроенные фабрики для базовых HTML тегов: + +```javascript +var root = React.DOM.ul({ className: 'my-list' }, + React.DOM.li(null, 'Text Content') + ); +``` From c4392e5f56f178e0fa9890a40d51ec631872e556 Mon Sep 17 00:00:00 2001 From: Andrey Safronov Date: Mon, 2 May 2016 18:43:26 +0400 Subject: [PATCH 2/4] Update 02-displaying-data.ru-RU MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Многие предложения перестроены, добавлены запятые --- docs/02-displaying-data.ru-RU.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/docs/02-displaying-data.ru-RU.md b/docs/02-displaying-data.ru-RU.md index 9ea36f1a..eac43858 100644 --- a/docs/02-displaying-data.ru-RU.md +++ b/docs/02-displaying-data.ru-RU.md @@ -1,12 +1,12 @@ --- id: displaying-data -title: Ввывод данных +title: Отображение данных permalink: displaying-data.html prev: why-react.html next: jsx-in-depth.html --- -Самое основное что ты можешь сделать с помомщью интерфейса — это показать данные. React делает вывод данных простым и меняет интерфейс сразу, как только данные изменятся. +Главная задача интерфейса — это отображать данные. React делает это легко и обновляет интерфейс сразу, как только изменятся данные. ## Начало @@ -33,7 +33,7 @@ next: jsx-in-depth.html ``` -Далее мы сфокусируемся на JavaScript коде и вставим его в наш шаблон. Замените комментарий выше на следующий JSX-код: +Добавим в этот шаблон немного JavaScript. Замените комментарий на следующий JSX-код: ```javascript var HelloWorld = React.createClass({ @@ -57,27 +57,27 @@ setInterval(function() { ## Реактивные обновления -Откройте `hello-react.html` в браузере и введите в текстовое поле свое имя. Заметьте что в интерефейсе React меняет только время — всё что вы вводите не пропадает и не меняется, хотя вы даже не написали ни строчки кода для такого его поведения. React отлично понимает что ему надо делать и делает это правильно. +Откройте `hello-react.html` в браузере и введите в текстовое поле свое имя. Что происходит со страницей? Каждые пол-секунды обновляется время, остальные же части страницы остаются без изменений. Вот так, не написав ни строчки кода, наша страница уже обладает своим поведением. React сам отлично понимает что надо делать и обновляет элементы на странице по мере необходимости. -Дело в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. **Чтобы отразить изменения React использует быстрое внутреннее представление DOM-дерева и максимально эффективно просчитывает как это сделать** +Суть в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. **Чтобы отразить изменения React использует быстрое внутреннее представление DOM-дерева и максимально эффективно просчитывает как это сделать** -Введенные в компонент данные называются `props` — сокращенно от "properties". Они передаются как атрибуты в JSX коде. Вы можете считать их неизменяемыми внутри компонента, но **никогда не пишите `this.props`**. +Передаваемые в компонент данные называются `props` — сокращенно от "properties". В JSX коде они передаются как атрибуты компонента. Можно считать `props` неизменяемыми внутри компонента, но **никогда сами не меняйте их значения**. ## Компоненты как функции -Компоненты React чрезвычайно просты. Вы можете считать их простыми функциями, которые принимают `props` и `state` (см. ниже) и отрисовывают HTML. Если помнить об этом, то компоненты становятся простыми для понимания. +Компоненты React довольно простые сущности. Можно считать их обыкновенными функциями, которые принимают на входе `props` и `state` (см. далее) и возвращают HTML. Если помнить об этом, то компоненты становятся простыми для понимания. > Замечание: > -> **Есть одно ограничение**: React компоненты могут отрисовывать только один корневой узел. Если вам надо вернуть сразу несколько узлов - они *должны* быть обернуты в один корневой узел. +> **Есть одно ограничение**: React компоненты умеют возвращать только один узел. Если вам надо вернуть сразу несколько - они *должны* быть обернуты в один корневой узел. ## JSX синтаксис -Мы убеждены что компоненты — самый подходящий способ разделения отвественностей, и более удобный чем "шаблоны" и "логика вывода". Мы считаем, что разметка и код, который её генерирует взаимосвязаны и неотделимы друг от друга. Плюс, логика вывода часто бывает запутанной и использование шаблонизаторов чтобы описать её только затрудняет работу. +Мы убеждены, что компоненты — самый подходящий способ разделения ответственностей, гораздо более удобный чем "шаблоны" и "вынесение логики на страницу". Мы считаем, что разметка и код, который её генерирует, неотделимы друг от друга. Плюс, логика на странице часто бывает запутанной, и использование шаблонизаторов, чтобы описать её, только затрудняет работу. -Мы решили, что самым лучшим вариантом будет — генерировать HTML и деревья компонентов прямо из JS кода. Так что вы сможете зайдействовать всю выразительную мощь современного языка программирования для создания интерфейсов. +Мы решили, что лучшим вариантом будет генерировать HTML и деревья компонентов прямо из JS кода. Так вы сможете зайдействовать всю выразительную мощь современного языка программирования для создания интерфейсов. -Так, чтобы упростить создание узлов дерева в React, мы ввели простой **опциональный** HTML-подобный синтаксис. +А чтобы упростить создание узлов дерева, мы ввели **опциональный** HTML-подобный синтаксис. **JSX позволяет вам создавать JavaScript объекты используя синтаксис HTML**. Для генерации ссылки в React вы напишете на чистом JavaScript: @@ -87,9 +87,9 @@ setInterval(function() { `Hello!` -Мы установили, что с JSX создавать React приложения проще и дизайнеров как правило устраивает его синтаксис, но у каждого свои привычки в работе, поэтому **JSX необязателен при работе с React.** +Мы установили, что с JSX создавать React приложения проще и дизайнеров как правило устраивает его синтаксис. Но у каждого свои привычки в работе, поэтому стоит сказать, что **JSX необязателен при работе с React.** -JSX очень мал. Чтобы узнать о нем больше, посмотрите на [JSX в детелях](/react/docs/jsx-in-depth.html). Или можете испытать его через [Babel REPL](https://babeljs.io/repl/). +JSX сам по себе очень мал. Чтобы узнать о нем больше, посмотрите на [JSX в детелях](/react/docs/jsx-in-depth.html). Или можете испытать его через [Babel REPL](https://babeljs.io/repl/). JSX похож на HTML, но не повторяет его. Посмотрите [подводные камни JSX](/react/docs/jsx-gotchas.html) чтобы понять их ключевые различия. @@ -97,7 +97,7 @@ JSX похож на HTML, но не повторяет его. Посмотри ## React без использования JSX -JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React элементы на чистом JavaScript используя функцию `React.createElement`, которая принимает имя тега или компонента, объект со свойствами, и опционально несколько дочерних аргументов. +JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React-элементы на чистом JavaScript используя функцию `React.createElement`, которая принимает имя тега или компонента, объект со свойствами, и опционально несколько дочерних аргументов. ```javascript var child1 = React.createElement('li', null, 'First Text Content'); @@ -106,7 +106,7 @@ var root = React.createElement('ul', { className: 'my-list' }, child1, child2); ReactDOM.render(root, document.getElementById('example')); ``` -Для удобства, вы можете создать сокращенные фабричные функции, чтобы создавать элементы из ваших собственных компонентов. +Для удобства, вы можете создать сокращенные фабричные функции, чтобы создавать React-элементы из ваших собственных компонентов. ```javascript var Factory = React.createFactory(ComponentClass); @@ -115,7 +115,7 @@ var root = Factory({ custom: 'prop' }); ReactDOM.render(root, document.getElementById('example')); ``` -В React уже есть встроенные фабрики для базовых HTML тегов: +А для базовых HTML тегов в React уже есть встроенные фабрики: ```javascript var root = React.DOM.ul({ className: 'my-list' }, From 71eb811c59a44ecff9d4b34148859062bb43ac0a Mon Sep 17 00:00:00 2001 From: Andrey Safronov Date: Mon, 2 May 2016 23:03:34 +0400 Subject: [PATCH 3/4] Update 02-displaying-data.ru-RU MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit исправил ошибки --- docs/02-displaying-data.ru-RU.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/02-displaying-data.ru-RU.md b/docs/02-displaying-data.ru-RU.md index eac43858..42694c58 100644 --- a/docs/02-displaying-data.ru-RU.md +++ b/docs/02-displaying-data.ru-RU.md @@ -57,21 +57,21 @@ setInterval(function() { ## Реактивные обновления -Откройте `hello-react.html` в браузере и введите в текстовое поле свое имя. Что происходит со страницей? Каждые пол-секунды обновляется время, остальные же части страницы остаются без изменений. Вот так, не написав ни строчки кода, наша страница уже обладает своим поведением. React сам отлично понимает что надо делать и обновляет элементы на странице по мере необходимости. +Откройте `hello-react.html` в браузере и введите в текстовое поле свое имя. Что происходит со страницей? Каждые полсекунды обновляется время, остальные же части страницы остаются без изменений. Обратите внимание, что мы не написали ни строчки кода, чтобы управлять этим поведением. React сам отлично понимает что надо делать и обновляет элементы на странице по мере необходимости. -Суть в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. **Чтобы отразить изменения React использует быстрое внутреннее представление DOM-дерева и максимально эффективно просчитывает как это сделать** +Суть в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. **Чтобы отразить изменения, React использует быстрое внутреннее представление DOM-дерева и просчитывает как его изменить наиболее эффективно** -Передаваемые в компонент данные называются `props` — сокращенно от "properties". В JSX коде они передаются как атрибуты компонента. Можно считать `props` неизменяемыми внутри компонента, но **никогда сами не меняйте их значения**. +Передаваемые в компонент данные называются `props` — сокращенно от "properties". В JSX коде они передаются как атрибуты компонента. Считайте, что компонент получает `props` только для чтения. **Никогда не перезаписывайте значения `this.props` внутри компонента.** ## Компоненты как функции -Компоненты React довольно простые сущности. Можно считать их обыкновенными функциями, которые принимают на входе `props` и `state` (см. далее) и возвращают HTML. Если помнить об этом, то компоненты становятся простыми для понимания. +Компоненты React — довольно простые сущности. Можно считать их обыкновенными функциями, которые принимают на входе `props` и `state` (см. далее) и возвращают HTML. Если помнить об этом, то компоненты становятся простыми для понимания. > Замечание: > -> **Есть одно ограничение**: React компоненты умеют возвращать только один узел. Если вам надо вернуть сразу несколько - они *должны* быть обернуты в один корневой узел. +> **Есть одно ограничение**: Компоненты React умеют возвращать только один узел. Если вам надо вернуть сразу несколько, они *должны* быть обернуты в один корневой узел. -## JSX синтаксис +## Синтаксис JSX Мы убеждены, что компоненты — самый подходящий способ разделения ответственностей, гораздо более удобный чем "шаблоны" и "вынесение логики на страницу". Мы считаем, что разметка и код, который её генерирует, неотделимы друг от друга. Плюс, логика на странице часто бывает запутанной, и использование шаблонизаторов, чтобы описать её, только затрудняет работу. @@ -87,17 +87,17 @@ setInterval(function() { `Hello!` -Мы установили, что с JSX создавать React приложения проще и дизайнеров как правило устраивает его синтаксис. Но у каждого свои привычки в работе, поэтому стоит сказать, что **JSX необязателен при работе с React.** +Мы установили, что с JSX создавать React приложения проще, и дизайнеров как правило устраивает его синтаксис. Но у разных людей разные предпочтения, поэтому стоит сказать, что **JSX необязателен при работе с React.** -JSX сам по себе очень мал. Чтобы узнать о нем больше, посмотрите на [JSX в детелях](/react/docs/jsx-in-depth.html). Или можете испытать его через [Babel REPL](https://babeljs.io/repl/). +JSX сам по себе очень прост. Чтобы узнать о нем больше, почитайте [подробно про JSX](/react/docs/jsx-in-depth.html). Или можете попробовать его в [Babel REPL](https://babeljs.io/repl/). -JSX похож на HTML, но не повторяет его. Посмотрите [подводные камни JSX](/react/docs/jsx-gotchas.html) чтобы понять их ключевые различия. +JSX похож на HTML, но но имеет существенные отличия. Почитайте про [подводные камни JSX](/react/docs/jsx-gotchas.html), чтобы понять их ключевые различия. -[Babel предлагает несколько способов начать работу с JSX](http://babeljs.io/docs/setup/), от консольных утилит до интеграций с Ruby on Rails. Выберете тот инструмент, который лучше всего вам подходит. +[Babel предлагает несколько способов начать работу с JSX](http://babeljs.io/docs/setup/), от консольных утилит до интеграций с Ruby on Rails. Выберите тот инструмент, который лучше всего вам подходит. ## React без использования JSX -JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React-элементы на чистом JavaScript используя функцию `React.createElement`, которая принимает имя тега или компонента, объект со свойствами, и опционально несколько дочерних аргументов. +JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React-элементы на чистом JavaScript используя функцию `React.createElement`, которая принимает имя тега или компонента, объект со свойствами, и набор необязательных дочерних элементов. ```javascript var child1 = React.createElement('li', null, 'First Text Content'); From e74ccb7e473d64105392bf0a4b2c398a3eaad480 Mon Sep 17 00:00:00 2001 From: Andrey Safronov Date: Tue, 3 May 2016 00:15:14 +0400 Subject: [PATCH 4/4] Update 02-displaying-data.ru-RU dot --- docs/02-displaying-data.ru-RU.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/02-displaying-data.ru-RU.md b/docs/02-displaying-data.ru-RU.md index 42694c58..c7dc9ba6 100644 --- a/docs/02-displaying-data.ru-RU.md +++ b/docs/02-displaying-data.ru-RU.md @@ -59,7 +59,7 @@ setInterval(function() { Откройте `hello-react.html` в браузере и введите в текстовое поле свое имя. Что происходит со страницей? Каждые полсекунды обновляется время, остальные же части страницы остаются без изменений. Обратите внимание, что мы не написали ни строчки кода, чтобы управлять этим поведением. React сам отлично понимает что надо делать и обновляет элементы на странице по мере необходимости. -Суть в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. **Чтобы отразить изменения, React использует быстрое внутреннее представление DOM-дерева и просчитывает как его изменить наиболее эффективно** +Суть в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. **Чтобы отразить изменения, React использует быстрое внутреннее представление DOM-дерева и просчитывает как его изменить наиболее эффективно**. Передаваемые в компонент данные называются `props` — сокращенно от "properties". В JSX коде они передаются как атрибуты компонента. Считайте, что компонент получает `props` только для чтения. **Никогда не перезаписывайте значения `this.props` внутри компонента.**