Resolve conflicts

Author: vldmrkl

content/docs/error-boundaries.md

@@ -97,11 +97,7 @@ React 16 в режимі розробки виводить в консоль в
 
 <img src="../images/docs/error-boundaries-stack-trace-line-numbers.png" style="max-width:100%" alt="Помилка з номерами рядків виявлена запобіжником">
 
-<<<<<<< HEAD
-Якщо ви не користуєтесь Create React App, то ви можете додати вручну [цей плагін для трансформації коду](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source) до вашої конфігурації Babel. Зверніть увагу, що він призначений лише для режиму розробки і **повинен бути відключений в продакшн**.
-=======
-If you don’t use Create React App, you can add [this plugin](https://www.npmjs.com/package/@babel/plugin-transform-react-jsx-source) manually to your Babel configuration. Note that it’s intended only for development and **must be disabled in production**.
->>>>>>> 1becaff62ae228d909b83ef6d08f48c01660300f
+Якщо ви не користуєтесь Create React App, то ви можете додати вручну [цей плагін для трансформації коду](https://www.npmjs.com/package/@babel/plugin-transform-react-jsx-source) до вашої конфігурації Babel. Зверніть увагу, що він призначений лише для режиму розробки і **повинен бути відключений в продакшн**.
 
 > Примітка
 >

content/docs/faq-styling.md

@@ -43,12 +43,7 @@ render() {
 
 ### Що таке CSS-in-JS? {#what-is-css-in-js}
 
-<<<<<<< HEAD
 "CSS-in-JS" відносяться до патерну, де CSS описується з використанням JavaScript замість описування у зовнішніх файлах.
-Ви можете ознайомитись з бібліотеками CSS-in-JS [тут](https://github.com/MicheleBertoli/css-in-js).
-=======
-"CSS-in-JS" refers to a pattern where CSS is composed using JavaScript instead of defined in external files.
->>>>>>> 1becaff62ae228d909b83ef6d08f48c01660300f
 
 _Зауважте, що цей функціонал не є частиною React, але надається сторонніми бібліотеками._ React не має чіткої точки зору стосовно визначення стилів; якщо ви маєте сумнів, гарним початком може бути визначення ваших стилів в окремому `*.css` файлі з посиланням на них використовуючи [`className`](/docs/dom-elements.html#classname).
 

content/docs/handling-events.md

@@ -53,11 +53,7 @@ function ActionLink() {
 }
 ```
 
-<<<<<<< HEAD
-Тут `e` - це синтетична подія. React визначає ці синтетичні події відповідно до [специфікації W3C](https://www.w3.org/TR/DOM-Level-3-Events/), тому вам не потрібно турбуватися про сумісніть між браузерами. Перегляньте довідник по [`SyntheticEvent`](/docs/events.html), щоб дізнатися більше.
-=======
-Here, `e` is a synthetic event. React defines these synthetic events according to the [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), so you don't need to worry about cross-browser compatibility. React events do not work exactly the same as native events. See the [`SyntheticEvent`](/docs/events.html) reference guide to learn more.
->>>>>>> 1becaff62ae228d909b83ef6d08f48c01660300f
+Тут `e` - це синтетична подія. React визначає ці синтетичні події відповідно до [специфікації W3C](https://www.w3.org/TR/DOM-Level-3-Events/), тому вам не потрібно турбуватися про сумісніть між браузерами. React-події працюють інакше, ніж нативні події. Перегляньте довідник по [`SyntheticEvent`](/docs/events.html), щоб дізнатися більше.
 
 Зазвичай, коли ви використовуєте React, вам не потрібно викликати `addEventListener`, щоб додати обробник до DOM-елементу після його створення. Натомість, просто вкажіть обробник, коли елемент вперше відрендерився.
 

content/docs/hooks-faq.md

@@ -580,11 +580,7 @@ useEffect(() => {
 
 Давайте глянемо, чому це важливо.
 
-<<<<<<< HEAD
-Якщо ви вкажете [список залежностей](/docs/hooks-reference.html#conditionally-firing-an-effect) в якості останнього аргумента `useEffect`, `useMemo`, `useCallback` чи `useImperativeHandle`, він має містити всі значення, що використовуються у тілі функції зворотнього виклику та беруть участь у потоці даних React, включно з пропсами, станом і їх похідними.
-=======
-If you specify a [list of dependencies](/docs/hooks-reference.html#conditionally-firing-an-effect) as the last argument to `useEffect`, `useLayoutEffect`, `useMemo`, `useCallback`, or `useImperativeHandle`, it must include all values that are used inside the callback and participate in the React data flow. That includes props, state, and anything derived from them.
->>>>>>> 1becaff62ae228d909b83ef6d08f48c01660300f
+Якщо ви вкажете [список залежностей](/docs/hooks-reference.html#conditionally-firing-an-effect) в якості останнього аргумента `useEffect`, `useLayoutEffect`, `useMemo`, `useCallback` чи `useImperativeHandle`, він має містити всі значення, що використовуються у тілі функції зворотнього виклику та беруть участь у потоці даних React, включно з пропсами, станом і їх похідними.
 
 Можна безпечно пропустити функцію з списку залежностей **лише** тоді, коли вона (чи функції, які вона викликає) не посилається на пропси, стан чи їх похідні. У цьому прикладі є помилка:
 

content/docs/reference-dom-elements.md

@@ -56,12 +56,8 @@ function MyComponent() {
 
 ### selected {#selected}
 
-<<<<<<< HEAD
-Атрибут `selected` підтримується компонентами `<option>`. Ви можете використовувати його, щоб визначити чи є компонент вибраним. Це корисно для створення контрольованих компонентів.
-=======
-If you want to mark an `<option>` as selected, reference the value of that option in the `value` of its `<select>` instead.
-Check out ["The select Tag"](/docs/forms.html#the-select-tag) for detailed instructions.
->>>>>>> 1becaff62ae228d909b83ef6d08f48c01660300f
+Якщо ви хочете позначити `<option>` вибраним, посилайтеся на значення цієї опції в атрибуті `value` батьківського `<select>`.
+Дивіться ["Тег select"](/docs/forms.html#the-select-tag) для отримання детальних інструкцій.
 
 ### style {#style}
 
@@ -125,11 +121,7 @@ React автоматично додасть суфікс "px" до певних
 
 ### value {#value}
 
-<<<<<<< HEAD
-Атрибут `value` підтримується компонентами `<input>` та `<textarea>`. Ви можете використовувати його щоб встановити значення компоненту. Це корисно для побудови контрольованих компонентів. `defaultValue` — це неконтрольований еквівалент, який встановлює значення компоненту, коли той вперше було змонтовано.
-=======
-The `value` attribute is supported by `<input>`, `<select>` and `<textarea>` components. You can use it to set the value of the component. This is useful for building controlled components. `defaultValue` is the uncontrolled equivalent, which sets the value of the component when it is first mounted.
->>>>>>> 1becaff62ae228d909b83ef6d08f48c01660300f
+Атрибут `value` підтримується компонентами `<input>`, `<select>` та `<textarea>`. Ви можете використовувати його щоб встановити значення компоненту. Це корисно для побудови контрольованих компонентів. `defaultValue` — це неконтрольований еквівалент, який встановлює значення компоненту, коли той вперше було змонтовано.
 
 ## Усі підтримувані атрибути HTML {#all-supported-html-attributes}
 

content/docs/reference-events.md

@@ -10,15 +10,9 @@ category: Reference
 
 ## Огляд {#overview}
 
-<<<<<<< HEAD
 Ваші обробники подій отримують екземпляр SyntheticEvent — кроcбраузерну обгортку над нативною подією браузера. Вона має такий же інтерфейс, як і браузерна подія, включаючи методи `stopPropagation()` та `preventDefault()`. Ця обгортка допомагає спрацьовувати різним подіям однаково у всіх браузерах.
 
-Якщо ви усвідомили, що вам з якоїсь причини потрібно отримати нативну браузерну подію, то ви просто можете використати атрибут `nativeEvent`. Нижче наведено перелік атрибутів об'єкта `SyntheticEvent`:
-=======
-Your event handlers will be passed instances of `SyntheticEvent`, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including `stopPropagation()` and `preventDefault()`, except the events work identically across all browsers. 
-
-If you find that you need the underlying browser event for some reason, simply use the `nativeEvent` attribute to get it. The synthetic events are different from, and do not map directly to, the browser's native events. For example in `onMouseLeave` `event.nativeEvent` will point to a `mouseout` event. The specific mapping is not part of the public API and may change at any time. Every `SyntheticEvent` object has the following attributes:
->>>>>>> 1becaff62ae228d909b83ef6d08f48c01660300f
+Якщо ви усвідомили, що вам з якоїсь причини потрібно отримати нативну браузерну подію, то ви просто можете використати атрибут `nativeEvent`. Синтетичні події відрізняються від нативних подій браузера. Наприклад, в `onMouseLeave` `event.nativeEvent` вказуватиме на подію `mouseout`. Конкретне відображення не є частиною загальнодоступного API і може змінитися в будь-який час. Нижче наведено перелік атрибутів об'єкта `SyntheticEvent`:
 
 ```javascript
 boolean bubbles

content/docs/reference-react-component.md

@@ -274,11 +274,7 @@ shouldComponentUpdate(nextProps, nextState)
 static getDerivedStateFromProps(props, state)
 ```
 
-<<<<<<< HEAD
-`getDerivedStateFromProps` викликається безспосередньо перед викликом методу render, як при першому рендерингу, так і при всіх наступних оновленнях. Він має повернути об'єкт для оновлення стану або null, щоб не оновлювати нічого.
-=======
-`getDerivedStateFromProps` is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or `null` to update nothing.
->>>>>>> 1becaff62ae228d909b83ef6d08f48c01660300f
+`getDerivedStateFromProps` викликається безспосередньо перед викликом методу render, як при першому рендерингу, так і при всіх наступних оновленнях. Він має повернути об'єкт для оновлення стану або `null`, щоб не оновлювати нічого.
 
 Цей метод існує для [малопоширених випадків](/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state) коли стан залежить від змін в пропсах з часом. Наприклад, він може бути корисним для реалізації компоненту `<Transition>` котрий порівнює свої попередні і наступні дочірні елементи, щоб вирішити котрі з них потрібно анімувати для появи і зникнення.
 
@@ -592,11 +588,7 @@ component.forceUpdate(callback)
 
 ### `defaultProps` {#defaultprops}
 
-<<<<<<< HEAD
-`defaultProps` можна визначити як властивість класу компонента, щоб встановити пропси за замовчуванням в класі. Це використовується для невизначених пропсів, але не для пропсів зі значенням null. Наприклад:
-=======
-`defaultProps` can be defined as a property on the component class itself, to set the default props for the class. This is used for `undefined` props, but not for `null` props. For example:
->>>>>>> 1becaff62ae228d909b83ef6d08f48c01660300f
+`defaultProps` можна визначити як властивість класу компонента, щоб встановити пропси за замовчуванням в класі. Це використовується для невизначених пропсів, але не для пропсів зі значенням `null`. Наприклад:
 
 ```js
 class CustomButton extends React.Component {
@@ -616,11 +608,7 @@ CustomButton.defaultProps = {
   }
 ```
 
-<<<<<<< HEAD
-Якщо для `props.color` встановлено значення null, то воно залишиться null:
-=======
-If `props.color` is set to `null`, it will remain `null`:
->>>>>>> 1becaff62ae228d909b83ef6d08f48c01660300f
+Якщо для `props.color` встановлено значення `null`, то воно залишиться `null`:
 
 ```js
   render() {

content/docs/reference-react.md

@@ -124,15 +124,9 @@ const MyComponent = React.memo(function MyComponent(props) {
 });
 ```
 
-<<<<<<< HEAD
-`React.memo` є [компонентом вищого порядку](/docs/higher-order-components.html). Він подібний до [`React.PureComponent`](#reactpurecomponent), але застосовується для компонентів-функцій, а не класів.
+`React.memo` є [компонентом вищого порядку](/docs/higher-order-components.html).
 
-Якщо ваш компонент-функція відображає той самий результат з тими самими пропсами та станом, ви можете обгорнути його у виклик `React.memo` для підвищення продуктивності в деяких випадках шляхом запам'ятовування результату. Це означає, що React пропустить рендеринг компоненту та повторно використає останній результат рендерингу.
-=======
-`React.memo` is a [higher order component](/docs/higher-order-components.html).
-
-If your component renders the same result given the same props, you can wrap it in a call to `React.memo` for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.
->>>>>>> 1becaff62ae228d909b83ef6d08f48c01660300f
+Якщо ваш компонент відображає той самий результат з тими самими пропсами та станом, ви можете обгорнути його у виклик `React.memo` для підвищення продуктивності в деяких випадках шляхом запам'ятовування результату. Це означає, що React пропустить рендеринг компоненту та повторно використає останній результат рендерингу.
 
 `React.memo` тільки перевіряє чи змінилися пропси. Якщо ваша функція, згорнута у `React.memo`, має [`useState`](/docs/hooks-state.html) або [`useContext`](/docs/hooks-reference.html#usecontext) хуки в своїй імплементації, вона все ще буду ререндеритися при зміні стана або контекста.
 

content/docs/refs-and-the-dom.md

@@ -1,11 +1,7 @@
 ---
 id: refs-and-the-dom
-<<<<<<< HEAD
 title: Рефи та DOM
-=======
-title: Refs and the DOM
 permalink: docs/refs-and-the-dom.html
->>>>>>> 1becaff62ae228d909b83ef6d08f48c01660300f
 redirect_from:
   - "docs/working-with-the-browser.html"
   - "docs/more-about-refs.html"