From 7624f1a9edd1a13217c2628ee21c06b7d22e5d9e Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Sun, 31 Mar 2019 22:05:17 +0300
Subject: [PATCH 01/22] translate JSX in Depth - Intro[1/4]

---
 content/docs/jsx-in-depth.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 3dcf2ac26..0a9308d56 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -1,6 +1,6 @@
 ---
 id: jsx-in-depth
-title: JSX In Depth
+title: Детальніше про JSX
 permalink: docs/jsx-in-depth.html
 redirect_from:
   - "docs/jsx-spread.html"
@@ -13,7 +13,7 @@ redirect_from:
   - "docs/jsx-in-depth-ko-KR.html"
 ---
 
-Fundamentally, JSX just provides syntactic sugar for the `React.createElement(component, props, ...children)` function. The JSX code:
+JSX - синтаксичний цукор над функцією `React.createElement(component, props, ...children)`. Наступний JSX-код:
 
 ```js
 <MyButton color="blue" shadowSize={2}>
@@ -21,7 +21,7 @@ Fundamentally, JSX just provides syntactic sugar for the `React.createElement(co
 </MyButton>
 ```
 
-compiles into:
+скомпіюється в:
 
 ```js
 React.createElement(
@@ -31,13 +31,13 @@ React.createElement(
 )
 ```
 
-You can also use the self-closing form of the tag if there are no children. So:
+Також ви можете використати самозакриваючийся тег, якщо відсутні дочірні елементи. Тому код:
 
 ```js
 <div className="sidebar" />
 ```
 
-compiles into:
+скомпілюється в:
 
 ```js
 React.createElement(
@@ -47,7 +47,7 @@ React.createElement(
 )
 ```
 
-If you want to test out how some specific JSX is converted into JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example).
+Якщо ви бажаєте перевірити як JSX-код компілюється в JavaScript, спробуйте [онлайн-компілятор Babel](babel://jsx-simple-example).
 
 ## Specifying The React Element Type {#specifying-the-react-element-type}
 
@@ -268,7 +268,7 @@ const App = () => {
 In the example above, the `kind` prop is safely consumed and *is not* passed on to the `<button>` element in the DOM.
 All other props are passed via the `...other` object making this component really flexible. You can see that it passes an `onClick` and `children` props.
 
-Spread attributes can be useful but they also make it easy to pass unnecessary props to components that don't care about them or to pass invalid HTML attributes to the DOM. We recommend using this syntax sparingly.  
+Spread attributes can be useful but they also make it easy to pass unnecessary props to components that don't care about them or to pass invalid HTML attributes to the DOM. We recommend using this syntax sparingly.
 
 ## Children in JSX {#children-in-jsx}
 

From 369f5add4984f932cce5ca1fe8acd5bcb4ac3c14 Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Wed, 3 Apr 2019 23:49:12 +0300
Subject: [PATCH 02/22] translate JSX in Depth - ALL[4/4]

---
 content/docs/jsx-in-depth.md | 170 +++++++++++++++++------------------
 1 file changed, 85 insertions(+), 85 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 0a9308d56..7141a6ec0 100644
--- a/content/docs/jsx-in-depth.md
+++ b/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}>
@@ -31,7 +31,7 @@ React.createElement(
 )
 ```
 
-Також ви можете використати самозакриваючийся тег, якщо відсутні дочірні елементи. Тому код:
+Також ви можете використати самозакриваючийся тег, якщо відсутні дочірні елементи. Тому вираз:
 
 ```js
 <div className="sidebar" />
@@ -47,93 +47,93 @@ React.createElement(
 )
 ```
 
-Якщо ви бажаєте перевірити як JSX-код компілюється в JavaScript, спробуйте [онлайн-компілятор Babel](babel://jsx-simple-example).
+Якщо ви бажаєте перевірити як JSX вираз компілюється в JavaScript, спробуйте [онлайн-компілятор Babel](babel://jsx-simple-example).
 
-## Specifying The React Element Type {#specifying-the-react-element-type}
+## Визначення типу React-елемента Specifying The React Element Type {#specifying-the-react-element-type}
 
-The first part of a JSX tag determines the type of the React element.
+Перша частина JSX тегу вказує на тип React-елемента.
 
-Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX `<Foo />` expression, `Foo` must be in scope.
+Типи, що починаються з великої літери, вказуються, що JSX тег посилається на React-компонент. Ці теги компілюються в пряме посилання на іменновану змінну, тому, якщо ви використовуєте JSX-вираз `<Foo />`, `Foo` має бути в області застосування.
 
-### React Must Be in Scope {#react-must-be-in-scope}
+### React має бути в області застосування {#react-must-be-in-scope}
 
-Since JSX compiles into calls to `React.createElement`, the `React` library must also always be in scope from your JSX code.
+Оскільки JSX компілюється у виклики функції `React.createElement`, бібліотека `React` також має бути в області застосування вашого JSX виразу.
 
-For example, both of the imports are necessary in this code, even though `React` and `CustomButton` are not directly referenced from JavaScript:
+Наприклад, обидва імпорти необхідні в цьому випадку, навіть враховуючи, що `React` та `CustomButton` не викликаються на пряму в JavaScript:
 
 ```js{1,2,5}
 import React from 'react';
 import CustomButton from './CustomButton';
 
 function WarningButton() {
-  // return React.createElement(CustomButton, {color: 'red'}, null);
+  // повертає React.createElement(CustomButton, {color: 'red'}, null);
   return <CustomButton color="red" />;
 }
 ```
 
-If you don't use a JavaScript bundler and loaded React from a `<script>` tag, it is already in scope as the `React` global.
+Якщо ви не користуєтеся JavaScript бандлерами та підключаєте React через тег `<script>`, то він вже доступний через глобальну змінну `React`.
 
-### Using Dot Notation for JSX Type {#using-dot-notation-for-jsx-type}
+### Використання запису через крапку {#using-dot-notation-for-jsx-type}
 
-You can also refer to a React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components. For example, if `MyComponents.DatePicker` is a component, you can use it directly from JSX with:
+Ви також можете посилатися на 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>;
   }
 }
 
 function BlueDatePicker() {
-  return <MyComponents.DatePicker color="blue" />;
+  return <MyComponents.DatePicker color="блакитний" />;
 }
 ```
 
-### User-Defined Components Must Be Capitalized {#user-defined-components-must-be-capitalized}
+### Назви типів компонентів користувача повинні починатися з великої літери {#user-defined-components-must-be-capitalized}
 
-When an element type starts with a lowercase letter, it refers to a built-in component like `<div>` or `<span>` and results in a string `'div'` or `'span'` passed to `React.createElement`. Types that start with a capital letter like `<Foo />` compile to `React.createElement(Foo)` and correspond to a component defined or imported in your JavaScript file.
+Коли тип елемента починається з маленької літери, то він посилається на вбудовані компоненти такі, як `<div>` чи `<span>`, та передається до `React.createElement` у вигляді рядка `'div'` чи `'span'`. Типи, що починаються з великої літери, наприклад, `<Foo />`, компілюються у `React.createElement(Foo)` та відповідають компоненту, що був визначений або імпортований у вашому JavaScript файлі.
 
-We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.
+Ми рекомендуємо використовувати назви компонентів, що починаються з великих літер. Якщо назва вашого компоненту починається з малої літери, визначне зміну, що починається з великої літери та посилається на ваш компонент, та використовуйте її в JSX.
 
-For example, this code will not run as expected:
+Наприклад, наступний вираз не буде працювати, як очікується:
 
 ```js{3,4,10,11}
 import React from 'react';
 
-// Wrong! This is a component and should have been capitalized:
+// Невірно! Цей компонент має починатися з великої літери:
 function hello(props) {
-  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
+  // Вірно! Використання <div> тут правомірне тому, що div - валідний HTML тег:
   return <div>Hello {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
+  // Невірно! React сприймає <hello /> як HTML тег тому, що він починається з маленької літери:
   return <hello toWhat="World" />;
 }
 ```
 
-To fix this, we will rename `hello` to `Hello` and use `<Hello />` when referring to it:
+Щоб виправити, ми переіменуємо `hello` у `Hello` та використаємо `<Hello />`, коли будемо посилатися на нього:
 
 ```js{3,4,10,11}
 import React from 'react';
 
-// Correct! This is a component and should be capitalized:
+// Вірно! Цей компонент має починатися з великої літери:
 function Hello(props) {
-  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
+  // Вірно! Використання <div> тут правомірне тому, що div - валідний HTML тег:
   return <div>Hello {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Correct! React knows <Hello /> is a component because it's capitalized.
+  // Вірно! React знає, що <Hello /> є компонентом, бо він починається з великої літери.
   return <Hello toWhat="World" />;
 }
 ```
 
-### Choosing the Type at Runtime {#choosing-the-type-at-runtime}
+### Вибір типу підчас виконання {#choosing-the-type-at-runtime}
 
-You cannot use a general expression as the React element type. If you do want to use a general expression to indicate the type of the element, just assign it to a capitalized variable first. This often comes up when you want to render a different component based on a prop:
+В якості типу React-елементу не можна використовувати вирази. Якщо ви все ж захочите скористатися виразом для визначення типу елементу, призначити його в змінну, що починається з великої літери. Зазвичай це потрібно, коли ви хочете застосувати різні компоненти в залежності від пропсів:
 
 ```js{10,11}
 import React from 'react';
@@ -145,12 +145,12 @@ const components = {
 };
 
 function Story(props) {
-  // Wrong! JSX type can't be an expression.
+  // Невірно! JSX-тип не може бути виразом.
   return <components[props.storyType] story={props.story} />;
 }
 ```
 
-To fix this, we will assign the type to a capitalized variable first:
+Щоб це виправити, ми визначемо зміну, що починається з великої літери, з цим типом:
 
 ```js{10-12}
 import React from 'react';
@@ -162,27 +162,27 @@ const components = {
 };
 
 function Story(props) {
-  // Correct! JSX type can be a capitalized variable.
+  // Вірно! JSX-тип може бути змінною, що починається з великої літери.
   const SpecificStory = components[props.storyType];
   return <SpecificStory story={props.story} />;
 }
 ```
 
-## Props in JSX {#props-in-jsx}
+## Пропси в JSX {#props-in-jsx}
 
-There are several different ways to specify props in JSX.
+Існує декілька шляхів для передачі пропсів в JSX.
 
-### JavaScript Expressions as Props {#javascript-expressions-as-props}
+### JavaScript вирази як пропси {#javascript-expressions-as-props}
 
-You can pass any JavaScript expression as a prop, by surrounding it with `{}`. For example, in this JSX:
+Ви можете передавати будь-які Javascript вирази як пропси, обгорнувши їх в `{}`. Наприклад, як в цьому JSX:
 
 ```js
 <MyComponent foo={1 + 2 + 3 + 4} />
 ```
 
-For `MyComponent`, the value of `props.foo` will be `10` because the expression `1 + 2 + 3 + 4` gets evaluated.
+Для `MyComponent` значення `props.foo` буде рівне `10` тому, що вираз `1 + 2 + 3 + 4` буде обчислений.
 
-`if` statements and `for` loops are not expressions in JavaScript, so they can't be used in JSX directly. Instead, you can put these in the surrounding code. For example:
+Оператор `if` та цикл `for` не є виразами в JavaScript, тому їх не можна використати безпосередньо в JSX. Натомість ви можете застосувати їх в . Наприклад: Instead, you can put these in the surrounding code. For example:
 
 ```js{3-7}
 function NumberDescriber(props) {
@@ -196,11 +196,11 @@ function NumberDescriber(props) {
 }
 ```
 
-You can learn more about [conditional rendering](/docs/conditional-rendering.html) and [loops](/docs/lists-and-keys.html) in the corresponding sections.
+Ви можете дізнатися більше про [умовний рендеринг](/docs/conditional-rendering.html) та [цикли](/docs/lists-and-keys.html) у відповідниx розділах.
 
-### String Literals {#string-literals}
+### Рядкові літерали {#string-literals}
 
-You can pass a string literal as a prop. These two JSX expressions are equivalent:
+Ви можете передати рядковий літерал як пропс. Ці два вирази еквівалентні:
 
 ```js
 <MyComponent message="hello world" />
@@ -208,7 +208,7 @@ You can pass a string literal as a prop. These two JSX expressions are equivalen
 <MyComponent message={'hello world'} />
 ```
 
-When you pass a string literal, its value is HTML-unescaped. So these two JSX expressions are equivalent:
+Коли ви передаєте рядковий літерал, всі його символи будуть екрановані у відповідності до HTML-сутностей. Тому наступні два записи еквівалентні:
 
 ```js
 <MyComponent message="&lt;3" />
@@ -216,11 +216,11 @@ When you pass a string literal, its value is HTML-unescaped. So these two JSX ex
 <MyComponent message={'<3'} />
 ```
 
-This behavior is usually not relevant. It's only mentioned here for completeness.
+Зазвичай така поведінка немає вас турбувати. Вона описана для повноти інформації.
 
-### Props Default to "True" {#props-default-to-true}
+### Пропси за замовчуванням встановлюють "true" {#props-default-to-true}
 
-If you pass no value for a prop, it defaults to `true`. These two JSX expressions are equivalent:
+Якщо ви не передасте жодного значення пропсу, то за замовчуванням його значення дорівнюватиме `true`. Ці два записи еквівалентні:
 
 ```js
 <MyTextBox autocomplete />
@@ -228,11 +228,11 @@ If you pass no value for a prop, it defaults to `true`. These two JSX expression
 <MyTextBox autocomplete={true} />
 ```
 
-In general, we don't recommend using this because it can be confused with the [ES6 object shorthand](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) `{foo}` which is short for `{foo: foo}` rather than `{foo: true}`. This behavior is just there so that it matches the behavior of HTML.
+Здебільшого, ми не рекомендуємо робити так тому, що цей запис може бути сплутаний зі [скороченням імен властивостей з ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) Наприклад, `{foo}` — короткий запис `{foo: foo}`, а не `{foo: true}`. Ця поведінка існує тому, що відповідає поведінці HTML.
 
-### Spread Attributes {#spread-attributes}
+### Атрибути розширення {#spread-attributes}
 
-If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" operator to pass the whole props object. These two components are equivalent:
+Якщо ви вже маєте визначені пропси в об'єкті `props` та хочете передати їх в JSX, то ви можете скористатися оператором розширення `...`, щоб це зробити. Ці два компоненти еквівалентні:
 
 ```js{7}
 function App1() {
@@ -245,7 +245,7 @@ function App2() {
 }
 ```
 
-You can also pick specific props that your component will consume while passing all other props using the spread operator.
+Ви також можете вибрати визначені пропси, що будуть використовуватися вашим компонентом, в той час як інші пропси передати за допомогою оператора розширення.
 
 ```js{2}
 const Button = props => {
@@ -265,30 +265,30 @@ const App = () => {
 };
 ```
 
-In the example above, the `kind` prop is safely consumed and *is not* passed on to the `<button>` element in the DOM.
-All other props are passed via the `...other` object making this component really flexible. You can see that it passes an `onClick` and `children` props.
+В попередньому прикладі, проп `kind` використовується безпечно та *не* передається в елемент `<button>`, що знаходиться в DOM.
+Всі інші пропси передаються за допомогою об'єкту `...other`, що робить компонент справді гнучким. Це можна помітити на пракладі пропсів `onClick` та `children`, що передаються.
 
-Spread attributes can be useful but they also make it easy to pass unnecessary props to components that don't care about them or to pass invalid HTML attributes to the DOM. We recommend using this syntax sparingly.
+Оператори розширення можу бути корисним, проте вони дозволяють передавати непотрібні пропси в комопненти або невалідні HTML атрибути в DOM. Ми рекомендуємо використовувати цей синтаксис з обережністю.
 
-## Children in JSX {#children-in-jsx}
+## Дочірні компоненти в JSX {#children-in-jsx}
 
-In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop: `props.children`. There are several different ways to pass children:
+У JSX-виразах контент, що містяться між відкриваючим та закриваючим тегами, передається через спеціальний проп `props.children`. Існує декілька варіантів передачі дочірніх компонентів:
 
-### String Literals {#string-literals-1}
+### Рядкові літерали {#string-literals-1}
 
-You can put a string between the opening and closing tags and `props.children` will just be that string. This is useful for many of the built-in HTML elements. For example:
+Ви можете розмістити рядок між відкриваючим та закриваючими тегами, тоді `props.children` дорівнюватиме цьому рядку. Це корисно при створенні вбудованих HTML-елементів. Наприклад:
 
 ```js
 <MyComponent>Hello world!</MyComponent>
 ```
 
-This is valid JSX, and `props.children` in `MyComponent` will simply be the string `"Hello world!"`. HTML is unescaped, so you can generally write JSX just like you would write HTML in this way:
+Це приклад валідного JSX, де значення `props.children` у `MyComponent` дорівнюватиме рядку `"Hello world!"`. HTML не екранується, тому ви можете писати JSX так наче ви пишете HTML:
 
 ```html
 <div>This is valid HTML &amp; JSX at the same time.</div>
 ```
 
-JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space. So these all render to the same thing:
+JSX прибирає пусті рядки та пробіли на початку та в кінці рядка. Переходи на нові рядки, що прилягають до тегів, видаляються; переходи на нові рядки, що знаходяться між рядковими літералими стискаються до одного пробілу. Таким чином, наступні вирази повернуть однаковий результат:
 
 ```js
 <div>Hello World</div>
@@ -308,9 +308,9 @@ JSX removes whitespace at the beginning and ending of a line. It also removes bl
 </div>
 ```
 
-### JSX Children {#jsx-children}
+### Дочірні JSX-компоненти {#jsx-children}
 
-You can provide more JSX elements as the children. This is useful for displaying nested components:
+Для відображення вкладених компонентів, можна передавати декілька JSX-компонентів:
 
 ```js
 <MyContainer>
@@ -319,35 +319,35 @@ You can provide more JSX elements as the children. This is useful for displaying
 </MyContainer>
 ```
 
-You can mix together different types of children, so you can use string literals together with JSX children. This is another way in which JSX is like HTML, so that this is both valid JSX and valid HTML:
+Ви можете міксувати різні типи нащадків разом, таким чином, також можна використовувати рядкові літерали разом з JSX-компонентами. Це ще один приклад, того як JSX схожий на HTML, до того ж наступний код валідний як для JSX, так і для HTML:
 
 ```html
 <div>
-  Here is a list:
+  Наступним йде список:
   <ul>
-    <li>Item 1</li>
-    <li>Item 2</li>
+    <li>Елемент 1</li>
+    <li>Елемент 2</li>
   </ul>
 </div>
 ```
 
-A React component can also return an array of elements:
+Також React-компонент може повертати масив елементів:
 
 ```js
 render() {
-  // No need to wrap list items in an extra element!
+  // Немає необхідності обгортати список елементів в додатковий елемент!
   return [
-    // Don't forget the 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>,
   ];
 }
 ```
 
-### JavaScript Expressions as Children {#javascript-expressions-as-children}
+### JavaScript-вирази як дочірні компоненти {#javascript-expressions-as-children}
 
-You can pass any JavaScript expression as children, by enclosing it within `{}`. For example, these expressions are equivalent:
+Ви можете передати будь-який JavaScript-вираз як дочірній компонент, обгорнувши його в `{}`. Наприклад, ці вирази еквівалентні:
 
 ```js
 <MyComponent>foo</MyComponent>
@@ -355,7 +355,7 @@ You can pass any JavaScript expression as children, by enclosing it within `{}`.
 <MyComponent>{'foo'}</MyComponent>
 ```
 
-This is often useful for rendering a list of JSX expressions of arbitrary length. For example, this renders an HTML list:
+Часто це буває корисним для рендерингу списку JSX-виразів довільної довжини. Наприклад, цей код рендерить HTML-список:
 
 ```js{2,9}
 function Item(props) {
@@ -363,7 +363,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} />)}
@@ -372,7 +372,7 @@ function TodoList() {
 }
 ```
 
-JavaScript expressions can be mixed with other types of children. This is often useful in lieu of string templates:
+JavaScript-вирази можуть використовуватися разом з іншими типами дочірніх компонентів. Їх також буває корисно використовувати замість шаблонних рядків:
 
 ```js{2}
 function Hello(props) {
@@ -380,12 +380,12 @@ function Hello(props) {
 }
 ```
 
-### Functions as Children {#functions-as-children}
+### Функції як дочірні компоненти {#functions-as-children}
 
-Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. However, `props.children` works just like any other prop in that it can pass any sort of data, not just the sorts that React knows how to render. For example, if you have a custom component, you could have it take a callback as `props.children`:
+За звичай, JavaScript-вирази, що прописані в JSX, будут приведені до рядка, React-елементу, або списку з попередніх. Проте `props.children` працює так само, як і будь-який інший проп, тому він моде передавати будь-який тип даних, а не тільки ті, що React знає як рендерити. Наприклад, якщо ви маєте компонент користувача, ви можете передати функцію зворотнього вигляду у `props.children`:
 
 ```js{4,13}
-// Calls the children callback numTimes to produce a repeated component
+// Викликати numTimes разів дочірню функцію зворотнього виклику для створення повторюваних компонентів
 function Repeat(props) {
   let items = [];
   for (let i = 0; i < props.numTimes; i++) {
@@ -397,17 +397,17 @@ 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>
   );
 }
 ```
 
-Children passed to a custom component can be anything, as long as that component transforms them into something React can understand before rendering. This usage is not common, but it works if you want to stretch what JSX is capable of.
+Дочірні компоненти, що передаються в компонент користувача, можуть бути будь-чим при умові, що компонент перетворить їх у щось, що React зможе зрозуміти та відрендерити. Дана техніка непоширена, але нею можна скористатися, якщо захочете розширити можливості JSX.
 
-### Booleans, Null, and Undefined Are Ignored {#booleans-null-and-undefined-are-ignored}
+### Логічні значення, null та undefined ігноруються {#booleans-null-and-undefined-are-ignored}
 
-`false`, `null`, `undefined`, and `true` are valid children. They simply don't render. These JSX expressions will all render to the same thing:
+`false`, `null`, `undefined`, та `true` — валідні дочірні компоненти. Вони просто не рендеряться. Ці JSX-вирази повернуть однаковий результат:
 
 ```js
 <div />
@@ -423,7 +423,7 @@ Children passed to a custom component can be anything, as long as that component
 <div>{true}</div>
 ```
 
-This can be useful to conditionally render React elements. This JSX only renders a `<Header />` if `showHeader` is `true`:
+Це може бути корисним при умовному рендерингу React елементів. Наступний JSX-вираз відрендерить `<Header />` при умові, що `showHeader` дорівнює `true`:
 
 ```js{2}
 <div>
@@ -432,7 +432,7 @@ This can be useful to conditionally render React elements. This JSX only renders
 </div>
 ```
 
-One caveat is that some ["falsy" values](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), such as the `0` number, are still rendered by React. For example, this code will not behave as you might expect because `0` will be printed when `props.messages` is an empty array:
+Існує одне зауваження, що React всеодно рендерить ["неправдиві"(falsy) значення](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), такі як число `0`. Наприклад, наступний код відпрацює не так, як очікується, тому, що `0` буде виведено, коли `props.messages` буде пустим масивом:
 
 ```js{2}
 <div>
@@ -442,7 +442,7 @@ One caveat is that some ["falsy" values](https://developer.mozilla.org/en-US/doc
 </div>
 ```
 
-To fix this, make sure that the expression before `&&` is always boolean:
+Щоб це виправити, впевніться, що вираз перед оператором `&&` — boolean:
 
 ```js{2}
 <div>
@@ -452,7 +452,7 @@ To fix this, make sure that the expression before `&&` is always boolean:
 </div>
 ```
 
-Conversely, if you want a value like `false`, `true`, `null`, or `undefined` to appear in the output, you have to [convert it to a string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion) first:
+ Навпаки, якщо ви хочете, щоб значення `false`, `true`, `null`, чи `undefined` потрапили до результату, вам необхідно попередньо [перетворити їх у рядок](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion):
 
 ```js{2}
 <div>

From 5b57fc3657203e000364cb90c526696f864be0e6 Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Thu, 4 Apr 2019 10:13:01 +0300
Subject: [PATCH 03/22] reread and fixes

---
 content/docs/jsx-in-depth.md | 90 ++++++++++++++++++------------------
 1 file changed, 45 insertions(+), 45 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 7141a6ec0..68d10f226 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -1,6 +1,6 @@
 ---
 id: jsx-in-depth
-title: Детальніше про JSX
+title: JSX в деталях
 permalink: docs/jsx-in-depth.html
 redirect_from:
   - "docs/jsx-spread.html"
@@ -17,17 +17,17 @@ JSX - синтаксичний цукор над функцією `React.createE
 
 ```js
 <MyButton color="blue" shadowSize={2}>
-  Click Me
+  Натисти мене
 </MyButton>
 ```
 
-скомпіюється в:
+скомпіюється у:
 
 ```js
 React.createElement(
   MyButton,
   {color: 'blue', shadowSize: 2},
-  'Click Me'
+  'Натисни мене'
 )
 ```
 
@@ -47,17 +47,17 @@ React.createElement(
 )
 ```
 
-Якщо ви бажаєте перевірити як JSX вираз компілюється в JavaScript, спробуйте [онлайн-компілятор Babel](babel://jsx-simple-example).
+Якщо ви бажаєте перевірити як JSX-вираз компілюється в JavaScript, спробуйте [онлайн-компілятор Babel](babel://jsx-simple-example).
 
-## Визначення типу React-елемента Specifying The React Element Type {#specifying-the-react-element-type}
+## Визначення типу React-елемента {#specifying-the-react-element-type}
 
 Перша частина JSX тегу вказує на тип React-елемента.
 
-Типи, що починаються з великої літери, вказуються, що JSX тег посилається на React-компонент. Ці теги компілюються в пряме посилання на іменновану змінну, тому, якщо ви використовуєте JSX-вираз `<Foo />`, `Foo` має бути в області застосування.
+Типи, що починаються з великої літери, вказуються, що JSX-тег посилається на React-компонент. Ці теги компілюються в пряме посилання на іменновану змінну, тому, якщо ви використовуєте JSX-вираз `<Foo />`, `Foo` має бути в області застосування.
 
 ### React має бути в області застосування {#react-must-be-in-scope}
 
-Оскільки JSX компілюється у виклики функції `React.createElement`, бібліотека `React` також має бути в області застосування вашого JSX виразу.
+Оскільки JSX компілюється у виклики функції `React.createElement`, бібліотека `React` також має бути в області застосування вашого JSX-виразу.
 
 Наприклад, обидва імпорти необхідні в цьому випадку, навіть враховуючи, що `React` та `CustomButton` не викликаються на пряму в JavaScript:
 
@@ -105,12 +105,12 @@ import React from 'react';
 // Невірно! Цей компонент має починатися з великої літери:
 function hello(props) {
   // Вірно! Використання <div> тут правомірне тому, що 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="світ" />;
 }
 ```
 
@@ -122,18 +122,18 @@ import React from 'react';
 // Вірно! Цей компонент має починатися з великої літери:
 function Hello(props) {
   // Вірно! Використання <div> тут правомірне тому, що div - валідний HTML тег:
-  return <div>Hello {props.toWhat}</div>;
+  return <div>Привіт {props.toWhat}</div>;
 }
 
 function HelloWorld() {
   // Вірно! React знає, що <Hello /> є компонентом, бо він починається з великої літери.
-  return <Hello toWhat="World" />;
+  return <Hello toWhat="світ" />;
 }
 ```
 
 ### Вибір типу підчас виконання {#choosing-the-type-at-runtime}
 
-В якості типу React-елементу не можна використовувати вирази. Якщо ви все ж захочите скористатися виразом для визначення типу елементу, призначити його в змінну, що починається з великої літери. Зазвичай це потрібно, коли ви хочете застосувати різні компоненти в залежності від пропсів:
+В якості типу React-елементу не можна використовувати вирази. Якщо ви все ж захочите скористатися виразом для визначення типу елемента, призначте його в змінну, що починається з великої літери. Зазвичай це потрібно, коли ви хочете застосувати різні компоненти в залежності від пропсів:
 
 ```js{10,11}
 import React from 'react';
@@ -174,7 +174,7 @@ function Story(props) {
 
 ### JavaScript вирази як пропси {#javascript-expressions-as-props}
 
-Ви можете передавати будь-які Javascript вирази як пропси, обгорнувши їх в `{}`. Наприклад, як в цьому JSX:
+Ви можете передавати будь-які Javascript вирази як пропси, обгорнувши їх у фігурні дужки `{}`. Наприклад, як в цьому JSX:
 
 ```js
 <MyComponent foo={1 + 2 + 3 + 4} />
@@ -182,17 +182,17 @@ function Story(props) {
 
 Для `MyComponent` значення `props.foo` буде рівне `10` тому, що вираз `1 + 2 + 3 + 4` буде обчислений.
 
-Оператор `if` та цикл `for` не є виразами в JavaScript, тому їх не можна використати безпосередньо в JSX. Натомість ви можете застосувати їх в . Наприклад: Instead, you can put these in the surrounding code. For example:
+Оператор `if` та цикл `for` не є виразами в JavaScript, тому їх не можна використати безпосередньо в JSX. Натомість ви можете застосувати їх в коді, що передує використання їх результату. Наприклад:
 
 ```js{3-7}
 function NumberDescriber(props) {
   let description;
   if (props.number % 2 == 0) {
-    description = <strong>even</strong>;
+    description = <strong>парне</strong>;
   } else {
-    description = <i>odd</i>;
+    description = <i>непарне</i>;
   }
-  return <div>{props.number} is an {description} number</div>;
+  return <div>{props.number} - {description} число</div>;
 }
 ```
 
@@ -218,7 +218,7 @@ function NumberDescriber(props) {
 
 Зазвичай така поведінка немає вас турбувати. Вона описана для повноти інформації.
 
-### Пропси за замовчуванням встановлюють "true" {#props-default-to-true}
+### Пропси за замовчуванням встановлені в "true" {#props-default-to-true}
 
 Якщо ви не передасте жодного значення пропсу, то за замовчуванням його значення дорівнюватиме `true`. Ці два записи еквівалентні:
 
@@ -230,22 +230,22 @@ function NumberDescriber(props) {
 
 Здебільшого, ми не рекомендуємо робити так тому, що цей запис може бути сплутаний зі [скороченням імен властивостей з ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) Наприклад, `{foo}` — короткий запис `{foo: foo}`, а не `{foo: true}`. Ця поведінка існує тому, що відповідає поведінці HTML.
 
-### Атрибути розширення {#spread-attributes}
+### Атрибути розпакування {#spread-attributes}
 
-Якщо ви вже маєте визначені пропси в об'єкті `props` та хочете передати їх в JSX, то ви можете скористатися оператором розширення `...`, щоб це зробити. Ці два компоненти еквівалентні:
+Якщо ви вже маєте визначені пропси в об'єкті `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} />;
 }
 ```
 
-Ви також можете вибрати визначені пропси, що будуть використовуватися вашим компонентом, в той час як інші пропси передати за допомогою оператора розширення.
+Ви також можете вибрати визначені пропси, що будуть використовуватися вашим компонентом, в той час як інші пропси передати за допомогою оператора розпакування.
 
 ```js{2}
 const Button = props => {
@@ -257,8 +257,8 @@ const Button = props => {
 const App = () => {
   return (
     <div>
-      <Button kind="primary" onClick={() => console.log("clicked!")}>
-        Hello World!
+      <Button kind="primary" onClick={() => console.log("натиснуто!")}>
+        Привіт світ!
       </Button>
     </div>
   );
@@ -266,20 +266,20 @@ const App = () => {
 ```
 
 В попередньому прикладі, проп `kind` використовується безпечно та *не* передається в елемент `<button>`, що знаходиться в DOM.
-Всі інші пропси передаються за допомогою об'єкту `...other`, що робить компонент справді гнучким. Це можна помітити на пракладі пропсів `onClick` та `children`, що передаються.
+Всі інші пропси передаються за допомогою об'єкту `...other`, що робить компонент справді гнучким. Це можна помітити на пракладі пропсів `onClick` та `children`, що передаються в `<button>`.
 
-Оператори розширення можу бути корисним, проте вони дозволяють передавати непотрібні пропси в комопненти або невалідні HTML атрибути в DOM. Ми рекомендуємо використовувати цей синтаксис з обережністю.
+Оператори розпакування можуть бути корисним, проте вони дозволяють передавати непотрібні пропси в комопненти або невалідні HTML атрибути в DOM. Ми рекомендуємо використовувати цей синтаксис з обережністю.
 
 ## Дочірні компоненти в JSX {#children-in-jsx}
 
-У JSX-виразах контент, що містяться між відкриваючим та закриваючим тегами, передається через спеціальний проп `props.children`. Існує декілька варіантів передачі дочірніх компонентів:
+У JSX-виразах контент, що містяться між відкриваючим та закриваючим тегами, передається через спеціальний проп `props.children`. Існує декілька варіантів передачі дочірніх елементів:
 
 ### Рядкові літерали {#string-literals-1}
 
 Ви можете розмістити рядок між відкриваючим та закриваючими тегами, тоді `props.children` дорівнюватиме цьому рядку. Це корисно при створенні вбудованих HTML-елементів. Наприклад:
 
 ```js
-<MyComponent>Hello world!</MyComponent>
+<MyComponent>Привіт світ!</MyComponent>
 ```
 
 Це приклад валідного JSX, де значення `props.children` у `MyComponent` дорівнюватиме рядку `"Hello world!"`. HTML не екранується, тому ви можете писати JSX так наче ви пишете HTML:
@@ -288,7 +288,7 @@ const App = () => {
 <div>This is valid HTML &amp; JSX at the same time.</div>
 ```
 
-JSX прибирає пусті рядки та пробіли на початку та в кінці рядка. Переходи на нові рядки, що прилягають до тегів, видаляються; переходи на нові рядки, що знаходяться між рядковими літералими стискаються до одного пробілу. Таким чином, наступні вирази повернуть однаковий результат:
+JSX прибирає пусті рядки та пробіли на початку та в кінці рядка. Переходи на нові рядки, що прилягають до тегів, видаляються; переходи на нові рядки, що знаходяться між рядковими літералими стискаються до одного пробілу. Таким чином наступні вирази повернуть однаковий результат:
 
 ```js
 <div>Hello World</div>
@@ -308,9 +308,9 @@ JSX прибирає пусті рядки та пробіли на початк
 </div>
 ```
 
-### Дочірні JSX-компоненти {#jsx-children}
+### Дочірні JSX-елементи {#jsx-children}
 
-Для відображення вкладених компонентів, можна передавати декілька JSX-компонентів:
+Для відображення вкладених компонентів, можна передавати декілька JSX-елементів:
 
 ```js
 <MyContainer>
@@ -319,7 +319,7 @@ JSX прибирає пусті рядки та пробіли на початк
 </MyContainer>
 ```
 
-Ви можете міксувати різні типи нащадків разом, таким чином, також можна використовувати рядкові літерали разом з JSX-компонентами. Це ще один приклад, того як JSX схожий на HTML, до того ж наступний код валідний як для JSX, так і для HTML:
+Ви можете міксувати різні типи нащадків разом, таким чином, також можна використовувати рядкові літерали разом з JSX-елементами. Це ще один приклад, того як JSX схожий на HTML, до того ж наступний код валідний як для JSX, так і для HTML:
 
 ```html
 <div>
@@ -345,9 +345,9 @@ render() {
 }
 ```
 
-### JavaScript-вирази як дочірні компоненти {#javascript-expressions-as-children}
+### JavaScript вирази як дочірні елементи {#javascript-expressions-as-children}
 
-Ви можете передати будь-який JavaScript-вираз як дочірній компонент, обгорнувши його в `{}`. Наприклад, ці вирази еквівалентні:
+Ви можете передати будь-який JavaScript вираз як дочірній елемент, записавши його у фігурних дужках `{}`. Наприклад, ці вирази еквівалентні:
 
 ```js
 <MyComponent>foo</MyComponent>
@@ -372,7 +372,7 @@ function TodoList() {
 }
 ```
 
-JavaScript-вирази можуть використовуватися разом з іншими типами дочірніх компонентів. Їх також буває корисно використовувати замість шаблонних рядків:
+JavaScript вирази можуть використовуватися разом з іншими типами дочірніх елементів. Їх також буває корисно використовувати замість шаблонних рядків:
 
 ```js{2}
 function Hello(props) {
@@ -380,9 +380,9 @@ function Hello(props) {
 }
 ```
 
-### Функції як дочірні компоненти {#functions-as-children}
+### Функції як дочірні елементи {#functions-as-children}
 
-За звичай, JavaScript-вирази, що прописані в JSX, будут приведені до рядка, React-елементу, або списку з попередніх. Проте `props.children` працює так само, як і будь-який інший проп, тому він моде передавати будь-який тип даних, а не тільки ті, що React знає як рендерити. Наприклад, якщо ви маєте компонент користувача, ви можете передати функцію зворотнього вигляду у `props.children`:
+За звичай, JavaScript вирази, що прописані в JSX, будут приведені до рядка, React-елементу, або списку з попередніх. Проте `props.children` працює так само, як і будь-який інший проп, тому він може передавати будь-який тип даних, а не тільки ті, що React знає як рендерити. Наприклад, якщо ви маєте компонент користувача, ви можете передати функцію зворотнього вигляду у `props.children`:
 
 ```js{4,13}
 // Викликати numTimes разів дочірню функцію зворотнього виклику для створення повторюваних компонентів
@@ -403,11 +403,11 @@ function ListOfTenThings() {
 }
 ```
 
-Дочірні компоненти, що передаються в компонент користувача, можуть бути будь-чим при умові, що компонент перетворить їх у щось, що React зможе зрозуміти та відрендерити. Дана техніка непоширена, але нею можна скористатися, якщо захочете розширити можливості JSX.
+Дочірні елементи, що передаються в компонент користувача, можуть бути будь-чим при умові, що компонент перетворить їх у щось, що React зможе зрозуміти та відрендерити. Дана техніка непоширена, але нею можна скористатися, якщо захочете розширити можливості JSX.
 
 ### Логічні значення, null та undefined ігноруються {#booleans-null-and-undefined-are-ignored}
 
-`false`, `null`, `undefined`, та `true` — валідні дочірні компоненти. Вони просто не рендеряться. Ці JSX-вирази повернуть однаковий результат:
+`false`, `null`, `undefined`, та `true` — валідні дочірні елементи. Вони просто не рендеряться. Ці JSX-вирази повернуть однаковий результат:
 
 ```js
 <div />
@@ -423,7 +423,7 @@ function ListOfTenThings() {
 <div>{true}</div>
 ```
 
-Це може бути корисним при умовному рендерингу React елементів. Наступний JSX-вираз відрендерить `<Header />` при умові, що `showHeader` дорівнює `true`:
+Це може бути корисним при умовному рендерингу React-елементів. Наступний JSX-вираз відрендерить `<Header />` при умові, що `showHeader` дорівнює `true`:
 
 ```js{2}
 <div>
@@ -442,7 +442,7 @@ function ListOfTenThings() {
 </div>
 ```
 
-Щоб це виправити, впевніться, що вираз перед оператором `&&` — boolean:
+Щоб це виправити, будьте певні, що вираз перед оператором `&&` — boolean:
 
 ```js{2}
 <div>
@@ -452,10 +452,10 @@ function ListOfTenThings() {
 </div>
 ```
 
- Навпаки, якщо ви хочете, щоб значення `false`, `true`, `null`, чи `undefined` потрапили до результату, вам необхідно попередньо [перетворити їх у рядок](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion):
+ Якщо ви хочете, щоб значення `false`, `true`, `null`, чи `undefined` навпаки потрапили до результату, вам необхідно попередньо [перетворити їх у рядок](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion):
 
 ```js{2}
 <div>
-  My JavaScript variable is {String(myVariable)}.
+  Моя Javascript змінна - {String(myVariable)}.
 </div>
 ```

From 028571f90604f43d73a0e7a2277e2f8d88ce40d6 Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Thu, 4 Apr 2019 16:16:52 +0300
Subject: [PATCH 04/22] fix typings

---
 content/docs/jsx-in-depth.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 68d10f226..c794f8a2b 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -21,7 +21,7 @@ JSX - синтаксичний цукор над функцією `React.createE
 </MyButton>
 ```
 
-скомпіюється у:
+скомпілюється у:
 
 ```js
 React.createElement(
@@ -31,7 +31,7 @@ React.createElement(
 )
 ```
 
-Також ви можете використати самозакриваючийся тег, якщо відсутні дочірні елементи. Тому вираз:
+Також ви можете використати самозакриваючийся тег, якщо відсутні дочірні елементи. Таким чином вираз:
 
 ```js
 <div className="sidebar" />

From 7c8034f4186bc0f0bcfa2b5ee185cac3edd56f81 Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Thu, 4 Apr 2019 22:49:51 +0300
Subject: [PATCH 05/22] syntax fix

---
 content/docs/jsx-in-depth.md | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index c794f8a2b..6d7ae7ffc 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -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}
 
@@ -95,7 +95,7 @@ function BlueDatePicker() {
 
 Коли тип елемента починається з маленької літери, то він посилається на вбудовані компоненти такі, як `<div>` чи `<span>`, та передається до `React.createElement` у вигляді рядка `'div'` чи `'span'`. Типи, що починаються з великої літери, наприклад, `<Foo />`, компілюються у `React.createElement(Foo)` та відповідають компоненту, що був визначений або імпортований у вашому JavaScript файлі.
 
-Ми рекомендуємо використовувати назви компонентів, що починаються з великих літер. Якщо назва вашого компоненту починається з малої літери, визначне зміну, що починається з великої літери та посилається на ваш компонент, та використовуйте її в JSX.
+Ми рекомендуємо використовувати назви компонентів, що починаються з великих літер. Якщо назва вашого компоненту починається з малої літери, визначте зміну, що починається з великої літери та посилається на ваш компонент, та використовуйте її в JSX.
 
 Наприклад, наступний вираз не буде працювати, як очікується:
 
@@ -114,7 +114,7 @@ function HelloWorld() {
 }
 ```
 
-Щоб виправити, ми переіменуємо `hello` у `Hello` та використаємо `<Hello />`, коли будемо посилатися на нього:
+Щоб виправити, ми перейменуємо `hello` у `Hello` та використаємо `<Hello />`, коли будемо посилатися на нього:
 
 ```js{3,4,10,11}
 import React from 'react';
@@ -131,9 +131,9 @@ function HelloWorld() {
 }
 ```
 
-### Вибір типу підчас виконання {#choosing-the-type-at-runtime}
+### Вибір типу під час виконання {#choosing-the-type-at-runtime}
 
-В якості типу React-елементу не можна використовувати вирази. Якщо ви все ж захочите скористатися виразом для визначення типу елемента, призначте його в змінну, що починається з великої літери. Зазвичай це потрібно, коли ви хочете застосувати різні компоненти в залежності від пропсів:
+В якості типу React-елементу не можна використовувати вирази. Якщо ви все ж захочете скористатися виразом для визначення типу елемента, призначте його в змінну, що починається з великої літери. Зазвичай це потрібно, якщо ви хочете застосувати різні компоненти в залежності від пропсів:
 
 ```js{10,11}
 import React from 'react';
@@ -150,7 +150,7 @@ function Story(props) {
 }
 ```
 
-Щоб це виправити, ми визначемо зміну, що починається з великої літери, з цим типом:
+Щоб це виправити, ми маємо спершу визначемо змінну, що починається з великої літери, зі значенням цільвого компоненту:
 
 ```js{10-12}
 import React from 'react';
@@ -228,7 +228,7 @@ function NumberDescriber(props) {
 <MyTextBox autocomplete={true} />
 ```
 
-Здебільшого, ми не рекомендуємо робити так тому, що цей запис може бути сплутаний зі [скороченням імен властивостей з ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) Наприклад, `{foo}` — короткий запис `{foo: foo}`, а не `{foo: true}`. Ця поведінка існує тому, що відповідає поведінці HTML.
+Здебільшого, ми не рекомендуємо робити так, тому що цей запис може бути сплутаний зі [скороченням імен властивостей з ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) Наприклад, `{foo}` — короткий запис `{foo: foo}`, а не `{foo: true}`. Ця поведінка існує, тому що відповідає поведінці HTML.
 
 ### Атрибути розпакування {#spread-attributes}
 
@@ -245,7 +245,7 @@ function App2() {
 }
 ```
 
-Ви також можете вибрати визначені пропси, що будуть використовуватися вашим компонентом, в той час як інші пропси передати за допомогою оператора розпакування.
+Ви також можете вибрати визначені пропси, що будуть використовуватися вашим компонентом, в той час як інші пропси можна передати за допомогою оператора розпакування.
 
 ```js{2}
 const Button = props => {
@@ -266,13 +266,13 @@ const App = () => {
 ```
 
 В попередньому прикладі, проп `kind` використовується безпечно та *не* передається в елемент `<button>`, що знаходиться в DOM.
-Всі інші пропси передаються за допомогою об'єкту `...other`, що робить компонент справді гнучким. Це можна помітити на пракладі пропсів `onClick` та `children`, що передаються в `<button>`.
+Всі інші пропси передаються за допомогою об'єкту `...other`, що робить компонент справді гнучким. Це можна помітити на прикладі пропсів `onClick` та `children`, що передаються в `<button>`.
 
 Оператори розпакування можуть бути корисним, проте вони дозволяють передавати непотрібні пропси в комопненти або невалідні HTML атрибути в DOM. Ми рекомендуємо використовувати цей синтаксис з обережністю.
 
 ## Дочірні компоненти в JSX {#children-in-jsx}
 
-У JSX-виразах контент, що містяться між відкриваючим та закриваючим тегами, передається через спеціальний проп `props.children`. Існує декілька варіантів передачі дочірніх елементів:
+У JSX-виразах контент, що міститься між відкриваючим та закриваючим тегами, передається через спеціальний проп `props.children`. Існує декілька варіантів передачі дочірніх елементів:
 
 ### Рядкові літерали {#string-literals-1}
 
@@ -288,7 +288,7 @@ const App = () => {
 <div>This is valid HTML &amp; JSX at the same time.</div>
 ```
 
-JSX прибирає пусті рядки та пробіли на початку та в кінці рядка. Переходи на нові рядки, що прилягають до тегів, видаляються; переходи на нові рядки, що знаходяться між рядковими літералими стискаються до одного пробілу. Таким чином наступні вирази повернуть однаковий результат:
+JSX прибирає пусті рядки та пробіли на початку та в кінці рядка. Переходи на нові рядки, що прилягають до тегів, видаляються; переходи на нові рядки, що знаходяться між рядковими літералими стискаються до одного пробілу. Таким чином наступні вирази дадуть однаковий результат:
 
 ```js
 <div>Hello World</div>
@@ -319,7 +319,7 @@ JSX прибирає пусті рядки та пробіли на початк
 </MyContainer>
 ```
 
-Ви можете міксувати різні типи нащадків разом, таким чином, також можна використовувати рядкові літерали разом з JSX-елементами. Це ще один приклад, того як JSX схожий на HTML, до того ж наступний код валідний як для JSX, так і для HTML:
+Ви можете міксувати різні типи нащадків разом, отже у такий спосіб можна використовувати рядкові літерали разом з JSX-елементами. Це ще один приклад того, як JSX схожий на HTML, до того ж наступний код валідний як для JSX, так і для HTML:
 
 ```html
 <div>
@@ -382,7 +382,7 @@ function Hello(props) {
 
 ### Функції як дочірні елементи {#functions-as-children}
 
-За звичай, JavaScript вирази, що прописані в JSX, будут приведені до рядка, React-елементу, або списку з попередніх. Проте `props.children` працює так само, як і будь-який інший проп, тому він може передавати будь-який тип даних, а не тільки ті, що React знає як рендерити. Наприклад, якщо ви маєте компонент користувача, ви можете передати функцію зворотнього вигляду у `props.children`:
+Зазвичай JavaScript вирази, що прописані в JSX, перетворюються в рядок, React-елемент, або список з попередніх. Проте `props.children` працює так само, як і будь-який інший проп, тому він може передавати будь-який тип даних, а не тільки ті, що React знає як рендерити. Наприклад, якщо ви маєте компонент користувача, ви можете передати функцію зворотнього вигляду у `props.children`:
 
 ```js{4,13}
 // Викликати numTimes разів дочірню функцію зворотнього виклику для створення повторюваних компонентів
@@ -403,11 +403,11 @@ function ListOfTenThings() {
 }
 ```
 
-Дочірні елементи, що передаються в компонент користувача, можуть бути будь-чим при умові, що компонент перетворить їх у щось, що React зможе зрозуміти та відрендерити. Дана техніка непоширена, але нею можна скористатися, якщо захочете розширити можливості JSX.
+Дочірні елементи, що передаються в компонент користувача, можуть бути будь-чим за умови, що компонент перетворить їх у щось, що React зможе зрозуміти та відрендерити. Дана техніка непоширена, але нею можна скористатися, якщо захочете розширити можливості JSX.
 
 ### Логічні значення, null та undefined ігноруються {#booleans-null-and-undefined-are-ignored}
 
-`false`, `null`, `undefined`, та `true` — валідні дочірні елементи. Вони просто не рендеряться. Ці JSX-вирази повернуть однаковий результат:
+`false`, `null`, `undefined`, та `true` — валідні дочірні елементи. Вони просто не рендеряться. Ці JSX-вирази дадуть однаковий результат:
 
 ```js
 <div />
@@ -423,7 +423,7 @@ function ListOfTenThings() {
 <div>{true}</div>
 ```
 
-Це може бути корисним при умовному рендерингу React-елементів. Наступний JSX-вираз відрендерить `<Header />` при умові, що `showHeader` дорівнює `true`:
+Це може бути корисним при умовному рендерингу React-елементів. Наступний JSX-вираз відрендерить `<Header />` за умови, що `showHeader` дорівнює `true`:
 
 ```js{2}
 <div>
@@ -432,7 +432,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>

From 5ae5896bd76170a3effa2d426ee4fac0e00513bc Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Thu, 4 Apr 2019 22:54:43 +0300
Subject: [PATCH 06/22] syntax fix

---
 content/docs/jsx-in-depth.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 6d7ae7ffc..8cd0fee53 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -37,7 +37,7 @@ React.createElement(
 <div className="sidebar" />
 ```
 
-скомпілюється в:
+скомпілюється у:
 
 ```js
 React.createElement(
@@ -47,7 +47,7 @@ React.createElement(
 )
 ```
 
-Якщо ви бажаєте перевірити, як JSX-вираз компілюється в JavaScript, спробуйте [онлайн-компілятор Babel](babel://jsx-simple-example).
+Якщо ви бажаєте перевірити, як JSX-вираз компілюється у JavaScript, спробуйте [онлайн-компілятор Babel](babel://jsx-simple-example).
 
 ## Визначення типу React-елемента {#specifying-the-react-element-type}
 

From d908e1d080d80e5474927f0fc38783a0978ae722 Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Thu, 4 Apr 2019 22:58:53 +0300
Subject: [PATCH 07/22] syntax fix

---
 content/docs/jsx-in-depth.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 8cd0fee53..31944476b 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -200,7 +200,7 @@ function NumberDescriber(props) {
 
 ### Рядкові літерали {#string-literals}
 
-Ви можете передати рядковий літерал як пропс. Ці два вирази еквівалентні:
+Ви можете передати рядковий літерал як проп. Ці два вирази еквівалентні:
 
 ```js
 <MyComponent message="hello world" />
@@ -220,7 +220,7 @@ function NumberDescriber(props) {
 
 ### Пропси за замовчуванням встановлені в "true" {#props-default-to-true}
 
-Якщо ви не передасте жодного значення пропсу, то за замовчуванням його значення дорівнюватиме `true`. Ці два записи еквівалентні:
+Якщо ви не передасте жодного значення пропу, то за замовчуванням його значення дорівнюватиме `true`. Ці два записи еквівалентні:
 
 ```js
 <MyTextBox autocomplete />

From 1d1bc37e7e9a59486d1f582603c594cf535ff5c2 Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Fri, 5 Apr 2019 10:15:14 +0300
Subject: [PATCH 08/22] syntax fix

---
 content/docs/jsx-in-depth.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 31944476b..eb9cfc0df 100644
--- a/content/docs/jsx-in-depth.md
+++ b/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}>
@@ -75,7 +75,7 @@ function WarningButton() {
 
 ### Використання запису через крапку {#using-dot-notation-for-jsx-type}
 
-Ви також можете посилатися на React-компонент, використовуючи запис через крапку. Це зручно, коли у вас наявний модуль, що експортує багато React-компонентів. Наприклад, якщо `MyComponents.DatePicker` - компонент, то ви можете посилатися на нього напряму:
+Ви також можете посилатися на React-компонент, використовуючи запис через крапку. Це зручно, коли у вас наявний модуль, що експортує багато React-компонентів. Наприклад, якщо `MyComponents.DatePicker` — компонент, то ви можете посилатися на нього напряму:
 
 ```js{10}
 import React from 'react';
@@ -104,7 +104,7 @@ import React from 'react';
 
 // Невірно! Цей компонент має починатися з великої літери:
 function hello(props) {
-  // Вірно! Використання <div> тут правомірне тому, що div - валідний HTML тег:
+  // Вірно! Використання <div> тут правомірне тому, що div — валідний HTML тег:
   return <div>Привіт {props.toWhat}</div>;
 }
 
@@ -121,7 +121,7 @@ import React from 'react';
 
 // Вірно! Цей компонент має починатися з великої літери:
 function Hello(props) {
-  // Вірно! Використання <div> тут правомірне тому, що div - валідний HTML тег:
+  // Вірно! Використання <div> тут правомірне тому, що div — валідний HTML тег:
   return <div>Привіт {props.toWhat}</div>;
 }
 
@@ -174,7 +174,7 @@ function Story(props) {
 
 ### JavaScript вирази як пропси {#javascript-expressions-as-props}
 
-Ви можете передавати будь-які Javascript вирази як пропси, обгорнувши їх у фігурні дужки `{}`. Наприклад, як в цьому JSX:
+Ви можете передавати будь-які Javascript вирази як пропси, записавши їх у фігурні дужки `{}`. Наприклад, як в цьому JSX:
 
 ```js
 <MyComponent foo={1 + 2 + 3 + 4} />
@@ -192,7 +192,7 @@ function NumberDescriber(props) {
   } else {
     description = <i>непарне</i>;
   }
-  return <div>{props.number} - {description} число</div>;
+  return <div>{props.number} — {description} число</div>;
 }
 ```
 
@@ -456,6 +456,6 @@ function ListOfTenThings() {
 
 ```js{2}
 <div>
-  Моя Javascript змінна - {String(myVariable)}.
+  Моя Javascript змінна — {String(myVariable)}.
 </div>
 ```

From 522149a937101ae963fe5b6202dcda18e01f63b6 Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Sat, 6 Apr 2019 10:00:37 +0300
Subject: [PATCH 09/22] pr fix - hello world translation

---
 content/docs/jsx-in-depth.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index eb9cfc0df..7860bad48 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -203,9 +203,9 @@ function NumberDescriber(props) {
 Ви можете передати рядковий літерал як проп. Ці два вирази еквівалентні:
 
 ```js
-<MyComponent message="hello world" />
+<MyComponent message="привіт світ" />
 
-<MyComponent message={'hello world'} />
+<MyComponent message={'привіт світ'} />
 ```
 
 Коли ви передаєте рядковий літерал, всі його символи будуть екрановані у відповідності до HTML-сутностей. Тому наступні два записи еквівалентні:
@@ -282,7 +282,7 @@ const App = () => {
 <MyComponent>Привіт світ!</MyComponent>
 ```
 
-Це приклад валідного JSX, де значення `props.children` у `MyComponent` дорівнюватиме рядку `"Hello world!"`. HTML не екранується, тому ви можете писати JSX так наче ви пишете HTML:
+Це приклад валідного JSX, де значення `props.children` у `MyComponent` дорівнюватиме рядку `"Привіт світ!"`. HTML не екранується, тому ви можете писати JSX так наче ви пишете HTML:
 
 ```html
 <div>This is valid HTML &amp; JSX at the same time.</div>
@@ -291,20 +291,20 @@ const App = () => {
 JSX прибирає пусті рядки та пробіли на початку та в кінці рядка. Переходи на нові рядки, що прилягають до тегів, видаляються; переходи на нові рядки, що знаходяться між рядковими літералими стискаються до одного пробілу. Таким чином наступні вирази дадуть однаковий результат:
 
 ```js
-<div>Hello World</div>
+<div>Привіт світ</div>
 
 <div>
-  Hello World
+  Привіт світ
 </div>
 
 <div>
-  Hello
-  World
+  Привіт
+  світ
 </div>
 
 <div>
 
-  Hello World
+  Привіт світ
 </div>
 ```
 

From 6aa919ebfd3a89498dea8f0da08ff45e9ecda441 Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Sun, 7 Apr 2019 17:32:40 +0300
Subject: [PATCH 10/22] pr fix - dashes and translations

---
 content/docs/jsx-in-depth.md | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 7860bad48..a23cf28fc 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -51,7 +51,7 @@ React.createElement(
 
 ## Визначення типу React-елемента {#specifying-the-react-element-type}
 
-Перша частина JSX тегу вказує на тип React-елемента.
+Перша частина JSX-тегу вказує на тип React-елемента.
 
 Типи, що починаються з великої літери, вказують, що JSX-тег посилається на React-компонент. Ці теги компілюються в пряме посилання на іменовану змінну, тому, якщо ви використовуєте JSX-вираз `<Foo />`, `Foo` має бути в області застосування.
 
@@ -71,7 +71,7 @@ function WarningButton() {
 }
 ```
 
-Якщо ви не користуєтеся JavaScript бандлерами та підключаєте React через тег `<script>`, то він вже доступний через глобальну змінну `React`.
+Якщо ви не користуєтеся JavaScript-бандлерами та підключаєте React через тег `<script>`, то він вже доступний через глобальну змінну `React`.
 
 ### Використання запису через крапку {#using-dot-notation-for-jsx-type}
 
@@ -104,12 +104,12 @@ import React from 'react';
 
 // Невірно! Цей компонент має починатися з великої літери:
 function hello(props) {
-  // Вірно! Використання <div> тут правомірне тому, що div — валідний HTML тег:
+  // Вірно! Використання <div> тут правомірне тому, що div — валідний HTML-тег:
   return <div>Привіт {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Невірно! React сприймає <hello /> як HTML тег тому, що він починається з маленької літери:
+  // Невірно! React сприймає <hello /> як HTML-тег тому, що він починається з маленької літери:
   return <hello toWhat="світ" />;
 }
 ```
@@ -121,7 +121,7 @@ import React from 'react';
 
 // Вірно! Цей компонент має починатися з великої літери:
 function Hello(props) {
-  // Вірно! Використання <div> тут правомірне тому, що div — валідний HTML тег:
+  // Вірно! Використання <div> тут правомірне тому, що div — валідний HTML-тег:
   return <div>Привіт {props.toWhat}</div>;
 }
 
@@ -172,9 +172,9 @@ function Story(props) {
 
 Існує декілька шляхів для передачі пропсів в JSX.
 
-### JavaScript вирази як пропси {#javascript-expressions-as-props}
+### JavaScript-вирази як пропси {#javascript-expressions-as-props}
 
-Ви можете передавати будь-які Javascript вирази як пропси, записавши їх у фігурні дужки `{}`. Наприклад, як в цьому JSX:
+Ви можете передавати будь-які Javascript-вирази як пропси, записавши їх у фігурні дужки `{}`. Наприклад, як в цьому JSX:
 
 ```js
 <MyComponent foo={1 + 2 + 3 + 4} />
@@ -220,7 +220,7 @@ function NumberDescriber(props) {
 
 ### Пропси за замовчуванням встановлені в "true" {#props-default-to-true}
 
-Якщо ви не передасте жодного значення пропу, то за замовчуванням його значення дорівнюватиме `true`. Ці два записи еквівалентні:
+Якщо ви не передаєте жодного значення пропу, то за замовчуванням його значення дорівнюватиме `true`. Ці два записи еквівалентні:
 
 ```js
 <MyTextBox autocomplete />
@@ -236,11 +236,11 @@ function NumberDescriber(props) {
 
 ```js{7}
 function App1() {
-  return <Greeting firstName="Бен" lastName="Гектор" />;
+  return <Greeting firstName="Іван" lastName="Франко" />;
 }
 
 function App2() {
-  const props = {firstName: 'Бен', lastName: 'Гектор'};
+  const props = {firstName: 'Іван', lastName: 'Франко'};
   return <Greeting {...props} />;
 }
 ```
@@ -268,7 +268,7 @@ const App = () => {
 В попередньому прикладі, проп `kind` використовується безпечно та *не* передається в елемент `<button>`, що знаходиться в DOM.
 Всі інші пропси передаються за допомогою об'єкту `...other`, що робить компонент справді гнучким. Це можна помітити на прикладі пропсів `onClick` та `children`, що передаються в `<button>`.
 
-Оператори розпакування можуть бути корисним, проте вони дозволяють передавати непотрібні пропси в комопненти або невалідні HTML атрибути в DOM. Ми рекомендуємо використовувати цей синтаксис з обережністю.
+Оператори розпакування можуть бути корисним, проте вони дозволяють передавати непотрібні пропси в комопненти або невалідні HTML-атрибути в DOM. Ми рекомендуємо використовувати цей синтаксис з обережністю.
 
 ## Дочірні компоненти в JSX {#children-in-jsx}
 
@@ -285,7 +285,7 @@ const App = () => {
 Це приклад валідного JSX, де значення `props.children` у `MyComponent` дорівнюватиме рядку `"Привіт світ!"`. HTML не екранується, тому ви можете писати JSX так наче ви пишете HTML:
 
 ```html
-<div>This is valid HTML &amp; JSX at the same time.</div>
+<div>&quot; Це водночас валідний HTML та JSX &quot;</div>
 ```
 
 JSX прибирає пусті рядки та пробіли на початку та в кінці рядка. Переходи на нові рядки, що прилягають до тегів, видаляються; переходи на нові рядки, що знаходяться між рядковими літералими стискаються до одного пробілу. Таким чином наступні вирази дадуть однаковий результат:
@@ -335,7 +335,7 @@ JSX прибирає пусті рядки та пробіли на початк
 
 ```js
 render() {
-  // Немає необхідності обгортати список елементів в додатковий елемент!
+  // Немає необхідності обгортати список елементів у додатковий елемент!
   return [
     // Не забудьте про ключі :)
     <li key="A">Перший елемент</li>,
@@ -345,9 +345,9 @@ render() {
 }
 ```
 
-### JavaScript вирази як дочірні елементи {#javascript-expressions-as-children}
+### JavaScript-вирази як дочірні елементи {#javascript-expressions-as-children}
 
-Ви можете передати будь-який JavaScript вираз як дочірній елемент, записавши його у фігурних дужках `{}`. Наприклад, ці вирази еквівалентні:
+Ви можете передати будь-який JavaScript-вираз як дочірній елемент, записавши його у фігурних дужках `{}`. Наприклад, ці вирази еквівалентні:
 
 ```js
 <MyComponent>foo</MyComponent>
@@ -372,17 +372,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 разів дочірню функцію зворотнього виклику для створення повторюваних компонентів

From 90f1927b766b1e45b775c92df7b1a0fcc0123dfa Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Mon, 8 Apr 2019 22:37:06 +0300
Subject: [PATCH 11/22] pr fix - lang adaptation and orthography

---
 content/docs/jsx-in-depth.md | 50 ++++++++++++++++++------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index a23cf28fc..b02548124 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -13,11 +13,11 @@ 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>
 ```
 
@@ -31,7 +31,7 @@ React.createElement(
 )
 ```
 
-Також ви можете використати самозакриваючийся тег, якщо відсутні дочірні елементи. Таким чином вираз:
+Також ви можете використати самозакриваючийся тег, якщо відсутні дочірні елементи. Отже вираз:
 
 ```js
 <div className="sidebar" />
@@ -53,13 +53,13 @@ React.createElement(
 
 Перша частина JSX-тегу вказує на тип React-елемента.
 
-Типи, що починаються з великої літери, вказують, що JSX-тег посилається на React-компонент. Ці теги компілюються в пряме посилання на іменовану змінну, тому, якщо ви використовуєте JSX-вираз `<Foo />`, `Foo` має бути в області застосування.
+Типи, що починаються з великої літери, вказують, що JSX-тег посилається на React-компонент. Ці теги компілюються в пряме посилання на іменовану змінну, тому `Foo` має бути в області застосування, якщо ви використовуєте JSX-вираз `<Foo />`.
 
 ### React має бути в області застосування {#react-must-be-in-scope}
 
 Оскільки JSX компілюється у виклики функції `React.createElement`, бібліотека `React` також має бути в області застосування вашого JSX-виразу.
 
-Наприклад, обидва імпорти необхідні в цьому випадку, навіть враховуючи, що `React` та `CustomButton` не викликаються на пряму в JavaScript:
+Наприклад, обидва імпорти необхідні в цьому випадку, навіть враховуючи, що `React` та `CustomButton` не викликаються напряму в JavaScript:
 
 ```js{1,2,5}
 import React from 'react';
@@ -93,23 +93,23 @@ 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.
 
-Наприклад, наступний вираз не буде працювати, як очікується:
+Наприклад, наступний вираз не буде працювати як очікується:
 
 ```js{3,4,10,11}
 import React from 'react';
 
 // Невірно! Цей компонент має починатися з великої літери:
 function hello(props) {
-  // Вірно! Використання <div> тут правомірне тому, що div — валідний HTML-тег:
+  // Вірно! Використання <div> тут правомірне, тому що div — валідний HTML-тег:
   return <div>Привіт {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Невірно! React сприймає <hello /> як HTML-тег тому, що він починається з маленької літери:
+  // Невірно! React сприймає <hello /> як HTML-тег, тому що він починається з маленької літери:
   return <hello toWhat="світ" />;
 }
 ```
@@ -121,7 +121,7 @@ import React from 'react';
 
 // Вірно! Цей компонент має починатися з великої літери:
 function Hello(props) {
-  // Вірно! Використання <div> тут правомірне тому, що div — валідний HTML-тег:
+  // Вірно! Використання <div> тут правомірне, тому що div — валідний HTML-тег:
   return <div>Привіт {props.toWhat}</div>;
 }
 
@@ -133,7 +133,7 @@ function HelloWorld() {
 
 ### Вибір типу під час виконання {#choosing-the-type-at-runtime}
 
-В якості типу React-елементу не можна використовувати вирази. Якщо ви все ж захочете скористатися виразом для визначення типу елемента, призначте його в змінну, що починається з великої літери. Зазвичай це потрібно, якщо ви хочете застосувати різні компоненти в залежності від пропсів:
+У якості типу React-елементу не можна використовувати вирази. Якщо ви все ж захочете скористатися виразом для визначення типу елемента, призначте його змінній, що починається з великої літери. Зазвичай це потрібно, якщо ви хочете застосувати різні компоненти в залежності від пропсів:
 
 ```js{10,11}
 import React from 'react';
@@ -150,7 +150,7 @@ function Story(props) {
 }
 ```
 
-Щоб це виправити, ми маємо спершу визначемо змінну, що починається з великої літери, зі значенням цільвого компоненту:
+Щоб це виправити, спочатку ми привласнимо тип змінній, що починається з великої літери:
 
 ```js{10-12}
 import React from 'react';
@@ -182,7 +182,7 @@ function Story(props) {
 
 Для `MyComponent` значення `props.foo` буде рівне `10` тому, що вираз `1 + 2 + 3 + 4` буде обчислений.
 
-Оператор `if` та цикл `for` не є виразами в JavaScript, тому їх не можна використати безпосередньо в JSX. Натомість ви можете застосувати їх в коді, що передує використання їх результату. Наприклад:
+Оператор `if` та цикл `for` не є виразами в JavaScript, тому їх не можна використати безпосередньо в JSX. Натомість ви можете застосувати їх в коді, що передує використанню їх результату. Наприклад:
 
 ```js{3-7}
 function NumberDescriber(props) {
@@ -208,7 +208,7 @@ function NumberDescriber(props) {
 <MyComponent message={'привіт світ'} />
 ```
 
-Коли ви передаєте рядковий літерал, всі його символи будуть екрановані у відповідності до HTML-сутностей. Тому наступні два записи еквівалентні:
+Коли ви передаєте рядковий літерал, всі його символи будуть екрановані відповідно до HTML-сутностей. Тому наступні два записи еквівалентні:
 
 ```js
 <MyComponent message="&lt;3" />
@@ -216,7 +216,7 @@ function NumberDescriber(props) {
 <MyComponent message={'<3'} />
 ```
 
-Зазвичай така поведінка немає вас турбувати. Вона описана для повноти інформації.
+Зазвичай така поведінка не має вас турбувати. Вона описана для повноти інформації.
 
 ### Пропси за замовчуванням встановлені в "true" {#props-default-to-true}
 
@@ -230,7 +230,7 @@ function NumberDescriber(props) {
 
 Здебільшого, ми не рекомендуємо робити так, тому що цей запис може бути сплутаний зі [скороченням імен властивостей з ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) Наприклад, `{foo}` — короткий запис `{foo: foo}`, а не `{foo: true}`. Ця поведінка існує, тому що відповідає поведінці HTML.
 
-### Атрибути розпакування {#spread-attributes}
+### Розпакування атрибутів {#spread-attributes}
 
 Якщо ви вже маєте визначені пропси в об'єкті `props` та хочете передати їх в JSX, то ви можете скористатися оператором розпакування `...`, щоб це зробити. Ці два компоненти еквівалентні:
 
@@ -265,10 +265,10 @@ const App = () => {
 };
 ```
 
-В попередньому прикладі, проп `kind` використовується безпечно та *не* передається в елемент `<button>`, що знаходиться в DOM.
+У попередньому прикладі, проп `kind` використовується безпечно та *не* передається в елемент `<button>`, що знаходиться в DOM.
 Всі інші пропси передаються за допомогою об'єкту `...other`, що робить компонент справді гнучким. Це можна помітити на прикладі пропсів `onClick` та `children`, що передаються в `<button>`.
 
-Оператори розпакування можуть бути корисним, проте вони дозволяють передавати непотрібні пропси в комопненти або невалідні HTML-атрибути в DOM. Ми рекомендуємо використовувати цей синтаксис з обережністю.
+Розпакування атрибутів може бути корисним, проте з ним легше передати непотрібні пропси в компоненти або невалідні HTML-атрибути в DOM. Ми рекомендуємо використовувати цей синтаксис з обережністю.
 
 ## Дочірні компоненти в JSX {#children-in-jsx}
 
@@ -282,7 +282,7 @@ const App = () => {
 <MyComponent>Привіт світ!</MyComponent>
 ```
 
-Це приклад валідного JSX, де значення `props.children` у `MyComponent` дорівнюватиме рядку `"Привіт світ!"`. HTML не екранується, тому ви можете писати JSX так наче ви пишете HTML:
+Це приклад валідного JSX, де значення `props.children` у `MyComponent` дорівнюватиме рядку `"Привіт світ!"`. HTML не екранується, тому ви можете писати JSX так, наче ви пишете HTML:
 
 ```html
 <div>&quot; Це водночас валідний HTML та JSX &quot;</div>
@@ -319,7 +319,7 @@ JSX прибирає пусті рядки та пробіли на початк
 </MyContainer>
 ```
 
-Ви можете міксувати різні типи нащадків разом, отже у такий спосіб можна використовувати рядкові літерали разом з JSX-елементами. Це ще один приклад того, як JSX схожий на HTML, до того ж наступний код валідний як для JSX, так і для HTML:
+Ви можете поєднувати різні типи нащадків разом і у такий спосіб можна використовувати рядкові літерали разом з JSX-елементами. Це ще один приклад того, як JSX схожий на HTML, а тому наступний код валідний як для JSX, так і для HTML:
 
 ```html
 <div>
@@ -382,7 +382,7 @@ function Hello(props) {
 
 ### Функції як дочірні елементи {#functions-as-children}
 
-Зазвичай JavaScript-вирази, що прописані в JSX, перетворюються в рядок, React-елемент, або список з попередніх. Проте `props.children` працює так само, як і будь-який інший проп, тому він може передавати будь-який тип даних, а не тільки ті, що React знає як рендерити. Наприклад, якщо ви маєте компонент користувача, ви можете передати функцію зворотнього вигляду у `props.children`:
+Зазвичай JavaScript-вирази, що прописані в JSX, перетворюються в рядок, React-елемент або список з попередніх. Проте `props.children` працює так само, як і будь-який інший проп, тому він може передавати будь-який тип даних, а не тільки ті, що React знає як рендерити. Наприклад, якщо ви маєте компонент користувача, ви можете передати функцію зворотнього виклику у `props.children`:
 
 ```js{4,13}
 // Викликати numTimes разів дочірню функцію зворотнього виклику для створення повторюваних компонентів
@@ -407,7 +407,7 @@ function ListOfTenThings() {
 
 ### Логічні значення, null та undefined ігноруються {#booleans-null-and-undefined-are-ignored}
 
-`false`, `null`, `undefined`, та `true` — валідні дочірні елементи. Вони просто не рендеряться. Ці JSX-вирази дадуть однаковий результат:
+`false`, `null`, `undefined` та `true` — валідні дочірні елементи. Вони просто не рендеряться. Ці JSX-вирази дадуть однаковий результат:
 
 ```js
 <div />
@@ -432,7 +432,7 @@ function ListOfTenThings() {
 </div>
 ```
 
-Існує одне зауваження, що React все одно рендерить ["неправдиві"(falsy) значення](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), такі як число `0`. Наприклад, наступний код відпрацює не так, як очікується, тому що `0` буде виведено, коли `props.messages` буде пустим масивом:
+Існує одне зауваження, що React все одно рендерить ["неправдиві" значення](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), такі як число `0`. Наприклад, наступний код відпрацює не так, як очікується, тому що `0` буде виведено, коли `props.messages` буде пустим масивом:
 
 ```js{2}
 <div>
@@ -442,7 +442,7 @@ function ListOfTenThings() {
 </div>
 ```
 
-Щоб це виправити, будьте певні, що вираз перед оператором `&&` — boolean:
+Щоб це виправити, будьте певні, що вираз перед оператором `&&` — логічне значення:
 
 ```js{2}
 <div>
@@ -452,7 +452,7 @@ function ListOfTenThings() {
 </div>
 ```
 
- Якщо ви хочете, щоб значення `false`, `true`, `null`, чи `undefined` навпаки потрапили до результату, вам необхідно попередньо [перетворити їх у рядок](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion):
+ Якщо ви хочете, щоб значення `false`, `true`, `null` чи `undefined` навпаки потрапили до результату, вам необхідно попередньо [перетворити їх у рядок](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion):
 
 ```js{2}
 <div>

From 557e34465d51b1a0f25845c91cf4fe31f378ab0a Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Mon, 8 Apr 2019 23:12:35 +0300
Subject: [PATCH 12/22] pr fix - self-closing tag

---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index b02548124..e2c327c00 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -31,7 +31,7 @@ React.createElement(
 )
 ```
 
-Також ви можете використати самозакриваючийся тег, якщо відсутні дочірні елементи. Отже вираз:
+Також ви можете використати cамозакриваючий тег, якщо відсутні дочірні елементи. Отже вираз:
 
 ```js
 <div className="sidebar" />

From 7955f7357d961fb72c18c89a2c2b5b0057f3d430 Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Wed, 17 Apr 2019 16:28:21 +0300
Subject: [PATCH 13/22] translate Refs and the DOM - part 1

---
 content/docs/refs-and-the-dom.md | 74 ++++++++++++++++----------------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md
index 9b56fcc9f..a4e8fc71e 100644
--- a/content/docs/refs-and-the-dom.md
+++ b/content/docs/refs-and-the-dom.md
@@ -11,33 +11,33 @@ redirect_from:
 permalink: docs/refs-and-the-dom.html
 ---
 
-Refs provide a way to access DOM nodes or React elements created in the render method.
+Рефи надають доступ до DOM-вузлів чи React-елементів, що створюються під час рендеру.
 
 In the typical React dataflow, [props](/docs/components-and-props.html) are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch.
 
-### When to Use Refs {#when-to-use-refs}
+### Коли використовувати рефи {#when-to-use-refs}
 
-There are a few good use cases for refs:
+Існує декілька ситуацій доцільного використання рефів:
 
-* Managing focus, text selection, or media playback.
-* Triggering imperative animations.
-* Integrating with third-party DOM libraries.
+* Контроль фокуса, виділення тексту чи media playback.
+* Виклик імперативної анімації.
+* Інтеграція зі сторонніми DOM-бібліотеками.
 
-Avoid using refs for anything that can be done declaratively.
+Уникайте використання рефів для будь-чого, що можна зробити декларативно.
 
-For example, instead of exposing `open()` and `close()` methods on a `Dialog` component, pass an `isOpen` prop to it.
+Наприклад, замість виклику методів `open()` та `close()` компоненту `Dialog`, передайте йому проп `isOpen`.
 
 ### Don't Overuse Refs {#dont-overuse-refs}
 
-Your first inclination may be to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. See the [Lifting State Up](/docs/lifting-state-up.html) guide for examples of this.
+Мабуть першим бажанням буде використання рефів для того, щоб "все працювало" у вашому додатку. Якщо це так, зупиніться та подумайте більш критично про те, який з компонентів з ієрархії має контролювати стан. Зазвичай, стає зрозуміло, що відповідне місце для контролю стану лежить на верхніх рівнях ієрархії. Ознайомтеся з розділом [Підняття стану](/docs/lifting-state-up.html) для прикладів такої поведінки.
 
-> Note
+> Примітка
 >
-> The examples below have been updated to use the `React.createRef()` API introduced in React 16.3. If you are using an earlier release of React, we recommend using [callback refs](#callback-refs) instead.
+> Приклади нижче були оновлені для використання `React.createRef()` API, що з'явилося у React 16.3. Якщо ви користуєтеся більш ранньою версією React, ми рекомендуємо використувати [рефи як функції зворотнього викливку](#callback-refs).
 
-### Creating Refs {#creating-refs}
+### Створення рефів {#creating-refs}
 
-Refs are created using `React.createRef()` and attached to React elements via the `ref` attribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.
+Рефи створюються за допомогою виклику методу `React.createRef()` та приєднюються до React-елемента через атрибут `ref`. Рефи визначаються як властивість Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.
 
 ```javascript{4,7}
 class MyComponent extends React.Component {
@@ -59,36 +59,36 @@ When a ref is passed to an element in `render`, a reference to the node becomes
 const node = this.myRef.current;
 ```
 
-The value of the ref differs depending on the type of the node:
+Значення рефа може відрізнятися в залежності від типу вузла:
 
-- When the `ref` attribute is used on an HTML element, the `ref` created in the constructor with `React.createRef()` receives the underlying DOM element as its `current` property.
-- When the `ref` attribute is used on a custom class component, the `ref` object receives the mounted instance of the component as its `current`.
+- Коли атрибут `ref` визначений у HTML-елемента, тоді `ref`, що створений у конструкторі за допомогою методу `React.createRef()`, отримає доступ до відповідого DOM-елемента через свою властивість `current`.
+- Коли атрибут `ref` визначений у компонента користувача, тоді об'єкт `ref` отримає посилання на вмонтований через його властивіть `current`. object receives the mounted instance of the component as its `current`.
 - **You may not use the `ref` attribute on function components** because they don't have instances.
 
-The examples below demonstrate the differences.
+На прикладах нижче можна побачити різницю.
 
-#### Adding a Ref to a DOM Element {#adding-a-ref-to-a-dom-element}
+#### Застосування рефу до DOM-елемента {#adding-a-ref-to-a-dom-element}
 
-This code uses a `ref` to store a reference to a DOM node:
+Код нижче використовує `ref`, щоб отримати посилання на DOM-вузол:
 
 ```javascript{5,12,22}
 class CustomTextInput extends React.Component {
   constructor(props) {
     super(props);
-    // create a ref to store the textInput DOM element
+    // створимо реф, щоб отримати посилання на DOM-елемент поля введення
     this.textInput = React.createRef();
     this.focusTextInput = this.focusTextInput.bind(this);
   }
 
   focusTextInput() {
-    // Explicitly focus the text input using the raw DOM API
-    // Note: we're accessing "current" to get the DOM node
+    // Переведемо фокус на текстове поле введення, використовуючи нативне DOM API
+    // Примітка: ми використовуємо "current", щоб отримати DOM-вузол
     this.textInput.current.focus();
   }
 
   render() {
-    // tell React that we want to associate the <input> ref
-    // with the `textInput` that we created in the constructor
+    // вкажемо React, що ми хочемо зв'язати реф елементу <input>
+    // з `textInput`, що був визначений в конструкторі
     return (
       <div>
         <input
@@ -96,7 +96,7 @@ class CustomTextInput extends React.Component {
           ref={this.textInput} />
         <input
           type="button"
-          value="Focus the text input"
+          value="Перенести фокус на текстове поле введення"
           onClick={this.focusTextInput}
         />
       </div>
@@ -105,11 +105,11 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-React will assign the `current` property with the DOM element when the component mounts, and assign it back to `null` when it unmounts. `ref` updates happen before `componentDidMount` or `componentDidUpdate` lifecycle methods.
+React зв'яже властисть `current` з DOM-елементом, коли компонент буде вмонтований, та встановить назад в `null`, коли компонент буде прибрано з DOM. Оновлення `ref` відбувається перед `componentDidMount` або `componentDidUpdate`.
 
-#### Adding a Ref to a Class Component {#adding-a-ref-to-a-class-component}
+#### Застосування рефу до компонента {#adding-a-ref-to-a-class-component}
 
-If we wanted to wrap the `CustomTextInput` above to simulate it being clicked immediately after mounting, we could use a ref to get access to the custom input and call its `focusTextInput` method manually:
+Якби ми захотіли обернути передній `CustomTextInput`, щоб симулювати натискання по ньому одразу після вмонтування, ми могли б використати реф, щоб отримати доступ до користувацького поля введення та виклакати його метод `focusTextInput` напряму:
 
 ```javascript{4,8,13}
 class AutoFocusTextInput extends React.Component {
@@ -130,7 +130,7 @@ class AutoFocusTextInput extends React.Component {
 }
 ```
 
-Note that this only works if `CustomTextInput` is declared as a class:
+Зауважте, що це працює тільки, якщо `CustomTextInput` визначений як клас:
 
 ```js{1}
 class CustomTextInput extends React.Component {
@@ -138,7 +138,7 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-#### Refs and Function Components {#refs-and-function-components}
+#### Рефи та функціональні компоненти {#refs-and-function-components}
 
 **You may not use the `ref` attribute on function components** because they don't have instances:
 
@@ -153,7 +153,7 @@ class Parent extends React.Component {
     this.textInput = React.createRef();
   }
   render() {
-    // This will *not* work!
+    // Це *не* буде працювати!
     return (
       <MyFunctionComponent ref={this.textInput} />
     );
@@ -161,13 +161,13 @@ class Parent extends React.Component {
 }
 ```
 
-You should convert the component to a class if you need a ref to it, just like you do when you need lifecycle methods or state.
+Ви маєте перетворити компонент в клас, якщо ви хочете використовувати реф для нього, так само як ви б робили, коли вам потрібні методи життєвого циклу або стан.
 
-You can, however, **use the `ref` attribute inside a function component** as long as you refer to a DOM element or a class component:
+Проте ви можете **використовувати атрибут `ref` в середині функціональних компонентів** за умови, що ви визначаєте їх на DOM-елементах або класових компонентах:
 
 ```javascript{2,3,6,13}
 function CustomTextInput(props) {
-  // textInput must be declared here so the ref can refer to it
+  // textInput повинен бути визначений тут, щоб реф міг посилатися на нього
   let textInput = React.createRef();
 
   function handleClick() {
@@ -181,7 +181,7 @@ function CustomTextInput(props) {
         ref={textInput} />
       <input
         type="button"
-        value="Focus the text input"
+        value="Перенести фокус на текстове поле введення"
         onClick={handleClick}
       />
     </div>
@@ -205,7 +205,7 @@ When possible, we advise against exposing DOM nodes, but it can be a useful esca
 
 React also supports another way to set refs called "callback refs", which gives more fine-grain control over when refs are set and unset.
 
-Instead of passing a `ref` attribute created by `createRef()`, you pass a function. The function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere. 
+Instead of passing a `ref` attribute created by `createRef()`, you pass a function. The function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere.
 
 The example below implements a common pattern: using the `ref` callback to store a reference to a DOM node in an instance property.
 
@@ -279,7 +279,7 @@ In the example above, `Parent` passes its ref callback as an `inputRef` prop to
 
 ### Legacy API: String Refs {#legacy-api-string-refs}
 
-If you worked with React before, you might be familiar with an older API where the `ref` attribute is a string, like `"textInput"`, and the DOM node is accessed as `this.refs.textInput`. We advise against it because string refs have [some issues](https://github.com/facebook/react/pull/8333#issuecomment-271648615), are considered legacy, and **are likely to be removed in one of the future releases**. 
+If you worked with React before, you might be familiar with an older API where the `ref` attribute is a string, like `"textInput"`, and the DOM node is accessed as `this.refs.textInput`. We advise against it because string refs have [some issues](https://github.com/facebook/react/pull/8333#issuecomment-271648615), are considered legacy, and **are likely to be removed in one of the future releases**.
 
 > Note
 >

From 4a9c869f1b9e8356c1f4687a1437fccd7a389ec2 Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Wed, 17 Apr 2019 18:59:04 +0300
Subject: [PATCH 14/22] translate Refs and the DOM - part 2

---
 content/docs/refs-and-the-dom.md | 46 ++++++++++++++++----------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md
index a4e8fc71e..b97d81300 100644
--- a/content/docs/refs-and-the-dom.md
+++ b/content/docs/refs-and-the-dom.md
@@ -140,7 +140,7 @@ class CustomTextInput extends React.Component {
 
 #### Рефи та функціональні компоненти {#refs-and-function-components}
 
-**You may not use the `ref` attribute on function components** because they don't have instances:
+**Ви не зможете застосувати атрибут `ref` до функціональних компонентів**, тому що у них немає екзеплярів:
 
 ```javascript{1,8,13}
 function MyFunctionComponent() {
@@ -189,25 +189,25 @@ function CustomTextInput(props) {
 }
 ```
 
-### Exposing DOM Refs to Parent Components {#exposing-dom-refs-to-parent-components}
+### Підйом DOM рефів у батьківський компонент{#exposing-dom-refs-to-parent-components}
 
-In rare cases, you might want to have access to a child's DOM node from a parent component. This is generally not recommended because it breaks component encapsulation, but it can occasionally be useful for triggering focus or measuring the size or position of a child DOM node.
+У рідкісних випадках, ви можете захотіти мати доступ до DOM вузлів нащадків з батьківського компонента. Зазвичай так нерекомендовано робити, тому що це руйнує інкапсуляцію компонентів, але може бути використано для зміни фокусу або визначення розмірів або положення DOM вузлів нащадка.
 
 While you could [add a ref to the child component](#adding-a-ref-to-a-class-component), this is not an ideal solution, as you would only get a component instance rather than a DOM node. Additionally, this wouldn't work with function components.
 
-If you use React 16.3 or higher, we recommend to use [ref forwarding](/docs/forwarding-refs.html) for these cases. **Ref forwarding lets components opt into exposing any child component's ref as their own**. You can find a detailed example of how to expose a child's DOM node to a parent component [in the ref forwarding documentation](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
+Якщо ви користуєтеся React 16.3 або вище, ми рекомендуємо використовувати [перенаправлення рефів](/docs/forwarding-refs.html) для цих задач. **Ref forwarding lets components opt into exposing any child component's ref as their own**. Ви можете знайти детальний приклад підйому DOM вузлів нащадка у батьківський компонент [у розділі перенаправлення рефів](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
 
-If you use React 16.2 or lower, or if you need more flexibility than provided by ref forwarding, you can use [this alternative approach](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) and explicitly pass a ref as a differently named prop.
+Якщо ви користуєтеся React 16.2 або нижче, або ви потребуєте більшої гнучкості, ніж вам дає перенаправлення рефів, ви можете скористатися [альтернативним підходом](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) та явно передати реф як проп з іменем відмінним від `ref`.
 
-When possible, we advise against exposing DOM nodes, but it can be a useful escape hatch. Note that this approach requires you to add some code to the child component. If you have absolutely no control over the child component implementation, your last option is to use [`findDOMNode()`](/docs/react-dom.html#finddomnode), but it is discouraged and deprecated in [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
+Коли можливо, ми не рекомендуємо підхід підйом DOM вузлів, але це може When possible, we advise against exposing DOM nodes, but it can be a useful escape hatch. Note that this approach requires you to add some code to the child component. If you have absolutely no control over the child component implementation, your last option is to use [`findDOMNode()`](/docs/react-dom.html#finddomnode), but it is discouraged and deprecated in [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
 
-### Callback Refs {#callback-refs}
+### Рефи через функції зворотнього виклику {#callback-refs}
 
-React also supports another way to set refs called "callback refs", which gives more fine-grain control over when refs are set and unset.
+React також підтримує інший варіант ініціалізації рефів, що називається "callback refs" (рефи через функції зворотнього виклику), що дає більший контроль над which gives more fine-grain control over when refs are set and unset.
 
-Instead of passing a `ref` attribute created by `createRef()`, you pass a function. The function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere.
+На відміну від передачі через атрибути `ref`, що створений функцією `createRef()`, ви передаєте функцію. Функція отримує екземпляр компонента чи HTML DOM-елемент у вигляді аргумента, яким можна скористатися або зберігти.
 
-The example below implements a common pattern: using the `ref` callback to store a reference to a DOM node in an instance property.
+Приклад нижче реалізує поширений паттерн: використання функції зворотнього виклику у `ref` для отримання та зберігання посилання на DOM-вузл в екземплері.
 
 ```javascript{5,7-9,11-14,19,29,34}
 class CustomTextInput extends React.Component {
@@ -221,19 +221,19 @@ class CustomTextInput extends React.Component {
     };
 
     this.focusTextInput = () => {
-      // Focus the text input using the raw DOM API
+      // Фокусування на текстовому полі введення за допомогою нативного DOM API
       if (this.textInput) this.textInput.focus();
     };
   }
 
   componentDidMount() {
-    // autofocus the input on mount
+    // автофокус на полі введення при монтуванні
     this.focusTextInput();
   }
 
   render() {
-    // Use the `ref` callback to store a reference to the text input DOM
-    // element in an instance field (for example, this.textInput).
+    // Використання функції зворотнього виклику в `ref` для зберігання посилання на DOM-елемент
+    // текстове поле введення в екземплярі (наприклад, this.textInput).
     return (
       <div>
         <input
@@ -242,7 +242,7 @@ class CustomTextInput extends React.Component {
         />
         <input
           type="button"
-          value="Focus the text input"
+          value="Фокус на текстовому полі введення"
           onClick={this.focusTextInput}
         />
       </div>
@@ -251,9 +251,9 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-React will call the `ref` callback with the DOM element when the component mounts, and call it with `null` when it unmounts. Refs are guaranteed to be up-to-date before `componentDidMount` or `componentDidUpdate` fires.
+React виконає функцію зворотнього виклику `ref` з DOM-елементом, коли компонент буде вмонтований, та виконає її зі значення `null`, коли компонент буде прибрано. Рефи гарантують актуальність перед викликом метода `componentDidMount` або `componentDidUpdate`.
 
-You can pass callback refs between components like you can with object refs that were created with `React.createRef()`.
+Ми можете передавати You can pass callback refs between components like you can with object refs that were created with `React.createRef()`.
 
 ```javascript{4,13}
 function CustomTextInput(props) {
@@ -277,14 +277,14 @@ class Parent extends React.Component {
 
 In the example above, `Parent` passes its ref callback as an `inputRef` prop to the `CustomTextInput`, and the `CustomTextInput` passes the same function as a special `ref` attribute to the `<input>`. As a result, `this.inputElement` in `Parent` will be set to the DOM node corresponding to the `<input>` element in the `CustomTextInput`.
 
-### Legacy API: String Refs {#legacy-api-string-refs}
+### Застраліле API: рядкові рефи {#legacy-api-string-refs}
 
-If you worked with React before, you might be familiar with an older API where the `ref` attribute is a string, like `"textInput"`, and the DOM node is accessed as `this.refs.textInput`. We advise against it because string refs have [some issues](https://github.com/facebook/react/pull/8333#issuecomment-271648615), are considered legacy, and **are likely to be removed in one of the future releases**.
+Якщо ви працювали з React раніше, ви мабуть знайомі зі старим API, де атрибут `ref` - рядок, наприклад `"textInput"`, та DOM вузол доступний через `this.refs.textInput`. Ми не радимо користуватися ним, тому що рядкові рефи мають [деякі проблеми](https://github.com/facebook/react/pull/8333#issuecomment-271648615), також це API вважається застарілим, та **ймовірно буде видалено в одній з майбутніх версій**.
 
-> Note
+> Примітка
 >
-> If you're currently using `this.refs.textInput` to access refs, we recommend using either the [callback pattern](#callback-refs) or the [`createRef` API](#creating-refs) instead.
+> Якщо ви досі користуєте `this.refs.textInput` для доступу до рефів, ми рекомендуємо натомість користовуватися [функціями зворотнього виклику](#callback-refs) або [`createRef` API](#creating-refs).
 
-### Caveats with callback refs {#caveats-with-callback-refs}
+### Застереження with callback refs {#caveats-with-callback-refs}
 
-If the `ref` callback is defined as an inline function, it will get called twice during updates, first with `null` and then again with the DOM element. This is because a new instance of the function is created with each render, so React needs to clear the old ref and set up the new one. You can avoid this by defining the `ref` callback as a bound method on the class, but note that it shouldn't matter in most cases.
+ Якщо `ref` визначено як інлайнову функцію, то вона буде виклакана двічі протягом оновлень, перший раз з `null`, потім з посиланням на DOM-елемент. Це відбувається, тому що створюється новий екземпляр функції під час кожного рендеру, так як React потребує очистити старий реф та встановити новий. Щоб запобігти цьому, передайте `ref` метод класу, проте в більшості випадків це немає значення.

From 859d20cdda6c435c44c2516ccb9727184f28b740 Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Tue, 30 Apr 2019 10:59:01 +0300
Subject: [PATCH 15/22] translate Refs and the DOM - part 3

---
 content/docs/refs-and-the-dom.md | 66 ++++++++++++++++----------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md
index b97d81300..7955baf4b 100644
--- a/content/docs/refs-and-the-dom.md
+++ b/content/docs/refs-and-the-dom.md
@@ -13,13 +13,13 @@ permalink: docs/refs-and-the-dom.html
 
 Рефи надають доступ до DOM-вузлів чи React-елементів, що створюються під час рендеру.
 
-In the typical React dataflow, [props](/docs/components-and-props.html) are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch.
+У звичайному потоці даних React батьківські компоненти можуть взаємодіяти з дітьми тільки через [пропси](/docs/components-and-props.html). Щоб модифікувати нащадка, ви маєте повторно відрендерити його з новими пропсами. Проте існують ситуації, коли вам потрібно імперативно змінити нащадка поза звичайного потоку даних. Нащадок, щоб бути зміненим, має бути екземпляром React-компонента або DOM-елементом. В обох випадках React надає можливість обійти звичайний потік даних.
 
 ### Коли використовувати рефи {#when-to-use-refs}
 
-Існує декілька ситуацій доцільного використання рефів:
+Існує декілька ситуацій, коли доцільно використовувати рефи:
 
-* Контроль фокуса, виділення тексту чи media playback.
+* Контроль фокусу, виділення тексту чи контроль програвання медіа.
 * Виклик імперативної анімації.
 * Інтеграція зі сторонніми DOM-бібліотеками.
 
@@ -27,17 +27,17 @@ In the typical React dataflow, [props](/docs/components-and-props.html) are the
 
 Наприклад, замість виклику методів `open()` та `close()` компоненту `Dialog`, передайте йому проп `isOpen`.
 
-### Don't Overuse Refs {#dont-overuse-refs}
+### Не зловживайте рефами {#dont-overuse-refs}
 
-Мабуть першим бажанням буде використання рефів для того, щоб "все працювало" у вашому додатку. Якщо це так, зупиніться та подумайте більш критично про те, який з компонентів з ієрархії має контролювати стан. Зазвичай, стає зрозуміло, що відповідне місце для контролю стану лежить на верхніх рівнях ієрархії. Ознайомтеся з розділом [Підняття стану](/docs/lifting-state-up.html) для прикладів такої поведінки.
+Мабуть першим вашим бажанням буде використовувати рефи для того, щоб "все працювало" у вашому додатку. Якщо це так, зупиніться та подумайте більш критично про те, який з компонентів в ієрархії має контролювати стан. Зазвичай, стає зрозуміло, що правильне місце для контролю стану лежить на верхніх рівнях ієрархії. Більш детально ознайомтеся з розділом [Підняття стану](/docs/lifting-state-up.html) для прикладів такої поведінки.
 
 > Примітка
 >
-> Приклади нижче були оновлені для використання `React.createRef()` API, що з'явилося у React 16.3. Якщо ви користуєтеся більш ранньою версією React, ми рекомендуємо використувати [рефи як функції зворотнього викливку](#callback-refs).
+> Приклади нижче були оновлені для використання `React.createRef()` API, що з'явилося у React 16.3. Якщо ви користуєтеся більш старішою версією React, ми рекомендуємо використувати [рефи зворотнього виклику](#callback-refs).
 
 ### Створення рефів {#creating-refs}
 
-Рефи створюються за допомогою виклику методу `React.createRef()` та приєднюються до React-елемента через атрибут `ref`. Рефи визначаються як властивість Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.
+Рефи створюються за допомогою виклику методу `React.createRef()` та приєднюються до React-елемента через атрибут `ref`. Рефи зазвичай зберігають як властивість екземпляра компонента під час створення, для того щоб мати доступ до рефа у будь-якому методі компонента.
 
 ```javascript{4,7}
 class MyComponent extends React.Component {
@@ -51,9 +51,9 @@ class MyComponent extends React.Component {
 }
 ```
 
-### Accessing Refs {#accessing-refs}
+### Доступ до рефів {#accessing-refs}
 
-When a ref is passed to an element in `render`, a reference to the node becomes accessible at the `current` attribute of the ref.
+Коли реф передається елементу в методі `render`, ви отримуєте доступ до посилання на вузол через властивість `.current` цього рефа.
 
 ```javascript
 const node = this.myRef.current;
@@ -61,9 +61,9 @@ const node = this.myRef.current;
 
 Значення рефа може відрізнятися в залежності від типу вузла:
 
-- Коли атрибут `ref` визначений у HTML-елемента, тоді `ref`, що створений у конструкторі за допомогою методу `React.createRef()`, отримає доступ до відповідого DOM-елемента через свою властивість `current`.
-- Коли атрибут `ref` визначений у компонента користувача, тоді об'єкт `ref` отримає посилання на вмонтований через його властивіть `current`. object receives the mounted instance of the component as its `current`.
-- **You may not use the `ref` attribute on function components** because they don't have instances.
+- Коли атрибут `ref` визначений у HTML-елемента, тоді `ref`, що створений у конструкторі за допомогою методу `React.createRef()`, отримує доступ до відповідого DOM-елемента через свою властивість `.current`.
+- Коли атрибут `ref` визначений у компонента користувача, тоді об'єкт `ref` у свою властивість `.current` отримує посилання на вмонтований екземпляр компонента.
+- **Заборонено використовувати атрибут `ref` до функціональних компонентах**, тому що у них немає екземплярів.
 
 На прикладах нижче можна побачити різницю.
 
@@ -87,7 +87,7 @@ class CustomTextInput extends React.Component {
   }
 
   render() {
-    // вкажемо React, що ми хочемо зв'язати реф елементу <input>
+    // вкажемо React, що ми хочемо зв'язати реф елемента <input>
     // з `textInput`, що був визначений в конструкторі
     return (
       <div>
@@ -105,11 +105,11 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-React зв'яже властисть `current` з DOM-елементом, коли компонент буде вмонтований, та встановить назад в `null`, коли компонент буде прибрано з DOM. Оновлення `ref` відбувається перед `componentDidMount` або `componentDidUpdate`.
+React зв'яже властивість `.current` з DOM-елементом, коли компонент буде вмонтований, та встановить назад в `null`, коли компонент буде прибрано з DOM. Оновлення `ref` відбувається перед `componentDidMount` або `componentDidUpdate`.
 
 #### Застосування рефу до компонента {#adding-a-ref-to-a-class-component}
 
-Якби ми захотіли обернути передній `CustomTextInput`, щоб симулювати натискання по ньому одразу після вмонтування, ми могли б використати реф, щоб отримати доступ до користувацького поля введення та виклакати його метод `focusTextInput` напряму:
+Якби ми захотіли обернути попередній компонент `CustomTextInput`, щоб симулювати натискання по ньому одразу після вмонтування, ми могли б використати реф, щоб отримати доступ до користувацького поля введення та виклакати його метод `focusTextInput` напряму:
 
 ```javascript{4,8,13}
 class AutoFocusTextInput extends React.Component {
@@ -140,7 +140,7 @@ class CustomTextInput extends React.Component {
 
 #### Рефи та функціональні компоненти {#refs-and-function-components}
 
-**Ви не зможете застосувати атрибут `ref` до функціональних компонентів**, тому що у них немає екзеплярів:
+**Заборонено застосовувати атрибут `ref` до функціональних компонентів**, тому що у них немає екзеплярів:
 
 ```javascript{1,8,13}
 function MyFunctionComponent() {
@@ -161,7 +161,7 @@ class Parent extends React.Component {
 }
 ```
 
-Ви маєте перетворити компонент в клас, якщо ви хочете використовувати реф для нього, так само як ви б робили, коли вам потрібні методи життєвого циклу або стан.
+Ви маєте перетворити компонент в клас, якщо ви хочете скористатися рефом, так само як ви б робили, коли вам потрібні методи життєвого циклу або стан.
 
 Проте ви можете **використовувати атрибут `ref` в середині функціональних компонентів** за умови, що ви визначаєте їх на DOM-елементах або класових компонентах:
 
@@ -189,23 +189,23 @@ function CustomTextInput(props) {
 }
 ```
 
-### Підйом DOM рефів у батьківський компонент{#exposing-dom-refs-to-parent-components}
+### Передача DOM-рефів батьківським компонентам {#exposing-dom-refs-to-parent-components}
 
-У рідкісних випадках, ви можете захотіти мати доступ до DOM вузлів нащадків з батьківського компонента. Зазвичай так нерекомендовано робити, тому що це руйнує інкапсуляцію компонентів, але може бути використано для зміни фокусу або визначення розмірів або положення DOM вузлів нащадка.
+У рідкісних випадках, ви можете захотіти мати доступ до DOM-вузлів нащадків з батьківського компонента. Зазвичай так нерекомендовано робити, тому що це руйнує інкапсуляцію компонентів, але може бути використано для зміни фокусу або визначення розмірів або положення DOM-вузлів нащадка.
 
-While you could [add a ref to the child component](#adding-a-ref-to-a-class-component), this is not an ideal solution, as you would only get a component instance rather than a DOM node. Additionally, this wouldn't work with function components.
+[Додавання рефу до класового компоненту](#adding-a-ref-to-a-class-component) - неідеальне рішення, тому що ви отримаєте посилання на екземпляр класу, а не на DOM-вузол. Також це не спрацює з функціональними компонентами.
 
-Якщо ви користуєтеся React 16.3 або вище, ми рекомендуємо використовувати [перенаправлення рефів](/docs/forwarding-refs.html) для цих задач. **Ref forwarding lets components opt into exposing any child component's ref as their own**. Ви можете знайти детальний приклад підйому DOM вузлів нащадка у батьківський компонент [у розділі перенаправлення рефів](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
+Якщо ви користуєтеся React 16.3 або вище, ми рекомендуємо використовувати [перенаправлення рефів](/docs/forwarding-refs.html) для цих задач. **Ref forwarding lets components opt into exposing any child component's ref as their own**. Ви можете знайти детальний приклад передачі DOM-вузлів нащадків батьківському компоненту [у розділі перенаправлення рефів](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
 
 Якщо ви користуєтеся React 16.2 або нижче, або ви потребуєте більшої гнучкості, ніж вам дає перенаправлення рефів, ви можете скористатися [альтернативним підходом](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) та явно передати реф як проп з іменем відмінним від `ref`.
 
-Коли можливо, ми не рекомендуємо підхід підйом DOM вузлів, але це може When possible, we advise against exposing DOM nodes, but it can be a useful escape hatch. Note that this approach requires you to add some code to the child component. If you have absolutely no control over the child component implementation, your last option is to use [`findDOMNode()`](/docs/react-dom.html#finddomnode), but it is discouraged and deprecated in [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
+Ми не рекомендуємо підхід передачі DOM вузлів, але він може стати рятувальним жилетом. Помітьте, що цей підхід потребує написання додаткового коду для дочірніх комопонетів. Якщо у вас взагалі немає котролю над реалізацією дочірніх компонентів, то ваш остання можливість - скористатися методом [`findDOMNode()`](/docs/react-dom.html#finddomnode), але цей метод нерекомендований та вважається застарілим у [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
 
-### Рефи через функції зворотнього виклику {#callback-refs}
+### Рефи зворотнього виклику {#callback-refs}
 
-React також підтримує інший варіант ініціалізації рефів, що називається "callback refs" (рефи через функції зворотнього виклику), що дає більший контроль над which gives more fine-grain control over when refs are set and unset.
+React також підтримує інший варіант ініціалізації рефів, що називається "рефи зворотнього виклику" ("callback refs"), що дає більший контроль над процесом визначення та очищення рефів.
 
-На відміну від передачі через атрибути `ref`, що створений функцією `createRef()`, ви передаєте функцію. Функція отримує екземпляр компонента чи HTML DOM-елемент у вигляді аргумента, яким можна скористатися або зберігти.
+На відміну від передачі рефа через атрибути `ref`, що створений функцією `createRef()`, ви передаєте функцію. Функція отримує екземпляр компонента чи DOM-елемент у вигляді аргумента, який можна використати або зберігти.
 
 Приклад нижче реалізує поширений паттерн: використання функції зворотнього виклику у `ref` для отримання та зберігання посилання на DOM-вузл в екземплері.
 
@@ -227,7 +227,7 @@ class CustomTextInput extends React.Component {
   }
 
   componentDidMount() {
-    // автофокус на полі введення при монтуванні
+    // автоматичний фокус на полі введення при монтуванні
     this.focusTextInput();
   }
 
@@ -251,9 +251,9 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-React виконає функцію зворотнього виклику `ref` з DOM-елементом, коли компонент буде вмонтований, та виконає її зі значення `null`, коли компонент буде прибрано. Рефи гарантують актуальність перед викликом метода `componentDidMount` або `componentDidUpdate`.
+React викличе функцію зворотнього виклику `ref` з DOM-елементом, коли компонент буде вмонтований, та виконає її зі значення `null`, коли компонент буде прибрано. Рефи гарантують актуальність перед викликом метода `componentDidMount` або `componentDidUpdate`.
 
-Ми можете передавати You can pass callback refs between components like you can with object refs that were created with `React.createRef()`.
+Ми можете передавати реф зворотнього виклику між компонентами так само, як і реф, що створюється викликом функції `React.createRef()`.
 
 ```javascript{4,13}
 function CustomTextInput(props) {
@@ -275,16 +275,16 @@ class Parent extends React.Component {
 }
 ```
 
-In the example above, `Parent` passes its ref callback as an `inputRef` prop to the `CustomTextInput`, and the `CustomTextInput` passes the same function as a special `ref` attribute to the `<input>`. As a result, `this.inputElement` in `Parent` will be set to the DOM node corresponding to the `<input>` element in the `CustomTextInput`.
+У попередньому прикладі, `Parent` передає свій реф зворотнього виклику як проп `inputRef` нащадку `CustomTextInput`, і вже `CustomTextInput` передає цю функцію як спеціалізований атрибут `ref` до `<input>`. Як результат, `this.inputElement` у `Parent` буде посиланням на DOM-вузол, що відповідає елементу `<input>` у компонента `CustomTextInput`.
 
 ### Застраліле API: рядкові рефи {#legacy-api-string-refs}
 
-Якщо ви працювали з React раніше, ви мабуть знайомі зі старим API, де атрибут `ref` - рядок, наприклад `"textInput"`, та DOM вузол доступний через `this.refs.textInput`. Ми не радимо користуватися ним, тому що рядкові рефи мають [деякі проблеми](https://github.com/facebook/react/pull/8333#issuecomment-271648615), також це API вважається застарілим, та **ймовірно буде видалено в одній з майбутніх версій**.
+Якщо ви працювали з React раніше, ви мабуть знайомі зі старим API, де атрибут `ref` може бути рядком, наприклад `"textInput"`, в той самий час DOM вузол стає доступний через `this.refs.textInput`. Ми не радимо користуватися ним, тому що рядкові рефи мають [деякі проблеми](https://github.com/facebook/react/pull/8333#issuecomment-271648615), також це API вважається застарілим, та **ймовірно буде видалено в одній з майбутніх версій**.
 
 > Примітка
 >
-> Якщо ви досі користуєте `this.refs.textInput` для доступу до рефів, ми рекомендуємо натомість користовуватися [функціями зворотнього виклику](#callback-refs) або [`createRef` API](#creating-refs).
+> Якщо ви досі користуєте `this.refs.textInput` для доступу до рефів, ми рекомендуємо натомість користовуватися [рефами зворотнього виклику](#callback-refs) або [`createRef` API](#creating-refs).
 
-### Застереження with callback refs {#caveats-with-callback-refs}
+### Застереження до рефів зворотнього виклику {#caveats-with-callback-refs}
 
- Якщо `ref` визначено як інлайнову функцію, то вона буде виклакана двічі протягом оновлень, перший раз з `null`, потім з посиланням на DOM-елемент. Це відбувається, тому що створюється новий екземпляр функції під час кожного рендеру, так як React потребує очистити старий реф та встановити новий. Щоб запобігти цьому, передайте `ref` метод класу, проте в більшості випадків це немає значення.
+ Якщо `ref` визначено як інлайнову функцію, то вона буде виклакана двічі протягом оновлень, перший раз з `null`, потім з посиланням на DOM-елемент. Це відбувається, тому що створюється новий екземпляр функції під час кожного рендеру, так як React потребує очистити старий реф та встановити новий. Щоб запобігти цьому, просто передайте в `ref` метод класу, проте в більшості випадків це немає значення.

From 91475515d084715e0ff5ab2a05d2bdb65eb1f51b Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Tue, 30 Apr 2019 11:09:42 +0300
Subject: [PATCH 16/22] translate Refs and the DOM - part 4

---
 content/docs/refs-and-the-dom.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md
index 7955baf4b..1b52927ef 100644
--- a/content/docs/refs-and-the-dom.md
+++ b/content/docs/refs-and-the-dom.md
@@ -31,13 +31,13 @@ permalink: docs/refs-and-the-dom.html
 
 Мабуть першим вашим бажанням буде використовувати рефи для того, щоб "все працювало" у вашому додатку. Якщо це так, зупиніться та подумайте більш критично про те, який з компонентів в ієрархії має контролювати стан. Зазвичай, стає зрозуміло, що правильне місце для контролю стану лежить на верхніх рівнях ієрархії. Більш детально ознайомтеся з розділом [Підняття стану](/docs/lifting-state-up.html) для прикладів такої поведінки.
 
-> Примітка
+> Примітка:
 >
 > Приклади нижче були оновлені для використання `React.createRef()` API, що з'явилося у React 16.3. Якщо ви користуєтеся більш старішою версією React, ми рекомендуємо використувати [рефи зворотнього виклику](#callback-refs).
 
 ### Створення рефів {#creating-refs}
 
-Рефи створюються за допомогою виклику методу `React.createRef()` та приєднюються до React-елемента через атрибут `ref`. Рефи зазвичай зберігають як властивість екземпляра компонента під час створення, для того щоб мати доступ до рефа у будь-якому методі компонента.
+Рефи створюються за допомогою виклику методу `React.createRef()` та приєднюються до React-елемента через атрибут `ref`. Рефи зазвичай зберігають як властивість екземпляру компонента під час створення, для того щоб мати доступ до рефа у будь-якому методі компонента.
 
 ```javascript{4,7}
 class MyComponent extends React.Component {
@@ -195,9 +195,9 @@ function CustomTextInput(props) {
 
 [Додавання рефу до класового компоненту](#adding-a-ref-to-a-class-component) - неідеальне рішення, тому що ви отримаєте посилання на екземпляр класу, а не на DOM-вузол. Також це не спрацює з функціональними компонентами.
 
-Якщо ви користуєтеся React 16.3 або вище, ми рекомендуємо використовувати [перенаправлення рефів](/docs/forwarding-refs.html) для цих задач. **Ref forwarding lets components opt into exposing any child component's ref as their own**. Ви можете знайти детальний приклад передачі DOM-вузлів нащадків батьківському компоненту [у розділі перенаправлення рефів](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
+Якщо ви користуєтеся React 16.3 або новіше, ми рекомендуємо використовувати [перенаправлення рефів](/docs/forwarding-refs.html) для цих задач. **Ref forwarding lets components opt into exposing any child component's ref as their own**. Ви можете знайти детальний приклад передачі DOM-вузлів нащадків батьківському компоненту [у розділі перенаправлення рефів](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
 
-Якщо ви користуєтеся React 16.2 або нижче, або ви потребуєте більшої гнучкості, ніж вам дає перенаправлення рефів, ви можете скористатися [альтернативним підходом](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) та явно передати реф як проп з іменем відмінним від `ref`.
+Якщо ви користуєтеся React 16.2 або старіше, або ви потребуєте більшої гнучкості, ніж вам дає перенаправлення рефів, ви можете скористатися [альтернативним підходом](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) та явно передати реф як проп з іменем відмінним від `ref`.
 
 Ми не рекомендуємо підхід передачі DOM вузлів, але він може стати рятувальним жилетом. Помітьте, що цей підхід потребує написання додаткового коду для дочірніх комопонетів. Якщо у вас взагалі немає котролю над реалізацією дочірніх компонентів, то ваш остання можливість - скористатися методом [`findDOMNode()`](/docs/react-dom.html#finddomnode), але цей метод нерекомендований та вважається застарілим у [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
 
@@ -281,7 +281,7 @@ class Parent extends React.Component {
 
 Якщо ви працювали з React раніше, ви мабуть знайомі зі старим API, де атрибут `ref` може бути рядком, наприклад `"textInput"`, в той самий час DOM вузол стає доступний через `this.refs.textInput`. Ми не радимо користуватися ним, тому що рядкові рефи мають [деякі проблеми](https://github.com/facebook/react/pull/8333#issuecomment-271648615), також це API вважається застарілим, та **ймовірно буде видалено в одній з майбутніх версій**.
 
-> Примітка
+> Примітка:
 >
 > Якщо ви досі користуєте `this.refs.textInput` для доступу до рефів, ми рекомендуємо натомість користовуватися [рефами зворотнього виклику](#callback-refs) або [`createRef` API](#creating-refs).
 

From eb9e7f13be7eab6e3cc7eeb5b60d70593edd1d2c Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Tue, 30 Apr 2019 11:34:09 +0300
Subject: [PATCH 17/22] translate Refs and the DOM - part 6

---
 content/docs/refs-and-the-dom.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md
index 1b52927ef..0d2d69980 100644
--- a/content/docs/refs-and-the-dom.md
+++ b/content/docs/refs-and-the-dom.md
@@ -1,6 +1,6 @@
 ---
 id: refs-and-the-dom
-title: Refs and the DOM
+title: Рефи та DOM
 redirect_from:
   - "docs/working-with-the-browser.html"
   - "docs/more-about-refs.html"

From 6f1473db78642a6e8ab3010e5183b7a9a7936223 Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Wed, 1 May 2019 18:45:41 +0300
Subject: [PATCH 18/22] translate Refs and the DOM - review fix

---
 content/docs/refs-and-the-dom.md | 42 ++++++++++++++++----------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md
index 0d2d69980..6a698eecf 100644
--- a/content/docs/refs-and-the-dom.md
+++ b/content/docs/refs-and-the-dom.md
@@ -13,7 +13,7 @@ permalink: docs/refs-and-the-dom.html
 
 Рефи надають доступ до DOM-вузлів чи React-елементів, що створюються під час рендеру.
 
-У звичайному потоці даних React батьківські компоненти можуть взаємодіяти з дітьми тільки через [пропси](/docs/components-and-props.html). Щоб модифікувати нащадка, ви маєте повторно відрендерити його з новими пропсами. Проте існують ситуації, коли вам потрібно імперативно змінити нащадка поза звичайного потоку даних. Нащадок, щоб бути зміненим, має бути екземпляром React-компонента або DOM-елементом. В обох випадках React надає можливість обійти звичайний потік даних.
+У звичайному потоці даних, React батьківські компоненти можуть взаємодіяти з дітьми тільки через [пропси](/docs/components-and-props.html). Щоб модифікувати нащадка, ви маєте повторно відрендерити його з новими пропсами. Проте існують ситуації, коли вам потрібно імперативно змінити нащадка поза межами звичайного потоку даних. Нащадок, щоб бути зміненим, має бути екземпляром React-компонента або DOM-елементом. В обох випадках React надає можливість обійти звичайний потік даних.
 
 ### Коли використовувати рефи {#when-to-use-refs}
 
@@ -33,11 +33,11 @@ permalink: docs/refs-and-the-dom.html
 
 > Примітка:
 >
-> Приклади нижче були оновлені для використання `React.createRef()` API, що з'явилося у React 16.3. Якщо ви користуєтеся більш старішою версією React, ми рекомендуємо використувати [рефи зворотнього виклику](#callback-refs).
+> Приклади нижче були оновлені для використання `React.createRef()` API, що з'явилося у React 16.3. Якщо ви користуєтеся попередніми версіями React, ми рекомендуємо використовувати [рефи зворотнього виклику](#callback-refs).
 
 ### Створення рефів {#creating-refs}
 
-Рефи створюються за допомогою виклику методу `React.createRef()` та приєднюються до React-елемента через атрибут `ref`. Рефи зазвичай зберігають як властивість екземпляру компонента під час створення, для того щоб мати доступ до рефа у будь-якому методі компонента.
+Рефи створюються за допомогою виклику методу `React.createRef()` та приєднуються до React-елемента через атрибут `ref`. Рефи зазвичай зберігають як властивість екземпляру компонента під час створення для того, щоб мати доступ до рефа у будь-якому методі компонента.
 
 ```javascript{4,7}
 class MyComponent extends React.Component {
@@ -59,11 +59,11 @@ class MyComponent extends React.Component {
 const node = this.myRef.current;
 ```
 
-Значення рефа може відрізнятися в залежності від типу вузла:
+Значення рефа може відрізнятися залежно від типу вузла:
 
 - Коли атрибут `ref` визначений у HTML-елемента, тоді `ref`, що створений у конструкторі за допомогою методу `React.createRef()`, отримує доступ до відповідого DOM-елемента через свою властивість `.current`.
-- Коли атрибут `ref` визначений у компонента користувача, тоді об'єкт `ref` у свою властивість `.current` отримує посилання на вмонтований екземпляр компонента.
-- **Заборонено використовувати атрибут `ref` до функціональних компонентах**, тому що у них немає екземплярів.
+- Коли атрибут `ref` визначений у компонента користувача, тоді об'єкт `ref` у свою властивість `.current` отримує посилання на примонтований екземпляр компонента.
+- **Заборонено використовувати атрибут `ref` до функціональних компонентів**, тому що у них немає екземплярів.
 
 На прикладах нижче можна побачити різницю.
 
@@ -105,11 +105,11 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-React зв'яже властивість `.current` з DOM-елементом, коли компонент буде вмонтований, та встановить назад в `null`, коли компонент буде прибрано з DOM. Оновлення `ref` відбувається перед `componentDidMount` або `componentDidUpdate`.
+React зв'яже властивість `.current` з DOM-елементом, коли компонент буде примонтований, та встановить назад в `null`, коли компонент буде прибрано з DOM. Оновлення `ref` відбувається перед `componentDidMount` або `componentDidUpdate`.
 
 #### Застосування рефу до компонента {#adding-a-ref-to-a-class-component}
 
-Якби ми захотіли обернути попередній компонент `CustomTextInput`, щоб симулювати натискання по ньому одразу після вмонтування, ми могли б використати реф, щоб отримати доступ до користувацького поля введення та виклакати його метод `focusTextInput` напряму:
+Якби ми захотіли обернути попередній компонент `CustomTextInput`, щоб симулювати натискання по ньому відразу після монтування, ми могли б використати реф, щоб отримати доступ до користувацького поля введення та викликати його метод `focusTextInput` напряму:
 
 ```javascript{4,8,13}
 class AutoFocusTextInput extends React.Component {
@@ -130,7 +130,7 @@ class AutoFocusTextInput extends React.Component {
 }
 ```
 
-Зауважте, що це працює тільки, якщо `CustomTextInput` визначений як клас:
+Зауважте, що це працює тільки якщо `CustomTextInput` визначений як клас:
 
 ```js{1}
 class CustomTextInput extends React.Component {
@@ -191,23 +191,23 @@ function CustomTextInput(props) {
 
 ### Передача DOM-рефів батьківським компонентам {#exposing-dom-refs-to-parent-components}
 
-У рідкісних випадках, ви можете захотіти мати доступ до DOM-вузлів нащадків з батьківського компонента. Зазвичай так нерекомендовано робити, тому що це руйнує інкапсуляцію компонентів, але може бути використано для зміни фокусу або визначення розмірів або положення DOM-вузлів нащадка.
+У рідкісних випадках, ви можете захотіти мати доступ до DOM-вузлів нащадків з батьківського компонента. Зазвичай, так робити не рекомендується, тому що це руйнує інкапсуляцію компонентів, але може бути використано для зміни фокусу або визначення розмірів або положення DOM-вузлів нащадка.
 
 [Додавання рефу до класового компоненту](#adding-a-ref-to-a-class-component) - неідеальне рішення, тому що ви отримаєте посилання на екземпляр класу, а не на DOM-вузол. Також це не спрацює з функціональними компонентами.
 
-Якщо ви користуєтеся React 16.3 або новіше, ми рекомендуємо використовувати [перенаправлення рефів](/docs/forwarding-refs.html) для цих задач. **Ref forwarding lets components opt into exposing any child component's ref as their own**. Ви можете знайти детальний приклад передачі DOM-вузлів нащадків батьківському компоненту [у розділі перенаправлення рефів](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
+Якщо ви користуєтеся версією React 16.3 або вище, ми рекомендуємо використовувати [перенаправлення рефів](/docs/forwarding-refs.html) для цих задач. **Ref forwarding lets components opt into exposing any child component's ref as their own**. Ви можете знайти детальний приклад передачі DOM-вузлів нащадків батьківському компоненту [у розділі перенаправлення рефів](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
 
-Якщо ви користуєтеся React 16.2 або старіше, або ви потребуєте більшої гнучкості, ніж вам дає перенаправлення рефів, ви можете скористатися [альтернативним підходом](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) та явно передати реф як проп з іменем відмінним від `ref`.
+Якщо ви користуєтеся версією React 16.2 або нижче, або ви потребуєте більшої гнучкості, ніж вам дає перенаправлення рефів, ви можете скористатися [альтернативним підходом](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) та явно передати реф як проп з іменем відмінним від `ref`.
 
-Ми не рекомендуємо підхід передачі DOM вузлів, але він може стати рятувальним жилетом. Помітьте, що цей підхід потребує написання додаткового коду для дочірніх комопонетів. Якщо у вас взагалі немає котролю над реалізацією дочірніх компонентів, то ваш остання можливість - скористатися методом [`findDOMNode()`](/docs/react-dom.html#finddomnode), але цей метод нерекомендований та вважається застарілим у [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
+Ми не рекомендуємо підхід передачі DOM вузлів, але він може стати рятувальним жилетом. Зверніть увагу, що цей підхід потребує написання додаткового коду для дочірніх комопонетів. Якщо у вас взагалі немає котролю над реалізацією дочірніх компонентів, то ваш остання можливість - скористатися методом [`findDOMNode()`](/docs/react-dom.html#finddomnode), але цей метод нерекомендований та вважається застарілим у [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
 
 ### Рефи зворотнього виклику {#callback-refs}
 
 React також підтримує інший варіант ініціалізації рефів, що називається "рефи зворотнього виклику" ("callback refs"), що дає більший контроль над процесом визначення та очищення рефів.
 
-На відміну від передачі рефа через атрибути `ref`, що створений функцією `createRef()`, ви передаєте функцію. Функція отримує екземпляр компонента чи DOM-елемент у вигляді аргумента, який можна використати або зберігти.
+На відміну від передачі рефа, що створений функцією `createRef()`, через атрибути `ref`, ви передаєте функцію. Функція отримує екземпляр компонента чи DOM-елемент у вигляді аргумента, який можна використати або зберегти.
 
-Приклад нижче реалізує поширений паттерн: використання функції зворотнього виклику у `ref` для отримання та зберігання посилання на DOM-вузл в екземплері.
+Приклад нижче реалізує поширений паттерн: використання функції зворотнього виклику у `ref` для зберігання посилання на DOM-вузл в екземплері.
 
 ```javascript{5,7-9,11-14,19,29,34}
 class CustomTextInput extends React.Component {
@@ -251,9 +251,9 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-React викличе функцію зворотнього виклику `ref` з DOM-елементом, коли компонент буде вмонтований, та виконає її зі значення `null`, коли компонент буде прибрано. Рефи гарантують актуальність перед викликом метода `componentDidMount` або `componentDidUpdate`.
+React викличе функцію зворотнього виклику `ref` з DOM-елементом, коли компонент буде примонтований, та виконає її зі значення `null`, коли компонент буде прибрано. Рефи гарантують актуальність перед викликом метода `componentDidMount` або `componentDidUpdate`.
 
-Ми можете передавати реф зворотнього виклику між компонентами так само, як і реф, що створюється викликом функції `React.createRef()`.
+Ми можете передавати реф зворотнього виклику між компонентами так само як і реф, що створюється викликом функції `React.createRef()`.
 
 ```javascript{4,13}
 function CustomTextInput(props) {
@@ -277,14 +277,14 @@ class Parent extends React.Component {
 
 У попередньому прикладі, `Parent` передає свій реф зворотнього виклику як проп `inputRef` нащадку `CustomTextInput`, і вже `CustomTextInput` передає цю функцію як спеціалізований атрибут `ref` до `<input>`. Як результат, `this.inputElement` у `Parent` буде посиланням на DOM-вузол, що відповідає елементу `<input>` у компонента `CustomTextInput`.
 
-### Застраліле API: рядкові рефи {#legacy-api-string-refs}
+### Застралий API: рядкові рефи {#legacy-api-string-refs}
 
-Якщо ви працювали з React раніше, ви мабуть знайомі зі старим API, де атрибут `ref` може бути рядком, наприклад `"textInput"`, в той самий час DOM вузол стає доступний через `this.refs.textInput`. Ми не радимо користуватися ним, тому що рядкові рефи мають [деякі проблеми](https://github.com/facebook/react/pull/8333#issuecomment-271648615), також це API вважається застарілим, та **ймовірно буде видалено в одній з майбутніх версій**.
+Якщо ви працювали з React раніше, ви мабуть знайомі зі старим API, де атрибут `ref` може бути рядком, наприклад `"textInput"`, в той самий час DOM вузол стає доступний через `this.refs.textInput`. Ми не радимо користуватися ним, тому що рядкові рефи мають [деякі проблеми](https://github.com/facebook/react/pull/8333#issuecomment-271648615), також цей API вважається застарілим, та **ймовірно буде видалений в одній з майбутніх версій**.
 
 > Примітка:
 >
-> Якщо ви досі користуєте `this.refs.textInput` для доступу до рефів, ми рекомендуємо натомість користовуватися [рефами зворотнього виклику](#callback-refs) або [`createRef` API](#creating-refs).
+> Якщо ви досі користуєтесь `this.refs.textInput` для доступу до рефів, ми рекомендуємо натомість користовуватися [рефами зворотнього виклику](#callback-refs) або [`createRef` API](#creating-refs).
 
 ### Застереження до рефів зворотнього виклику {#caveats-with-callback-refs}
 
- Якщо `ref` визначено як інлайнову функцію, то вона буде виклакана двічі протягом оновлень, перший раз з `null`, потім з посиланням на DOM-елемент. Це відбувається, тому що створюється новий екземпляр функції під час кожного рендеру, так як React потребує очистити старий реф та встановити новий. Щоб запобігти цьому, просто передайте в `ref` метод класу, проте в більшості випадків це немає значення.
+ Якщо `ref` визначено як вбудовану функцію, то вона буде виклакана двічі протягом оновлень, перший раз з `null`, потім з посиланням на DOM-елемент. Це відбувається, тому що створюється новий екземпляр функції під час кожного рендеру, так як React потребує очистити старий реф та встановити новий. Щоб запобігти цьому, просто передайте в `ref` метод класу, але зверніть увагу, що в більшості випадків це не має значення.

From 93b59920b631d2805d114190bcd0cf6f9927d1f6 Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Thu, 9 May 2019 22:30:59 +0300
Subject: [PATCH 19/22] translate Refs and the Dom - review fix

---
 content/docs/refs-and-the-dom.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md
index 6a698eecf..185ad66df 100644
--- a/content/docs/refs-and-the-dom.md
+++ b/content/docs/refs-and-the-dom.md
@@ -53,7 +53,7 @@ class MyComponent extends React.Component {
 
 ### Доступ до рефів {#accessing-refs}
 
-Коли реф передається елементу в методі `render`, ви отримуєте доступ до посилання на вузол через властивість `.current` цього рефа.
+Коли реф передається елементу в методі `render`, ви отримуєте доступ до посилання на вузол через властивість `current` цього рефа.
 
 ```javascript
 const node = this.myRef.current;
@@ -61,8 +61,8 @@ const node = this.myRef.current;
 
 Значення рефа може відрізнятися залежно від типу вузла:
 
-- Коли атрибут `ref` визначений у HTML-елемента, тоді `ref`, що створений у конструкторі за допомогою методу `React.createRef()`, отримує доступ до відповідого DOM-елемента через свою властивість `.current`.
-- Коли атрибут `ref` визначений у компонента користувача, тоді об'єкт `ref` у свою властивість `.current` отримує посилання на примонтований екземпляр компонента.
+- Коли атрибут `ref` визначений у HTML-елемента, тоді `ref`, що створений у конструкторі за допомогою методу `React.createRef()`, отримує доступ до відповідого DOM-елемента через свою властивість `current`.
+- Коли атрибут `ref` визначений у компонента користувача, тоді об'єкт `ref` у свою властивість `current` отримує посилання на примонтований екземпляр компонента.
 - **Заборонено використовувати атрибут `ref` до функціональних компонентів**, тому що у них немає екземплярів.
 
 На прикладах нижче можна побачити різницю.
@@ -105,7 +105,7 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-React зв'яже властивість `.current` з DOM-елементом, коли компонент буде примонтований, та встановить назад в `null`, коли компонент буде прибрано з DOM. Оновлення `ref` відбувається перед `componentDidMount` або `componentDidUpdate`.
+React зв'яже властивість `current` з DOM-елементом, коли компонент буде примонтований, та встановить назад в `null`, коли компонент буде прибрано з DOM. Оновлення `ref` відбувається перед `componentDidMount` або `componentDidUpdate`.
 
 #### Застосування рефу до компонента {#adding-a-ref-to-a-class-component}
 
@@ -193,13 +193,13 @@ function CustomTextInput(props) {
 
 У рідкісних випадках, ви можете захотіти мати доступ до DOM-вузлів нащадків з батьківського компонента. Зазвичай, так робити не рекомендується, тому що це руйнує інкапсуляцію компонентів, але може бути використано для зміни фокусу або визначення розмірів або положення DOM-вузлів нащадка.
 
-[Додавання рефу до класового компоненту](#adding-a-ref-to-a-class-component) - неідеальне рішення, тому що ви отримаєте посилання на екземпляр класу, а не на DOM-вузол. Також це не спрацює з функціональними компонентами.
+[Додавання рефу до класового компоненту](#adding-a-ref-to-a-class-component) — неідеальне рішення, тому що ви отримаєте посилання на екземпляр класу, а не на DOM-вузол. Також це не спрацює з функціональними компонентами.
 
 Якщо ви користуєтеся версією React 16.3 або вище, ми рекомендуємо використовувати [перенаправлення рефів](/docs/forwarding-refs.html) для цих задач. **Ref forwarding lets components opt into exposing any child component's ref as their own**. Ви можете знайти детальний приклад передачі DOM-вузлів нащадків батьківському компоненту [у розділі перенаправлення рефів](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
 
 Якщо ви користуєтеся версією React 16.2 або нижче, або ви потребуєте більшої гнучкості, ніж вам дає перенаправлення рефів, ви можете скористатися [альтернативним підходом](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) та явно передати реф як проп з іменем відмінним від `ref`.
 
-Ми не рекомендуємо підхід передачі DOM вузлів, але він може стати рятувальним жилетом. Зверніть увагу, що цей підхід потребує написання додаткового коду для дочірніх комопонетів. Якщо у вас взагалі немає котролю над реалізацією дочірніх компонентів, то ваш остання можливість - скористатися методом [`findDOMNode()`](/docs/react-dom.html#finddomnode), але цей метод нерекомендований та вважається застарілим у [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
+Ми не рекомендуємо підхід передачі DOM вузлів, але він може стати рятувальним жилетом. Зверніть увагу, що цей підхід потребує написання додаткового коду для дочірніх комопонетів. Якщо у вас взагалі немає котролю над реалізацією дочірніх компонентів, то ваш остання можливість — скористатися методом [`findDOMNode()`](/docs/react-dom.html#finddomnode), але цей метод нерекомендований та вважається застарілим у [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
 
 ### Рефи зворотнього виклику {#callback-refs}
 

From b4e3393d5ec09d7ebb3fbb29d7be5c39bad0c372 Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Wed, 15 May 2019 14:03:26 +0300
Subject: [PATCH 20/22] translate Refs and the DOM - review's fix

---
 content/docs/refs-and-the-dom.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md
index 185ad66df..474debeea 100644
--- a/content/docs/refs-and-the-dom.md
+++ b/content/docs/refs-and-the-dom.md
@@ -13,7 +13,7 @@ permalink: docs/refs-and-the-dom.html
 
 Рефи надають доступ до DOM-вузлів чи React-елементів, що створюються під час рендеру.
 
-У звичайному потоці даних, React батьківські компоненти можуть взаємодіяти з дітьми тільки через [пропси](/docs/components-and-props.html). Щоб модифікувати нащадка, ви маєте повторно відрендерити його з новими пропсами. Проте існують ситуації, коли вам потрібно імперативно змінити нащадка поза межами звичайного потоку даних. Нащадок, щоб бути зміненим, має бути екземпляром React-компонента або DOM-елементом. В обох випадках React надає можливість обійти звичайний потік даних.
+У звичайному потоці даних React, батьківські компоненти можуть взаємодіяти з дітьми тільки через [пропси](/docs/components-and-props.html). Щоб модифікувати нащадка, ви маєте повторно відрендерити його з новими пропсами. Проте існують ситуації, коли вам потрібно імперативно змінити нащадка поза межами звичайного потоку даних. Нащадок, щоб бути зміненим, має бути екземпляром React-компонента або DOM-елементом. В обох випадках React надає можливість обійти звичайний потік даних.
 
 ### Коли використовувати рефи {#when-to-use-refs}
 
@@ -29,11 +29,11 @@ permalink: docs/refs-and-the-dom.html
 
 ### Не зловживайте рефами {#dont-overuse-refs}
 
-Мабуть першим вашим бажанням буде використовувати рефи для того, щоб "все працювало" у вашому додатку. Якщо це так, зупиніться та подумайте більш критично про те, який з компонентів в ієрархії має контролювати стан. Зазвичай, стає зрозуміло, що правильне місце для контролю стану лежить на верхніх рівнях ієрархії. Більш детально ознайомтеся з розділом [Підняття стану](/docs/lifting-state-up.html) для прикладів такої поведінки.
+Мабуть першим вашим бажанням буде використовувати рефи для того, щоб "все працювало" у вашому додатку. Якщо це так, зупиніться та подумайте більш критично про те, який з компонентів в ієрархії має контролювати стан. Зазвичай, стає зрозуміло, що правильне місце для контролю стану лежить на верхніх рівнях ієрархії. Більш детально ознайомтеся з розділом [Підйом стану](/docs/lifting-state-up.html) для прикладів такої поведінки.
 
 > Примітка:
 >
-> Приклади нижче були оновлені для використання `React.createRef()` API, що з'явилося у React 16.3. Якщо ви користуєтеся попередніми версіями React, ми рекомендуємо використовувати [рефи зворотнього виклику](#callback-refs).
+> Приклади нижче були оновлені для використання `React.createRef()` API, що з'явився у React 16.3. Якщо ви використуєте попередню версію React, ми рекомендуємо використовувати [рефи зворотнього виклику](#callback-refs).
 
 ### Створення рефів {#creating-refs}
 
@@ -63,7 +63,7 @@ const node = this.myRef.current;
 
 - Коли атрибут `ref` визначений у HTML-елемента, тоді `ref`, що створений у конструкторі за допомогою методу `React.createRef()`, отримує доступ до відповідого DOM-елемента через свою властивість `current`.
 - Коли атрибут `ref` визначений у компонента користувача, тоді об'єкт `ref` у свою властивість `current` отримує посилання на примонтований екземпляр компонента.
-- **Заборонено використовувати атрибут `ref` до функціональних компонентів**, тому що у них немає екземплярів.
+- **Заборонено використовувати атрибут `ref` з функціональними компонентами**, тому що у них немає екземплярів.
 
 На прикладах нижче можна побачити різницю.
 
@@ -81,7 +81,7 @@ class CustomTextInput extends React.Component {
   }
 
   focusTextInput() {
-    // Переведемо фокус на текстове поле введення, використовуючи нативне DOM API
+    // Переведемо фокус на текстове поле введення, використовуючи нативний DOM API
     // Примітка: ми використовуємо "current", щоб отримати DOM-вузол
     this.textInput.current.focus();
   }
@@ -105,7 +105,7 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-React зв'яже властивість `current` з DOM-елементом, коли компонент буде примонтований, та встановить назад в `null`, коли компонент буде прибрано з DOM. Оновлення `ref` відбувається перед `componentDidMount` або `componentDidUpdate`.
+React зв'яже властивість `current` з DOM-елементом, коли компонент буде примонтований, та встановить назад у `null`, коли компонент буде прибрано з DOM. Оновлення `ref` відбувається перед `componentDidMount` або `componentDidUpdate`.
 
 #### Застосування рефу до компонента {#adding-a-ref-to-a-class-component}
 
@@ -161,7 +161,7 @@ class Parent extends React.Component {
 }
 ```
 
-Ви маєте перетворити компонент в клас, якщо ви хочете скористатися рефом, так само як ви б робили, коли вам потрібні методи життєвого циклу або стан.
+Ви маєте перетворити компонент у клас, якщо ви хочете скористатися рефом, так само як ви робили б, коли вам потрібні методи життєвого циклу або стан.
 
 Проте ви можете **використовувати атрибут `ref` в середині функціональних компонентів** за умови, що ви визначаєте їх на DOM-елементах або класових компонентах:
 
@@ -199,7 +199,7 @@ function CustomTextInput(props) {
 
 Якщо ви користуєтеся версією React 16.2 або нижче, або ви потребуєте більшої гнучкості, ніж вам дає перенаправлення рефів, ви можете скористатися [альтернативним підходом](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) та явно передати реф як проп з іменем відмінним від `ref`.
 
-Ми не рекомендуємо підхід передачі DOM вузлів, але він може стати рятувальним жилетом. Зверніть увагу, що цей підхід потребує написання додаткового коду для дочірніх комопонетів. Якщо у вас взагалі немає котролю над реалізацією дочірніх компонентів, то ваш остання можливість — скористатися методом [`findDOMNode()`](/docs/react-dom.html#finddomnode), але цей метод нерекомендований та вважається застарілим у [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
+Ми не рекомендуємо підхід передачі DOM-вузлів, але він може стати рятувальним жилетом. Зверніть увагу, що цей підхід потребує написання додаткового коду для дочірніх комопонетів. Якщо у вас взагалі немає котролю над реалізацією дочірніх компонентів, то ваш остання можливість — скористатися методом [`findDOMNode()`](/docs/react-dom.html#finddomnode), але цей метод нерекомендований та вважається застарілим у [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
 
 ### Рефи зворотнього виклику {#callback-refs}
 
@@ -251,9 +251,9 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-React викличе функцію зворотнього виклику `ref` з DOM-елементом, коли компонент буде примонтований, та виконає її зі значення `null`, коли компонент буде прибрано. Рефи гарантують актуальність перед викликом метода `componentDidMount` або `componentDidUpdate`.
+React викличе функцію зворотнього виклику `ref` з DOM-елементом, коли компонент буде примонтований, та виконає її зі значенням `null`, коли компонент буде прибрано. Рефи гарантують актуальність перед викликом метода `componentDidMount` або `componentDidUpdate`.
 
-Ми можете передавати реф зворотнього виклику між компонентами так само як і реф, що створюється викликом функції `React.createRef()`.
+Ви можете передавати реф зворотнього виклику між компонентами так само як і реф, що створюється викликом функції `React.createRef()`.
 
 ```javascript{4,13}
 function CustomTextInput(props) {
@@ -277,9 +277,9 @@ class Parent extends React.Component {
 
 У попередньому прикладі, `Parent` передає свій реф зворотнього виклику як проп `inputRef` нащадку `CustomTextInput`, і вже `CustomTextInput` передає цю функцію як спеціалізований атрибут `ref` до `<input>`. Як результат, `this.inputElement` у `Parent` буде посиланням на DOM-вузол, що відповідає елементу `<input>` у компонента `CustomTextInput`.
 
-### Застралий API: рядкові рефи {#legacy-api-string-refs}
+### Застарілий API: рядкові рефи {#legacy-api-string-refs}
 
-Якщо ви працювали з React раніше, ви мабуть знайомі зі старим API, де атрибут `ref` може бути рядком, наприклад `"textInput"`, в той самий час DOM вузол стає доступний через `this.refs.textInput`. Ми не радимо користуватися ним, тому що рядкові рефи мають [деякі проблеми](https://github.com/facebook/react/pull/8333#issuecomment-271648615), також цей API вважається застарілим, та **ймовірно буде видалений в одній з майбутніх версій**.
+Якщо ви працювали з React раніше, ви мабуть знайомі зі старим API, де атрибут `ref` може бути рядком, наприклад `"textInput"`, в той самий час DOM-вузол стає доступним через `this.refs.textInput`. Ми не радимо користуватися ним, тому що рядкові рефи мають [деякі проблеми](https://github.com/facebook/react/pull/8333#issuecomment-271648615), також цей API вважається застарілим, та **ймовірно буде видалений в одній з майбутніх версій**.
 
 > Примітка:
 >

From 039a8f767f47e64221328dc13baa78d1a254aa66 Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <t.rodynenko@gmail.com>
Date: Wed, 15 May 2019 14:11:22 +0300
Subject: [PATCH 21/22] translate Refs and the DOM - translate sentence

---
 content/docs/refs-and-the-dom.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md
index 474debeea..b03212f03 100644
--- a/content/docs/refs-and-the-dom.md
+++ b/content/docs/refs-and-the-dom.md
@@ -195,7 +195,7 @@ function CustomTextInput(props) {
 
 [Додавання рефу до класового компоненту](#adding-a-ref-to-a-class-component) — неідеальне рішення, тому що ви отримаєте посилання на екземпляр класу, а не на DOM-вузол. Також це не спрацює з функціональними компонентами.
 
-Якщо ви користуєтеся версією React 16.3 або вище, ми рекомендуємо використовувати [перенаправлення рефів](/docs/forwarding-refs.html) для цих задач. **Ref forwarding lets components opt into exposing any child component's ref as their own**. Ви можете знайти детальний приклад передачі DOM-вузлів нащадків батьківському компоненту [у розділі перенаправлення рефів](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
+Якщо ви користуєтеся версією React 16.3 або вище, ми рекомендуємо використовувати [перенаправлення рефів](/docs/forwarding-refs.html) для цих задач. **Перенаправлення рефів дозволяє компонентам використовути рефи дітей як власні**. Ви можете знайти детальний приклад передачі DOM-вузлів нащадків батьківському компоненту [у розділі перенаправлення рефів](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
 
 Якщо ви користуєтеся версією React 16.2 або нижче, або ви потребуєте більшої гнучкості, ніж вам дає перенаправлення рефів, ви можете скористатися [альтернативним підходом](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) та явно передати реф як проп з іменем відмінним від `ref`.
 

From 580d066d9484f4b7095fe065fc7d6474fc880d21 Mon Sep 17 00:00:00 2001
From: Taras Rodynenko <tr@nustay.com>
Date: Mon, 20 May 2019 11:16:39 +0300
Subject: [PATCH 22/22] review comment's fix

---
 content/docs/refs-and-the-dom.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md
index b03212f03..9ea2d726a 100644
--- a/content/docs/refs-and-the-dom.md
+++ b/content/docs/refs-and-the-dom.md
@@ -195,7 +195,7 @@ function CustomTextInput(props) {
 
 [Додавання рефу до класового компоненту](#adding-a-ref-to-a-class-component) — неідеальне рішення, тому що ви отримаєте посилання на екземпляр класу, а не на DOM-вузол. Також це не спрацює з функціональними компонентами.
 
-Якщо ви користуєтеся версією React 16.3 або вище, ми рекомендуємо використовувати [перенаправлення рефів](/docs/forwarding-refs.html) для цих задач. **Перенаправлення рефів дозволяє компонентам використовути рефи дітей як власні**. Ви можете знайти детальний приклад передачі DOM-вузлів нащадків батьківському компоненту [у розділі перенаправлення рефів](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
+Якщо ви користуєтеся версією React 16.3 або вище, ми рекомендуємо використовувати [перенаправлення рефів](/docs/forwarding-refs.html) для цих задач. **Перенаправлення рефів дозволяє компонентам використовувати рефи дітей як власні**. Ви можете знайти детальний приклад передачі DOM-вузлів нащадків батьківському компоненту [у розділі перенаправлення рефів](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
 
 Якщо ви користуєтеся версією React 16.2 або нижче, або ви потребуєте більшої гнучкості, ніж вам дає перенаправлення рефів, ви можете скористатися [альтернативним підходом](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509) та явно передати реф як проп з іменем відмінним від `ref`.