diff --git a/exercises/00-welcome/README.es.md b/exercises/00-welcome/README.es.md index bb513dd8..fff24c31 100644 --- 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/01-hello-world/README.es.md b/exercises/01-hello-world/README.es.md index 1941b353..f1109f3d 100644 --- 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 index 5f8ba9dc..2b619ae6 100644 --- 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 index aad53c19..2a4e3f26 100644 --- 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 index f4baf324..fd901c63 100644 --- 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 index 7bc4062e..102321d2 100644 --- 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 index a8f19315..a1ec451d 100644 --- 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 index 6d73766d..0bef0bce 100644 --- 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 index 31f4d93d..fb2846d5 100644 --- 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 index 3478c43f..2bb3a107 100644 --- 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 `
  • ` 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 index 820ad727..e07863b5 100644 --- 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 index eb82c187..c07848a3 100644 --- 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 `
  • ` 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 index c02f5e4f..9b6a9b90 100644 --- 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 `
  • ` 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 index dffdc343..1d1eb168 100644 --- 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 `
  • ` 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 index f44eabf0..cf0225c2 100644 --- 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 `
  • ` 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 index 99c07e28..084fcb65 100644 --- 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 `
  • ` 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 index 230b8a18..b74ce85b 100644 --- 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 `
  • ` diff --git a/exercises/03-render-with-functions/README.es.md b/exercises/03-render-with-functions/README.es.md index 9e916042..98eb6249 100644 --- 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 index 88305fad..ea4ddcbe 100644 --- 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 index ce149aaa..4d6e06b6 100644 --- 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 index b216ed3b..22c4ad8c 100644 --- 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 index aeae446a..dbdb74ba 100644 --- 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 index 4444c874..0f13d374 100644 --- 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 index 8268ccde..de913b0a 100644 --- 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 index e0bad6cc..2e4ea06f 100644 --- 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 index 91ecf4da..94db9421 100644 --- 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 index c4476251..673adc92 100644 --- 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 index 8080da6d..8c0d58df 100644 --- 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 index a9982885..ff11f005 100644 --- 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 index b49d7de3..10c1c578 100644 --- 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 ``, según una propiedad llamada `show`. diff --git a/exercises/04-conditional-rendering/README.md b/exercises/04-conditional-rendering/README.md index 99e5788c..3913f492 100644 --- 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 index 94fe06e6..84fa588f 100644 --- 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 `` un poco más inteligente. diff --git a/exercises/04.1-conditional-rendering/README.md b/exercises/04.1-conditional-rendering/README.md index 210964c6..10b25f6f 100644 --- 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 index 98b9021e..b67ff7ca 100644 --- 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 `` 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 index fa5f9c69..758b56d4 100644 --- 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 index ed05b48a..54c23e4e 100644 --- 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 index 379e4144..1f098c9b 100644 --- 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 index c4494fbc..6b8ad81d 100644 --- 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 index 3202532e..6de9ff2b 100644 --- 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 index 3aa62f5f..45a127b8 100644 --- 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 index f7f9475d..fef4f23b 100644 --- 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