From 289b15a7a928bff57a4b1aa67cbedaf2adf5cfd4 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 13:50:06 +0200 Subject: [PATCH 001/102] Update README.md --- exercises/03-render-with-functions/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/03-render-with-functions/README.md b/exercises/03-render-with-functions/README.md index bd4396df..14b1bb36 100644 --- a/exercises/03-render-with-functions/README.md +++ b/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 reuse your code. For example: @@ -15,7 +15,7 @@ For example: const PrintHello = () => { return

Hello World

; } - //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. From 0643a5c84fbe53c246a2e8f389904367b3396da6 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 13:51:37 +0200 Subject: [PATCH 002/102] Update README.es.md --- exercises/03-render-with-functions/README.es.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/03-render-with-functions/README.es.md b/exercises/03-render-with-functions/README.es.md index 7b1daa96..9e916042 100644 --- a/exercises/03-render-with-functions/README.es.md +++ b/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

Hello World

; } - //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. From 65fa69de6292a5a7cab12b283660a301cae67e15 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 13:53:02 +0200 Subject: [PATCH 003/102] Update app.jsx --- exercises/03-render-with-functions/app.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/03-render-with-functions/app.jsx b/exercises/03-render-with-functions/app.jsx index f9b8319e..0d194961 100644 --- a/exercises/03-render-with-functions/app.jsx +++ b/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 = () => { From 9ee129b5a5ff1106af2d226109b18411eeaf54b0 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 13:58:46 +0200 Subject: [PATCH 004/102] Update README.md --- exercises/03.1-your-first-component/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/03.1-your-first-component/README.md b/exercises/03.1-your-first-component/README.md index bb2d9756..b216ed3b 100644 --- a/exercises/03.1-your-first-component/README.md +++ b/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

I Love React

; } -// we can call the function as an HTML tag like this: +// We can call the function as an HTML tag like this: -// instead of the typical way of using round brackets +// Instead of the typical way of using round brackets MyFunction(); ``` From df2a60a3bc329e5bbd61b4964b56c9579245a3e9 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 14:02:22 +0200 Subject: [PATCH 005/102] Update README.es.md --- exercises/03.1-your-first-component/README.es.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/03.1-your-first-component/README.es.md b/exercises/03.1-your-first-component/README.es.md index a1cd6bc9..4ed846aa 100644 --- a/exercises/03.1-your-first-component/README.es.md +++ b/exercises/03.1-your-first-component/README.es.md @@ -1,21 +1,21 @@ # `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

I Love React

; } -// podemos llamar la función como una etiqueta HTML así +// Podemos llamar la función como una etiqueta HTML así -// en vez de hacerlo de la típica forma usando llaves +// En vez de hacerlo de la típica forma usando paréntesis MyFunction(); ``` From ed16ae7f64c062d21818a2ef116cbd46a8f0a804 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 14:03:04 +0200 Subject: [PATCH 006/102] Update app.jsx --- exercises/03.1-your-first-component/app.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/03.1-your-first-component/app.jsx b/exercises/03.1-your-first-component/app.jsx index 80af72f2..10512a13 100644 --- a/exercises/03.1-your-first-component/app.jsx +++ b/exercises/03.1-your-first-component/app.jsx @@ -5,5 +5,5 @@ export const PrintHello = () => { return

I Love React

; }; -// change the syntax of the first parameter to make it instead of PrintHello() +// Change the syntax of the first parameter to make it instead of PrintHello() ReactDOM.render(PrintHello(), document.querySelector("#myDiv")); From fe684053f89b8f775e25c5939aa34d70b0cbadca Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 14:06:32 +0200 Subject: [PATCH 007/102] Update README.es.md --- exercises/03.1-your-first-component/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/03.1-your-first-component/README.es.md b/exercises/03.1-your-first-component/README.es.md index 4ed846aa..54bff72f 100644 --- a/exercises/03.1-your-first-component/README.es.md +++ b/exercises/03.1-your-first-component/README.es.md @@ -23,4 +23,4 @@ Cuando llamas a una función así, se convierte en un **Componente de React**, q ## 📝 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). From e30414c5d88a87929892a1a914048c74e6cb62fa Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 14:09:12 +0200 Subject: [PATCH 008/102] Create solution.hide.jsx --- exercises/03-render-with-functions/solution.hide.jsx | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 exercises/03-render-with-functions/solution.hide.jsx diff --git a/exercises/03-render-with-functions/solution.hide.jsx b/exercises/03-render-with-functions/solution.hide.jsx new file mode 100644 index 00000000..06abf594 --- /dev/null +++ b/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

I Love React

; +}; + +// what where +ReactDOM.render(PrintHello(), document.querySelector("#myDiv")); From f052e6607c7498aeec00b9f27184ecc1d44c3a1e Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 14:10:21 +0200 Subject: [PATCH 009/102] Create solution.hide.jsx --- exercises/03.1-your-first-component/solution.hide.jsx | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 exercises/03.1-your-first-component/solution.hide.jsx diff --git a/exercises/03.1-your-first-component/solution.hide.jsx b/exercises/03.1-your-first-component/solution.hide.jsx new file mode 100644 index 00000000..b1133e60 --- /dev/null +++ b/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

I Love React

; +}; + +// Change the syntax of the first parameter to make it instead of PrintHello() +ReactDOM.render(, document.querySelector("#myDiv")); From 74a403017347adcc48e285cdab20f931cb8fb8e8 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 14:19:43 +0200 Subject: [PATCH 010/102] Update README.md --- exercises/03.2-a-real-component/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/03.2-a-real-component/README.md b/exercises/03.2-a-real-component/README.md index 3cbac2eb..8810cde6 100644 --- a/exercises/03.2-a-real-component/README.md +++ b/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 ``` -Now let's create another component (function) called **``** that outputs the following HTML: +Now let's create another component (function) called `` that outputs the following HTML: ```jsx
@@ -23,11 +23,11 @@ Now let's create another component (function) called **``** tha
``` - 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 `` 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 `` to add it into the website inside `#myDiv`. ## 💡 Hint: From 0d6f7f1969e5fb8d6f88fff713fce21a4d84474e Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 14:22:39 +0200 Subject: [PATCH 011/102] Update README.es.md --- exercises/03.2-a-real-component/README.es.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/03.2-a-real-component/README.es.md b/exercises/03.2-a-real-component/README.es.md index 71c06c61..08dc359f 100644 --- a/exercises/03.2-a-real-component/README.es.md +++ b/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 ``` -Ahora, vamos a crear un nuevo componente (función) llamado **``** que generará el siguiente HTML: +Ahora, vamos a crear un nuevo componente (función) llamado `` que generará el siguiente HTML: ```jsx
@@ -18,7 +18,7 @@ Ahora, vamos a crear un nuevo componente (función) llamado **`
``` - 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: From b6929ca87308222fa38dd8d7f515c3317ab2f4dc Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 14:23:50 +0200 Subject: [PATCH 012/102] Update app.jsx --- exercises/03.2-a-real-component/app.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/03.2-a-real-component/app.jsx b/exercises/03.2-a-real-component/app.jsx index 72d8e245..872b7e9b 100644 --- a/exercises/03.2-a-real-component/app.jsx +++ b/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 From 8d6aaebc13b10833270c13397e5a7d27894e68a0 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 14:38:43 +0200 Subject: [PATCH 013/102] Create solution.hide.jsx --- .../03.2-a-real-component/solution.hide.jsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 exercises/03.2-a-real-component/solution.hide.jsx diff --git a/exercises/03.2-a-real-component/solution.hide.jsx b/exercises/03.2-a-real-component/solution.hide.jsx new file mode 100644 index 00000000..27c9304a --- /dev/null +++ b/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 +export const BootstrapCard = () => { + return ( +
+ Card image cap +
+
Bob Dylan
+

+ 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. +

+ + Go to wikipedia + +
+
+ ); +}; + +// Remember to use ReactDOM.render to include the component into the website +ReactDOM.render(, document.getElementById("myDiv")); From 37cba57961607d8f9726a1a4179466275a1eff3b Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 14:45:41 +0200 Subject: [PATCH 014/102] Update README.md --- exercises/03.2-a-real-component/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/exercises/03.2-a-real-component/README.md b/exercises/03.2-a-real-component/README.md index 8810cde6..a01e9b2f 100644 --- a/exercises/03.2-a-real-component/README.md +++ b/exercises/03.2-a-real-component/README.md @@ -32,3 +32,5 @@ Now let's create another component (function) called `` that ou ## 💡 Hint: + 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. From b52e01e8c3f9944f1fb0cb5f4021aa95c6007f03 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 14:47:50 +0200 Subject: [PATCH 015/102] Update README.es.md --- exercises/03.2-a-real-component/README.es.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/exercises/03.2-a-real-component/README.es.md b/exercises/03.2-a-real-component/README.es.md index 08dc359f..aeae446a 100644 --- a/exercises/03.2-a-real-component/README.es.md +++ b/exercises/03.2-a-real-component/README.es.md @@ -24,6 +24,8 @@ Ahora, vamos a crear un nuevo componente (función) llamado `` 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 `` 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. From 069e3a50822ae07fad71a8226ae5bd5f67622c18 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 14:48:02 +0200 Subject: [PATCH 016/102] Update README.md --- exercises/03.2-a-real-component/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/03.2-a-real-component/README.md b/exercises/03.2-a-real-component/README.md index a01e9b2f..4444c874 100644 --- a/exercises/03.2-a-real-component/README.md +++ b/exercises/03.2-a-real-component/README.md @@ -29,7 +29,7 @@ Now let's create another component (function) called `` that ou 1. Please create a function called `BootstrapCard` that returns the card code and use the `ReactDOM.render` function and `` 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. From b852e3a4c366ee1cc72ad16f430786155467abc2 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 14:55:59 +0200 Subject: [PATCH 017/102] Update README.md --- exercises/03-render-with-functions/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/03-render-with-functions/README.md b/exercises/03-render-with-functions/README.md index 14b1bb36..88305fad 100644 --- a/exercises/03-render-with-functions/README.md +++ b/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 reuse your code. +It is a strongly recommended practice because it lets you create templates and re-use your code. For example: From efc72583fbd612074b52a810a2e35ec2d3bc986c Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 15:01:57 +0200 Subject: [PATCH 018/102] Update solution.hide.jsx --- exercises/03.2-a-real-component/solution.hide.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/03.2-a-real-component/solution.hide.jsx b/exercises/03.2-a-real-component/solution.hide.jsx index 27c9304a..a477367e 100644 --- a/exercises/03.2-a-real-component/solution.hide.jsx +++ b/exercises/03.2-a-real-component/solution.hide.jsx @@ -2,7 +2,7 @@ import React from "react"; import ReactDOM from "react-dom"; // Create your function here -export const BootstrapCard = () => { +const BootstrapCard = () => { return (
Card image cap From dd4be84c7f5bc718b82ed505df647d3d38b5515c Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 15:16:59 +0200 Subject: [PATCH 019/102] Update README.md --- exercises/03.3-component-properties/README.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/exercises/03.3-component-properties/README.md b/exercises/03.3-component-properties/README.md index b58c2ff0..00eecb90 100644 --- a/exercises/03.3-component-properties/README.md +++ b/exercises/03.3-component-properties/README.md @@ -6,11 +6,11 @@ tutorial: "https://www.youtube.com/watch?v=79ho2T5Zy6U" The `BootstrapCard` you just made right now is [hard coded](https://www.youtube.com/watch?v=8AfUqg5pUQQ) for **Bob Dylan** only. -But, what if we also want to re-use the same `` 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 `` 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 `` properties to modify the tag behavior, for example: +When you are coding HTML, you are constantly using the `` properties to modify the tag behavior, for example: When you use the **anchor** tag (``) you have to specify the **href** property like this: @@ -19,21 +19,21 @@ When you use the **anchor** tag (``) you have to specify the **href** propert Take me to twitter ``` -Note: Here I'm re-using the anchor tag (``) for two different links +> Note: Here I'm re-using the anchor tag (``) 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 ``, 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 ``, like this: ```jsx - //for Paul Mccartney - + // For Paul McCartney + - //for Bob Dylan + // For 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,7 +50,7 @@ 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 }; @@ -58,7 +58,7 @@ BootstrapCard.propTypes = { ## 📝 Instructions: -1. Please add/use the `imageUrl`, `description`, `buttonUrl` and `buttonLabel` properties inside the `BootstrapCard` function and also on the `` 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 `` tag (with Bob Dylan's information by default). Do it the same way `title` was already included in both. ## 💡 Hints: @@ -66,8 +66,8 @@ BootstrapCard.propTypes = { + 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 `` tag declaration including the 5 properties and their respective values. ++ The third step will be to use ReactDOM to add the `` 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. From 902883b21c7a5884b0fe9f7af29d7bf4b5e839fa Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 15:28:23 +0200 Subject: [PATCH 020/102] Update app.jsx --- exercises/03.3-component-properties/app.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/03.3-component-properties/app.jsx b/exercises/03.3-component-properties/app.jsx index 2a6bb5b2..c0ee4886 100644 --- a/exercises/03.3-component-properties/app.jsx +++ b/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 (
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 }; From 7673b555697fe36c496536f10b85374a75f38c38 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 15:32:05 +0200 Subject: [PATCH 021/102] Update tests.js --- exercises/03.3-component-properties/tests.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/exercises/03.3-component-properties/tests.js b/exercises/03.3-component-properties/tests.js index 4812f209..1d23bba7 100644 --- a/exercises/03.3-component-properties/tests.js +++ b/exercises/03.3-component-properties/tests.js @@ -9,12 +9,12 @@ test("ReactDOM.render needs to be called once", () => { expect(ReactDOM.render.mock.calls.length).toBe(1); }); -test("Component title is being passed properly", () => { +test("Component title has to be passed properly", () => { const component = ReactDOM.render.mock.calls[0][0]; expect(component.props.title).toBe("Bob Dylan"); }); -test("Component imageUrl is being passed properly", () => { +test("Component imageUrl has to be passed properly", () => { const component = ReactDOM.render.mock.calls[0][0]; if (component.props.imageUrl != undefined) { expect(component.props.imageUrl).toBe("https://github.com/4GeeksAcademy/react-tutorial-exercises/blob/master/.learn/assets/Dylan.png?raw=true"); @@ -23,14 +23,14 @@ test("Component imageUrl is being passed properly", () => { } }); -test("Component description is being passed properly", () => { +test("Component description has to be passed properly", () => { const component = ReactDOM.render.mock.calls[0][0]; expect(component.props.description).toBe( "Bob Dylan (born Robert Allen Zimmerman, May 24, 1941) is an American singer-songwriter." ); }); -test("Component buttonUrl is being passed properly", () => { +test("Component buttonUrl has to be passed properly", () => { const component = ReactDOM.render.mock.calls[0][0]; if (component.props.buttonUrl != undefined) { @@ -42,7 +42,7 @@ test("Component buttonUrl is being passed properly", () => { } }); -test("Component buttonLabel is being passed properly", () => { +test("Component buttonLabel has to be passed properly", () => { const component = ReactDOM.render.mock.calls[0][0]; expect(component.props.buttonLabel).toBe("Go to wikipedia"); }); From ac4ae1b4ffd25e95eeefd5340dbcaa760b23c588 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 15:46:54 +0200 Subject: [PATCH 022/102] Create solution.hide.jsx --- .../solution.hide.jsx | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 exercises/03.3-component-properties/solution.hide.jsx diff --git a/exercises/03.3-component-properties/solution.hide.jsx b/exercises/03.3-component-properties/solution.hide.jsx new file mode 100644 index 00000000..676db219 --- /dev/null +++ b/exercises/03.3-component-properties/solution.hide.jsx @@ -0,0 +1,44 @@ +import React from "react"; +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 + return ( + + ); +}; + +BootstrapCard.propTypes = { + // 2) Add here the new properties into the proptypes object + title: PropType.string, + imageUrl: PropType.string, + description: PropType.string, + buttonUrl: PropType.string, + buttonLabel: PropType.string, +}; + +// 3) Use ReactDOM to add the component into then DOM element #myDiv +ReactDOM.render( + , + document.getElementById("myDiv") +); From 4a62d3a3f34f29336e27409f3b49a0b8c0b332eb Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 15:51:40 +0200 Subject: [PATCH 023/102] Update README.md --- exercises/03.3-component-properties/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/03.3-component-properties/README.md b/exercises/03.3-component-properties/README.md index 00eecb90..0398d8b4 100644 --- a/exercises/03.3-component-properties/README.md +++ b/exercises/03.3-component-properties/README.md @@ -4,7 +4,7 @@ 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 `` component for **Paul McCartney** or any other person? What is the best way to do it? Use props! From a62463c258f6fc1c552ad80f7bdd3db0f523bb6d Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 15:54:06 +0200 Subject: [PATCH 024/102] Update README.md --- exercises/03.3-component-properties/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/03.3-component-properties/README.md b/exercises/03.3-component-properties/README.md index 0398d8b4..e0bad6cc 100644 --- a/exercises/03.3-component-properties/README.md +++ b/exercises/03.3-component-properties/README.md @@ -19,7 +19,7 @@ When you use the **anchor** tag (``) you have to specify the **href** propert Take me to twitter ``` -> Note: Here I'm re-using the anchor tag (``) for two different links +> Note: Here I'm re-using the anchor tag (``) for two different links. ## Using properties in React.js From 16cd9972b5832a2630b4aef74fece7ada220c90b Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:04:33 +0200 Subject: [PATCH 025/102] Update README.es.md --- .../03.3-component-properties/README.es.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/exercises/03.3-component-properties/README.es.md b/exercises/03.3-component-properties/README.es.md index e6c76ddd..bf1a9753 100644 --- a/exercises/03.3-component-properties/README.es.md +++ b/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 `` para **Paul Mccartney** o cualquier otra persona? ¿Cómo podriamos hacer? ¡Usa propiedades! +Pero, ¿qué pasa si queremos reutilizar el componente `` 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** (``) tienes que especificar la propiedad * Take me to twitter ``` -Nota: Aquí estoy reutilizando la etiqueta de enlace (``) en dos enlaces diferentes +> Nota: Aquí estoy reutilizando la etiqueta de enlace (``) 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 `` 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 `` de esta forma: ```jsx - //para Paul Mccartney - + // Para Paul McCartney + - //para Bob Dylan + // Para Bob Dylan ``` @@ -46,7 +46,7 @@ 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 }; @@ -54,16 +54,16 @@ BootstrapCard.propTypes = { ## 📝 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 `` (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 `` (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 `` incluyendo las 5 propiedades y sus respectivos valores. ++ El tercer paso será usar ReactDOM para añadir la declaración de la etiqueta `` incluyendo las 5 propiedades y sus respectivos valores. + No tienes que renderizar el componente muchas veces, solo una. From 62081ab38be54974e3a4f2549a2e36d7552f42f6 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:05:39 +0200 Subject: [PATCH 026/102] Update README.es.md --- exercises/03.3-component-properties/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/03.3-component-properties/README.es.md b/exercises/03.3-component-properties/README.es.md index bf1a9753..8268ccde 100644 --- a/exercises/03.3-component-properties/README.es.md +++ b/exercises/03.3-component-properties/README.es.md @@ -60,7 +60,7 @@ BootstrapCard.propTypes = { + Tienes que editar 3 partes del archivo (verifica los comentarios para ayudarte). -+ El primer paso es reemplazar la información hard-coded 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). From abef5fe5c8d93671acf1317e9eeadc22b595ac51 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:16:17 +0200 Subject: [PATCH 027/102] Update README.md --- exercises/03.4-jumbotron/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/03.4-jumbotron/README.md b/exercises/03.4-jumbotron/README.md index 544272be..978511bc 100644 --- a/exercises/03.4-jumbotron/README.md +++ b/exercises/03.4-jumbotron/README.md @@ -19,9 +19,9 @@ Using everything you have learned so far... /> ``` - ## Expected result: +## 💻 Expected result: - ![Jumbotron](../../.learn/assets/03.4-1.png?raw=true) +![Jumbotron](../../.learn/assets/03.4-1.png?raw=true) ## 💡 Hints: @@ -35,4 +35,4 @@ Using everything you have learned so far...

React is the most popular rendering library in the world

Go to the official website
-``` \ No newline at end of file +``` From 50ef07792033b92a68fe512778b4f8b397a42225 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:17:43 +0200 Subject: [PATCH 028/102] Update README.es.md --- exercises/03.4-jumbotron/README.es.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/03.4-jumbotron/README.es.md b/exercises/03.4-jumbotron/README.es.md index fe6d47e9..b5592aaa 100644 --- a/exercises/03.4-jumbotron/README.es.md +++ b/exercises/03.4-jumbotron/README.es.md @@ -15,9 +15,9 @@ Usando todo lo que has aprendido... /> ``` -##  Resultado Esperado: +## 💻 Resultado Esperado: - ![Jumbotron](../../.learn/assets/03.4-1.png?raw=true) +![Jumbotron](../../.learn/assets/03.4-1.png?raw=true) ## 💡 Pistas: From b9af790e6d76baaf7a45189c3b1ce116f4734711 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:20:53 +0200 Subject: [PATCH 029/102] Update app.jsx --- exercises/03.4-jumbotron/app.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/03.4-jumbotron/app.jsx b/exercises/03.4-jumbotron/app.jsx index 089112e8..5225b9bf 100644 --- a/exercises/03.4-jumbotron/app.jsx +++ b/exercises/03.4-jumbotron/app.jsx @@ -3,11 +3,11 @@ import ReactDOM from "react-dom"; import PropTypes from "prop-types"; const Jumbotron = props => { - //here you have to return expected html using the properties being passed to the component + // Here you have to return expected html using the properties being passed to the component }; Jumbotron.propTypes = { - //proptypes here + // PropTypes here title: PropTypes.string, }; From 59c5a8130e8853c151d3bf0725d91079294d7175 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:21:27 +0200 Subject: [PATCH 030/102] Update tests.js --- exercises/03.4-jumbotron/tests.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/03.4-jumbotron/tests.js b/exercises/03.4-jumbotron/tests.js index 89fcce02..981c6301 100644 --- a/exercises/03.4-jumbotron/tests.js +++ b/exercises/03.4-jumbotron/tests.js @@ -9,24 +9,24 @@ test("ReactDOM needs to be called once", () => { expect(ReactDOM.render.mock.calls.length).toBe(1); }); -test("Component title is being passed properly", () => { +test("Component title has to be passed properly", () => { const component = ReactDOM.render.mock.calls[0][0]; expect(component.props.title).toBe("Welcome to react"); }); -test("Component description is being passed properly", () => { +test("Component description has to be passed properly", () => { const component = ReactDOM.render.mock.calls[0][0]; expect(component.props.description).toBe( "React is the most popular rendering library in the world" ); }); -test("Component buttonLabel is being passed properly", () => { +test("Component buttonLabel has to be passed properly", () => { const component = ReactDOM.render.mock.calls[0][0]; expect(component.props.buttonLabel).toBe("Go to the official website"); }); -test("Component buttonURL is being passed properly", () => { +test("Component buttonURL has to be passed properly", () => { const component = ReactDOM.render.mock.calls[0][0]; expect(component.props.buttonURL).toBe("https://reactjs.org/"); }); From a624e634e514d45af4e6a45d10a8280801d0c00e Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:29:27 +0200 Subject: [PATCH 031/102] Create solution.hide.jsx --- exercises/03.4-jumbotron/solution.hide.jsx | 32 ++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 exercises/03.4-jumbotron/solution.hide.jsx diff --git a/exercises/03.4-jumbotron/solution.hide.jsx b/exercises/03.4-jumbotron/solution.hide.jsx new file mode 100644 index 00000000..2250dce8 --- /dev/null +++ b/exercises/03.4-jumbotron/solution.hide.jsx @@ -0,0 +1,32 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import PropTypes from "prop-types"; + +const Jumbotron = (props) => { + // Here you have to return expected html using the properties being passed to the component + return ( +
+

{props.title}

+

{props.description}

+ + {props.buttonLabel} + +
+ ); +}; + +Jumbotron.propTypes = { + // PropTypes here + title: PropTypes.string, +}; + +ReactDOM.render( + , + + document.querySelector("#myDiv") +); From 16e78e7db92106ea7759dac7c290dfd0fb20f5c9 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:30:21 +0200 Subject: [PATCH 032/102] Update solution.hide.jsx --- exercises/03.4-jumbotron/solution.hide.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/exercises/03.4-jumbotron/solution.hide.jsx b/exercises/03.4-jumbotron/solution.hide.jsx index 2250dce8..d39ee42d 100644 --- a/exercises/03.4-jumbotron/solution.hide.jsx +++ b/exercises/03.4-jumbotron/solution.hide.jsx @@ -18,6 +18,9 @@ const Jumbotron = (props) => { Jumbotron.propTypes = { // PropTypes here title: PropTypes.string, + description: PropTypes.string, + buttonLabel: PropTypes.string, + buttonURL: PropTypes.string }; ReactDOM.render( From 2bdefc28dd5cdee0504080924952f9b3679b30d8 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:42:11 +0200 Subject: [PATCH 033/102] Update README.md --- exercises/03.5-alert-component/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/exercises/03.5-alert-component/README.md b/exercises/03.5-alert-component/README.md index 4dc7f740..237b00d0 100644 --- a/exercises/03.5-alert-component/README.md +++ b/exercises/03.5-alert-component/README.md @@ -8,15 +8,15 @@ Based on the knowledge that you now have: ## 📝 Instructions: -1. Please create an `` 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: +1. Please create an `` component that receives 1 prop `text: Proptype.string` and renders a [bootstrap alert](https://getbootstrap.com/docs/5.0/components/alerts/#examples) like the following: -## Expected Result: +## 💻 Expected Result: -This is What the component should output as HTML: +This is what the component should output as HTML: ```html ``` ## 💡 Hint: @@ -24,5 +24,5 @@ This is What the component should output as HTML: + This is how the component should be used: ```jsx - + ``` From 98a13641d230d016c5bc8a5fd85cd18b4c1169ec Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:43:31 +0200 Subject: [PATCH 034/102] Update README.es.md --- exercises/03.5-alert-component/README.es.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/exercises/03.5-alert-component/README.es.md b/exercises/03.5-alert-component/README.es.md index b9c2ff3d..71bf45fc 100644 --- a/exercises/03.5-alert-component/README.es.md +++ b/exercises/03.5-alert-component/README.es.md @@ -1,18 +1,18 @@ # `03.5` Alert Component -Basándote en el conocimiento que ahora tienes: +Basado en el conocimiento que tienes ahora: ## 📝 Instrucciones: -1. Por favor, crea un componente `` que reciba 1 prop `text: Proptype.string` y renderice una [bootstrap alert](https://getbootstrap.com/docs/4.0/components/alerts/#examples) como la siguiente: +1. Por favor, crea un componente `` que reciba 1 prop `text: Proptype.string` y renderice una [bootstrap alert](https://getbootstrap.com/docs/5.0/components/alerts/#examples) como la siguiente: -## Resultado esperado: +## 💻 Resultado esperado: Esto es lo que el componente debería generar en el HTML: ```html ``` @@ -21,5 +21,5 @@ Esto es lo que el componente debería generar en el HTML: + Así es como deberías usar el componente: ```jsx - + ``` From 81273f139300d5d0c95d36d5c4151f86b75bfded Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:45:05 +0200 Subject: [PATCH 035/102] Update app.jsx --- exercises/03.5-alert-component/app.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/exercises/03.5-alert-component/app.jsx b/exercises/03.5-alert-component/app.jsx index 61995629..b59b4e2a 100644 --- a/exercises/03.5-alert-component/app.jsx +++ b/exercises/03.5-alert-component/app.jsx @@ -3,11 +3,11 @@ import ReactDOM from "react-dom"; import PropTypes from "prop-types"; /** - * here you have declare your Alert component and return + * Here you have to declare your Alert component and return * the html that bootstrap dictates for its alert component */ -// here is where the alert component is being used, you don't have to edit this part, -// but it helps you understan what properties is the component using -ReactDOM.render(, document.querySelector("#myDiv")); +// Here is where the component is being used, you don't have to edit this part +// But it helps you understand what properties the component is using +ReactDOM.render(, document.querySelector("#myDiv")); From c054ca4143979a88c67760c7462e2c09ffb9c6b2 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:46:29 +0200 Subject: [PATCH 036/102] Update tests.js --- exercises/03.5-alert-component/tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/03.5-alert-component/tests.js b/exercises/03.5-alert-component/tests.js index 2599d007..380795bd 100644 --- a/exercises/03.5-alert-component/tests.js +++ b/exercises/03.5-alert-component/tests.js @@ -9,9 +9,9 @@ test("ReactDOM needs to be called once", () => { expect(ReactDOM.render.mock.calls.length).toBe(1); }); -test("Component text is being passed properly", () => { +test("Component text has to be passed properly", () => { const component = ReactDOM.render.mock.calls[0][0]; - expect(component.props.text).toBe("OMG! Something really bad has happended!"); + expect(component.props.text).toBe("OMG! Something really bad has happened!"); }); test("The component should return the exact HTML", () => { From 6ab85e881964d98f228fa8937bdbcba207ce8290 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:48:25 +0200 Subject: [PATCH 037/102] Update tests.js --- exercises/03.5-alert-component/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/03.5-alert-component/tests.js b/exercises/03.5-alert-component/tests.js index 380795bd..b2b2c44a 100644 --- a/exercises/03.5-alert-component/tests.js +++ b/exercises/03.5-alert-component/tests.js @@ -21,7 +21,7 @@ test("The component should return the exact HTML", () => { className="alert alert-danger" role="alert" > - OMG! Something really bad has happended! + OMG! Something really bad has happened!
`); }); From b97ce369bb00ce8ab0010a8782b331bfebf87c0e Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:49:31 +0200 Subject: [PATCH 038/102] Update README.es.md --- exercises/03.5-alert-component/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/03.5-alert-component/README.es.md b/exercises/03.5-alert-component/README.es.md index 71bf45fc..8080da6d 100644 --- a/exercises/03.5-alert-component/README.es.md +++ b/exercises/03.5-alert-component/README.es.md @@ -4,7 +4,7 @@ Basado en el conocimiento que tienes ahora: ## 📝 Instrucciones: -1. Por favor, crea un componente `` que reciba 1 prop `text: Proptype.string` y renderice una [bootstrap alert](https://getbootstrap.com/docs/5.0/components/alerts/#examples) como la siguiente: +1. Por favor, crea un componente `` que reciba 1 prop `text: PropTypes.string` y renderice una [bootstrap alert](https://getbootstrap.com/docs/5.0/components/alerts/#examples) como la siguiente: ## 💻 Resultado esperado: From fd14220632b68e1b823f5fd0b097351e6d28cf66 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:49:46 +0200 Subject: [PATCH 039/102] Update README.md --- exercises/03.5-alert-component/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/03.5-alert-component/README.md b/exercises/03.5-alert-component/README.md index 237b00d0..a9982885 100644 --- a/exercises/03.5-alert-component/README.md +++ b/exercises/03.5-alert-component/README.md @@ -8,7 +8,7 @@ Based on the knowledge that you now have: ## 📝 Instructions: -1. Please create an `` component that receives 1 prop `text: Proptype.string` and renders a [bootstrap alert](https://getbootstrap.com/docs/5.0/components/alerts/#examples) like the following: +1. Please create an `` component that receives 1 prop `text: PropTypes.string` and renders a [bootstrap alert](https://getbootstrap.com/docs/5.0/components/alerts/#examples) like the following: ## 💻 Expected Result: From 77b04dcd4b885a9526f3c4d03aacebb0100b83e6 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:51:53 +0200 Subject: [PATCH 040/102] Create solution.hide.jsx --- .../03.5-alert-component/solution.hide.jsx | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 exercises/03.5-alert-component/solution.hide.jsx diff --git a/exercises/03.5-alert-component/solution.hide.jsx b/exercises/03.5-alert-component/solution.hide.jsx new file mode 100644 index 00000000..0da71327 --- /dev/null +++ b/exercises/03.5-alert-component/solution.hide.jsx @@ -0,0 +1,23 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import PropTypes from "prop-types"; + +/** + * Here you have to declare your Alert component and return + * the html that bootstrap dictates for its alert component + */ +const Alert = (props) => { + return ( +
+ {props.text} +
+ ); +}; + +Alert.propTypes = { + text: PropTypes.string +}; + +// Here is where the component is being used, you don't have to edit this part +// But it helps you understand what properties the component is using +ReactDOM.render(, document.querySelector("#myDiv")); From 2ccf483b052c5c0a8e23f2f962398125fa5a96f1 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:04:09 +0200 Subject: [PATCH 041/102] Update README.md --- exercises/04-conditional-rendering/README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/exercises/04-conditional-rendering/README.md b/exercises/04-conditional-rendering/README.md index 7673f1bc..0025cc1f 100644 --- a/exercises/04-conditional-rendering/README.md +++ b/exercises/04-conditional-rendering/README.md @@ -7,14 +7,14 @@ tutorial: "https://www.youtube.com/watch?v=1O9uUXymny4" You can also use the component properties to change its behavior, like show or hide your `` based on a property called `show`. ```jsx -{/* This will make your alert show */} +/* This will make your alert show */ -{/* This will make your alert to be hidden */} +/* This will make your alert to be hidden */ ``` -We can acomplish that by adding a `if... else...` statement inside the render method like this: +We can acomplish that by adding an `if...else` statement inside the render method like this: ```jsx const Alert = (props) => { @@ -27,16 +27,16 @@ const Alert = (props) => { }; ``` -Note: ☝️ 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://react.dev/learn/conditional-rendering). ## 📝 Instructions: -1. Create an `` component that renders a [bootstrap alert](https://getbootstrap.com/docs/4.0/components/alerts/#examples). +1. Create an `` component that renders a [bootstrap alert](https://getbootstrap.com/docs/5.0/components/alerts/#examples). ## 💡 Hint: The component must be able to receive the following 2 properties: -+ Show (bool): True or false. ++ Show (boolean): True or false. -+ Text (string): The message to include inside the alert message. \ No newline at end of file ++ Text (string): The message to include inside the alert message. From 115134cef89d59a6389c99fe8fa0c6835213bcb7 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:04:41 +0200 Subject: [PATCH 042/102] Update README.md --- exercises/04-conditional-rendering/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/04-conditional-rendering/README.md b/exercises/04-conditional-rendering/README.md index 0025cc1f..b7abcf4d 100644 --- a/exercises/04-conditional-rendering/README.md +++ b/exercises/04-conditional-rendering/README.md @@ -37,6 +37,6 @@ const Alert = (props) => { The component must be able to receive the following 2 properties: -+ Show (boolean): True or false. ++ show (boolean): True or false. -+ Text (string): The message to include inside the alert message. ++ text (string): The message to include inside the alert message. From 427bbe86276a6aa3a5be0bee7fc3838b8ee09f16 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:05:42 +0200 Subject: [PATCH 043/102] Update README.md --- exercises/04-conditional-rendering/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/04-conditional-rendering/README.md b/exercises/04-conditional-rendering/README.md index b7abcf4d..bc59aad1 100644 --- a/exercises/04-conditional-rendering/README.md +++ b/exercises/04-conditional-rendering/README.md @@ -14,7 +14,7 @@ You can also use the component properties to change its behavior, like show or h ``` -We can acomplish that by adding an `if...else` statement inside the render method like this: +We can accomplish that by adding an `if...else` statement inside the render method like this: ```jsx const Alert = (props) => { @@ -27,7 +27,7 @@ const Alert = (props) => { }; ``` -> Note: ☝️ Returning different HTML code based on conditions its formally called [conditional rendering](https://react.dev/learn/conditional-rendering). +> Note: ☝️ Returning different HTML code based on conditions is formally called [conditional rendering](https://react.dev/learn/conditional-rendering). ## 📝 Instructions: From c53ab2154223756c4c00bf961bfa9db4cbfa9785 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:09:16 +0200 Subject: [PATCH 044/102] Update README.es.md --- exercises/04-conditional-rendering/README.es.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/exercises/04-conditional-rendering/README.es.md b/exercises/04-conditional-rendering/README.es.md index 8aa355bc..28fd849f 100644 --- a/exercises/04-conditional-rendering/README.es.md +++ b/exercises/04-conditional-rendering/README.es.md @@ -1,16 +1,16 @@ # `04` Conditional Rendering -También puedes usar las propiedades de un componente para cambiar su comportamiento y como mostrar u ocultar ``, según una propiedad llamada `show`. +También puedes usar las propiedades de un componente para cambiar su comportamiento como mostrar u ocultar ``, según una propiedad llamada `show`. ```jsx -{/* Esto hará que tu alerta se muestre */} +/* Esto hará que tu alerta se muestre */ -{/* Esto hará que tu alerta se oculte */} +/* Esto hará que tu alerta se oculte */ ``` -Podemos lograrlo incorporando un `if... else...` dentro del método render como aquí: +Podemos lograrlo incorporando un `if...else` dentro del método render como aquí: ```jsx const Alert = (props) => { @@ -23,16 +23,16 @@ const Alert = (props) => { }; ``` -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/). +Nota: ☝️ Devolver distinto código HTML según ciertas condiciones es llamado formalmente [renderizado condicional](https://react.dev/learn/conditional-rendering). ## 📝 Instrucciones: -1. Crea un componente `` que renderice una [bootstrap alert](https://getbootstrap.com/docs/4.0/components/alerts/#examples). +1. Crea un componente `` que renderice una [bootstrap alert](https://getbootstrap.com/docs/5.0/components/alerts/#examples). ## 💡 Pista: El componente debe ser capaz de recibir las siguientes dos propiedades: -+ Show (bool): veradero o falso. ++ `show` (boolean): true o false. -+ Text (string): El mensaje a incluir dentro del mensaje del ``. \ No newline at end of file ++ `text` (string): El mensaje a incluir dentro del mensaje del ``. From 74fdbae0801dfc91e6e744ab1812ba90f6312a03 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:09:57 +0200 Subject: [PATCH 045/102] Update README.md --- exercises/04-conditional-rendering/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/04-conditional-rendering/README.md b/exercises/04-conditional-rendering/README.md index bc59aad1..ba012194 100644 --- a/exercises/04-conditional-rendering/README.md +++ b/exercises/04-conditional-rendering/README.md @@ -37,6 +37,6 @@ const Alert = (props) => { The component must be able to receive the following 2 properties: -+ show (boolean): True or false. ++ `show` (boolean): True or false. -+ text (string): The message to include inside the alert message. ++ `text` (string): The message to include in the alert. From eac6ff176102b7e1e199c1f46b184a8ab9c264c7 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:10:24 +0200 Subject: [PATCH 046/102] Update README.es.md --- exercises/04-conditional-rendering/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04-conditional-rendering/README.es.md b/exercises/04-conditional-rendering/README.es.md index 28fd849f..ca310fb1 100644 --- a/exercises/04-conditional-rendering/README.es.md +++ b/exercises/04-conditional-rendering/README.es.md @@ -35,4 +35,4 @@ El componente debe ser capaz de recibir las siguientes dos propiedades: + `show` (boolean): true o false. -+ `text` (string): El mensaje a incluir dentro del mensaje del ``. ++ `text` (string): El mensaje a incluir en la alerta. From bcb1484cfa669e730320a42edc02839422122bc9 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:10:45 +0200 Subject: [PATCH 047/102] Update README.es.md --- exercises/04-conditional-rendering/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04-conditional-rendering/README.es.md b/exercises/04-conditional-rendering/README.es.md index ca310fb1..352ffb5d 100644 --- a/exercises/04-conditional-rendering/README.es.md +++ b/exercises/04-conditional-rendering/README.es.md @@ -23,7 +23,7 @@ const Alert = (props) => { }; ``` -Nota: ☝️ Devolver distinto código HTML según ciertas condiciones es llamado formalmente [renderizado condicional](https://react.dev/learn/conditional-rendering). +> Nota: ☝️ Devolver distinto código HTML según ciertas condiciones es llamado formalmente [renderizado condicional](https://react.dev/learn/conditional-rendering). ## 📝 Instrucciones: From e14afcbd767e95310ed97318560b526eff726cea Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:11:31 +0200 Subject: [PATCH 048/102] Update README.md --- exercises/04-conditional-rendering/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/04-conditional-rendering/README.md b/exercises/04-conditional-rendering/README.md index ba012194..06578e54 100644 --- a/exercises/04-conditional-rendering/README.md +++ b/exercises/04-conditional-rendering/README.md @@ -7,10 +7,10 @@ tutorial: "https://www.youtube.com/watch?v=1O9uUXymny4" You can also use the component properties to change its behavior, like show or hide your `` based on a property called `show`. ```jsx -/* This will make your alert show */ +// This will make your alert show -/* This will make your alert to be hidden */ +// This will make your alert to be hidden ``` From aaf8bc1f4549ad0251acb8097593de3f5cb3e7c8 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:13:01 +0200 Subject: [PATCH 049/102] Update README.md --- exercises/04-conditional-rendering/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/04-conditional-rendering/README.md b/exercises/04-conditional-rendering/README.md index 06578e54..520e7bb0 100644 --- a/exercises/04-conditional-rendering/README.md +++ b/exercises/04-conditional-rendering/README.md @@ -7,10 +7,10 @@ tutorial: "https://www.youtube.com/watch?v=1O9uUXymny4" You can also use the component properties to change its behavior, like show or hide your `` based on a property called `show`. ```jsx -// This will make your alert show +{/* This will make your alert show */} -// This will make your alert to be hidden +{/* This will make your alert to be hidden */} ``` From 0ecf20b1fa0be0671f5fe7a4dda7154d41aae4f7 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:13:14 +0200 Subject: [PATCH 050/102] Update README.es.md --- exercises/04-conditional-rendering/README.es.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/04-conditional-rendering/README.es.md b/exercises/04-conditional-rendering/README.es.md index 352ffb5d..d7937ba7 100644 --- a/exercises/04-conditional-rendering/README.es.md +++ b/exercises/04-conditional-rendering/README.es.md @@ -3,10 +3,10 @@ También puedes usar las propiedades de un componente para cambiar su comportamiento como mostrar u ocultar ``, según una propiedad llamada `show`. ```jsx -/* Esto hará que tu alerta se muestre */ +{/* Esto hará que tu alerta se muestre */} -/* Esto hará que tu alerta se oculte */ +{/* Esto hará que tu alerta se oculte */} ``` From 6a0b7491bf62e04c425eaaab03b06ed9b7cd1913 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:22:39 +0200 Subject: [PATCH 051/102] Update app.jsx --- exercises/04-conditional-rendering/app.jsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/exercises/04-conditional-rendering/app.jsx b/exercises/04-conditional-rendering/app.jsx index 450d9e8b..c1f14cb9 100644 --- a/exercises/04-conditional-rendering/app.jsx +++ b/exercises/04-conditional-rendering/app.jsx @@ -3,21 +3,22 @@ import ReactDOM from "react-dom"; import PropTypes from "prop-types"; const Alert = props => { - //add the condition inside this function + // Add the condition inside this function return ( -
+
This is a primary alert-check it out!
); }; + Alert.propTypes = { color: PropTypes.string, text: PropTypes.string }; -// here is where the alert component is being used, you don't have to edit this part, -// but it helps you understand what properties are being passed to the component +// Here is where the component is being used, you don't have to edit this part +// But it helps you understand what properties are being passed to the component ReactDOM.render(
From df683bf53dc43dd5656af7a213dfb425650c5b60 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:24:15 +0200 Subject: [PATCH 052/102] Update tests.js --- exercises/04-conditional-rendering/tests.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/exercises/04-conditional-rendering/tests.js b/exercises/04-conditional-rendering/tests.js index 65f1d16e..eafa58fb 100644 --- a/exercises/04-conditional-rendering/tests.js +++ b/exercises/04-conditional-rendering/tests.js @@ -10,21 +10,20 @@ jest.mock("react-dom", () => ({ render: jest.fn() })); test("ReactDOM needs to be called once", () => { expect(ReactDOM.render.mock.calls.length).toBe(1); }); -test('Use "if/else" conditional', function(){ + +test('Use an "if...else" conditional', function(){ const data = fs.readFileSync('./exercises/04-conditional-rendering/app.jsx'); const regex = /\s*if\s*/gm; expect(regex.exec(data)).toBeTruthy(); }); - - test("The component Alert should return the exact HTML", () => { const tree = renderer.create(ReactDOM.render.mock.calls[0][0]).toJSON(); expect(tree).toMatchInlineSnapshot(`
This is a primary alert-check it out! From 9d8269aebd9273d0085c9b43384e408039d34b07 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:38:42 +0200 Subject: [PATCH 053/102] Update README.md --- exercises/04-conditional-rendering/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04-conditional-rendering/README.md b/exercises/04-conditional-rendering/README.md index 520e7bb0..8170957d 100644 --- a/exercises/04-conditional-rendering/README.md +++ b/exercises/04-conditional-rendering/README.md @@ -37,6 +37,6 @@ const Alert = (props) => { The component must be able to receive the following 2 properties: -+ `show` (boolean): True or false. ++ `show` (bool): True or false. + `text` (string): The message to include in the alert. From 400fb49c9c1ef7611da3b623d93abd8f9356bf27 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:38:48 +0200 Subject: [PATCH 054/102] Update README.es.md --- exercises/04-conditional-rendering/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04-conditional-rendering/README.es.md b/exercises/04-conditional-rendering/README.es.md index d7937ba7..70944a12 100644 --- a/exercises/04-conditional-rendering/README.es.md +++ b/exercises/04-conditional-rendering/README.es.md @@ -33,6 +33,6 @@ const Alert = (props) => { El componente debe ser capaz de recibir las siguientes dos propiedades: -+ `show` (boolean): true o false. ++ `show` (bool): true o false. + `text` (string): El mensaje a incluir en la alerta. From 7cb6a38fd91fee804e2d434ad4a372f52bfa1b26 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:45:00 +0200 Subject: [PATCH 055/102] Update tests.js --- exercises/04-conditional-rendering/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04-conditional-rendering/tests.js b/exercises/04-conditional-rendering/tests.js index eafa58fb..eddcf3d3 100644 --- a/exercises/04-conditional-rendering/tests.js +++ b/exercises/04-conditional-rendering/tests.js @@ -26,7 +26,7 @@ test("The component Alert should return the exact HTML", () => { className="alert alert-primary" role="alert" > - This is a primary alert-check it out! + This is a primary alert - check it out!
`); From 0eb98725e367cb1fb24993df79974d59cbf9898b Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:48:43 +0200 Subject: [PATCH 056/102] Update solution.hide.jsx --- .../solution.hide.jsx | 48 ++++++++----------- 1 file changed, 21 insertions(+), 27 deletions(-) diff --git a/exercises/04-conditional-rendering/solution.hide.jsx b/exercises/04-conditional-rendering/solution.hide.jsx index 58b6d171..e9e8b193 100644 --- a/exercises/04-conditional-rendering/solution.hide.jsx +++ b/exercises/04-conditional-rendering/solution.hide.jsx @@ -2,36 +2,30 @@ import React from "react"; import ReactDOM from "react-dom"; import PropTypes from "prop-types"; -const Alert = props => { - //add the condition inside this function - - if (props.show === false) { - return null; - } - else { - // return here the component html - return ( -
- This is a primary alert-check it out! -
- ); - - } - - - +const Alert = (props) => { + // Add the condition inside this function + if (props.show === false) { + return null; + } else { + return ( +
+ {props.text} +
+ ); + } }; + Alert.propTypes = { - color: PropTypes.string, - text: PropTypes.string + show: PropTypes.bool, + text: PropTypes.string, }; -// here is where the alert component is being used, you don't have to edit this part, -// but it helps you understand what properties are being passed to the component +// Here is where the component is being used, you don't have to edit this part +// But it helps you understand what properties are being passed to the component ReactDOM.render( -
- - -
, - document.querySelector("#myDiv") +
+ + +
, + document.querySelector("#myDiv") ); From e876ccf0d796e1b42ad4302e30333a11005391af Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:50:14 +0200 Subject: [PATCH 057/102] Update app.jsx --- exercises/04-conditional-rendering/app.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/exercises/04-conditional-rendering/app.jsx b/exercises/04-conditional-rendering/app.jsx index c1f14cb9..364b2d3c 100644 --- a/exercises/04-conditional-rendering/app.jsx +++ b/exercises/04-conditional-rendering/app.jsx @@ -13,8 +13,7 @@ const Alert = props => { }; Alert.propTypes = { - color: PropTypes.string, - text: PropTypes.string + }; // Here is where the component is being used, you don't have to edit this part @@ -22,7 +21,7 @@ Alert.propTypes = { ReactDOM.render(
- +
, document.querySelector("#myDiv") ); From da2efde1d8cd537c11dffbe4020ffb1d0d93949b Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:57:07 +0200 Subject: [PATCH 058/102] Update README.md --- exercises/04-conditional-rendering/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04-conditional-rendering/README.md b/exercises/04-conditional-rendering/README.md index 8170957d..99e5788c 100644 --- a/exercises/04-conditional-rendering/README.md +++ b/exercises/04-conditional-rendering/README.md @@ -31,7 +31,7 @@ const Alert = (props) => { ## 📝 Instructions: -1. Create an `` component that renders a [bootstrap alert](https://getbootstrap.com/docs/5.0/components/alerts/#examples). +1. Implement a conditional rendering in the `` component to display the component when the `show` property is `true` and hide it when it's `false`. ## 💡 Hint: From 5e414aae671d53b16dab43d240bee0d672032547 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:58:32 +0200 Subject: [PATCH 059/102] Update README.es.md --- exercises/04-conditional-rendering/README.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04-conditional-rendering/README.es.md b/exercises/04-conditional-rendering/README.es.md index 70944a12..b49d7de3 100644 --- a/exercises/04-conditional-rendering/README.es.md +++ b/exercises/04-conditional-rendering/README.es.md @@ -27,7 +27,7 @@ const Alert = (props) => { ## 📝 Instrucciones: -1. Crea un componente `` que renderice una [bootstrap alert](https://getbootstrap.com/docs/5.0/components/alerts/#examples). +1. Implementa un renderizado condicional en el componente `` para mostrar el componente cuando la propiedad `show` es `true` y ocultarlo cuando es `false`. ## 💡 Pista: From b95c2591c93aaf53f18cc1efe41316e96a7934c6 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:59:19 +0200 Subject: [PATCH 060/102] Update app.jsx --- exercises/04-conditional-rendering/app.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04-conditional-rendering/app.jsx b/exercises/04-conditional-rendering/app.jsx index 364b2d3c..c2522bb7 100644 --- a/exercises/04-conditional-rendering/app.jsx +++ b/exercises/04-conditional-rendering/app.jsx @@ -7,7 +7,7 @@ const Alert = props => { return (
- This is a primary alert-check it out! + This is a primary alert - check it out!
); }; From c96b5453e23a0fbd917ae94e0be8faf5306897f5 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:59:58 +0200 Subject: [PATCH 061/102] Update app.jsx --- exercises/04-conditional-rendering/app.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04-conditional-rendering/app.jsx b/exercises/04-conditional-rendering/app.jsx index c2522bb7..05c135ed 100644 --- a/exercises/04-conditional-rendering/app.jsx +++ b/exercises/04-conditional-rendering/app.jsx @@ -20,7 +20,7 @@ Alert.propTypes = { // But it helps you understand what properties are being passed to the component ReactDOM.render(
- +
, document.querySelector("#myDiv") From 73acbe3cdf8e02a4f854c9bfadd1fe41e19c2adc Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 18:38:21 +0200 Subject: [PATCH 062/102] Update README.md --- .../04.1-conditional-rendering/README.md | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/exercises/04.1-conditional-rendering/README.md b/exercises/04.1-conditional-rendering/README.md index 0b3882c2..f8df363d 100644 --- a/exercises/04.1-conditional-rendering/README.md +++ b/exercises/04.1-conditional-rendering/README.md @@ -6,11 +6,9 @@ tutorial: "https://www.youtube.com/watch?v=hEY3YRQN0uk" Let's make our `` component a little bit smarter. -When using JSX you have all of the Javascript functionalities available: Variables, Loops, Conditionals, etc. +When using JSX, you have all the JavaScript functionalities available: Variables, Loops, Conditionals, etc. -We have already used loops and variables, it's time to use conditionals! - -For example, the following code renders a red or orange alert depending on the `color` property. +For example, the following code renders a red or orange alert, depending on the `color` property. ```jsx const colorClasses = { @@ -33,18 +31,18 @@ We are declaring a variable `colorClasses` that will contain all the class names The component must be able to receive the following 2 properties: -+ Text (string): The text content that will be displayed on the alert. ++ `text` (string): The text content that will be displayed on the alert. -+ Color (string): Red or Orange. ++ `color` (string): The colors red or orange. ```jsx -//for red color +// For red color -//for yellow color +// For yellow color -``` \ No newline at end of file +``` From 5263ad729f8ec23df73a1eb6f0115870e98fa194 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 18:39:51 +0200 Subject: [PATCH 063/102] Update README.md --- exercises/04.1-conditional-rendering/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/04.1-conditional-rendering/README.md b/exercises/04.1-conditional-rendering/README.md index f8df363d..532313ee 100644 --- a/exercises/04.1-conditional-rendering/README.md +++ b/exercises/04.1-conditional-rendering/README.md @@ -36,12 +36,12 @@ The component must be able to receive the following 2 properties: + `color` (string): The colors red or orange. ```jsx -// For red color +{/* For red color */} -// For yellow color +{/* For yellow color */} From 6942c5c4a947722a029923e972f2f7944593b9d6 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 18:41:07 +0200 Subject: [PATCH 064/102] Update README.md --- exercises/04.1-conditional-rendering/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04.1-conditional-rendering/README.md b/exercises/04.1-conditional-rendering/README.md index 532313ee..d6f7cddb 100644 --- a/exercises/04.1-conditional-rendering/README.md +++ b/exercises/04.1-conditional-rendering/README.md @@ -4,7 +4,7 @@ tutorial: "https://www.youtube.com/watch?v=hEY3YRQN0uk" # `04.1` Conditional Rendering -Let's make our `` component a little bit smarter. +Let's make our `` component a little bit smarter. When using JSX, you have all the JavaScript functionalities available: Variables, Loops, Conditionals, etc. From 62e07cd51d92980beebf165d76eaaaa54c2edf5b Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 18:44:31 +0200 Subject: [PATCH 065/102] Update README.es.md --- .../04.1-conditional-rendering/README.es.md | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/exercises/04.1-conditional-rendering/README.es.md b/exercises/04.1-conditional-rendering/README.es.md index 34a3df7b..8b63147c 100644 --- a/exercises/04.1-conditional-rendering/README.es.md +++ b/exercises/04.1-conditional-rendering/README.es.md @@ -1,11 +1,9 @@ # `04.1` Conditional Rendering -Hagamos nuestro componente `` un poco más inteligente. +Hagamos nuestro componente `` un poco más inteligente. Cuando usas JSX tienes todas las funcionalidades de JavaScript disponibles: Variables, Bucles, Condicionales, etc. -Ya hemos usado bucles y variables, ¡es momento de usar condicionales! - Por ejemplo, el siguiente código renderiza una alerta roja o naranja dependiendo de la propiedad `color`. ```jsx @@ -14,7 +12,7 @@ const colorClasses = { 'orange': 'alert-warning' } -