diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index 44e0eedac..401655f51 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/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'; ``` -Нарешті, **відрендеріть** компонент `` з компоненту `App`: +Нарешті, **відрендеріть** компонент `` з компонента `App`: ```js export default function App() { diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md index 124d52e8f..7213a5300 100644 --- a/src/content/learn/state-a-components-memory.md +++ b/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 { Ось що відрізняє стан від звичайних змінних, які ви могли б оголосити на початку вашого модуля. Стан не прив'язаний до конкретного виклику функції або місця у коді, але він "локальний" відносно конкретного місця на екрані. Ви рендерили два компоненти ``, тому їхній стан зберігається окремо. -Також зауважте, що компонент `Page` "не знає" нічого ні про стан `Gallery`, ні навіть про його наявність. На відміну від пропсів, **стан доступний (private) лише компоненту, у якому оголошений**. Батьківський компонент не може його змінити. Це дає вам змогу додавати стан до будь-якого компоненту або видаляти його, не впливаючи на решту компонентів. +Також зауважте, що компонент `Page` "не знає" нічого ні про стан `Gallery`, ні навіть про його наявність. На відміну від пропсів, **стан доступний (private) лише компоненту, у якому оголошений**. Батьківський компонент не може його змінити. Це дає вам змогу додавати стан до будь-якого компонента або видаляти його, не впливаючи на решту компонентів. А що як ви хочете, щоб обидві галереї синхронізували свої стани? Правильний спосіб зробити таке в React — *прибрати* стан з дочірніх компонентів і додати його до їхнього найближчого спільного батьківського компонента. Наступні кілька сторінок зосереджуються на організації стану окремого компонента, але ми повернемося до цієї теми в розділі ["Спільний стан між компонентами".](/learn/sharing-state-between-components) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 89a7aa7dd..55f844e03 100644 --- a/src/content/learn/typescript.md +++ b/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`: diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 1ea96e430..59eae4ba3 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/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) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 0196899ba..205c10998 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/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` з JSX і DOM-вузлом, куди потрібно помістити JSX: diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index 6b2bbad3f..071b157f3 100644 --- a/src/content/reference/react/forwardRef.md +++ b/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';