4GeeksAcademy · alesanchezr · Apr 29, 2024 · Apr 29, 2024 · Apr 29, 2024 · Apr 29, 2024
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -22,7 +22,7 @@
 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
 	// "forwardPorts": [],
 
-	"onCreateCommand": "npm i [email protected] -g && npm i [email protected] -g && npm i @learnpack/[email protected] -g && learnpack plugins:install @learnpack/react@1.1.5"
+	"onCreateCommand": "npm i [email protected] -g && npm i [email protected] -g && npm i @learnpack/[email protected] -g && learnpack plugins:install @learnpack/react"
 
 	// Use 'postCreateCommand' to run commands after the container is created.
 	// "postCreateCommand": "yarn install",

diff --git a/exercises/00-welcome/README.es.md b/exercises/00-welcome/README.es.md
@@ -1,3 +1,7 @@
+---
+intro: "https://youtu.be/watch?v=L21NvjxiVmc"
+---
+
 # Welcome!
 
 ¡Estamos muy entusiasmados por tenerte aquí! 🎉 😂

diff --git a/exercises/00-welcome/README.md b/exercises/00-welcome/README.md
@@ -1,5 +1,5 @@
 ---
-intro: "https://www.youtube.com/watch?v=yRjmuLAH25s"
+intro: "https://www.youtube.com/watch?v=46c5XPAEFzU"
 ---
 
 # Welcome!

diff --git a/exercises/01-hello-world/README.es.md b/exercises/01-hello-world/README.es.md
@@ -1,3 +1,7 @@
+---
+tutorial: "https://youtu.be/watch?v=FQv38IJJvng"
+---
+
 # `01` Hello World
 
 El mayor dolor de cabeza de los desarrolladores front-end es **trabajar con el DOM** para crear HTML dinámico, lo cual es algo que React.js hace mucho mejor.

diff --git a/exercises/01-hello-world/README.md b/exercises/01-hello-world/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=Qdu6GSew8xM"
+tutorial: "https://www.youtube.com/watch?v=YTnv1aPEXWE"
 ---
 
 # `01` Hello World

diff --git a/exercises/01.1-hello-jsx/README.es.md b/exercises/01.1-hello-jsx/README.es.md
@@ -1,3 +1,7 @@
+---
+tutorial: "https://youtu.be/9ZYIO78TGb0"
+---
+
 # `01.1` Hello JSX
 
 JSX también te permite incluir variables en el HTML fácilmente. Por ejemplo, asumamos que tienes la siguiente variable disponible:

diff --git a/exercises/01.1-hello-jsx/README.md b/exercises/01.1-hello-jsx/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=Wp8hcH8jScQ"
+tutorial: "https://www.youtube.com/watch?v=sNE_3IpQ2Tk"
 ---
 
 # `01` Hello JSX

diff --git a/exercises/01.2-rendering-from-objects/README.es.md b/exercises/01.2-rendering-from-objects/README.es.md
@@ -1,3 +1,7 @@
+---
+tutorial: "https://www.youtube.com/watch?v=Wnw2DmuZSX0"
+---
+
 # `01.2` Rendering from objects
 
 Ahora, vamos a usar una variable más compleja para renderizar nuestro HTML, digamos que tenemos el siguiente Objeto JS con la información de un cliente:

diff --git a/exercises/01.2-rendering-from-objects/README.md b/exercises/01.2-rendering-from-objects/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=Z9gzZoYM4pY"
+tutorial: "https://www.youtube.com/watch?v=inPN8MOdJWA"
 ---
 
 # `01.2` Rendering from objects

diff --git a/exercises/01.3-building-a-layout/README.es.md b/exercises/01.3-building-a-layout/README.es.md
@@ -1,3 +1,7 @@
+---
+tutorial: "https://youtu.be/Yvu_4qjQEZA"
+---
+
 # `01.3` Building a layout
 
 Practiquemos un poco más el uso del JSX para crear HTML.

diff --git a/exercises/01.3-building-a-layout/README.md b/exercises/01.3-building-a-layout/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=5Z12IWd4CI8"
+tutorial: "https://www.youtube.com/watch?v=ZRmtR2Gp-z0"
 ---
 
 # `01.3` Building a layout

diff --git a/exercises/01.4-building-html-from-arrays/README.es.md b/exercises/01.4-building-html-from-arrays/README.es.md
@@ -1,3 +1,7 @@
+---
+tutorial: "https://youtu.be/FWk6mHpYeRo"
+---
+
 # `01.4` Building from arrays
 
 Con JSX también puedes crear **arrays** de elementos HTML. Por ejemplo, si tenemos un arreglo de `<li>` podemos incluirlos todos dentro del documento a la vez, así:

diff --git a/exercises/01.4-building-html-from-arrays/README.md b/exercises/01.4-building-html-from-arrays/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=mFPtdyHeKVM"
+tutorial: "https://www.youtube.com/watch?v=s3pv6ZOg6-8"
 ---
 
 # `01.4` Building from arrays

diff --git a/exercises/02-maping-array-to-li/README.es.md b/exercises/02-maping-array-to-li/README.es.md
@@ -1,3 +1,7 @@
+---
+tutorial: "https://youtu.be/hONwtbNOBuc"
+---
+
 # `02` Mapping array to `<li>`
 
 Ahora, vamos a construir un arreglo dinámicamente...

diff --git a/exercises/02-maping-array-to-li/README.md b/exercises/02-maping-array-to-li/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=xe-O1jhnVxk"
+tutorial: "https://www.youtube.com/watch?v=wR18z-IngeA"
 ---
 
 # `02` Mapping array to `<li>`

diff --git a/exercises/02.1-maping-array-objects-to-li/README.es.md b/exercises/02.1-maping-array-objects-to-li/README.es.md
@@ -1,3 +1,8 @@
+---
+tutorial: "https://youtu.be/PexVFLiJjE8"
+---
+
+
 # `02.1` Mapping array objects to `<li>`
 
 Usando el conocimiento que tienes del ejercicio anterior, ahora corrijamos la función `map()` nuevamente, pero esta vez, partiendo de un arreglo de objetos.

diff --git a/exercises/02.1-maping-array-objects-to-li/README.md b/exercises/02.1-maping-array-objects-to-li/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=Gw6i3BWzwNY"
+tutorial: "https://www.youtube.com/watch?v=f-UPidUUOzg"
 ---
 
 # `02.1` Mapping array objects to `<li>`

diff --git a/exercises/02.2-maping-array-of-objects-to-li/README.es.md b/exercises/02.2-maping-array-of-objects-to-li/README.es.md
@@ -1,3 +1,8 @@
+---
+tutorial: "https://youtu.be/HvQCQW1qgzc"
+---
+
+
 # `02.2`  Mapping array of objects to `<li>`
 
 Cuando estás mapeando un arreglo de datos para convertirlo en un arreglo HTML, tienes que especificar una **"función de mapeo"** que recibirá cada elemento del arreglo original y lo transformará e insertará en el nuevo arreglo. 

diff --git a/exercises/02.2-maping-array-of-objects-to-li/README.md b/exercises/02.2-maping-array-of-objects-to-li/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=-B0KJP1tzXE"
+tutorial: "https://www.youtube.com/watch?v=BByz7dnodZQ"
 ---
 
 # `02.2` Mapping array of objects to `<li>`

diff --git a/exercises/03-render-with-functions/README.es.md b/exercises/03-render-with-functions/README.es.md
@@ -1,3 +1,8 @@
+---
+tutorial: "https://youtu.be/RwT0ltsXPEI"
+---
+
+
 # `03` Render with Functions
 
 JSX permite usar funciones para renderizar HTML, ¡y eso es fantástico!

diff --git a/exercises/03-render-with-functions/README.md b/exercises/03-render-with-functions/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=EdpPIo_JNVc"
+tutorial: "https://www.youtube.com/watch?v=2jGeHZ97_LU"
 ---
 
 # `03` Render with Functions

diff --git a/exercises/03.1-your-first-component/README.es.md b/exercises/03.1-your-first-component/README.es.md
@@ -1,3 +1,8 @@
+---
+tutorial: "https://youtu.be/JEQaixuE78Q"
+---
+
+
 # `03.1` Your first functional component
 
 Cuando creas funciones que devuelven HTML, JSX te dejará tratarlos como **Componentes**. Básicamente, se convertirán en tus propias etiquetas HTML personalizables.

diff --git a/exercises/03.1-your-first-component/README.md b/exercises/03.1-your-first-component/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=9Eiidx--_GQ"
+tutorial: "https://www.youtube.com/watch?v=cpq-MqQWMs8"
 ---
 
 # `03.1` Your first functional component

diff --git a/exercises/03.2-a-real-component/README.es.md b/exercises/03.2-a-real-component/README.es.md
@@ -1,5 +1,11 @@
+---
+tutorial: "https://youtu.be/iXSBNgZTTFc"
+---
+
+
 # `03.2`  A real component
 
+
 En el ejercicio anterior hemos creado nuestro primer componente llamado `PrintHello`, y hemos aprendido que podemos usar el componente como una etiqueta HTML.
 
 ```jsx

diff --git a/exercises/03.2-a-real-component/README.md b/exercises/03.2-a-real-component/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=MGqH3dOhxL4"
+tutorial: "https://www.youtube.com/watch?v=GzBbP3JLdEw"
 ---
 
 # `03.2` A real component

diff --git a/exercises/03.3-component-properties/README.es.md b/exercises/03.3-component-properties/README.es.md
@@ -1,3 +1,8 @@
+---
+tutorial: "https://youtu.be/lNBbv8_0rC8"
+---
+
+
 # `03.3` Component Properties
 
 La `BootstrapCard` que acabas de hacer está [hard coded](https://es.wikipedia.org/wiki/Codificaci%C3%B3n_r%C3%ADgida) para **Bob Dylan** únicamente.

diff --git a/exercises/03.3-component-properties/README.md b/exercises/03.3-component-properties/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=79ho2T5Zy6U"
+tutorial: "https://www.youtube.com/watch?v=hIhhpm85kZU"
 ---
 
 # `03.3` Component Properties

diff --git a/exercises/03.4-hero-component/README.es.md b/exercises/03.4-hero-component/README.es.md
@@ -1,3 +1,8 @@
+---
+tutorial: "https://youtu.be/06d3Qh3R3SI"
+---
+
+
 # `03.4` Hero Component
 
 Usando todo lo que has aprendido...

diff --git a/exercises/03.4-hero-component/README.md b/exercises/03.4-hero-component/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: 'https://www.youtube.com/watch?v=zv6HPveyz6g'
+tutorial: 'https://www.youtube.com/watch?v=ruD2opV_eGg'
 ---
 
 # `03.4` Hero Component

diff --git a/exercises/03.5-alert-component/README.es.md b/exercises/03.5-alert-component/README.es.md
@@ -1,3 +1,8 @@
+---
+tutorial: "https://youtu.be/FXGYRnGs6Dg"
+---
+
+
 # `03.5` Alert Component
 
 Basado en el conocimiento que tienes ahora:

diff --git a/exercises/03.5-alert-component/README.md b/exercises/03.5-alert-component/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=80_k11tqhrE"
+tutorial: "https://www.youtube.com/watch?v=qfAIamf0JOA"
 ---
 
 # `03.5` Alert Component

diff --git a/exercises/04-conditional-rendering/README.es.md b/exercises/04-conditional-rendering/README.es.md
@@ -1,3 +1,8 @@
+---
+tutorial: "https://www.youtube.com/watch?v=rsPIYF2PWAQ"
+---
+
+
 # `04` Conditional Rendering
 
 También puedes usar las propiedades de un componente para cambiar su comportamiento como mostrar u ocultar `<Alert />`, según una propiedad llamada `show`.

diff --git a/exercises/04-conditional-rendering/README.md b/exercises/04-conditional-rendering/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=1O9uUXymny4"
+tutorial: "https://www.youtube.com/watch?v=PZq3JSYNYw4"
 ---
 
 # `04` Conditional Rendering

diff --git a/exercises/04.1-conditional-rendering/README.es.md b/exercises/04.1-conditional-rendering/README.es.md
@@ -1,3 +1,8 @@
+---
+tutorial: "https://youtu.be/myK-x2eBPbI"
+---
+
+
 # `04.1` Conditional Rendering
 
 Hagamos nuestro componente `<Alert />` un poco más inteligente.

diff --git a/exercises/04.1-conditional-rendering/README.md b/exercises/04.1-conditional-rendering/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=hEY3YRQN0uk"
+tutorial: "https://www.youtube.com/watch?v=XkKUH49XufQ"
 ---
 
 # `04.1` Conditional Rendering

diff --git a/exercises/04.2-conditional-rendering/README.es.md b/exercises/04.2-conditional-rendering/README.es.md
@@ -1,3 +1,8 @@
+---
+tutorial: "https://www.youtube.com/watch?v=1cYgv4aorjw"
+---
+
+
 # `04.2` Conditional Rendering
 
 Justo ahora este componente `<Alert />` puede renderizar en **yellow** o **red** dependiendo del valor de su propiedad `color`.

diff --git a/exercises/04.2-conditional-rendering/README.md b/exercises/04.2-conditional-rendering/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=l3v6E1o_YUI"
+tutorial: "https://www.youtube.com/watch?v=4t5ABvXbEqo"
 ---
 
 # `04.2` Conditional Rendering

diff --git a/exercises/05-adding-styles/README.es.md b/exercises/05-adding-styles/README.es.md
@@ -1,3 +1,7 @@
+---
+tutorial: "https://www.youtube.com/watch?v=iMLO4utFkFU"
+---
+
 # `05` Adding styles to the components
 
 La forma más recomendada de usar estilos en React es usando CSS-in-JS.

diff --git a/exercises/05-adding-styles/README.md b/exercises/05-adding-styles/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=I93UjM0y9aE"
+tutorial: "https://www.youtube.com/watch?v=PYJr6Mf3tq4"
 ---
 
 # `05` Adding styles to the components

diff --git a/exercises/05.1-second-styles/README.es.md b/exercises/05.1-second-styles/README.es.md
@@ -1,3 +1,7 @@
+---
+tutorial: "https://www.youtube.com/watch?v=SJxlGFSUgG0"
+---
+
 # `05.1` Adding styles to the components
 
 ## 📝 Instrucciones:

diff --git a/exercises/05.1-second-styles/README.md b/exercises/05.1-second-styles/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=Vr5Kh47NSuM"
+tutorial: "https://www.youtube.com/watch?v=mw3AuXgzETE"
 ---
 
 # `05.1` Adding styles to the components

diff --git a/exercises/06-listening-to-events/README.es.md b/exercises/06-listening-to-events/README.es.md
@@ -1,3 +1,7 @@
+---
+tutorial: "https://www.youtube.com/watch?v=p5JuLoQ0gA8"
+---
+
 # `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 `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.

diff --git a/exercises/06-listening-to-events/README.md b/exercises/06-listening-to-events/README.md
@@ -1,5 +1,5 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=mKNchkgVtrg"
+tutorial: "https://www.youtube.com/watch?v=WLiSFuCLhxA"
 ---
 
 # `06` Listening for events