@@ -384,14 +384,14 @@ export default function List() {
/>
{person.name}:
- {' ' + person.profession + ' '}
- known for {person.accomplishment}
+ {' ' + person.profession + ', '}
+ чиєю працею є {person.accomplishment}
);
return (
- Scientists
+ Вчені
);
@@ -401,33 +401,33 @@ export default function List() {
```js src/data.js
export const people = [{
id: 0,
- name: 'Creola Katherine Johnson',
- profession: 'mathematician',
- accomplishment: 'spaceflight calculations',
+ name: 'Кетрін Джонсон (Creola Katherine Johnson)',
+ profession: 'математик',
+ accomplishment: 'розрахунки для космічних польотів',
imageId: 'MK3eW3A'
}, {
id: 1,
- name: 'Mario José Molina-Pasquel Henríquez',
- profession: 'chemist',
- accomplishment: 'discovery of Arctic ozone hole',
+ name: 'Маріо Моліна (Mario José Molina-Pasquel Henríquez)',
+ profession: 'хімік',
+ accomplishment: 'відкриття озонової діри в Арктиці',
imageId: 'mynHUSa'
}, {
id: 2,
- name: 'Mohammad Abdus Salam',
- profession: 'physicist',
- accomplishment: 'electromagnetism theory',
+ name: 'Абдус Салам (Moшинкаmad Abdus Salam)',
+ profession: 'фізик',
+ accomplishment: 'теорія електромагнетизму',
imageId: 'bE7W1ji'
}, {
id: 3,
- name: 'Percy Lavon Julian',
- profession: 'chemist',
- accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
+ name: 'Персі Джуліан (Percy Lavon Julian)',
+ profession: 'хімік',
+ accomplishment: 'новаторські кортизоновмісні препарати, стероїди та протизаплідні таблетки',
imageId: 'IOjWm71'
}, {
id: 4,
- name: 'Subrahmanyan Chandrasekhar',
- profession: 'astrophysicist',
- accomplishment: 'white dwarf star mass calculations',
+ name: 'Субрахманьян Чандрасекар (Subrahmanyan Chandrasekhar)',
+ profession: 'астрофізик',
+ accomplishment: 'розрахунок мас зір категорії "білий карлик"',
imageId: 'lrWQx8l'
}];
```
@@ -459,18 +459,18 @@ h2 { font-size: 20px; }
-Read **[Rendering Lists](/learn/rendering-lists)** to learn how to render a list of components, and how to choose a key.
+Прочитайте розділ **["Рендеринг списків"](/learn/rendering-lists)**, щоб дізнатися, як рендерити список компонентів і вибирати ключ.
-## Keeping components pure {/*keeping-components-pure*/}
+## Утримання компонентів "чистими" {/*keeping-components-pure*/}
-Some JavaScript functions are *pure.* A pure function:
+Деякі функції JavaScript є *чистими*. Чиста функція (pure function):
-* **Minds its own business.** It does not change any objects or variables that existed before it was called.
-* **Same inputs, same output.** Given the same inputs, a pure function should always return the same result.
+* **Займається лише своєю справою.** Вона не змінює жодних об'єктів чи змінних, які існували до її виклику.
+* **Однакові вхідні дані — той самий результат.** З урахуванням однакових вхідних даних чиста функція має завжди повертати той самий результат.
-By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. Here is an example of an impure component:
+Пишучи компоненти виключно як чисті функції, ви можете уникнути цілого класу незрозумілих помилок і непередбачуваної поведінки відповідно до того, як ваша кодова база зростатиме. Ось приклад "нечистого" компонента:
@@ -478,9 +478,9 @@ By strictly only writing your components as pure functions, you can avoid an ent
let guest = 0;
function Cup() {
- // Bad: changing a preexisting variable!
+ // Погано: зміна значення змінної, що вже існувала!
guest = guest + 1;
- return Tea cup for guest #{guest}
;
+ return Чашка для гостя #{guest}
;
}
export default function TeaSet() {
@@ -496,13 +496,13 @@ export default function TeaSet() {
-You can make this component pure by passing a prop instead of modifying a preexisting variable:
+Ви можете зробити цей компонент чистим, передавши проп замість модифікації змінної, що вже існувала:
```js
function Cup({ guest }) {
- return Tea cup for guest #{guest}
;
+ return Чашка для гостя #{guest}
;
}
export default function TeaSet() {
@@ -520,43 +520,43 @@ export default function TeaSet() {
-Read **[Keeping Components Pure](/learn/keeping-components-pure)** to learn how to write components as pure, predictable functions.
+Прочитайте розділ **["Утримання компонентів "чистими""](/learn/keeping-components-pure)**, щоб дізнатися, як писати компоненти у вигляді чистих, передбачуваних функцій.
-## Your UI as a tree {/*your-ui-as-a-tree*/}
+## Ваш UI як дерево {/*your-ui-as-a-tree*/}
-React uses trees to model the relationships between components and modules.
+React використовує дерева для моделювання зв'язків між компонентами та модулями.
-A React render tree is a representation of the parent and child relationship between components.
+Дерево рендерингу React — це представлення батьківського та дочірнього зв'язку між компонентами.
-
+
-An example React render tree.
+Приклад дерева рендерингу React.
-Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
+Компоненти, розташовані біля вершини дерева, поблизу кореневого компонента, вважаються внутрішніми (top-level) компонентами. Компоненти без дочірніх компонентів є листовими компонентами. Ця категоризація компонентів корисна для розуміння потоку даних і продуктивності рендерингу.
-Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree.
+Моделювання зв'язків між модулями JavaScript — ще один корисний спосіб зрозуміти вашу програму. Ми називаємо це деревом залежностей модулів.
-
+
-An example module dependency tree.
+Приклад дерева залежностей модулів.
-A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues.
+Дерево залежностей часто використовується бандлерами, щоб запакувати весь актуальний код JavaScript для завантаження та рендерингу клієнтом. Великий розмір бандлу погіршує досвід користування React-застосунками. Розуміння дерева залежностей модулів корисно для усунення таких проблем.
-Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance.
+Прочитайте розділ **["Ваш UI як дерево"](/learn/understanding-your-ui-as-a-tree)**, щоб дізнатися, як створюється дерево рендерингу і залежностей модулів у React-застосунках та наскільки вони є корисними абстрактними моделями для покращення досвіду користування і продуктивності.
-## What's next? {/*whats-next*/}
+## Що далі? {/*whats-next*/}
-Head over to [Your First Component](/learn/your-first-component) to start reading this chapter page by page!
+Перейдіть до розділу ["Ваш перший компонент"](/learn/your-first-component), щоб почати читати цю секцію посторінково!
-Or, if you're already familiar with these topics, why not read about [Adding Interactivity](/learn/adding-interactivity)?
+Або, якщо ви вже знайомі з цими темами, чому б не переглянути ["Додавання інтерактивності"](/learn/adding-interactivity)?
);
}
@@ -41,7 +41,7 @@ function Profile() {
export default function Gallery() {
return (
);
}
@@ -113,15 +113,15 @@ img { margin: 0 10px 10px 0; }
