From e3994c91d3a6e5cd99cd9e014778e742ccff588c Mon Sep 17 00:00:00 2001 From: Miguel Bolivar Date: Mon, 18 Feb 2019 11:54:13 -0400 Subject: [PATCH 01/39] Fixing links for getting started page --- content/docs/getting-started.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md index ba10a4488..c25f166a9 100644 --- a/content/docs/getting-started.md +++ b/content/docs/getting-started.md @@ -24,11 +24,11 @@ Esta página es un resumen de la documentación de React y recursos relacionados --- -- [Prueba React](#prueba-react) -- [Aprende React](#aprende-react) -- [Mantente Informado](#mantente-informado) -- [Documentación por Versiones](#documentación-por-versiones) -- [¿Algo hace falta?](#¿algo-hace-falta) +- [Prueba React](#try-react) +- [Aprende React](#learn-react) +- [Mantente Informado](#staying-informed) +- [Documentación por Versiones](#versioned-documentation) +- [¿Algo hace falta?](#something-missing) ## Prueba React {#try-react} From 0e2b807f8aa4960d1162cfd43410aa1b254d84e1 Mon Sep 17 00:00:00 2001 From: Miguel Bolivar Date: Mon, 18 Feb 2019 11:59:06 -0400 Subject: [PATCH 02/39] Updating correct link to JS overview --- content/docs/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md index c25f166a9..92a7b05dd 100644 --- a/content/docs/getting-started.md +++ b/content/docs/getting-started.md @@ -76,7 +76,7 @@ Si vienes con experiencia como diseñador, [estos recursos](http://reactfordesig La documentación de React asume cierta familiaridad con la programación en Javascript. No necesitas ser un experto, pero es más difícil aprender React y Javascript al mismo tiempo. -Recomendamos pasar por este [resumen de Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) para medir tu nivel de conocimiento. Te tomará entre 30 minutos a 1 hora, pero te sentirás más seguro aprendiendo React. +Recomendamos pasar por este [resumen de Javascript](https://developer.mozilla.org/es-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) para medir tu nivel de conocimiento. Te tomará entre 30 minutos a 1 hora, pero te sentirás más seguro aprendiendo React. >Consejo > From 4518e7313865c4d9c5ad95f7b2ac337d0b2eda4d Mon Sep 17 00:00:00 2001 From: Miguel Bolivar Date: Mon, 18 Feb 2019 12:30:57 -0400 Subject: [PATCH 03/39] Changing some words according to the style guide, and fixing a link --- content/docs/add-react-to-a-website.md | 4 ++-- content/docs/create-a-new-react-app.md | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index 240399e08..1d03dd006 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -57,7 +57,7 @@ Lo siguiente es agregar tres etiquetas ` - + @@ -147,7 +147,7 @@ return ( ); ``` -Estos dos fragmentos de código son equivalentes. Mientras **JSX es [completamente opcional](/docs/react-without-jsx.html)**, muchas personas lo encuentran útil para escribir código relacionado con la IU -- ya sea usando React o con otras bibliotecas. +Estos dos fragmentos de código son equivalentes. Mientras **JSX es [completamente opcional](/docs/react-without-jsx.html)**, muchas personas lo encuentran útil para escribir código relacionado con la Interfaz de Usuario -- ya sea usando React o con otras bibliotecas. Puedes experimentar con JSX usando [este conversor en línea](http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=). diff --git a/content/docs/create-a-new-react-app.md b/content/docs/create-a-new-react-app.md index 1da901ebe..37939b75d 100644 --- a/content/docs/create-a-new-react-app.md +++ b/content/docs/create-a-new-react-app.md @@ -33,7 +33,7 @@ El equipo de React principalmente recomienda las siguientes soluciones: - Si estás **aprendiendo React** o **creando una nueva [aplicación de página única](/docs/glossary.html#single-page-application),** usa [Create React App](#create-react-app). - Si estás construyendo un **sito web renderizado en servidor con Node.js,** prueba [Next.js](#nextjs). - Si estás construyendo un **sitio web orientado a contenido estático,** prueba [Gatsby](#gatsby). -- Si estás construyendo una **biblioteca de componentes** o **integrando una base de código existente**, prueba [Cadenas de Herramientas más Flexibles](#cadenas-de-herramientas-ms-flexibles). +- Si estás construyendo una **biblioteca de componentes** o **integrando una base de código existente**, prueba [Cadenas de Herramientas más Flexibles](#more-flexible-toolchains). ### Create React App {#create-react-app} @@ -49,7 +49,7 @@ npm start >Nota > ->En la primera línea `npx` no es una errata: Es una [herramienta de ejecución de paquetes que viene con npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b). +>En la primera línea `npx` no es un error de escritura: Es una [herramienta de ejecución de paquetes que viene con npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b). Create React App no se encarga de la lógica de `backend` o de bases de datos; tan solo crea un flujo de construcción para `frontend`, de manera que lo puedes usar con cualquier `backend`. Para ello internamente usa [Babel](http://babeljs.io/) y [webpack](https://webpack.js.org/), pero no necesitas saber nada de estas herramientas para usar Create React App. @@ -77,7 +77,7 @@ Las siguientes cadenas de herramientas ofrecen más opciones y flexibilidad. Las - **[Parcel](https://parceljs.org/)** es un empaquetador de aplicaciones web rápido y de cero configuración que [funciona con React](https://parceljs.org/recipes.html#react). -- **[Razzle](https://github.com/jaredpalmer/razzle)** es un marco de trabajo de renderizado en servidor que no requiere ninguna configuración, pero ofrece más flexibilidad que Next.js. +- **[Razzle](https://github.com/jaredpalmer/razzle)** es un framework de renderizado en servidor que no requiere ninguna configuración, pero ofrece más flexibilidad que Next.js. ## Creando una cadena de herramientas desde cero {#creating-a-toolchain-from-scratch} From 07babea46936e67339a7e0c93c525ebcc1397259 Mon Sep 17 00:00:00 2001 From: Miguel Bolivar Date: Mon, 18 Feb 2019 12:56:04 -0400 Subject: [PATCH 04/39] Translating back to english some code, and also fixing translation for introducing JSX, just a few words --- content/docs/hello-world.md | 8 ++++---- content/docs/introducing-jsx.md | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index 6bad0a4e9..8b433cec2 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -10,12 +10,12 @@ 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) @@ -27,11 +27,11 @@ En esta guía, examinaremos los componentes básicos de las aplicaciones React: >Tip > ->Esta guía está diseñada para personas que prefieren **aprender los conceptos paso a paso**. Si tú prefieres aprender haciendo, revisa nuestro [tutorial práctico](/tutorial/tutorial.html). Encontrarás que esta guía y el tutorial se complementan el uno al otro. +>Esta guía está diseñada para personas que prefieren **aprender los conceptos paso a paso**. Si prefieres aprender mediante práctica, revisa nuestro [tutorial práctico](/tutorial/tutorial.html). Encontrarás que esta guía y el tutorial se complementan el uno al otro. Este es el primer capítulo en una guía paso a paso sobre los principales conceptos de React. Puedes encontrar una lista de todos los capítulos en la barra de navegación lateral. Si estás leyendo esto desde un dispositivo móvil, puedes acceder a la navegación presionando el botón en la esquina inferior derecha de tu pantalla. -Cada capítulo en esta guía se construye en base al conocimiento presentado en capítulos anteriores. **Tú puedes aprender la mayoría de React leyendo la guía de conceptos "Conceptos Principales" en el orden que aparecen en la barra lateral.** Por ejemplo, ["Introducción a JSX”](/docs/introducing-jsx.html) es el siguiente capítulo después de este. +Cada capítulo en esta guía se construye en base al conocimiento presentado en capítulos anteriores. **Puedes aprender la mayoría de React leyendo la guía de conceptos "Conceptos Principales" en el orden que aparecen en la barra lateral.** Por ejemplo, ["Introducción a JSX”](/docs/introducing-jsx.html) es el siguiente capítulo después de este. ## Suposiciones del nivel de conocimiento {#knowledge-level-assumptions} diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index 1cdd68630..44d54d888 100644 --- a/content/docs/introducing-jsx.md +++ b/content/docs/introducing-jsx.md @@ -103,9 +103,9 @@ const element = ; No pongas comillas rodeando llaves cuando insertes una expresión JavaScript en un atributo. Debes utilizar comillas (para los valores de los strings) o llaves (para las expresiones), pero no ambas en el mismo atributo. ->**Warning:** +>**Advertencia:** > ->Dado que JSX está más cercano a JavaScript que a HTML, React DOM usa la convención de nomenclatura `camelCase` en vez de nombres de atributos HTML. +>Dado que JSX es más cercano a JavaScript que a HTML, React DOM usa la convención de nomenclatura `camelCase` en vez de nombres de atributos HTML. > >Por ejemplo, `class` se vuelve [`className`](https://developer.mozilla.org/es/docs/Web/API/Element/className) en JSX, y `tabindex` se vuelve [`tabIndex`](https://developer.mozilla.org/es/docs/Web/API/HTMLElement/tabIndex). @@ -142,9 +142,9 @@ Por defecto, React DOM [escapa](http://stackoverflow.com/questions/7381974/which ### JSX representa objetos {#jsx-represents-objects} -Babel compila JSX bajo llamados a `React.createElement()`. +Babel compila JSX a llamadas de `React.createElement()`. -Estos dos ejemplos son identicos: +Estos dos ejemplos son idénticos: ```js const element = ( From a72b088ca95f1971e5f485af14346028748a6721 Mon Sep 17 00:00:00 2001 From: Miguel Bolivar Date: Mon, 18 Feb 2019 13:09:20 -0400 Subject: [PATCH 05/39] Translating back to english, and also adding IU full words --- content/docs/rendering-elements.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 57f63d660..e099f0d5c 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -13,7 +13,7 @@ Los elementos son los bloques más pequeños de las aplicaciones de React. Un elemento describe lo que quieres ver en la pantalla: ```js -const element =

Hola, mundo

; +const element =

Hello, world

; ``` A diferencia de los elementos del DOM de los navegadores, los elementos de React son objetos planos, y su creación es de bajo costo. React DOM se encarga de actualizar el DOM para igualar los elementos de React. @@ -44,9 +44,9 @@ Esto muestra "Hello, world" en la página. ## Actualizando el elemento renderizado {#updating-the-rendered-element} -Los elementos de React son [inmutables](https://en.wikipedia.org/wiki/Immutable_object). Una vez creas un elemento, no puedes cambiar sus hijos o atributos. Un elemento es como un fotograma solitario en una película: este representa la IU en cierto punto en el tiempo. +Los elementos de React son [inmutables](https://es.wikipedia.org/wiki/Objeto_inmutable). Una vez creas un elemento, no puedes cambiar sus hijos o atributos. Un elemento es como un fotograma solitario en una película: este representa la Interfaz de Usuario en cierto punto en el tiempo. -Con nuestro conocimiento hasta este punto, la única manera de actualizar la IU es creando un nuevo elemento, y pasarlo a `ReactDOM.render()`. +Con nuestro conocimiento hasta este punto, la única manera de actualizar la Interfaz de Usuario es creando un nuevo elemento, y pasarlo a `ReactDOM.render()`. Considera este ejemplo de un reloj en marcha: @@ -54,7 +54,7 @@ Considera este ejemplo de un reloj en marcha: [](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. +Este llama a `ReactDOM.render()` cada segundo desde un callback del [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval). >**Nota:** > @@ -70,6 +70,6 @@ Puedes verificar esto inspeccionando el [último ejemplo](codepen://rendering-el ![inspector del DOM mostrando actualizaciones diminutas](../images/docs/granular-dom-updates.gif) -Aunque creamos un elemento que describe el árbol de la IU en su totalidad en cada instante, React DOM solo actualiza el texto del nodo cuyo contenido cambió. +Aunque creamos un elemento que describe el árbol de la Interfaz de Usuario en su totalidad en cada instante, React DOM solo actualiza el texto del nodo cuyo contenido cambió. -En nuestra experiencia, pensar en cómo la IU debería verse en un momento dado y no en cómo cambiarla en el tiempo, elimina toda una clase de errores. +En nuestra experiencia, pensar en cómo la Interfaz de Usuario debería verse en un momento dado y no en cómo cambiarla en el tiempo, elimina toda una clase de errores. From d7cf412fdc621c5fdf5eee3bf687a511d2fd2ac0 Mon Sep 17 00:00:00 2001 From: Miguel Bolivar Date: Mon, 18 Feb 2019 13:54:03 -0400 Subject: [PATCH 06/39] Changing UI or IU for correct translation --- content/docs/add-react-to-a-website.md | 2 +- content/docs/components-and-props.md | 12 ++++++------ content/docs/handling-events.md | 6 +++--- content/docs/rendering-elements.md | 8 ++++---- content/docs/state-and-lifecycle.md | 10 +++++----- 5 files changed, 19 insertions(+), 19 deletions(-) diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index 1d03dd006..74f4e0bee 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -147,7 +147,7 @@ return ( ); ``` -Estos dos fragmentos de código son equivalentes. Mientras **JSX es [completamente opcional](/docs/react-without-jsx.html)**, muchas personas lo encuentran útil para escribir código relacionado con la Interfaz de Usuario -- ya sea usando React o con otras bibliotecas. +Estos dos fragmentos de código son equivalentes. Mientras **JSX es [completamente opcional](/docs/react-without-jsx.html)**, muchas personas lo encuentran útil para escribir código relacionado con la interfaz de ssuario -- ya sea usando React o con otras bibliotecas. Puedes experimentar con JSX usando [este conversor en línea](http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=). diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md index 74c4c1d60..b25c72c9e 100644 --- a/content/docs/components-and-props.md +++ b/content/docs/components-and-props.md @@ -15,7 +15,7 @@ redirect_from: prev: rendering-elements.html next: state-and-lifecycle.html --- -Los componentes permiten separar la UI en piezas independientes, reutilizables y pensar en cada pieza de forma aislada.Esta página proporciona una introducción a la idea de los componentes. +Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada.Esta página proporciona una introducción a la idea de los componentes. Puedes encontrar una [API detallada sobre componentes aquí](/docs/react-component.html). Conceptualmente, los componentes son como las funciones de JavaScript. Aceptan entradas arbitrarias (llamadas "props") y devuelven a React elementos que describen lo que debe aparecer en la pantalla. @@ -61,7 +61,7 @@ Sin embargo, los elementos también pueden representar componentes definidos por const element = ; ``` -Cuando React ve representando un componente definido por el usuario, pasa atributos JSX a este componente como un solo objeto. Llamamos a este objeto "props". +Cuando React ve un elemento representando un componente definido por el usuario, pasa atributos JSX a este componente como un solo objeto. Llamamos a este objeto "props". Por ejemplo, este código muestra "Hello, Sara" en la página: @@ -88,7 +88,7 @@ Recapitulemos lo que sucede en este ejemplo: > **Nota:** Comienza siempre los nombres de componentes con una letra mayúscula. > ->React trata los componentes que empiezan con letras minúsculas como etiquetas del DOM. Por ejemplo, `
` representa una etiqueta div HTML pero `` representa un componente y requiere que `Welcome` esté en scope. +>React trata los componentes que empiezan con letras minúsculas como etiquetas del DOM. Por ejemplo, `
` representa una etiqueta div HTML pero `` representa un componente y requiere que `Welcome` esté definido. > > Para saber más sobre el razonamiento detrás de esta convención, puedes consultar [JSX en profundidad](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized). @@ -234,7 +234,7 @@ function Comment(props) { [](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. +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 interfaz de usuario 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. ## Las props son de solo lectura {#props-are-read-only} @@ -246,7 +246,7 @@ function sum(a, b) { } ``` -Tales funciones son llamadas ["puras"](https://en.wikipedia.org/wiki/Pure_function) por que no tratan de cambiar sus entradas, y siempre devuelven el mismo resultado para las mismas entradas. +Tales funciones son llamadas ["puras"](https://es.wikipedia.org/wiki/Programaci%C3%B3n_funcional#Funciones_puras) por que no tratan de cambiar sus entradas, y siempre devuelven el mismo resultado para las mismas entradas. En contraste, esta función es impura por que cambia su propia entrada: @@ -260,4 +260,4 @@ React es bastante flexible pero tiene una sola regla estricta: **Todos los componentes de React deben actuar como funciones puras con respecto a sus props.** -Por supuesto, las UI de las aplicaciones son dinámicas y cambian con el tiempo. En la [siguiente sección](/docs/state-and-lifecycle.html), introduciremos un nuevo concepto de "estado". El estado le permite a los componentes de React cambiar su salida a lo largo del tiempo en respuesta a acciones del usuario, respuestas de red y cualquier otra cosa, sin violar esta regla. +Por supuesto, las interfaces de usuario de las aplicaciones son dinámicas y cambian con el tiempo. En la [siguiente sección](/docs/state-and-lifecycle.html), introduciremos un nuevo concepto de "estado". El estado le permite a los componentes de React cambiar su salida a lo largo del tiempo en respuesta a acciones del usuario, respuestas de red y cualquier otra cosa, sin violar esta regla. diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index ca05e7c3c..6eec8aa46 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -93,7 +93,7 @@ ReactDOM.render( [**Pruébalo en CodePen**](http://codepen.io/gaearon/pen/xEmzGg?editors=0010) -Tienes que tener mucho cuidado en cuanto al significado de `this` en los callbacks de JSX. En JavaScript, los métodos de clase no están [ligados](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) por defecto. Si olvidas ligar `this.handleClick` y lo pasas a `onClick`, `this` sera `undefined` cuando se llame la función. +Tienes que tener mucho cuidado en cuanto al significado de `this` en los callbacks de JSX. En JavaScript, los métodos de clase no están [ligados](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_objects/Function/bind) por defecto. Si olvidas ligar `this.handleClick` y lo pasas a `onClick`, `this` será `undefined` cuando se llame la función. Esto no es un comportamiento especifico de React; esto hace parte de [como operan las funciones JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generalmente, si refieres un método sin usar `()` después de este, tal como `onClick={this.handleClick}`, deberías ligar ese método. @@ -101,7 +101,7 @@ Si te molesta llamar `bind`, existen dos maneras de evitarlo. Si usas la sintaxi ```js{2-6} class LoggingButton extends React.Component { - // Esta sintaxis nos asegura que `this` esta ligado dentro de handleClick + // Esta sintaxis nos asegura que `this` está ligado dentro de handleClick // Peligro: esto es una sintaxis *experimental* handleClick = () => { console.log('this is:', this); @@ -119,7 +119,7 @@ class LoggingButton extends React.Component { Esta sintaxis está habilitada por defecto en [Create React App](https://github.com/facebookincubator/create-react-app). -Si no estas usando la sintaxis de campos públicos de clases, puedes usar una [función flecha](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) en el callback: +Si no estas usando la sintaxis de campos públicos de clases, puedes usar una [función flecha](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/Arrow_functions) en el callback: ```js{7-9} class LoggingButton extends React.Component { diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index e099f0d5c..c0ca99573 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -44,9 +44,9 @@ Esto muestra "Hello, world" en la página. ## Actualizando el elemento renderizado {#updating-the-rendered-element} -Los elementos de React son [inmutables](https://es.wikipedia.org/wiki/Objeto_inmutable). Una vez creas un elemento, no puedes cambiar sus hijos o atributos. Un elemento es como un fotograma solitario en una película: este representa la Interfaz de Usuario en cierto punto en el tiempo. +Los elementos de React son [inmutables](https://es.wikipedia.org/wiki/Objeto_inmutable). Una vez creas un elemento, no puedes cambiar sus hijos o atributos. Un elemento es como un fotograma solitario en una película: este representa la interfaz de usuario en cierto punto en el tiempo. -Con nuestro conocimiento hasta este punto, la única manera de actualizar la Interfaz de Usuario es creando un nuevo elemento, y pasarlo a `ReactDOM.render()`. +Con nuestro conocimiento hasta este punto, la única manera de actualizar la interfaz de usuario es creando un nuevo elemento, y pasarlo a `ReactDOM.render()`. Considera este ejemplo de un reloj en marcha: @@ -70,6 +70,6 @@ Puedes verificar esto inspeccionando el [último ejemplo](codepen://rendering-el ![inspector del DOM mostrando actualizaciones diminutas](../images/docs/granular-dom-updates.gif) -Aunque creamos un elemento que describe el árbol de la Interfaz de Usuario en su totalidad en cada instante, React DOM solo actualiza el texto del nodo cuyo contenido cambió. +Aunque creamos un elemento que describe el árbol de la interfaz de usuario en su totalidad en cada instante, React DOM solo actualiza el texto del nodo cuyo contenido cambió. -En nuestra experiencia, pensar en cómo la Interfaz de Usuario debería verse en un momento dado y no en cómo cambiarla en el tiempo, elimina toda una clase de errores. +En nuestra experiencia, pensar en cómo la interfaz de usuario debería verse en un momento dado y no en cómo cambiarla en el tiempo, elimina toda una clase de errores. diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md index 22c2f451d..32de3e36e 100644 --- a/content/docs/state-and-lifecycle.md +++ b/content/docs/state-and-lifecycle.md @@ -10,7 +10,7 @@ next: handling-events.html Esta página introduce el concepto de estado y ciclo de vida en un componente de React. Puedes encontrar una [referencia detallada de la API de un componente aquí](/docs/react-component.html). -Consideremos el ejemplo del reloj de [una de las secciones anteriores](/docs/rendering-elements.html#updating-the-rendered-element). En [Renderizando elementos](/docs/rendering-elements.html#rendering-an-element-into-the-dom), aprendimos solo una forma de actualizar la IU. Invocamos a `ReactDOM.render()` para que cambie el resultado renderizado. +Consideremos el ejemplo del reloj de [una de las secciones anteriores](/docs/rendering-elements.html#updating-the-rendered-element). En [Renderizando elementos](/docs/rendering-elements.html#rendering-an-element-into-the-dom), aprendimos solo una forma de actualizar la interfaz de usuario. Invocamos a `ReactDOM.render()` para que cambie el resultado renderizado. ```js{8-11} function tick() { @@ -31,7 +31,7 @@ setInterval(tick, 1000); [**Pruébalo en CodePen**](http://codepen.io/gaearon/pen/gwoJZk?editors=0010) -En esta sección, aprenderemos como hacer al componente `Clock` verdaderamente reutilizable y encapsulado. Configurará su propio temporizador y se actualizará cada segundo. +En esta sección, aprenderemos como hacer al componente `Clock` verdaderamente reutilizable y encapsulado. Configurarás tu propio temporizador y se actualizará cada segundo. Podemos comenzar por encapsular cómo se ve el reloj: @@ -57,7 +57,7 @@ setInterval(tick, 1000); [**Pruébalo en CodePen**](http://codepen.io/gaearon/pen/dpdoYR?editors=0010) -Sin embargo, se pierde un requisito crucial: el hecho de que `Clock` configure un temporizador y actualice la IU cada segundo debe ser un detalle de implementación de `Clock`. +Sin embargo, se pierde un requisito crucial: el hecho de que `Clock` configure un temporizador y actualice la interfaz de usuario cada segundo debe ser un detalle de implementación de `Clock`. Idealmente, queremos escribir esto una vez y que `Clock` se actualice a sí mismo: @@ -314,7 +314,7 @@ Repasemos rápidamente lo que está sucediendo y el orden en que se invocan los 3) Cuando la salida de `Clock` se inserta en el DOM, React invoca al método de ciclo de vida `componentDidMount()`. Dentro de él, el componente `Clock` le pide al navegador que configure un temporizador para invocar al método `tick()` del componente una vez por segundo. -4) Cada segundo el navegador invoca al método `tick()`. Dentro de él, el componente `Clock` planifica una actualización de la IU al invocar a `setState()` con un objeto que contiene la hora actual. Gracias a la invocación a `setState()`, React sabe que el estado cambió e invoca de nuevo al método `render()` para saber qué debe estar en la pantalla. Esta vez, `this.state.date` en el método `render()` será diferente, por lo que el resultado del renderizado incluirá la hora actualizada. Conforme a eso React actualiza el DOM. +4) Cada segundo el navegador invoca al método `tick()`. Dentro de él, el componente `Clock` planifica una actualización de la interfaz e usuario al invocar a `setState()` con un objeto que contiene la hora actual. Gracias a la invocación a `setState()`, React sabe que el estado cambió e invoca de nuevo al método `render()` para saber qué debe estar en la pantalla. Esta vez, `this.state.date` en el método `render()` será diferente, por lo que el resultado del renderizado incluirá la hora actualizada. Conforme a eso React actualiza el DOM. 5) Si el componente `Clock` se elimina en algún momento del DOM, React invoca al método de ciclo de vida `componentWillUnmount()`, por lo que el temporizador se detiene. @@ -439,7 +439,7 @@ function FormattedDate(props) { [**Pruébalo en CodePen**](http://codepen.io/gaearon/pen/zKRqNB?editors=0010) -A esto comúnmente se le llama flujo de datos «descendente» o «unidireccional». Cualquier estado siempre es propiedad de algún componente específico, y cualquier dato o IU derivados de ese estado solo pueden afectar los componentes «debajo» de ellos en el árbol. +A esto comúnmente se le llama flujo de datos «descendente» o «unidireccional». Cualquier estado siempre es propiedad de algún componente específico, y cualquier dato o interfaz de usuario derivados de ese estado solo pueden afectar los componentes «debajo» de ellos en el árbol. Si imaginas un árbol de componentes como una cascada de props, el estado de cada componente es como una fuente de agua adicional que se le une en un punto arbitrario, pero también fluye hacia abajo. From 56aab1ac51474d8e62654978b0c80db3722c1a42 Mon Sep 17 00:00:00 2001 From: Miguel Bolivar Date: Mon, 18 Feb 2019 15:15:38 -0400 Subject: [PATCH 07/39] Fixing list and keys page, and also adding @tesseralis feedback --- content/docs/add-react-to-a-website.md | 2 +- content/docs/conditional-rendering.md | 6 +++--- content/docs/getting-started.md | 2 +- content/docs/lists-and-keys.md | 6 +++--- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index 74f4e0bee..19ade13ca 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -147,7 +147,7 @@ return ( ); ``` -Estos dos fragmentos de código son equivalentes. Mientras **JSX es [completamente opcional](/docs/react-without-jsx.html)**, muchas personas lo encuentran útil para escribir código relacionado con la interfaz de ssuario -- ya sea usando React o con otras bibliotecas. +Estos dos fragmentos de código son equivalentes. Mientras **JSX es [completamente opcional](/docs/react-without-jsx.html)**, muchas personas lo encuentran útil para escribir código relacionado con la interfaz de usuario -- ya sea usando React o con otras bibliotecas. Puedes experimentar con JSX usando [este conversor en línea](http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=). diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 150fb1d38..a537de44e 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -10,7 +10,7 @@ redirect_from: En React, puedes crear distintos componentes que encapsulan el comportamiento que necesitas. Entonces, puedes renderizar solamente algunos de ellos, dependiendo del estado de tu aplicación. -El renderizado condicional en React funciona de la misma forma que lo hacen las condiciones en JavaScript. Usa operadores de JavaScript como [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) o el [operador condicional](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Conditional_Operator) para crear elementos representando el estado actual, y deja que React actualice la UI para emparejarlos. +El renderizado condicional en React funciona de la misma forma que lo hacen las condiciones en JavaScript. Usa operadores de JavaScript como [`if`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/if...else) o el [operador condicional](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Conditional_Operator) para crear elementos representando el estado actual, y deja que React actualice la interfaz de usuario para emparejarlos. Considera estos dos componentes: @@ -44,7 +44,7 @@ ReactDOM.render( [**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) -Este ejemplo renderiza un saludo diferente según el valor de la prop `isLoggedIn`. +Este ejemplo renderiza un saludo diferente según el valor del prop `isLoggedIn`. ### Variables de elementos {#element-variables} @@ -187,7 +187,7 @@ Al igual que en JavaScript, depende de ti elegir un estilo apropiado en base a l En casos excepcionales, es posible que desees que un componente se oculte a sí mismo aunque haya sido renderizado por otro componente. Para hacer esto, devuelve `null` en lugar del resultado de renderizado. -En el siguiente ejemplo, el `` se renderiza dependiendo del valor de la prop llamada `warn`. Si el valor de la prop es `false`, entonces el componente no se renderiza: +En el siguiente ejemplo, el `` se renderiza dependiendo del valor del prop llamado `warn`. Si el valor del prop es `false`, entonces el componente no se renderiza: ```javascript{2-4,29} function WarningBanner(props) { diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md index 92a7b05dd..bb9ba6d17 100644 --- a/content/docs/getting-started.md +++ b/content/docs/getting-started.md @@ -76,7 +76,7 @@ Si vienes con experiencia como diseñador, [estos recursos](http://reactfordesig La documentación de React asume cierta familiaridad con la programación en Javascript. No necesitas ser un experto, pero es más difícil aprender React y Javascript al mismo tiempo. -Recomendamos pasar por este [resumen de Javascript](https://developer.mozilla.org/es-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) para medir tu nivel de conocimiento. Te tomará entre 30 minutos a 1 hora, pero te sentirás más seguro aprendiendo React. +Recomendamos pasar por este [resumen de Javascript](https://developer.mozilla.org/es/docs/Web/JavaScript/A_re-introduction_to_JavaScript) para medir tu nivel de conocimiento. Te tomará entre 30 minutos a 1 hora, pero te sentirás más seguro aprendiendo React. >Consejo > diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md index 46377a991..3b09a2ee4 100644 --- a/content/docs/lists-and-keys.md +++ b/content/docs/lists-and-keys.md @@ -42,11 +42,11 @@ ReactDOM.render( ); ``` -[**Pruebalo en CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011) +[**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011) Este código muestra una lista de números entre 1 y 5. -### Componente Básico de Lista {#basic-list-component} +### Componente básico de lista {#basic-list-component} Usualmente renderizarías listas dentro de un [componente](/docs/components-and-props.html). @@ -298,4 +298,4 @@ function NumberList(props) { [**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010) -Algunas veces esto resulta en código mas claro, pero este estilo también puede ser abusado. Como en JavaScript, depende de ti decidir cuando vale la pena extraer una variable por legibilidad. Ten en mente que si el cuerpo de `map()` esta muy anidado, puede ser un buen momento para [extraer un componente](/docs/components-and-props.html#extracting-components). +Algunas veces esto resulta más claro en código, pero este estilo también puede ser abusado. Como en JavaScript, depende de ti decidir cuando vale la pena extraer una variable por legibilidad. Ten en mente que si el cuerpo de `map()` esta muy anidado, puede ser un buen momento para [extraer un componente](/docs/components-and-props.html#extracting-components). From 8607332b391db15ff0a0d1dda55ce8823da10bff Mon Sep 17 00:00:00 2001 From: Miguel Bolivar Date: Mon, 18 Feb 2019 15:25:14 -0400 Subject: [PATCH 08/39] Translating back form code examples --- content/docs/forms.md | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/content/docs/forms.md b/content/docs/forms.md index 3474e511b..0c5c73cfb 100644 --- a/content/docs/forms.md +++ b/content/docs/forms.md @@ -14,10 +14,10 @@ Los elementos de formularios en HTML funcionan un poco diferente a otros element ```html
- +
``` @@ -46,7 +46,7 @@ class NameForm extends React.Component { } handleSubmit(event) { - alert('Un nombre fue suministrado: ' + this.state.value); + alert('A name was submitted: ' + this.state.value); event.preventDefault(); } @@ -54,10 +54,10 @@ class NameForm extends React.Component { return (
- +
); } @@ -82,7 +82,7 @@ En HTML, el elemento ` ``` @@ -93,7 +93,7 @@ class EssayForm extends React.Component { constructor(props) { super(props); this.state = { - value: 'Por favor escribe un ensayo sobre tu elemento del DOM favorito.' + value: 'Please write an essay about your favorite DOM element.' }; this.handleChange = this.handleChange.bind(this); @@ -105,7 +105,7 @@ class EssayForm extends React.Component { } handleSubmit(event) { - alert('Un ensayo fue enviado: ' + this.state.value); + alert('An essay was submitted: ' + this.state.value); event.preventDefault(); } @@ -113,10 +113,10 @@ class EssayForm extends React.Component { return (