Merge pull request 4GeeksAcademy#86 from Lorenagubaira/reactex.03.2-6

03.2-06 README´s were changed

Author: tommygonzaleza

exercises/03.2-a-real-component/README.es.md

@@ -1,6 +1,6 @@
-# `03.2` Un componente real
+# `03.2`  A real component
 
-En el ejericio anterior hemos creado nuestro primer componente llamado **PrintHello** y hemos aprendido que podemos usar el componente como una etiqueta HTML.
+En el ejericio anterior hemos creado nuestro primer componente llamado **PrintHello**, y hemos aprendido que podemos usar el componente como una etiqueta HTML.
 
 ```jsx
 <PrintHello />
@@ -18,13 +18,12 @@ Ahora, vamos a crear un nuevo componente (función) llamado **`<BootstrapCard />
  </div>
 </div>
 ```
-🔎
- Este código HTML está basado en la [Bootstrap Card](https://getbootstrap.com/docs/4.0/components/card/).
+ Nota: Este código HTML está basado en la [Bootstrap Card](https://getbootstrap.com/docs/4.0/components/card/).
 
 ## 📝 Instrucciones:
 
 1. Por favor, crea una función llamada `BootstrapCard` que devuelva el código de la card y usa la función `ReactDOM.render` para añadir `<BootstrapCard />` dentro del sitio web, dentro de `#myDiv`.
 
 ## 💡 Pista:
 
-* Si no sabes o no recuerdas cómo usar `ReactDOM.render`, puedes revisar los ejercicios anteriores.
++  Si no sabes o no recuerdas cómo usar `ReactDOM.render`, puedes revisar los ejercicios anteriores.

exercises/03.2-a-real-component/README.md

@@ -4,7 +4,7 @@ tutorial: "https://www.youtube.com/watch?v=MGqH3dOhxL4"
 
 # `03.2` A real component
 
-In the past exercise we created our first component called **`PrintHello`** and we learn that we can use the component like an HTML tag.
+In the past exercise we created our first component called **`PrintHello`**, and we have learned that we can use the component like an HTML tag.
 
 ```jsx
 <PrintHello />
@@ -23,12 +23,12 @@ Now let's create another component (function) called **`<BootstrapCard />`** tha
 </div>
 ```
 
-> 🔎 This HTML code its based on the [Bootstrap Card](https://getbootstrap.com/docs/4.0/components/card/).
+ Note: This HTML code its based on the [Bootstrap Card](https://getbootstrap.com/docs/4.0/components/card/).
 
-## 📝 Instructions
+## 📝 Instructions:
 
 1. Please create a function called `BootstrapCard` that returns the card code and use the `ReactDOM.render` function `<BootstrapCard />` to add it into the website inside `#myDiv`.
 
 ## 💡 Hint:
 
-* if you don't know or remember how to use `ReactDOM.render` you can review the past exercises.
++ If you don't know or remember how to use `ReactDOM.render` you can review the past exercises.

exercises/03.3-component-properties/README.es.md

@@ -1,8 +1,8 @@
-# `03.3` Propiedades de un componente
+# `03.3` Component Properties
 
-La BootstrapCard que acabas de hacer está [hard coded](https://es.quora.com/Qu%C3%A9-significa-en-computacion-hard-coded) para **Bob Dylan** únicamente.
+La `BootstrapCard` que acabas de hacer está [hard coded](https://es.quora.com/Qu%C3%A9-significa-en-computacion-hard-coded) para **Bob Dylan** únicamente.
 
-Pero, ¿qué pasa si queremos reutilizar el componente `<BootstrapCard />` para **Paul Mccartney** o cualquier otra persona? ¿Cómo podriamos hacer? ¡Usar propiedades!
+Pero, ¿qué pasa si queremos reutilizar el componente `<BootstrapCard />` para **Paul Mccartney** o cualquier otra persona? ¿Cómo podriamos hacer? ¡Usa propiedades!
 
 ## Usando propiedades en HTML
 
@@ -15,11 +15,11 @@ Cuando usas la etiqueta **anchor** (`<a>`) tienes que especificar la propiedad *
 <a href="http://twitter.com">Take me to twitter</a>
 ```
 
-🔎 Aquí estoy reutilizando la etiqueta de enlace(<a>) en dos enlaces diferentes
+Nota: Aquí estoy reutilizando la etiqueta de enlace (`<a>`) en dos enlaces diferentes
 
 > Usando propiedades en React.js
 
-> En React.js también podemos crear nuestras propias etiquetas y usar nuestras propias propiedades inventadas. Por ejemplo, podríamos especificar la propiedad `title` de nuestra `<BootstrapCard />` de esta forma:
+ En React.js también podemos crear nuestras propias etiquetas y usar nuestras propias propiedades inventadas. Por ejemplo, podríamos especificar la propiedad `title` de nuestra `<BootstrapCard />` de esta forma:
 
 ```jsx
  //para Paul Mccartney
@@ -41,7 +41,9 @@ const BootstrapCard = (props) => {
 }
 ```
 
-Para trabajar con propiedades de componentes, tienes que especificar qué propiedades recibirá el componente (nombre y tipo de dato de cada propiedad), [puedes leer más sobre las prop-types aquí](https://reactjs.org/docs/typechecking-with-proptypes.html). e.g:
+Para trabajar con propiedades de componentes, tienes que especificar qué propiedades recibirá el componente (nombre y tipo de dato de cada propiedad), [puedes leer más sobre las prop-types aquí](https://reactjs.org/docs/typechecking-with-proptypes.html). 
+
+Por ejemplo:
 
 ```js
 // aquí estamos especificando que este componente recibirá la propiedad "title" y será un string.
@@ -54,14 +56,14 @@ BootstrapCard.propTypes = {
 
 1. Por favor, agrega/usa las propiedades `imageUrl`, `description`, `buttonUrl` y `buttonLabel` dentro de la función `BootstrapCard` y también en la etiqueta `<BootstrapCard />` (Con la información de Bob Dylan que trae por defecto). Hazlo de la misma manera en que `title` ha sido incluida en ambas.
 
-## 💡 Pista:
+## 💡 Pistas:
 
-* Tienes que editar 3 partes del archivo (verifica los comentarios para ayudarte).
++ Tienes que editar 3 partes del archivo (verifica los comentarios para ayudarte).
 
-* El primer paso es reemplazar las cosas escritas directamente por las propiedades del componente.
++ El primer paso es reemplazar las cosas escritas directamente por las propiedades del componente.
 
-* El segundo paso es definir esas propiedades en el objeto prop-types en la línea 23, [aquí un video de cómo hacerlo](https://www.youtube.com/watch?v=oty7VGcXK44).
++ El segundo paso es definir esas propiedades en el objeto prop-types en la línea 23, [aquí un video de cómo hacerlo](https://www.youtube.com/watch?v=oty7VGcXK44).
 
-* El tercer paso será usar ReactDOM para añadir la declaración de la etiqueta `<BootstrapCard>` incluyendo las 5 propiedades y sus respectivos valores.
++ El tercer paso será usar ReactDOM para añadir la declaración de la etiqueta `<BootstrapCard>` incluyendo las 5 propiedades y sus respectivos valores.
 
-* No tienes que renderizar el componente muchas veces, solo una.
++ No tienes que renderizar el componente muchas veces, solo una.

exercises/03.3-component-properties/README.md

@@ -10,7 +10,7 @@ But, what if we also want to re-use the same `<BootstrapCard />` component for *
 
 ## Using properties in HTML
 
-When you are coding HTML you are constantly using the `<tag>` properties to modify the tag behavior, e.g.:
+When you are coding HTML you are constantly using the `<tag>` properties to modify the tag behavior, for example: 
 
 When you use the **anchor** tag (`<a>`) you have to specify the **href** property like this:
 
@@ -19,11 +19,11 @@ When you use the **anchor** tag (`<a>`) you have to specify the **href** propert
 <a href="http://twitter.com">Take me to twitter</a>
 ```
 
-:mag_right: Here I'm re-using the anchor tag for two different links
+Note: Here I'm re-using the anchor tag (`<a>`) for two different links
 
 > Using properties in React.js
 
-> In React.js we also can create our own tags and use our own invented properties, for example we could specify the `title` property of our `<BootstrapCard />` like this:
+In React.js we also can create our own tags and use our own invented properties, for example we could specify the `title` property of our `<BootstrapCard />`, like this:
 
 ```jsx
  //for Paul Mccartney
@@ -45,7 +45,9 @@ const BootstrapCard = (props) => {
 }
 ```
 
-To be able to work with component properties, you have to specify what properties the component will receive (the name and data-type of each property), [here you can read more about prop-types](https://reactjs.org/docs/typechecking-with-proptypes.html). E.g:
+To be able to work with component properties, you have to specify what properties the component will receive (the name and data-type of each property), [here you can read more about prop-types](https://reactjs.org/docs/typechecking-with-proptypes.html).
+
+For example: 
 
 ```jsx
 // here we are specifying that this component will receive the property "title" and it will be a string.
@@ -58,14 +60,14 @@ BootstrapCard.propTypes = {
 
 1. Please add/use the `imageUrl`, `description`, `buttonUrl` and `buttonLabel` properties inside the `BootstrapCard` function and also on the `<BootstrapCard />` tag (With Bob Dylan's information that has by default). Do it the same way `title` was already included in both.
 
-## 💡 Hint:
+## 💡 Hints:
 
-* You have to edit 3 parts of the file (check the comments for help).
++ You have to edit 3 parts of the file (check the comments for help).
 
-* The first step will be to replace the hardcoded stuff with properties inside the component.
++ The first step will be to replace the hardcoded stuff with properties inside the component.
 
-* The second step will be to define those properties in the prop-types object on line 23, [here is a video on how to do it](https://www.youtube.com/watch?v=oty7VGcXK44).
++ The second step will be to define those properties in the prop-types object on line 23, [here is a video on how to do it](https://www.youtube.com/watch?v=oty7VGcXK44).
 
-* The third step will be to use ReactDOM to add the `<BootstrapCard>` tag declaration including the 5 properties and their respective values.
++ The third step will be to use ReactDOM to add the `<BootstrapCard>` tag declaration including the 5 properties and their respective values.
 
-* You don't have to render the component two times, just once.
++ You don't have to render the component two times, just once.

exercises/03.4-jumbotron/README.es.md

@@ -1,8 +1,8 @@
 # `03.4` Jumbotron
 
-## 📝 Instrucciones:
+Usando todo lo que has aprendido...
 
-Usando todo lo que has aprendido:
+## 📝 Instrucciones:
 
 1. Construye un componente `Jumbotron` que reciba las siguientes propiedades:
 
@@ -15,7 +15,15 @@ Usando todo lo que has aprendido:
 />
 ```
 
-Tu componente debería generar un HTML similar a este:
+##  Resultado Esperado:
+ 
+ ![Jumbotron](../../.learn/assets/03.4-1.png?raw=true)
+
+## 💡 Pistas:
+
++ Recuerda usar los prop-types para validar las propiedades de tu componente.
+
++ Tu componente debería generar un HTML similar a este:
 
 ```html
 <div class="jumbotron m-5">
@@ -24,11 +32,3 @@ Tu componente debería generar un HTML similar a este:
  <a class="btn btn-primary btn-lg" href="https://reactjs.org/" role="button">Go to the official website</a>
 </div>
 ```
-
-## 💡 Pista:
-
-* Recuerda usar los prop-types para validar las propiedades de tu componente.
-
-## Resultado Esperado:
-
-![Jumbotron](../../.learn/assets/03.4-1.png?raw=true)

exercises/03.4-jumbotron/README.md

@@ -4,9 +4,11 @@ tutorial: "https://www.youtube.com/watch?v=zv6HPveyz6g"
 
 # `03.4` Jumbotron
 
+Using everything you have learned so far... 
+
 ## 📝 Instructions:
 
-1. Using everything you've learned, build a `Jumbotron` component that receives the following properties:
+1. Build a `Jumbotron` component that receives the following properties:
 
 ```jsx
 <Jumbotron
@@ -16,19 +18,21 @@ tutorial: "https://www.youtube.com/watch?v=zv6HPveyz6g"
  buttonURL="https://reactjs.org/"
 />
 ```
-Your HTML's component should be something like this:
+
+ ## Expected result:
+ 
+ ![Jumbotron](../../.learn/assets/03.4-1.png?raw=true)
+
+## 💡 Hints:
+
++ Remember to use prop-types to validate your component properties.
+
++ Your HTML's component should be something like this:
 
 ```html
 <div class="jumbotron m-5">
  <h1 class="display-4">Welcome to react</h1>
  <p class="lead">React is the most popular rendering library in the world</p>
  <a class="btn btn-primary btn-lg" href="https://reactjs.org/" role="button">Go to the official website</a>
 </div>
-```
-## 💡 Hint:
-
-* Remember to use prop-types to validate your component properties.
-
-## Expected result:
-
-![Jumbotron](../../.learn/assets/03.4-1.png?raw=true)
+```

exercises/03.5-alert-component/README.es.md

@@ -1,25 +1,25 @@
-# `03.5` Componente Alert
-
-## 📝 Instrucciones:
+# `03.5` Alert Component
 
 Basándote en el conocimiento que ahora tienes:
 
-1. Por favor, crea un componente `<Alert />` que reciba 1 prop `text: Proptype.string` y renderice una [bootstrap alert](https://getbootstrap.com/docs/4.0/components/alerts/#examples) como la siguiente:
-
-## 💡 Pista:
-
-Así es como deberías usar el componente:
+## 📝 Instrucciones:
 
-```jsx
-<Alert text="OMG! Something really bad has happended!" />
-```
+1. Por favor, crea un componente `<Alert />` que reciba 1 prop `text: Proptype.string` y renderice una [bootstrap alert](https://getbootstrap.com/docs/4.0/components/alerts/#examples) como la siguiente:
 
-### Resultado esperado:
+## Resultado esperado:
 
 Esto es lo que el componente debería generar en el HTML:
 
 ```html
 <div class="alert alert-danger" role="alert">
  OMG! Something really bad has happended!
 </div>
-```
+```
+
+## 💡 Pista:
+
++ Así es como deberías usar el componente:
+
+```jsx
+<Alert text="OMG! Something really bad has happended!" />
+```

exercises/03.5-alert-component/README.md

@@ -4,19 +4,11 @@ tutorial: "https://www.youtube.com/watch?v=80_k11tqhrE"
 
 # `03.5` Alert Component
 
-## 📝 Instructions:
-
 Based on the knowledge that you now have:
 
-1. Please create an `<Alert />` component that receives 1 prop `text: Proptype.string` and renders a [bootstrap alert](https://getbootstrap.com/docs/4.0/components/alerts/#examples) like the following:
-
-## 💡 Hint:
-
-This is how the component will be used:
+## 📝 Instructions:
 
-```jsx
-<Alert text="OMG! Something really bad has happended!" />
-```
+1. Please create an `<Alert />` component that receives 1 prop `text: Proptype.string` and renders a [bootstrap alert](https://getbootstrap.com/docs/4.0/components/alerts/#examples) like the following:
 
 ## Expected Result:
 
@@ -26,4 +18,11 @@ This is What the component should output as HTML:
 <div class="alert alert-danger" role="alert">
  OMG! Something really bad has happended!
 </div>
-```
+```
+## 💡 Hint:
+
++ This is how the component should be used:
+
+```jsx
+<Alert text="OMG! Something really bad has happended!" />
+```

exercises/04-conditional-rendering/README.es.md

@@ -1,6 +1,6 @@
-# `04` Renderizado condicional
+# `04` Conditional Rendering
 
-También puedes usar las propiedades de un componente para cambiar su comportamiento, como mostrar u ocultar `<Alert />` según una propiedad llamada `show`.
+También puedes usar las propiedades de un componente para cambiar su comportamiento y como mostrar u ocultar `<Alert />`, según una propiedad llamada `show`.
 
 ```jsx
 {/* Esto hará que tu alerta se muestre */}
@@ -23,13 +23,16 @@ const Alert = (props) => {
 };
 ```
 
-☝️ Devolver distinto código HTML según ciertas condiciones es llamado formalmente [renderizado condicional](https://joshblog.net/2018/conditional-rendering-with-react-and-jsx/).
+Nota: ☝️ Devolver distinto código HTML según ciertas condiciones es llamado formalmente [renderizado condicional](https://joshblog.net/2018/conditional-rendering-with-react-and-jsx/).
 
-## 📝 Instrucciones
+## 📝 Instrucciones:
 
 1. Crea un componente `<Alert />` que renderice una [bootstrap alert](https://getbootstrap.com/docs/4.0/components/alerts/#examples).
 
+## 💡 Pista:
+
 El componente debe ser capaz de recibir las siguientes dos propiedades:
 
-- show (bool): True or false.
-- text (string): El mensaje a incluir dentro del mensaje del `<Alert />`.
++ Show (bool): veradero o falso.
+
++ Text (string): El mensaje a incluir dentro del mensaje del `<Alert />`.

exercises/04-conditional-rendering/README.md

@@ -27,14 +27,16 @@ const Alert = (props) => {
 };
 ```
 
-☝️ Returning different HTML code based on conditions its formally called [conditional rendering](https://joshblog.net/2018/conditional-rendering-with-react-and-jsx/).
+Note: ☝️ Returning different HTML code based on conditions its formally called [conditional rendering](https://joshblog.net/2018/conditional-rendering-with-react-and-jsx/).
 
 ## 📝 Instructions:
 
 1. Create an `<Alert />` component that renders a [bootstrap alert](https://getbootstrap.com/docs/4.0/components/alerts/#examples).
 
+## 💡 Hint: 
+
 The component must be able to receive the following 2 properties:
 
-- show (bool): True or false.
++ Show (bool): True or false.
 
-- text (string): The message to include inside the alert message
++ Text (string): The message to include inside the alert message.