diff --git a/content/docs/fragments.md b/content/docs/fragments.md
index 7c6f4fd6c..57afdaee5 100644
--- a/content/docs/fragments.md
+++ b/content/docs/fragments.md
@@ -1,10 +1,9 @@
---
id: fragments
-title: Fragments
+title: Fragmentos
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.
+Un patrón común en React es que un componente devuelva multiples elementos. Los Fragmentos te permiten agrupar una lista de hijos sin agregar nodos extra al DOM.
```js
render() {
@@ -18,11 +17,11 @@ render() {
}
```
-There is also a new [short syntax](#short-syntax) for declaring them, but it isn't supported by all popular tools yet.
+También hay una nueva [sintaxis corta](#sintaxis-corta) para declararlos, pero aún no es soportada por todas las herramientas populares.
-## Motivation
+## Motivación
-A common pattern is for a component to return a list of children. Take this example React snippet:
+Un patrón común es que un componente devuelva una lista de hijos. Toma este código de ejemplo en React:
```jsx
class Table extends React.Component {
@@ -38,7 +37,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.
+`` tendría que devolver múltiples elementos ` | ` para que el código HTML renderizado sea válido. Si un div padre fue utilizado dentro del código `render()` de ``, entonces el código HTML resultante será inválido.
```jsx
class Columns extends React.Component {
@@ -53,7 +52,7 @@ class Columns extends React.Component {
}
```
-results in a `` output of:
+resulta en una salida de `` de:
```jsx
@@ -66,9 +65,9 @@ results in a `` output of:
```
-Fragments solve this problem.
+Los Fragmentos solucionan este problema.
-## Usage
+## Uso
```jsx{4,7}
class Columns extends React.Component {
@@ -83,7 +82,7 @@ class Columns extends React.Component {
}
```
-which results in a correct `` output of:
+que resulta en una salida correcta de `` de:
```jsx
@@ -94,9 +93,9 @@ which results in a correct `` output of:
```
-### Short Syntax
+### Sintaxis corta
-There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags:
+Hay una sintaxis nueva, más corta que puedes usar para declarar fragmentos. Parecen etiquetas vacías:
```jsx{4,7}
class Columns extends React.Component {
@@ -111,20 +110,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.
+Puedes utilizar `<>>` de la misma manera que usarías cualquier otro elemento, excepto que este no soporta llaves o atributos.
-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.
+Considera que: **[muchas herramientas no lo soportan aún](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**, por lo que podrías escribir explícitamente `` hasta que las herramientas se pongan al día.
-### Keyed Fragments
+### Fragmentos incrustados
-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:
+Fragmentos declarados con la sintaxis explícita `` pueden tener llaves. Un caso de uso para esto es el mapeo de una colección a un arreglo de fragmentos -- por ejemplo, para crear una lista de descripción:
```jsx
function Glossary(props) {
return (
{props.items.map(item => (
- // Without the `key`, React will fire a key warning
+ // Sin el prop 'key', React disparará una advertencia de key
- {item.term}
- {item.description}
@@ -135,8 +134,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` es el único atributo que se puede pasar a `Fragment`. En el futuro, vamos a agregar soporte para atributos adicionales como manejadores de eventos.
-### Live Demo
+### Demostración en vivo
-You can try out the new JSX fragment syntax with this [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000).
+Puedes probar la nueva sintaxis de fragmentos JSX con este [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000).
\ No newline at end of file
|