Merge pull request #111 from josemoracard/jose2-00-welcome

exercises 00-welcome to 02.2-mapping-array-of-objects-to-li

exercises/00-welcome/README.es.md

@@ -16,9 +16,7 @@ Durante este curso aprenderás los siguientes conceptos:
 
 ## Lecturas Útiles:
 
-+ [https://es.reactjs.org/docs/introducing-jsx.html](https://es.reactjs.org/docs/introducing-jsx.html)
-
-+ [https://es.reactjs.org/](https://es.reactjs.org/) 
++ [https://es.react.dev/learn](https://es.react.dev/learn)
 
 ## Videos Útiles:
 
@@ -30,17 +28,17 @@ Durante este curso aprenderás los siguientes conceptos:
 
 Gracias a estas maravillosas personas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
 
-1. [Alejandro Sánchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) :computer: (idea) 🤔, (build-tests) :warning:, (pull-request-review) :eyes: (build-tutorial) :white_check_mark: (documentación) :book:
+1. [Alejandro Sánchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) 💻 (idea) 🤔, (build-tests) ⚠️, (pull-request-review) 👀, (build-tutorial) ✅, (documentación) 📖
 
-2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribución: (programador) :computer:, (build-tests) :warning:
+2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribución: (programador) 💻, (build-tests) ⚠️
 
-3. [Marco Gómez (marcogonzalo)](https://github.com/marcogonzalo), contribución: (traducción) :earth_africa:
+3. [Marco Gómez (marcogonzalo)](https://github.com/marcogonzalo), contribución: (traducción) 🌍
 
 Este proyecto sigue las especificaciones: [all-contributors](https://github.com/kentcdodds/all-contributors). 
 
 ¡Todas las contribuciones son bienvenidas!
 
 ### Nota:
-> 🔹 Nosotros construimos los ejercicios incrementalmente, deberías sentir el progreso poco a poco, y esperamos que el incremento de la dificuldad entre los ejercicios nunca sea tan grande como para frustrarte.
+> 🔹 Nosotros construimos los ejercicios incrementalmente, deberías sentir el progreso poco a poco, y esperamos que el incremento de la dificultad entre los ejercicios nunca sea tan grande como para frustrarte.
 
 Haz clic en `next` arriba de estas instrucciones para empezar con el primer ejercicio...

exercises/00-welcome/README.md

@@ -8,7 +8,7 @@ We are very excited to have you here! 🎉 😂
 
 ## 💬 Fundamentals:
 
-During this course you will be learning the following concepts:
+During this course, you will be learning the following concepts:
 
 1. **Using JSX**: A great syntax proposed by Facebook that mixes HTML and JS in the same file to help you write dynamic HTML.
 
@@ -34,11 +34,11 @@ During this course you will be learning the following concepts:
 
 Thanks to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
 
-1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) :computer: (idea) 🤔, (build-tests) :warning:, (pull-request-review) :eyes: (build-tutorial) :white_check_mark: (documentation) :book:
+1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻, (idea) 🤔, (build-tests) ⚠️, (pull-request-review) 👀, (build-tutorial) ✅, (documentation) 📖
 
-2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder), (build-tests) :warning:
+2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder) 💻, (build-tests) ⚠️
 
-3. [Marco Gómez (marcogonzalo)](https://github.com/marcogonzalo), contribution: (translator) :earth_africa:
+3. [Marco Gómez (marcogonzalo)](https://github.com/marcogonzalo), contribution: (translator) 🌍
 
 This project follows these specifications: [all-contributors](https://github.com/kentcdodds/all-contributors)
 

exercises/01-hello-world/README.es.md

@@ -1,4 +1,4 @@
-# `01` Hello world
+# `01` Hello World
 
 El mayor dolor de cabeza de los desarrolladores front-end es **trabajar con el DOM** para crear HTML dinámico, lo cual es algo que React.js hace mucho mejor.
 
@@ -14,24 +14,24 @@ La función `ReactDOM.render` recibe dos parámetros:
 
 Por ejemplo:
 
-```js
-import React from 'react'; //importar la librería de react
-import ReactDOM from 'react-dom'; //importar react-dom para que react genere el html
+```jsx
+import React from 'react'; // importar la librería de react
+import ReactDOM from 'react-dom'; // importar react-dom para que react genere el html
 
-// QUE: esta variable contiene todo el HTML que va a ser renderizado
+// QUÉ: esta variable contiene todo el HTML que va a ser renderizado
 let output = <span>James is 12 years old</span>
 
-// DONDE: Un elemento DOM que contendrá todo el html generado por react
+// DÓNDE: Un elemento del DOM que contendrá todo el html generado por react
 const myDiv = document.querySelector('#myDiv');
 
-               //qué    //dónde
+                //qué   //dónde
 ReactDOM.render(output, myDiv);
 ```
 
 La función `ReactDOM.render` establecerá el innerHTML de `myDiv` (un elemento DOM) para ser lo que sea que contenga la variable `output`, muy similar a como funciona `innerHTML`:
 
-```js
-//Así lo harías sin react
+```jsx
+// Así lo harías sin react
 myDiv.innerHTML = '<span>James is 12 years old</span>';
 
 // Así se hace con react
@@ -44,7 +44,7 @@ ReactDOM.render(<span> James is 12 years old </span>, myDiv);
 
 2. Cambia la variable `output` por:
 
-```js
+```jsx
 <span>James is <strong>12</strong> years old</span>
 ```
 

exercises/01-hello-world/README.md

@@ -8,7 +8,7 @@ Today's biggest pain for front-end developers is **working with the DOM** to cre
 
 React.js is a rendering library made to optimize the DOM: developers save time and the browser is faster.
 
-The library comes with a function called **ReactDOM.render** that you can see as a replacement for the classic [innerHTML property](https://www.w3schools.com/jsref/prop_html_innerhtml.asp)
+The library comes with a function called **ReactDOM.render** that you can see as a replacement for the classic [innerHTML property](https://www.w3schools.com/jsref/prop_html_innerhtml.asp).
 
 The `ReactDOM.render` function receives two parameters:
 
@@ -18,27 +18,27 @@ The `ReactDOM.render` function receives two parameters:
 
 For example:
 
-```js
-import React from 'react'; //import the react library
-import ReactDOM from 'react-dom'; //import react-dom to make react generate html
+```jsx
+import React from 'react'; // import the react library
+import ReactDOM from 'react-dom'; // import react-dom to make react generate html
 
-// WHAT: This variable contains all the HTML that will be rendered
+// WHAT: This variable contains all the html that will be rendered
 let output = <span>James is 12 years old</span>
 
 // WHERE: A DOM element that will contain the entire react generated html
 const myDiv = document.querySelector('#myDiv');
 
-               //what           //where
+               //what   //where
 ReactDOM.render(output, myDiv);
 ```
 
 The function `ReactDOM.render` will set the innerHTML of `myDiv` (a DOM element) to be whatever the variable `output` contains, very similar to how `innerHTML` works:
 
-```js
-//This is how you would do it without react.
+```jsx
+// This is how you would do it without react
 myDiv.innerHTML = '<span>James is 12 years old</span>';
 
-// This is not you would do it with react.
+// This is how you would do it with react
 ReactDOM.render(<span> James is 12 years old </span>, myDiv);
 ```
 

exercises/01-hello-world/app.jsx

@@ -1,12 +1,12 @@
-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
 
-// WHAT: This variable returns contains the html to render
+// WHAT: This variable contains the html to render
 let output = <span>James is 12 years old</span>;
 
 // WHERE: A DOM element that will contain the entire react generated html
 const myDiv = document.querySelector("#myDiv");
 
-//what   //where
+                //what  //where
 ReactDOM.render(output, myDiv);

exercises/01-hello-world/solution.hide.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+// If we have a variable
+let age = "12";
+let name = "John";
+
+// We can use it in our html like this
+let output = (
+	<span>
+		James is <strong>12</strong> years old
+	</span>
+);
+
+// Use react-dom to render it
+ReactDOM.render(output, document.querySelector("#myDiv"));

exercises/01.1-hello-jsx/README.es.md

@@ -14,10 +14,10 @@ let output = <span> James is { age } years old </span>
 
 Fíjate en la posición de las llaves `{` y `}` envolviendo la variable.
 
-Después, podemos renderizar todo en contenido en el  sitio web usando `ReactDOM.render` así:
+Después, podemos renderizar todo en contenido en el sitio web usando `ReactDOM.render` así:
 
 ```jsx
-// usa react-dom para renderizarlo en el DOM
+// Usa react-dom para renderizarlo en el DOM
 import ReactDOM from 'react-dom';
                //renderizar output    //dentro del innerHTML de #myDiv
 ReactDOM.render(output,             document.querySelector('#myDiv'));
@@ -39,4 +39,4 @@ El archivo app.jsx tiene una variable llamada `name` que puede contener un nombr
 
 ## 📝 Instrucciones:
 
-1. Por favor, incluye esa variable dentro del resultado(output) de react, reemplaza la variable por el `James`.
+1. Por favor, incluye esa variable dentro de la variable `output`. Reemplaza la palabra `James` con la nueva variable `name` (recuerda usar las llaves `{}`).

exercises/01.1-hello-jsx/README.md

@@ -4,24 +4,24 @@ tutorial: "https://www.youtube.com/watch?v=Wp8hcH8jScQ"
 
 # `01` Hello JSX
 
-JSX also allows you to easily include variables into your HTML, for example, lets assume that you have the following variable available:
+JSX also allows you to easily include variables into your HTML. For example, let's assume that you have the following variable available:
 
 ```js
 let age = 12;
 ```
 
-If you want to include the value of that variable into your HTML code dynamically, you can do it like this:
+If you want to include the value of that variable dynamically into your HTML code, you can do it like this:
 
 ```jsx
 let output = <span> James is { age } years old </span>
 ```
 
 Note the position of the curly brackets `{` and `}` wrapping the variable.
 
-Then, we can render the everything in the website content using `ReactDOM.render` like this:
+Then, we can render everything in the website content using `ReactDOM.render` like this:
 
 ```jsx
-// use react-dom to render it into the DOM
+// Use react-dom to render it into the DOM
 import ReactDOM from 'react-dom';
                //render output      //inside the innerHTML of #myDiv
 ReactDOM.render(output,             document.querySelector('#myDiv'));
@@ -43,4 +43,4 @@ The app.jsx file has a variable called `name` that can contain a name.
 
 ## 📝 Instructions:
 
-1. Please include that variable inside the react output replace the hard coded word `James` with the variable name (remember the curly brackets `{}`).
+1. Please include that variable inside the `output` variable. Replace the hardcoded word `James` with the `name` variable (remember the curly brackets `{}`).

exercises/01.1-hello-jsx/app.jsx

@@ -1,12 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-// if we have a variable
+// If we have a variable
 let age = "12";
 let name = "John";
 
-// we can use it in our html like this
+// We can use it in our html like this
 let output = <span>James is {age} years old</span>;
 
-// use react-dom to render it
+// Use react-dom to render it
 ReactDOM.render(output, document.querySelector("#myDiv"));

exercises/01.1-hello-jsx/solution.hide.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+// If we have a variable
+let age = "12";
+let name = "John";
+
+// We can use it in our html like this
+let output = (
+	<span>
+		{name} is {age} years old
+	</span>
+);
+
+// Use react-dom to render it
+ReactDOM.render(output, document.querySelector("#myDiv"));

exercises/01.2-rendering-from-objects/README.es.md

@@ -9,10 +9,10 @@ const customer = {
 };
 ```
 
-Para obtener cualquier propiedad del objeto `Customer` tenemos que usar el operador punto (`.`), así:
+Para obtener cualquier propiedad del objeto `customer` tenemos que usar el operador punto (`.`), así:
 
 ```js
-console.log(customer.first_name); // imprimirá "Bob" en la consola.
+console.log(customer.first_name); // Imprimirá "Bob" en la consola
 ```
 
 ## 📝 Instrucciones:

exercises/01.2-rendering-from-objects/README.md

@@ -4,7 +4,7 @@ tutorial: "https://www.youtube.com/watch?v=Z9gzZoYM4pY"
 
 # `01.2` Rendering from objects
 
-Now lets use a more complex variable to render our HTML, let's say we have the following JS Object containing a customer information:
+Now, let's use a more complex variable to render our HTML. Let's say we have the following JS object containing a customer's information:
 
 ```js
 const customer = {
@@ -13,15 +13,15 @@ const customer = {
 };
 ```
 
-To retrieve any property from the `Customer` object we have to use the dot (`.`) operator, like this:
+To retrieve any property from the `customer` object we have to use the dot (`.`) operator, like this:
 
 ```js
-console.log(customer.first_name); // will print "Bob" on the console.
+console.log(customer.first_name); // Will print "Bob" on the console
 ```
 
 ## 📝 Instructions:
 
-Open the `app.jsx` and create the necesary code to make your file render the following output into the DOM:
+Open the `app.jsx` and create the necessary code to make your file render the following output into the DOM:
 
 ```jsx
 <div>

exercises/01.2-rendering-from-objects/app.jsx

@@ -6,8 +6,8 @@ const customer = {
 	last_name: "Dylan"
 };
 
-//              your code inside these <div> tags
+//              Your code inside these <div> tags
 const output = <div></div>;
 
-//              what     where
+//               what     where
 ReactDOM.render(output, document.querySelector("#myDiv"));

exercises/01.2-rendering-from-objects/solution.hide.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+const customer = {
+	first_name: "Bob",
+	last_name: "Dylan",
+};
+
+//              your code inside these <div> tags
+const output = (
+	<div>
+		<h1>My name is {customer.first_name}</h1>
+		<h2>My last name is {customer.last_name}</h2>
+	</div>
+);
+
+//              what     where
+ReactDOM.render(output, document.querySelector("#myDiv"));

exercises/01.2-rendering-from-objects/tests.js

@@ -13,7 +13,7 @@ test("ReactDOM.render needs to be called once", () => {
   expect(ReactDOM.render.mock.calls.length).toBe(1);
 });
 
-test("The component should return LITERALLY what was asked", () => {
+test("The component should exactly match the requested output", () => {
   const tree = renderer.create(ReactDOM.render.mock.calls[0][0]).toJSON();
   expect(tree).toMatchInlineSnapshot(`
 <div>

exercises/01.3-building-a-layout/README.es.md

@@ -4,7 +4,7 @@ Practiquemos un poco más el uso del JSX para crear HTML.
 
 Ahora tenemos otro objeto que es solo un poco más complejo que el anterior.
 
- ¿Estas listo? 😃
+¿Estás listo? 😃
 
 Tienes un objeto `data` que contiene la información de Bob Dylan (imagen, título, etc).
 
@@ -20,15 +20,15 @@ const data = {
 };
 ```
 
-  ## 📝 Instrucciones:
+## 📝 Instrucciones:
 
-1. Usa esa información contenida en `data` para renderizar una tarjeta bootstrap (bootstrap card): por ejemplo el título de la tarjeta sería el `data.cardTitle`, etc.
+1. Usa la información contenida en `data` para renderizar una tarjeta de bootstrap. Por ejemplo, el título de la tarjeta sería `data.cardTitle`, etc.
 
-  ## Resultado esperado:
+## 💻 Resultado esperado:
 
-  ![Bob Dylan Card](../../.learn/assets/1.4-1.png?raw=true)
+![Tarjeta de Bob Dylan](../../.learn/assets/1.4-1.png?raw=true)
 
-  ## 💡 Pista:
+## 💡 Pista:
 
 + Aquí está el código HTML para crear una tarjeta en bootstrap:
 
@@ -43,5 +43,5 @@ const data = {
 </div>
 ```
 
-Fuente: [Bootstrap Card](https://getbootstrap.com/docs/4.0/components/card/#example)
+Fuente: [Bootstrap Card](https://getbootstrap.com/docs/5.0/components/card/#example)