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. diff --git a/exercises/03-render-with-functions/README.md b/exercises/03-render-with-functions/README.md index bd4396df..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 re-use your code +It is a strongly recommended practice because it lets you create templates and re-use your code. For example: @@ -15,7 +15,7 @@ For example: const PrintHello = () => { return

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. 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 = () => { 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")); diff --git a/exercises/03.1-your-first-component/README.es.md b/exercises/03.1-your-first-component/README.es.md index a1cd6bc9..54bff72f 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(); ``` @@ -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). 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(); ``` 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")); 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")); diff --git a/exercises/03.2-a-real-component/README.es.md b/exercises/03.2-a-real-component/README.es.md index 71c06c61..aeae446a 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,12 +18,14 @@ 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: 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. diff --git a/exercises/03.2-a-real-component/README.md b/exercises/03.2-a-real-component/README.md index 3cbac2eb..4444c874 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,12 +23,14 @@ 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: +## 💡 Hints: + If you don't know or remember how to use `ReactDOM.render` you can review the past exercises. + ++ Remember to use the correct React syntax `className` instead of `class` when creating your bootstrap card. 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 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..a477367e --- /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 +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")); diff --git a/exercises/03.3-component-properties/README.es.md b/exercises/03.3-component-properties/README.es.md index e6c76ddd..8268ccde 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. diff --git a/exercises/03.3-component-properties/README.md b/exercises/03.3-component-properties/README.md index b58c2ff0..e0bad6cc 100644 --- a/exercises/03.3-component-properties/README.md +++ b/exercises/03.3-component-properties/README.md @@ -4,13 +4,13 @@ tutorial: "https://www.youtube.com/watch?v=79ho2T5Zy6U" # `03.3` Component Properties -The `BootstrapCard` you just made right now is [hard coded](https://www.youtube.com/watch?v=8AfUqg5pUQQ) for **Bob Dylan** only. +The `BootstrapCard` you just made right now is [hard coded](https://en.wikipedia.org/wiki/Hard_coding) for **Bob Dylan** only. -But, what if we also want to re-use the same `` 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. 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 }; 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") +); 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"); }); 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: 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 +``` 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, }; diff --git a/exercises/03.4-jumbotron/solution.hide.jsx b/exercises/03.4-jumbotron/solution.hide.jsx new file mode 100644 index 00000000..d39ee42d --- /dev/null +++ b/exercises/03.4-jumbotron/solution.hide.jsx @@ -0,0 +1,35 @@ +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, + description: PropTypes.string, + buttonLabel: PropTypes.string, + buttonURL: PropTypes.string +}; + +ReactDOM.render( + , + + document.querySelector("#myDiv") +); 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/"); }); diff --git a/exercises/03.5-alert-component/README.es.md b/exercises/03.5-alert-component/README.es.md index b9c2ff3d..8080da6d 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: PropTypes.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 - + ``` diff --git a/exercises/03.5-alert-component/README.md b/exercises/03.5-alert-component/README.md index 4dc7f740..a9982885 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: PropTypes.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 - + ``` 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")); 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")); diff --git a/exercises/03.5-alert-component/tests.js b/exercises/03.5-alert-component/tests.js index 2599d007..b2b2c44a 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", () => { @@ -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! `); }); diff --git a/exercises/04-conditional-rendering/README.es.md b/exercises/04-conditional-rendering/README.es.md index 8aa355bc..b49d7de3 100644 --- a/exercises/04-conditional-rendering/README.es.md +++ b/exercises/04-conditional-rendering/README.es.md @@ -1,6 +1,6 @@ # `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 */} @@ -10,7 +10,7 @@ También puedes usar las propiedades de un componente para cambiar su comportami ``` -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. Implementa un renderizado condicional en el componente `` para mostrar el componente cuando la propiedad `show` es `true` y ocultarlo cuando es `false`. ## 💡 Pista: El componente debe ser capaz de recibir las siguientes dos propiedades: -+ Show (bool): veradero o falso. ++ `show` (bool): 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 en la alerta. diff --git a/exercises/04-conditional-rendering/README.md b/exercises/04-conditional-rendering/README.md index 7673f1bc..99e5788c 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 a `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,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 is 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. 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: The component must be able to receive the following 2 properties: -+ Show (bool): True or false. ++ `show` (bool): 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 in the alert. diff --git a/exercises/04-conditional-rendering/app.jsx b/exercises/04-conditional-rendering/app.jsx index 450d9e8b..05c135ed 100644 --- a/exercises/04-conditional-rendering/app.jsx +++ b/exercises/04-conditional-rendering/app.jsx @@ -3,25 +3,25 @@ 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! +
+ 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(
- - + +
, document.querySelector("#myDiv") ); 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") ); diff --git a/exercises/04-conditional-rendering/tests.js b/exercises/04-conditional-rendering/tests.js index 65f1d16e..eddcf3d3 100644 --- a/exercises/04-conditional-rendering/tests.js +++ b/exercises/04-conditional-rendering/tests.js @@ -10,24 +10,23 @@ 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! + This is a primary alert - check it out!
`); diff --git a/exercises/04.1-conditional-rendering/README.es.md b/exercises/04.1-conditional-rendering/README.es.md index 34a3df7b..94fe06e6 100644 --- a/exercises/04.1-conditional-rendering/README.es.md +++ b/exercises/04.1-conditional-rendering/README.es.md @@ -1,21 +1,19 @@ # `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`. +Por ejemplo, el siguiente código renderiza una alerta roja o amarilla dependiendo de la propiedad `color`. ```jsx const colorClasses = { 'red': 'alert-danger', - 'orange': 'alert-warning' + 'yellow': 'alert-warning' } ``` @@ -23,24 +21,24 @@ Estamos declarando una variable `colorClasses` que contendrá todos los class na ## 📝 Instrucciones: -1. Crea un componente `` que renderice una [bootstrap alert](https://getbootstrap.com/docs/4.0/components/alerts/#examples). +1. Crea un componente `` que cambie de color cuando se modifique la propiedad `color` siguiendo los [colores de las alertas de bootstrap](https://getbootstrap.com/docs/5.0/components/alerts/#examples). ## 💡 Pista: El componente debe ser capaz de recibir las siguientes dos propiedades: -+ Text (string): El texto mostrado en la alerta. ++ `text` (string): El texto mostrado en la alerta. -+ Color (string): Rojo o naranja. ++ `color` (string): El color red o yellow. ```jsx -//para el color rojo +{/* Para el color rojo */} -//para el color amarillo +{/* Para el color amarillo */} -``` \ No newline at end of file +``` diff --git a/exercises/04.1-conditional-rendering/README.md b/exercises/04.1-conditional-rendering/README.md index 0b3882c2..210964c6 100644 --- a/exercises/04.1-conditional-rendering/README.md +++ b/exercises/04.1-conditional-rendering/README.md @@ -4,22 +4,20 @@ 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 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 yellow alert, depending on the `color` property. ```jsx const colorClasses = { 'red': 'alert-danger', - 'orange': 'alert-warning' + 'yellow': 'alert-warning' } ``` @@ -27,24 +25,24 @@ We are declaring a variable `colorClasses` that will contain all the class names ## 📝 Instructions: -1. Create an `` component that renders a [bootstrap alert](https://getbootstrap.com/docs/4.0/components/alerts/#examples). +1. Create an `` component that changes its color by modifying the `color` property following [bootstrap's alert color names](https://getbootstrap.com/docs/5.0/components/alerts/#examples). ## 💡 Hint: 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 yellow. ```jsx -//for red color +{/* For red color */} -//for yellow color +{/* For yellow color */} -``` \ No newline at end of file +``` diff --git a/exercises/04.1-conditional-rendering/app.jsx b/exercises/04.1-conditional-rendering/app.jsx index fd822fbc..a577e39f 100644 --- a/exercises/04.1-conditional-rendering/app.jsx +++ b/exercises/04.1-conditional-rendering/app.jsx @@ -3,7 +3,7 @@ import ReactDOM from "react-dom"; import PropTypes from "prop-types"; const Alert = props => { - //your component here + // Your component here }; Alert.propTypes = { @@ -11,12 +11,12 @@ Alert.propTypes = { 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") ); diff --git a/exercises/04.1-conditional-rendering/solution.hide.jsx b/exercises/04.1-conditional-rendering/solution.hide.jsx new file mode 100644 index 00000000..2e2512c8 --- /dev/null +++ b/exercises/04.1-conditional-rendering/solution.hide.jsx @@ -0,0 +1,32 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import PropTypes from "prop-types"; + +const Alert = (props) => { + // Your component here + const colorClasses = { + red: "alert-danger", + yellow: "alert-warning", + }; + + return ( +
+ {props.text} +
+ ); +}; + +Alert.propTypes = { + color: PropTypes.string, + 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 are being passed to the component +ReactDOM.render( +
+ + +
, + document.querySelector("#myDiv") +); diff --git a/exercises/04.1-conditional-rendering/tests.js b/exercises/04.1-conditional-rendering/tests.js index 2d1de630..3a6fb353 100644 --- a/exercises/04.1-conditional-rendering/tests.js +++ b/exercises/04.1-conditional-rendering/tests.js @@ -17,7 +17,7 @@ test("The component Alert should return the exact HTML", () => { className="alert alert-danger" role="alert" > - OMG! Something really bad has happended! + OMG! Something really bad has happened!
` puede renderizar en **orange** (naranjo) o **red** (rojo) dependiendo del valor de su propiedad `color`. +Justo ahora este componente `` puede renderizar en **yellow** o **red** dependiendo del valor de su propiedad `color`. -## 📝 Instrucciones: +## 📝 Instrucciones: -1. Por favor, añade la posibilidad de especificar el color **green** (verde). +1. Por favor, añade la posibilidad de especificar el color **green**. -## Resultado esperado: +## 💻 Resultado esperado: -Tu sitio web deber terminar viéndose como este: +Tu sitio web debe terminar viéndose como este: -![3 Color Alert](../../.learn/assets/04.2-1.png?raw=true) \ No newline at end of file +![3 Color Alert](../../.learn/assets/04.2-1.png?raw=true) diff --git a/exercises/04.2-conditional-rendering/README.md b/exercises/04.2-conditional-rendering/README.md index 620fb9d5..fa5f9c69 100644 --- a/exercises/04.2-conditional-rendering/README.md +++ b/exercises/04.2-conditional-rendering/README.md @@ -4,13 +4,13 @@ tutorial: "https://www.youtube.com/watch?v=l3v6E1o_YUI" # `04.2` Conditional Rendering -Right now this `` component can render in **orange** or **red** depending on the value of its `color` property. +Right now, this `` component can render in **yellow** or **red** depending on the value of its `color` property. ## 📝 Instructions: 1. Please add the possibility to specify the color as **green**. -## Expected result: +## 💻 Expected result: Your website must end up looking similar to this: diff --git a/exercises/04.2-conditional-rendering/app.jsx b/exercises/04.2-conditional-rendering/app.jsx index 2efc5543..6882a95d 100644 --- a/exercises/04.2-conditional-rendering/app.jsx +++ b/exercises/04.2-conditional-rendering/app.jsx @@ -2,12 +2,13 @@ import React from "react"; import ReactDOM from "react-dom"; import PropTypes from "prop-types"; -// add the green inside this function +// Add the green inside this function const Alert = props => { const colorClasses = { red: "alert-danger", - orange: "alert-warning" + yellow: "alert-warning" }; + if (colorClasses[props.color] === undefined) alert(`The color ${props.color} is not in the possible list of colors`); return ( @@ -21,12 +22,12 @@ Alert.propTypes = { 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 is the component using +// Here is where the component is being used, you don't have to edit this part +// But it helps you understand what properties is the component using ReactDOM.render(
- - + +
, document.querySelector("#myDiv") diff --git a/exercises/04.2-conditional-rendering/solution.hide.jsx b/exercises/04.2-conditional-rendering/solution.hide.jsx new file mode 100644 index 00000000..9ad1d3d3 --- /dev/null +++ b/exercises/04.2-conditional-rendering/solution.hide.jsx @@ -0,0 +1,36 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import PropTypes from "prop-types"; + +// Add the green inside this function +const Alert = props => { + const colorClasses = { + red: "alert-danger", + yellow: "alert-warning", + green: "alert-success" + }; + + if (colorClasses[props.color] === undefined) alert(`The color ${props.color} is not in the possible list of colors`); + + return ( +
+ {props.text} +
+ ); +}; + +Alert.propTypes = { + color: PropTypes.string, + 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 is the component using +ReactDOM.render( +
+ + + +
, + document.querySelector("#myDiv") +); diff --git a/exercises/04.2-conditional-rendering/tests.js b/exercises/04.2-conditional-rendering/tests.js index daa3802b..b5db1000 100644 --- a/exercises/04.2-conditional-rendering/tests.js +++ b/exercises/04.2-conditional-rendering/tests.js @@ -17,7 +17,7 @@ test("The component Alert should return the exact HTML", () => { className="alert alert-danger" role="alert" > - OMG! Something really bad has happended! + OMG! Something really bad has happened!
I am an alert
+
I am an alert
``` ## 📝 Instrucciones: @@ -26,4 +26,4 @@ Y, entonces, puedes aplicar esos estilos a tu HTML, así: + El color de fondo (background color) tiene que ser negro (black). - + Un borde amarillo (yellow) de un `1px`. \ No newline at end of file + + Un borde amarillo (yellow) sólido de un `1px`. diff --git a/exercises/05-adding-styles/README.md b/exercises/05-adding-styles/README.md index 286942ff..379e4144 100644 --- a/exercises/05-adding-styles/README.md +++ b/exercises/05-adding-styles/README.md @@ -6,7 +6,7 @@ tutorial: "https://www.youtube.com/watch?v=I93UjM0y9aE" The most recommended way to do styles on React is using CSS-in-JS. -Basically you create an object with your styles like this: +Basically, you create an object with your styles like this: ```jsx const mySuperStyles = { @@ -19,18 +19,18 @@ const mySuperStyles = { And then you can apply those styles to your HTML like this: ```jsx -
I am an alert
+
I am an alert
``` ## 📝 Instructions: -1. The current exercise has an object with styles applied already, please update the the styles to meet the following: +1. The current exercise has an object with styles applied already, please update the styles to the following: + Font size has to be `16px` + Background color has to be `black`. - + A yellow border with `1px`. + + A yellow solid border with `1px`. diff --git a/exercises/05-adding-styles/app.jsx b/exercises/05-adding-styles/app.jsx index 757f2c09..7055ed14 100644 --- a/exercises/05-adding-styles/app.jsx +++ b/exercises/05-adding-styles/app.jsx @@ -2,7 +2,7 @@ import React from "react"; import ReactDOM from "react-dom"; import PropTypes from "prop-types"; -//add the styles here +// Add the styles here const mySuperStyles = { }; @@ -10,10 +10,12 @@ const mySuperStyles = { const Badge = props => { return ( ); }; + Badge.propTypes = { label: PropTypes.string, number: PropTypes.string diff --git a/exercises/05-adding-styles/solution.hide.jsx b/exercises/05-adding-styles/solution.hide.jsx new file mode 100644 index 00000000..c0b7a212 --- /dev/null +++ b/exercises/05-adding-styles/solution.hide.jsx @@ -0,0 +1,26 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import PropTypes from "prop-types"; + +// Add the styles here +const mySuperStyles = { + fontSize: "16px", + background: "black", + border: "1px solid yellow", +}; + +const Badge = (props) => { + return ( + + ); +}; + +Badge.propTypes = { + label: PropTypes.string, + number: PropTypes.string, +}; + +ReactDOM.render(, document.querySelector("#myDiv")); diff --git a/exercises/05.1-second-styles/README.es.md b/exercises/05.1-second-styles/README.es.md index 9bdc129d..c4494fbc 100644 --- a/exercises/05.1-second-styles/README.es.md +++ b/exercises/05.1-second-styles/README.es.md @@ -6,7 +6,7 @@ ![Alert in bootstrap](../../.learn/assets/05.1-1.png?raw=true) -## 💡 Pista: +## 💡 Pistas: + Solamente debes cambiar los colores de fondo, colores de texto, y el estilo de los bordes. -+ El Badge tiene un `border-radius` de `50%` \ No newline at end of file ++ El Badge tiene un `border-radius` de `50%` diff --git a/exercises/05.1-second-styles/README.md b/exercises/05.1-second-styles/README.md index 50b25a5b..3202532e 100644 --- a/exercises/05.1-second-styles/README.md +++ b/exercises/05.1-second-styles/README.md @@ -6,11 +6,11 @@ tutorial: "https://www.youtube.com/watch?v=Vr5Kh47NSuM" ## 📝 Instructions: -1. Now, lets change Badge component styles to make it look like this: +1. Now, let's change the Badge component styles to make it look like this: ![Alert in bootstrap](../../.learn/assets/05.1-1.png?raw=true) -## 💡 Hint: +## 💡 Hints: + You should only style the background colors, text colors, and borders. -+ The badge has a `border-radius` of `50%` \ No newline at end of file ++ The badge has a `border-radius` of `50%` diff --git a/exercises/05.1-second-styles/app.jsx b/exercises/05.1-second-styles/app.jsx index 489ef426..96ec4df2 100644 --- a/exercises/05.1-second-styles/app.jsx +++ b/exercises/05.1-second-styles/app.jsx @@ -3,12 +3,12 @@ import ReactDOM from "react-dom"; import PropTypes from "prop-types"; const buttonStyles = { - //write button styles here + // Write button styles here }; const badgeStyles = { - //write the span styles here + // Write the span styles here }; @@ -22,9 +22,10 @@ const Badge = props => { ); }; + Badge.propTypes = { label: PropTypes.string, number: PropTypes.string }; -//dont forget to change the label + ReactDOM.render(, document.querySelector("#myDiv")); diff --git a/exercises/05.1-second-styles/solution.hide.jsx b/exercises/05.1-second-styles/solution.hide.jsx index b7c8e9e8..40d8020b 100644 --- a/exercises/05.1-second-styles/solution.hide.jsx +++ b/exercises/05.1-second-styles/solution.hide.jsx @@ -3,14 +3,14 @@ import ReactDOM from "react-dom"; import PropTypes from "prop-types"; const buttonStyles = { - //write button styles here + // Write button styles here background: "yellow", color: "black", border: "none" }; const badgeStyles = { - //write the span styles here + // Write the span styles here background: "red", borderRadius: "50%" }; @@ -25,9 +25,10 @@ const Badge = (props) => { ); }; + Badge.propTypes = { label: PropTypes.string, number: PropTypes.string, }; -//dont forget to change the label + ReactDOM.render(, document.querySelector("#myDiv")); diff --git a/exercises/06-listening-to-events/README.es.md b/exercises/06-listening-to-events/README.es.md index 76cc7b1d..3aa62f5f 100644 --- a/exercises/06-listening-to-events/README.es.md +++ b/exercises/06-listening-to-events/README.es.md @@ -1,11 +1,11 @@ # `06` Listening for events -Los eventos en React trabajan de forma muy similar a como lo harían en Vanilla JS, si quieres escuchar el `Clic` de un usuario, todo lo que tienes que hacer es agregar tu propiedad onClick (o cualquier otro evento en la etiqueta HTML) como suele hacerse. +Los eventos en React trabajan de forma muy similar a como lo harían en Vanilla JS, si quieres escuchar el `Click` de un usuario, todo lo que tienes que hacer es agregar tu propiedad `onClick` (o cualquier otro evento en la etiqueta HTML) como suele hacerse. -El código actual tiene un componente que imprime en la cónsola `I was clicked!`. +El código actual tiene un componente que imprime en la consola `I was clicked!` cada vez que das click. ## 📝 Instrucciones: -1. Actualiza el componente **Alert** para llamarlo correctamente y verifícalo en la cónsola. +1. Actualiza el componente `` para que escuche el evento `onClick` con la función `handleClick` correctamente y verifícalo en la consola. diff --git a/exercises/06-listening-to-events/README.md b/exercises/06-listening-to-events/README.md index 6396ee4f..f7f9475d 100644 --- a/exercises/06-listening-to-events/README.md +++ b/exercises/06-listening-to-events/README.md @@ -4,12 +4,12 @@ tutorial: "https://www.youtube.com/watch?v=mKNchkgVtrg" # `06` Listening for events -Events work in react pretty much the same way they do in Vanilla JS: if you want to listen for the user `Click`, all you have to do is add your onClick property (or any other event) to the HTML tag, how it is usually done. +Events in React work pretty much the same way they do in Vanilla JS: if you want to listen for the user's `Click`, all you have to do is add your `onClick` property (or any other event) to the HTML tag, as it is usually done. -The current code has one component that prints "I was clicked!" to the console. +The current code has one component that prints `I was clicked!` to the console when clicked. ## 📝 Instructions: -1. Update the **Alert** component to call it correctly and then check the console. +1. Update the `` component to listen to the `onClick` event with the `handleClick` function correctly, and then check the console. diff --git a/exercises/06-listening-to-events/app.jsx b/exercises/06-listening-to-events/app.jsx index 67561704..75ab5e16 100644 --- a/exercises/06-listening-to-events/app.jsx +++ b/exercises/06-listening-to-events/app.jsx @@ -1,15 +1,13 @@ import React from "react"; import ReactDOM from "react-dom"; -import PropTypes from "prop-types"; const clickHandler = e => { console.log("I was clicked!", e); }; -const Alert = props => { +const Alert = () => { return ; }; -// here is where the alert component is being used, you don't have to edit this part, -// but it helps you understand what properties is the component using +// You don't have to edit anything below ReactDOM.render(, document.querySelector("#myDiv")); diff --git a/exercises/06-listening-to-events/solution.hide.jsx b/exercises/06-listening-to-events/solution.hide.jsx new file mode 100644 index 00000000..5a5aa34e --- /dev/null +++ b/exercises/06-listening-to-events/solution.hide.jsx @@ -0,0 +1,17 @@ +import React from "react"; +import ReactDOM from "react-dom"; + +const clickHandler = e => { + console.log("I was clicked!", e); +}; + +const Alert = () => { + return ( + + ); +}; + +// You don't have to edit anything below +ReactDOM.render(, document.querySelector("#myDiv"));