From 144efd71eed396b25e6a49850d82689cc888d5a8 Mon Sep 17 00:00:00 2001 From: ntishkevich Date: Tue, 12 Feb 2019 00:28:42 +0300 Subject: [PATCH 1/8] Translate "Fragments" into Russian --- content/docs/fragments.md | 40 +++++++++++++++++++-------------------- content/docs/nav.yml | 2 +- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 04de0463b..2c4d5fe8f 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,7 +38,7 @@ 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. Если метод `render` компонента `` сгруппирует все дочерние элементы в div, то полученный HTML будет не валидным. ```jsx class Columns extends React.Component { @@ -53,7 +53,7 @@ class Columns extends React.Component { } ``` -results in a `` output of: +результирует в следующий результат `
`: ```jsx
@@ -66,9 +66,9 @@ results in a `
` output of:
``` -Fragments solve this problem. +Фрагменты позволяют избавиться от таких проблем. -## Usage {#usage} +## Использование {#usage} ```jsx{4,7} class Columns extends React.Component { @@ -83,7 +83,7 @@ class Columns extends React.Component { } ``` -which results in a correct `` output of: +который вернёт результат `
`: ```jsx
@@ -94,9 +94,9 @@ which results in a correct `
` output of:
``` -### 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 { @@ -111,20 +111,20 @@ class Columns extends React.Component { } ``` -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). diff --git a/content/docs/nav.yml b/content/docs/nav.yml index fd6bdeb14..e5412329e 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -48,7 +48,7 @@ - id: forwarding-refs title: Forwarding Refs - id: fragments - title: Fragments + title: Фрагменты - id: higher-order-components title: Higher-Order Components - id: integrating-with-other-libraries From 87acb53fd1c7de321edd71a80c3c59874b3f26b2 Mon Sep 17 00:00:00 2001 From: ntishkevich Date: Wed, 13 Feb 2019 00:06:20 +0300 Subject: [PATCH 2/8] Translate "Fragments" into Russian --- content/docs/fragments.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 2c4d5fe8f..7cb323ece 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -4,7 +4,7 @@ title: Фрагменты permalink: docs/fragments.html --- -Общим примером в React является компонент, возвращающий несколько элементов. Фрагменты позволяют группировать список дочерних элементов без добавления дополнительного узла в DOM. +Возврат нескольких элементов из компонента является распространенной практикой в React. Фрагменты позволяют сформировать список дочерних элементов без добавления дополнительного узла в DOM. ```js render() { @@ -18,11 +18,11 @@ render() { } ``` -Существует [краткая запись](#short-syntax), но не во все популярные инструменты была добавлена её поддержка. +Существует [сокращенная запись](#short-syntax), но ещё не все популярные инструменты поддерживают её. ## Мотивация {#motivation} -Общим примером является компонент, возвращающий список дочерних элементов. Рассмотрим пример на React: +Возврат списка дочерних элементов из компонента – распространенная практика. Рассмотрим следующий пример на React: ```jsx class Table extends React.Component { @@ -38,7 +38,7 @@ class Table extends React.Component { } ``` -`` требуется вернуть несколько элементов `` для формирования валидного HTML. Если метод `render` компонента `` сгруппирует все дочерние элементы в div, то полученный HTML будет не валидным. +`` следует вернуть несколько элементов ``, чтобы отрендерить валидный HTMl. Если использовать div как родительский элемент в `render` компонента ``, получим не валидный HTML. ```jsx class Columns extends React.Component { @@ -53,7 +53,7 @@ class Columns extends React.Component { } ``` -результирует в следующий результат ``: +приводит к результату в `
`: ```jsx
@@ -66,7 +66,7 @@ class Columns extends React.Component {
``` -Фрагменты позволяют избавиться от таких проблем. +Фрагменты решают эту проблему. ## Использование {#usage} @@ -83,7 +83,7 @@ class Columns extends React.Component { } ``` -который вернёт результат ``: +приводит к результату в `
`: ```jsx
@@ -94,9 +94,9 @@ class Columns extends React.Component {
``` -### Краткая запись {#short-syntax} +### Сокращенная запись {#short-syntax} -Существует краткая запись фрагментов. Она выглядит как пустые тэги: +Существует сокращенная запись фрагментов. Она выглядит как пустые тэги: ```jsx{4,7} class Columns extends React.Component { @@ -111,20 +111,20 @@ class Columns extends React.Component { } ``` -Вы можете использовать `<>` точно также, как используете любые другие элементы, за исключение, что такая запись не поддерживает ключи и атрибуты. +Вы можете использовать `<>` так же, как используете любой другой элемент, но такая запись не поддерживает ключи и атрибуты. -Обратите внимание, что **[многие инструменты ещё не поддерживают такой синтакси](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**, поэтому вы вероятно захотите использовать явный синтаксис `` до появления поддержки в инструментах. +Обратите внимание, что **[многие инструменты ещё не поддерживают сокращенную запись](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**, поэтому вы можете использовать запись ``, пока не появится поддержка в инструментах. ### Фрагменты с ключами {#keyed-fragments} -Фрагменты, объявленные с полным синтаксисом ``, могут иметь ключи. Маппинг коллекции в массив фрагментов для создания описания, напримре, вариант использования для фрагментов: +Фрагменты, объявленные с помощью ``, могут иметь ключи. Примером использования является маппинг коллекции в массив фрагментов – например, для создания списка определений: ```jsx function Glossary(props) { return (
{props.items.map(item => ( - // Без указания атрибута `key`, React выдаст предупреждени об его отсутсвии + // Без указания атрибута `key`, React выдаст предупреждение об его отсутсвии
{item.term}
{item.description}
@@ -135,8 +135,8 @@ function Glossary(props) { } ``` -`key` – это единственный атрибут, допускаемый у компонента `Fragment`. Мы планируем в ближайшем будущем добавить поддержку дополнительных атрибутов, например, обработчики событий. +`key` – это единственный атрибут, допустимый у `Fragment`. Мы планируем в будущем добавить поддержку дополнительных атрибутов, например, обработчики событий. -### Демо {#live-demo} +### Живой пример {#live-demo} -Синтаксис JSX фрагментов вы можете опробовать на [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). +Новый синтаксис JSX фрагментов вы можете опробовать на [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). From 2a39fec423c47a3d87c2768e9f210c5de73af0ff Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Wed, 13 Feb 2019 12:34:35 +0300 Subject: [PATCH 3/8] Translate "Fragments" into Russian --- content/docs/fragments.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 7cb323ece..e7ec018f8 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -4,7 +4,7 @@ title: Фрагменты permalink: docs/fragments.html --- -Возврат нескольких элементов из компонента является распространенной практикой в React. Фрагменты позволяют сформировать список дочерних элементов без добавления дополнительного узла в DOM. +Возврат нескольких элементов из компонента является распространенной практикой в React. Фрагменты позволяют формировать список дочерних элементов, не добавляя дополнительных узлов в DOM. ```js render() { @@ -18,11 +18,11 @@ render() { } ``` -Существует [сокращенная запись](#short-syntax), но ещё не все популярные инструменты поддерживают её. +Также существует и [сокращенная запись](#short-syntax), однако не все популярные инструменты поддерживают её. ## Мотивация {#motivation} -Возврат списка дочерних элементов из компонента – распространенная практика. Рассмотрим следующий пример на React: +Возврат списка дочерних элементов из компонента – распространенная практика. Рассмотрим пример на React: ```jsx class Table extends React.Component { @@ -38,7 +38,7 @@ class Table extends React.Component { } ``` -`` следует вернуть несколько элементов ``, чтобы отрендерить валидный HTMl. Если использовать div как родительский элемент в `render` компонента ``, получим не валидный HTML. +`` должен вернуть несколько элементов ``, чтобы получить валидный HTML. Если использовать div как родительский элемент внутри метода `render()` компонента ``, то полученный HTML будет невалидным. ```jsx class Columns extends React.Component { @@ -53,7 +53,7 @@ class Columns extends React.Component { } ``` -приводит к результату в ``: +результатом вывода `
` будет: ```jsx
@@ -83,7 +83,7 @@ class Columns extends React.Component { } ``` -приводит к результату в `
`: +результатом будет правильный вывод `
`: ```jsx
@@ -96,7 +96,7 @@ class Columns extends React.Component { ### Сокращенная запись {#short-syntax} -Существует сокращенная запись фрагментов. Она выглядит как пустые тэги: +Существует сокращенная запись объявления фрагментов. Она выглядит как пустые теги: ```jsx{4,7} class Columns extends React.Component { @@ -111,13 +111,13 @@ class Columns extends React.Component { } ``` -Вы можете использовать `<>` так же, как используете любой другой элемент, но такая запись не поддерживает ключи и атрибуты. +Можно использовать `<>` так же, как используется любой другой элемент. Однако такая запись не поддерживает ключи или атрибуты. -Обратите внимание, что **[многие инструменты ещё не поддерживают сокращенную запись](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**, поэтому вы можете использовать запись ``, пока не появится поддержка в инструментах. +Обратите внимание, что **[большинство инструментов ещё не поддерживают сокращенную запись](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**, поэтому можно явно указывать ``, пока не появится поддержка. ### Фрагменты с ключами {#keyed-fragments} -Фрагменты, объявленные с помощью ``, могут иметь ключи. Примером использования является маппинг коллекции в массив фрагментов – например, для создания списка определений: +Фрагменты, объявленные с помощью ``, могут иметь ключи. Как пример использования – преобразовать коллекцию в массив фрагментов, например, для создания списка определений: ```jsx function Glossary(props) { @@ -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). From 7ef8112cffddb97b24b5f5293265c2239a45e24e Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Thu, 14 Feb 2019 12:07:28 +0300 Subject: [PATCH 4/8] =?UTF-8?q?Replace=20a=20letter=20'e'=20with=20'=D1=91?= =?UTF-8?q?'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/fragments.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index e7ec018f8..3b7997035 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -4,7 +4,7 @@ title: Фрагменты permalink: docs/fragments.html --- -Возврат нескольких элементов из компонента является распространенной практикой в React. Фрагменты позволяют формировать список дочерних элементов, не добавляя дополнительных узлов в DOM. +Возврат нескольких элементов из компонента является распространённой практикой в React. Фрагменты позволяют формировать список дочерних элементов, не добавляя дополнительных узлов в DOM. ```js render() { @@ -18,11 +18,11 @@ render() { } ``` -Также существует и [сокращенная запись](#short-syntax), однако не все популярные инструменты поддерживают её. +Также существует и [сокращённая запись](#short-syntax), однако не все популярные инструменты поддерживают её. ## Мотивация {#motivation} -Возврат списка дочерних элементов из компонента – распространенная практика. Рассмотрим пример на React: +Возврат списка дочерних элементов из компонента – распространённая практика. Рассмотрим пример на React: ```jsx class Table extends React.Component { @@ -94,9 +94,9 @@ class Columns extends React.Component {
``` -### Сокращенная запись {#short-syntax} +### Сокращённая запись {#short-syntax} -Существует сокращенная запись объявления фрагментов. Она выглядит как пустые теги: +Существует сокращённая запись объявления фрагментов. Она выглядит как пустые теги: ```jsx{4,7} class Columns extends React.Component { @@ -113,7 +113,7 @@ class Columns extends React.Component { Можно использовать `<>` так же, как используется любой другой элемент. Однако такая запись не поддерживает ключи или атрибуты. -Обратите внимание, что **[большинство инструментов ещё не поддерживают сокращенную запись](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**, поэтому можно явно указывать ``, пока не появится поддержка. +Обратите внимание, что **[большинство инструментов ещё не поддерживают сокращённую запись](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**, поэтому можно явно указывать ``, пока не появится поддержка. ### Фрагменты с ключами {#keyed-fragments} From 158685e4f944f15c30755b67318a28549b7563a2 Mon Sep 17 00:00:00 2001 From: ntishkevich Date: Thu, 14 Feb 2019 23:28:35 +0300 Subject: [PATCH 5/8] fix typos and misspellings. Add the missing commas. --- 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 3b7997035..27d427c54 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -18,7 +18,7 @@ render() { } ``` -Также существует и [сокращённая запись](#short-syntax), однако не все популярные инструменты поддерживают её. +Также существует [сокращённая запись](#short-syntax), однако, не все популярные инструменты поддерживают её. ## Мотивация {#motivation} @@ -111,7 +111,7 @@ class Columns extends React.Component { } ``` -Можно использовать `<>` так же, как используется любой другой элемент. Однако такая запись не поддерживает ключи или атрибуты. +Можно использовать `<>` так же, как используется любой другой элемент. Однако, такая запись не поддерживает ключи или атрибуты. Обратите внимание, что **[большинство инструментов ещё не поддерживают сокращённую запись](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**, поэтому можно явно указывать ``, пока не появится поддержка. @@ -124,7 +124,7 @@ function Glossary(props) { return (
{props.items.map(item => ( - // Без указания атрибута `key`, React выдаст предупреждение об его отсутсвии + // Без указания атрибута `key`, React выдаст предупреждение об его отсутствии
{item.term}
{item.description}
From e7d1795f7019626ed3d0c972c6c0616772b67b52 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Fri, 15 Feb 2019 12:09:50 +0300 Subject: [PATCH 6/8] Reword the sentence about keyed fragments. Remove the redundant commas. --- 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 27d427c54..4c2dcb704 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -18,7 +18,7 @@ render() { } ``` -Также существует [сокращённая запись](#short-syntax), однако, не все популярные инструменты поддерживают её. +Также существует [сокращённая запись](#short-syntax), однако не все популярные инструменты поддерживают её. ## Мотивация {#motivation} @@ -111,13 +111,13 @@ class Columns extends React.Component { } ``` -Можно использовать `<>` так же, как используется любой другой элемент. Однако, такая запись не поддерживает ключи или атрибуты. +Можно использовать `<>` так же, как используется любой другой элемент. Однако такая запись не поддерживает ключи или атрибуты. Обратите внимание, что **[большинство инструментов ещё не поддерживают сокращённую запись](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**, поэтому можно явно указывать ``, пока не появится поддержка. ### Фрагменты с ключами {#keyed-fragments} -Фрагменты, объявленные с помощью ``, могут иметь ключи. Как пример использования – преобразовать коллекцию в массив фрагментов, например, для создания списка определений: +Фрагменты, объявленные с помощью ``, могут иметь ключи. Например, их можно использовать при создании списка определений, преобразовав коллекцию в массив фрагментов. ```jsx function Glossary(props) { From 8626deb15f4c47d720bdecb5675954bf1c204024 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 20 Feb 2019 12:03:05 +0300 Subject: [PATCH 7/8] Update content/docs/fragments.md Co-Authored-By: ntishkevich --- 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 4c2dcb704..335433553 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -4,7 +4,7 @@ title: Фрагменты permalink: docs/fragments.html --- -Возврат нескольких элементов из компонента является распространённой практикой в React. Фрагменты позволяют формировать список дочерних элементов, не добавляя дополнительных узлов в DOM. +Возврат нескольких элементов из компонента является распространённой практикой в React. Фрагменты позволяют формировать список дочерних элементов, не создавая лишних узлов в DOM. ```js render() { From 44a060f3b210e78dc7ee002c9a36fff79f282a6c Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Wed, 20 Feb 2019 12:03:20 +0300 Subject: [PATCH 8/8] Update content/docs/fragments.md Co-Authored-By: ntishkevich --- 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 335433553..7c7b20955 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -38,7 +38,7 @@ class Table extends React.Component { } ``` -`` должен вернуть несколько элементов ``, чтобы получить валидный HTML. Если использовать div как родительский элемент внутри метода `render()` компонента ``, то полученный HTML будет невалидным. +`` должен вернуть несколько элементов ``, чтобы HTML получился валидным. Если использовать div как родительский элемент внутри метода `render()` компонента ``, то HTML окажется невалидным. ```jsx class Columns extends React.Component {