diff --git a/exercises/00-welcome/README.es.md b/exercises/00-welcome/README.es.md index 3ca6080d..bb513dd8 100644 --- a/exercises/00-welcome/README.es.md +++ b/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... diff --git a/exercises/00-welcome/README.md b/exercises/00-welcome/README.md index 180d300d..9d13409b 100644 --- a/exercises/00-welcome/README.md +++ b/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) diff --git a/exercises/01-hello-world/README.es.md b/exercises/01-hello-world/README.es.md index c6e39f60..1941b353 100644 --- a/exercises/01-hello-world/README.es.md +++ b/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 = James is 12 years old -// 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 = 'James is 12 years old'; // Así se hace con react @@ -44,7 +44,7 @@ ReactDOM.render( James is 12 years old , myDiv); 2. Cambia la variable `output` por: -```js +```jsx James is 12 years old ``` diff --git a/exercises/01-hello-world/README.md b/exercises/01-hello-world/README.md index 54e11e74..5f8ba9dc 100644 --- a/exercises/01-hello-world/README.md +++ b/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 = James is 12 years old // 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 = 'James is 12 years old'; -// This is not you would do it with react. +// This is how you would do it with react ReactDOM.render( James is 12 years old , myDiv); ``` diff --git a/exercises/01-hello-world/app.jsx b/exercises/01-hello-world/app.jsx index 8f2e3d9a..556bb60d 100644 --- a/exercises/01-hello-world/app.jsx +++ b/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 = James is 12 years old; // 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); diff --git a/exercises/01-hello-world/solution.hide.jsx b/exercises/01-hello-world/solution.hide.jsx new file mode 100644 index 00000000..963248b8 --- /dev/null +++ b/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 = ( + + James is 12 years old + +); + +// Use react-dom to render it +ReactDOM.render(output, document.querySelector("#myDiv")); diff --git a/exercises/01.1-hello-jsx/README.es.md b/exercises/01.1-hello-jsx/README.es.md index 871030f0..aad53c19 100644 --- a/exercises/01.1-hello-jsx/README.es.md +++ b/exercises/01.1-hello-jsx/README.es.md @@ -14,10 +14,10 @@ let output = James is { age } years old 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`. \ No newline at end of file +1. Por favor, incluye esa variable dentro de la variable `output`. Reemplaza la palabra `James` con la nueva variable `name` (recuerda usar las llaves `{}`). diff --git a/exercises/01.1-hello-jsx/README.md b/exercises/01.1-hello-jsx/README.md index 1fe59e27..f4baf324 100644 --- a/exercises/01.1-hello-jsx/README.md +++ b/exercises/01.1-hello-jsx/README.md @@ -4,13 +4,13 @@ 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 = James is { age } years old @@ -18,10 +18,10 @@ let output = James is { age } years old 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 `{}`). diff --git a/exercises/01.1-hello-jsx/app.jsx b/exercises/01.1-hello-jsx/app.jsx index c1c3072b..dc9c3ecf 100644 --- a/exercises/01.1-hello-jsx/app.jsx +++ b/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 = James is {age} years old; -// use react-dom to render it +// Use react-dom to render it ReactDOM.render(output, document.querySelector("#myDiv")); diff --git a/exercises/01.1-hello-jsx/solution.hide.jsx b/exercises/01.1-hello-jsx/solution.hide.jsx new file mode 100644 index 00000000..86158c47 --- /dev/null +++ b/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 = ( + + {name} is {age} years old + +); + +// Use react-dom to render it +ReactDOM.render(output, document.querySelector("#myDiv")); diff --git a/exercises/01.2-rendering-from-objects/README.es.md b/exercises/01.2-rendering-from-objects/README.es.md index 22dec78d..7bc4062e 100644 --- a/exercises/01.2-rendering-from-objects/README.es.md +++ b/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: diff --git a/exercises/01.2-rendering-from-objects/README.md b/exercises/01.2-rendering-from-objects/README.md index d582ea78..a8f19315 100644 --- a/exercises/01.2-rendering-from-objects/README.md +++ b/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
diff --git a/exercises/01.2-rendering-from-objects/app.jsx b/exercises/01.2-rendering-from-objects/app.jsx index 7ff4a2ef..466a244b 100644 --- a/exercises/01.2-rendering-from-objects/app.jsx +++ b/exercises/01.2-rendering-from-objects/app.jsx @@ -6,8 +6,8 @@ const customer = { last_name: "Dylan" }; -// your code inside these
tags +// Your code inside these
tags const output =
; -// what where +// what where ReactDOM.render(output, document.querySelector("#myDiv")); diff --git a/exercises/01.2-rendering-from-objects/solution.hide.jsx b/exercises/01.2-rendering-from-objects/solution.hide.jsx new file mode 100644 index 00000000..565f483c --- /dev/null +++ b/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
tags +const output = ( +
+

My name is {customer.first_name}

+

My last name is {customer.last_name}

+
+); + +// what where +ReactDOM.render(output, document.querySelector("#myDiv")); diff --git a/exercises/01.2-rendering-from-objects/tests.js b/exercises/01.2-rendering-from-objects/tests.js index 2d7139ee..c37bb1ce 100644 --- a/exercises/01.2-rendering-from-objects/tests.js +++ b/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(`
diff --git a/exercises/01.3-building-a-layout/README.es.md b/exercises/01.3-building-a-layout/README.es.md index bf7bd49a..6d73766d 100644 --- a/exercises/01.3-building-a-layout/README.es.md +++ b/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 = {
``` -Fuente: [Bootstrap Card](https://getbootstrap.com/docs/4.0/components/card/#example) +Fuente: [Bootstrap Card](https://getbootstrap.com/docs/5.0/components/card/#example) diff --git a/exercises/01.3-building-a-layout/README.md b/exercises/01.3-building-a-layout/README.md index 5abc6d69..31f4d93d 100644 --- a/exercises/01.3-building-a-layout/README.md +++ b/exercises/01.3-building-a-layout/README.md @@ -23,13 +23,14 @@ const data = { } }; ``` + ## 📝 Instructions: -1. Use the information contained in `data` to render a bootstrap card, for example: The card's title will be the `data.cardTitle`, etc. +1. Use the information contained in `data` to render a bootstrap card. For example: The card's title will be `data.cardTitle`, etc. - ## Expected result: +## 💻 Expected result: - ![Bob Dylan Card](../../.learn/assets/1.4-1.png?raw=true) +![Bob Dylan Card](../../.learn/assets/1.4-1.png?raw=true) ## 💡 Hint: @@ -46,7 +47,7 @@ const data = {
``` -Source: [Bootstrap Card](https://getbootstrap.com/docs/4.0/components/card/#example) +Source: [Bootstrap Card](https://getbootstrap.com/docs/5.0/components/card/#example) diff --git a/exercises/01.3-building-a-layout/app.jsx b/exercises/01.3-building-a-layout/app.jsx index e6ffec73..3d27faa1 100644 --- a/exercises/01.3-building-a-layout/app.jsx +++ b/exercises/01.3-building-a-layout/app.jsx @@ -1,5 +1,5 @@ -import React from "react"; //Main React.js library -import ReactDOM from "react-dom"; //we use ReactDOM to render into the DOM +import React from "react"; // Main React.js library +import ReactDOM from "react-dom"; // We use ReactDOM to render into the DOM const data = { image: "../../.learn/assets/Dylan.png?raw=true", @@ -12,12 +12,9 @@ const data = { }, }; +// Modify the 'content' variable below to display the desired bootstrap card let content = ( ); -/** - * define the variable 'content' here and fill it with the - * needed code to render the bootstrap card - **/ ReactDOM.render(content, document.querySelector("#myDiv")); diff --git a/exercises/01.3-building-a-layout/solution.hide.jsx b/exercises/01.3-building-a-layout/solution.hide.jsx index 886a8273..7c16c1e5 100644 --- a/exercises/01.3-building-a-layout/solution.hide.jsx +++ b/exercises/01.3-building-a-layout/solution.hide.jsx @@ -1,5 +1,5 @@ -import React from "react"; //Main React.js library -import ReactDOM from "react-dom"; //we use ReactDOM to render into the DOM +import React from "react"; // Main React.js library +import ReactDOM from "react-dom"; // We use ReactDOM to render into the DOM const data = { image: "../../.learn/assets/Dylan.png?raw=true", @@ -12,6 +12,7 @@ const data = { }, }; +// Modify the 'content' variable below to display the desired bootstrap card let content = (
Card image cap @@ -24,9 +25,5 @@ let content = (
); -/** - * define the variable 'content' here and fill it with the - * needed code to render the bootstrap card - **/ ReactDOM.render(content, document.querySelector("#myDiv")); diff --git a/exercises/01.4-building-html-from-arrays/README.es.md b/exercises/01.4-building-html-from-arrays/README.es.md index e1ab52a4..3478c43f 100644 --- a/exercises/01.4-building-html-from-arrays/README.es.md +++ b/exercises/01.4-building-html-from-arrays/README.es.md @@ -1,11 +1,11 @@ # `01.4` Building from arrays -Con JSX también puedes crear **arrays o arreglos** de elementos HTML. Por ejemplo, si tenemos un arreglo de `
  • ` podemos incluirlos todos dentro del documento a la vez, así: +Con JSX también puedes crear **arrays** de elementos HTML. Por ejemplo, si tenemos un arreglo de `
  • ` podemos incluirlos todos dentro del documento a la vez, así: ```jsx const namesInHTML = [
  • Bob Dust
    • , -
  • Fredy Mercury
    • , +
  • Freddie Mercury
    • ,
  • Shazam Nikola
    • ,
  • Wilibin Walabam
    • ]; @@ -21,14 +21,14 @@ El HTML resultante en el sitio web sería así:
    • Bob Dust
      • -
    • Fredy Mercury
      • +
    • Freddie Mercury
    • Shazam Nikola
    • Wilibin Walabam
    ``` -Digamos que queremos que react renderice la siguiente salida en el documento: +Digamos que queremos que React renderice la siguiente salida en el documento: ```html