Merge pull request #114 from josemoracard/jose3-03-render-with-functions

exercises 03-render-with-functions to 06-listening-to-events

Author: alesanchezr

exercises/03-render-with-functions/README.es.md

@@ -1,4 +1,4 @@
-# `03`  Render with Functions
+# `03` Render with Functions
 
 JSX permite usar funciones para renderizar HTML, ¡y eso es fantástico!
 
@@ -11,7 +11,7 @@ Por ejemplo:
 const PrintHello = () => {
     return <h1>Hello World</h1>;
 }
-               //qué           //dónde
+                  //qué       //dónde
 ReactDOM.render(PrintHello(), myDiv);
 ```
 
@@ -21,4 +21,4 @@ ReactDOM.render(PrintHello(), myDiv);
 
 ## 💡 Pista:
 
-+  La función `PrintHello` comienza con una letra en mayúscula porque la vamos a convertir en un [Componente React](https://reactjs.org/docs/react-component.html) en el próximo ejercicio.
++  La función `PrintHello` comienza con una letra en mayúscula porque la vamos a convertir en un Componente React en el próximo ejercicio.

exercises/03-render-with-functions/README.md

@@ -6,7 +6,7 @@ tutorial: "https://www.youtube.com/watch?v=EdpPIo_JNVc"
 
 JSX allows using functions to render HTML, and that is awesome!
 
-It is a strongly recommended practice because, it lets you create templates and re-use your code
+It is a strongly recommended practice because it lets you create templates and re-use your code.
 
 For example:
 
@@ -15,7 +15,7 @@ For example:
 const PrintHello = () => {
     return <h1>Hello World</h1>;
 }
-               //what           //where
+                 //what       //where
 ReactDOM.render(PrintHello(), myDiv);
 ```
 
@@ -25,4 +25,4 @@ ReactDOM.render(PrintHello(), myDiv);
 
 ## 💡 Hint:
 
-+ The function `PrintHello` starts with a capital letter because we are going to convert it into a [React Component](https://reactjs.org/docs/react-component.html) in the next exercise.
++ The function `PrintHello` starts with a capital letter because we are going to convert it into a React Component in the next exercise.

exercises/03-render-with-functions/app.jsx

@@ -1,6 +1,6 @@
-import React from "react"; //Main React.js library
+import React from "react"; // Main React.js library
 
-import ReactDOM from "react-dom"; //we use ReactDOM to render into the DOM
+import ReactDOM from "react-dom"; // We use ReactDOM to render into the DOM
 
 // This function returns a string that will be rendered
 export const PrintHello = () => {

exercises/03-render-with-functions/solution.hide.jsx

@@ -0,0 +1,11 @@
+import React from "react"; // Main React.js library
+
+import ReactDOM from "react-dom"; // We use ReactDOM to render into the DOM
+
+// This function returns a string that will be rendered
+export const PrintHello = () => {
+	return <h1>I Love React</h1>;
+};
+
+//              what           where
+ReactDOM.render(PrintHello(), document.querySelector("#myDiv"));

exercises/03.1-your-first-component/README.es.md

@@ -1,26 +1,26 @@
 # `03.1` Your first functional component
 
-Cuando creas funciones que devuelven HTML, JSX te dejará tratarlos como **Componentes**. Básicamente ellos se convertirán tus propias etiquetas HTML.
+Cuando creas funciones que devuelven HTML, JSX te dejará tratarlos como **Componentes**. Básicamente, se convertirán en tus propias etiquetas HTML personalizables.
 
 > Creando nuestro primer componente funcional
 
 > Una de las cosas que podemos hacer gracias a JSX es llamar funciones com si fueran etiquetas HTML, por ejemplo:
 
 ```js
-// si declaramos una función llamada `MyFunction`
+// Si declaramos una función llamada `MyFunction`
 const MyFunction = () => {
     return <h1>I Love React</h1>;
 }
 
-// podemos llamar la función como una etiqueta HTML así 
+// Podemos llamar la función como una etiqueta HTML así 
 <MyFunction />
 
-// en vez de hacerlo de la típica forma usando llaves
+// En vez de hacerlo de la típica forma usando paréntesis
 MyFunction();
 ```
 
 Cuando llamas a una función así, se convierte en un **Componente de React**, que es una función que genera (devuelve) HTML dinámicamente. Lo que sea que devuelva la función será reemplazado en el mismo lugar que el lugar original del `<MyFunction />`.
 
 ## 📝 Instrucciones:
 
-1. En la 9º línea de `app.jsx`, cambia la forma en la que se llama a la función, llama a la función como un **componente React** usando `<` y `>` como una etiqueta HTML (en lugar de paréntesis).
+1. En la 9ª línea de `app.jsx`, cambia la forma en la que se llama a la función, llama a la función como un **componente React** usando `<` y `>` como una etiqueta HTML (en lugar de paréntesis).

exercises/03.1-your-first-component/README.md

@@ -11,15 +11,15 @@ When you create functions that return HTML, JSX will let you treat them as **Com
 > One of the things we can do thanks to JSX is calling functions like they are an HTML tag, for example:
 
 ```js
-// if we declare a function called MyFunction
+// If we declare a function called MyFunction
 const MyFunction = () => {
     return <h1>I Love React</h1>;
 }
 
-// we can call the function as an HTML tag like this:
+// We can call the function as an HTML tag like this:
 <MyFunction />
 
-// instead of the typical way of using round brackets
+// Instead of the typical way of using round brackets
 MyFunction();
 ```
 

exercises/03.1-your-first-component/app.jsx

@@ -5,5 +5,5 @@ export const PrintHello = () => {
 	return <h1>I Love React</h1>;
 };
 
-// change the syntax of the first parameter to make it <PrintHello /> instead of PrintHello()
+// Change the syntax of the first parameter to make it <PrintHello /> instead of PrintHello()
 ReactDOM.render(PrintHello(), document.querySelector("#myDiv"));

exercises/03.1-your-first-component/solution.hide.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+export const PrintHello = () => {
+	return <h1>I Love React</h1>;
+};
+
+// Change the syntax of the first parameter to make it <PrintHello /> instead of PrintHello()
+ReactDOM.render(<PrintHello />, document.querySelector("#myDiv"));

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

@@ -1,12 +1,12 @@
 # `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 ejercicio anterior hemos creado nuestro primer componente llamado `PrintHello`, y hemos aprendido que podemos usar el componente como una etiqueta HTML.
 
 ```jsx
 <PrintHello />
 ```
 
-Ahora, vamos a crear un nuevo componente (función) llamado **`<BootstrapCard />`** que generará el siguiente HTML:
+Ahora, vamos a crear un nuevo componente (función) llamado `<BootstrapCard />` que generará el siguiente HTML:
 
 ```jsx
 <div class="card m-5">
@@ -18,12 +18,14 @@ Ahora, vamos a crear un nuevo componente (función) llamado **`<BootstrapCard />
   </div>
 </div>
 ```
- Nota: 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:
+## 💡 Pistas:
 
 +  Si no sabes o no recuerdas cómo usar `ReactDOM.render`, puedes revisar los ejercicios anteriores.
+
++  Recuerda usar la sintaxis de React correcta `className` en vez de `class` cuando crees tu tarjeta de bootstrap.

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

@@ -4,13 +4,13 @@ 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 have learned 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 />
 ```
 
-Now let's create another component (function) called **`<BootstrapCard />`** that outputs the following HTML:
+Now let's create another component (function) called `<BootstrapCard />` that outputs the following HTML:
 
 ```jsx
 <div class="card m-5">
@@ -23,12 +23,14 @@ Now let's create another component (function) called **`<BootstrapCard />`** tha
 </div>
 ```
 
- Note: This HTML code its based on the [Bootstrap Card](https://getbootstrap.com/docs/4.0/components/card/).
+> ☝ Note: This HTML code is based on the [Bootstrap Card](https://getbootstrap.com/docs/4.0/components/card/).
 
 ## 📝 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`.
+1. Please create a function called `BootstrapCard` that returns the card code and use the `ReactDOM.render` function and `<BootstrapCard />` to add it into the website inside `#myDiv`.
 
-## 💡 Hint:
+## 💡 Hints:
 
 + If you don't know or remember how to use `ReactDOM.render` you can review the past exercises.
+
++ Remember to use the correct React syntax `className` instead of `class` when creating your bootstrap card.

exercises/03.2-a-real-component/app.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-//create your function here
+// Create your function here
 
-//remember to use ReactDOM.render to include the component into the website
+// Remember to use ReactDOM.render to include the component into the website
 

exercises/03.2-a-real-component/solution.hide.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+// Create your function here
+const BootstrapCard = () => {
+	return (
+		<div className="card m-5">
+			<img alt="Card image cap" className="card-img-top" src="../../.learn/assets/Dylan.png?raw=true" />
+			<div className="card-body">
+				<h5 className="card-title">Bob Dylan</h5>
+				<p className="card-text">
+					Bob Dylan (born Robert Allen Zimmerman, May 24, 1941) is an American singer/songwriter, author, and artist who has been an
+					influential figure in popular music and culture for more than five decades.
+				</p>
+				<a className="btn btn-primary" href="https://en.wikipedia.org/wiki/Bob_Dylan">
+					Go to wikipedia
+				</a>
+			</div>
+		</div>
+	);
+};
+
+// Remember to use ReactDOM.render to include the component into the website
+ReactDOM.render(<BootstrapCard />, document.getElementById("myDiv"));

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

@@ -1,8 +1,8 @@
 # `03.3` Component Properties
 
-La `BootstrapCard` que acabas de hacer está [hard coded](https://www.youtube.com/watch?v=8AfUqg5pUQQ) para **Bob Dylan** únicamente.
+La `BootstrapCard` que acabas de hacer está [hard coded](https://es.wikipedia.org/wiki/Codificaci%C3%B3n_r%C3%ADgida) para **Bob Dylan** únicamente.
 
-Pero, ¿qué pasa si queremos reutilizar el componente `<BootstrapCard />` para **Paul Mccartney** o cualquier otra persona? ¿Cómo podriamos hacer? ¡Usa propiedades!
+Pero, ¿qué pasa si queremos reutilizar el componente `<BootstrapCard />` para **Paul McCartney** o cualquier otra persona? ¿Cómo podríamos hacer? ¡Usa propiedades!
 
 ## Usando propiedades en HTML
 
@@ -15,17 +15,17 @@ Cuando usas la etiqueta **anchor** (`<a>`) tienes que especificar la propiedad *
 <a href="http://twitter.com">Take me to twitter</a>
 ```
 
-Nota: 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
+## 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
-<BootstrapCard title="Paul Mccartney" />
+               // Para Paul McCartney
+<BootstrapCard title="Paul McCartney" />
 
-               //para Bob Dylan
+               // Para Bob Dylan
 <BootstrapCard title="Bob Dylan" />
 ```
 
@@ -46,24 +46,24 @@ Para trabajar con propiedades de componentes, tienes que especificar qué propie
 Por ejemplo:
 
 ```js
-// aquí estamos especificando que este componente recibirá la propiedad "title" y será un string.
+// Aquí estamos especificando que este componente recibirá la propiedad "title" y será un string.
 BootstrapCard.propTypes = {
 	title: PropType.string
 };
 ```
 
 ## 📝 Instrucciones:
 
-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.
+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 que en `title`, la cual ha sido incluida en ambas.
 
 ## 💡 Pistas:
 
 + 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 la información *hard coded* 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.

exercises/03.3-component-properties/README.md

@@ -4,13 +4,13 @@ tutorial: "https://www.youtube.com/watch?v=79ho2T5Zy6U"
 
 # `03.3` Component Properties
 
-The `BootstrapCard` you just made right now is [hard coded](https://www.youtube.com/watch?v=8AfUqg5pUQQ) for **Bob Dylan** only.
+The `BootstrapCard` you just made right now is [hard coded](https://en.wikipedia.org/wiki/Hard_coding) for **Bob Dylan** only.
 
-But, what if we also want to re-use the same `<BootstrapCard />` component for **Paul Mccartney** or any other person? What is the best way to do it? Use props!
+But, what if we also want to re-use the same `<BootstrapCard />` component for **Paul McCartney** or any other person? What is the best way to do it? Use props!
 
 ## Using properties in HTML
 
-When you are coding HTML you are constantly using the `<tag>` properties to modify the tag behavior, for example: 
+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,21 +19,21 @@ When you use the **anchor** tag (`<a>`) you have to specify the **href** propert
 <a href="http://twitter.com">Take me to twitter</a>
 ```
 
-Note: Here I'm re-using the anchor tag (`<a>`) for two different links
+> Note: Here I'm re-using the anchor tag (`<a>`) for two different links.
 
-> Using properties in React.js
+## 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 can also 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
-<BootstrapCard title="Paul Mccartney" />
+               // For Paul McCartney
+<BootstrapCard title="Paul McCartney" />
 
-               //for Bob Dylan
+               // For Bob Dylan
 <BootstrapCard title="Bob Dylan" />
 ```
 
-Our `component` function will receive all its properties (including title) through the first parameter that we can call `props`.
+Our `component` function will receive all of its properties (including title) through the first parameter that we can call `props`.
 
 ```jsx
 const BootstrapCard = (props) => {
@@ -50,24 +50,24 @@ To be able to work with component properties, you have to specify what propertie
 For example: 
 
 ```jsx
-// here we are specifying that this component will receive the property "title" and it will be a string.
+// Here we are specifying that this component will receive the property "title" and it will be a string.
 BootstrapCard.propTypes = {
 	title: PropType.string
 };
 ```
 
 ## 📝 Instructions:
 
-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.
+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 by default). Do it the same way `title` was already included in both.
 
 ## 💡 Hints:
 
 + 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 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 twice, just once.

exercises/03.3-component-properties/app.jsx

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 import PropType from "prop-types";
 
 const BootstrapCard = props => {
-	// 1) replace the hard-coded image, description, link, etc. With their property variable.
+	// 1) Replace the hard-coded image, description, link, etc. With their property variable
 	return (
 		<div className="card m-5">
 			<img className="card-img-top" src="https://github.com/4GeeksAcademy/react-tutorial-exercises/blob/master/.learn/assets/Dylan.png?raw=true" alt="Card image cap" />
@@ -19,7 +19,7 @@ const BootstrapCard = props => {
 };
 BootstrapCard.propTypes = {
 	title: PropType.string
-		// 2) add here the new properties into the proptypes object
+	// 2) Add here the new properties into the proptypes object
 };