Merge pull request #599 from pavlosambur/fix-genitive-componenta

fix(terminology): заміна "компоненту" на "компонента" в родовому відм…

Author: alinkedd

src/content/learn/importing-and-exporting-components.md

@@ -56,7 +56,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 ## Експорт та імпорт компонента {/*exporting-and-importing-a-component*/}
 
-Що, якщо ви захочете змінити стартовий екран у майбутньому і розмістити там список наукових книг? Або розмістити всі профілі десь інде? Розумно було б витягнути компоненти `Gallery` і `Profile` з файлу кореневого компоненту. Це зробить їх більш модульними та дасть можливість повторно використовувати їх в інших файлах. Ви можете перемістити компонент за три кроки:
+Що, якщо ви захочете змінити стартовий екран у майбутньому і розмістити там список наукових книг? Або розмістити всі профілі десь інде? Розумно було б витягнути компоненти `Gallery` і `Profile` з файлу кореневого компонента. Це зробить їх більш модульними та дасть можливість повторно використовувати їх в інших файлах. Ви можете перемістити компонент за три кроки:
 
 1. **Створіть** новий JS файл, щоб помістити компоненти в нього.
 2. **Експортуйте** ваш функціональний компонент з цього файлу (використовуючи або [дефолтний](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) або [іменований](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) експорти).
@@ -172,7 +172,7 @@ export function Profile() {
 import { Profile } from './Gallery.js';
 ```
 
-Нарешті, **відрендеріть** компонент `<Profile />` з компоненту `App`:
+Нарешті, **відрендеріть** компонент `<Profile />` з компонента `App`:
 
 ```js
 export default function App() {

src/content/learn/state-a-components-memory.md

@@ -528,9 +528,9 @@ button {
 
 Ви могли помітити, що під час виклику функція `useState` не отримує жодної інформації про те, *якої* змінної стану вона стосується. Немає "ідентифікатора", який передається до `useState`, тому як він знає, яку зі змінних стану повернути? Чи покладається він на якусь магію, наприклад, парсинг ваших функцій? Відповідь — ні.
 
-Натомість для забезпечення лаконічного синтаксису хуки **покладаються на сталий порядок викликів під час кожного рендеру того самого компоненту.** На практиці це добре працює, бо якщо ви дотримуєтеся вищевказаного правила ("викликайте хуки лише на верхньому рівні"), хуки завжди будуть викликані у тому самому порядку. Додатково [плагін лінтера](https://www.npmjs.com/package/eslint-plugin-react-hooks) знаходить більшість помилок.
+Натомість для забезпечення лаконічного синтаксису хуки **покладаються на сталий порядок викликів під час кожного рендеру того самого компонента.** На практиці це добре працює, бо якщо ви дотримуєтеся вищевказаного правила ("викликайте хуки лише на верхньому рівні"), хуки завжди будуть викликані у тому самому порядку. Додатково [плагін лінтера](https://www.npmjs.com/package/eslint-plugin-react-hooks) знаходить більшість помилок.
 
-Всередині React тримає масив пар станів для кожного компоненту. Він також відповідає за індекс поточної пари, якому задається значення `0` перед рендерингом. Кожного разу, коли ви викликаєте `useState`, React віддає вам наступну пару стану та збільшує індекс. Ви можете дізнатися більше про цей механізм у статті ["Хуки React: не магія, просто масиви".](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e)
+Всередині React тримає масив пар станів для кожного компонента. Він також відповідає за індекс поточної пари, якому задається значення `0` перед рендерингом. Кожного разу, коли ви викликаєте `useState`, React віддає вам наступну пару стану та збільшує індекс. Ви можете дізнатися більше про цей механізм у статті ["Хуки React: не магія, просто масиви".](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e)
 
 Цей приклад **не використовує React**, але дає вам уявлення про те, як `useState` працює всередині:
 
@@ -893,7 +893,7 @@ button {
 
 Ось що відрізняє стан від звичайних змінних, які ви могли б оголосити на початку вашого модуля. Стан не прив'язаний до конкретного виклику функції або місця у коді, але він "локальний" відносно конкретного місця на екрані. Ви рендерили два компоненти `<Gallery />`, тому їхній стан зберігається окремо.
 
-Також зауважте, що компонент `Page` "не знає" нічого ні про стан `Gallery`, ні навіть про його наявність. На відміну від пропсів, **стан доступний (private) лише компоненту, у якому оголошений**. Батьківський компонент не може його змінити. Це дає вам змогу додавати стан до будь-якого компоненту або видаляти його, не впливаючи на решту компонентів.
+Також зауважте, що компонент `Page` "не знає" нічого ні про стан `Gallery`, ні навіть про його наявність. На відміну від пропсів, **стан доступний (private) лише компоненту, у якому оголошений**. Батьківський компонент не може його змінити. Це дає вам змогу додавати стан до будь-якого компонента або видаляти його, не впливаючи на решту компонентів.
 
 А що як ви хочете, щоб обидві галереї синхронізували свої стани? Правильний спосіб зробити таке в React — *прибрати* стан з дочірніх компонентів і додати його до їхнього найближчого спільного батьківського компонента. Наступні кілька сторінок зосереджуються на організації стану окремого компонента, але ми повернемося до цієї теми в розділі ["Спільний стан між компонентами".](/learn/sharing-state-between-components)
 

src/content/learn/typescript.md

@@ -242,7 +242,7 @@ export default function App() {
 
 ### `useContext` {/*typing-usecontext*/}
 
-[Хук `useContext`](/reference/react/useContext) — це техніка передачі даних деревом компонентів без необхідності передавати пропси через компоненти. Цей хук використовується шляхом створення компоненту-провайдера та хука для отримання значення у дочірньому компоненті.
+[Хук `useContext`](/reference/react/useContext) — це техніка передачі даних деревом компонентів без необхідності передавати пропси через компоненти. Цей хук використовується шляхом створення компонента-провайдера та хука для отримання значення у дочірньому компоненті.
 
 Тип значення, яке надається контекстом, виводиться зі значення, переданого до `createContext`:
 

src/content/learn/writing-markup-with-jsx.md

@@ -214,7 +214,7 @@ JSX перетворюється в JavaScript, а атрибути, запис
 />
 ```
 
-Ви можете [знайти всі ці атрибути в списку властивостей DOM компоненту.](/reference/react-dom/components/common) Якщо ви допустите помилку, не хвилюйтесь - React надрукує повідомлення з можливим виправленням у [консолі браузера.](https://developer.mozilla.org/docs/Tools/Browser_Console)
+Ви можете [знайти всі ці атрибути в списку властивостей DOM компонента.](/reference/react-dom/components/common) Якщо ви допустите помилку, не хвилюйтесь - React надрукує повідомлення з можливим виправленням у [консолі браузера.](https://developer.mozilla.org/docs/Tools/Browser_Console)
 
 <Pitfall>
 

src/content/reference/react-dom/createPortal.md

@@ -66,7 +66,7 @@ import { createPortal } from 'react-dom';
 
 ### Рендер в іншу частину DOM {/*rendering-to-a-different-part-of-the-dom*/}
 
-*Портали* дозволяють вашим компонентам рендерити деякі їхні дочірні елементи в інші частини DOM. Це дозволяє частині вашого компоненту "втекти"  з будь-яких контейнерів, в яких вона перебуває. Приміром, компонент може відображати модальне вікно або спливаючу підказку, що з'являється поза та над основною частиною сторінки.
+*Портали* дозволяють вашим компонентам рендерити деякі їхні дочірні елементи в інші частини DOM. Це дозволяє частині вашого компонента "втекти" з будь-яких контейнерів, в яких вона перебуває. Приміром, компонент може відображати модальне вікно або спливаючу підказку, що з'являється поза та над основною частиною сторінки.
 
 Щоб створити портал, відрендеріть результат `createPortal` з <CodeStep step={1}>JSX</CodeStep> і <CodeStep step={2}>DOM-вузлом, куди потрібно помістити JSX</CodeStep>:
 

src/content/reference/react/forwardRef.md

@@ -74,7 +74,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 
 * `props`: Пропси передані батьківським компонентом.
 
-* `ref`:  Атрибут `ref`, переданий батьківським компонентом. `ref` може бути об'єктом чи функцією. Якщо батьківський компонент не передав реф, то цей параметр буде `null`. Вам потрібно або передати отриманий `ref` до іншого компонента, або передати його в  [`useImperativeHandle`.](/reference/react/useImperativeHandle)
+* `ref`:  Атрибут `ref`, переданий батьківським компонентом. `ref` може бути об'єктом чи функцією. Якщо батьківський компонент не передав реф, то цей параметр буде `null`. Вам потрібно або передати отриманий `ref` до іншого компонента, або передати його в [`useImperativeHandle`.](/reference/react/useImperativeHandle)
 
 #### Результат {/*render-returns*/}
 
@@ -86,7 +86,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 
 ### Розкриття DOM-вузла батьківському компоненту {/*exposing-a-dom-node-to-the-parent-component*/}
 
-За замовчуванням, DOM-вузли кожного компонента приватні. Але, іноді потрібно передавати DOM-вузол батьківському компоненту, наприклад, щоб мати можливість сфокусувати його. Щоб зробити це, обгорніть оголошення вашого компонента в `forwardRef()`:
+Початково DOM-вузли кожного компонента приватні. Але іноді потрібно передавати DOM-вузол батьківському компоненту, наприклад, щоб мати можливість сфокусувати його. Щоб зробити це, обгорніть оголошення вашого компонента в `forwardRef()`:
 
 ```js {3,11}
 import { forwardRef } from 'react';