From 9296a904f4485e9abf46a66c36fd6f8ee56e5129 Mon Sep 17 00:00:00 2001 From: Alex Ramirez Date: Tue, 5 Feb 2019 09:28:59 -0500 Subject: [PATCH 1/4] Translate: Fragments --- content/docs/fragments.md | 65 +++++++++++++++++++-------------------- 1 file changed, 32 insertions(+), 33 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 7c6f4fd6c..dbfaa3ed1 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -1,10 +1,9 @@ --- -id: fragments -title: Fragments -permalink: docs/fragments.html +id: fragmentos +title: Fragmentos +permalink: docs/fragmentos.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 Fragments le 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](#short-syntax) 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. Tome este código de ejemplo en React: ```jsx class Table extends React.Component { @@ -38,93 +37,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. +`` tendría que devolver múltiples elementos `` para que el código HTML renderizado sea valido. 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 { render() { return (
- Hello - World + Hola + Mundo
); } } ``` -results in a `` output of: +resulta en una salida de `
` de: ```jsx
-
- + +
HelloWorldHolaMundo
``` -Fragments solve this problem. +Los Fragments solucionan este problema. -## Usage +## Uso ```jsx{4,7} class Columns extends React.Component { render() { return ( - Hello - World + Hola + Mundo ); } } ``` -which results in a correct `` output of: +que resulta en una correcta salida de `
` de: ```jsx
- - + +
HelloWorldHolaMundo
``` -### 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 puede usar para declarar fragments. Parecen etiquetas vacías: ```jsx{4,7} class Columns extends React.Component { render() { return ( <> - Hello - World + Hola + Mundo ); } } ``` -You can use `<>` the same way you'd use any other element except that it doesn't support keys or attributes. +Puede utilizar `<>` de la misma manera que usaría 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. +Considere 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ía escribir explícitamente `` hasta que las herramientas se pongan al día. -### Keyed Fragments +### Fragments 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: +Fragments 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 fragmento -- 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 la '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). +Puede probar la nueva sintaxis de fragmentos JSX con este [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). \ No newline at end of file From 0e84fb9d6d743df83fe95f601bdf8dd8e43d5d18 Mon Sep 17 00:00:00 2001 From: Alex Ramirez Date: Tue, 5 Feb 2019 19:35:49 -0500 Subject: [PATCH 2/4] Fix typos and change text to use informal communication --- content/docs/fragments.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index dbfaa3ed1..744285e9e 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -1,9 +1,9 @@ --- -id: fragmentos -title: Fragmentos -permalink: docs/fragmentos.html +id: fragments +title: Fragments +permalink: docs/fragments.html --- -Un patrón común en React es que un componente devuelva multiples elementos. Los Fragments le permiten agrupar una lista de hijos sin agregar nodos extra al DOM. +Un patrón común en React es que un componente devuelva multiples elementos. Los Fragments te permiten agrupar una lista de hijos sin agregar nodos extra al DOM. ```js render() { @@ -17,11 +17,11 @@ render() { } ``` -También hay una nueva [sintaxis corta](#short-syntax) para declararlos, pero aún no es soportada por todas las herramientas populares. +También hay una nueva [sintaxis corta](#sintaxis-corta) para declararlos, pero aún no es soportada por todas las herramientas populares. ## Motivación -Un patrón común es que un componente devuelva una lista de hijos. Tome este código de ejemplo en React: +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 { @@ -37,7 +37,7 @@ class Table extends React.Component { } ``` -`` tendría que devolver múltiples elementos `` para que el código HTML renderizado sea valido. Si un div padre fue utilizado dentro del código `render()` de ``, entonces el código HTML resultante será inválido. +`` 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 { @@ -110,13 +110,13 @@ class Columns extends React.Component { } ``` -Puede utilizar `<>` de la misma manera que usaría cualquier otro elemento, excepto que este no soporta llaves o atributos. +Puedes utilizar `<>` de la misma manera que usarías cualquier otro elemento, excepto que este no soporta llaves o atributos. -Considere 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ía escribir explícitamente `` hasta que las herramientas se pongan al día. +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. ### Fragments incrustados -Fragments 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 fragmento -- por ejemplo, para crear una lista de descripción: +Fragments 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 fragment -- por ejemplo, para crear una lista de descripción: ```jsx function Glossary(props) { @@ -138,4 +138,4 @@ function Glossary(props) { ### Demostración en vivo -Puede probar la nueva sintaxis de fragmentos JSX con este [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). \ No newline at end of file +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 From 940545d33fd27653268399ea1869d6eea2eaada3 Mon Sep 17 00:00:00 2001 From: Alex Ramirez Date: Tue, 5 Feb 2019 22:01:29 -0500 Subject: [PATCH 3/4] change fragments for fragmentos --- content/docs/fragments.md | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 744285e9e..44c54dbd0 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -1,9 +1,9 @@ --- id: fragments -title: Fragments +title: Fragmentos permalink: docs/fragments.html --- -Un patrón común en React es que un componente devuelva multiples elementos. Los Fragments te permiten agrupar una lista de hijos sin agregar nodos extra al 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() { @@ -44,8 +44,8 @@ class Columns extends React.Component { render() { return (
- Hola - Mundo + Hello + World
); } @@ -58,14 +58,14 @@ resulta en una salida de `` de:
-
- + +
HolaMundoHelloWorld
``` -Los Fragments solucionan este problema. +Los Fragmentos solucionan este problema. ## Uso @@ -74,36 +74,36 @@ class Columns extends React.Component { render() { return ( - Hola - Mundo + Hello + World ); } } ``` -que resulta en una correcta salida de `` de: +que resulta en una salida correcta de `
` de: ```jsx
- - + +
HolaMundoHelloWorld
``` ### Sintaxis corta -Hay una sintaxis nueva, más corta que puede usar para declarar fragments. Parecen etiquetas vacías: +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 { render() { return ( <> - Hola - Mundo + Hello + World ); } @@ -114,16 +114,16 @@ Puedes utilizar `<>` de la misma manera que usarías cualquier otro elemento, 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. -### Fragments incrustados +### Fragmentos incrustados -Fragments 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 fragment -- por ejemplo, para crear una lista de descripción: +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 => ( - // Sin la 'key', React disparará una advertencia de key + // Sin la prop 'key', React disparará una advertencia de key
{item.term}
{item.description}
From f6b6fec3e67aca4e3e23732f7e28bce581fcc924 Mon Sep 17 00:00:00 2001 From: Alex Ramirez Date: Wed, 6 Feb 2019 09:54:38 -0500 Subject: [PATCH 4/4] change prop to neutral --- 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 44c54dbd0..57afdaee5 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -123,7 +123,7 @@ function Glossary(props) { return (
{props.items.map(item => ( - // Sin la prop 'key', React disparará una advertencia de key + // Sin el prop 'key', React disparará una advertencia de key
{item.term}
{item.description}