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.