lukechilds
/
react.dev
mirror of https://github.com/lukechilds/react.dev.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update 02-displaying-data.ru-RU 

Многие предложения перестроены, добавлены запятые
main
Andrey Safronov 9 years ago
parent
03985d5635
commit
c4392e5f56
1 changed files with 16 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      docs/02-displaying-data.ru-RU.md

32
docs/02-displaying-data.ru-RU.md
View File

@ -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
</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() {
`<a href="https://facebook.github.io/react/">Hello!</a>`
Мы установили, что с 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' },

Write Preview
Loading…
Cancel
Save