From 395fed9f6604d4610b1664ca80c8cd4c1a9d9aee Mon Sep 17 00:00:00 2001
From: Waxer59 <78129249+Waxer59@users.noreply.github.com>
Date: Tue, 11 Oct 2022 16:28:58 +0200
Subject: [PATCH 1/2] translation

---
 beta/src/content/apis/react/Fragment.md | 44 ++++++++++++-------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/beta/src/content/apis/react/Fragment.md b/beta/src/content/apis/react/Fragment.md
index e43ce2a28..f8f1b0076 100644
--- a/beta/src/content/apis/react/Fragment.md
+++ b/beta/src/content/apis/react/Fragment.md
@@ -1,10 +1,10 @@
 ---
-title: Fragment (<>...</>)
+title: Fragmento (<>...</>)
 ---
 
 <Intro>
 
-The `Fragment` component, which is often used via the `<>...</>` syntax, lets you render multiple elements in place of one, without wrapping them in any other container element.
+El componente `Fragment`, que es usualmente usado atraves de la sintaxis `<>...</>`, te permite renderizar múltiples elementos en lugar de uno, sin tener que envolverlos dentro de otro elemento contenedor.
 
 ```js
 <>
@@ -19,11 +19,11 @@ The `Fragment` component, which is often used via the `<>...</>` syntax, lets yo
 
 ---
 
-## Usage {/*usage*/}
+## Uso {/*usage*/}
 
-### Returning multiple elements {/*returning-multiple-elements*/}
+### Retornando múltiples elementos {/*returning-multiple-elements*/}
 
-Use `Fragment`, or the equivalent `<>...</>` syntax, to group multiple elements together. You can use it to put multiple elements in any place where a single element can go. For example, a component can only return one element, but by using a Fragment you can group multiple elements together and then return them as a group:
+Usa `Fragment`, o la sintaxis equivalente `<>...</>`, para agrupar múltiples elementos. Puedes usarlo para poner múltiples elementos en cualquier lugar donde un solo elemento puede ir. Por ejemplo, un componente solo puede retornar un elemento, pero usando un Fragmento puedes agrupar múltiples elementos y retornarlos como un grupo:
 
 ```js {3,6}
 function Post() {
@@ -36,7 +36,7 @@ function Post() {
 }
 ```
 
-Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in some other container such as a DOM element. If you inspect this example with the browser tools, you'll see that all `<h1>` and `<p>` DOM nodes appear as siblings without wrappers around them:
+Los Fragmentos son útiles por que al agrupar varios elementos con un Fragmento no tiene efecto en el diseño o los estilos, a diferencia de si tu envolviste los elementos dentro de cualquier otro contenedor tal como un elemento del DOM. Si tu inspeccionas este ejemplo con las herramientas del navegador, verás que todos los nodos del DOM `<h1>` y `<p>` aparecen como hermanos sin envoltorios alrededor de ellos:
 
 <Sandpack>
 
@@ -74,9 +74,9 @@ function PostBody({ body }) {
 
 </Sandpack>
 
-<DeepDive title="How to write a Fragment without the special syntax?">
+<DeepDive title="¿Como escribir un fragmento sin la sintaxis especial?">
 
-The example above is equivalent to importing `Fragment` from React:
+El ejemplo anterior es equivalente a importar `Fragment` de React:
 
 ```js {1,5,8}
 import { Fragment } from 'react';
@@ -91,15 +91,15 @@ function Post() {
 }
 ```
 
-Usually you won't need this unless you need to [pass a `key` to your `Fragment`.](#rendering-a-list-of-fragments)
+Usualmente no necesitarás esto a menos que necesites [pasar una `key` a tu `Fragment`.](#rendering-a-list-of-fragments)
 
 </DeepDive>
 
 ---
 
-### Assigning multiple elements to a variable {/*assigning-multiple-elements-to-a-variable*/}
+### Asignando múltiples elementos a una variable {/*assigning-multiple-elements-to-a-variable*/}
 
-Like any other element, you can assign Fragment elements to variables, pass them as props, and so on:
+Como cualquier otro elemento, puedes asignar Fragmentos a variables, pasarlos como props, y así sucesivamente:
 
 ```js
 function CloseDialog() {
@@ -119,9 +119,9 @@ function CloseDialog() {
 
 ---
 
-### Grouping elements with text {/*grouping-elements-with-text*/}
+### Agrupando elementos con texto {/*grouping-elements-with-text*/}
 
-You can use `Fragment` to group text together with components:
+Puedes usar `Fragment` para agrupar texto con componentes:
 
 ```js
 function DateRangePicker({ start, end }) {
@@ -138,9 +138,9 @@ function DateRangePicker({ start, end }) {
 
 ---
 
-### Rendering a list of Fragments {/*rendering-a-list-of-fragments*/}
+### Renderizando una lista de fragmentos {/*rendering-a-list-of-fragments*/}
 
-Here's a situation where you need to write `Fragment` explicitly instead of using the `<></>` syntax. When you [render multiple elements in a loop](/learn/rendering-lists), you need to assign a `key` to each element. If the elements within the loop are Fragments, you need to use the normal JSX element syntax in order to provide the `key` attribute:
+Esta es una situación donde necesitas escribir `Fragment` explicitamente en lugar de usar la sintaxis `<></>`. Cuando [renderizas múltiples elementos dentro de un bucle](/learn/rendering-lists), necesitas asignar una `key` a cada elemento. Si los elementos dentro del bucle son Fragmentos, necesitar usar la sintaxis normal de un elemnto JSX con el fin de proveer el atributo `key`:
 
 ```js {3,6}
 function Blog() {
@@ -153,7 +153,7 @@ function Blog() {
 }
 ```
 
-You can inspect the DOM to verify that there are no wrapper elements around the Fragment children:
+Puedes inspeccionar el DOM para verificar que no hay ningun envoltorio alrededor del Fragmento hijo:
 
 <Sandpack>
 
@@ -191,20 +191,20 @@ function PostBody({ body }) {
 
 ---
 
-## Reference {/*reference*/}
+## Referencia {/*reference*/}
 
 ### `Fragment` {/*fragment*/}
 
-Wrap elements in `<Fragment>` to group them together in situations where you need a single element. Grouping elements in `Fragment` has no effect on the resulting DOM; it is the same as if the elements were not grouped. The empty JSX tag `<></>` is shorthand for `<Fragment></Fragment>` in most cases.
+Envolver elementos en un `<Fragment>` para agruparlos en situaciones donde necesitar un solo elemento. Agrupando elementos en `Fragment` no tiene efecto en el resultante del DOM; es lo mismo como si los elementos no estaban agrupados. La etiqueta JSX vacia `<></>` es la abreviatura de `<Fragment></Fragment>` en la mayoría de los casos.
 
 #### Props {/*fragment-props*/}
 
-- **optional** `key`: Fragments declared with the explicit `<Fragment>` syntax may have [keys.](https://beta.reactjs.org/learn/rendering-lists#keeping-list-items-in-order-with-key)
+- **Opcional** `key`: Fragmentos declarados con la sintaxis explicita `<Fragment>` pueden tener [llaves.](https://beta.reactjs.org/learn/rendering-lists#keeping-list-items-in-order-with-key)
 
-#### Caveats {/*caveats*/}
+#### Advertencias {/*caveats*/}
 
-- If you want to pass `key` to a Fragment, you can't use the `<>...</>` syntax. You have to explicitly import `Fragment` from `'react'` and render `<Fragment key={yourKey}>...</Fragment>`.
+- Si quieres pasarle una `key` a un Fragmento, No puedes usar esta sintaxis `<>...</>`. Tienes que importar explicitamente `Fragment` desde `'react'` y renderizar `<Fragment key={yourKey}>...</Fragment>`.
 
-- React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<><Child /></>` to `[<Child />]` or back, or when you go from rendering `<><Child /></>` to `<Child />` and back. This only works a single level deep: for example, going from `<><><Child /></></>` to `<Child />` resets the state. See the precise semantics [here.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)
+- React no [restablece el estado](/learn/preserving-and-resetting-state) cuando vas desde renderizar `<><Child /></>` a `[<Child />]` o atrás, o cuando vas desde renderizar `<><Child /></>` a`<Child />` y atrás. Esto solo funciona a un nivel de profundidad: por ejemplo, yendo desde `<><><Child /></></>` a `<Child />` restablece el estado. Mira la sintaxis precisa [aquí.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)
 
 

From 1395d19467b1ec523d13bc1e7bd3c99a746c9e44 Mon Sep 17 00:00:00 2001
From: Waxer <hnboyano@gmail.com>
Date: Thu, 10 Nov 2022 03:41:37 +0100
Subject: [PATCH 2/2] added grammatical revision

---
 beta/src/content/apis/react/Fragment.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/beta/src/content/apis/react/Fragment.md b/beta/src/content/apis/react/Fragment.md
index f8f1b0076..af7083b10 100644
--- a/beta/src/content/apis/react/Fragment.md
+++ b/beta/src/content/apis/react/Fragment.md
@@ -4,7 +4,7 @@ title: Fragmento (<>...</>)
 
 <Intro>
 
-El componente `Fragment`, que es usualmente usado atraves de la sintaxis `<>...</>`, te permite renderizar múltiples elementos en lugar de uno, sin tener que envolverlos dentro de otro elemento contenedor.
+El componente `Fragment`, que es se suele utilizar a través de la sintaxis `<>...</>`, te permite renderizar múltiples elementos en lugar de uno, sin tener que envolverlos dentro de otro elemento contenedor.
 
 ```js
 <>
@@ -21,7 +21,7 @@ El componente `Fragment`, que es usualmente usado atraves de la sintaxis `<>...<
 
 ## Uso {/*usage*/}
 
-### Retornando múltiples elementos {/*returning-multiple-elements*/}
+### Retornar múltiples elementos {/*returning-multiple-elements*/}
 
 Usa `Fragment`, o la sintaxis equivalente `<>...</>`, para agrupar múltiples elementos. Puedes usarlo para poner múltiples elementos en cualquier lugar donde un solo elemento puede ir. Por ejemplo, un componente solo puede retornar un elemento, pero usando un Fragmento puedes agrupar múltiples elementos y retornarlos como un grupo:
 
@@ -36,7 +36,7 @@ function Post() {
 }
 ```
 
-Los Fragmentos son útiles por que al agrupar varios elementos con un Fragmento no tiene efecto en el diseño o los estilos, a diferencia de si tu envolviste los elementos dentro de cualquier otro contenedor tal como un elemento del DOM. Si tu inspeccionas este ejemplo con las herramientas del navegador, verás que todos los nodos del DOM `<h1>` y `<p>` aparecen como hermanos sin envoltorios alrededor de ellos:
+Los Fragmentos son útiles porque la agrupación de elementos con un Fragmento no tiene efecto en el diseño o los estilos, al contrario de cómo sería si envolvieras los elementos dentro de cualquier otro contenedor tal como un elemento del DOM. Si inspeccionas este ejemplo con las herramientas del navegador, verás que todos los nodos del DOM `<h1>` y `<p>` aparecen como hermanos sin envoltorios alrededor de ellos:
 
 <Sandpack>
 
@@ -97,7 +97,7 @@ Usualmente no necesitarás esto a menos que necesites [pasar una `key` a tu `Fra
 
 ---
 
-### Asignando múltiples elementos a una variable {/*assigning-multiple-elements-to-a-variable*/}
+### Asignar múltiples elementos a una variable {/*assigning-multiple-elements-to-a-variable*/}
 
 Como cualquier otro elemento, puedes asignar Fragmentos a variables, pasarlos como props, y así sucesivamente:
 
@@ -119,7 +119,7 @@ function CloseDialog() {
 
 ---
 
-### Agrupando elementos con texto {/*grouping-elements-with-text*/}
+### Agrupar elementos con texto {/*grouping-elements-with-text*/}
 
 Puedes usar `Fragment` para agrupar texto con componentes:
 
@@ -138,9 +138,9 @@ function DateRangePicker({ start, end }) {
 
 ---
 
-### Renderizando una lista de fragmentos {/*rendering-a-list-of-fragments*/}
+### Renderizar una lista de fragmentos {/*rendering-a-list-of-fragments*/}
 
-Esta es una situación donde necesitas escribir `Fragment` explicitamente en lugar de usar la sintaxis `<></>`. Cuando [renderizas múltiples elementos dentro de un bucle](/learn/rendering-lists), necesitas asignar una `key` a cada elemento. Si los elementos dentro del bucle son Fragmentos, necesitar usar la sintaxis normal de un elemnto JSX con el fin de proveer el atributo `key`:
+Esta es una situación donde necesitas escribir `Fragment` explicitamente en lugar de usar la sintaxis `<></>`. Cuando [renderizas múltiples elementos dentro de un bucle](/learn/rendering-lists), necesitas asignar una `key` a cada elemento. Si los elementos dentro del bucle son Fragmentos, necesitar usar la sintaxis habitual de un elemento JSX con el fin de proveer el atributo `key`:
 
 ```js {3,6}
 function Blog() {
@@ -195,16 +195,16 @@ function PostBody({ body }) {
 
 ### `Fragment` {/*fragment*/}
 
-Envolver elementos en un `<Fragment>` para agruparlos en situaciones donde necesitar un solo elemento. Agrupando elementos en `Fragment` no tiene efecto en el resultante del DOM; es lo mismo como si los elementos no estaban agrupados. La etiqueta JSX vacia `<></>` es la abreviatura de `<Fragment></Fragment>` en la mayoría de los casos.
+Envuelve elementos en un `<Fragment>` para agruparlos en situaciones donde necesites un solo elemento. Agrupar elementos en `Fragment` no tiene efecto en el DOM resultante; ya que quedará igual que si los elementos no estuvieran agrupados. La etiqueta JSX vacía `<></>` es la abreviatura de `<Fragment></Fragment>` en la mayoría de los casos.
 
 #### Props {/*fragment-props*/}
 
-- **Opcional** `key`: Fragmentos declarados con la sintaxis explicita `<Fragment>` pueden tener [llaves.](https://beta.reactjs.org/learn/rendering-lists#keeping-list-items-in-order-with-key)
+- **Opcional** `key`: Los Fragmentos declarados con la sintaxis explícita `<Fragment>` pueden tener [llaves.](https://beta.reactjs.org/learn/rendering-lists#keeping-list-items-in-order-with-key)
 
 #### Advertencias {/*caveats*/}
 
-- Si quieres pasarle una `key` a un Fragmento, No puedes usar esta sintaxis `<>...</>`. Tienes que importar explicitamente `Fragment` desde `'react'` y renderizar `<Fragment key={yourKey}>...</Fragment>`.
+- Si quisieras pasarle una `key` a un Fragmento, no podrias usar la sintaxis `<>...</>`. Tendrias que importar explícitamente `Fragment` desde `'react'` y renderizar `<Fragment key={yourKey}>...</Fragment>`.
 
-- React no [restablece el estado](/learn/preserving-and-resetting-state) cuando vas desde renderizar `<><Child /></>` a `[<Child />]` o atrás, o cuando vas desde renderizar `<><Child /></>` a`<Child />` y atrás. Esto solo funciona a un nivel de profundidad: por ejemplo, yendo desde `<><><Child /></></>` a `<Child />` restablece el estado. Mira la sintaxis precisa [aquí.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)
+- React no [restablece el estado](/learn/preserving-and-resetting-state) cuando renderizas desde un `<><Child /></>` a un `[<Child />]` y viceversa, o cuando renderizas desde un `<><Child /></>` a un `<Child />` y viceversa. Ten en cuenta de que esto sólo funciona a un nivel de profundidad: por ejemplo, ir desde un `<><><Child /></></>` a un `<Child />` restablece el estado. Échale un ojo a la sintaxis en detalle [aquí.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)