Translation Fragments

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 {
 }
 ```
 
-`<Columns />` would need to return multiple `<td>` elements in order for the rendered HTML to be valid. If a parent div was used inside the `render()` of `<Columns />`, then the resulting HTML will be invalid.
+`<Columns />` должен вернуть несколько элементов `<td>`, чтобы HTML получился валидным. Если использовать div как родительский элемент внутри метода `render()` компонента `<Columns />`, то HTML окажется невалидным.
 
 ```jsx
 class Columns extends React.Component {
@@ -53,7 +53,7 @@ class Columns extends React.Component {
 }
 ```
 
-results in a `<Table />` output of:
+результатом вывода `<Table />` будет:
 
 ```jsx
 <table>
@@ -66,9 +66,9 @@ results in a `<Table />` output of:
 </table>
 ```
 
-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 `<Table />` output of:
+результатом будет правильный вывод `<Table />`:
 
 ```jsx
 <table>
@@ -94,9 +94,9 @@ which results in a correct `<Table />` output of:
 </table>
 ```
 
-### 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 `<React.Fragment>` until the tooling catches up.
+Обратите внимание, что **[большинство инструментов ещё не поддерживают сокращённую запись](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**, поэтому можно явно указывать `<React.Fragment>`, пока не появится поддержка.
 
-### Keyed Fragments {#keyed-fragments}
+### Фрагменты с ключами {#keyed-fragments}
 
-Fragments declared with the explicit `<React.Fragment>` 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:
+Фрагменты, объявленные с помощью `<React.Fragment>`, могут иметь ключи. Например, их можно использовать при создании списка определений, преобразовав коллекцию в массив фрагментов.
 
 ```jsx
 function Glossary(props) {
   return (
     <dl>
       {props.items.map(item => (
-        // Without the `key`, React will fire a key warning
+        // Без указания атрибута `key`, React выдаст предупреждение об его отсутствии
         <React.Fragment key={item.id}>
           <dt>{item.term}</dt>
           <dd>{item.description}</dd>
@@ -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).

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