@@ -271,7 +271,7 @@ function Profile(props) {
```
-Коли ви вкладаєте вміст всередині тегу JSX, батьківський компонент отримує цей вміст у властивості з назвою `children`. Наприклад, компонент `Card` нижче отримає проп `children`, встановлену на `
` і відображатиме його в обгортковому div:
+Коли ви вкладаєте вміст всередині тегу JSX, батьківський компонент отримує цей вміст у властивості з назвою `children`. Наприклад, компонент `Card` нижче отримає проп `children` зі значенням `
` і відображатиме його в обгортковому div:
@@ -347,11 +347,11 @@ export function getImageUrl(person, size = 's') {
-Спробуйте замінити `
` всередині `` на деякий текст, щоб побачити, як компонент `Card` може обгорнути будь-який вкладений вміст. Він не потребує "знати", що саме рендериться всередині нього. Ви ще побачите цей гнучкий шаблон в багатьох місцях.
+Спробуйте замінити `` всередині `` на деякий текст, щоб побачити, як компонент `Card` може обгорнути будь-який вкладений вміст. Він не потребує "знати", що саме рендериться всередині нього. Ви ще побачите цей гнучкий шаблон у багатьох місцях.
Ви можете уявляти компонент з пропом `children` як компонент з "отвіром", який може бути "заповнений" батьківськими компонентами з довільним JSX. Ви часто будете використовувати властивість `children` для візуальних обгорток: панелей, сіток і т.д.
-
+
## Як пропси змінюються з часом {/*how-props-change-over-time*/}
@@ -409,19 +409,19 @@ export default function App() {
Цей приклад показує, що **компонент може отримувати різні пропси з часом**. Пропси не завжди є статичними! Тут проп `time` змінюється кожну секунду, а проп `color` змінюється, коли ви вибираєте інший колір. Пропси відображають дані компонента в будь-який момент часу, а не лише на початку.
-Однак, пропси є [незмінними(immutable)](https://uk.wikipedia.org/wiki/%D0%9D%D0%B5%D0%B7%D0%BC%D1%96%D0%BD%D0%BD%D0%B8%D0%B9_%D0%BE%D0%B1%27%D1%94%D0%BA%D1%82) — термін з комп'ютерних наук, що означає "незмінні". Коли компоненту потрібно змінити свої пропси (наприклад, відповідно до взаємодії користувача або нових даних), він повинен "запитати" свій батьківський компонент передати йому _інші пропси_ — новий об'єкт! Його старі пропси будуть відкинуті, і, врешті-решт, рушій JavaScript звільнить пам'ять, яку вони займали.
+Однак, пропси є [незмінними (immutable)](https://uk.wikipedia.org/wiki/%D0%9D%D0%B5%D0%B7%D0%BC%D1%96%D0%BD%D0%BD%D0%B8%D0%B9_%D0%BE%D0%B1%27%D1%94%D0%BA%D1%82). Коли компоненту потрібно змінити свої пропси (наприклад, відповідно до взаємодії користувача або нових даних), він повинен «попросити» свій батьківський компонент передати йому _інші пропси_ — новий об'єкт! Його старі пропси будуть відкинуті, і, врешті-решт, рушій JavaScript звільнить пам'ять, яку вони займали.
-**Не намагайтеся «змінювати пропси»**. Коли вам потрібно реагувати на введення користувача (наприклад, змінювати вибраний колір), вам потрібно «встановити стан», про що ви можете дізнатися в [Стан: Пам'ять компонента.](/learn/state-a-components-memory)
+**Не намагайтеся «змінювати пропси»**. Щоб реагувати на введення користувача (наприклад, змінювати вибраний колір), вам потрібно «встановити стан», про що ви можете дізнатися у розділі [Стан: Пам'ять компонента.](/learn/state-a-components-memory)
-* Щоб передати пропси, додайте їх до JSX, так само, як ви робите з атрибутами HTML.
+* Щоб передати пропси, додайте їх до JSX подібно до атрибутів HTML.
* Щоб прочитати пропси, використовуйте синтаксис деструктуризації `function Avatar({ person, size })`.
* Ви можете вказати значення за замовчуванням, наприклад, `size = 100`, яке використовується для відсутніх та `undefined` пропсів.
* Ви можете передати всі пропси JSX за допомогою синтаксису розширення ``, але не зловживайте цим!
* Вкладений JSX, наприклад ``, буде виглядати як проп `children` компонента `Card`.
* Пропси в момент часу можуть бути використані тільки для читання: кожен рендер отримує нову версію пропсів.
-* Ви не можете змінювати пропси. Коли вам потрібна взаємодія, вам потрібно встановити стан.
+* Ви не можете змінювати пропси. Для інтерактивності використовуйте стан.
@@ -524,7 +524,7 @@ li { margin: 5px; }
-Почніть з винесення розмітки для одного з вчених. Потім знайдіть частини, які не відповідають йому в другому прикладі, і зробіть їх налаштовуваними за допомогою пропсів.
+Почніть з винесення розмітки для одного з вчених. Потім знайдіть частини, які не відповідають їй у другому прикладі, і зробіть їх налаштовуваними за допомогою пропсів.
@@ -630,9 +630,9 @@ li { margin: 5px; }
-Зверніть увагу, якщо `awards` є масивом, вам не потрібен окремий проп `awardCount`. Тоді ви можете використовувати `awards.length`, щоб підрахувати кількість нагород. Пам'ятайте, що пропси можуть приймати будь-які значення, включаючи масиви!
+Зверніть увагу: якщо `awards` є масивом, вам не потрібний окремий проп `awardCount`. У цьому випадку ви можете використовувати `awards.length`, щоб підрахувати кількість нагород. Пам'ятайте, що пропси можуть приймати будь-які значення, включаючи масиви!
-Ще одне рішення, яке більше схоже на попередні приклади на цій сторінці, полягає в тому, щоб групувати всю інформацію про людину в один об'єкт і передавати цей об'єкт як один проп:
+Ще одне рішення, яке більш схоже на попередні приклади на цій сторінці, полягає в тому, щоб групувати всю інформацію про людину в один об'єкт і передавати цей об'єкт як один проп:
@@ -733,9 +733,9 @@ li { margin: 5px; }
#### Налаштування розміру зображення на основі пропу {/*adjust-the-image-size-based-on-a-prop*/}
-У цьому прикладі `Avatar` отримує числовий проп `size`, який визначає ширину та висоту елемента ``. У цьому прикладі проп `size` встановлено на `40`. Однак, якщо ви відкриєте зображення в новій вкладці, ви помітите, що саме зображення більше (`160` пікселів). Розмір реального зображення визначається розміром ескізу, який ви запитуєте.
+У цьому прикладі компонент `Avatar` отримує числовий проп `size`, який визначає ширину та висоту елемента ``. Для пропу `size` задано значення `40`. Однак, якщо ви відкриєте зображення в новій вкладці, ви помітите, що саме зображення є більшим (`160` пікселів). Справжній розмір зображення визначається розміром ескізу, який ви запитуєте.
-Змініть компонент `Avatar`, щоб він запитував найближчий розмір зображення на основі пропу `size`. Зокрема, якщо `size` менше `90`, передайте `'s'` ("малий(small)") замість `'b'` ("великий(big)") до функції `getImageUrl`. Переконайтеся, що ваші зміни працюють, рендеруючи аватари з різними значеннями пропу `size` та відкриваючи зображення в новій вкладці.
+Змініть компонент `Avatar`, щоб він запитував найближчий розмір зображення на основі пропу `size`. Зокрема, якщо `size` менше `90`, передайте `'s'` (від англ. «small» — малий) замість `'b'` (від англ. «big» — великий) у функцію `getImageUrl`. Переконайтеся, що ваші зміни працюють, виконуючи рендер аватарів з різними значеннями пропу `size` та відкриваючи зображення в новій вкладці.
@@ -786,7 +786,7 @@ export function getImageUrl(person, size) {
-Ось як ви можете з цим справитися:
+Ось як ви можете з цим упоратися:
@@ -848,7 +848,7 @@ export function getImageUrl(person, size) {
-Ви також можете показати більш чітке зображення для екранів з високою щільністю пікселів, враховуючи [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio):
+Ви також можете показати більш чітке зображення для екранів з високою щільністю пікселів, ураховуючи [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio):