diff --git a/TRANSLATION.md b/TRANSLATION.md index aee27fb5d..51c71ad82 100644 --- a/TRANSLATION.md +++ b/TRANSLATION.md @@ -9,7 +9,7 @@ - Використовуйте тире `—` для пунктуації, а дефіс `-` для орфографії - Посилання на ресурси (MDN, Wikipedia) повинні використовувати українську версію, якщо існує відповідний переклад - Перекладайте іншомовні імена з оригінальним іменем у дужках: _Ден Абрамов (Dan Abramov)_ -- Уникайте відсилання до статі читача +- Уникайте відсилання до статті читача - Назви статей і заголовки пишуться з одною великою літерою («Компоненти і пропси», а не «Компоненти і Пропси») ## Таблиця перекладів @@ -68,6 +68,7 @@ | Note | Примітка | | online | онлайн | | online playground | онлайн пісочниця | +| package manager | менеджер пакунків | | paint | фарбування, перефарбування | | prop | проп | | props | пропси | @@ -88,6 +89,7 @@ | (previous/next) section | (попередній/наступний) розділ *(тільки в розділі Основні поняття)* | | shallow | поверхове(а) (порівняння, рівність), поверховий (рендер) | | side effect | побічний ефект | +| single-page application | односторінковий додаток | | state | стан | | stateful component | компонент зі станом | | stateless component | компонент без стану | diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md index e91fa9eef..a6022db72 100644 --- a/content/docs/reference-glossary.md +++ b/content/docs/reference-glossary.md @@ -1,106 +1,106 @@ --- id: glossary -title: Glossary of React Terms +title: Словник термінів React layout: docs category: Reference permalink: docs/glossary.html --- -## Single-page Application {#single-page-application} +## Односторінковий додаток {#single-page-application} -A single-page application is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run. Any interactions with the page or subsequent pages do not require a round trip to the server which means the page is not reloaded. +Односторінковий додаток — це додаток, що складається з єдиної HTML-сторінки і всіх ресурсів (таких як JavaScript та CSS), які необхідні додатку для запуску. Будь-яка взаємодія з головною сторінкою та сторінками, що зв'язані з нею, не потребує контакту із сервером, а це означає, що сторінка не перезавантажується. -Though you may build a single-page application in React, it is not a requirement. React can also be used for enhancing small parts of existing websites with additional interactivity. Code written in React can coexist peacefully with markup rendered on the server by something like PHP, or with other client-side libraries. In fact, this is exactly how React is being used at Facebook. +Хоч React і дозволяє вам створювати односторінкові додатки, ви зовсім не зобов'язані робити це. React також може використовуватись для вдосконалення маленьких частин існуючих веб-сайтів для надання їм додаткової інтерактивності. Код написаний на React може мирно співіснувати з розміткою, що рендериться на сервері з допомогою, наприклад, PHP чи інших бібліотек для клієнтської сторони. По суті, саме так React і використовується у Facebook. ## ES6, ES2015, ES2016, etc {#es6-es2015-es2016-etc} -These acronyms all refer to the most recent versions of the ECMAScript Language Specification standard, which the JavaScript language is an implementation of. The ES6 version (also known as ES2015) includes many additions to the previous versions such as: arrow functions, classes, template literals, `let` and `const` statements. You can learn more about specific versions [here](https://en.wikipedia.org/wiki/ECMAScript#Versions). +Всі ці скорочення посилаються на останні версії стандарту специфікації мови ECMAScript, реалізацією котрого є мова JavaScript. Версія ES6 (також відома як ES2015) доповнює попередні версії такими речами як: стрілкові функції, класи, шаблонні функції, вирази `let` і `const`. Більш детально про конкретні версії ви можете дізнатись [тут](https://en.wikipedia.org/wiki/ECMAScript#Versions). -## Compilers {#compilers} +## Компілятор {#compilers} -A JavaScript compiler takes JavaScript code, transforms it and returns JavaScript code in a different format. The most common use case is to take ES6 syntax and transform it into syntax that older browsers are capable of interpreting. [Babel](https://babeljs.io/) is the compiler most commonly used with React. +Компілятор JavaScript приймає на вхід код JavaScript, перетворює його і повертає в іншому форматі. Найбільш поширений випадок використання — це перетворення синтаксису ES6 у синтаксис, який підтримується старими версіями браузерів. При роботі з React найчастіше використовується компілятор [Babel](https://babeljs.io/). -## Bundlers {#bundlers} +## Бандлери {#bundlers} -Bundlers take JavaScript and CSS code written as separate modules (often hundreds of them), and combine them together into a few files better optimized for the browsers. Some bundlers commonly used in React applications include [Webpack](https://webpack.js.org/) and [Browserify](http://browserify.org/). +Бандлери беруть JavaScript- і CSS- код написаний у вигляді модулів (часто таких модулів — сотні) і об'єднують їх разом у кілька файлів, які краще оптимізовані для браузерів. У React додатках найчастіше використовуються бандлери [Webpack](https://webpack.js.org/) і [Browserify](http://browserify.org/). -## Package Managers {#package-managers} +## Менеджери пакунків {#package-managers} -Package managers are tools that allow you to manage dependencies in your project. [npm](https://www.npmjs.com/) and [Yarn](https://yarnpkg.com/) are two package managers commonly used in React applications. Both of them are clients for the same npm package registry. +Менеджер пакунків — це інструмент, що дозволяє керувати залежностями у вашому проекті. [npm](https://www.npmjs.com/) та [Yarn](https://yarnpkg.com/) — це менеджери пакунків, котрі найчастіше використовуються в React-додатках. Обидва є клієнтами того ж самого реєстру пакунків — npm. ## CDN {#cdn} -CDN stands for Content Delivery Network. CDNs deliver cached, static content from a network of servers across the globe. +CDN або "мережа доправлення контенту" (Content Delivery Network) — це мережева інфраструктура, що доправляє кешований статичний контент через мережу серверів по всьому світу. ## JSX {#jsx} -JSX is a syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript. JSX gets compiled to `React.createElement()` calls which return plain JavaScript objects called "React elements". To get a basic introduction to JSX [see the docs here](/docs/introducing-jsx.html) and find a more in-depth tutorial on JSX [here](/docs/jsx-in-depth.html). +JSX — це розширення синтаксису JavaScript. Він подібний до мови шаблонів, але наділений всіма можливостями JavaScript. JSX компілюється у виклики `React.createElement()`, котрі повертають прості об'єкти JavaScript, що називаються "React-елементи". [Перегляньте відповідний розділ](/docs/introducing-jsx.html) для ознайомлення з JSX чи знайдіть більш детальну інформацію [тут](/docs/jsx-in-depth.html). -React DOM uses camelCase property naming convention instead of HTML attribute names. For example, `tabindex` becomes `tabIndex` in JSX. The attribute `class` is also written as `className` since `class` is a reserved word in JavaScript: +React DOM використовує стиль camelCase для найменування властивостей замість звичайних імен HTML-атрибутів. Наприклад, `tabindex` в JSX перетворюється в `tabIndex`. Атрибут `class` записується як `className`, оскільки в JavaScript слово `class` є зарезервованим: ```js -const name = 'Clementine'; +const name = 'Василина'; ReactDOM.render( -

My name is {name}!

, +

Мене звати {name}!

, document.getElementById('root') ); -``` +``` -## [Elements](/docs/rendering-elements.html) {#elements} +## [Елементи](/docs/rendering-elements.html) {#elements} -React elements are the building blocks of React applications. One might confuse elements with a more widely known concept of "components". An element describes what you want to see on the screen. React elements are immutable. +React-елементи — це будівельні блоки React-додатків. Їх легко сплутати з більш загальновідомою концепцією "компонентів". Елемент описує те, що ви хочете бачити на екрані. React-елементи є незмінними. ```js -const element =

Hello, world

; +const element =

Привіт, світе

; ``` -Typically, elements are not used directly, but get returned from components. +Зазвичай елементи не використовуються напряму, а повертаються з компонентів. -## [Components](/docs/components-and-props.html) {#components} +## [Компоненти](/docs/components-and-props.html) {#components} -React components are small, reusable pieces of code that return a React element to be rendered to the page. The simplest version of React component is a plain JavaScript function that returns a React element: +React-компоненти — це маленькі, придатні для повторного використання частини коду, що повертають React-елемент для його відображення на сторінці. Найпростіший React-компонент — це звичайна функція JavaScript, що повертає React-елемент: ```js function Welcome(props) { - return

Hello, {props.name}

; + return

Привіт, {props.name}

; } ``` -Components can also be ES6 classes: +Також, компоненти можуть бути класами ES6: ```js class Welcome extends React.Component { render() { - return

Hello, {this.props.name}

; + return

Привіт, {this.props.name}

; } } ``` -Components can be broken down into distinct pieces of functionality and used within other components. Components can return other components, arrays, strings and numbers. A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component. Component names should also always start with a capital letter (`` **not** ``). See [this documentation](/docs/components-and-props.html#rendering-a-component) for more information on rendering components. +Компоненти можна розбити на окремі частини залежно від їх функціональності і використовувати всередині інших компонентів. Компоненти можуть повертати інші компоненти, масиви, рядки і числа. Якщо якась частина вашого інтерфейсу використовується у кількох місцях (Button, Panel, Avatar) чи надто складна сама по собі, завжди є сенс винести її в незалежний компонент. Імена компонентів завжди мають починатися з великої літери (``, а **не** ``). Перегляньте [відповідний розділ](/docs/components-and-props.html#rendering-a-component) для більш детальної інформації про рендеринг компонентів. ### [`props`](/docs/components-and-props.html) {#props} -`props` are inputs to a React component. They are data passed down from a parent component to a child component. +`props` (пропси) — це вхідні дані React-компонента. Вони є даними, що передаються від батьківського компонента до дочірнього. -Remember that `props` are readonly. They should not be modified in any way: +Запам'ятайте, що `props` призначені лише для читання. Не варто намагатися змінювати їх: ```js -// Wrong! +// Неправильно! props.number = 42; ``` -If you need to modify some value in response to user input or a network response, use `state` instead. +Якщо вам потрібно змінити якесь значення у відповідь на ввід користувача чи відповідь сервера, використовуйте `state` (стан). ### `props.children` {#propschildren} -`props.children` is available on every component. It contains the content between the opening and closing tags of a component. For example: +`props.children` доступні у будь-якому компоненті. У них записаний вміст між відкриваючим та закриваючим тегами компонента. Наприклад: ```js -Hello world! +Привіт, світе! ``` -The string `Hello world!` is available in `props.children` in the `Welcome` component: +Рядок `Привіт, світе!` доступний у `props.children` у компоненті `Welcome`: ```js function Welcome(props) { @@ -108,7 +108,7 @@ function Welcome(props) { } ``` -For components defined as classes, use `this.props.children`: +Для класових компонентів використовуйте `this.props.children`: ```js class Welcome extends React.Component { @@ -120,47 +120,47 @@ class Welcome extends React.Component { ### [`state`](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) {#state} -A component needs `state` when some data associated with it changes over time. For example, a `Checkbox` component might need `isChecked` in its state, and a `NewsFeed` component might want to keep track of `fetchedPosts` in its state. +Компонент потребує `state`, коли якісь дані в ньому змінюються з часом. Наприклад, компоненту `Checkbox` може знадобитися `isChecked` у його стані, а компонент `NewsFeed` має відслідковувати `fetchedPosts` у своєму стані. -The most important difference between `state` and `props` is that `props` are passed from a parent component, but `state` is managed by the component itself. A component cannot change its `props`, but it can change its `state`. To do so, it must call `this.setState()`. Only components defined as classes can have state. +Найбільша різниця між `state` і `props` полягає в тому, що `props` передаються з батьківського компонента, а `state` керується самим компонентом. Компонент не може змінювати власні `props`, але може змінювати `state`. Для цього він має викликати `this.setState()`. Класові компоненти можуть мати власний стан, а функціональні компоненти можуть використовувати стан за допомогою хуків. -For each particular piece of changing data, there should be just one component that "owns" it in its state. Don't try to synchronize states of two different components. Instead, [lift it up](/docs/lifting-state-up.html) to their closest shared ancestor, and pass it down as props to both of them. +Кожна окрема частина змінних даних має бути під керуванням єдиного компоненту, що має її в своєму стані. Не намагайтесь синхронізувати стани між двома різними компонентами. Замість цього [підійміть його](/docs/lifting-state-up.html) до найближчого батьківського компонента і передайте його через пропси до кожного дочірнього компоненту. -## [Lifecycle Methods](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods} +## [Методи життєвого циклу](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods} -Lifecycle methods are custom functionality that gets executed during the different phases of a component. There are methods available when the component gets created and inserted into the DOM ([mounting](/docs/react-component.html#mounting)), when the component updates, and when the component gets unmounted or removed from the DOM. +Методи життєвого циклу — це визначена користувачем функціональність, що виконується протягом різних етапів життя компонента. Є методи, котрі доступні коли компонент створюється і вставляється в DOM ([монтування](/docs/react-component.html#mounting)), коли компонент оновлюється і коли компонент відмонтовується і видаляється з DOM. - ## [Controlled](/docs/forms.html#controlled-components) vs. [Uncontrolled Components](/docs/uncontrolled-components.html) + ## [Контрольовані](/docs/forms.html#controlled-components) та [неконтрольовані компоненти](/docs/uncontrolled-components.html) -React has two different approaches to dealing with form inputs. +React має два різних підходи для керування формами. -An input form element whose value is controlled by React is called a *controlled component*. When a user enters data into a controlled component a change event handler is triggered and your code decides whether the input is valid (by re-rendering with the updated value). If you do not re-render then the form element will remain unchanged. +Елемент форми `input`, чиє значення контролюється React, називається *контрольованим компонентом*. Коли користувач вводить дані у контрольований компонент, викликається обробник події зміни і ваш код вирішує чи є ввід допустимим (`input` повторно рендериться з оновленим значенням). Якщо ви не рендерите елемент форми повторно, то він лишиться без змін. -An *uncontrolled component* works like form elements do outside of React. When a user inputs data into a form field (an input box, dropdown, etc) the updated information is reflected without React needing to do anything. However, this also means that you can't force the field to have a certain value. +*Неконтрольований компонент* працює як звичайний елемент форми поза межами React. Коли користувач вводить дані в поле форми (поле вводу, випадаючий список і т. д.), оновлена інформація відображається без участі React. Однак це також означає, що ви не можете присвоїти полю певні значення. -In most cases you should use controlled components. +У більшості випадків використовуйте контрольовані компоненти. -## [Keys](/docs/lists-and-keys.html) {#keys} +## [Ключі](/docs/lists-and-keys.html) {#keys} -A "key" is a special string attribute you need to include when creating arrays of elements. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside an array to give the elements a stable identity. +"Ключ" — це спеціальний рядковий атрибут, який ви маєте додавати при створенні масивів елементів. Ключі допомагають React визначати які елементи змінились, були додані чи видалені. Ключі мають бути надані елементам всередині масиву для того, щоб вони мали стійку сутність. -Keys only need to be unique among sibling elements in the same array. They don't need to be unique across the whole application or even a single component. +Ключі мають бути унікальними у сусідніх елементах одного і того ж масиву. Вони не мають бути унікальними по всьому додатку чи навіть у спільному компоненті. -Don't pass something like `Math.random()` to keys. It is important that keys have a "stable identity" across re-renders so that React can determine when items are added, removed, or re-ordered. Ideally, keys should correspond to unique and stable identifiers coming from your data, such as `post.id`. +Не вказуйте щось на кшталт `Math.random()` як ключі. Важливо, щоб ключі мали "стійку сутність" для повторних рендерингів,щоб React міг визначати коли елементи додані, видалені або їх порядок змінено. В ідеалі, ключі мають відповідати унікальним і стабільним ідентифікаторам із ваших даних, наприклад, `post.id`. -## [Refs](/docs/refs-and-the-dom.html) {#refs} +## [Рефи](/docs/refs-and-the-dom.html) {#refs} -React supports a special attribute that you can attach to any component. The `ref` attribute can be an object created by [`React.createRef()` function](/docs/react-api.html#reactcreateref) or a callback function, or a string (in legacy API). When the `ref` attribute is a callback function, the function receives the underlying DOM element or class instance (depending on the type of element) as its argument. This allows you to have direct access to the DOM element or component instance. +React підтримує спецільний атрибут, який ви можете прикріпити до будь-якого компонента. Атрибуть `ref` може бути об’єктом створеним [функцією `React.createRef()`](/docs/react-api.html#reactcreateref) або функцією зворотнього виклику, або рядком (у застарілому API). Коли атрибут `ref` є функцією зворотнього виклику, функція отримує у якості аргумента DOM-елемент, що лежить в основі компонента, або екземпляр класу (залежно від типу елемента). Це дозволяє вам мати прямий доступ до елемента DOM чи до екземпляру компонента. -Use refs sparingly. If you find yourself often using refs to "make things happen" in your app, consider getting more familiar with [top-down data flow](/docs/lifting-state-up.html). +Використовуйте рефи у виключних випадках. Якщо ви помічаєте за собою часте використання рефів у вашому додатку, ознайомтесь з [низхідним потоком даних](/docs/lifting-state-up.html). -## [Events](/docs/handling-events.html) {#events} +## [Події](/docs/handling-events.html) {#events} -Handling events with React elements has some syntactic differences: +Обробка подій у React-елементах має деякі синтаксичні особливості: -* React event handlers are named using camelCase, rather than lowercase. -* With JSX you pass a function as the event handler, rather than a string. +* У React обробники подій іменуються в стилі camelCase, замість нижнього регістру. +* З JSX ви передаєте функцію, а не рядок, як обробник події. -## [Reconciliation](/docs/reconciliation.html) {#reconciliation} +## [Узгодження](/docs/reconciliation.html) {#reconciliation} -When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called "reconciliation". +Коли пропси чи стан компонента змінюються, React порівнює тільки що повернутий і попередній відрендерений елемент та вирішує, чи потрібно оновлювати DOM. Якщо вони не рівні, то React здійснює оновлення DOM. Цей процес і називається "узгодження".