From 6556db6777bb2328bd92e9fe508b6bd509f5f14b Mon Sep 17 00:00:00 2001 From: Alejandro Nanez Date: Sun, 17 Feb 2019 18:39:20 -0500 Subject: [PATCH 1/3] =?UTF-8?q?Explicitly=20use=20"Pru=C3=A9balo=20en=20Co?= =?UTF-8?q?dePen"=20so=20we=20do=20not=20get=20the=20translated=20version?= =?UTF-8?q?=20of=20the=20link?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/components-and-props.md | 8 ++++---- content/docs/hello-world.md | 6 +++--- content/docs/introducing-jsx.md | 2 +- content/docs/rendering-elements.md | 4 ++-- content/docs/uncontrolled-components.md | 2 +- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md index 74c4c1d60..f03b96a2b 100644 --- a/content/docs/components-and-props.md +++ b/content/docs/components-and-props.md @@ -77,7 +77,7 @@ ReactDOM.render( ); ``` -[](codepen://components-and-props/rendering-a-component) +[Pruébalo en CodePen](codepen://components-and-props/rendering-a-component) Recapitulemos lo que sucede en este ejemplo: @@ -119,7 +119,7 @@ ReactDOM.render( ); ``` -[](codepen://components-and-props/composing-components) +[Pruébalo en CodePen](codepen://components-and-props/composing-components) Por lo general, las aplicaciones de React nuevas tienen un único componente `App` en lo más alto. Sin embargo, si se integra React en una aplicación existente, se podría empezar de abajo hacia arriba con un pequeño componente como `Button` y poco a poco trabajar el camino a la cima de la jerarquía de la vista. @@ -153,7 +153,7 @@ function Comment(props) { } ``` -[](codepen://components-and-props/extracting-components) +[Pruébalo en CodePen](codepen://components-and-props/extracting-components) Acepta `author` (un objeto), `text` (un string), y `date` (una fecha) como props, y describe un comentario en una web de redes sociales. @@ -232,7 +232,7 @@ function Comment(props) { } ``` -[](codepen://components-and-props/extracting-components-continued) +[Pruébalo en CodePen](codepen://components-and-props/extracting-components-continued) Extraer componentes puede parecer un trabajo pesado al principio, pero tener una paleta de componentes reutilizables vale la pena en aplicaciones más grandes. Una buena regla en general es que si una parte de su UI se usa varias veces (`Button`, `Panel`, `Avatar`), o es lo suficientemente compleja por sí misma (`App`, `FeedStory`, `Comment`), es buen candidato para ser un componente reutilizable. diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index 6bad0a4e9..4aaaceada 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -10,14 +10,14 @@ El más pequeño de los ejemplos de React se ve así: ```js ReactDOM.render( -

¡Hola mundo!

, +

Hello, world!

, document.getElementById('root') ); ``` -Este muestra un encabezado con el texto "¡Hola mundo!" en la página. +Este muestra un encabezado con el texto "Hello, world!" en la página. -[](codepen://hello-world) +[Pruébalo en CodePen](codepen://hello-world) Dale click al enlace de arriba para abrir un editor online. Tómate la libertad de hacer cambios, y mira cómo afectan el resultado. La mayoría de páginas en esta guía tendrán ejemplos que puedes editar en vivo como éste. diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index 1cdd68630..e95dbc816 100644 --- a/content/docs/introducing-jsx.md +++ b/content/docs/introducing-jsx.md @@ -68,7 +68,7 @@ ReactDOM.render( ); ``` -[](codepen://introducing-jsx) +[Pruébalo en CodePen](codepen://introducing-jsx) Dividimos JSX en varias líneas para facilitar la lectura. Aunque no es necesario, cuando hagas esto también te recomendamos envolverlo entre paréntesis para evitar errores por la [inserción automática del punto y coma](http://stackoverflow.com/q/2846283). diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 57f63d660..05c163eb0 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -38,7 +38,7 @@ Para renderizar un elemento de React en un nodo raíz del DOM, pasa ambos a `Rea `embed:rendering-elements/render-an-element.js` -[](codepen://rendering-elements/render-an-element) +[Pruébalo en CodePen](codepen://rendering-elements/render-an-element) Esto muestra "Hello, world" en la página. @@ -52,7 +52,7 @@ Considera este ejemplo de un reloj en marcha: `embed:rendering-elements/update-rendered-element.js` -[](codepen://rendering-elements/update-rendered-element) +[Pruébalo en CodePen](codepen://rendering-elements/update-rendered-element) Este llama a `ReactDOM.render()` cada segundo desde un [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback. diff --git a/content/docs/uncontrolled-components.md b/content/docs/uncontrolled-components.md index 602344017..3d7594fa3 100644 --- a/content/docs/uncontrolled-components.md +++ b/content/docs/uncontrolled-components.md @@ -79,4 +79,4 @@ En React, un `` siempre es un componente no controlado porq Debes utilizar la API File para interactuar con ellos. El siguiente ejemplo muestra cómo crear un [referencia al nodo DOM](/docs/refs-and-the-dom.html) para acceder a los archivos en un controlador de envío: `embed:uncontrolled-components/input-type-file.js` -[](codepen://uncontrolled-components/input-type-file) +[Pruébalo en CodePen](codepen://uncontrolled-components/input-type-file) From dcbb28adfd64c8dfeaf00f6bb9214be7c42cb1d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Mon, 18 Feb 2019 21:01:50 -0500 Subject: [PATCH 2/3] Translate default text for CodePen samples links --- gatsby-config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gatsby-config.js b/gatsby-config.js index 697aab5e6..1b4598c07 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -59,7 +59,7 @@ module.exports = { { resolve: 'gatsby-remark-code-repls', options: { - defaultText: 'Try it on CodePen', + defaultText: 'Pruébalo en CodePen', directory: `${__dirname}/examples/`, externals: [ `//unpkg.com/react/umd/react.development.js`, From 6b6758dccd072a1867d80500494f3c4031d6a2ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Tue, 19 Feb 2019 01:33:34 -0500 Subject: [PATCH 3/3] =?UTF-8?q?Revert=20"Explicitly=20use=20"Pru=C3=A9balo?= =?UTF-8?q?=20en=20CodePen"=20so=20we=20do=20not=20get=20the=20translated?= =?UTF-8?q?=20version=20of=20the=20link"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 6556db6777bb2328bd92e9fe508b6bd509f5f14b. --- content/docs/components-and-props.md | 8 ++++---- content/docs/hello-world.md | 6 +++--- content/docs/introducing-jsx.md | 2 +- content/docs/rendering-elements.md | 4 ++-- content/docs/uncontrolled-components.md | 2 +- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md index f03b96a2b..74c4c1d60 100644 --- a/content/docs/components-and-props.md +++ b/content/docs/components-and-props.md @@ -77,7 +77,7 @@ ReactDOM.render( ); ``` -[Pruébalo en CodePen](codepen://components-and-props/rendering-a-component) +[](codepen://components-and-props/rendering-a-component) Recapitulemos lo que sucede en este ejemplo: @@ -119,7 +119,7 @@ ReactDOM.render( ); ``` -[Pruébalo en CodePen](codepen://components-and-props/composing-components) +[](codepen://components-and-props/composing-components) Por lo general, las aplicaciones de React nuevas tienen un único componente `App` en lo más alto. Sin embargo, si se integra React en una aplicación existente, se podría empezar de abajo hacia arriba con un pequeño componente como `Button` y poco a poco trabajar el camino a la cima de la jerarquía de la vista. @@ -153,7 +153,7 @@ function Comment(props) { } ``` -[Pruébalo en CodePen](codepen://components-and-props/extracting-components) +[](codepen://components-and-props/extracting-components) Acepta `author` (un objeto), `text` (un string), y `date` (una fecha) como props, y describe un comentario en una web de redes sociales. @@ -232,7 +232,7 @@ function Comment(props) { } ``` -[Pruébalo en CodePen](codepen://components-and-props/extracting-components-continued) +[](codepen://components-and-props/extracting-components-continued) Extraer componentes puede parecer un trabajo pesado al principio, pero tener una paleta de componentes reutilizables vale la pena en aplicaciones más grandes. Una buena regla en general es que si una parte de su UI se usa varias veces (`Button`, `Panel`, `Avatar`), o es lo suficientemente compleja por sí misma (`App`, `FeedStory`, `Comment`), es buen candidato para ser un componente reutilizable. diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index 4aaaceada..6bad0a4e9 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -10,14 +10,14 @@ El más pequeño de los ejemplos de React se ve así: ```js ReactDOM.render( -

Hello, world!

, +

¡Hola mundo!

, document.getElementById('root') ); ``` -Este muestra un encabezado con el texto "Hello, world!" en la página. +Este muestra un encabezado con el texto "¡Hola mundo!" en la página. -[Pruébalo en CodePen](codepen://hello-world) +[](codepen://hello-world) Dale click al enlace de arriba para abrir un editor online. Tómate la libertad de hacer cambios, y mira cómo afectan el resultado. La mayoría de páginas en esta guía tendrán ejemplos que puedes editar en vivo como éste. diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index e95dbc816..1cdd68630 100644 --- a/content/docs/introducing-jsx.md +++ b/content/docs/introducing-jsx.md @@ -68,7 +68,7 @@ ReactDOM.render( ); ``` -[Pruébalo en CodePen](codepen://introducing-jsx) +[](codepen://introducing-jsx) Dividimos JSX en varias líneas para facilitar la lectura. Aunque no es necesario, cuando hagas esto también te recomendamos envolverlo entre paréntesis para evitar errores por la [inserción automática del punto y coma](http://stackoverflow.com/q/2846283). diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 05c163eb0..57f63d660 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -38,7 +38,7 @@ Para renderizar un elemento de React en un nodo raíz del DOM, pasa ambos a `Rea `embed:rendering-elements/render-an-element.js` -[Pruébalo en CodePen](codepen://rendering-elements/render-an-element) +[](codepen://rendering-elements/render-an-element) Esto muestra "Hello, world" en la página. @@ -52,7 +52,7 @@ Considera este ejemplo de un reloj en marcha: `embed:rendering-elements/update-rendered-element.js` -[Pruébalo en CodePen](codepen://rendering-elements/update-rendered-element) +[](codepen://rendering-elements/update-rendered-element) Este llama a `ReactDOM.render()` cada segundo desde un [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback. diff --git a/content/docs/uncontrolled-components.md b/content/docs/uncontrolled-components.md index 3d7594fa3..602344017 100644 --- a/content/docs/uncontrolled-components.md +++ b/content/docs/uncontrolled-components.md @@ -79,4 +79,4 @@ En React, un `` siempre es un componente no controlado porq Debes utilizar la API File para interactuar con ellos. El siguiente ejemplo muestra cómo crear un [referencia al nodo DOM](/docs/refs-and-the-dom.html) para acceder a los archivos en un controlador de envío: `embed:uncontrolled-components/input-type-file.js` -[Pruébalo en CodePen](codepen://uncontrolled-components/input-type-file) +[](codepen://uncontrolled-components/input-type-file)