From 14363b309cf1cdd9c06be6d32d50cefde2b2cdfe Mon Sep 17 00:00:00 2001 From: necheporenko Date: Mon, 18 Mar 2019 11:40:59 +0200 Subject: [PATCH 1/6] Translate "Fragments" into Ukrainian --- content/docs/fragments.md | 60 +++++++++++++++++++-------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 04de0463b..5905ac6ba 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -1,10 +1,10 @@ --- id: fragments -title: Fragments +title: Фрагменти permalink: docs/fragments.html --- -A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM. +Повернення кількох елементів з компонента є поширеною практикою в React. Фрагменти дозволяють формувати список дочірніх елементів, не створюючи зайвих вузлів в DOM. ```js render() { @@ -18,11 +18,11 @@ render() { } ``` -There is also a new [short syntax](#short-syntax) for declaring them, but it isn't supported by all popular tools yet. +Також існує [скорочений запис](#short-syntax), проте ще не всі популярні інструменти підтримують його. -## Motivation {#motivation} +## Мотивація {#motivation} -A common pattern is for a component to return a list of children. Take this example React snippet: +Повернення списку дочірніх елементів з компонента є поширеною практикою. Розглянемо приклад на React: ```jsx class Table extends React.Component { @@ -38,93 +38,93 @@ class Table extends React.Component { } ``` -`` would need to return multiple `` elements in order for the rendered HTML to be valid. If a parent div was used inside the `render()` of ``, then the resulting HTML will be invalid. +`` повинен повернути кілька елементів ``, щоб HTML вийшов валідним. Якщо використовувати div як батьківський елемент всередині методу `render()` компонента ``, то HTML виявиться невалідним. ```jsx class Columns extends React.Component { render() { return (
- Hello - World + Привіт + Світ
); } } ``` -results in a `` output of: +Результатом виводу `
` буде: ```jsx
-
- + +
HelloWorldПривітСвіт
``` -Fragments solve this problem. +Фрагменти вирішують цю проблему. -## Usage {#usage} +## Використання {#usage} ```jsx{4,7} class Columns extends React.Component { render() { return ( - Hello - World + Привіт + Світ ); } } ``` -which results in a correct `` output of: +Результатом буде правильний вивід `
`: ```jsx
- - + +
HelloWorldПривітСвіт
``` -### Short Syntax {#short-syntax} +### Скорочений запис {#short-syntax} -There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags: +Існує скорочений запис оголошення фрагментів. Він виглядає як порожні теги: ```jsx{4,7} class Columns extends React.Component { render() { return ( <> - Hello - World + Привіт + Світ ); } } ``` -You can use `<>` the same way you'd use any other element except that it doesn't support keys or attributes. +Ви можете використовувати `<>` так само, як і будь-який інший елемент, проте такий запис не підтримує ключі або атрибути. -Note that **[many tools don't support it yet](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)** so you might want to explicitly write `` until the tooling catches up. +Зверніть увагу, що **[більшість інструментів ще не підтримують скорочений запис](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**, тому можна явно писати ``, поки не з'явиться підтримка. -### Keyed Fragments {#keyed-fragments} +### Фрагменти з ключами {#keyed-fragments} -Fragments declared with the explicit `` syntax may have keys. A use case for this is mapping a collection to an array of fragments -- for example, to create a description list: +Фрагменти, які оголошені за допомогою `` можуть мати ключі. Наприклад, їх можна використовувати при створенні списку визначень, перетворивши колекцію в масив фрагментів. ```jsx function Glossary(props) { return (
{props.items.map(item => ( - // Without the `key`, React will fire a key warning + // Без атрибута `key`, React видасть попередження про його відсутність
{item.term}
{item.description}
@@ -135,8 +135,8 @@ function Glossary(props) { } ``` -`key` is the only attribute that can be passed to `Fragment`. In the future, we may add support for additional attributes, such as event handlers. +`key` — це єдиний атрибут, який допустимий в `Fragment`. В майбутньому планується додати підтримку додаткових атрибутів, наприклад, обробників подій. -### Live Demo {#live-demo} +### Живий приклад {#live-demo} -You can try out the new JSX fragment syntax with this [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). +Новий синтаксис JSX фрагментів можна спробувати на [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). From 1362c2aa3019191e8ebc5ef348457607f265847e Mon Sep 17 00:00:00 2001 From: Oleksii Polovyi Date: Mon, 18 Mar 2019 19:55:28 +0200 Subject: [PATCH 2/6] Update content/docs/fragments.md Co-Authored-By: necheporenko --- content/docs/fragments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 5905ac6ba..24e28ad55 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -89,7 +89,7 @@ class Columns extends React.Component { - +
ПривітСвітСвітe
``` From 6840580ebb69a3d47fbe4898f5b44a3ec7dc2fcc Mon Sep 17 00:00:00 2001 From: Oleksii Polovyi Date: Mon, 18 Mar 2019 19:55:39 +0200 Subject: [PATCH 3/6] Update content/docs/fragments.md Co-Authored-By: necheporenko --- content/docs/fragments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 24e28ad55..0df6db30a 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -104,7 +104,7 @@ class Columns extends React.Component { return ( <> Привіт - Світ + Світe ); } From 4e343d92b313a8a9e5f3d2fe3471a1271738ede1 Mon Sep 17 00:00:00 2001 From: necheporenko Date: Mon, 18 Mar 2019 20:02:19 +0200 Subject: [PATCH 4/6] =?UTF-8?q?fix:=20'=D1=81=D0=B2=D1=96=D1=82=20'=20->?= =?UTF-8?q?=20'=D1=81=D0=B2=D1=96=D1=82=D0=B5'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/fragments.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 0df6db30a..d64a16a98 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -46,7 +46,7 @@ class Columns extends React.Component { return (
Привіт - Світ + Світe
); } @@ -60,7 +60,7 @@ class Columns extends React.Component {
Привіт - Світ + Світe
@@ -76,7 +76,7 @@ class Columns extends React.Component { return ( Привіт - Світ + Світe ); } From 217d756c3cc6289c58d921eadee408cb6543629b Mon Sep 17 00:00:00 2001 From: Volodymyr Klymenko Date: Wed, 20 Mar 2019 14:57:09 +0200 Subject: [PATCH 5/6] Update content/docs/fragments.md Co-Authored-By: necheporenko --- content/docs/fragments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index d64a16a98..3cd865473 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -139,4 +139,4 @@ function Glossary(props) { ### Живий приклад {#live-demo} -Новий синтаксис JSX фрагментів можна спробувати на [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). +Новий синтаксис JSX-фрагментів можна спробувати на [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). From cada7d3885dc0634139e702c510506a4e73e3ff1 Mon Sep 17 00:00:00 2001 From: necheporenko Date: Wed, 20 Mar 2019 15:00:42 +0200 Subject: [PATCH 6/6] fix: translation --- content/docs/fragments.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 3cd865473..392d55a9a 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -135,8 +135,8 @@ function Glossary(props) { } ``` -`key` — це єдиний атрибут, який допустимий в `Fragment`. В майбутньому планується додати підтримку додаткових атрибутів, наприклад, обробників подій. +`key` — це єдиний атрибут, який можна передати у `Fragment`. В майбутньому планується додати підтримку додаткових атрибутів, наприклад, обробників подій. ### Живий приклад {#live-demo} -Новий синтаксис JSX-фрагментів можна спробувати на [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). +Новий синтаксис JSX фрагментів можна спробувати на [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000).