Translate JSX In Depth. Corrections 3.

Author: RenatRysaev

content/docs/jsx-in-depth.md

@@ -13,7 +13,7 @@ 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}>
@@ -47,13 +47,13 @@ React.createElement(
 )
 ```
 
-Если вы хотите проверить, как какой-нибудь определённый JSX-код компилируется в JavaScript, можете попробовать [онлайн-компилятор Babel](babel://jsx-simple-example).
+Если вы хотите проверить, как JSX-код компилируется в JavaScript, попробуйте [онлайн-компилятор Babel](babel://jsx-simple-example).
 
 ## Указание типа React-элемента {#specifying-the-react-element-type}
 
 Первая часть JSX тега определяет тип React-элемента.
 
-Слова в типах пишутся с большой буквы и указывают, что JSX-тег ссылается на React-компонент. Эти теги компилируются в прямые ссылки на именованные переменные, поэтому, если вы используете JSX-выражение `<Foo />`, то `Foo` должен быть в области видимости. 
+Типы, написанные с большой буквы, указывают, что JSX-тег ссылается на React-компонент. Эти теги компилируются в прямую ссылку на именованную переменную, поэтому, если вы используете JSX-выражение `<Foo />`, то `Foo` должен быть в области видимости.  
 
 ### React должен находиться в области видимости {#react-must-be-in-scope}
 
@@ -135,7 +135,7 @@ function HelloWorld() {
 
 ### Выбор типа во время исполнения {#choosing-the-type-at-runtime}
 
-Вы не можете использовать выражение как тип React-элемента. Если вы хотите использовать выражение для того, чтобы указать тип элемента, то сперва вам нужно присвоить его в переменную, начинающуюся с заглавной буквы. Часто это подходит, когда вам нужно отрендерить компонент в зависимости от ваших пропсов:
+В качестве типа React-элемента нельзя использовать выражение. Если вы хотите использовать выражение, чтобы указать тип элемента, присвойте его в переменную, начинающуюся с заглавной буквы. Это подходит для рендера компонентов в зависимости от ваших пропсов:
 
 ```js{10,11}
 import React from 'react';
@@ -176,13 +176,13 @@ function Story(props) {
 
 ### JavaScript-выражения как пропсы {#javascript-expressions-as-props}
 
-Вы можете передавать любые JavaScript-выражения как пропсы, заключая их в `{}`. К примеру, в этом JSX:
+Вы можете передавать любые JavaScript-выражения как пропсы, обернув их в `{}`. К примеру, в этом JSX:
 
 ```js
 <MyComponent foo={1 + 2 + 3 + 4} />
 ```
 
-Для `MyComponent`, значение `props.foo` будет `10`, потому что выражение `1 + 2 + 3 + 4` будет вычислено.
+Для `MyComponent` значение `props.foo` будет равно `10`, потому что выражение `1 + 2 + 3 + 4` будет вычислено.
 
 Оператор `if` и цикл `for` не являются выражениями в JavaScript, поэтому их нельзя непосредственно использовать в JSX. Вместо этого, вы можете окружить ими JSX-код. К примеру:
 
@@ -210,7 +210,7 @@ function NumberDescriber(props) {
 <MyComponent message={'hello world'} />
 ```
 
-Когда вы передаёте строковый литерал, его значение будет HTML-"разэкранировано". Поэтому эти два JSX выражения эквивалентны:
+Когда вы передаёте строковый литерал, все его возможные символы будут преобразованы в соответствующие HTML-сущности. Поэтому эти два JSX-выражения будут эквивалентны:
 
 ```js
 <MyComponent message="&lt;3" />
@@ -234,7 +234,7 @@ function NumberDescriber(props) {
 
 ### Атрибуты расширения {#spread-attributes}
 
-Если у вас уже есть `props` в виде объекта и выхотите передать их все в JSX, вы можете использовать оператор `...` («spread operator») для передачи всего объекта-пропсов целиком. Эти два компонента эквивалентны:
+Если у вас уже есть пропсы внутри объекта `props` и вы хотите передать их в JSX, вы можете использовать оператор расширения `...` («spread operator»). Эти два компонента эквивалентны:
 
 ```js{7}
 function App1() {
@@ -247,7 +247,7 @@ function App2() {
 }
 ```
 
-Вы так же можете выбрать конкретные пропсы, которые ваш компонент будет использовать, передавая все остальные пропсы с помощью spread operator.
+Вы так же можете выбрать конкретные пропсы, которые ваш компонент будет использовать, передавая все остальные пропсы с помощью оператора расширения.
 
 ```js{2}
 const Button = props => {
@@ -270,7 +270,7 @@ const App = () => {
 В приведённом выше примере, проп `kind` используется безопасно и *не* передаётся в элемент `<button>`, находящийся в DOM.
 Все остальные пропсы передаются с помощью объекта `...other`, что делает этот компонент очень гибким. Вы можете видеть, что он передаёт пропсы `onClick` и `children`.
 
-Атрибуты расширения могут быть полезны, но они так же легко позволяют передавать ненужные пропсы в компоненты или передавать невалидные HTML атрибуты в DOM. Мы рекомендуем использовать этот синтаксис с осторожностью.
+Атрибуты расширения могут быть полезны, однако, также они позволяют передать ненужные пропсы в компоненты или невалидные HTML-атрибуты в DOM. Мы рекомендуем использовать этот синтаксис с осторожностью.
 
 ## Дочерние компоненты в JSX {#children-in-jsx}
 
@@ -284,13 +284,13 @@ 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>
@@ -357,7 +357,7 @@ render() {
 <MyComponent>{'foo'}</MyComponent>
 ```
 
-Часто это бывает полезно при рендеринге списка JSX-выражений произвольной длины. Например, эта запись рендерит HTML-список:
+Часто это бывает полезно при рендере списка JSX-выражений произвольной длины. Например, эта запись рендерит HTML-список:
 
 ```js{2,9}
 function Item(props) {
@@ -425,7 +425,7 @@ function ListOfTenThings() {
 <div>{true}</div>
 ```
 
-Этот подход может быть полезным для рендеринга по условию. Вот пример, где JSX рендерит `<Header />`, если `showHeader` равняется `true`:
+Этот подход может быть полезным для рендера по условию. Вот пример, где JSX рендерит `<Header />`, если `showHeader` равняется `true`:
 
 ```js{2}
 <div>
@@ -434,7 +434,7 @@ function ListOfTenThings() {
 </div>
 ```
 
-Один нюанс заключается в том, что React будет рендерить [«ложные» (falsy) значения](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), такие как число `0`. Код ниже ведёт себя не так, как вы могли ожидать, так как `0` будет отображён, если массив `props.messages` пуст:
+Есть один нюанс в том, что React будет рендерить [«ложные» (falsy) значения](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), такие как число `0`. Код ниже ведёт себя не так, как вы могли ожидать, так как `0` будет отображён, если массив `props.messages` пуст:
 
 ```js{2}
 <div>