Merge pull request #174 from Darking360/es-miguel-fixes

Overall Fixes

Author: alejandronanez

content/docs/add-react-to-a-website.md

@@ -57,7 +57,7 @@ Lo siguiente es agregar tres etiquetas `<script>` a la página HTML justo antes
   <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
   <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 
-  <!-- Carguemos nuestro componente de React. -->
+  <!-- Cargamos nuestro componente de React. -->
   <script src="like_button.js"></script>
 
 </body>
@@ -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=).
 

content/docs/addons-shallow-renderer.md

@@ -10,7 +10,7 @@ category: Referencia
 
 ```javascript
 import ShallowRenderer from 'react-test-renderer/shallow'; // ES6
-var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 with npm
+var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 con npm
 ```
 
 ## Resumen {#resumen}
@@ -35,7 +35,7 @@ Entonces puedes comprobar:
 ```javascript
 import ShallowRenderer from 'react-test-renderer/shallow';
 
-// en tu test:
+// en tu prueba:
 const renderer = new ShallowRenderer();
 renderer.render(<MyComponent />);
 const result = renderer.getRenderOutput();
@@ -47,11 +47,11 @@ expect(result.props.children).toEqual([
 ]);
 ```
 
-Las pruebas superficiales tienen algunas limitaciones, es decir, no soportan refs.
+Las pruebas superficiales tienen algunas limitaciones, es decir, no soportan referencias.
 
 > Nota:
 >
-> También recomendamos revisar [Shallow Rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) de Enzyme. Provee un API de alto nivel mucho mejor de la misma funcionalidad.
+> También recomendamos revisar la [API de Renderizado Superficial](http://airbnb.io/enzyme/docs/api/shallow.html) de Enzyme. Provee una API de alto nivel mucho mejor de la misma funcionalidad.
 
 ## Referencia {#referencia}
 

content/docs/addons-test-utils.md

@@ -10,7 +10,7 @@ category: Reference
 
 ```javascript
 import ReactTestUtils from 'react-dom/test-utils'; // ES6
-var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
+var ReactTestUtils = require('react-dom/test-utils'); // ES5 con npm
 ```
 
 ## Introducción {#overview}
@@ -208,7 +208,7 @@ findAllInRenderedTree(
 )
 ```
 
-Navega por todos los componentes en `tree` y acumula todos los componentes en donde `test(component)` sea `true`. Esto no es útil por sí solo, pero es utilizado como primitivo para otras utilidades de prueba.
+Navega por todos los componentes en `tree` y acumula todos los componentes en donde `test(component)` sea `true`. Esto no es útil por sí solo, pero es utilizado como primitiva para otras utilidades de prueba.
 
 * * *
 

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 todo 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 volver a renderizar 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`.

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 = <Welcome name="Sara" />;
 ```
 
-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, `<div />` representa una etiqueta div HTML pero `<Welcome />` 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, `<div />` representa una etiqueta div HTML pero `<Welcome />` 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.

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 `<WarningBanner />` 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 `<WarningBanner />` 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) {

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}
 

content/docs/forms.md

@@ -14,10 +14,10 @@ Los elementos de formularios en HTML funcionan un poco diferente a otros element
 ```html
 <form>
   <label>
-    Nombre:
+    Name:
     <input type="text" name="name" />
   </label>
-  <input type="submit" value="Enviar" />
+  <input type="submit" value="Submit" />
 </form>
 ```
 
@@ -46,18 +46,18 @@ 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();
   }
 
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Nombre:
+          Name:
           <input type="text" value={this.state.value} onChange={this.handleChange} />
         </label>
-        <input type="submit" value="Enviar" />
+        <input type="submit" value="Submit" />
       </form>
     );
   }
@@ -82,7 +82,7 @@ En HTML, el elemento `<textarea>` define su texto por sus hijos:
 
 ```html
 <textarea>
-  Hola, esto es un poco de texto dentro de un área de texto
+  Hello there, this is some text in a text area
 </textarea>
 ```
 
@@ -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,18 +105,18 @@ 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();
   }
 
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Ensayo:
+          Essay:
           <textarea value={this.state.value} onChange={this.handleChange} />
         </label>
-        <input type="submit" value="Enviar" />
+        <input type="submit" value="Submit" />
       </form>
     );
   }
@@ -131,9 +131,9 @@ En HTML, `<select>` crea una lista desplegable. Por ejemplo, este HTML crea una
 
 ```html
 <select>
-  <option value="grapefruit">Toronja</option>
-  <option value="lime">Lima</option>
-  <option selected value="coconut">Coco</option>
+  <option value="grapefruit">Grapefruit</option>
+  <option value="lime">Lime</option>
+  <option selected value="coconut">Coconut</option>
   <option value="mango">Mango</option>
 </select>
 ```
@@ -155,23 +155,23 @@ class FlavorForm extends React.Component {
   }
 
   handleSubmit(event) {
-    alert('Tu sabor favorito es: ' + this.state.value);
+    alert('Your favorite flavor is: ' + this.state.value);
     event.preventDefault();
   }
 
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Selecciona tu sabor favorito:
+          Pick your favorite flavor:
           <select value={this.state.value} onChange={this.handleChange}>
-            <option value="grapefruit">Toronja</option>
-            <option value="lime">Lima</option>
-            <option value="coconut">Coco</option>
+            <option value="grapefruit">Grapefruit</option>
+            <option value="lime">Lime</option>
+            <option value="coconut">Coconut</option>
             <option value="mango">Mango</option>
           </select>
         </label>
-        <input type="submit" value="Enviar" />
+        <input type="submit" value="Submit" />
       </form>
     );
   }
@@ -232,7 +232,7 @@ class Reservation extends React.Component {
     return (
       <form>
         <label>
-          Va a ir:
+          Is going:
           <input
             name="isGoing"
             type="checkbox"
@@ -241,7 +241,7 @@ class Reservation extends React.Component {
         </label>
         <br />
         <label>
-          Número de Invitados:
+          Number of guests:
           <input
             name="numberOfGuests"
             type="number"

content/docs/forwarding-refs.md

@@ -71,6 +71,6 @@ Si nombras la función, _DevTools_ también incluirá su nombre (Ej: "*ForwardRe
 
 `embed:forwarding-refs/wrapped-component-with-function-name.js`
 
-Puedes incluso asigna la propiedad `displayName` de la función para que incluya el componente que estás envolviendo:
+Puedes incluso asignar la propiedad `displayName` de la función para que incluya el componente que estás envolviendo:
 
 `embed:forwarding-refs/customized-display-name.js`

content/docs/fragments.md

@@ -17,7 +17,7 @@ render() {
 }
 ```
 
-También hay una nueva [sintaxis corta](#sintaxis-corta) para declararlos, pero aún no es soportada por todas las herramientas populares.
+También hay una nueva [sintaxis corta](#short-syntax) para declararlos, pero aún no es soportada por todas las herramientas populares.
 
 ## Motivación {#motivation}
 

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/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
 >