[Документація/Основні поняття] Дрібні правки: читабельність, пунктуація тощо (#254)

Author: Maximaximum

content/docs/composition-vs-inheritance.md

@@ -35,7 +35,7 @@ function WelcomeDialog() {
   return (
     <FancyBorder color="blue">
       <h1 className="Dialog-title">
-        Welcome
+        Ласкаво просимо
       </h1>
       <p className="Dialog-message">
         Дякуємо, що завітали на борт нашого космічного корабля!
@@ -47,7 +47,7 @@ function WelcomeDialog() {
 
 **[Спробувати на CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)**
 
-Усе, що знаходиться між JSX тегом `<FancyBorder>` буде передане в `FancyBorder` компонент як `children` проп. Оскільки `FancyBorder` рендерить `{props.children}` всередині `<div>`, передані елементи з'являться у фінальному виводі.
+Усе, що знаходиться всередині JSX-тегу `<FancyBorder>`, буде передане в `FancyBorder` компонент як проп `children`. Оскільки `FancyBorder` рендерить `{props.children}` всередині `<div>`, передані елементи з'являться у фінальному виводі.
 
 Іноді, хоч і не так часто, вам може знадобитись кілька подібних "слотів" у компоненті. У таких випадках ви можети придумати власне рішення замість використання `children`:
 
@@ -169,4 +169,4 @@ class SignUpDialog extends React.Component {
 
 Пропси і композиція дають вам всю необхідну гнучкість, щоб налаштувати вигляд і поведінку компонента в явний і безпечний спосіб. Пам'ятайте, що компоненти можуть приймати довільні пропси, включно з примітивами, React-елементами чи функціями.
 
-Якщо ви хочете повторно використати функціональність, котра не відноситься до інтерфейсу користувача, ми рекомендуємо витягнути її в окремий JavaScript модуль. Компоненти можуть імпортувати його і використувати функцію, об'єкт чи клас без наслідування.
+Якщо ви хочете повторно використати функціональність, котра не стосується інтерфейсу користувача, ми рекомендуємо витягнути її в окремий JavaScript-модуль. Компоненти можуть імпортувати його і використувати функцію, об'єкт чи клас без наслідування.

content/docs/conditional-rendering.md

@@ -122,7 +122,7 @@ ReactDOM.render(
 
 ### Вбудовані умови if з логічним оператором && {#inline-if-with-logical--operator}
 
-Ви можете [вставляти будь-який вираз у JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) охопивши його у фігурні дужки. Це правило поширюється і на логічний оператор `&&` JavaScript, яким можно зручно вставити елемент в залежності від умови:
+Ви можете [вставляти будь-який вираз у JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx), охопивши його фігурними дужками. Це правило поширюється і на логічний оператор `&&` JavaScript, яким можна зручно вставити елемент в залежності від умови:
 
 ```js{6-10}
 function Mailbox(props) {
@@ -156,7 +156,7 @@ ReactDOM.render(
 
 Іншим методом для умовного рендерингу елементів є використання тернарного оператора [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).
 
-У наступному прикладі ми використаємо цей метод для того, щоб відрендерити маленький кусочок тексту.
+У наступному прикладі ми використаємо цей метод для того, щоб відрендерити маленький шматочок тексту.
 
 ```javascript{5}
 render() {
@@ -187,9 +187,9 @@ render() {
 
 Як у JavaScript, так і в React вибір синтаксису залежить від ваших уподобань і прийнятого у вашій команді стилю. Також пам'ятайте, що якщо якась умова стає занадто складною, можливо прийшов час [вилучити частину коду в окремий компонент](/docs/components-and-props.html#extracting-components).
 
-### Запобігання рендеринга компонента {#preventing-component-from-rendering}
+### Запобігання рендерингу компонента {#preventing-component-from-rendering}
 
-Доволі рідко може виникнути потреба в тому, щоб дозволити компоненту сховати себе, навіть якщо він вже був відрендереним іншим компонентом. Для цього поверніть `null` замість того, що зазвичай йде на рендеринг.
+Зрідка може виникнути потреба в тому, щоб дозволити компоненту сховати себе, навіть якщо він вже був відрендереним іншим компонентом. Для цього поверніть `null` замість того, що зазвичай йде на рендеринг.
 
 У наступному прикладі, `<WarningBanner />` буде відрендерено в залежності від значення пропу `warn`. Якщо значення пропу `false`, тоді компонент нічого не рендерить:
 

content/docs/forms.md

@@ -66,9 +66,9 @@ class NameForm extends React.Component {
 
 [**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
 
-Оскільки ми встановили атрибут `value` для нашого елементу форми, відображене значення завжди буде `this.state.value`, що робить стан React "джерелом правди". Оскільки `handleChange` працює при кожному натисканні клавіші для оновлення стану React, відображуване значення оновиться разом з вводом користувача.
+Оскільки ми встановили атрибут `value` для нашого елементу форми, відображене значення завжди буде `this.state.value`, що робить стан React "джерелом правди". Оскільки `handleChange` працює при кожному натисканні клавіші для оновлення стану React, відображуване значення оновлюватиметься разом із вводом користувача.
 
-У керованому компоненті значення поля введення завжди визначається станом React. Хоча це і означає, що ви повинні написати трохи більше коду, але тепер ви зможете передавати значення й іншим UI-елементам або скинути його з інших обробників подій.
+У керованому компоненті значення поля введення завжди визначається станом React. Хоч це і означає, що ви повинні написати трохи більше коду, але тепер ви зможете передавати значення й іншим UI-елементам або скидати його в інших обробниках подій.
 
 ## Тег textarea {#the-textarea-tag}
 
@@ -107,7 +107,7 @@ class EssayForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Essay:
+          Твір:
           <textarea value={this.state.value} onChange={this.handleChange} />
         </label>
         <input type="submit" value="Надіслати" />
@@ -186,17 +186,17 @@ class FlavorForm extends React.Component {
 
 ## Тег завантаження файлу {#the-file-input-tag}
 
-В HTML, `<input type="file">` дозволяє користувачеві вибрати один або кілька файлів зі сховища його пристрою, які будуть завантажені на сервер або маніпулювати ними за допомогою JavaScript через [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
+В HTML, `<input type="file">` дозволяє користувачеві вибрати зі сховища свого пристрою один або декілька файлів, які можна завантажити на сервер або обробити за допомогою JavaScript через [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
 
 ```html
 <input type="file" />
 ```
 
-Оскільки його значення доступне лише для читання, це **некерований** компонент у React. Це обговорюється разом з іншими некерованими компонентами [пізніше в документації](/docs/uncontrolled-components.html#the-file-input-tag).
+Оскільки його значення доступне лише для читання, це **некерований** компонент у React. Він розглядається, разом з іншими некерованими компонентами, [пізніше в документації](/docs/uncontrolled-components.html#the-file-input-tag).
 
 ## Обробка кількох полів введення даних {#handling-multiple-inputs}
 
-Коли вам потрібно обробляти декілька керованих елементів `input`, ви можете додати атрибут `name` до кожного елемента і дозволити функції-обробнику вибрати, що робити спираючись на значення `event.target.name`.
+Коли вам потрібно обробляти декілька керованих елементів `input`, ви можете додати атрибут `name` до кожного елемента і дозволити функції-обробнику вибрати, що робити, спираючись на значення `event.target.name`.
 
 Наприклад:
 
@@ -272,7 +272,7 @@ this.setState(partialState);
 
 Встановлення значення пропсу `value` в [керованому компоненті](/docs/forms.html#controlled-components) не дозволяє користувачеві змінювати введені дані, якщо ви цього не бажаєте. Якщо ви вказали `value`, але вхідні дані все ще можна редагувати, можливо, ви випадково встановили значення для `value` як `undefined` або `null`.
 
-Наступний код демонструє це. (Поле вводу спочатку заблоковане, але стає доступним для редагування після невеликої затримки.)
+Наступний код це демонструє. (Поле вводу спочатку заблоковане, але стає доступним для редагування після невеликої затримки.)
 
 ```javascript
 ReactDOM.render(<input value="привіт" />, mountNode);
@@ -289,4 +289,4 @@ setTimeout(function() {
 
 ## Повноцінні рішення {#fully-fledged-solutions}
 
-Якщо ви шукаєте комплексне рішення, включаючи перевірку, відстеження відвідуваних полів та обробку відправлення даних форми, то бібліотека [Formik](https://jaredpalmer.com/formik) є одним з популярних варіантів. Однак вона теж побудована на тих же принципах, що і керовані компоненти та керування станом — тож не нехтуйте їх вивченням.
+Якщо ви шукаєте комплексне рішення, включаючи перевірку, відстеження відвідуваних полів та обробку відправлення даних форми, то бібліотека [Formik](https://jaredpalmer.com/formik) є одним з популярних варіантів. Втім, вона теж побудована на тих же принципах, що і керовані компоненти та керування станом — тож не нехтуйте їх вивченням.