From 6d74a4b8915898c4d301c4c08ce236c716a474d0 Mon Sep 17 00:00:00 2001
From: Jonathan Palma <tanpalma04@gmail.com>
Date: Sun, 24 Feb 2019 22:10:03 -0600
Subject: [PATCH 01/14] Translated render-props

---
 content/docs/render-props.md | 119 +++++++++++++++++------------------
 1 file changed, 59 insertions(+), 60 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index c9b6f9c04..90cd4e81f 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -4,25 +4,25 @@ title: Render Props
 permalink: docs/render-props.html
 ---
 
-The term ["render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) refers to a technique for sharing code between React components using a prop whose value is a function.
+El término ["render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) se refiere a una técnica para compartir codigo entre componentes en React utilizando una propiedad cuyo valor es una función.
 
-A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
+Un componente con una `render prop` toma una función que devuelve un elemento de React y lo llama en lugar de implementar su propia lógica de representación.
 
 ```jsx
 <DataProvider render={data => (
-  <h1>Hello {data.target}</h1>
+  <h1>Hola {data.target}</h1>
 )}/>
 ```
 
-Libraries that use render props include [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) and [Downshift](https://github.com/paypal/downshift).
+Algunas bibliotecas que utilizan `render props` son [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) y [Downshift](https://github.com/paypal/downshift).
 
-In this document, we’ll discuss why render props are useful, and how to write your own.
+En este documento, discutiremos por qué las `render props` son útiles y cómo escribir los suyos.
 
-## Use Render Props for Cross-Cutting Concerns {#use-render-props-for-cross-cutting-concerns}
+## Use Render Props for Cross-Cutting Concerns
 
-Components are the primary unit of code reuse in React, but it's not always obvious how to share the state or behavior that one component encapsulates to other components that need that same state.
+Los componentes son la unidad primaria de reutilización de código en React, pero no siempre es obvio cómo compartir el estado o el comportamiento que un componente encapsula en otros componentes que necesitan ese mismo estado.
 
-For example, the following component tracks the mouse position in a web app:
+Por ejemplo, el siguiente componente rastrea la posición del cursor en una aplicación web:
 
 ```js
 class MouseTracker extends React.Component {
@@ -42,22 +42,22 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
-        <h1>Move the mouse around!</h1>
-        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
+        <h1>¡Mueve el cursor alrededor!</h1>
+        <p>La posición actual del mouse es ({this.state.x}, {this.state.y})</p>
       </div>
     );
   }
 }
 ```
 
-As the cursor moves around the screen, the component displays its (x, y) coordinates in a `<p>`.
+A medida que el cursor se mueve alrededor de la pantalla, el componente muestra sus coordenadas (x, y) en un `<p>`.
 
-Now the question is: How can we reuse this behavior in another component? In other words, if another component needs to know about the cursor position, can we encapsulate that behavior so that we can easily share it with that component?
+Ahora la pregunta es: ¿Cómo podemos reutilizar este comportamiento en otro componente? En otras palabras, si otro componente necesita saber sobre la posición del cursor, ¿podemos encapsular ese comportamiento para poder compartirlo fácilmente con ese componente?
 
-Since components are the basic unit of code reuse in React, let's try refactoring the code a bit to use a `<Mouse>` component that encapsulates the behavior we need to reuse elsewhere.
+Como los componentes son la unidad básica de reutilización de código en React, intentemos refactorizar el código un poco para usar un componente `<Mouse>` que encapsule el comportamiento que necesitamos reutilizar en otro lugar.
 
 ```js
-// The <Mouse> component encapsulates the behavior we need...
+// El componente <Mouse> encapsula el comportamiento que necesitamos...
 class Mouse extends React.Component {
   constructor(props) {
     super(props);
@@ -76,8 +76,8 @@ class Mouse extends React.Component {
     return (
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
-        {/* ...but how do we render something other than a <p>? */}
-        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
+        {/* ...pero, ¿cómo rederizamos algo más que un <p>? */}
+        <p>La posición actual del mouse es ({this.state.x}, {this.state.y})</p>
       </div>
     );
   }
@@ -87,7 +87,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>¡Mueve el cursor alrededor!</h1>
         <Mouse />
       </div>
     );
@@ -95,11 +95,11 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Now the `<Mouse>` component encapsulates all behavior associated with listening for `mousemove` events and storing the (x, y) position of the cursor, but it's not yet truly reusable.
+Ahora, el componente `<Mouse>` encapsula todo el comportamiento asociado con la escucha de eventos `mousemove` y el almacenamiento de la posición (x, y) del cursor, pero aún no es realmente reutilizable.
 
-For example, let's say we have a `<Cat>` component that renders the image of a cat chasing the mouse around the screen. We might use a `<Cat mouse={{ x, y }}>` prop to tell the component the coordinates of the mouse so it knows where to position the image on the screen.
+Por ejemplo, digamos que tenemos un componente `<Cat>` que representa la imagen de un gato persiguiendo el cursor alrededor de la pantalla. Podríamos usar una propiedad `<Cat mouse={{ x, y }}>` para indicar al componente las coordenadas del cursor de manera que sepa dónde colocar la imagen en la pantalla.
 
-As a first pass, you might try rendering the `<Cat>` *inside `<Mouse>`'s `render` method*, like this:
+Como primer paso, puedes intentar renderizar el componente `<Cat>` *dentro del metodo `render` del componente `<Mouse>`*, de esta manera:
 
 ```js
 class Cat extends React.Component {
@@ -130,10 +130,10 @@ class MouseWithCat extends React.Component {
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
         {/*
-          We could just swap out the <p> for a <Cat> here ... but then
-          we would need to create a separate <MouseWithSomethingElse>
-          component every time we need to use it, so <MouseWithCat>
-          isn't really reusable yet.
+          Podríamos simplemente cambiar el <p> por un <Cat> aquí ... pero luego
+          necesitaríamos crear un componente <MouseWithSomethingElse> separado
+          cada vez que necesitamos usarlo, por lo que <MouseWithCat>
+          No es realmente reutilizable todavía.
         */}
         <Cat mouse={this.state} />
       </div>
@@ -145,7 +145,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>¡Mueve el cursor alrededor!</h1>
         <MouseWithCat />
       </div>
     );
@@ -153,9 +153,9 @@ class MouseTracker extends React.Component {
 }
 ```
 
-This approach will work for our specific use case, but we haven't achieved the objective of truly encapsulating the behavior in a reusable way. Now, every time we want the mouse position for a different use case, we have to create a new component (i.e. essentially another `<MouseWithCat>`) that renders something specifically for that use case.
+Esta propuesta funcionará para nuestro caso de uso específico, pero no hemos logrado el objetivo de realmente encapsular el comportamiento de una manera reutilizable. Ahora, cada vez que deseemos la posición del cursor para un caso de uso diferente, debemos crear un nuevo componente (es decir, esencialmente otro `<MouseWithCat>`) que renderice algo específicamente para ese caso de uso.
 
-Here's where the render prop comes in: Instead of hard-coding a `<Cat>` inside a `<Mouse>` component, and effectively changing its rendered output, we can provide `<Mouse>` with a function prop that it uses to dynamically determine what to render–a render prop.
+Aquí es donde entran en juego las `render props`: En lugar de codificar de forma fija un componente `<Cat>` dentro del componente `<Mouse>`, y cambiar efectivamente la salida de su metodo render, podemos proporcionar una función por medio props a `<Mouse>` que pueda utilizar para determinar dinámicamente lo que debe renderizar -una `render prop`.
 
 ```js
 class Cat extends React.Component {
@@ -186,8 +186,8 @@ class Mouse extends React.Component {
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
         {/*
-          Instead of providing a static representation of what <Mouse> renders,
-          use the `render` prop to dynamically determine what to render.
+          En lugar de proporcionar una representación estática de lo que <Mouse> renderiza,
+          usa la `render prop` para determinar dinámicamente qué renderizar.
         */}
         {this.props.render(this.state)}
       </div>
@@ -199,7 +199,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>¡Mueve el cursor alrededor!</h1>
         <Mouse render={mouse => (
           <Cat mouse={mouse} />
         )}/>
@@ -209,17 +209,17 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Now, instead of effectively cloning the `<Mouse>` component and hard-coding something else in its `render` method to solve for a specific use case, we provide a `render` prop that `<Mouse>` can use to dynamically determine what it renders.
+Ahora, en lugar de clonar efectivamente el componente `<Mouse>` y codificar forma fija otra cosa en su método `render` para resolver un caso de uso específico, proporcionamos una `render prop` que `<Mouse>` pueda usar para dinámicamente determinar que renderizar.
 
-More concretely, **a render prop is a function prop that a component uses to know what to render.**
+Más concretamente, **una render prop es una prop que recibe una función que un componente utiliza para saber qué renderizar.**
 
-This technique makes the behavior that we need to share extremely portable. To get that behavior, render a `<Mouse>` with a `render` prop that tells it what to render with the current (x, y) of the cursor.
+Esta técnica hace que el comportamiento que necesitamos compartir sea extremadamente portátil. Para obtener ese comportamiento, genere un `<Mouse>` con una `render prop` que le diga qué renderizar con la posición (x, y) del cursor.
 
-One interesting thing to note about render props is that you can implement most [higher-order components](/docs/higher-order-components.html) (HOC) using a regular component with a render prop. For example, if you would prefer to have a `withMouse` HOC instead of a `<Mouse>` component, you could easily create one using a regular `<Mouse>` with a render prop:
+Una cosa interesante a tener en cuenta acerca de las `render props` es que puedes implementar la mayoría de los [componentes de orden superior](/docs/higher-order-components.html) (HOC) utilizando un componente regular con una `render prop`. Por ejemplo, si prefiere tener un `withMouse` HOC en lugar de un componente `<Mouse>`, puede crear fácilmente uno usando un `<Mouse>` regular con una `render prop`:
 
 ```js
-// If you really want a HOC for some reason, you can easily
-// create one using a regular component with a render prop!
+// Si realmente quieres un HOC por alguna razón, puedes fácilmente
+// crear uno usando un componente regular con una render prop!
 function withMouse(Component) {
   return class extends React.Component {
     render() {
@@ -233,33 +233,32 @@ function withMouse(Component) {
 }
 ```
 
-So using a render prop makes it possible to use either pattern.
+Por lo tanto, usar una `render prop` hace que sea posible usar cualquier patrón.
 
-## Using Props Other Than `render` {#using-props-other-than-render}
+## Usando otras Props diferentes de `render` {#using-props-other-than-render}
 
-It's important to remember that just because the pattern is called "render props" you don't *have to use a prop named `render` to use this pattern*. In fact, [*any* prop that is a function that a component uses to know what to render is technically a "render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce).
+Es importante recordar que solo porque el patrón se llama `render props` *no tienes que usar una prop llamada `render` para usar este patrón*. De hecho, [*cualquier* prop que es una función que un componente utiliza para saber qué renderizar es técnicamente una "render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) .
 
-Although the examples above use `render`, we could just as easily use the `children` prop!
+Aunque los ejemplos anteriores usan `render`, ¡podríamos usar la proposición `children` con la misma facilidad!
 
 ```js
 <Mouse children={mouse => (
-  <p>The mouse position is {mouse.x}, {mouse.y}</p>
+  <p>La posición actual del mouse es {mouse.x}, {mouse.y}</p>
 )}/>
 ```
-
-And remember, the `children` prop doesn't actually need to be named in the list of "attributes" in your JSX element. Instead, you can put it directly *inside* the element!
+Y recuerde, la propiedad `children` en realidad no necesita ser nombrada en la lista de "atributos" en su elemento JSX. En su lugar, puedes ponerlo directamente *dentro* del elemento!
 
 ```js
 <Mouse>
   {mouse => (
-    <p>The mouse position is {mouse.x}, {mouse.y}</p>
+    <p>La posición actual del mouse es {mouse.x}, {mouse.y}</p>
   )}
 </Mouse>
 ```
 
-You'll see this technique used in the [react-motion](https://github.com/chenglou/react-motion) API.
+Verá esta técnica utilizada en la API [react-motion] (https://github.com/chenglou/react-motion).
 
-Since this technique is a little unusual, you'll probably want to explicitly state that `children` should be a function in your `propTypes` when designing an API like this.
+Ya que esta técnica es un poco inusual, probablemente querrás decir explícitamente que `children` debería ser una función en tus `propTypes` cuando diseñes una API como esta.
 
 ```js
 Mouse.propTypes = {
@@ -267,28 +266,28 @@ Mouse.propTypes = {
 };
 ```
 
-## Caveats {#caveats}
+## Advertencias {#caveats}
 
-### Be careful when using Render Props with React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent}
+### Ten cuidado al usar Render Props con React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent}
 
-Using a render prop can negate the advantage that comes from using [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) if you create the function inside a `render` method. This is because the shallow prop comparison will always return `false` for new props, and each `render` in this case will generate a new value for the render prop.
+El uso de una `render prop` puede negar la ventaja del uso de [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) si crea la función dentro del método `render`. Esto se debe a que la comparación de propiedades poco profundas siempre devolverá `false` para las nuevas props, y cada `render` en este caso generará un nuevo valor para la render prop.
 
-For example, continuing with our `<Mouse>` component from above, if `Mouse` were to extend `React.PureComponent` instead of `React.Component`, our example would look like this:
+Por ejemplo, continuando con nuestro componente `<Mouse>` de los ejemplos anteriores, si `Mouse` extendiera `React.PureComponent` en lugar de `React.Component`, nuestro ejemplo se vería así:
 
 ```js
 class Mouse extends React.PureComponent {
-  // Same implementation as above...
+  // Misma implementación que la anterior...
 }
 
 class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>¡Mueve el cursor alrededor!</h1>
 
         {/*
-          This is bad! The value of the `render` prop will
-          be different on each render.
+          ¡Esto esta mal! El valor de la `render prop`
+          será diferente en cada render.
         */}
         <Mouse render={mouse => (
           <Cat mouse={mouse} />
@@ -299,14 +298,14 @@ class MouseTracker extends React.Component {
 }
 ```
 
-In this example, each time `<MouseTracker>` renders, it generates a new function as the value of the `<Mouse render>` prop, thus negating the effect of `<Mouse>` extending `React.PureComponent` in the first place!
+En este ejemplo, cada vez que se renderiza `<MouseTracker>`, genera una nueva función como el valor de la propiedad `<Mouse render>`, negando así el efecto de `<Mouse>` extendiendo `React.PureComponent` en primer ugar!
 
-To get around this problem, you can sometimes define the prop as an instance method, like so:
+Para solucionar este problema, a veces se puede definir la prop como un método de instancia, así:
 
 ```js
 class MouseTracker extends React.Component {
-  // Defined as an instance method, `this.renderTheCat` always
-  // refers to *same* function when we use it in render
+  // Definido como un método de instancia, `this.renderTheCat` siempre
+  // se refiere a la *misma* función cuando la usamos en render
   renderTheCat(mouse) {
     return <Cat mouse={mouse} />;
   }
@@ -314,7 +313,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>¡Mueve el cursor alrededor!</h1>
         <Mouse render={this.renderTheCat} />
       </div>
     );
@@ -322,4 +321,4 @@ class MouseTracker extends React.Component {
 }
 ```
 
-In cases where you cannot define the prop statically (e.g. because you need to close over the component's props and/or state) `<Mouse>` should extend `React.Component` instead.
+En los casos en los que no puede definir la propiedad de forma estática (por ejemplo, porque necesita encerrar las props y/o el estado del componente), el <Mouse> `debería extender` React.Component` en su lugar.

From d4c9a75bfafbfc8e4d3835ebcd9242c4a930125d Mon Sep 17 00:00:00 2001
From: Miguel Alejandro Bolivar Portilla <MBolivar360@gmail.com>
Date: Mon, 25 Feb 2019 13:13:41 -0600
Subject: [PATCH 02/14] Update content/docs/render-props.md

Co-Authored-By: jonathanpalma <tanpalma04@gmail.com>
---
 content/docs/render-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 90cd4e81f..f27032850 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -16,7 +16,7 @@ Un componente con una `render prop` toma una función que devuelve un elemento d
 
 Algunas bibliotecas que utilizan `render props` son [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) y [Downshift](https://github.com/paypal/downshift).
 
-En este documento, discutiremos por qué las `render props` son útiles y cómo escribir los suyos.
+En este documento, discutiremos por qué las `render props` son útiles y cómo escribir las tuyas.
 
 ## Use Render Props for Cross-Cutting Concerns
 

From d153dd3d092c4ebd87105fad024dc00abddece2e Mon Sep 17 00:00:00 2001
From: Miguel Alejandro Bolivar Portilla <MBolivar360@gmail.com>
Date: Mon, 25 Feb 2019 13:14:56 -0600
Subject: [PATCH 03/14] Update content/docs/render-props.md

Co-Authored-By: jonathanpalma <tanpalma04@gmail.com>
---
 content/docs/render-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index f27032850..ab325e9e1 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -133,7 +133,7 @@ class MouseWithCat extends React.Component {
           Podríamos simplemente cambiar el <p> por un <Cat> aquí ... pero luego
           necesitaríamos crear un componente <MouseWithSomethingElse> separado
           cada vez que necesitamos usarlo, por lo que <MouseWithCat>
-          No es realmente reutilizable todavía.
+          no es realmente reutilizable todavía.
         */}
         <Cat mouse={this.state} />
       </div>

From 80e1838e42596c177e249804a011c1608cc24e97 Mon Sep 17 00:00:00 2001
From: Miguel Alejandro Bolivar Portilla <MBolivar360@gmail.com>
Date: Mon, 25 Feb 2019 13:15:18 -0600
Subject: [PATCH 04/14] Update content/docs/render-props.md

Co-Authored-By: jonathanpalma <tanpalma04@gmail.com>
---
 content/docs/render-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index ab325e9e1..bf63c4701 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -270,7 +270,7 @@ Mouse.propTypes = {
 
 ### Ten cuidado al usar Render Props con React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent}
 
-El uso de una `render prop` puede negar la ventaja del uso de [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) si crea la función dentro del método `render`. Esto se debe a que la comparación de propiedades poco profundas siempre devolverá `false` para las nuevas props, y cada `render` en este caso generará un nuevo valor para la render prop.
+El uso de una `render prop` puede no aprovechar la ventaja del uso de [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) si crea la función dentro del método `render`. Esto se debe a que la comparación de propiedades poco profundas siempre devolverá `false` para las nuevas props, y cada `render` en este caso generará un nuevo valor para la render prop.
 
 Por ejemplo, continuando con nuestro componente `<Mouse>` de los ejemplos anteriores, si `Mouse` extendiera `React.PureComponent` en lugar de `React.Component`, nuestro ejemplo se vería así:
 

From 1dd25111950c343eb6519324847eb3e6ca1fd20e Mon Sep 17 00:00:00 2001
From: Miguel Alejandro Bolivar Portilla <MBolivar360@gmail.com>
Date: Mon, 25 Feb 2019 13:15:30 -0600
Subject: [PATCH 05/14] Update content/docs/render-props.md

Co-Authored-By: jonathanpalma <tanpalma04@gmail.com>
---
 content/docs/render-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index bf63c4701..656d3121c 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -18,7 +18,7 @@ Algunas bibliotecas que utilizan `render props` son [React Router](https://react
 
 En este documento, discutiremos por qué las `render props` son útiles y cómo escribir las tuyas.
 
-## Use Render Props for Cross-Cutting Concerns
+## Usa Render Props para preocupaciones transversales
 
 Los componentes son la unidad primaria de reutilización de código en React, pero no siempre es obvio cómo compartir el estado o el comportamiento que un componente encapsula en otros componentes que necesitan ese mismo estado.
 

From 68b731d465882dd00893f13bc14489601f9269d9 Mon Sep 17 00:00:00 2001
From: Miguel Alejandro Bolivar Portilla <MBolivar360@gmail.com>
Date: Mon, 25 Feb 2019 13:15:55 -0600
Subject: [PATCH 06/14] Update content/docs/render-props.md

Co-Authored-By: jonathanpalma <tanpalma04@gmail.com>
---
 content/docs/render-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 656d3121c..231000cea 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -256,7 +256,7 @@ Y recuerde, la propiedad `children` en realidad no necesita ser nombrada en la l
 </Mouse>
 ```
 
-Verá esta técnica utilizada en la API [react-motion] (https://github.com/chenglou/react-motion).
+Verás esta técnica utilizada en la API de [react-motion] (https://github.com/chenglou/react-motion).
 
 Ya que esta técnica es un poco inusual, probablemente querrás decir explícitamente que `children` debería ser una función en tus `propTypes` cuando diseñes una API como esta.
 

From 028e5286c6f95a71a91ce9edd8454f197ff38042 Mon Sep 17 00:00:00 2001
From: Miguel Alejandro Bolivar Portilla <MBolivar360@gmail.com>
Date: Mon, 25 Feb 2019 13:16:16 -0600
Subject: [PATCH 07/14] Update content/docs/render-props.md

Co-Authored-By: jonathanpalma <tanpalma04@gmail.com>
---
 content/docs/render-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 231000cea..d5e38238d 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -298,7 +298,7 @@ class MouseTracker extends React.Component {
 }
 ```
 
-En este ejemplo, cada vez que se renderiza `<MouseTracker>`, genera una nueva función como el valor de la propiedad `<Mouse render>`, negando así el efecto de `<Mouse>` extendiendo `React.PureComponent` en primer ugar!
+En este ejemplo, cada vez que se renderiza `<MouseTracker>`, genera una nueva función como el valor de la propiedad `<Mouse render>`, negando así el efecto de `<Mouse>` extendiendo `React.PureComponent` en primer lugar!
 
 Para solucionar este problema, a veces se puede definir la prop como un método de instancia, así:
 

From 97f5c9ebae3d1e726d718caa4353515077a29d3d Mon Sep 17 00:00:00 2001
From: Jonathan Palma <tanpalma04@gmail.com>
Date: Mon, 25 Feb 2019 14:38:44 -0600
Subject: [PATCH 08/14] Removed translations of code blocks

---
 content/docs/render-props.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index d5e38238d..a3786e26a 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -10,7 +10,7 @@ Un componente con una `render prop` toma una función que devuelve un elemento d
 
 ```jsx
 <DataProvider render={data => (
-  <h1>Hola {data.target}</h1>
+  <h1>Hello {data.target}</h1>
 )}/>
 ```
 
@@ -42,8 +42,8 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
-        <h1>¡Mueve el cursor alrededor!</h1>
-        <p>La posición actual del mouse es ({this.state.x}, {this.state.y})</p>
+        <h1>Move the mouse around!</h1>
+        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
       </div>
     );
   }
@@ -77,7 +77,7 @@ class Mouse extends React.Component {
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
         {/* ...pero, ¿cómo rederizamos algo más que un <p>? */}
-        <p>La posición actual del mouse es ({this.state.x}, {this.state.y})</p>
+        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
       </div>
     );
   }
@@ -87,7 +87,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>¡Mueve el cursor alrededor!</h1>
+        <h1>Move the mouse around!</h1>
         <Mouse />
       </div>
     );
@@ -145,7 +145,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>¡Mueve el cursor alrededor!</h1>
+        <h1>Move the mouse around!</h1>
         <MouseWithCat />
       </div>
     );
@@ -199,7 +199,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>¡Mueve el cursor alrededor!</h1>
+        <h1>Move the mouse around!</h1>
         <Mouse render={mouse => (
           <Cat mouse={mouse} />
         )}/>
@@ -243,7 +243,7 @@ Aunque los ejemplos anteriores usan `render`, ¡podríamos usar la proposición
 
 ```js
 <Mouse children={mouse => (
-  <p>La posición actual del mouse es {mouse.x}, {mouse.y}</p>
+  <p>The mouse position is {mouse.x}, {mouse.y}</p>
 )}/>
 ```
 Y recuerde, la propiedad `children` en realidad no necesita ser nombrada en la lista de "atributos" en su elemento JSX. En su lugar, puedes ponerlo directamente *dentro* del elemento!
@@ -251,7 +251,7 @@ Y recuerde, la propiedad `children` en realidad no necesita ser nombrada en la l
 ```js
 <Mouse>
   {mouse => (
-    <p>La posición actual del mouse es {mouse.x}, {mouse.y}</p>
+    <p>The mouse position is {mouse.x}, {mouse.y}</p>
   )}
 </Mouse>
 ```
@@ -283,7 +283,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>¡Mueve el cursor alrededor!</h1>
+        <h1>Move the mouse around!</h1>
 
         {/*
           ¡Esto esta mal! El valor de la `render prop`
@@ -313,7 +313,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>¡Mueve el cursor alrededor!</h1>
+        <h1>Move the mouse around!</h1>
         <Mouse render={this.renderTheCat} />
       </div>
     );

From cbfd7b782822adc83377c956b7f39bba2bfd2cdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20=C3=91=C3=A1=C3=B1ez=20Ortiz?=
 <alejonanez@gmail.com>
Date: Wed, 27 Feb 2019 00:28:11 -0600
Subject: [PATCH 09/14] Update content/docs/render-props.md

Co-Authored-By: jonathanpalma <tanpalma04@gmail.com>
---
 content/docs/render-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index a3786e26a..6219e6b36 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -246,7 +246,7 @@ Aunque los ejemplos anteriores usan `render`, ¡podríamos usar la proposición
   <p>The mouse position is {mouse.x}, {mouse.y}</p>
 )}/>
 ```
-Y recuerde, la propiedad `children` en realidad no necesita ser nombrada en la lista de "atributos" en su elemento JSX. En su lugar, puedes ponerlo directamente *dentro* del elemento!
+Y recuerda, la propiedad `children` en realidad no necesita ser nombrada en la lista de "atributos" en su elemento JSX. En su lugar, puedes ponerlo directamente *dentro* del elemento!
 
 ```js
 <Mouse>

From 4b651279591546d432871f24009e1f3ceabb3ece Mon Sep 17 00:00:00 2001
From: Jonathan Palma <tanpalma04@gmail.com>
Date: Wed, 27 Feb 2019 00:32:39 -0600
Subject: [PATCH 10/14] Fixed typos at render-props translation

---
 content/docs/render-props.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index a3786e26a..6c62b74cb 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -52,7 +52,7 @@ class MouseTracker extends React.Component {
 
 A medida que el cursor se mueve alrededor de la pantalla, el componente muestra sus coordenadas (x, y) en un `<p>`.
 
-Ahora la pregunta es: ¿Cómo podemos reutilizar este comportamiento en otro componente? En otras palabras, si otro componente necesita saber sobre la posición del cursor, ¿podemos encapsular ese comportamiento para poder compartirlo fácilmente con ese componente?
+Ahora la pregunta es: ¿Cómo podemos reutilizar este comportamiento en otro componente? En otras palabras, si otro componente necesita saber la posición del cursor, ¿podemos encapsular ese comportamiento para poder compartirlo fácilmente con ese componente?
 
 Como los componentes son la unidad básica de reutilización de código en React, intentemos refactorizar el código un poco para usar un componente `<Mouse>` que encapsule el comportamiento que necesitamos reutilizar en otro lugar.
 
@@ -76,7 +76,7 @@ class Mouse extends React.Component {
     return (
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
-        {/* ...pero, ¿cómo rederizamos algo más que un <p>? */}
+        {/* ...pero, ¿cómo renderizamos algo más que un <p>? */}
         <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
       </div>
     );
@@ -99,7 +99,7 @@ Ahora, el componente `<Mouse>` encapsula todo el comportamiento asociado con la
 
 Por ejemplo, digamos que tenemos un componente `<Cat>` que representa la imagen de un gato persiguiendo el cursor alrededor de la pantalla. Podríamos usar una propiedad `<Cat mouse={{ x, y }}>` para indicar al componente las coordenadas del cursor de manera que sepa dónde colocar la imagen en la pantalla.
 
-Como primer paso, puedes intentar renderizar el componente `<Cat>` *dentro del metodo `render` del componente `<Mouse>`*, de esta manera:
+Como primer paso, puedes intentar renderizar el componente `<Cat>` *dentro del método `render` del componente `<Mouse>`*, de esta manera:
 
 ```js
 class Cat extends React.Component {
@@ -153,9 +153,9 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Esta propuesta funcionará para nuestro caso de uso específico, pero no hemos logrado el objetivo de realmente encapsular el comportamiento de una manera reutilizable. Ahora, cada vez que deseemos la posición del cursor para un caso de uso diferente, debemos crear un nuevo componente (es decir, esencialmente otro `<MouseWithCat>`) que renderice algo específicamente para ese caso de uso.
+Esta propuesta funcionará para nuestro caso de uso específico, pero no hemos logrado el objetivo de realmente encapsular el comportamiento de una manera reutilizable. Ahora, cada vez que queramos saber la posición del cursor para un caso de uso diferente, debemos crear un nuevo componente (es decir, esencialmente otro `<MouseWithCat>`) que renderice algo específicamente para ese caso de uso.
 
-Aquí es donde entran en juego las `render props`: En lugar de codificar de forma fija un componente `<Cat>` dentro del componente `<Mouse>`, y cambiar efectivamente la salida de su metodo render, podemos proporcionar una función por medio props a `<Mouse>` que pueda utilizar para determinar dinámicamente lo que debe renderizar -una `render prop`.
+Aquí es donde entran en juego las `render props`: En lugar de codificar de forma fija un componente `<Cat>` dentro del componente `<Mouse>`, y cambiar efectivamente la salida de su método render, podemos proporcionar una función por medio props a `<Mouse>` que pueda utilizar para determinar dinámicamente lo que debe renderizar -una `render prop`.
 
 ```js
 class Cat extends React.Component {
@@ -209,7 +209,7 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Ahora, en lugar de clonar efectivamente el componente `<Mouse>` y codificar forma fija otra cosa en su método `render` para resolver un caso de uso específico, proporcionamos una `render prop` que `<Mouse>` pueda usar para dinámicamente determinar que renderizar.
+Ahora, en lugar de clonar efectivamente el componente `<Mouse>` y codificar de forma fija otra cosa en su método `render` para resolver un caso de uso específico, proporcionamos una `render prop` que `<Mouse>` pueda usar para dinámicamente determinar que renderizar.
 
 Más concretamente, **una render prop es una prop que recibe una función que un componente utiliza para saber qué renderizar.**
 

From d5ebfe76adc5ebffb2b4cbad27a12febbce49067 Mon Sep 17 00:00:00 2001
From: Miguel Alejandro Bolivar Portilla <MBolivar360@gmail.com>
Date: Wed, 27 Feb 2019 09:57:57 -0400
Subject: [PATCH 11/14] Update render-props.md

---
 content/docs/render-props.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 6773a616f..bda0a1018 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -4,7 +4,7 @@ title: Render Props
 permalink: docs/render-props.html
 ---
 
-El término ["render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) se refiere a una técnica para compartir codigo entre componentes en React utilizando una propiedad cuyo valor es una función.
+El término ["render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) se refiere a una técnica para compartir código entre componentes en React utilizando una propiedad cuyo valor es una función.
 
 Un componente con una `render prop` toma una función que devuelve un elemento de React y lo llama en lugar de implementar su propia lógica de representación.
 
@@ -246,6 +246,7 @@ Aunque los ejemplos anteriores usan `render`, ¡podríamos usar la proposición
   <p>The mouse position is {mouse.x}, {mouse.y}</p>
 )}/>
 ```
+
 Y recuerda, la propiedad `children` en realidad no necesita ser nombrada en la lista de "atributos" en su elemento JSX. En su lugar, puedes ponerlo directamente *dentro* del elemento!
 
 ```js
@@ -286,7 +287,7 @@ class MouseTracker extends React.Component {
         <h1>Move the mouse around!</h1>
 
         {/*
-          ¡Esto esta mal! El valor de la `render prop`
+          ¡Esto está mal! El valor de la `render prop`
           será diferente en cada render.
         */}
         <Mouse render={mouse => (

From 1ede1790be4f62aa2b50f9faa2bbf4e64ff6310c Mon Sep 17 00:00:00 2001
From: Miguel Alejandro Bolivar Portilla <MBolivar360@gmail.com>
Date: Wed, 27 Feb 2019 09:59:34 -0400
Subject: [PATCH 12/14] Update render-props.md

---
 content/docs/render-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index bda0a1018..28e069273 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -257,7 +257,7 @@ Y recuerda, la propiedad `children` en realidad no necesita ser nombrada en la l
 </Mouse>
 ```
 
-Verás esta técnica utilizada en la API de [react-motion] (https://github.com/chenglou/react-motion).
+Verás esta técnica utilizada en la API de [react-motion](https://github.com/chenglou/react-motion).
 
 Ya que esta técnica es un poco inusual, probablemente querrás decir explícitamente que `children` debería ser una función en tus `propTypes` cuando diseñes una API como esta.
 

From 6a981e6125b00e654038369bba8a8e9058e89b56 Mon Sep 17 00:00:00 2001
From: Miguel Alejandro Bolivar Portilla <MBolivar360@gmail.com>
Date: Wed, 27 Feb 2019 10:02:04 -0400
Subject: [PATCH 13/14] Update render-props.md

---
 content/docs/render-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 28e069273..fbdc5188c 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -322,4 +322,4 @@ class MouseTracker extends React.Component {
 }
 ```
 
-En los casos en los que no puede definir la propiedad de forma estática (por ejemplo, porque necesita encerrar las props y/o el estado del componente), el <Mouse> `debería extender` React.Component` en su lugar.
+En los casos en los que no puede definir la propiedad de forma estática (por ejemplo, porque necesita encerrar las props y/o el estado del componente), el <Mouse> debería extender `React.Component` en su lugar.

From 5ba9be05c6e1ba63724b09248ce210417cf7b387 Mon Sep 17 00:00:00 2001
From: Miguel Alejandro Bolivar Portilla <MBolivar360@gmail.com>
Date: Wed, 27 Feb 2019 10:04:02 -0400
Subject: [PATCH 14/14] Update render-props.md

---
 content/docs/render-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index fbdc5188c..e4fbbf638 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -322,4 +322,4 @@ class MouseTracker extends React.Component {
 }
 ```
 
-En los casos en los que no puede definir la propiedad de forma estática (por ejemplo, porque necesita encerrar las props y/o el estado del componente), el <Mouse> debería extender `React.Component` en su lugar.
+En los casos en los que no puede definir la propiedad de forma estática (por ejemplo, porque necesita encerrar las props y/o el estado del componente), el `<Mouse>` debería extender `React.Component` en su lugar.