jsx-in-depth: улучшения

Author: lex111

content/docs/jsx-in-depth.md

@@ -13,15 +13,15 @@ redirect_from:
   - "docs/jsx-in-depth-ko-KR.html"
 ---
 
-JSX является синтаксическим сахаром для функции `React.createElement(component, props, ...children)`. Этот JSX-код:
+JSX — синтаксический сахар для функции `React.createElement(component, props, ...children)`. Этот JSX-код:
 
 ```js
 <MyButton color="blue" shadowSize={2}>
   Нажми меня
 </MyButton>
 ```
 
-компилируется в:
+Скомпилируется в:
 
 ```js
 React.createElement(
@@ -37,7 +37,7 @@ React.createElement(
 <div className="sidebar" />
 ```
 
-компилируется в:
+Скомпилируется в:
 
 ```js
 React.createElement(
@@ -75,14 +75,14 @@ function WarningButton() {
 
 ### Использование записи через точку {#using-dot-notation-for-jsx-type}
 
-Вы также можете ссылаться на React-компонент, используя запись через точку. Это удобно, если у вас есть модуль, который экспортирует много React компонентов. К примеру, если `MyComponents.DatePicker` является компонентом, то вы можете обратиться к нему напрямую, используя запись через точку:
+Вы также можете ссылаться на React-компонент, используя запись через точку. Это удобно, если у вас есть модуль, который экспортирует много React-компонентов. К примеру, если `MyComponents.DatePicker` является компонентом, то вы можете обратиться к нему напрямую, используя запись через точку:
 
 ```js{10}
 import React from 'react';
 
 const MyComponents = {
   DatePicker: function DatePicker(props) {
-    return <div>Imagine a {props.color} datepicker here.</div>;
+    return <div>Представьте, что здесь цвет {props.color} виджета выбора даты.</div>;
   }
 }
 
@@ -93,7 +93,7 @@ function BlueDatePicker() {
 
 ### Названия типов пользовательских компонентов должны начинаться с большой буквы {#user-defined-components-must-be-capitalized}
 
-Если название типа элемента начинается с маленькой буквы, он ссылается на встроенный компонент, к примеру `<div>` или `<span>`, что в результате приведёт к тому, что в `React.createElement` будет передана строка `'div'` или `'span'`. Типы, начинающиеся с заглавной буквы, такие как `<Foo />`, компилируются  в `React.createElement(Foo)` и соответствуют компоненту, который был объявлен или импортирован в вашем JavaScript файле.  
+Если название типа элемента начинается с маленькой буквы, он ссылается на встроенный компонент, к примеру `<div>` или `<span>`, что в результате приведёт к тому, что в `React.createElement` будет передана строка `'div'` или `'span'`. Типы, начинающиеся с заглавной буквы, такие как `<Foo />`, компилируются  в `React.createElement(Foo)` и соответствуют компоненту, который был объявлен или импортирован в вашем JavaScript-файле.  
 
 Мы рекомендуем называть компоненты с заглавной буквы. Если у вас есть компонент, название которого начинается с маленькой буквы, то перед тем как использовать его в JSX, присвойте его в переменную, которая имеет название с заглавной буквы.
 
@@ -105,13 +105,13 @@ import React from 'react';
 // Неправильно! Это компонент и он должен быть записан с заглавной буквы:
 function hello(props) {
   // Правильно! Использование <div> разрешено, так как это валидный HTML-тег:
-  return <div>Hello {props.toWhat}</div>;
+  return <div>Привет, {props.toWhat}</div>;
 }
 
 function HelloWorld() {
   // Неправильно! React думает, что <hello /> - это HTML-тег,
   // потому что он записан с маленькой буквы:
-  return <hello toWhat="World" />;
+  return <hello toWhat="Мир" />;
 }
 ```
 
@@ -123,13 +123,13 @@ import React from 'react';
 // Правильно! Это компонент и он должен быть записан с заглавной буквы:
 function Hello(props) {
   // Правильно! Использование <div> разрешено, так как это валидный HTML-тег:
-  return <div>Hello {props.toWhat}</div>;
+  return <div>Привет, {props.toWhat}</div>;
 }
 
 function HelloWorld() {
   // Правильно! React знает, что <Hello /> это компонент,
   // потому что он написан с заглавной буквы.
-  return <Hello toWhat="World" />;
+  return <Hello toWhat="Мир" />;
 }
 ```
 
@@ -230,19 +230,19 @@ function NumberDescriber(props) {
 <MyTextBox autocomplete={true} />
 ```
 
-В основном, мы не рекомендуем так делать, потому что это может быть воспринято как [ES6 object shorthand](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer#%D0%9D%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BD%D0%BE%D1%82%D0%B0%D1%86%D0%B8%D1%8F_%D0%B2_ECMAScript_2015) `{foo}`, которое является сокращением для `{foo: foo}`, а не `{foo: true}`. Такое поведение существует для того, чтобы соответствовать поведению HTML.
+В основном, мы не рекомендуем так делать, потому что это может быть воспринято как [сокращение имён свойств из ES6](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer#%D0%9D%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BD%D0%BE%D1%82%D0%B0%D1%86%D0%B8%D1%8F_%D0%B2_ECMAScript_2015). Тогда, например, `{foo}` это короткая запись `{foo: foo}`, но никак не `{foo: true}`. Такое поведение существует для того, чтобы соответствовать поведению HTML.
 
 ### Атрибуты расширения {#spread-attributes}
 
-Если у вас уже есть пропсы внутри объекта `props` и вы хотите передать их в JSX, вы можете использовать оператор расширения `...` («spread operator»). Эти два компонента эквивалентны:
+Если у вас уже есть пропсы внутри объекта `props` и вы хотите передать их в JSX, вы можете использовать оператор расширения `...`. Эти два компонента эквивалентны:
 
 ```js{7}
 function App1() {
-  return <Greeting firstName="Ben" lastName="Hector" />;
+  return <Greeting firstName="Иван" lastName="Иванов" />;
 }
 
 function App2() {
-  const props = {firstName: 'Ben', lastName: 'Hector'};
+  const props = {firstName: 'Иван', lastName: 'Иванов'};
   return <Greeting {...props} />;
 }
 ```
@@ -260,7 +260,7 @@ const App = () => {
   return (
     <div>
       <Button kind="primary" onClick={() => console.log("clicked!")}>
-        Hello World!
+        Привет, мир!
       </Button>
     </div>
   );
@@ -284,29 +284,29 @@ const App = () => {
 <MyComponent>Привет, мир!</MyComponent>
 ```
 
-Это корректный JSX-код, в котором значение `props.children` в `MyComponent` будет строкой `"Привет, мир!"`. HTML в таком коде «разэкранируется», поэтому JSX можно писать также как HTML:
+Это корректный JSX-код, в котором значение `props.children` в `MyComponent` будет строкой `"Привет, мир!"`. HTML не экранируется, поэтому JSX можно писать также как HTML:
 
 ```html
 <div>This is valid HTML &amp; JSX at the same time.</div>
 ```
 
-JSX удаляет пустые строки и пробелы в начале и в конце строки. Новая строка, примыкающая к тегу будет удалена. Новые строки между строковых литералов сжимаются в один пробел. Следующие три примера кода рендерят одинаковый результат:
+JSX удаляет пустые строки и пробелы в начале и конце строки. Новые строки, примыкающие к тегу будут удалены. Новые строки между строковых литералов сжимаются в один пробел. Следующие три примера кода рендерят одинаковый результат:
 
 ```js
-<div>Hello World</div>
+<div>Привет, мир</div>
 
 <div>
-  Hello World
+  Привет, мир
 </div>
 
 <div>
-  Hello
-  World
+  Привет,
+  мир
 </div>
 
 <div>
 
-  Hello World
+  Привет, мир
 </div>
 ```
 
@@ -325,10 +325,10 @@ JSX удаляет пустые строки и пробелы в начале 
 
 ```html
 <div>
-  Here is a list:
+  Ниже представлен список:
   <ul>
-    <li>Item 1</li>
-    <li>Item 2</li>
+    <li>Элемент 1</li>
+    <li>Элемент 2</li>
   </ul>
 </div>
 ```
@@ -339,10 +339,10 @@ JSX удаляет пустые строки и пробелы в начале 
 render() {
   // Не нужно оборачивать список элементов в дополнительный элемент!
   return [
-    // Не забудьте про keys :)
-    <li key="A">First item</li>,
-    <li key="B">Second item</li>,
-    <li key="C">Third item</li>,
+    // Не забудьте про ключи :)
+    <li key="A">Первый элемент</li>,
+    <li key="B">Второй элемент</li>,
+    <li key="C">Третий элемент</li>,
   ];
 }
 ```
@@ -365,7 +365,7 @@ function Item(props) {
 }
 
 function TodoList() {
-  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
+  const todos = ['закончить документацию', 'отправить пулреквест', 'снова напомнить Дэну про ревью'];
   return (
     <ul>
       {todos.map((message) => <Item key={message} message={message} />)}
@@ -374,17 +374,17 @@ function TodoList() {
 }
 ```
 
-JavaScript-выражения могут быть использованы вместе с другими типами дочерних компонентов. Это может работать как альтернатива шаблонным строкам:
+JavaScript-выражения могут быть использованы вместе с другими типами дочерних компонентов. Они могут рассматриваться как альтернатива шаблонным строкам:
 
 ```js{2}
 function Hello(props) {
-  return <div>Hello {props.addressee}!</div>;
+  return <div>Привет, {props.addressee}!</div>;
 }
 ```
 
 ### Функции как дочерние компоненты {#functions-as-children}
 
-Обычно JavaScript-выражения, вставленные в JSX, будут приведены к строке, React-элементу или списку из этих вещей. Тем не менее, `props.children` работает также как любой другой проп, так как в него можно передавать любые типы данных, а не только те, которые React знает как рендерить. К примеру, если у вас есть пользовательский компонент, вы могли бы передать функцию обратного вызова в `props.children`:
+Обычно JavaScript-выражения, вставленные в JSX, будут приведены к строке, React-элементу или списку из всего этого. Тем не менее, `props.children` работает так же, как и любой другой проп, поэтому в него можно передавать любые типы данных, а не только те, которые React знает как рендерить. К примеру, если у вас есть пользовательский компонент, можно было бы передать колбэк в `props.children`:
 
 ```js{4,13}
 // Вызывает колбэк numTimes раз для создания повторяющего компонента
@@ -399,15 +399,15 @@ function Repeat(props) {
 function ListOfTenThings() {
   return (
     <Repeat numTimes={10}>
-      {(index) => <div key={index}>This is item {index} in the list</div>}
+      {(index) => <div key={index}>Это элемент списка с ключом {index}</div>}
     </Repeat>
   );
 }
 ```
 
 Дочерние компоненты, передаваемые пользовательскому компоненту, могут быть чем угодно с тем условием, что компонент преобразует их во что-то, что React сможет понять и отрендерить. Следующий пример редко встречается, но им можно воспользоваться, если необходимо расширить возможности JSX.
 
-### Логические значения, null, и undefined игнорируются {#booleans-null-and-undefined-are-ignored}
+### Логические значения, null и undefined игнорируются {#booleans-null-and-undefined-are-ignored}
 
 Значения `false`, `null`, `undefined` и `true` -- валидные дочерние компоненты. Просто они не рендерятся. Эти JSX-выражения будут рендерить одно и то же:
 
@@ -458,6 +458,6 @@ function ListOfTenThings() {
 
 ```js{2}
 <div>
-  My JavaScript variable is {String(myVariable)}.
+  Моя переменная JavaScript - {String(myVariable)}.
 </div>
 ```