From 7eb51b578218dca08dc4413407bbd75392fca8ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Sun, 17 Feb 2019 01:39:54 -0500 Subject: [PATCH 1/6] Fix untranslated text in homepage --- src/pages/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/index.js b/src/pages/index.js index 57e481ca5..0d5700594 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -287,7 +287,7 @@ class Home extends Component { - Get Started + Comienza From 09bc032b350ea67a81e98a888b325df638f08f29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Sun, 17 Feb 2019 01:43:06 -0500 Subject: [PATCH 2/6] Add "next-article" link translation --- src/templates/components/NavigationFooter/NavigationFooter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/templates/components/NavigationFooter/NavigationFooter.js b/src/templates/components/NavigationFooter/NavigationFooter.js index 9ee0e9519..a88c29344 100644 --- a/src/templates/components/NavigationFooter/NavigationFooter.js +++ b/src/templates/components/NavigationFooter/NavigationFooter.js @@ -61,7 +61,7 @@ const NavigationFooter = ({next, prev, location}) => { textAlign: 'right', }}>
- Next article + Próximo artículo
Date: Sun, 17 Feb 2019 01:48:02 -0500 Subject: [PATCH 3/6] =?UTF-8?q?Replace=20"librer=C3=ADa=20->=20biblioteca"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/add-react-to-a-website.md | 2 +- content/docs/faq-ajax.md | 2 +- content/docs/getting-started.md | 2 +- content/docs/refs-and-the-dom.md | 2 +- content/docs/strict-mode.md | 2 +- 5 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 86c8ce7de..480aff1c7 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 IU -- ya sea usando React o con otras librerías. +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. 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/faq-ajax.md b/content/docs/faq-ajax.md index 74320e79e..93ac16d45 100644 --- a/content/docs/faq-ajax.md +++ b/content/docs/faq-ajax.md @@ -8,7 +8,7 @@ category: FAQ ### ¿Cómo puedo hacer una llamada AJAX? {#how-can-i-make-an-ajax-call} -Con React, puedes usar cualquier librería AJAX. Algunas de las más populares son [Axios](https://github.com/axios/axios), [jQuery AJAX](https://api.jquery.com/jQuery.ajax/), y [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), la cual es soportada de manera nativa en la mayoría de navegadores modernos. +Con React, puedes usar cualquier biblioteca AJAX. Algunas de las más populares son [Axios](https://github.com/axios/axios), [jQuery AJAX](https://api.jquery.com/jQuery.ajax/), y [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), la cual es soportada de manera nativa en la mayoría de navegadores modernos. ### ¿En qué ciclo de vida de un componente puedo hacer una llamada AJAX? {#where-in-the-component-lifecycle-should-i-make-an-ajax-call} diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md index 01910b771..be22c7475 100644 --- a/content/docs/getting-started.md +++ b/content/docs/getting-started.md @@ -20,7 +20,7 @@ redirect_from: Esta página es un resumen de la documentación de React y recursos relacionados. -**React** es una librería Javascript para crear interfaces de usuario. Aprende todo de lo que trata React en [nuestra página principal](/) o [en este tutorial](/tutorial/tutorial.html). +**React** es una biblioteca Javascript para crear interfaces de usuario. Aprende todo de lo que trata React en [nuestra página principal](/) o [en este tutorial](/tutorial/tutorial.html). --- diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 04b7fc247..a30e624e0 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -21,7 +21,7 @@ Existen unos cuantos buenos casos de uso para referencias: * Controlar enfoques, selección de texto, o reproducción de medios. * Activar animaciones imperativas. -* Integración con librerías DOM de terceros. +* Integración con bibliotecas DOM de terceros. Evita usar referencias en cualquier cosa que pueda ser hecha declarativamente. diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index 0b7770149..afa4af48e 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -26,7 +26,7 @@ Funcionalidades adicionales serán agregadas en futuras versiones de React. ### Identificar ciclos de vida inseguros {#identifying-unsafe-lifecycles} -Como fue explicado [en este artículo del blog](/blog/2018/03/27/update-on-async-rendering.html), algúnos cíclos de vida antiguos son inseguros para ser usados en aplicaciones de React asíncronas. Sin embargo, si tu aplicación utiliza librerías de terceros, puede ser díficil asegurar que estos ciclos de vida no estén siendo utilizados. Por fortuna, ¡el modo estricto puede ayudar con esto! +Como fue explicado [en este artículo del blog](/blog/2018/03/27/update-on-async-rendering.html), algúnos cíclos de vida antiguos son inseguros para ser usados en aplicaciones de React asíncronas. Sin embargo, si tu aplicación utiliza bibliotecas de terceros, puede ser díficil asegurar que estos ciclos de vida no estén siendo utilizados. Por fortuna, ¡el modo estricto puede ayudar con esto! Cuando el modo estricto está habilitado, React reune en una lista todos los componentes de clases que están usando ciclos de vida inseguros, y registra por medio de un mensaje de advertencia la información sobre estos componentes, de esta forma: From a4b566f92385bfa41bbd3fa3986ccf5de3c53cbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Sun, 17 Feb 2019 02:45:50 -0500 Subject: [PATCH 4/6] Fix typos --- content/docs/add-react-to-a-website.md | 4 ++-- content/docs/addons-shallow-renderer.md | 2 +- content/docs/addons-test-utils.md | 8 ++++---- content/docs/code-splitting.md | 2 +- content/docs/components-and-props.md | 6 +++--- content/docs/design-principles.md | 10 +++++----- content/docs/fragments.md | 2 +- content/docs/handling-events.md | 4 ++-- content/docs/hello-world.md | 6 ++---- content/docs/higher-order-components.md | 4 ++-- content/docs/hooks-custom.md | 2 +- content/docs/hooks-effect.md | 4 ++-- content/docs/hooks-overview.md | 2 +- content/docs/hooks-reference.md | 4 ++-- content/docs/hooks-rules.md | 2 +- content/docs/jsx-in-depth.md | 2 +- content/docs/lists-and-keys.md | 4 ++-- content/docs/react-without-es6.md | 4 ++-- content/docs/reconciliation.md | 2 +- content/docs/reference-glossary.md | 2 +- content/docs/reference-react-component.md | 2 +- content/docs/reference-react-dom-server.md | 2 +- content/docs/reference-react-dom.md | 2 +- content/docs/reference-react.md | 4 ++-- content/docs/refs-and-the-dom.md | 2 +- content/docs/strict-mode.md | 12 ++++++------ content/docs/thinking-in-react.md | 10 +++++----- content/docs/typechecking-with-proptypes.md | 2 +- content/docs/uncontrolled-components.md | 2 +- content/tutorial/tutorial.md | 17 ++++++++--------- 30 files changed, 64 insertions(+), 67 deletions(-) diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index 480aff1c7..c60248b7d 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -165,7 +165,7 @@ Este enfoque está bien mientras aprendes o creas demostraciones simples. Sin em ### Agregar JSX a un proyecto {#add-jsx-to-a-project} -Agregar JSX a un proyecto no necesita de herramientas complicadas como un bundler o un servidor de desarrollo. Básicamente, agregar JSX **es muy parecido a agregar un preprocesador de CSS.** El único requsito es que tengas [Node.js](https://nodejs.org/) instalado en tu computador. +Agregar JSX a un proyecto no necesita de herramientas complicadas como un bundler o un servidor de desarrollo. Básicamente, agregar JSX **es muy parecido a agregar un preprocesador de CSS.** El único requisito es que tengas [Node.js](https://nodejs.org/) instalado en tu computador. En tu terminal, ve a la carpeta que contiene tu proyecto y pega estos dos comandos: @@ -197,6 +197,6 @@ No esperes hasta que termine -- este comando inicia un observador automático pa Si ahora creas un archivo llamado `src/like_button.js` con este **[código inicial de JSX](https://cdn.rawgit.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**, el observador va a crear un `like_button.js` preprocesado con el código JavaScript original que es apto para el navegador. Cuando edites el código del archivo que tiene JSX, el transformador va a volver a ejecutarse de forma automática. -Como un bonus, esto también te permite utilizar características nuevas de la sintáxis de JavaScript, como las clases, sin que te preocupes de que no funcionen en navegadores antiguos. La herramienta que hemos usado se llamda Babel, y puedes leer más sobre ella en [su documentación](http://babeljs.io/docs/en/babel-cli/). +Como un bonus, esto también te permite utilizar características nuevas de la sintaxis de JavaScript, como las clases, sin que te preocupes de que no funcionen en navegadores antiguos. La herramienta que hemos usado se llama Babel, y puedes leer más sobre ella en [su documentación](http://babeljs.io/docs/en/babel-cli/). Si notas que se te está haciendo más cómodo manejar las herramientas de configuración y quieres sacarle mayor provecho, [en la próxima sección](/docs/create-a-new-react-app.html) se describen unas de las cadenas de herramientas más populares y accesibles. Dado el caso que no te sientas así -- esas etiquetas de script serán suficiente. diff --git a/content/docs/addons-shallow-renderer.md b/content/docs/addons-shallow-renderer.md index 75429ca9d..9bb92c361 100644 --- a/content/docs/addons-shallow-renderer.md +++ b/content/docs/addons-shallow-renderer.md @@ -63,6 +63,6 @@ Puedes ver el shallowRenderer como un "lugar" para renderizar el componente que ### `shallowRenderer.getRenderOutput()` {#shallowrenderergetrenderoutput} -Despues que `shallowRenderer.render()` es llamado, se puede usar `shallowRenderer.getRenderOutput()` para obtener el resultado superficialmente renderizado. +Después que `shallowRenderer.render()` es llamado, se puede usar `shallowRenderer.getRenderOutput()` para obtener el resultado superficialmente renderizado. Entonces ya se pueden empezar a comprobar hechos sobre el resultado. diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 394287418..d611cb0a5 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -122,7 +122,7 @@ it('can render and update a counter', () => { }); ``` -No olvides que la ejecución de eventos del DOM sólo funciona cuando el contenedor del DOM es agregado al `document`. Puedes utilizar un ayudante como [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) para reducir todo el código repetitivo. +No olvides que la ejecución de eventos del DOM solo funciona cuando el contenedor del DOM es agregado al `document`. Puedes utilizar un ayudante como [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) para reducir todo el código repetitivo. * * * @@ -234,7 +234,7 @@ findRenderedDOMComponentWithClass( ) ``` -Igual a [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) pero espera que sólo haya un resultado, y retorna ese único resultado, de lo contrario lanza una excepción si hay algún otro número de coincidencias diferentes a una. +Igual a [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) pero espera que solo haya un resultado, y retorna ese único resultado, de lo contrario lanza una excepción si hay algún otro número de coincidencias diferentes a una. * * * @@ -260,7 +260,7 @@ findRenderedDOMComponentWithTag( ) ``` -Igual a [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) pero espera que sólo haya un resultado y retorna ese único resultado, de lo contario lanza una excepción si hay algún otro número de coincidencias diferentes a una. +Igual a [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) pero espera que solo haya un resultado y retorna ese único resultado, de lo contario lanza una excepción si hay algún otro número de coincidencias diferentes a una. * * * @@ -286,7 +286,7 @@ findRenderedComponentWithType( ) ``` -Igual a [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) pero espera que sólo haya un resultado y retorna ese único resultado, de lo contrario lanza una excepción si hay algún otro número de coincidencias diferentes a una. +Igual a [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) pero espera que solo haya un resultado y retorna ese único resultado, de lo contrario lanza una excepción si hay algún otro número de coincidencias diferentes a una. *** diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index e40f022db..5c6159519 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -202,7 +202,7 @@ const MyComponent = () => ( Decidir en qué parte de tu aplicación introducir la división de código puede ser un poco complicado. Quieres asegurarte de elegir lugares que dividan los *bundles* de manera uniforme, sin interrumpir la experiencia del usuario. -Un buen lugar para comenzar es con las rutas. La mayoría de la gente en la web está acostumbrada a que las transiciones entre páginas se tomen cierto tiempo en cargar. También tiendes a rerenderizar toda de una vez, así que es improbable que tus usuarios interactúen con otros elementos en la página al mismo tiempo. +Un buen lugar para comenzar es con las rutas. La mayoría de la gente en la web está acostumbrada a que las transiciones entre páginas se tomen cierto tiempo en cargar. También tiendes a rerenderizar todo de una vez, así que es improbable que tus usuarios interactúen con otros elementos en la página al mismo tiempo. Este es un ejemplo de cómo configurar la división de código basada en rutas en tu aplicación usando bibliotecas como [React Router](https://reacttraining.com/react-router/) con `React.lazy`. diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md index a7acfc411..944605404 100644 --- a/content/docs/components-and-props.md +++ b/content/docs/components-and-props.md @@ -16,7 +16,7 @@ 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. -Puedes encontrar una [API detallada sobre componentes aqui](/docs/react-component.html). +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. @@ -94,7 +94,7 @@ Recapitulemos lo que sucede en este ejemplo: ## Composición de Componentes {#composing-components} -Los componentes pueden referirse a otros componentes en su salida. Esto nos permite utilizar la misma abstracción de componente para cualquier nivel de detalle. Un botón, un cuadro de diálogo, un formulario, una pantalla: en aplicaciones de React, todos son expresados comunmente como componentes. +Los componentes pueden referirse a otros componentes en su salida. Esto nos permite utilizar la misma abstracción de componente para cualquier nivel de detalle. Un botón, un cuadro de diálogo, un formulario, una pantalla: en aplicaciones de React, todos son expresados comúnmente como componentes. Por ejemplo, podemos crear un componente `App` que renderiza `Welcome` muchas veces: @@ -157,7 +157,7 @@ function Comment(props) { Acepta `author` (un objeto), `text` (un string), y `date` (una fecha) como props, y describe un comentario en una web de redes sociales. -Este componente puede ser difícil de cambiar debido a todo el anidamiento, y támbien es difícil reusar partes individuales de él. Vamos a extraer algunos componentes del mismo. +Este componente puede ser difícil de cambiar debido a todo el anidamiento, y también es difícil reutilizar partes individuales de él. Vamos a extraer algunos componentes del mismo. Primero, vamos a extraer `Avatar`: diff --git a/content/docs/design-principles.md b/content/docs/design-principles.md index 47cf6c29d..6c5c9538e 100644 --- a/content/docs/design-principles.md +++ b/content/docs/design-principles.md @@ -8,7 +8,7 @@ redirect_from: - "contributing/design-principles.html" --- -Nosotros escribimos este documento para que tengas una mejor idea de como decidimos lo que hace y lo que no hace React, y como es nuestra filosofía de desarrollo. Si bien estamos entusiasmados por ver contribuciones de la comunidad, es poco probable que elijamos una ruta que viole uno o más de estos principios. +Escribimos este documento para que tengas una mejor idea de como decidimos lo que hace y lo que no hace React, y como es nuestra filosofía de desarrollo. Si bien estamos entusiasmados por ver contribuciones de la comunidad, es poco probable que elijamos una ruta que viole uno o más de estos principios. >**Nota:** > @@ -30,7 +30,7 @@ Los componentes son a menudo descritos como "solo funciones", pero desde nuestro En general [evitamos añadir funcionalidades](https://www.youtube.com/watch?v=4anAwXYqLG8) que puedan ser implementadas en espacio de usuario. No queremos sobrecargar tus aplicaciones con código de biblioteca que sea inútil. Sin embargo, existen excepciones. -Por ejemplo, si React no proveyera soporte para el estado local o métodos del ciclo de vida, las personas crearían abstracciones propias para eso. Cuando existen múltiples abstracciones compitiendo, React no puede enforzar o aprovechar las propiedades de ninguna de ellas. Tendría que trabajar con el mínimo común denominador. +Por ejemplo, si React no proveyera soporte para el estado local o métodos del ciclo de vida, las personas crearían abstracciones propias para eso. Cuando existen múltiples abstracciones compitiendo, React no puede imponer o aprovechar las propiedades de ninguna de ellas. Tendría que trabajar con el mínimo común denominador. Es por eso que algunas veces añadimos funcionalidades a React. Si notamos que muchos componentes implementan una funcionalidad en específico de manera ineficiente o incompatible, podríamos preferir incluirla en React. No lo hacemos a la ligera. Cuando lo hacemos, es porque estamos confiados de que elevar el nivel de la abstracción beneficia al ecosistema en su conjunto. El estado, los métodos del ciclo de vida, y la normalización de eventos entre navegadores son ejemplos claros de esto. @@ -38,7 +38,7 @@ Siempre discutimos estas propuestas de mejora con la comunidad. Puedes encontrar ### Válvulas de Escape {#escape-hatches} -React es pragmático. Esta guiado por la necesidad de los productos escritos en Facebook. Si bien es influenciado por algunos paradigmas que aún no son totalmente convencionales, tales como la programación funcional, mantenerlo accessible a un amplio rango de programadores con distintos niveles de experiencia y habilidades es uno de los objetivos explícitos del proyecto. +React es pragmático. Esta guiado por la necesidad de los productos escritos en Facebook. Si bien es influenciado por algunos paradigmas que aún no son totalmente convencionales, tales como la programación funcional, mantenerlo accesible a un amplio rango de programadores con distintos niveles de experiencia y habilidades es uno de los objetivos explícitos del proyecto. Si queremos descontinuar un patrón que no nos gusta, es nuestra responsabilidad considerar todos los casos de uso existentes para él, y antes de descontinuarlo [educar a la comunidad respecto a las alternativas](/blog/2016/07/13/mixins-considered-harmful.html). Si algún patrón es útil para construir aplicaciones, pero es difícil de expresar de una manera declarativa, [proveeremos una API imperativa](/docs/more-about-refs.html). Si no podemos encontrar una API perfecta para algo que consideramos necesario en múltiples aplicaciones, [temporalmente proporcionaremos una API funcional](/docs/legacy-context.html) siempre y cuando sea posible librarnos de ella posteriormente, y se deje la puerta abierta a mejoras futuras. @@ -72,7 +72,7 @@ Es por eso que React provee válvulas de escape para trabajar con modelos mutabl Incluso cuando tus componentes son descritos como funciones, al usar React no los llamas directamente. Cada componente retorna una [descripción de lo que necesita ser renderizado](/blog/2015/12/18/react-components-elements-and-instances.html#elements-describe-the-tree), y dicha descripción puede incluir componentes escritos por el usuario como `` y componentes específicos de la plataforma como `
`. Corresponde a React "desenrollar" `` en algún momento en el futuro y aplicar recursivamente los cambios al árbol de interfaz de usuario de acuerdo a los resultados de renderizar los componentes. -Esta es una distinción sutil pero poderosa. Dado que no llamas la función del componente, pero dejas que React la llame, esto significa que React tiene el poder de retrasar esta llamada si es necesario. En su implementación actual React recorre el árbol recursivamente y llama a las funciones de renderizado del árbol completamente actualizado en un único `tick`. Sin embargo, en el futuro podría empezar a [retrazar algunas actualizaciones para evitar la eliminación de cuadros](https://github.com/facebook/react/issues/6170). +Esta es una distinción sutil pero poderosa. Dado que no llamas la función del componente, pero dejas que React la llame, esto significa que React tiene el poder de retrasar esta llamada si es necesario. En su implementación actual React recorre el árbol recursivamente y llama a las funciones de renderizado del árbol completamente actualizado en un único `tick`. Sin embargo, en el futuro podría empezar a [retrasar algunas actualizaciones para evitar la eliminación de cuadros](https://github.com/facebook/react/issues/6170). Este es un tema común en el diseño de React. Algunas bibliotecas populares implementan el enfoque *"push"* en el cual la computación se realiza cuando nuevos datos están disponibles. React, sin embargo, se apega al enfoque *"pull"* en el cual las computaciones pueden ser retrasadas hasta que sean necesarias. @@ -136,7 +136,7 @@ Tener un modelo de programación único nos permite formar equipos de ingenierí Tratamos de proveer APIs elegantes donde sea posible. Estamos mucho menos preocupados con que la implementación sea elegante. El mundo real está muy lejos de ser perfecto, y en una medida razonable preferimos poner el código feo en la biblioteca si eso significa que el usuario no tiene que escribirlo. Cuando evaluamos nuevo código, buscamos una implementación correcta, con buen rendimiento y que permita una buena experiencia de desarrollo. La elegancia es secundaria. -Preferimos código aburrido a código inteligente. El código es descartable y cambia a menudo. Así que es importante que [no introduzca nuevas abstracciones internas al menos que sea absolutamente necesario](https://youtu.be/4anAwXYqLG8?t=13m9s). Código detallado que sea fácil de mover, cambiar y eliminar es preferido sobre código elegante que este abstraido de manera prematura y que sea difícil de cambiar. +Preferimos código aburrido a código inteligente. El código es descartable y cambia a menudo. Así que es importante que [no introduzca nuevas abstracciones internas al menos que sea absolutamente necesario](https://youtu.be/4anAwXYqLG8?t=13m9s). Código detallado que sea fácil de mover, cambiar y eliminar es preferido sobre código elegante que esté abstraído de manera prematura y que sea difícil de cambiar. ### Optimizado para Instrumentación {#optimized-for-tooling} diff --git a/content/docs/fragments.md b/content/docs/fragments.md index fe4c0adcc..a0c59a681 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -3,7 +3,7 @@ id: fragments title: Fragmentos permalink: docs/fragments.html --- -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. +Un patrón común en React es que un componente devuelva múltiples elementos. Los Fragmentos te permiten agrupar una lista de hijos sin agregar nodos extra al DOM. ```js render() { diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 656367837..da024e66c 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -97,7 +97,7 @@ Tienes que tener mucho cuidado en cuanto al significado de `this` en los callbac 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. -Si te molesta llamar `bind`, existen dos maneras de evitarlo. Si usas la sintaxis experimental [campos publicos de clases](https://babeljs.io/docs/plugins/transform-class-properties/), puedes usar los campos de clases para ligar los callbacks correctamente: +Si te molesta llamar `bind`, existen dos maneras de evitarlo. Si usas la sintaxis experimental [campos públicos de clases](https://babeljs.io/docs/plugins/transform-class-properties/), puedes usar los campos de clases para ligar los callbacks correctamente: ```js{2-6} class LoggingButton extends React.Component { @@ -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 publicos 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/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) en el callback: ```js{7-9} class LoggingButton extends React.Component { diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index 0507fe609..6bad0a4e9 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -23,15 +23,13 @@ Dale click al enlace de arriba para abrir un editor online. Tómate la libertad ## ¿Cómo leer esta guía? {#how-to-read-this-guide} -En esta guía, examinaremos los componentes básicos de las aplicaciones React: elementos y componentes. Una vez los domines, podrás crear aplicaciones complejas a partir de pequeñas piezas reutilizables. - -In this guide, we will examine the building blocks of React apps: elements and components. Once you master them, you can create complex apps from small reusable pieces. +En esta guía, examinaremos los componentes básicos de las aplicaciones React: elementos y componentes. Una vez los domines, podrás crear aplicaciones complejas a partir de pequeñas piezas reutilizables. >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. -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 navigació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. +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. diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md index 42fa62d44..5043213fb 100644 --- a/content/docs/higher-order-components.md +++ b/content/docs/higher-order-components.md @@ -68,7 +68,7 @@ class CommentList extends React.Component { } ``` -Posteriormente escribes un componente para subscribirte a un único post de un blog, el cual sigue un patrón similar: +Posteriormente escribes un componente para suscribirte a un único post de un blog, el cual sigue un patrón similar: ```js class BlogPost extends React.Component { @@ -106,7 +106,7 @@ class BlogPost extends React.Component { - En el gestor de eventos de cambio, llamar `setState` cada vez que la fuente de datos cambie. - Al desmontar, eliminar el gestor de eventos de cambio. -Puedes imaginarte que en una aplicación grande, este mismo patrón de suscribirse a `DataSource` y llamar `setState` se repetirá una y otra vez. Necesitamos una abstracción que nos permita definir esta lógica en un solo lugar y compartirla a través de multiples componentes. En esto es donde los componentes de orden superior se destacan. +Puedes imaginarte que en una aplicación grande, este mismo patrón de suscribirse a `DataSource` y llamar `setState` se repetirá una y otra vez. Necesitamos una abstracción que nos permita definir esta lógica en un solo lugar y compartirla a través de múltiples componentes. En esto es donde los componentes de orden superior se destacan. Podemos crear una función que cree componentes, como `CommentList` y `BlogPost`, que se subscriben a `DataSource`. La función aceptará como uno de sus argumentos un componente hijo que recibirá los datos suscritos como un *prop*. Llamemos esta función `withSubscription`: diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 6c103790d..668e262a1 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -6,7 +6,7 @@ next: hooks-reference.html prev: hooks-rules.html --- -Los Hooks son una nueva incorporación en React 16.8. Te permiten usar estado y otras características de React sin escribir una clase. +Los *Hooks* son una nueva incorporación en React 16.8. Te permiten usar estado y otras características de React sin escribir una clase. Construir tus propios Hooks te permite extraer la lógica del componente en funciones reutilizables. diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md index 85045c94b..aecae6f6f 100644 --- a/content/docs/hooks-effect.md +++ b/content/docs/hooks-effect.md @@ -91,7 +91,7 @@ Veamos ahora como podemos hacer lo mismo con el *Hook* `useEffect`. ### Ejemplo con *Hooks* {#example-using-hooks} -Ya hemos visto este ejemplo al principio de la página, pero veámoslo más detenidamete: +Ya hemos visto este ejemplo al principio de la página, pero veámoslo más detenidamente: ```js{1,6-8} import React, { useState, useEffect } from 'react'; @@ -135,7 +135,7 @@ function Example() { Declaramos la variable de estado `count` y le indicamos a React que necesitamos usar un efecto. Le pasamos una función al *Hook* `useEffect`. Esta función que pasamos *es* nuestro efecto. Dentro de nuestro efecto actualizamos el título del documento usando la API del navegador `document.title`. Podemos leer el valor más reciente de `count` dentro del efecto porque se encuentra en el ámbito de nuestra función. Cuando React renderiza nuestro componente, recordará este efecto y lo ejecutará después de actualizar el DOM. Esto sucede en cada renderizado, incluyendo el primero. -Los desarrolladores experimentados en JavaScript se percatarán de que la función que le pasamos a `useEffect` es distinta en cada renderizado. Esto es intencionado. En realidad esto es lo que nos permite leer la variable `count` desde el interior de nuestro efecto sin preocuparnos de que su valor esté obsoleto. Cada vez que re-renderizamos, planificamos un _efecto_ diferente, reemplazando el anterior. En cierta manera, esto hace que los efectos funcionen más como parte del resultado del renderizado. Cada efecto pertenece a su correspondiente renderizado. [Más adelante](#explanation-why-effects-run-on-each-update) veremos más claramente porque esto es útil. +Los desarrolladores experimentados en JavaScript se percatarán de que la función que le pasamos a `useEffect` es distinta en cada renderizado. Esto es intencionado. En realidad esto es lo que nos permite leer la variable `count` desde el interior de nuestro efecto sin preocuparnos de que su valor esté obsoleto. Cada vez que rerenderizamos, planificamos un _efecto_ diferente, reemplazando el anterior. En cierta manera, esto hace que los efectos funcionen más como parte del resultado del renderizado. Cada efecto pertenece a su correspondiente renderizado. [Más adelante](#explanation-why-effects-run-on-each-update) veremos más claramente porque esto es útil. > Consejo > diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 33711ca8b..eb96a8129 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -70,7 +70,7 @@ React proporciona algunos Hooks incorporados como `useState`. También puedes cr ## ⚡️ Hook de Efecto {#️effect-hook} -Es probable que hayas realizado recuperación de datos, suscripciones o modificacion manual del DOM desde los componentes de React. Llamamos a estas operaciones "efectos secundarios" (o "efectos" para abreviar) porque pueden afectar a otros componentes y no se pueden hacer durante el renderizado. +Es probable que hayas realizado recuperación de datos, suscripciones o modificación manual del DOM desde los componentes de React. Llamamos a estas operaciones "efectos secundarios" (o "efectos" para abreviar) porque pueden afectar a otros componentes y no se pueden hacer durante el renderizado. El Hook de Efecto, `useEffect`, agrega la capacidad de realizar efectos secundarios desde un componente funcional. Tiene el mismo propósito que `componentDidMount`,` componentDidUpdate` y `componentWillUnmount` en las clases React, pero unificadas en una sola API. (Mostraremos ejemplos comparando `useEffect` con estos métodos en [Usando el Hook de Efecto](/docs/hooks-effect.html).) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 179e6bbf7..9d7ffab50 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -6,7 +6,7 @@ prev: hooks-custom.html next: hooks-faq.html --- -Los Hooks son una nueva incorporación en React 16.8. Te permiten usar estado y otras características de React sin escribir una clase. +Los *Hooks* son una nueva incorporación en React 16.8. Te permiten usar estado y otras características de React sin escribir una clase. Esta página describe las API para los Hooks incorporados en React. @@ -80,7 +80,7 @@ Los botones "+" y "-" usan la forma funcional, porque el valor actualizado se ba #### Inicialización gradual {#lazy-initial-state} -El argumento `initialState` es el estado utilizado durante el render inicial. En renders posteriores, se ignora. Si el estado inicial es el resultado de un cálculo costoso, puede proporcionar una función en su lugar, que se ejecutará solo en el render inicial: +El argumento `initialState` es el estado utilizado durante el render inicial. En renderizados posteriores, se ignora. Si el estado inicial es el resultado de un cálculo costoso, puede proporcionar una función en su lugar, que se ejecutará solo en el render inicial: ```js const [state, setState] = useState(() => { diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index 00e9b0b5b..3a11323d6 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -6,7 +6,7 @@ next: hooks-custom.html prev: hooks-effect.html --- -Los Hooks son una nueva incorporación en React 16.8. Te permiten usar estado y otras características de React sin escribir una clase. +Los *Hooks* son una nueva incorporación en React 16.8. Te permiten usar estado y otras características de React sin escribir una clase. Los Hooks son funciones de JavaScript, pero necesitas seguir dos reglas cuando los uses. Proporcionamos un [plugin de linter](https://www.npmjs.com/package/eslint-plugin-react-hooks) para hacer cumplir estas reglas automáticamente. diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md index b74bd5bf5..3fd23d639 100644 --- a/content/docs/jsx-in-depth.md +++ b/content/docs/jsx-in-depth.md @@ -95,7 +95,7 @@ function BlueDatePicker() { Cuando un tipo de elemento comienza con una letra minúscula, se refiere a un componente incorporado como `
` o `` y da como resultado una cadena `'div'` o `'span'` que se pasa a `React.createElement`. Los tipos que comienzan con una letra mayúscula como `` compilan a `React.createElement(Foo)` y corresponden a un componente definido o importado en tu archivo JavaScript. -Recomendamos nombrar los componentes con una letra mayúscula. Si tienes un componente que comienza con una letra minúscula, asígnalo una variable en mayúscula antes de usarlo en JSX. +Recomendamos nombrar los componentes con una letra mayúscula. Si tienes un componente que comienza con una letra minúscula, asígnalo a una variable en mayúscula antes de usarlo en JSX. Por ejemplo, este código no se ejecutará como se esperaba: diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md index 524c2fdb1..9d4856d3d 100644 --- a/content/docs/lists-and-keys.md +++ b/content/docs/lists-and-keys.md @@ -109,7 +109,7 @@ const listItems = numbers.map((number) => ); ``` -La mejor forma de elegir una key es usando un string que idenfique únicamente a un elemento de la lista entre sus hermanos. Habitualmente vas a usar IDs de tus datos como key: +La mejor forma de elegir una key es usando un string que identifique únicamente a un elemento de la lista entre sus hermanos. Habitualmente vas a usar IDs de tus datos como key: ```js{2} const todoItems = todos.map((todo) => @@ -130,7 +130,7 @@ const todoItems = todos.map((todo, index) => ); ``` -No recomendamos usar índices para keys si el orden de los ítems puede cambiar. Esto puede impactar negativamente el rendimiento y puede causar problemas con el estado del componente. Revisa el árticulo de Robin Pokorny para una [explicación en profundidad de los impactos negativos de usar un índice como key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). Si eliges no asignar una key explícita a la lista de ítems, React por defecto usará índices como keys. +No recomendamos usar índices para keys si el orden de los ítems puede cambiar. Esto puede impactar negativamente el rendimiento y puede causar problemas con el estado del componente. Revisa el artículo de Robin Pokorny para una [explicación en profundidad de los impactos negativos de usar un índice como key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). Si eliges no asignar una key explícita a la lista de ítems, React por defecto usará índices como keys. Aquí hay una [explicación en profundidad sobre por qué las keys son necesarias](/docs/reconciliation.html#recursing-on-children) si estás interesado en aprender más. diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 6c9769625..1ab1606e5 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -84,7 +84,7 @@ var Counter = createReactClass({ ## Autobinding {#autobinding} -En componentes de React declarados como clases de ES6, los métodos se rigen por la misma semántica que las clases regulares de ES6. Esto significa que no vinculan `this` automomáticamente a la instancia. Debes utilizar `.bind(this)` explícitamente en el constructor: +En componentes de React declarados como clases de ES6, los métodos se rigen por la misma semántica que las clases regulares de ES6. Esto significa que no vinculan `this` automáticamente a la instancia. Debes utilizar `.bind(this)` explícitamente en el constructor: ```javascript class SayHello extends React.Component { @@ -159,7 +159,7 @@ class SayHello extends React.Component { } ``` -Por favor, ten en encuenta que la sintaxis anterior es **experimental** y podría cambiar, o la propuesta podría no llegar a formar parte del lenguaje. +Por favor, ten en cuenta que la sintaxis anterior es **experimental** y podría cambiar, o la propuesta podría no llegar a formar parte del lenguaje. Si prefieres jugar a lo seguro, tienes algunas opciones: diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md index 66923dd0e..da2ed3534 100644 --- a/content/docs/reconciliation.md +++ b/content/docs/reconciliation.md @@ -146,7 +146,7 @@ Reorganizar también puede causar problemas de estado del componente cuando los ## Compensaciones {#tradeoffs} -Es importante recordar que el algoritmo de reconciliación es un detalle de la implementación. React podría volver a renderizar toda la aplicación en cada acción; El resultado final sería el mismo. Para que quede claro, volver a renderizar en este contexto significa llamar a `render` para todos los componentes, no significa que React los desmonte y los vuelva a montar. Solo aplicará las diferencias siguiendo las reglas establecidad en las secciones anteriores. +Es importante recordar que el algoritmo de reconciliación es un detalle de la implementación. React podría volver a renderizar toda la aplicación en cada acción; El resultado final sería el mismo. Para que quede claro, volver a renderizar en este contexto significa llamar a `render` para todos los componentes, no significa que React los desmonte y los vuelva a montar. Solo aplicará las diferencias siguiendo las reglas establecidas en las secciones anteriores. Regularmente refinamos las heurísticas para que los casos de uso común sean más rápidos. En la implementación actual, puedes expresar el hecho de que un subárbol se ha movido entre sus hermanos, pero no puede decir que se haya movido a otro lugar. El algoritmo reenviará ese subárbol completo. diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md index e07779ff0..13f795ad0 100644 --- a/content/docs/reference-glossary.md +++ b/content/docs/reference-glossary.md @@ -55,7 +55,7 @@ Los elementos de React son los bloques de construcción de una aplicación de Re const element =

Hola, mundo

; ``` -Normalmente, los elementos no se utilizan directamente, si no que se devuelven desde los components. +Normalmente, los elementos no se utilizan directamente, si no que se devuelven desde los componentes. ## [Componentes](/docs/components-and-props.html) {#components} diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index 982760c28..2f31f2af7 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -14,7 +14,7 @@ redirect_from: - "tips/initial-ajax.html" - "tips/use-react-with-other-libraries.html" --- -Esta página contiene una referencia detallada de la API de React sobre los componentes definidos a través de clases. Asumimos que estas familiarizado con los conceptos fundamentales de React, como [Componentes y Props](/docs/components-and-props.html), así también [State y Lifecycle](/docs/state-and-lifecycle.html). Si no, léelas primero. +Esta página contiene una referencia detallada de la API de React sobre los componentes definidos a través de clases. Asumimos que estas familiarizado con los conceptos fundamentales de React, como [Componentes y props](/docs/components-and-props.html), así también [Estado y ciclo de vida](/docs/state-and-lifecycle.html). Si no, léelas primero. ## Resumen {#overview} diff --git a/content/docs/reference-react-dom-server.md b/content/docs/reference-react-dom-server.md index d89639106..ba5e2ac5c 100644 --- a/content/docs/reference-react-dom-server.md +++ b/content/docs/reference-react-dom-server.md @@ -81,7 +81,7 @@ ReactDOMServer.renderToStaticNodeStream(element) Similar a [`renderToNodeStream`](#rendertonodestream), excepto que esto no crea atributos DOM adicionales que React usa internamente, como `data-reactroot`. Esto es útil si desea utilizar React como un simple generador de páginas estáticas, ya que eliminar los atributos adicionales puede ahorrar algunos bytes. -La salida HTML de este flujo es exactamente igual a lo que [`ReactDOMServer.renderToStaticMarkup`](#rendertostaticmarkup) devolveria. +La salida HTML de este flujo es exactamente igual a lo que [`ReactDOMServer.renderToStaticMarkup`](#rendertostaticmarkup) devolvería. Si planeas usar React en el cliente para hacer que el marcado sea interactivo, no use este método. En su lugar, utilice [`renderToNodeStream`](#rendertonodestream) en el servidor y [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) en el cliente. diff --git a/content/docs/reference-react-dom.md b/content/docs/reference-react-dom.md index d92433cbc..f957108f4 100644 --- a/content/docs/reference-react-dom.md +++ b/content/docs/reference-react-dom.md @@ -66,7 +66,7 @@ Es igual a [`render()`](#render), pero es utilizado para hidratar un contenedor React espera que el contenido renderizado sea idéntico entre el servidor y el cliente. Puede arreglar las diferencias del contenido de texto, pero deberías tratar los desajustes como errores y arreglarlos. En modo de desarrollo, React alerta sobre desajustes durante la hidratación. No hay garantías de que las diferencias de atributos sean arregladas en caso de desajustes. Esto es importante por razones de rendimiento, porque en la mayoría de las aplicaciones los desajustes son raros y validar todo el marcado sería demasiado costoso. -Si el atributo de un elemento o contenido de texto es inevitablemente diferente entre el servidor y el cliente (por ejemplo, una marca de tiempo), puedes silenciar la alerta agregando `suppressHydrationWarning={true}` al elemento. Esto solo funciona a 1 nivel de profundidad, y está pensado como una vía de escape. No abuses de él. A menos que sea contenido de texto, React aun no intentará arreglarlo, así que es posible que continue inconsistente hasta próximas actualizaciones. +Si el atributo de un elemento o contenido de texto es inevitablemente diferente entre el servidor y el cliente (por ejemplo, una marca de tiempo), puedes silenciar la alerta agregando `suppressHydrationWarning={true}` al elemento. Esto solo funciona a 1 nivel de profundidad, y está pensado como una vía de escape. No abuses de él. A menos que sea contenido de texto, React aun no intentará arreglarlo, así que es posible que continúe inconsistente hasta próximas actualizaciones. Si necesitas renderizar algo diferente de manera intencional en el servidor y en el cliente, puedes realizar un renderizado en 2 pasos. Los componentes que renderizan contenido diferente al cliente, pueden leer una variable de estado como `this.state.isClient`, la cual puedes cambiar a `true` en `componentDidMount()`. De esta manera, el paso de renderizado inicial renderizará el mismo contenido que el servidor, evitando desajustes, pero un paso adicional ocurrirá síncronamente justo después de la hidratación. Recuerda que este enfoque hará que tus componentes sean más lentos debido a que se deben renderizar dos veces, así que utilízalo con precaución. diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md index 907a2794c..0a6ee5b64 100644 --- a/content/docs/reference-react.md +++ b/content/docs/reference-react.md @@ -24,7 +24,7 @@ Los componentes de React permiten dividir la UI en piezas independientes, reusab - [`React.Component`](#reactcomponent) - [`React.PureComponent`](#reactpurecomponent) -Si no se usan las clases ES6, se puede usar el módulo `create-react-class`. Para más infomación, ver [Usar React sin ES6](/docs/react-without-es6.html). +Si no se usan las clases ES6, se puede usar el módulo `create-react-class`. Para más información, ver [Usar React sin ES6](/docs/react-without-es6.html). Los componentes de React también pueden ser definidos como funciones que se pueden envolver: @@ -202,7 +202,7 @@ Retorna una función que produce elementos React de un tipo dado. Como [`React.c Este auxiliar es considerado antiguo y en su lugar fomentamos el uso de JSX o de `React.createElement()`. -Normalmente no se invocará `React.createFactory()` directamente si se está usando JSX. Para aprender más, ver [React Without JSX](/docs/react-without-jsx.html). +Normalmente no se invocará `React.createFactory()` directamente si se está usando JSX. Para aprender más, ver [React sin JSX](/docs/react-without-jsx.html). * * * diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index a30e624e0..b06f41c15 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -37,7 +37,7 @@ Tu primer pensamiento puede ser usar referencias para "hacer que las cosas funci ### Creando Referencias {#creating-refs} -Las referencias son creadas usando `React.createRef()` y agregandolas a elementos de React mediante el atributo `ref`. Las referencias son asignadas comunmente a una propiedad de instancia cuando un componente es construido, así pueden ser referenciadas por el componente. +Las referencias son creadas usando `React.createRef()` y agregándolas a elementos de React mediante el atributo `ref`. Las referencias son asignadas comúnmente a una propiedad de instancia cuando un componente es construido, así pueden ser referenciadas por el componente. ```javascript{4,7} class MyComponent extends React.Component { diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md index afa4af48e..00b570c10 100644 --- a/content/docs/strict-mode.md +++ b/content/docs/strict-mode.md @@ -26,13 +26,13 @@ Funcionalidades adicionales serán agregadas en futuras versiones de React. ### Identificar ciclos de vida inseguros {#identifying-unsafe-lifecycles} -Como fue explicado [en este artículo del blog](/blog/2018/03/27/update-on-async-rendering.html), algúnos cíclos de vida antiguos son inseguros para ser usados en aplicaciones de React asíncronas. Sin embargo, si tu aplicación utiliza bibliotecas de terceros, puede ser díficil asegurar que estos ciclos de vida no estén siendo utilizados. Por fortuna, ¡el modo estricto puede ayudar con esto! +Como fue explicado [en este artículo del blog](/blog/2018/03/27/update-on-async-rendering.html), algunos ciclos de vida antiguos son inseguros para ser usados en aplicaciones de React asíncronas. Sin embargo, si tu aplicación utiliza bibliotecas de terceros, puede ser difícil asegurar que estos ciclos de vida no estén siendo utilizados. Por fortuna, ¡el modo estricto puede ayudar con esto! -Cuando el modo estricto está habilitado, React reune en una lista todos los componentes de clases que están usando ciclos de vida inseguros, y registra por medio de un mensaje de advertencia la información sobre estos componentes, de esta forma: +Cuando el modo estricto está habilitado, React reúne en una lista todos los componentes de clases que están usando ciclos de vida inseguros, y registra por medio de un mensaje de advertencia la información sobre estos componentes, de esta forma: ![](../images/blog/strict-mode-unsafe-lifecycles-warning.png) -Solucionar los problemas identificados por el modo estricto _ahora_, hará que sea más fácil para ti aprovechar el renderizamiento asíncrono en futuras versiones de React. +Solucionar los problemas identificados por el modo estricto _ahora_, hará que sea más fácil para ti aprovechar el renderizado asíncrono en futuras versiones de React. ### Advertencia sobre el uso de la API legado de string ref {#warning-about-legacy-string-ref-api-usage} @@ -57,7 +57,7 @@ React solía soportar `findDOMNode` para buscar en el árbol un nodo del DOM dad `findDOMNode`también puede ser utilizado en componentes con clases pero esto estaba dañando los niveles de abstracción al permitir a un padre solicitar que cierto hijo fuera renderizado. Esto crea un peligro para refactorizar algo en el caso que no puedas cambiar los detalles de la implementación de un componente ya que un padre puede estar utilizando uno de sus nodos del DOM. `findDOMNode` sólo retorna el primer hijo, pero con el uso de los Fragmentos, es posible que un componente pueda renderizar múltiples nodos del DOM. `findDOMNode` es una API de solo lectura para usar una sola vez. Sólo da una respuesta cuando se invoca el método. Si un componente hijo renderiza un nodo diferente, no hay forma alguna de manipular este cambio. Por lo tanto `findDOMNode` solo funciona si los componentes simpre retornan un solo nodo de DOM que nunca cambie. -En su lugar puedes hacer que este comportamiento sea explicito pasando un ref a tu componente personalizado y transmitiendolo al DOM usando el [reenvio de ref](/docs/forwarding-refs.html#forwarding-refs-to-dom-components). +En su lugar puedes hacer que este comportamiento sea explicito pasando un ref a tu componente personalizado y transmitiéndolo al DOM usando el [reenvío de ref](/docs/forwarding-refs.html#forwarding-refs-to-dom-components). También puedes agregar un nodo del DOM envuelto en tu componente y vincular un ref directamente al mismo. @@ -95,9 +95,9 @@ El ciclo de vida de la fase de renderizado incluye los siguientes métodos de lo * `render` * Funciones de actualización de `setState` (el primer argumento) -Ya que los métodos arriba mencionados pueden ser llamados más de una vez, es importante que estos no contengan ningún efecto secundario. Ignorar esta regla puede llevar a una cantidad de problemas, incluyendo fugas de memoria y estados de aplicación inválido. Desafortunadamente, puede ser muy difícil el detectar estos problemas ya con frecuencia pueden ser [no determinísticos](https://en.wikipedia.org/wiki/Deterministic_algorithm). +Ya que los métodos arriba mencionados pueden ser llamados más de una vez, es importante que estos no contengan ningún efecto secundario. Ignorar esta regla puede llevar a una cantidad de problemas, incluyendo fugas de memoria y estados de aplicación inválido. Desafortunadamente, puede ser muy difícil el detectar estos problemas ya con frecuencia pueden ser [no deterministas](https://en.wikipedia.org/wiki/Deterministic_algorithm). -El modo estricto no puede detectar efectos secundarios de forma automática por ti, pero te puede ayudar a encontrarlos al hacerlos un poco más determinísticos. Esto se logra al invocar dos veces los siguientes métodos: +El modo estricto no puede detectar efectos secundarios de forma automática por ti, pero te puede ayudar a encontrarlos al hacerlos un poco más deterministas. Esto se logra al invocar dos veces los siguientes métodos: * El método `constructor` en los componentes de clases * El método `render` diff --git a/content/docs/thinking-in-react.md b/content/docs/thinking-in-react.md index 04b312523..3e2c2d2ab 100644 --- a/content/docs/thinking-in-react.md +++ b/content/docs/thinking-in-react.md @@ -8,7 +8,7 @@ redirect_from: prev: composition-vs-inheritance.html --- -React es, en nuestra opinión, la mejor forma de construir aplicaciones Web grandes y rápidas usando JavaScript. Ha escalado muy bien para nosotros en Facebook e Instragram. +React es, en nuestra opinión, la mejor forma de construir aplicaciones Web grandes y rápidas usando JavaScript. Ha escalado muy bien para nosotros en Facebook e Instagram. Una de las grandes ventaja de React es cómo te hace pensar acerca de la aplicación mientras la construyes. En esta oportunidad vamos a ver el proceso de pensamiento al construir una tabla de productos con una funcionalidad de búsqueda usando React. @@ -51,7 +51,7 @@ Verás que tenemos cinco componentes en nuestra aplicación de ejemplo. Hemos es Si observas `ProductTable`, verás que el encabezado de la tabla (conteniendo las etiquetas "Nombre" y "Precio") no son sus propios componentes. Esto es cuestión de preferencia, y hay argumentos para hacerlo de ambas formas. Para este ejemplo, decidimos dejarlos como parte de `ProductTable` porque es parte de representar la *colección de datos*, que es parte de las responsabilidades de `ProductTable`. De todas formas, si este encabezado crece hasta volverse demasiado complejo (por ejemplo, si tuviéramos que agregar una forma de ordenarlos), tendría sentido entonces que sean su propio componente `ProductTableHeader`. -Ahora que hemos identificado los componentes en nuestro mock, vamos a ordenarlos jerarquicamente. Esto es fácil. Los componentes que aparecen dentro de otro componente en nuestro mock deberían aparecer como hijos en la jerarquía. +Ahora que hemos identificado los componentes en nuestro mock, vamos a ordenarlos jerárquicamente. Esto es fácil. Los componentes que aparecen dentro de otro componente en nuestro mock deberían aparecer como hijos en la jerarquía. * `FilterableProductTable` * `SearchBar` @@ -66,9 +66,9 @@ Ahora que hemos identificado los componentes en nuestro mock, vamos a ordenarlos Ahora que tenemos nuestra jerarquía de componentes, es momento de implementar la aplicación. La forma más fácil es construir una versión que tome nuestro modelo de datos y muestre la interfaz de usuario sin interactividad. Es mejor desacoplar estos procesos porque crear una versión estática requiere escribir un montón pero no pensar tanto, mientras que agregar interactividad requiere pensar un montón y no escribir tanto. Vamos a ver por qué. -Para construír una versión estática de tu aplicación que muestre tu modelo de datos vas a necesitar construir componentes que reusen otros componentes y pasen datos usando *props*. *props* son una forma de pasar datos de un padre a su hijo. Si estás familiarizado con el concepto de *estado*, **no uses para nada el estado** para crear esta versión estática. El estado está reservado para interactividad, esto es, cuando los datos cambian a través del tiempo. Dado que esta es una versión estática de la aplicación, no lo necesitas. +Para construir una versión estática de tu aplicación que muestre tu modelo de datos vas a necesitar construir componentes que reusen otros componentes y pasen datos usando *props*. *props* son una forma de pasar datos de un padre a su hijo. Si estás familiarizado con el concepto de *estado*, **no uses para nada el estado** para crear esta versión estática. El estado está reservado para interactividad, esto es, cuando los datos cambian a través del tiempo. Dado que esta es una versión estática de la aplicación, no lo necesitas. -Puedes contruir tu aplicación de arriba para abajo o de abajo para arriba. Esto es, puedes o empezar construyendo los componentes más arriba en la jerarquía (empezar por `FilterableProductTable`) o puedes empezar por los que están más abajo (`ProductRow`). En ejemplos simples es normalmente más fácil empezar de arriba para abajo, en proyectos más grandes es más usual empezar a la inversa e ir escribiendo pruebas mientras vas subiendo en la jerarquía. +Puedes construir tu aplicación de arriba para abajo o de abajo para arriba. Esto es, puedes o empezar construyendo los componentes más arriba en la jerarquía (empezar por `FilterableProductTable`) o puedes empezar por los que están más abajo (`ProductRow`). En ejemplos simples es normalmente más fácil empezar de arriba para abajo, en proyectos más grandes es más usual empezar a la inversa e ir escribiendo pruebas mientras vas subiendo en la jerarquía. Al final de este paso tendrás una colección de componentes reutilizables que representan tu modelo de datos. Estos componente solo tendrán un método `render()` ya que esta es la versión estática de la aplicación. El primer componente de la jerarquía (`FilterableProductTable`) recibe tu modelo de datos como prop. Si realizas un cambio en este y ejecutas `ReactDOM.render()` de nuevo, la interfaz de usuario se va a actualizar. Es fácil ver como se actualiza la interfaz de usuario y donde hacer cambios ya que no hay nada complicado ocurriendo. El **flujo de datos en un sentido** de React (también llamado *one-way binding*) ayuda a mantener todo modular y rápido. @@ -108,7 +108,7 @@ Finalmente, nuestro estado es:

Revisa el Pen Pensando en React: Paso 4 en CodePen.

-Bien, hemos identificado la minima cantidad de estado en la aplicación. Lo siguiente que necesitamos hacer es identificar que componentes modifican o *son dueños* de este estado. +Bien, hemos identificado la mínima cantidad de estado en la aplicación. Lo siguiente que necesitamos hacer es identificar que componentes modifican o *son dueños* de este estado. Recuerda: React se trata de usar un flujo de datos en un sentido. Puede que no sea inmediatamente obvio cual componente debería poseer el estado. **Esta es normalmente la parte más complicada para quienes están arrancando con React**, así que sigue estos pasos para averiguarlo. diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 158d416b2..d7339c86b 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -12,7 +12,7 @@ redirect_from: > >Nosotros ofrecemos [un script de codemod](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) para automatizar la conversión. -A medida que tu aplicación crece, puedes capturar una gran cantidad de errores con verificación de tipos. Para algunas aplicaciones, puedes usar extensiones de Javascript como [Flow](https://flow.org/) o [TypeScript](https://www.typescriptlang.org/) para verificar los tipos en tu aplicación. Pero incluso si no usas alguno de ellos, React tiene algunas habilidades de verificación de tipos incorporadas. Para usar verificación de tipos en las props de un component, puedes asignar la propiedad especial `PropTypes`: +A medida que tu aplicación crece, puedes capturar una gran cantidad de errores con verificación de tipos. Para algunas aplicaciones, puedes usar extensiones de Javascript como [Flow](https://flow.org/) o [TypeScript](https://www.typescriptlang.org/) para verificar los tipos en tu aplicación. Pero incluso si no usas alguno de ellos, React tiene algunas habilidades de verificación de tipos incorporadas. Para usar verificación de tipos en las props de un componente, puedes asignar la propiedad especial `PropTypes`: ```javascript import PropTypes from 'prop-types'; diff --git a/content/docs/uncontrolled-components.md b/content/docs/uncontrolled-components.md index fcb823d75..602344017 100644 --- a/content/docs/uncontrolled-components.md +++ b/content/docs/uncontrolled-components.md @@ -4,7 +4,7 @@ title: Componentes no controlados permalink: docs/uncontrolled-components.html --- -En la mayoría de los casos, te recomendamos usar [Componentes Controlados](/docs/forms.html) para implementar formularios. En un componente controlado, los datos del formulario son manejados por un componente React. La alternativa son los componentes no controlados, donde los datos del formulario son manejados por el propio DOM. +En la mayoría de los casos, te recomendamos usar [Componentes controlados](/docs/forms.html) para implementar formularios. En un componente controlado, los datos del formulario son manejados por un componente React. La alternativa son los componentes no controlados, donde los datos del formulario son manejados por el propio DOM. Para escribir un componente no controlado, en lugar de escribir un controlador de eventos para cada actualización de estado, puedes [usar una referencia](/docs/refs-and-the-dom.html) para que obtengas los valores del formulario desde el DOM. diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index c93358340..6983e688c 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -16,7 +16,7 @@ Este tutorial no asume ningún conocimiento previo sobre React. ## Antes de empezar el tutorial {#before-we-start-the-tutorial} -Vamos a contruir un pequeño juego durante este tutorial. **Deberás estar tentado a obviarlo porque tú no estás construyendo juegos en el día a día, pero dale una oportunidad.** Las técnicas que aprenderás en el tutorial son fundamentales para construir cualquier aplicación de React, y dominarlo te dará un entendimiento profundo de React. +Vamos a construir un pequeño juego durante este tutorial. **Deberás estar tentado a obviarlo porque tú no estás construyendo juegos en el día a día, pero dale una oportunidad.** Las técnicas que aprenderás en el tutorial son fundamentales para construir cualquier aplicación de React, y dominarlo te dará un entendimiento profundo de React. >Tip > @@ -35,11 +35,11 @@ Está bien copiar y pegar el código mientras sigues el tutorial, pero te recome ### ¿Qué estamos construyendo? {#what-are-we-building} -En este tutorial, te mostraremoscómo construir un juego de tic-tac-toe interactivo con React. +En este tutorial, te mostraremos cómo construir un juego de tic-tac-toe interactivo con React. Puedes ver lo que construiremos aquí: **[Resultado Final](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Si el código no te hace sentido, o si no estás familiarizado con la sintaxis de código, ¡no te preocupes! El objetivo de este tutorial es ayudarte a entender React y su sintaxis. -Recomentamos que revises el juego de tic-tac-toe antes de continuar con el tutorial. Una de las características que notarás es que hay una lista enumerada a la derecha del tablero del jugador. Esta lista da una historia de todos los movimientos que han ocurrido en el juego, y se va actualizando conforme el juego progresa. +Recomendamos que revises el juego de tic-tac-toe antes de continuar con el tutorial. Una de las características que notarás es que hay una lista enumerada a la derecha del tablero del jugador. Esta lista da una historia de todos los movimientos que han ocurrido en el juego, y se va actualizando conforme el juego progresa. Puedes cerrar el juego de tic-tac-toe una vez que te familiarizaste con él. Empezaremos desde una plantilla más simple en este tutorial. Nuestro siguiente paso es configurarlo de tal forma que puedas empezar a construir el juego. @@ -55,7 +55,7 @@ Hay dos maneras de completar este tutorial: puedes escribir el código en tu nav ### Opción de configuración 1: Escribe código en el navegador {#setup-option-1-write-code-in-the-browser} -¡Ésta es la forma más rápida de empezar! +¡Esta es la forma más rápida de empezar! Primero, abre este **[código inicial](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** en una nueva pestaña. La nueva pestaña deberá mostrar un tablero vacío del juego de tic-tac-toe y código de React. Estaremos editando el código de React en este tutorial. @@ -63,7 +63,7 @@ Ahora puedes saltarte a la segunda opción de configuración o ir a la sección ### Opción de configuración 2: Entorno de desarrollo local {#setup-option-2-local-development-environment} -¡Ésta es completamente opcional y no es requeridad para éste tutorial! +¡Esta es completamente opcional y no es requerida para este tutorial!
@@ -170,7 +170,7 @@ Si tienes curiosidad, `createElement()` está descrito en más detalle en la [re JSX viene con todo el poder de JavaScript. Puedes poner *cualquier* expresión de JavaScript en el interior de las llaves dentro de JSX. Cada elemento de React es un objeto de JavaScript que puedes almacenar en una variable o pasar alrededor de tu programa. -El componente anterior `ShoppingList` solo renderiza componentes pre-construidos del DOM como `
` y `
  • `. Pero, también puedes componener y renderizar componentes personalizados de React. Por ejemplo, ahora podemos referirmos al listado de compras completo escribiendo ``. Cada componente de React está encapsulado y puede operar independientemente; esto te permite construir IUs complejas desde componentes simples. +El componente anterior `ShoppingList` solo renderiza componentes pre-construidos del DOM como `
    ` y `
  • `. Pero, también puedes componer y renderizar componentes personalizados de React. Por ejemplo, ahora podemos referirmos al listado de compras completo escribiendo ``. Cada componente de React está encapsulado y puede operar independientemente; esto te permite construir IUs complejas desde componentes simples. ## Inspeccionando el código inicial {#inspecting-the-starter-code} @@ -350,7 +350,7 @@ Ahora tenemos los bloques de construcción básicos para nuestro juego tic-tac-t ### Elevando el estado {#lifting-state-up} -Actualmente, cada componente Square mantiene el estado del juego. Para determinar un ganador, necesitamos mantener el valor de cada uno de los 9 cuadrador en un solo lugar. +Actualmente, cada componente Square mantiene el estado del juego. Para determinar un ganador, necesitamos mantener el valor de cada uno de los 9 cuadrados en un solo lugar. Podemos pensar que el tablero debería solo preguntar a cada cuadrado por su estado. Aunque este enfoque es posible en React, te incentivamos a que no lo uses porque el código se vuelve difícil de ententer, susceptible a errores, y difícil de refactorizar. En su lugar, el mejor enfoque es almacenar el estado del juego en el componente padre Board en vez de cada componente Square. El componente Board puede decirle a cada cuadrado que mostrar pasándole un prop [tal cual hicimos cuando pasamos un número a cada cuadrado](#passing-data-through-props). @@ -715,7 +715,6 @@ class Board extends React.Component { ### Declarando un ganador {#declaring-a-winner} Ahora que mostramos de qué jugador es el siguiente turno, debemos también mostrar cuando alguien ganó el juego y si no hay más movimientos que hacer. Podemos determinar un ganador añadiendo esta función de apoyo al final del archivo. -Now that we show which player's turn is next, we should also show when the game is won and there are no more turns to make. We can determine a winner by adding this helper function to the end of the file: ```javascript function calculateWinner(squares) { @@ -1065,7 +1064,7 @@ Vamos a `mapear` sobre el `historial` en el método `render` del componente Game **[Ver el código completo en este punto](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)** -Por cada movimiento en el hisotrial del juego de tic-tac-toe, creamos un elemento de lista `
  • ` que contiene un botón `