Hola, muy buenas a todos y a todas. Muchísimas gracias por estar aquí. Bienvenidos y bienvenidas a una clase más de este Bootcamp Full Stack que hacemos todos los domingos a las 8 de la tarde, hora peninsular española.
Muchas gracias a los 349 espectadores que tenemos ahora mismo. Pues hola, hola. Hoy vamos a ver JavaScript y vamos a ver React. Muchas gracias ImaoHD por suscribirte con Prime.
Muchísimas gracias. Ya sabéis que os podéis suscribir con Prime que es totalmente gratis para vosotros, pero a mí me apoyáis con una pequeña aportación que siempre ayuda.
Siempre ayuda. ¿Qué tal? ¿Qué tal la primera clase? ¿La habéis podido revisar ya sea en YouTube, ya sea la visteis en directo? ¿Cómo la habéis visto la primera clase?
¿Lo entendisteis todo? ¿Habéis estado revisando las clases? Bueno, la clase. ¿Qué vamos a hacer hoy? ¿Qué vamos a hacer en la clase del Bootcamp Full Stack gratuito de hoy?
Hoy vamos a aprender un poquito de JavaScript y este JavaScript nos va a permitir aprender seguramente la biblioteca más importante en el mundo del frontend que existe actualmente,
con permiso de Vue, Angular y similares. Estoy hablando de React, una librería que está hecha por Facebook y que se está convirtiendo en una de las más demandadas en el desarrollo web.
Así que hoy vemos JavaScript y vamos a ver, vamos a iniciarnos en React. Yo creo que es una clase muy interesante, así que espero que os guste y nada, vamos a disfrutarla.
Dejadme, voy a pasar aquí a Coding, voy a desactivar aquí también el tema de las alertas. Me encantaría tener las alertas, pero es que si no, no me da, no me da el ordenador.
Dejadme que os comente primero que podéis encontrar la clase de la semana pasada grabada ya en mi canal de YouTube que es midu.tube y os la voy a dejar en el chat para que tengáis ahí el enlace.
Este sería el enlace para la clase de la semana anterior, por si lo perdisteis, por si lo queréis revisar, por si lo queréis compartir, pues que sepáis que lo vais a tener siempre cada semana en mi canal de YouTube.
Además hay una lista de reproducción que podéis encontrar, si vais a mi canal, midu.dev, aquí midu.dev, os podéis suscribir aquí y podéis ponerle la campanita para que os llegue la notificación cuando se suba y tal.
En listas de reproducción aquí tenéis una lista que es esta que pone Bootcamp Full Stack, pues aquí vais a tener las clases grabaditas y todas ordenaditas, ¿vale? Ahí lo vais a tener todo perfecto para que lo sepáis, para que no os perdáis ni una clase.
Segundo, si me queréis apoyar, si me queréis ayudar a mantener a que pueda seguir creando contenido, tengo un Patreon que es patreon.com barra midu.dev que ya os digo, no es necesario, no es obligatorio, podéis venir al Bootcamp totalmente gratis, no pasa nada.
Pero si os gusta lo que hago y queréis que suba de nivel, porque así podéis crear más contenido, pues que sepáis que hay niveles de suscripción en Patreon para ayudarme.
Y además, en este además hay merchandising, si os quedáis unos meses tenéis merchandising. Pues nada, solo que lo sepáis.
Y este es la parte de la clase que vamos a hacer hoy. Como ya sabéis, nosotros seguimos el Bootcamp de Full Stack Open, que es totalmente gratuito también.
Y aunque aquí sale introducción a React y luego JavaScript, nosotros lo vamos a hacer al revés, ¿vale?
Porque yo creo que tiene más sentido primero ver un poquito de React y luego introducir React.
No me gusta mucho como lo han hecho. Así que lo vamos a hacer al revés.
Vale, muy bien. Empezamos con la clase de hoy. Como digo, hoy vamos a empezar el tema de JavaScript, ¿vale?
JavaScript. El tema que tiene JavaScript, para el que no conozca JavaScript, le puedo hacer una pequeña introducción, pero básicamente JavaScript, que es el lenguaje de la web, es la lengua franca, yo diría, de la web y del desarrollo web.
De la tecnología web en general. Al final es un lenguaje de programación interpretado que se llama JavaScript, pero en realidad no es un lenguaje por sí mismo.
Es un poco raro esto lo que voy a decir, pero no os quiero liar, pero al final, en realidad el lenguaje de programación oficial se llama ECMAScript y tiene su propia especificación.
Al final JavaScript, digamos que es como un dialecto, pero bueno, que machea directamente con esa especificación. Eso no es importante.
Lo importante que tienes que saber es que es multiparadigma. ¿Y esto qué quiere decir? Bueno, hay lenguajes de programación que solo puedes programar de una forma en concreto.
Por ejemplo, programación funcional o declarativa o programación orientada a objetos. En el caso de JavaScript es multiparadigma. Puedes programar con diferentes paradigmas.
Y esto es una cosa que vamos a ir viendo seguro a lo largo del curso, de que a veces hacemos una programación más imperativa, otra más declarativa, funcional, y lo vamos a ir viendo.
Igual no hace falta que lo sepas tanto, pero que sepas que es multiparadigma, que es algo que se diferencia respecto a otros lenguajes, eso sí que es interesante.
Entonces, si os parece, lo que vamos a hacer es crear una pequeña página rápidamente. Voy a abrir aquí la terminal.
Y lo primero que os voy a decir es que vais a necesitar, uno, una terminal, que si tenéis macos, pues ya tenéis la propia terminal instalada por defecto.
Aunque yo en mi caso utilizo item 2, ¿vale? Esta es la que utilizo por si os gusta más o queréis saber cuál uso yo.
Esta sería, pero hay un montón de alternativas. Tenéis hyper también o, bueno, no sé qué más alternativas aparte de estas dos habría.
En Windows también tiene su terminal, así que, bueno, que sepáis que vais a necesitar la terminal.
Yo tengo item 2, que a mí es la que más me gusta. Ya la he abierto. Así que me voy a ir a dev y aquí voy a crear ya, pues, una web ejemplo.
Web ejemplo. Y vamos a ver un poquito de JavaScript.
Ahora, lo segundo que vas a necesitar, como ya os dije en la primera clase, es un editor de código.
A mí el que más me gusta también es VS Code, ¿vale? Code.visualstudio.com. Aquí tenéis la página web para entrar.
Seguramente es uno de los estándares de facto. Hay gente que le gusta más Atom, hay gente que le gusta más WebStorm, hay gente que le gusta más Beam.
Hay un montón de editores. Puedes utilizar el que prefieras.
Pero yo creo que para empezar Visual Studio Code, y bueno, para empezar y para seguir durante muchísimo tiempo, porque la verdad es que es bastante interesante y funciona muy bien.
Es de Microsoft, totalmente gratuito. Lo descargáis y ya podéis codear.
Vale. Dicho esto, pues nada, esta web ejemplo, yo voy a abrir aquí mi Visual Studio Code y ahora me aparecerá el editor totalmente vacío. Aquí no tenemos nada.
Lo primero que voy a hacer es crear un index.html y voy a crear un script.js.
Esto ya vimos, ¿no? La clase lo tiene diferentes tipos de cursos que va a tener una página web.
Así que en el HTML, por ahora, voy a crear uno vacío, ¿vale? No es muy importante lo que tengamos en HTML.
Como ves, lo he creado de golpe porque Visual Studio Code tiene la capacidad esta de utilizar, le pones la exclamación, le das al Enter, ¡pum! y ya te escribe todo el HTML, ¿vale?
Como veis, ya tenemos el HTML, así que lo primero, aquí tenemos diferentes formas de cómo podemos cargar un archivo JavaScript.
El más sencillo, el más típico, es escribiendo la etiqueta script y aquí le decimos el source, donde tenemos que cargar esto.
Le vamos a indicar que es script.js y cerramos el script, la etiqueta y ya está.
Esto es lo único que tendríamos que hacer para cargar nuestro archivo JavaScript.
Podemos hacer diferentes cosas.
¿Qué otras formas de cargar JavaScript en el HTML tenemos?
Una sería lo que se dice en línea, ¿vale? Esto sería un script en línea, donde aquí podemos poner JavaScript y esto funcionaría perfectamente.
O podemos hacerlo por módulos.
Podemos indicar lo que teníamos antes, pero le decimos que lo queremos cargar del tipo módulo.
Esta seguramente es la forma más moderna, pero la que va a ser, digamos, el estándar de facto de aquí hacia adelante, ¿vale?
La desventaja, que esto no funciona en Internet Explorer 11.
Pero bueno, Internet Explorer 11 cada vez se utiliza menos.
Por ahora, por tenerlo más sencillo, lo vamos a poner así.
Alguien me puede preguntar, ¿cuál es la diferencia entre usar uno u otro?
Pues la diferencia es que si aquí ponemos el type, ponemos que es del tipo módulo,
significa que ese JavaScript va a poder utilizar los ECMAScriptModules, que nos va a permitir importar módulos, ¿vale?
Así que en este caso lo vamos a dejar sin, porque no es tan fácil de utilizarlo.
Tendríamos que levantar un servidor, ya lo veremos.
Y en este caso solo queremos enfocarnos en JavaScript.
Así que ahora vamos a asegurarnos que esto funciona.
Y para hacer esto, simplemente lo que tenemos que hacer es levantar index.html, ¿vale?
Esto me ha levantado por aquí el editor, lo voy a dejar aquí, ¿vale?
Y ahora voy a inspeccionar elemento.
Ahora la página está totalmente vacía, aquí parece que no hay nada.
En la consola, como ya vimos, súper importante siempre tener la consola levantada cuando estamos desarrollando.
En este caso parece que no aparece nada, ¿no?
Sí, voy a poner aquí que tenga algo, voy a poner aquí probando JavaScript, voy a guardar los cambios.
Ahora refresco y vemos que efectivamente este HTML existe.
Pero no parece que tengamos nada en la consola, ¿verdad?
Vale, vamos a ver este script y vamos a poner ya algo aquí en este script.
Voy a, por ahora, por asegurarme, voy a enseñarte por primera vez lo más típico que vas a tener que dominar en JavaScript,
que es el console.log.
Por ahora no es importante que sepas lo que es, pero tienes que saber que nos va a permitir loggear un mensaje en la consola.
Así que vamos a poner aquí, hola mundo.
Voy a guardar los cambios, voy a refrescar y vamos a ver que aquí me ha aparecido este mensaje de hola mundo.
Muy bien.
Así que esta sería tu primera línea de código en JavaScript.
Con esto ya tendríamos y estaríamos empezando, ¿vale?
Ahí, es verdad, ¿no?
Se ve cortada un poco la pantalla.
Lo dejo por aquí.
¿Sí?
Vale, ahora sí que debe salir bien.
Mejor.
Perfecto.
Vale.
Pues entonces tenemos esto, ¿eh?
Probando JavaScript y aquí tendríamos este hola mundo que hemos puesto.
¿Ok?
Vale.
Entonces empezamos un poquito con saber qué es lo interesante de JavaScript.
Lo primero que tienes que saber de cualquier lenguaje de programación es cómo crear variables.
Al final, ¿qué son las variables?
Las variables son como cajas en las que vamos a guardar información, tipos de datos.
Y los tipos de datos, que luego os explicaré, son bastante importantes en JavaScript y en cualquier lenguaje.
Pero en JavaScript son bastante interesantes.
¿Cómo se crea una variable?
Hay tres formas de crear una variable, pero quiero sobre todo que te acuerdes de dos, que son los importantes.
Tendríamos, para crear una variable, tenemos que decirle el tipo de variable, que es la forma que vamos a crear esta variable.
En este caso le ponemos let, que ahora te explicaré lo que es.
Luego el nombre de la variable, vamos a poner en este caso name.
Luego la asignación, le ponemos igual, que quiere decir, esta variable llamada name va a tener el siguiente valor.
Y aquí le ponemos el valor, que en el caso de utilizar comillas, pues quiere decir que es un string.
No vamos a estar, vamos a ir muy a saco con el tema de JavaScript.
Seguramente, si quieres profundizar más, lo que te recomiendo es que le eches un vistazo a algún curso gratuito que haya por ahí, a javascript.info, por ejemplo, y vayas viendo más los temas.
Vamos a ir, lo vamos a ir viendo, pero va a ser bastante a saco, ya te lo digo.
Entonces vamos a poner el name, que sea Miguel.
Este es un tipo de variable.
Luego existe otro tipo de variable, que es la constante, que sería const, que aquí podemos ponerle, por ejemplo, el last name.
Y aquí podemos poner cualquier otra cosa, por ejemplo, un número.
Vamos a poner cuatro, ¿vale?
Ya está.
Entonces, estas serían dos formas.
Ahora, la tercera, que es la antigua, además, y es la que no te recomiendo que aprendas, es var, de variable, ¿vale?
Con v.
No var de var, ¿vale?
De beber, sino de guardar variables.
Entonces, el tema.
Aquí podríamos poner otra cosa, como por ejemplo, isDeveloper.
Y podemos guardar una, un booleano, ¿vale?
Le digo que sí, que soy developer.
¿Cuál es la diferencia entre let, const y var?
Let, que vamos a asignar.
Let es como permitir, ¿vale?
Es como permitimos que nombre guarde la información esta, ¿vale?
Lo que tiene let es que tú puedes guardar una variable y puedes cambiarle, puedes reasignarle el valor.
O sea, podemos poner esto.
Aquí podemos poner el console.log para ver cuál es el valor que tiene name.
Y luego podemos cambiar el nombre de name.
O sea, podemos decirle, pues name ahora es Pepito.
Y hacemos un console.log de name.
Bueno, en este caso no sé por qué dice que name is deprecated.
Vamos a cambiarle el nombre a variable porque no sé con qué se está apelando esto el editor.
Pero bueno, lo dejamos así, ¿vale?
Le cambiamos el nombre a first name.
Y ahora console.log del first name.
Le cambiamos, reasignamos.
Y luego console.log first name.
Si guardo los cambios y actualizamos aquí, podemos ver Miguel y luego Pepito.
Podemos reasignar la variable.
En el caso de la constante, esto no se puede hacer.
Si cambiamos esto y en lugar de first name, lo que hacemos es mirar el valor de last name.
Luego intentamos reasignar el valor y luego intentamos verlo.
Voy a guardar los cambios.
Miramos esto y ves, te dice, has intentado asignar una propiedad que solo es de lectura.
Así que ya sabes cuál es la diferencia.
Entonces, ¿cuál es la diferencia entre var y let?
Básicamente, veremos que en JavaScript tenemos una cosa que se llama scopes.
Que los scopes vienen creados a partir de las llaves.
Por ejemplo, aquí podríamos tener un if, podríamos tener un while,
podríamos tener incluso un scope así creado.
No se suele ver mucho, pero esto al final lo que es, o una función, también en una función.
Al final lo importante es que esto crea un scope.
Entonces, ¿qué diferencia tienen estas variables let y var?
Pues el problema es que var, aunque esté dentro de un scope,
esta variable también se va a poder acceder desde fuera del scope, lo cual es un poco raro.
En cambio, el let no, no va a ser así.
El let lo que hace es que esa variable se crea justamente dentro de ese scope en concreto.
Lo que te permite además tener la misma variable, o sea, una variable con el mismo nombre,
fuera y dentro del scope, con valores totalmente distintos.
Así que aquí sería lo importante.
Ahora, ahora que sabemos esto, ya te digo, lo importante es que te olvides del var,
que no es tan interesante.
Y al final puedes utilizar let y const en todos los sitios,
si no utilizas Babel, que te lo transforma en un código que cualquier navegador soportaría.
Y seguramente por detrás te utilizará var, pero bueno, ¿qué más da?
¿Qué más da?
Entonces, dicho esto, lo importante, ¿qué se puede guardar dentro de una variable?
Pues se puede guardar de todo, se puede guardar de todo, es la bomba.
¿Qué se puede guardar?
Venga, se puede guardar todos los tipos primitivos.
¿Pero qué es un tipo primitivo?
¿Que son muy viejos o algo?
Bueno, los tipos primitivos.
Antes de entrar en los tipos primitivos, perdón, que hay una cosa de JavaScript que os quiero explicar,
que también lo hace importante.
Cuando antes he dicho que era multiparadisma, se me ha olvidado comentaros que también
lo que lo hace único a JavaScript, aunque hay otros lenguajes que también lo son,
es que su tipado es débil y dinámico.
¿Y qué quiere decir esto de que el tipado es débil y dinámico?
Vale.
Que sea débil quiere decir que esta variable first name que tenemos aquí y tenemos un string,
yo ahora aquí en la línea siguiente puedo decir, vale, pues ahora first name voy a
hacer que sea un 3.
Entonces hemos pasado de un string a un número y esto funciona correctamente, no hay ningún
problema.
Vamos a guardar los cambios y vamos a ver cómo, bueno, voy a quitarle el hola mundo para
que no nos dé tanta la murga, pero aquí podemos ver cómo he cambiado el valor y ha quedado
el 3.
Cuando he hecho esto, esto si fuese un tipado fuerte no nos permitiría porque diría, oye,
tú tenías un string, ahora me estás intentando asignar un valor que es un número, esto no
me lo como con patatas, ¿vale?
Pero en JavaScript sí ocurre y se lo come, pero bien comido.
Así que es una cosa a tener en cuenta y muchas veces a tener cuidado.
Lo segundo es que tiene un tipado dinámico, ¿ok?
Es diferente.
Lo que acabo de decir es tipado débil, podría ser débil y fuerte, en el caso de JavaScript
es débil y luego tendríamos el tipado dinámico o estático.
Y en el caso de JavaScript es dinámico.
¿Qué quiere decir que es dinámico?
Porque en realidad muchas veces la gente dice que JavaScript no tiene tipos, pero sí
tiene tipos, ¿ok?
Sí que tiene tipos, lo que tiene unos tipos un poco especiales.
Y ahora luego los explicaremos.
Pero en realidad tú cuando haces esta asignación que estamos haciendo en la línea 1, esta asignación
de aquí, lo que está haciendo JavaScript es dinámicamente decir que esta variable
firstName tiene un tipo que es string, ¿vale?
Ha detectado el tipo de la variable.
Cuando se le está asignando el valor, sabe cuál es el tipo que le estamos asignando.
Así que eso es lo que se dice que es un tipo dinámico.
Entonces, ¿cuál sería la diferencia?
¿Qué es lo que le haría estático?
Pues si le dijésemos cuál es el tipo que queremos.
Por ejemplo, si aquí pusésemos esto, seguramente esto le suena a gente.
Esto en realidad es lo que haría TypeScript.
TypeScript lo que te da son tipos estáticos.
Bueno, entre otras cosas.
Pero en este caso lo podrías hacer con TypeScript.
En TypeScript podrías decirle, no, esta variable quiero que tenga este tipo y lo estoy diciendo
de forma totalmente estática.
¿Vale?
Así que eso es importante.
Tipos dinámicos es que a partir del valor, al evaluarlo, el lenguaje sabe qué tipo
es y luego estaría los estáticos que nosotros le decimos cuáles son los tipos.
Son interesantes, obviamente, los tipos estáticos porque si tienes algo así, si intentas ponerle
un 2, te diría, oye, estás intentando poner un número y esto será un string.
Pero en este caso, ya os digo, en JavaScript no son los tipos estáticos, son dinámicos.
Y sí tiene tipos, pero son dinámicos.
¿Vale?
Importante.
Ahora, entonces, ahora que sabemos que tiene tipado débil y dinámico, ¿qué tipos son
los que tiene?
¿Vale?
Pues en los tipos que tiene, tiene diferentes tipos.
Son un total creo que de 7, si no me equivoco, son 7.
A ver, 7.
Vale, sí, 7.
Tenemos, ya hemos visto unos cuantos.
En un momentito hemos visto el número.
Hemos visto también el string.
Tendríamos el boleano, por supuesto, true y false.
Tendríamos undefined, que es un tipo más.
Tendríamos el null.
Tendríamos el bigIn, aunque este ya os digo, os lo podéis olvidar si no es importante,
el bigIn.
Y luego, bueno, lo voy a dejar porque es un tipo.
Y luego tendríamos el symbol, que tampoco es importante.
Ahora mismo, en este bootcamp, estos dos últimos seguro no los vamos a ver y no es importante
que te lo sepas.
Quédate con estos, que al final son los que nos van a dar la vida.
Estos serían los tipos primitivos.
¿Vale?
¿Qué significa sean primitivos?
Significa un montón de cosas.
Pero lo más importante es que los tipos primitivos son inmutables.
¿Qué es esto de inmutables?
Déjame que te explique una cosita antes de seguir con los inmutables, porque te pondré
un ejemplo y lo entenderás perfectamente.
¿Vale?
¿Cuál es el otro tipo que nos queda, que no es primitivo?
Los objetos.
¿Vale?
Los objetos en sí mismos son otro tipo de tipo, pero no son primitivos y que sí que
son mutables.
Y dentro de los objetos tendríamos diferentes estructuras de datos, como pueden ser los
arrays, los propios objetos.
Tendríamos los maps, weekmaps, sets.
Teníamos un montón de estructuras de datos que al final están basadas en objetos.
Incluso las funciones, pero bueno, eso es un poco raro, no hace falta que lo sepas.
El tema, el tema, que tenemos los tipos primitivos y los tipos que están construidos a partir
del objeto.
Bueno, al final en JavaScript está construido a partir del objeto, pero los tipos primitivos
hemos visto que son inmutables y por lo tanto, si los tipos primitivos, lo especial que tiene
es que son inmutables, ¿qué pasa con los objetos?
Estos que sí que se pueden mutar.
¿Y esto qué quiere decir de mutar?
Porque hay gente que debe estar diciendo, a ver, ¿qué pasa con esto de mutar?
¿Qué es esto de mutar?
¿Qué son los X-Men esto?
Vale, los X-Men no, pero lo que tiene la mutación en realidad sí que se parece un poco a lo
que pasa con los X-Men.
Y es que vamos a ver un ejemplo rápidamente.
Voy a guardar aquí una variable que voy a ponerle const porque además así os explicaré
una cosa, ¿vale?
Y tengo un string llamado miguel, ¿vale?
Pues ahora el, no sé qué le pasa al name, voy a poner first name, ¿vale?
First name, y esto pues lo que podemos hacer con los strings es que tiene una serie de
métodos que ya lo tienen en el prototipo, que tampoco es importante, pero lo que tienes
que saber es que se extiende de un objeto del que hereda, que significa que se trae todos
los métodos que ya tiene por defecto, porque si no, claro, cuando tienes un string a lo mejor
quieres ver cuál es su longitud, quieres cortar el string, ¿vale?
Pues al final todos esos métodos, esas utilidades, las trae ya de por sí el string.
Entre ellas hay una que se llama toUpperCase, que lo que nos permite es transformar un string
a letras mayúsculas.
Entonces, ahora, si hago un console.log y miro el first name, lo que veré, ¿qué esperaría
con esto?
¿Que el first name tuviese todas las letras mayúsculas o no?
Vale, pues vamos a hacer un console.log y a ver qué pasa, ¿vale?
First name, miguel, ejecuto toUpperCase, que esto lo que nos transforma es que el string
lo pasa a todas las letras mayúsculas y voy a ver cuál es el valor de first name.
Voy a hacer esto un poquito más grande para que nos quede ciegos.
Aquí lo tengo, ¿vale?
Vamos a mirar aquí.
Voy a refrescar y veo que no tengo las letras mayúsculas, ¿vale?
¿Por qué está pasando esto?
Bueno, el tema aquí es que el string no se puede mutar.
O sea, no hay un método que cambie el valor del string.
¿Qué es lo que está pasando?
Que todos los métodos del string, como es un tipo primitivo, lo que hace es devolver
un nuevo string.
Tú nunca podrás cambiar el valor que tengas de un string.
Es totalmente inmutable.
Siempre es el mismo valor.
No lo puedes cambiar.
Sí que puedes generar uno nuevo a partir de otro, ¿vale?
Puedes ir creando copias.
Puedes crear nuevos strings a partir de otro.
Pero no puedes modificar un string, ¿vale?
Entonces, ¿qué significa esto?
Que aquí vamos a tener el first name with Uppercase.
Entonces, vamos a dejar a hacer esto un poco más grande, ¿vale?
O sea, que cuando ejecuto este método, me va a devolver un nuevo string que tengo
que guardar también en una variable.
Y esta variable sí que es la que tiene el nuevo string, pero no cambia el valor de
original.
Ahora, si refresco aquí, podemos ver que sí que está todo mayúscula, ¿vale?
Entonces, ¿qué pasa con los objetos, por ejemplo?
El tema de los objetos es que si yo tengo aquí, por ejemplo, persona.
Y tenemos aquí esto así.
Y tengo un objeto.
Y a la persona, pues, por ejemplo, bueno, vamos a crear un array.
Un array al final es una lista, ¿vale?
Y vamos a poner list.
Y a esta lista lo que vamos a hacer es, pues, hacerle un push porque vamos a añadirle un
elemento y para eso vamos a ponerle el número 1.
Si ahora hago aquí un console.log de la lista, del list, vamos a ver cuál es el valor que
tiene.
En este caso sí que podemos ver que lo que está ocurriendo aquí es que el valor original
que tenía esta variable, el valor de este array ha cambiado, o sea, que se ha mutado.
Esto es lo que se dice la mutación, ¿vale?
Esta es la diferencia.
Un string es inmutable, pero un array, objetos, funciones y todo este tipo de estructuras sí
que se pueden mutar.
Puedes cambiar su valor.
Y fíjate en una cosa que es más importante todavía.
Aunque hemos dicho que la variable era constante, que sea constante significa que no se puede
reasignar, no que no se pueda cambiar el valor.
Así que si guardas una constante un objeto o un array, ten cuidado porque eso no quiere
decir que su valor siempre sea el mismo.
Puede cambiar.
En este caso estamos haciendo un push y podemos ver que estamos cambiando el valor original
que teníamos en list.
Obviamente hay formas de hacer esto de forma que no mutemos, ¿vale?
No mutemos el valor original.
Hay métodos que nos lo permiten.
De la forma que teníamos el toUpperCaseEnString, que era un método que venía para los string,
aquí hemos visto que en array tenemos un punto push que es un método que viene para manejar,
para añadir un elemento más en una lista de elementos, ¿vale?
Entonces, obviamente tenemos un montón de métodos.
Ahora no hace falta que te diga todos los métodos que tenemos en array.
Pero lo primero, ¿cómo se puede acceder a un elemento en un array?
Pues tendríamos que decirle la posición.
Y la posición empieza desde cero.
Así que si queremos acceder al primer elemento, por ejemplo, el que acabamos de hacer aquí
un push, hemos dicho que tenemos ahí una lista de un elemento, hemos hecho un push del
número 1.
Si quiero acceder a la...
Vamos a poner, por ejemplo, un número más grande.
Como el número de suscriptores que tenemos, 157, ¿vale?
Pongo 157.
Si quiero acceder a esa posición, al primer elemento, tengo que acceder de esta forma.
List, entre corchetes, y la posición que es cero, ¿ok?
Sé que esto es raro, pero la primera posición no es uno, es cero.
Entonces, si ahora hago un console.log de la posición cero de la lista, guardo y me tiro aquí,
puedo ver que tengo 157, que es el número que teníamos aquí guardado, que hemos hecho push.
Te estarás preguntando, vale, esto está muy bien, midu, pero me has dicho que mutar,
que es esto de mutar, de inmutar, y yo no quiero mutar el array.
Me has dicho que hay otras formas de añadir, por ejemplo, un elemento sin mutar.
Pues enséñamelo, porque mutar parece que es bastante rollo.
Ya te digo que siempre que se pueda, vas a querer evitar mutar las cosas porque es difícil
llevar un hilo conductor de qué estás haciendo con el código cuando empiezas a mutar arrays y tal.
Lo mejor es siempre, siempre que puedas, es ir creando copias de arrays anteriores para evitar esto.
¿Cómo se puede hacer? Por ejemplo, para añadir un elemento hay diferentes formas,
pero una muy sencilla sería utilizar el método concat, al que le dices a este array de aquí
quiero concatenar este elemento 157.
Además, concat puedes pasarle otro array, por ejemplo.
Podríamos pasarle un array de dos números, pero le puedes pasar también directamente un solo elemento,
que también funcionaría perfectamente.
Así que si ahora miramos cuál es el elemento en la posición cero de la lista,
pero hemos utilizado el concat en lugar del push y miramos la consola,
podemos ver que no tenemos ningún elemento.
Y esto es porque el concat nos está devolviendo another list.
Así que si miramos en la consola y miramos another list, vamos a ver ahora, voy a quitar esta línea,
ahora hago un console.log de la otra lista, que es de la que estoy concatenando un elemento,
y refresco, y aquí voy a hacer esto más grande, que tampoco hace falta que sea tan chiquitito.
Y ahora sí tenemos en esa lista un elemento.
¿Qué más cosas se pueden hacer?
Se puede iterar una lista, por ejemplo, con forEach, y aquí hay que pasarle una función para ejecutar en cada una de las iteraciones.
Se puede transformar una lista con el map.
Esto lo iremos viendo porque lo vamos a necesitar en React, así que es una cosa que iremos explicando.
Otro tipo de estructura de datos súper importante, como he dicho, son los objetos,
así que podríamos crear una persona.
En lugar de utilizar los corchetes para crear el array, lo que hacemos es utilizar las llaves.
Sé que antes he dicho que con esto se crea un scope, y es verdad,
pero también si lo que haces es asignar directamente a una variable,
o empiezas a utilizar aquí una key, que por ejemplo, nombre, dos puntos, Miguel,
no sé por qué el name, vale, pongo Twitter.
Esta estructura de datos lo que te permite es tener un key value, una llave y su valor, llave y valor.
También se le puede conocer, aunque es parecido, no es exactamente igual, a un diccionario.
Se puede utilizar como diccionario, pero piensa que es como un diccionario, ¿no?
Tú buscas una llave, que es con el nombre name, y el valor que tiene sería, es el string Miguel.
Twitter, podemos decir, y aquí puedes poner todos los tipos de datos que hemos conocido hasta ahora.
Por ejemplo, si es developer, como links, pues podríamos tener aquí también un array,
que le decimos midu.tube y https, midu.live, teníamos ahí un array.
Y ahora, ¿cómo se accede a cada una de las propiedades del objeto?
Por ejemplo, yo quiero recuperar el valor de Miguel, quiero este string de aquí.
Pues lo que tengo que hacer, voy a utilizar un console.log para que se vea,
es persona y accedemos al nombre de la propiedad.
En este caso, si he puesto el punto, te puedes fijar que Visual Studio Code aquí se me está chivando,
ya me dice, mira, esto es lo que puedes poner aquí, ¿vale?
Y te dice la propiedad, incluso sabe el tipo de la propiedad.
Aquí bastante listo, pero bueno, es porque utiliza por detrás TypeScript,
y por eso lo está sabiendo.
Pero lo importante es que ya nos dice aquí todo lo que podemos poner.
Así que si quiero recuperar el nombre, pondría .name.
Ahora, si quiero recuperar los links, podría poner persona.links,
y como este links es un array, imagínate que quiero el primer elemento del array.
Pues podría decirle, toma, aquí lo tienes, ¿vale?
Puedes concatenar.
Una vez que ya estás haciendo esto, puedes ir concatenando.
En esto lo vamos a ver ahora, cuando guarde los cambios y refresquemos,
vemos aquí que tengo Miguel, y aquí tengo el primer link de la lista de links
que teníamos aquí, ¿vale?
Así que aquí tengas en cuenta que puedes ir concatenando, ¿ok?
Que puedes ir accediendo a las diferentes propiedades que tiene el objeto,
y puedes ir lo más profundo que sea necesario.
Ahora, también, por supuesto, imagínate que quiero acceder a este de miduDev,
pero esta propiedad no la tengo, o sea, no voy a acceder directamente de esta forma,
porque esto significa que ya sé el nombre de la propiedad.
Imagínate que el nombre de esta propiedad la tengo guardada en una constante,
como una string.
Entonces, ¿cómo puedo acceder a una propiedad que de alguna forma es dinámica?
¿Cómo puedo decirle, vale, quiero ir a persona y quiero utilizar esta variable de aquí
para poder acceder al valor este?
Porque este Twitter lo tengo aquí como string, justamente.
Por lo que deberías hacer es utilizar los corchetes,
y en los corchetes pasarle la variable.
Así que esto se transformará en Twitter,
y esto se transformará en esto, ¿vale?
Para que lo tengas en cuenta.
Y esto es súper importante, porque es una cosa que vamos a ver muchísimo en React.
No pasa nada si ahora no lo pillas del todo,
porque cada vez que lo vayamos viendo, pues lo iré repitiendo,
pero llegará un punto que ya lo sabrás.
Ahora, si hacemos console.log de esto,
lo que nos debería devolver es el valor del objeto,
sería esta parte de aquí, ¿vale?
Así que guardo los cambios, refresco,
y aquí podéis ver que nos ha devuelto el valor de la key Twitter, ¿vale?
Así que esta sería la forma dinámica de acceder.
Y ahora vamos con lo último ya de JavaScript antes de pasar a React.
Pero antes, hidratación.
Ah, y por ahora bien.
¿Bien? ¿Sí? ¿Lo entendéis más o menos todo?
Vale, mira, cuidado con esto.
Mira, he visto una cosa así rápidamente en el chat.
Cuidado con esto, porque es diferente, ¿vale?
Si vosotros...
Es que he visto que alguien ha puesto en el chat esto.
Ok, cuidado porque esto es diferente, ¿vale?
¿Qué significa el primero y el segundo?
El primero significa en el objeto persona
entra a la propiedad field,
que es una variable con el valor Twitter, ¿no?
Entonces esto se pone aquí
y esto funciona perfectamente.
Pero la segunda,
lo que va a intentar, como os he dicho,
es intentar acceder al campo con el string field.
Y podéis ver que aquí no hay.
Entonces esto nos va a devolver undefined.
Así que tened cuidado, ¿vale?
Lo importante es que si queréis utilizar una variable,
no tenéis que utilizar los strings,
porque si no, JavaScript no hace magia
y no sabría saber si estás hablando de una variable
o de un string, ¿vale?
Ahora que ya tenemos todo esto,
voy a guardar los cambios por ahora para dejar esto.
Tienes que conocer, obviamente,
la magia, la crema de JavaScript.
Lo que lo hace, vamos.
Bueno, como cualquier lenguaje de programación, obviamente.
Las funciones, ¿no?
Si le queremos dar vida a nuestro programa,
necesitamos tener funciones.
Te voy a enseñar la función más típica del mundo.
Y te voy a explicar una cosa
que también hace único a JavaScript,
que aunque parezca mentira,
no lo hacen todos los lenguajes de programación.
Vamos a crear una constante
que le voy a llamar sumar.
Y le voy a asignar algo.
¿Qué es lo que le voy a asignar?
Le voy a asignar una función.
¿Cómo se crea una función?
Primero le tenemos que poner los paréntesis.
Esto lo que va a hacer es iniciar la firma de la función.
Y entre estos paréntesis le vamos a decir
cuáles son los parámetros que tiene esta función.
En una suma, ¿qué parámetros tenemos?
Pues tenemos, por ejemplo,
la parte 1, ¿no?
O el operando 1 y el operando 2, ¿no?
Vale.
Es A y B.
También se puede llamar A o B.
Al final no es importante.
Luego le cambiaremos los nombres
para ver que eso no afecta
a la funcionalidad de la función.
Ahora lo que vamos a hacer
es poner, para seguir con la firma,
es decir, vale, hasta aquí
han llegado los parámetros de la función.
Ahora esto lo que indica es
lo que va a ejecutar
es el cuerpo de esta función.
¿Y qué es lo que tiene que hacer esta función?
Vale.
Por ahora voy a hacer un console.log
del operador operando 1,
no operador, operando 1
y del operando 2, ¿vale?
Y esta función,
siempre las funciones,
normalmente, no siempre,
pero normalmente vamos a querer
si, como mínimo que hagan algo,
pero normalmente,
ya veréis que no es obligatorio,
pero normalmente vamos a querer
que devuelva algo.
En este caso, por supuesto.
Vamos a querer que devuelva
la suma entre el operando 1
y el operando 2.
Así que esto sería
la primera función
que puedes hacer en JavaScript.
Súper, súper fácil.
Sí, ahora,
para utilizar la función
tenemos que utilizar la variable
que es sumar
y si hemos visto
que en el array
teníamos que utilizar
los corchetes
para acceder a un elemento,
para el tema del objeto,
también lo podíamos utilizar.
En el caso de las funciones,
ya te puedes imaginar
que la firma ha empezado
con paréntesis,
tenemos que utilizar los paréntesis
y le tenemos que pasar
cuáles son los operandos
que queremos utilizar.
En este caso,
pues quiero sumar 2 y 2.
Y esto,
lo que va a hacer
es ejecutar esa función
y nos devuelve esto.
Ahora, ¿qué hacemos
con lo que nos devuelve?
Pues podemos, por ejemplo,
guardarlo en otra variable
o, aquí tenemos el resultado,
o podríamos directamente
hacer un console.log de esto,
¿no?
Para ver qué es lo que devuelve
esa función.
En este caso,
vamos a hacer el console.log directamente,
guardo los cambios
y voy a refrescar
y aquí podemos ver
el operando 1,
el operando 2
y el resultado.
Aquí tendríamos
el console.log del operando 1,
el operando 2
y aquí el resultado.
Los parámetros
se pueden llamar como quieras.
Por ejemplo,
yo he puesto operando,
pero puedes llamar
en lugar de operando a
y utilizar,
por supuesto,
entonces ya siempre
te tienes que referir
como a en ese parámetro
y el operando 2
le podemos llamar b
y pues le tienes que cambiar b
a todos los sitios.
Ahora,
es importante notar
otra cosa.
Puedes utilizar,
por supuesto,
variables para el tema
de las funciones.
Puedes tener que
aquí podríamos poner
op1,
le vamos a poner 8.
Op2,
vamos a poner
que es 2.
Pues en sumar
puedes utilizar
op1 y op2,
¿vale?
Ya puedes utilizar
las variables.
Y esto,
pues de lo mismo,
hacer el console.log de esto
y pim pam.
Ya podríamos utilizar
esta suma
exactamente igual.
Así que no hace falta
y esto es importante
que los parámetros,
el nombre de los parámetros
se llame igual
que las variables
que utilicemos
como argumento.
Y aquí tenemos
una diferencia,
nomenclatura importante.
Una cosa son los parámetros,
el nombre del parámetro
y otro son los argumentos,
que es cuando le estamos
pasando a la función
las,
el input de entrada
para que funcione,
¿vale?
Ok.
Pues eso sería
por aquí
cómo crear una función.
Lo importante
que tienes que ver
que te decía
que tenía algo especial
JavaScript
está aquí.
Y es que
en JavaScript
las funciones
en lo que se conoce
ciudadanos
de primera clase.
Esto que parece
muy clasista,
lo que significa
es que las funciones
son como
una variable más.
Se puede utilizar
tanto
como para pasarlo
como parámetro,
se puede guardar
en una variable,
se puede devolver
de una función,
puede devolver
otra función.
Al final,
las funciones
son ciudadanos
de primera clase.
Son como un objeto,
son como un array,
son como un string,
se pueden tratar
como tal,
se pueden guardar,
se pueden pasar
por parámetros,
lo que he dicho,
¿vale?
Es súper importante
y esto es lo que hace
JavaScript súper potente
y de verdad
hay muchos lenguajes
que esto parece mentira
que esto no lo tienen,
¿ok?
Entonces,
yo te he enseñado
cómo crear las funciones
de esta forma,
pero hay diferentes formas,
¿vale?
Esta es una de las formas,
pero hay diferentes formas.
Esto sería
una function expression,
sería una function expression,
así se le llama.
Básicamente es
a una constante
se le asigna
una función,
pero habría
una forma diferente
de hacer esto,
que es declarar
una función.
Para hacerlo,
por ejemplo,
vamos a hacer
la función restar.
Sería function restar
y esto sería
una declaración,
¿vale?
Una expresión,
una declaración.
Podríamos restar,
le diríamos también
pues el a y b
y ahora no hace falta
que pongas aquí
la flecha,
sino que levantamos aquí
y ponemos el cuerpo
de la función
y aquí pues ya ponemos
a menos b.
Eventualmente,
a ver,
esto hace casi lo mismo,
no son exactamente iguales
en cómo lo trata
el lenguaje
y dónde está disponible.
Lo que tienes que saber
en este punto
es que,
por ejemplo,
esta función restar
que tienes aquí,
yo la podría utilizar
arriba del todo.
Podría hacer aquí,
esto,
y aquí la podría utilizar.
¿Por qué?
Porque JavaScript
tiene un sistema
que primero
parsea el código,
detecta dónde están
las funciones,
las variables y tal
y hay algunas
que ya las genera
en memoria.
Por ejemplo,
la función se hace eso.
Esto es una de las cosas
que se llama hoisting,
que te lleva a la función
arriba y tal.
Lo importante
que tienes que saber
es que esa sería la diferencia.
Aún así,
yo creo que es buena práctica
que por ahora
te enfoques sobre todo
yo utilizaría esta
que es la más sencilla,
la más típica
y además no tienes que estar
pensando en estas cosas.
Así que primero
creas la función
y luego la utilizas.
Nunca lo hagas al revés
porque creo que te puede
dar más problemas
que otra cosa.
No vamos a ahondar en eso,
pero si te interesa
creo que sí que puede ser
interesante que lo conozcas.
Esta es la parte
de JavaScript
porque ahora vamos a empezar
ya con React.
¿Vale?
Así que
a ver si tenéis
alguna pregunta
mientras me hidrato.
¿Qué tal todo?
¿Lo habéis entendido
todo bien?
¿Ha ido bien?
Marcos Nieto
dice
vamos a poner ya
con esto
clases por ahora
no vamos a ver
pero más adelante
veremos clases.
Como os digo
esto va a ser muy incremental
entonces queremos
no vamos a hacer ahora
todo el JavaScript
¿vale?
Lo vamos a ir viendo
incremental.
Mirad
hay aquí
alguien que dice
¿qué pasa?
Si aquí por ejemplo
al sumar
claro
a sumar
le paso 2
y aquí 2
vale
estos son los problemas
¿no?
que tiene JavaScript
que al no ser
tipado estáticamente
o tipado fuerte
no le podemos decir
que la A
es un número
y la B
tiene que ser un número.
Lo podemos hacer
por ejemplo
a nivel de código
podríamos empezar
a poner condicionales
if
el tipo de A
es tal
entonces haz esto
y haz lo otro
¿vale?
Pero esto
ahora mismo
esto funcionaría
correctamente
y por funcionar
correctamente
vamos a ver
qué es lo que pasaría
si intentamos sumar
2
y el string 2
al final aquí
tenemos
esta cosa
esto es uno de los problemas
que tiene JavaScript
¿vale?
y es el hecho de
al ser tipado
dinámicamente
muchas veces
lo que tiene
es una cosa
que se llama
inferencia
que lo que hace
es inferir
el tipo de los datos
que quieres utilizar
si intentas
por ejemplo
utilizar el operando
más
que normalmente
es para sumar
dos números
pues funciona bien
si lo que quieres
es sumar
dos strings
funciona bien
¿por qué?
porque en lugar de sumar
lo que hace es concatenar
pero ¿qué pasa
si al final
lo que ocurre
es que intentas sumar
un string
con un número?
pues lo que va a hacer
es
vale
este número
estás intentando
sumarlo a un string
pues yo creo
que lo que quieres hacer
es un string
entonces
está infiriendo
al final
lo que está haciendo
es intentar
mezclar
los tipos
está
como averiguando
qué es lo que quieres hacer
además
si lo haces al revés
puedes ver
que hace lo mismo
pero hay veces
que esto no funciona
exactamente así
dependiendo de los operadores
y tal
la inferencia que hace
es bastante distinta
así que normalmente
es buena práctica
evitar que esto ocurra
¿vale?
pero esta es una de las cosas
más divertidas
que tiene
que tiene JavaScript
¿ok?
¿cuánto habéis escrito?
justamente
madre mía
en un momento
claro
si sumáis dos strings
el dos
más el dos
en este caso
son dos strings
¿vale?
no hay ningún problema
no vais a tener
ningún problema
luego está
también
si intentáis sumar
dos más dos
menos uno
entonces
tenéis esta maravilla
¿qué es lo que pasa?
que
dos más dos
es veintidós
en string
y luego hace esto
cuando utiliza la resta
¿ves?
primero ha sumado
lo ha transformado
en string
lo hace la resta
a ver
esto es
una de las cosas
que tuvo
sus locuras
de JavaScript
cuando se creó
si queréis saber
más cosas
sobre cuando se creó
JavaScript
¿por qué esto pasa?
¿por qué?
¿qué historia hay detrás
de todas estas cosas
extrañas?
que es lo que
gusta muy poco
a la gente
os recomiendo muchísimo
este vídeo que tengo
en mi canal de YouTube
que es
descubre 25 cosas
que no sabes de JavaScript
hablo de la historia
hablo de
por qué
tiene este tipo
de decisiones
el lenguaje
hablo de un montón
de curiosidades
de cosas que no tenía antes
y ahora damos por supuestas
así que bueno
lo importante
y es una cosa
que vamos a utilizar
en este curso
es que siempre utilicéis
por ejemplo
para comparar
los tres iguales
pero bueno
eso lo iremos viendo
¿vale?
entonces
hasta aquí bien
hasta aquí bien
ok
más o menos
ahora luego os digo
lo de
mis
mis
extensiones
de Visual Studio Code
para encontrar esto
¿vale?
mira Oliver
por ti
por ti
mira
en el index HTML
para cargar el script
lo podéis
así
script
source
y el script
¿vale?
de esta forma
ok
he comentado
lo de la igualdad
porque si hacéis
esto
utilizáis la igualdad
que son dos igualdades
lo que hace es
también inferir los datos
dice
ah
este dos
lo estás intentando
comparar con un string
pues voy a transformar
esto en un string
y los voy a comparar
y te dice que dos
número
es igual al dos string
así que normalmente
es buena práctica
y casi todos los linters
ya esto lo controlan
es mirar
que el dos número
si lo comparas
con el dos string
lo utilices
con la igualdad
de tres iguales
porque esto
no solo va a mirar
el valor
sino que va a mirar
el tipo
¿vale?
y aquí si te va a decir
false
así que es una buena práctica
hacer este tipo
de comparaciones
¿vale?
muy bien
pues como hemos llegado
ahí a la mitad
el hoisting
lo miraremos más adelante
¿vale?
que no os quiero
no os quiero liar
y el usar
el stricto
tampoco es tan necesario
ya no es tan importante
antiguamente
se utilizaba mucho
esto de use strict
esto
¿vale?
que era como una forma
donde javascript
era más stricto
con un montón
de cosas
que se saltaba
y tal
pero ahora ya
esto está por defecto
cuando utilizáis módulos
así que ya no es tan importante
¿vale?
tenemos esto
entonces
a esta parte
que ahora lo que vamos a hacer
voy a cerrar esto por aquí
vamos a seguir
por el full stack
y vamos a entrar aquí
a la introducción de React
entonces
vamos a por React
lo primero
antes de empezar
con React
súper importante
es que tengáis instalado
Node.js
en vuestro ordenador
así que
entráis a
node.js.org
vais a ver aquí
que tenéis
os va a salir
por vuestro sistema operativo
y os va a decir
que tenéis la versión 14
y la 15
aquí
si esto lo ves
en el futuro
2021
finales de 2021
2022
2023
hola
persona del futuro
gracias por verme
que sepas que aquí vas a tener
la versión
long term support
esto que significa LTS
que significa que
durante más tiempo
va a tener parches de seguridad
y luego aquí
lo que vas a tener
es la última versión
pero esta versión
la que es impar
dura menos
¿vale?
digamos
es como la versión
es una versión
que es la que están trabajando
justamente para que la 16
sea más estable
entonces yo la que te recomiendo
es que utilices esta
esta de aquí
aunque a mí en la clase
me veas utilizando la 15
tú utiliza la 14
¿vale?
yo voy a utilizar la 15
porque yo utilizo un Mac Mini M1
y la compilación está pensada
ya para ARM64
y tal
si no es tu caso
utiliza siempre la LTS
siempre que puedas
de hecho ya te lo pone aquí
recomendado para todos los usuarios
esta es una forma de hacerlo
otra que te recomiendo
en el caso que tengas
Unix o tengas Mac
es que utilices
NVM
NVM es un version manager
de Node
que lo que te permite
es instalarlo
e instalar
normalmente la versión
que necesites
por ejemplo
lo haces NVM
y aquí te ve
todas las que tienes instaladas
¿ves?
ya me dice que tengo la 12
y la 15
en este caso
le puedo decir
que quiero utilizar la 15
entonces ya tengo la 15
imagínate que quiero la 14
NVM install
y le digo la 14
bueno
no sé si me ve mucho
pero espero que veáis
con la letra chiquitita
pues eso
que ahí lo tendrías
¿vale?
ok
pues en este caso
una vez que tenéis Node
ya sea porque la habéis instalado
directamente desde aquí
o ya sea que habéis utilizado NVM
que por cierto
en mi página
tenéis un tutorial
un tutorial
por si queréis seguir un tutorial
como instalar Node en Mac
Linux y Windows
¿vale?
la sección de Node
pues ahí lo tenéis
de hecho
os lo voy a pegar
¿vale?
os lo voy a pegar
en el chat
por si alguien se lo quiere guardar
pam
ok
y ahí te explica en Windows
en donde sea
pues una vez que ya tenemos esto
lo interesante
es ya seguir los pasos
que nos está diciendo aquí
me voy a ir a mi
web de ejemplo
esto lo dejamos ya para atrás
me voy a ir al
midu bootcamp
nombre que os recomiendo
un montón que tengáis
esto lo voy a eliminar
y así lo creo desde cero
con ustedes
vale
entonces tengo
el midu bootcamp
¿vale?
tengo la parte cero
que eran los ejercicios
que hicimos en la clase anterior
que al final no había ningún ejercicio
que hacer
pero ya creamos
directamente
la carpeta
entonces voy a crear
la parte 1
pero en lugar de crear
la carpeta de la parte 1
lo que voy a hacer directamente
es utilizar este comando de aquí
npx create react app
parte 1
y mientras se hace
te voy a explicar
espero que no reviente
el stream
porque bueno
esto chupa bastante
pero le voy a dar
voy a asegurarme
vale
npm
npx create react app
parte 1
y te explico lo que es cada cosa
¿vale?
npx
esto es
un ejecutable
que viene de npm
npm
es un administrador
de paquetes
de node
es un poquito raro esto
pero node
puedes instalarle
dependencias
y ya tiene como un gestor
de paquetes
que se llama npm
npm viene este ejecutable
que se llama npx
que te permite
en lugar de instalar un paquete
ejecutarle directamente
lo ejecuta directamente
¿vale?
para instalarlo
dices
no
yo creo ejecutar este paquete
y que paquete
es justamente
el que estamos ejecutando
es este de aquí
estamos ejecutando
el paquete
create react app
que como ya dice el nombre
ya os podéis suponer
nos va a crear una aplicación
de react
y este nombre
es el nombre
de la carpeta
que nos va a crear
de hecho ya aquí
ya ha terminado
y nos va a decir
vale
ya te recomendamos
que empieces
entrando en parte 1
y hagas un npm start
¿vale?
y nos dice
los scripts
que ahora veremos
lo que es
que nos ha dejado
así que entramos en parte 1
y hacemos un npm start
¿vale?
ok
pues npm start
esto igual
tarda un poquito
tarda un poquito más
a ver que
me ha abierto Chrome
y ya sabemos
lo que pasa con Chrome
luego tendré que
luego lo tendré que abrir
con Chrome
porque me gustaría enseñaros
una cosa
veremos si funciona
vale
en la terminal
veréis que os ha dejado así
¿vale?
si tarda un poquito
en instalarse
a mí no sé
por qué me ha tardado
tan poco
pero estoy bastante
estoy bastante contento
se ha notado el npx
¿no?
en el streaming
para la gente que pregunta
Eva López
pregunta que
¿qué diferencia hay con Yarn?
Yarn al final
es como la alternativa
es la alternativa
npm
y la alternativa npm
de facebook
pero al final
es exactamente lo mismo
es un gestor
de paquetes
de dependencias
de proyectos
basados en node
es exactamente lo mismo
¿qué pasa en realidad?
que npm
viene por defecto
cuando tú instalas
node
por lo tanto
tiene bastante ventaja
y antes
Yarn era interesante
porque había
una mejora
de rendimiento
y de rapidez
de instalación
que todavía creo
que se mantiene
pero creo
que ya no es
tan
tan diferente
entonces yo os recomiendo
sobre todo para empezar
que utilicéis npm
y luego más adelante
pues le podéis dar caña
a otras cositas
a Yarn
y hay más
no es Yarn
ni npm
y ya está
por ejemplo
tenéis pnpm
que es una alternativa
a npm
también muy rápida
y muy interesante
así que hay un montón
de alternativas
no solo existen esas dos
pero bueno
es verdad que son las dos
más conocidas
vale
también podéis hacer
como dice
Java10
que ha hecho un npm install
menos g
pero no os recomiendo
que utilicéis un npm install
menos g
porque eso normalmente
necesita
podríamos haber hecho esto
npm install
menos g
create rack up
y luego ejecutar
create rack up
manualmente
el problema de eso
es que necesita
permisos de administrador
en tu máquina
normalmente
o con sudo
o te pide el password
y tal
la diferencia
entre npm
como os digo
es que npm
es para instalar
el paquete
y npx
lo que hace
es directamente
y lo descarga
en una carpeta temporal
y lo ejecuta
de ahí la x
de execute
x
vale
esa es la diferencia
normalmente
para instalar las dependencias
son npm install
pero para ejecutar
utilidades
muchas veces
se utiliza npx
vale
y
vale
ok
estaba leyendo
a ver si me quedaba algo
veo que
espero que ya
se os haya instalado
a todos todo
cuando ya tenéis esto
lo único que tenéis que hacer
es un npm
podéis hacer npm run
que esto lo que hace
es deciros
todos los scripts
que hay disponibles
tenéis start
tenéis test
build
jack
ahora el importante
es npm start
así que
utilizáis npm start
esto empieza
el entorno
de desarrollo
vale
y aquí os dice
que el local
os ha dejado
el puerto 3000
y cuando vamos
al puerto 3000
pues os sale
esta bonita
página web
de
el logo de react
dando vueltas
vale
ok
entonces
a ver
npx
create react
os voy a dejar
el comando
por si hay
porque veo
hay gente
que me dice
que no
pero
creo que es que ha puesto
mal los guiones
vale
entonces
ya tenemos esto
ya nos dice
podemos editar
el source
app.js
y todo esto
ok
así que vamos a ir
a nuestro editor
voy a levantar esto
y hacer un code
punto
esto lo que hace
es abrirme
el editor
aquí
vamos a ver
aquí
tendría la otra ventana
no
esto ya lo tengo aquí
aquí tenemos nuestro editor
al final
ya tenemos aquí el source
y tenemos un montón de archivos
un montón de carpetas
y un montón de cosas
entonces
dejadme que os explique
rápidamente
y vamos a borrar cosas
para que no nos líe
tenemos la carpeta public
la carpeta public
es donde vamos a tener
los recursos
que son estáticos
de nuestra página web
como pueden ser
por ejemplo
el favicon
el index html
imágenes
manifiestos
el archivo robots.txt
archivos estáticos
vale
entonces
si por ejemplo
quieres utilizar
una imagen
en tu proyecto
pues lo tendrías que poner aquí
en public
luego un source
es donde vamos a tener
el código fuente
de nuestra página web
en este caso
tenemos
app.js
que tendría los estilos
de nuestra app
app.js
que es de 5 días
tenemos
app.test.js
veremos
testing
en el bootcamp
pero hoy no
pero lo veremos
más adelante
por ahora
lo que os recomiendo
es que lo borréis
directamente
para que no nos dé
mucho lío
por ahora
no lo vamos a utilizar
¿ok?
¿qué más?
sí que me imagino
que ha petado
sí es que
hay veces que
yo creo que es
el intellisense
este
better type script
yo creo que es
intellisense
a ver
voy a
voy a
voy a quitar esto
voy a quitar
el type
porque yo creo
que es eso
que cuando
me imagino
que ahora
creo que es
que cuando
inicio
visual studio code
el intellisense
este se pone
a buscar
y creo que
eso es lo que
hace que
pete el stream
¿vale?
ok
entonces
tenemos los estilos
de CSS
tenemos
el index.js
este es el punto
de entrada
de nuestra aplicación
esto es súper importante
y este es el
uno de los archivos
más importantes
que tendrá
nuestra aplicación
luego tendríamos
el logo
SVG
esto no es muy importante
pero bueno
está hecho en SVG
y ahora veremos
cómo se utiliza
el web vitals
esto es un tema
de web performance
que tiene
Creer Breakup
justamente
para que
para que lance
y te envíe
los web vitals
que son unas métricas
de performance
o sea para hacer
el setup
de los test
esto también
lo podemos obviar
totalmente
y tendríamos
Slim Cache
que esto es un tema
para el linter
que ya viene instalado
y esto sería
para ignorar
archivos
para no comitearlos
en github
luego el package.json
donde tenemos
el nombre del paquete
la versión
las dependencias
los scripts
que hemos visto
que se puede utilizar
la configuración
del linter
los navegadores
que soportamos
perfecto
pues ahora que más o menos
hemos hecho aquí
un repaso
vamos a poder seguir
mejor
esto
aquí lo que nos dice
es que podemos
limpiar
todo
todo el
todo el archivo
nos dice
bueno vamos a quitar
todo el archivo
a ver
me dice
si os recomiendo
dejar
el
no pasa nada
si lo dejáis
en este caso
por ahora
no vamos a ver
el punto de entrada
esto lo dejamos
por ahora
así
luego volveremos
aquí
y le echaremos
un vistazo
ok
vale
pues entonces
el app.js
que tenemos aquí
este sería
el componente
que se está
renderizando
si vamos aquí
aquí hace un montón
de cosas
el punto de entrada
de nuestra aplicación
por ahora
lo importante
que quiero que te quedes
es en la línea 9
en la línea 9
podemos ver aquí
que está como
en una especie
de html
algo así
está renderizando
algo
está como
utilizando
la app
la app
la tenéis aquí
en la línea 4
vale
en la línea 4
y se está importando
esto al final
lo que está utilizando
son módulos
es más script modules
vale
por eso utiliza
el import
entonces
de esta forma
lo que vemos
es que ya está
utilizando este app
de alguna forma
aquí en el react
don punto render
y está utilizando
esto no hace falta
que entiendas
ahora mismo
lo que es
lo que tienes que saber
es este
vale
el componente
app
así que
el componente
app
lo que vamos a ver
es esto
esto es el componente
app
ahora entenderemos
que son los componentes
como funcionan
como los podemos cambiar
y todo esto
pero lo importante
es
que lo vamos
por ahora
a dejar limpio
vale
vamos a eliminar
todo esto
que tenemos aquí
lo voy a eliminar
y ya veis
que a mí
por lo menos
se me queja
de que al eliminar
todo esto
me dice
oye
que esto
ya no lo estás
utilizando
vale
pues como el logo
no lo estoy utilizando
también lo voy a eliminar
y aquí dentro
la línea 6
lo que va a dejar
es un hola mundo
así
tal cual
guardo los cambios
y ahora vamos a volver
a nuestra página
vamos a nuestra página
que es donde habíamos abierto
nuestro navegador
todo el tema de React
podemos ver aquí
nuestra página
que pone
hola mundo
vale
ahora que tenemos
el hola mundo
vamos a ver un poco
ahora sí
mejor este componente
lo primero que hace
es importar los estilos
esto es una cosa
de cómo funcionan
los estilos
en Crew Recap
por ahora lo vamos a ignorar
me quiero quedar más
en React en sí
ya hemos visto antes
cómo se declaraban
las funciones
aquí podemos ver
que un componente
no es más
que declarar
una función
aquí estamos declarando
una función
pero en lugar de declararla
con una minúscula
al principio
como puedes ver
está utilizando una mayúscula
vale
esto es súper importante
porque si no
luego cuando utilices
este componente
puede pensar
que es una etiqueta
HTML
ok
pero bueno
luego lo revisaremos
lo importante
es que los componentes
ostras
la música
voy a poner otra música
porque esto es muy raro
mejor esta
un jazz
vamos a poner jazz
esta
vale
como siempre
las funciones
hemos dicho
que tiene que devolver algo
vale
en este caso
hacemos un retón
y le decimos
lo que tiene que devolver
esto se parece
muchísimo
a HTML
esto es lo que vimos
en la primera página
si parecía
una peli
algo
chunga
vale
pues esto es muy parecido
a HTML
pero esto que estamos viendo aquí
no es HTML
ok
esto es una cosa
muy importante
que tienes que saber
que se parezca a HTML
en realidad se hace
para simplificar
el desarrollo con React
pero en realidad
esto que tenemos aquí
todo lo que ves aquí
todo esto
es JavaScript
de hecho
lo que vamos a hacer
con nuestro código de JavaScript
todo lo que hacemos
pasa por un
un compilador
transpilador
como lo quieras llamar
que se llama Babel
Babel
lo que hace justamente
es transformar
con nuestro código JavaScript
en otro código JavaScript
se suele utilizar
normalmente
para soportar
algunas cosas
que son más modernas
y tu navegador
no soporta
entonces lo que haces es
tú escribes
el JavaScript moderno
y te lo transpila
a uno más antiguo
que pueda utilizar cualquiera
pero
en este caso
va más allá
porque este HTML
que vemos aquí
en realidad
aquí puedes ver
que lo transforma
en JavaScript
vale
entonces
quédate que
esto que parece HTML
se llama
JSX
y no es HTML
sino que es JavaScript
pero bonito
esto es lo que se llama
un azucarillo sintáctico
¿ok?
azucarillo sintáctico
eso es curiosidad
no hace falta que te acuerdes
pero bueno
que lo tengas en cuenta
que cuando escribes
esta especie de HTML
en realidad
luego por detrás
esto se transforma
en JavaScript
luego veremos otro ejemplo
de por qué esto es importante
¿ok?
vale
pues ahora que tenemos esto
vamos a ver
qué es lo que
esto vamos a borrar
vamos a ver
qué es lo que
nos pide esto
qué son las cosas
que nos dice
de echarle un vistazo
vale
ya hemos visto
qué es el componente
ya tenemos esto
vamos a revisar
una cosa aquí
y os comento otra cosa
ya hemos visto
este componente
es el primer componente
que se ha creado
un componente al final
es una parte de la UI
que es reutilizable
en toda nuestra aplicación
si volvemos al punto
de entrada
de nuestra aplicación
y cuando hablamos
de punto de entrada
de la aplicación
es porque
cuando la aplicación
se carga
lo primero que va
es ahí
y a partir de ahí
es como un árbol
en el que va importando
módulos
dependencias
y tal
pues lo primero
que se ejecuta
es esto
aquí podemos ver
el react-dom.render
esto es súper importante
react-dom
esta es una librería
que lo que hace
es instalar
las dependencias necesarias
para poder renderizar
react
en el navegador
¿vale?
luego
lo que hacemos
con este react-dom.render
es decirle
lo que tiene que renderizar
como primer parámetro
y dónde lo tiene que renderizar
si lo queréis ver
todavía más claro
una cosa que podéis hacer
es quitar esto
que da un poquito de ruido
y más adelante
ya lo volveremos a añadir
y por ahora
lo dejamos así
de forma que le decimos
react-dom.render
renderiza
la app
y me lo renderizas
en el document
en el elemento
que tiene la id
root
¿y dónde vemos esto?
pues esto
si vamos a public
index.html
aquí
vas a ver
que tenemos justamente
esta línea
de aquí
tenemos un elemento
div
que tiene una id
root
así que cuando vemos
esta línea de aquí
lo que está haciendo
es recuperar justamente
ese elemento
para decir
dónde tiene que renderizar
la aplicación
si guardamos los cambios
y vamos aquí a safari
y miro aquí
este hola mundo
donde lo está renderizando
podremos ver
aquí
ves que dentro de root
es donde tenemos
nuestra aplicación
ok
perfecto
luego
una cosa interesante
de nuestro componente app
al final
los componentes
son funciones
antiguamente
se podían utilizar
también clases
y alguien me ha preguntado
por ahí
pero que prefieres
clases o funciones
si ahora tuviese que crear
cualquier componente
de React
siempre utilizaría funciones
siempre
nunca jamás
utilizaría una clase
y de hecho
por eso en este bootcamp
no vamos a ver las clases
porque es verdad
que existe
un montón de componentes
ahí fuera
que utiliza clases
y que si queréis ver
pues podéis ver
tengo un curso también
en YouTube
para aprender React
desde cero
donde doy
una explicación
mucho más
alargada
de React
por qué React
de dónde viene React
de quién es React
porque utilizamos React
y no utilizamos otras cosas
¿vale?
y además
hablo de las clases también
pero en este bootcamp
como tenemos un montón
de cosas por delante
no vamos a ver clases
vamos a ver solo funciones
pero ya os digo
que hoy en día
hoy en día
todo lo que tenéis que ver
de React
tendría que ser con funciones
si alguien os enseña React
con clases
seguramente
está desactualizado
y no es recomendable
el curso
que os digo
os lo voy a pasar
¿vale?
también
pero si vais a mi canal
y vais aquí abajo
veréis que hay un curso
que pone
curso ReactJS
desde cero
crea una aplicación
paso a paso
¿vale?
entonces os voy a pasar
la lista de reproducción
os la pongo en el chat
yo creo que es un
si queréis explorar más
temas de React
esto os va a ayudar
bastante ¿vale?
porque explico
ya os digo
desde cero React
totalmente desde cero
y lo hacemos
desde HTML
va a ser mucho más
o sea en el curso
que os paso de YouTube
es mucho más completo
como enseñamos React
que no como lo vamos a hacer
en el Bootcamp
que hay un montón de cosas
que hay que aprender
¿vale?
pero bueno
yo creo que
que si queréis algo más
no sé
al detalle
podéis ir a YouTube
pero si queréis
a pinceladas
lo vamos a ver
en el Bootcamp
y luego podéis
pues ampliar
vuestros conocimientos
o lo que sea
¿vale?
ok
¿qué más?
vamos
por aquí
ok
ahora que ya sabemos esto
una cosa importante
de las funciones
y los componentes
es que las funciones
los componentes
los podéis crear
como una declaración
como hemos visto
o podríais crearlo
de la otra forma
ya hemos dicho
que las funciones
se pueden utilizar así
esto también sería
totalmente válido
lo podéis utilizar
como creáis
el que os guste más
el que prefiráis
¿ok?
no hay ningún problema
de que utilicéis uno u otro
así que
con esto
ya lo tenemos
un poco más listo
y ahora que sabemos esto
lo que vamos a empezar
a ver
es que
también tenéis
la posibilidad
cuando en una función
queréis
lo primero que devuelve
la función
ya es lo que queréis renderizar
una cosa que se puede hacer
que digamos
que es la forma corta
de escribir las funciones
sería quitar esto
quitar esto
y esto ya funcionaría también
¿vale?
esto sea como la forma corta
esto lo que significa
es que lo primero
que ya tiene
es lo que devuelve
el componente
a veces puede ser útil
pero vamos a ver
que casi
muchas veces
en esta
bootcamp
no lo vamos a utilizar
porque vamos a querer
hacer cosas
dentro de nuestro componente
de hecho
dentro de nuestro componente
lo que podemos hacer
es crear variables
este hola mundo
que vemos aquí
lo podríamos tener
en una variable
vamos a poner
hola mundo
¿y cómo es que evaluamos
esta variable?
¿vale?
¿cómo utilizamos esta variable?
porque alguien pensaría
bueno pues pones aquí mensaje
y ya está
no
esto no funciona así
como esto se parece
a HTML
y XML
¿no?
es una mezcla
esto que se llama
JSX
cuando queramos evaluar
cualquier cosa
dentro de este sistema
que parece de plantillas
lo que tenemos que hacer
es utilizar
las llaves
en este caso
solo una
que he puesto dos
¿vale?
tenemos que utilizar las llaves
las llaves
lo que va a hacer
es evaluar
el contenido que hay
entre llaves
en este caso
pues lo que va a hacer
es evaluar
simplemente
el valor de mensaje
si guardo los cambios
y volvemos aquí
¿vale?
he puesto hola mundo
desde variable
digo es que no ha cambiado nada
¿vale?
pues hola mundo
desde variable
así que es como lo tenemos
ahora
esto aquí dentro
incluso lo que podemos hacer
es poner más cosas
o sea
este mensaje
al final
como lo que evalúa
es de avascript
aquí lo que podríamos hacer
vamos a quitar esto
hola
evaluación
en JSX
lo que estamos haciendo aquí es
evaluamos esta parte
del mensaje
y además
le concatenamos otro string
lo importante
que tienes que saber
es que
en este sistema de JSX
siempre que pongan las llaves
de esta forma aquí
es una evaluación
va a evaluar
lo que le está pasando
así que
si ahora
volvemos aquí
a nuestro código
ves
hola evaluación
en JSX
esto es súper importante
que esto lo tengamos claro
¿ok?
perfecto
ahora que ya hemos visto esto
podemos hacer un montón de cosas
o sea
esto sería
pues
podemos tener el 2
podemos tener un número
y aquí pues
podríamos evaluar
A más
A más B
podríamos evaluar
y poner aquí la nueva fecha
y si guardamos los cambios
y vamos a otra vez aquí
a nuestro editor
vale
esto ahora pues no
no le gusta
¿por qué?
porque no podemos evaluar
cualquier cosa
tienen que ser cosas
que realmente
se puedan
se puedan pintar
¿de qué se queja?
si quito esto
verás que ahora sí que funciona
ahora sí que funciona
pero bueno
me sale aquí el número 5
un poco raro
vamos a ponerle un salto
aquí
¿vale?
tengo igual la evaluación
y tal
pero si pongo este new date
entonces se queja
dice
oye
esto no me gusta
lo que estás haciendo aquí
vamos a dejarlo
y vamos a ver
qué problema dice
que tiene
¿vale?
nos dice
que los objetos
no son válidos
como hijos de React
y es que aquí
no puedes evaluar
cualquier cosa
al final lo que tiene que evaluar
son cosas que se puedan renderizar
¿qué es lo que se puede renderizar?
pues se podrían renderizar strings
se pueden renderizar números
se pueden renderizar listas
pero te las intenta
convertir a strings
elementos
¿vale?
pero no puedes renderizar
directamente un objeto
en este caso
lo que sí que podríamos hacer
por ejemplo
pues sería transformarlo
en un timestamp
vamos a hacer un más
aquí en medio
y directamente
ahora nos debería salir
el timestamp
¿vale?
ahora sí que ha funcionado
correctamente
pero ten en cuenta
que cuando digo
que puedes evaluar
significa que puedes evaluar
cosas que tengan sentido
o cualquier cosa
que te...
vale
una vez que ya hemos visto
todo esto
una cosa que puede ser interesante
para que todavía entiendas más
dónde está
la gracia
de todo el tema este
del JSX
imagínate
que ahora empezamos aquí
a poner más elementos
y aquí vamos a poner
el título
de la app
y aquí vamos a poner
estamos trabajando
en ello
y aquí ponemos
otro div
y aquí dentro
pues evaluamos
el A más B
y le vamos a poner aquí
una P
el resultado es
¿no?
todo esto
aquí es donde vas a ver
la gracia
la gracia
no te sabías
ese trucazo
¿eh?
Sergio
me quedo
vale
pues
aquí
el caso es
el tema
de este JSX
¿no?
que digo que se parece
a HTML y tal
si yo copio todo esto
y vamos a Babel
y pego
este código JavaScript
vamos a ver
a qué me lo transforma
ya puedes ver aquí
que se pone a concatenar
Create Element
con Create Element
dentro de Create Element
esto sería imposible
que lo escribiéramos
con JavaScript
por eso utilizamos JSX
sobre todo
¿vale?
porque es muchísimo
muchísimo
muchísimo
más cómodo
vale
una cosa importante
que habrán notado
cuando he puesto
el salto de línea
es que todo
se tiene que cerrar
al final JSX
tú no puedes poner
un salto de línea
y dejar
lo tienes que cerrar
ya sea así
o lo puedes cerrar
directamente
en la misma etiqueta
con las imágenes
cuando las utilicemos
lo mismo
¿vale?
siempre se tienen que cerrar
las etiquetas
ya puede ser
en este caso
pues así
por ejemplo
o se la puede cerrar
con otra etiqueta
pero siempre se tienen que cerrar
no puede ser
en HTML5
puedes dejar abiertas
algunas etiquetas
en el caso de JSX
no se puede
en el caso
de que estéis pensando
bueno pero esto me avisa
de alguna forma
bueno ya veis
que en el caso
de cosas raras
me avisa
un linter
¿vale?
entonces alguien me preguntaba
por mis extensiones
y todo esto
una vez que instaláis
Curebrackup
una cosa súper importante
es que tengáis
por un lado
instalado el linter
que es slint
esta extensión
de aquí
de slint
esto lo necesitáis
vamos
como el beber agua
como yo
¿por qué?
porque esta extensión
básicamente va a recuperar
la configuración
que ya tiene Curebrackup
y os va a decir
oye
tienes errores aquí
tienes errores acá
así que esto es súper importante
slint
la necesitáis
y la tenéis que instalar
y luego por otro lado
el hecho de que
como me salen a mí
los errores
es porque estoy utilizando
una extensión
llamada
error lens
¿vale?
y esta extensión
te dice el error
en el mismo sitio
si yo pongo esto
¿ves?
me sale aquí el error
a mí me gusta más así
pero hay verdad
que a veces
pues lo desactivo
así que bueno
que lo sepas
si quieres utilizarla
error lens
es totalmente opcional
pero slint
sí que es necesaria
y la configuración
la tenéis aquí
en el bucket.json
¿veis aquí que hay un slint config?
pues esta es la configuración
del linter
que está pillando automáticamente
¿ok?
muy bien
entonces
vamos a volver
a nuestro componente app
este componente app
está muy bien
pero si te fijas
ya está empezando
a hacerse bastante grande
¿no?
puede ser que
sea bastante grande
tenemos aquí
título de la app
estamos trabajando en ello
esto va haciéndose grande
imagínate
que teníamos aquí
esto título de la app
y aquí habíamos puesto
hola mundo
hola mundo
y luego pues
imagínate que esto
lo queremos
lo queremos utilizar
más de una vez
y tenemos esto así
pues podríamos empezar
a crear más componentes
para crear un componente
pues decimos
constante
el nombre del componente
en este caso
vamos a poner
mensaje
hacemos la asignación
y ponemos
qué es lo que tiene
que devolver este componente
pues en este caso
vamos a poner un h1
que diga
hola mundo
¿vale?
así que este componente
ahora
en lugar de hacer el h1
y todo esto
podemos utilizar
el componente mensaje
así que
mensaje
mensaje
importante ¿vale?
cerramos la etiqueta
se tiene que cerrar
si no
ves
te la intenta cerrar
automáticamente
podéis cerrar
una sola etiqueta
o poner las dos etiquetas
de apertura y cierre
¿vale?
lo que prefiráis
a mí me gusta más
cuando es solo una
hacer esto
esto ya
estamos creando
nuestros componentes
luego podría hacer uno
que sea
también
por ejemplo
descripción
description
¿no?
y aquí ponemos
return
ponemos
esta es la app
del curso
full stack
bootcamp
y ponemos este description
y lo ponemos
solo una vez
no hace falta
reutilizarlo
si no queremos
¿vale?
así que lo ponemos aquí
vamos a guardar los cambios
y vamos a ir
a nuestra aplicación
que la tenemos aquí
voy a refrescar
y aquí tenemos
hola mundo
hola mundo
hola mundo
esta es la app
del curso de full stack
aquí podemos ver
que es el mensaje
este componente
renderiza esto
esto
esto
una cosa que igual
estáis tentados
y tentadas
y que no tenéis que hacer
¿vale?
no tenéis que hacer
perdón
no tenéis que hacer
¿vale?
que esto es un error
que comete mucha gente
incluso gente
que está trabajando ahora
estos componentes
se tienen que crear
fuera
siempre del componente
no creéis componentes
dentro de otro componente
por ejemplo
esto funcionar
funcionaría
podríamos hacer esto
esto funcionaría
guardamos los cambios
y para que veáis que funciona
hola
funciona
voy a cambiarle de string
vamos aquí
y esto funciona
pero no lo hagáis
¿vale?
esto aparte de que tiene
unos problemas de rendimiento
importantes
que a lo mejor
no os notáis
pero no está bien
no es una buena práctica
siempre que queráis
tiene que ser
los componentes
tienen que estar separados
no tienen sentido
que estén unos
dentro de otros
de esta forma
al final
no solo
es buena práctica
que estén fuera
de otro componente
sino que podrían ser
archivos diferentes
en el caso del mensaje
podríamos crearle
su propio fichero
que sea mensaje
esto lo podríamos extraer
lo pondríamos aquí
y ahora tendríamos
que extraer el módulo
tenemos que exportar
el módulo
le podríamos hacer
por defecto
export default
mensaje
de esta forma
lo que estamos diciendo
es que podríamos
importar el mensaje
desde el archivo
mensaje
y ya podemos utilizar
ese módulo mensaje
aquí
y esto ya funcionaría
hola funciona
desde módulo
más adelante
en el curso
iremos viendo
que hay otras formas
de hacer este tema
de los módulos
pero por ahora
con que tengas esto
así
de esta forma
ya está bien
¿vale?
ok
entonces
ahora que ya tenemos esto
vamos a hacer otra cosa
vamos a hacer otra cosilla
vamos a poner
el tema
de
claro
porque se queda un poco aburrido
¿no?
si siempre renderiza lo mismo
y los componentes
la idea es que sean reusables
así no parece que sea
muy reusable
¿ok?
entonces
por ahora
hemos exportado el módulo
de esta forma
por defecto
que esto lo que hace
es que al importarlo
aquí podamos poner el nombre
hay otra forma
de hacerlo
y lo veremos
en siguientes clases
pero por ahora
quédate de hacerlo así
de esta forma
ahora
lo interesante
de las funciones
de cualquier componente
siempre es que se puedan reutilizar
si no se pueden reutilizar
pues menudo coñazo
menudo componente
claro
si siempre
dice el mismo mensaje
pues
es como si una suma
siempre diese
el mismo resultado
2 más 2
entonces
¿para qué queremos una función
que nos haga eso?
lo interesante
es que
a los componentes
como si fuese una función
se le pueden pasar parámetros
pero en lugar de llamarse parámetros
en React
se llaman props
en este caso
se le pasan por aquí
le vamos a llamar props
vamos a llamarle parámetros
por ahora
params
¿vale?
¿cómo se le pasan los params
a este componente mensaje?
para pasarle los parámetros
le tenemos que añadir aquí
como si fuese un atributo HTML
pero no es un atributo HTML
que os he dicho que es
JavaScript
así que
vamos a pasarle
un param
un atributo
que le vamos a llamar title
le vamos a poner
bueno
en lugar de title
le vamos a poner
MSG
o message
¿vale?
y vamos a poner aquí
estamos
trabajando
en un curso
de React
¿vale?
estamos trabajando
en un curso de React
vamos a guardar los cambios
y ahora
claro
ahora
¿qué pasa?
esto todavía no hemos hecho nada aquí
si miro los params
vamos a poner un console.log
para los params
voy a guardar los cambios
y por ahora
vas a ver que renderiza
exactamente lo mismo
¿eh?
hola funciona desde
desde módulo
¿ok?
pero vamos a ver la consola
tenemos aquí
message
estamos trabajando
en un curso de React
ya vemos que
en los parámetros
que nos ha llegado
tenemos el mensaje
aquí en el cuerpo de la función
podríamos acceder
al mensaje
así que ahora
aquí
en lugar de
poner el string directamente
podríamos evaluar
params
punto
y poner
aquí teníamos el message
message
guardamos los cambios
¿de dónde viene este message?
pues viene de aquí
¿vale?
no me lo estoy inventando
¿no?
es que este message
se lo hemos puesto aquí
y le llega este string
imagínate que esto
le está diciendo
le está pasando un objeto
con la key message
y el valor
de este string
y eso le llega por aquí
le hemos llamado params
pero ya hemos dicho que en React
esto se llama props
de propiedades
¿vale?
así que vamos a utilizarlo
como se llaman props
y ahora si vamos aquí
podemos ver que tenemos
estamos trabajando
en un curso de React
ahora sí
tenemos un componente
que es más reutilizable
todavía no es
lo más reutilizable del mundo
pero sí que le hemos dado
esa pequeña cosa
¿no?
que está haciendo
que podamos reutilizar
este componente
vamos con más cositas
¿vale?
ahora que ya tenemos
todo esto
que hemos pasado las props
y que podemos reutilizar
nuestros componentes
al final
esto le hemos pasado
solo uno
pero le podríamos pasar más
podríamos pasarle
por ejemplo el color
¿vale?
vamos a decir
este que sea rojo
este que sea verde
y este que sea
amarillo
¿vale?
podríamos por ejemplo
utilizar el atributo
del style
y aquí directamente
esto es un poco raro
¿vale?
porque en el estilo
normalmente
aquí cuando hacemos
estilos en línea
en HTML
se pasa de esta forma
¿vale?
se hace un string
pero en React
se tiene que pasar
un objeto
y entonces
tenemos que decirle
el color
tiene que venir
de props.color
¿vale?
así que
esto lo voy a
formatear un poquito
para que se vea mejor
y ahora
si guardo los cambios
y vamos a nuestra aplicación
ya
lo que estamos haciendo
es que cada componente
se renderice
en un color distinto
o sea ya estamos
con muy poca cosa
ya estamos viendo
cómo podemos reutilizar
componentes
¿vale?
ya le estamos sacando
un rendimiento
a nuestros componentes
de forma que
se entienda
cómo podemos
esto es una tontería
¿no?
que solo es el color
pero podría ser
mucho más potente
¿vale?
y con muy pocas líneas
de código
que es realmente
lo impactante
de React
¿vale?
¿qué más tenemos?
vale
una cosa que es súper importante
que os quería comentar
y os he comentado antes
¿ok?
¿veis este componente
de description
que tenemos aquí?
porque os he dicho
que tiene que ser
con mayúscula
si aquí utilizáis
la minúscula
y aquí
utilizáis la minúscula
ya puedes ver
que incluso
ha cambiado el color
pero si lo guardo
vamos a ver
que esto desaparece
en nuestra aplicación
¿vale?
ha desaparecido
ya nos da aquí
un wording
que nos dice
ojo
que esta etiqueta
de description
no está reconocida
por el navegador
si quieres renderizar
un componente de React
tiene que empezar
en el uppercase
de hecho
podemos ver
el árbol de elementos
y veremos
que ha intentado
renderizar
la descripción
en minúscula
¿por qué hace esto?
porque las etiquetas
HTML
se utilizan
en minúscula
entonces
tiene que diferenciar
cuando es un componente
cuando es una etiqueta
HTML
imagina
que al final
las etiquetas
HTML
pueden existir
con los web components
se pueden utilizar
etiquetas HTML
y pueden generarse
nuevas etiquetas
HTML
a lo largo del tiempo
por ejemplo
hace poco
existió
la de
dialog
¿vale?
dialog
HTML
esta es una nueva
etiqueta
imagínate
si hubiéramos creado
un componente
llamado dialog
y de repente
sale esta etiqueta
en HTML
la de
aplicaciones
que se podrían romper
o sea
sería una locura
¿vale?
pues eso es súper importante
que lo tengas en cuenta
siempre hay que utilizarlo
con una mayúscula
¿vale?
entonces
más adelante
iniciaremos con git
de hecho
lo vamos a hacer ahora
gafas
os veo
sois súper
súper
me voy a decir una cosa
sois
súper nerviosos
o sea
pero ¿cuándo iniciamos con esto?
¿cuándo hacemos?
pero bueno
relax
relax
vamos con un
con una
no sé
con una línea
¿no?
o sea
no se pueden dar saltos ahí
de golpe
no ahora empieza git
vamos con la calma
¿cuándo iniciamos git?
sí unos ansiosos
Sebastián
son unos muy ansiosos
¿cómo estáis?
¿lo vais entendiendo todo?
¿alguna pregunta?
¿cómo os habéis quedado?
¿ansias?
mis ansias
sois mis ansias favoritos
hombre
sois mis ansias favoritos
que yo
que yo
os entiendo
que os entiendo
totalmente
no pasa nada
hay algo que no
gracias
Dana
Vallardi
muchas gracias
hay algo que no hayáis
entendido
a ver
voy rapidito
¿vale?
gracias Diana
por el agüita
vale
voy rapidito
¿por qué voy rapidito?
por diferentes motivos
tenemos que hacer mucho
eso es lo primero
lo segundo
tenéis toda la semana
para revisar
¿vale?
para estudiar
tenéis mi curso de React
en YouTube
que es mucho más completo
y no es de pago
es gratis
y os puedo asegurar
que el curso de YouTube
es verdad que
lo hago a un ritmo
mucho mucho mucho más lento
pero
lo hago
yo creo que si queréis saber React
de verdad
ese curso que hice en YouTube
es muy bueno
os lo aseguro
o sea
no
honestamente
creo que estoy súper contento
porque mucha gente ha venido
y me ha dicho
hostia
es que explicas cosas
que es para flipar
¿vale?
que no he visto
en cursos de pago de Udemy
que tienen 5 estrellas
y no sé
yo creo que
que se hacen cosas
muy buenas
a un nivel
es que
por eso no puedo hacer
un curso de React
porque ya hice el de YouTube
entonces
es una putada
pues eso
que
que os recomiendo un montón
el de YouTube
¿vale?
vais a
midu.tuve
y hay una lista de reproducción
¿ok?
a ver
antes
os he leído por aquí
que me comentaba alguien
que si podía
bueno
gracias a todos
que decís que explico súper bien
os lo agradezco
que
a ver
alguien me decía
que enseñase
un componente
pero lo que pasa
es que es como habéis sido
que escribís un montón
vale
a ver
el de mensaje
este
no sé para qué
lo queréis ver
pero aquí tenéis
el componente mensaje
voy a arreglar esto
ay perdón
perdón
que no os estaba viendo
la pantalla
vale
este me decía
es mensaje
pues aquí lo tenéis
el de mensaje
¿vale?
luego
el description
lo pongo por aquí
os recuerdo que tendréis la clase grabada en youtube
para que la veáis tantas veces como queráis
¿vale?
arreglo el description para no liar la parda
y tal
muchas gracias
a los
no tengo las alertas
porque ya sabéis que me peta todo
lo arreglaremos
el vídeo se queda grabado en mi canal de youtube
vas a midu.tuve
y le das a tabla de notificaciones y tal
¿qué nivel de javascript recomiendas para ver tu curso de react de youtube?
bueno
yo creo que con un nivel de javascript básico
ya está
ya está bien
tu curso de react en la leche y punto
gracias hombre
y hay que aprender javascript
antes de aprender react ¿vale?
yo sé que hay gente que dice que no
pero no tiene mucho sentido
o sea
es que
es que
react se basa mucho en javascript
ya tengo un live server
que
que es
que
ah no
no tengo live server
no lo sé
pensaba que lo tenía
el
hot mold replacement
mi curso de platzi
que tengo es un curso avanzado
y
y no explica react
desde cero
el de youtube
yo creo que es
es de cero
avanzado
lo que pasa es que el de platzi
vemos graphql
vemos como más el ecosistema
de react
¿vale?
entonces por eso
el
mi recomendación el css los componentes
madre mía
podría tirarme días
lo he explicado alguna vez
pero
en otro momento lo hablamos
¿vale?
que es que aquí me puedo liar
vale
importar
vale
como veis
os enseño una cosa
como veis
aquí no estoy importando react
¿vale?
esto es una cosa que es bastante interesante
antiguamente
en los componentes de react
en un fichero que tienes un componente de react
hay que hacer
import react from react
¿por qué?
porque de esta forma
cuando este jcx se transforma en javascript
esto como es un react.create element
¿vale?
pues necesita que react se importe
pero esto lo han arreglado en babel
y ahora
sin usar
sin usar este import react
esta importación se hace automáticamente
¿vale?
y ya nada tienes que hacer
vosotros
así que si utilizáis un proyecto antiguo
y veis que os falla
si no importa el react
pues ya sabéis que lo tenéis que importar
y ya está
para no saber de react
absolutamente nada
siento que entiendo todo
no me siento perdido
no puedo creer
hago stream
me alegro un montón
es la idea
hombre que
me voy saltando cosas
pero porque quiero más
enfocarme
en que entendáis
el react
desde una perspectiva
de que podamos irlo a hacer
haciendo poco a poco
¿vale?
alguien me pregunta
la diferencia
en este return
al final
no hay ninguna
¿vale?
o sea
por ejemplo
pongamos que yo tengo
la función suma
¿no?
teníamos esta función suma
javascript
tenemos esta función suma
¿vale?
y alguien me dice
¿qué diferencia hay entre esto
y esto?
vale
y esto ¿no?
y utilizar
las
los paréntesis
pues la verdad es que
no hay ninguna
más allá
de que con
las paréntesis
te aseguras
que lo que vas a devolver
es la evaluación
de lo de dentro
¿por qué es importante?
porque si tú haces esto
¿qué es lo que crees
que te va a devolver
esta función?
pues lo que te va a devolver
ya te digo yo
que es algo que no te esperas
te va a devolver
la A
el valor de la A
y esto no te lo va a devolver
entonces
cuando tienes saltos
es buena práctica
te puede ayudar a hacer esto
por eso
en los componentes de React
lo verás
porque si haces esto
te puede llevar a algún susto
¿vale?
mira
en este caso
mira ya te avisa
este código no
no se puede
no se puede acceder a él
¿por qué?
porque si este retool
lo tienes en esta línea
y el JSX en esta
aquí lo que estás devolviendo
es undefined
¿qué puedes hacer?
puedes hacer esto
¿vale?
lo puedes dejar en la primera línea
y ahora sí que lo devolvería todo
pero se lee un poco difícil
¿no?
se lee un poco más raro
entonces yo os recomiendo
sobre todo para empezar
que lo hagáis así
os aseguréis el return
envolvéis lo que queráis devolver
y ya está
¿ok?
wow
habéis escrito un montón
habéis escrito un montón
en un momento
a ver
es muy bueno
el formato
¿podrías repetir cursos
como el de React?
lo repetiré
más adelante
lo repetiré
¿qué más?
¿podrías mostrar un componente de React
que hayas utilizado antes
o que tengas por ahí
que tenga funcionalidad práctica
en una web?
wow
pues es que es un montón
Eric
es que un montón
es que podemos hacer ahora uno
es que hay uno
que os lo hago
casi con los ojos cerrados
mira
avatar
source
size
este
además es un ejemplo
que hacemos en el curso de React
pues tenéis el source
esto se le pasa por aquí
luego el class name
se tiene que poner class name
porque en React
no puedes utilizar class directamente
y aquí
dependiendo del size
ponerle una clase u otra
y tienes un avatar
que le pasas el size y tal
pues es que esto
esto lo tengo yo
en un montón de proyectos
al final
un montón de componentes
uno de time ago
por ejemplo
mirad
tengo un proyecto
de código abierto
que ha participado
un montón de gente
últimamente
que es este de COVID vacuna
y entre los componentes
por ejemplo
tendríamos
a ver
este de time ago
esto es súper reutilizable
esto que
bueno
tiene mucho código
pero esto es un componente
que le pasas
un timestamp
y te dice cuánto tiempo
ha pasado
desde el momento actual
y te lo renderiza
así que
vale
lo siento que no os lea a todos
que es que sois un montón
un montón
Snowpack me parece brutal
me encanta
y espero muy pronto
hacer un vídeo
sí que tocaremos
Webpack
lo más difícil
es desacoplar componentes
puede ser
props
entre padres e hijos
a ver
props ahora lo hemos visto
pasar props
a padres e hijos
lo acabamos de ver
esto es pasarle
una prop
a padre e hijo
de hecho ahora
vamos a ver
el estado
una aplicación práctica
la que os acabo de enseñar
os voy a dejar
os dejo el enlace
vale
os dejo el enlace
por aquí
pero
super guay
vale
porque el retun
recibe un solo elemento
y si le pasamos dos etiquetas
hermanas se rompe
vale
Dana Vallardi
eso os lo explico ahora
porque además
está bastante bien
es bastante importante ese
vale
porque
venga
os lo explico esto
vale
que además lo quería comentar
vale
que pasa con
con react
porque siempre tenéis que devolver
un elemento
porque siempre
es buena
o sea
buena idea
no es que tenéis que hacerlo así
porque siempre
tenéis que devolver
un elemento
en react
vale
primero vamos a hacer una cosa
imaginaos esta suma
vale
tenemos esta suma aquí
esta suma de aquí
a ver
voy a poner por aquí
otro
vamos a cambiar al
esta
vale
imaginate esta suma de aquí
esta función suma
imaginaos
que es lo que tiene que devolver esto
la suma
¿no?
¿os imagináis que pudiese hacer esto?
¿a que no?
a que no creéis que una función
pueda devolver más de una cosa
no puede ¿verdad?
o sea
la suma solo devuelve una cosa
que es la suma
no podría devolver la suma
la a y la b
y devolver
no puede devolver
tantas cosas como lo que quieras
es imposible
entonces
esto
esta es la razón
por la que no se puede en react
devolver más de un elemento
a la vez
porque no puedes
devolver más de una cosa
entonces
si aquí esto
devolviese esto
¿cuántas cosas está devolviendo esto?
cuatro
¿vale?
estaría devolviendo
esto
esto
esto
porque esto al final
como hemos visto
sería un return
del react.create element
estaría haciendo esto
y no puede ser
¿sabes?
no
no es posible
por eso
¿vale?
o sea
no puede devolver más de una cosa
por eso
siempre tenéis que devolver
un solo elemento
¿vale?
un elemento
que incorpore los demás
¿qué se puede hacer
en este caso
para evitar
tener que crear
porque alguien puede decir
bueno
pero es que entonces
te obliga a generar
html
para esto
existe una cosa
que se llama
fragment
en react
que lo que te permite
es
envolver
lo que quieras renderizar
en react
sin necesidad
de crear un elemento
en el html
¿vale?
de esta forma
esto te funcionaría
correctamente
y ya tendrías
la posibilidad
de solo devolver
una cosa
¿vale?
harías el return
solo de esto
así que esta es la razón
por la que no se puede
¿ok?
y por supuesto
existen
returns condicionales
y también los veremos
en este caso
tened que tener en cuenta
que se pueden devolver
arrays
los arrays
sí que se pueden devolver
esto sería correcto
aunque es
yo os recomiendo
que os olvidéis
de arrays
y siempre utilicéis
el fragment
¿vale?
mejor el fragment
porque los arrays
os obliga
a poner coma
entre cada elemento
indicar la key
es un poco más coñazo
también podéis devolver
directamente un string
eso sería otra cosa
correcta
y también podéis devolver null
que quiere decir
que no devuelve nada
¿vale?
ok
vamos a ver
por dónde va un poco
la línea del curso
mirad
hay unos ejercicios
para hacer
entonces
los ejercicios estos
lo que os puedo decir
es que los hagáis vosotros
¿ok?
hay unos ejercicios
y los podéis hacer vosotros
voy a hacer el primero
y así
vamos a terminar
la clase de hoy
haciendo un ejercicio
y utilizando
github
¿vale?
vamos a hacer github
cómo hacer el push
cómo hacer el commit
y cómo hacer todo esto
y de esta forma
pues lo veréis
y no os tendréis
que preocupar
de cómo hago esto
cómo hago lo otro
espero que tengáis
una cuenta
en github
y que de esta forma
pues lo tengáis ya
previsto
¿vale?
que no
que no
no os generéis
ahora la cuenta
o sí
no sé
a ver
solo tenéis que ir
a github.com
le dais a
sync up
y ahí generáis vuestra cuenta
y ya lo tendríais
¿vale?
entonces
voy a ver
si
voy a
iniciar la sesión
que debo tener por aquí
vale
no puedo iniciar la sesión
en
espero que no se rompa
la emisión
¿vale?
no se va a poner difícil
no hombre
no
no se va a poner difícil
¿funciona todavía bien?
pese a que tengo
Chrome
espero que sí
vale
ya tengo aquí
github
vale
espero que estéis
en vuestra cuenta
de github
y que todo funcione
correctamente
si intenta romper un poco
se entrecorta
vaya por Dios
ya se está rompiendo
brutal ¿eh?
bueno
creo esto rápidamente
y lo
ah sí
tiro
vale
mira
repositorios
veis que aquí tenéis un botón
que pone new
vale
por lo que tenéis que hacer aquí
es darle
básicamente
decís vuestro repositorio
en este caso podéis poner
midu
midu
dev
bootcamp
¿vale?
y aquí podéis
full stack
bootcamp
le podéis poner que sea público
si no queréis que nadie lo vea
pues nada
le da esa private
y ya está
y entonces
aquí
lo podéis dejar todo como está
creamos el repositorio
¿ok?
crear repositorio
creamos el repositorio
y aquí ya nos dicen unas cuantas cosas
a ver
hay un problema
que es difícil que yo os explique ahora
rápidamente
si os cuesta mucho git
lo que podéis hacer es
este botón de setup in desktop
si lo queréis hacer por la terminal
como lo voy a hacer yo
el problema es que tendríais que
tendríais que configurar todo el tema de SSH
¿vale?
SSH es que necesitáis
conectaros
para que la terminal
tenga acceso
con las claves
y tal
o podéis utilizar
HTTPS
¿veis que aquí pone
SSH?
esto lo que nos va a permitir
es que no nos pida la clave
en ningún momento
si no os queréis liar
con keys SSH
que os recomiendo mucho
que lo hagáis
porque es bastante cómodo
otra cosa que podéis hacer
es darle a
HTTPS
¿vale?
le dais a este botón
el problema
que os irá pidiendo
la contraseña
cada vez que hagáis cosas
¿ok?
si os cuesta mucho
el tema de la terminal
podéis hacer el setup en desktop
o a mí una aplicación
que me gusta mucho
es fork
fork es una aplicación
con la que podéis utilizar
todo el tema de git
creo recordar que es totalmente gratis
hace tiempo que no la uso
ah no
no gratis
es cara
antes son 50 dólares
antes era gratis
pero si no
github tiene una
tiene una aplicación
que tampoco está nada mal
que también os recomiendo
¿eh?
que es esta
también está para Windows
está para Mac
está para lo que queréis
lo que queráis
si no
pues la configuráis
SSH
y ya está
yo en mi caso
ya lo tengo configurado
así que ya estaría
¿ok?
a ver
¿qué me decís?
que git kraken
dice por aquí
otro smart git
os voy enseñando algunas
por si
hostia
esta se ve bastante
antigua
git kraken
bueno
esta no se ve mal
bueno
veis que tienes alternativas
la más sencilla
yo creo que
seguramente
será la de la propia git
¿vale?
entonces
yo voy a utilizar SSH
porque ya lo tengo todo configurado
si no tenéis que ver
cómo configurar SSH
y todo esto
lo que
aquí os dicen
si quieres crear un nuevo repositorio
o si quieres pushear
desde uno que ya exista
en este caso
pues vamos a crear
podríamos crear un nuevo repositorio
¿no?
o pushear uno que ya existe
vamos a pushear uno que ya existe
porque ya tengo creada cosas aquí
¿vale?
en mi carpeta
entonces
cuidado de no pushear
esta de parte 1
porque luego esto será parte 1
parte 2
parte 3
así que aquí pones git remote
vais a pegar esto
que nos acaba de aparecer
git remote
git remote
anda que lo he pegado
y lo he empezado a escribir
vale
git remote
add origin
bla bla bla
le damos
¿vale?
dentro de midu bootcamp
nota git repository
vale
¿por qué?
ah
vale
vale
bueno
sí
claro
porque no he iniciado el repositorio
git
si queréis iniciar el repositorio
directamente
hacéis git init
¿vale?
ahora sí
se inicializa el repositorio
y ahora ya lo podéis hacer
claro es que dice
un repositorio existente
no una carpeta existente
¿vale?
entonces ahora sí
primero hacéis el git init
importante
luego hacéis git remote
add origin
bla bla bla
y ahora ya le podéis crear
cuál sería la rama
¿veis?
que tengo por ahora master
pero bueno
ahora la moda está en poner main
en lugar de master
así que git branch
main
vale
no la he podido renombrar
porque ya tiene master
bueno
pues va a tirar con master
directamente
así que si os da ese error
lo podéis ignorar
eso sería para renombrar la rama
pero claro
es que no la tenemos
así que por ahora
vamos a hacer un git push
git push
menos u origin
y le decimos master
vale
bueno no sé qué me ha pasado
anda que ha empezado bien este
ha empezado este bien
a ver
¿qué hemos hecho aquí?
la hemos liado a parda
la hemos liado en un momento
super parda
no sé qué he hecho
al crear esto
es que
vale
¿sabes qué pasa además?
no hagáis esto
ahora
mira
aparte
me acabo de dar cuenta
de una cosa
que es bastante interesante
mirad
un problema
que está habiendo
es que
la parte 1
cuando lo hemos creado
con el query backup
ya me ha generado
un repositorio
claro
cuando vamos aquí
a la parte 1
si aquí buscamos
los archivos
que están ocultos
¿veis que aquí tengo un repositorio?
pone git
git ignore
claro
esto ya me había creado un repositorio
eso por un lado
que este sí que lo podría haber utilizado
pero claro
esto sería la parte 1
que no tenía mucho sentido
que la tuviésemos
entonces
lo que
para empezarlo
una cosa que podríamos hacer
es eliminar todo esto de git
que tenemos aquí en la parte 1
el problema es que cuando creéis
con query backup
no sé si se puede
no sé si se puede evitar
que os crea un repositorio
pero por defecto
os crea un repositorio
tenerlo en cuenta
porque os puede hacer esto
y al final
lo que puede ser
es que tengáis más de un repositorio
dentro de un repositorio
y eso es bastante problemático
¿vale?
entonces
primero vamos a eliminar esto
y el git ignore
en realidad
lo que podríamos hacer
es mover
de la parte 1
el git ignore
este que hemos creado
que en realidad
luego lo tendremos
que arreglar
pero lo podríamos poner aquí
luego en la parte 1
espero que ahora sí
no tenga ningún tipo de
¿vale?
commit git
hostia
como solo utilizo
como solo utilizo alias
ahora ya no me acuerdo
como
ah mira
una cosa
claro en el editor
si tenéis Visual Studio Code
también podéis utilizar
para comitear
que lo tengáis en cuenta
¿vale?
o sea que aquí podemos comitear
y poner
phish commit
lo que
ahora sí que ha cometeado
aquí lo podríais hacer también
si no queréis utilizar
alguna herramienta
aquí también lo podríais hacer
y lo que es interesante
es poder ver los commits
que hayáis hecho y tal
pero veis que me había
todavía me aparecía aquí
que tenía dos repositorios
uno aquí
y otro aquí
así que ahí me la
me la ha liado parda
cuando hemos tenido los dos
espero que a partir de ahora
ya no me dé
tantos problemas
vamos a ver
ahora sí
git push
u origin master
master porque es la rama
en la que queríamos pushear
ahora sí que podríamos ir
a nuestro repositorio
aquí
si refresco
debería ver
que tenemos el código
ah pero veis
que me ha hecho esto
esto es porque
esta parte uno
tenía su propio repositorio
y ahí todavía
me la
me lo ha
me lo ha detectado
ahí se ha vuelto
muy loco
a ver
parte uno
pero ya lo había quitado
aún
aún me lo ha dejado así
esto es porque
está haciendo un submódulo
y tal
a ver
que si
veis que os la está
volviendo muy loco
a lo mejor
lo mejor que podéis hacer
es empezarlo antes
es crear directamente
el repositorio
desde cero
por
vamos a ver
si se puede hacer esto
create react app
avoid git creation
seguro que hay algún flag
algún
mira
no git
a ver si añadieron
esta opción
no
no lo han añadido
o sea que siempre
os genera
siempre os genera
el punto git
pues tened cuidado
con eso
porque os la
os la puede liar
de esta forma
vale
vale
pues vamos a ver
igual podemos
hacer
part uno
react
vale
esto por un lado
le voy a cambiar
el nombre
para obligarle
que me lo vuelva a subir
eliminar este
porque este
me lo ha subido mal
me ha subido
como un submódulo
lo cual está mal
luego tened cuidado
de no subir
todos los nodes
de módulos
y para esto
lo hacéis en el
git ignore
y en lugar
de que tenga una barra
le quitáis la barra
y ya lo tendríais
vale
y así pues nunca
se subiría
lo que sean
los nodes
de módulos
guardáis los cambios
y ahora aquí
que pone 5000k
deberíamos ver
que son venas
y esto
cerramos el repositorio
este
ahora sí
vale
ahora podéis ver
que solo tengo
las carpetas
que sí que queremos
y tal
así que vamos a
este es un módulo
este que me había hecho
que ahí me la ha liado
parda
o sea que acordaos
de eliminar
la carpeta git
porque si no
os va a hacer
un
commit part 1
react
os la va a liar
vamos
midu
bootcamp
git push
espero que esto
no me dé más problemas
y ahora
me miramos aquí
y ahora
ahora veis que
ahora sí que aparece
o sea que acordaos
de antes de pushear
de lo que yo
lo que yo no he hecho
pues vosotros
hacedlo bien
vale
es posible
que
si lo comitéis antes
yo creo que es que
se ha hecho un poco
la picha del lío
al principio
vale
de lo del git
pero bueno
una vez que
lo ha
esto
si lo hubiéramos hecho
desde cero
no hubiera ningún problema
o mejor
vale
pero bueno
ya veis como lo podríais
arreglar en el caso
que os pase
y no pasa nada
ok
muy bien
con esto más o menos
veo que por lo que veo
en el chat
la gente
terminé con un proyecto
raid con submodus
ya
para mí no fue necesario
la carpeta git
borrar la carpeta git
puede ser
igual es porque
git a veces
es como desactivar una bomba
bueno al final lo hemos conseguido
si quieres añadir
todos los archivos al commit
con poner directamente
el mensaje
ya hubiese
sí, cierto
si queréis añadirlos todos
no hace falta que los
yo es una buena práctica
que hago para siempre
asegurarme lo que quiero añadir
y lo que no quiero añadir
nunca hago un commit
directo
vale
vale
para cada parte
se supone
aquí en los ejercicios
lo que vamos a ver
voy a quitar esto
y esto
vamos a hacer un ejercicio
al menos
vale
aquí podemos ver
que dice parte 1
cursinfo
no sé qué
para cada ejercicio
lo que deberíais hacer
se supone
o sea
vamos a parte 1 de react
aquí deberíais hacer el npx
create react app
y ponerle el nombre de la carpeta
veis aquí por ejemplo
dice cursinfo
en este caso
a ver
podéis crear
todas
todas
o podéis ir creando
conforme la vayáis necesitando
vamos a hacer solo
solo una
cursinfo
vale
esto tardará unos segundos
espero que no se note mucho
en el stream
vale
instalará las dependencias
ok
wow
está tardando más
bueno igual se corta un poco
el stream
por culpa del npm install
pero
ahora vuelvo
ok
lo podéis ir haciendo
mientras
también
yo utilizo
zsh
y ya tengo aliases
por eso
muchas veces
a veces
no me acuerdo
como
como
como se hace
el comando
porque ya estoy demasiado acostumbrado
a utilizar el alias
que es el que te dice
vale
hace un commit
vale
pues hazlo así
así que
si alguna vez veis
que no me acuerdo
como hacer un git commit message
ya sabéis
ya sabéis que pasa
que ahora no me acuerdo
que es git commit m
pero
igual en algún momento
se me olvida
soy capaz
solo que lo sepáis
ay
creo que me ha instalado
con npm
cachis en la mar
creo que no he cambiado
la versión de note
aquí
y por eso
puede ser que me haya tardado
tanto
creo que por eso
me está tardando
tanto
ay
ay
vale
yo tengo que utilizar
la 15
vale
porque
como os he dicho
tengo
mac mini m1
ay
aquí me la he liado
course info
lo voy a eliminar
lo vuelvo a hacer
y así os da tiempo
todavía que la hagáis
otra vez
vale
ahora tardará menos
por eso
si tenéis que
para cada proyecto
se supone que si
que tenéis que
generar un
crew recap
oye ahora si que he hecho
vale
si
aquí son las 10 de la noche
pues con el m1
pues
lo he comentado
unos cuantos streams
que yo estoy súper contento
pero bueno
todavía le falta
un punto de potencia
como he mejorado
mi terminal
desde la última vez
pues no sé
tampoco he terminado
no he hecho mucho más
no
puedes utilizar twitch
y no jugar a videojuegos
no es obligatorio
jugar a videojuegos
que yo sepa
haber visto a gente hablando
gente haciendo cosas
bueno
pues
haremos este ejercicio
que básicamente
lo que nos pide
es tener este código
en el index.js
y refactorizarlo
yo voy a hacer el primero
os dejo ahí
no he usado
Vite
en vez de crew recap
Gonzi
pero
sí que he utilizado
Vite para VueGS
y me encanta
gracias
también a Vallardi
solo uso twitch
para ver mi dudev
madre mía
eso sí que es bonito
vale
ya tenemos
el
curso info
lo voy a abrir
voy a cerrar
este
este
y ahora
levantamos el nuevo
vale
entonces
aquí
en los ejercicios
para que
vayáis
cerrando
ficheros
y tal
vale
entonces
este
que es el index.js
ya nos dice aquí
que nos tenemos que copiar esto
vale
y ya veis que tiene justo
lo que necesitáis
así que os lo podéis copiar
y el index.js
lo elimináis
con este contenido
guardáis los cambios
y ahora vais a la terminal
y hacéis un npm start
por si no os lo he dicho
pero todos los viernes
a las 8
8 y 4
tenemos también
una nueva sección en Twitch
que se llama
aprendiendo
vale
y nos ponemos a aprender
Vue
aprender Svelte
Webpack
lo que sea
vale
así que
si os queréis apuntar
todos los viernes
ya sabéis aquí
hacemos aprendiendo
y lo aprendemos desde cero
no damos nada por sentado
bueno
algunas cosas sí
pero
en lo que estamos aprendiendo
no
vale
así que si os queréis apuntar
viernes a las 8
y así pues aprendéis más cosas
vale
a las 8 de la tarde
hora española
viernes a las 8 de la tarde
hora española
lo mejor que podéis hacer
es ir a Twitch
y mirar el calendario
aquí podéis ir a
MiduDev
vais aquí al
al calendario
y veis aquí
aprendiendo
Vue
pues aquí normalmente
si vais a la siguiente semana
aprendiendo Vue
pero bueno
yo le cambio el título
a lo mejor no es Vue
ya le cambiaré
y le dais al recordatorio
pam
y ya os avisará
la próxima vez
vale
que lo sepáis
por si os animáis
que nos lo pasamos
bastante bien
vale
entonces
el ejercicio
el ejercicio es muy interesante
porque ya empieza
a que veáis
cómo se tienen que hacer
componentes
la idea es
que podéis ver aquí
que tenéis
un h1
un párrafo
un párrafo
un párrafo
y aquí
un párrafo
pero que hace algo diferente
a los otros
entonces el ejercicio
es extraer esto
y crear un componente
lo podéis crear
por ahora
aquí en el mismo fichero
pero vamos a tener
el title
y entonces aquí
en el title
tendríamos esto
y hacemos un return
de esto
ahora claro
este curso
que de dónde
le puede llegar
el curso
pues esto
se lo podríamos hacer aquí
por ejemplo
que le llegue
como una
como una prop
¿no?
props
y hacemos props
punto
curso
y entonces
ahora este
en lugar de utilizar esto
ya tendríamos el title
y le podríamos pasar
el como prop
el curso
ya lo tendríamos
¿vale?
esto mismo
habría que hacerlo
con esto
solo que esto
sería un componente
que se utilizaría
más de una vez
y con esto
que sería el componente
totales
¿ok?
una cosa interesante
que quiero comentaros
es que cuando tenéis
un componente
como este title
veis que es muy cortito
lo podíais
llevar al siguiente nivel
una cosa que se puede hacer
en javascript
es el tema
de la desestructuración
¿vale?
que es extraer
una propiedad
de un objeto
directamente
como puedes ver
aquí
tenemos props
punto course
para extraer
esta propiedad
del objeto
directamente
podemos utilizar
una constante
y aquí
abrimos llaves
indicamos
el campo
del objeto
que queremos extraer
y le asignamos
esto
desde las props
y de esta forma
ya podríamos hacer así
¿ok?
lo que estamos
haciendo aquí
esto
para que
os hagáis a la idea
es igual
la línea 5
y la línea 6
son iguales
¿ok?
solo que la 5
es un poquito más corta
una vez que sabéis esto
podéis llevarlo todavía
un poquito más allá
y es que
este course
esta desestructuración
que estáis haciendo
también la podéis hacer
aquí dentro
de forma que
en lugar de hacerla aquí
y crear una constante
podríais llevarla aquí
¿vale?
la línea 5
y lo que hacemos aquí
en los parámetros
de la línea 4
es lo mismo
así que podemos eliminar la 5
¿vale?
y todavía como vemos
que como os he comentado antes
rápidamente
pero os había comentado
que si solo estáis devolviendo
lo primero
¿vale?
podríais quitar el scope
pero ahora os lo explico mejor
si no necesitáis
si aquí lo que estáis haciendo
es devolver la misma
primera línea
en la función
lo que podéis hacer es
eliminar el return
y eliminar las flechas
¿vale?
y esto
es lo que se conoce
como one liner
esto lo que significa
es que tienes
una función
que lo que devuelve
es lo primero
que está evaluando
lo primero que evalúa
es esto
y esto funcionaría correctamente
entonces
esto lo voy a dejar así
pero voy a dejarlo
en el comentario
más que nada
por si a alguien
le interesa
la forma
la forma larga
¿vale?
así que ponemos esto aquí
y esto así
o sea
estaría la forma larga
y la forma corta
que tendríamos aquí
pero las dos serían
exactamente iguales
¿vale?
veréis que la
esta se utiliza mucho
sobre todo esto de
de extraer
las propiedades del objeto
de las props
porque al final
en lugar de escribir siempre
props, props, props
directamente extraes
la propiedad del objeto
así que en el reto
os pido
que a ver si os animáis
a hacer esto también
de forma que
una vez que
hagáis el componente
también utilicéis
esta forma de aquí
para extraer las props
que estéis añadiendo
en el componente
¿vale?
para que os animéis
¿vale?
¿vale?
entonces
dicho esto
aquí ya vemos
que esto funciona correctamente
que no ha habido
ningún cambio
ni nada
para terminar
una cosa que os
también os recomiendo
muchísimo
y que os puede ayudar
a entender React
es que os instaléis
la React Developer Tools
la React Developer Tools
es una extensión
de Chrome
creo que también
está en Firefox
que os puede permitir
inspeccionar
los elementos
de React
y ver pues
sus props
puedes ver
sus propiedades
puedes incluso
cambiar
algunas cosas
yo ahora mismo
lo tengo desactivado
lo voy a activar
pero creo que lo desactivé
por también
un tema de rendimiento
porque me petaba
lo voy a añadir
y espero que no
reviente nada
¿vale?
Alphacode
muchas gracias
eso intento
intento que sea balanceado
intento que no sea
súper principiante
pero tampoco quiero
que nadie se me pierda
mucho
no sé
o sea
vamos a intentar
no utilizar las dependencias
vamos a intentar
que sea lo más
soft posible
cuantas más cosas
se añaden
siempre es peor
al final
en el bootcamp
vamos a ver Express
vamos a ver GraphQL
TypeScript
pero vamos a intentar
que no tengamos
muchas dependencias
o sea
enfocarnos más
en las cosas en crudo
¿vale?
para que no nos liemos
vale
ya he instalado
a ver
he instalado la
React Developer Tools
voy a cerrar
Chrome
voy a volver a abrir
y
ahora
deberíamos ver
cuando inspecciono
aquí
¿ves?
tengo estas dos nuevas opciones
podría
por ahora
vamos a enfocarnos
a components
profilers ya lo veremos
más adelante
así que components
y en este caso
bueno
no tiene mucha historia
porque dentro de app
solo tenemos el componente title
pero veremos
más adelante
que esto es súper interesante
cuando nuestra aplicación
vaya creciendo
y puedes ver
que aquí
en la prop course
podríamos cambiarle
ya aquí
el valor
de lo que le estamos pasando
como prop
y poner
el full stack
bootcamp
de
middle def
¿vale?
y ves
lo hemos cambiado
sin necesidad de cambiarlo
¿no?
es una forma de entender
cómo funcionan
nuestros componentes
y tal
y además
os animo
a que jugueteis
con esto
en otras aplicaciones
por ejemplo
si sabéis que hay una página
que utiliza React
como esta
pues podéis
espectacular
abrir los componentes
y ver todos sus componentes
esto lo podéis hacer
en Facebook
lo podéis hacer
en un montón de páginas
que utilizan React
y bueno
hay veces que como se dejan
los nombres
pues puedes entender
ah mira
aquí lo tienen
pues ¿qué pasa?
hay veces que no se pueden cambiar
¿vale?
las props y tal
hay otras veces que sí
pero bueno
es una forma de ver
ah mira que prop ha utilizado
cómo lo está haciendo
esto lo podéis ver
perfectamente en Facebook
y es muy interesante
y uno se lo pasa
se lo pasa a pipar
y se aprende
se aprende
así que bueno
está interesante
así que
ahí os dejo los deberes
¿vale?
tenéis que terminar
los ejercicios
que tenéis aquí
pero id más allá
¿vale?
porque estos ejercicios
al final son muy sencillos
una cosa
no solo son estos ejercicios
de la parte de introducción
de React
porque como hemos visto
nosotros lo hemos hecho
yo creo que en el buen
en el buen orden
¿vale?
lo hemos hecho en el orden correcto
ellos primero presentaban React
y luego presentaban JavaScript
a mí me parece que tenga mucho sentido
entonces
hacer los ejercicios
de la parte de introducción de React
y hacer los ejercicios
de JavaScript
porque
aquí en realidad
los ejercicios
esto es súper raro
los ejercicios
que tiene la parte de JavaScript
veréis
que son de React
también
¿ok?
entonces
es muy extraño
es muy extraño
tenéis que hacer también
los de la parte de JavaScript
¿ok?
de esta forma
hacéis primeros
los de introducción a React
y luego hacéis los de JavaScript
nosotros lo hemos visto al revés
pero así
React
y luego los de JavaScript
que lo sepáis
y nada
yo creo que con estos
ya vais a entender
muchas de las cosas
hay una sección
que habla del
object method
and this
mi recomendación
para el curso
del bootcamp
que vamos a hacer
esto no lo vamos a ver
ni lo vamos a utilizar
y de hecho
a mí cada vez más
me parece incluso
una mala práctica
en el mundo de React
si lo tienes que entender
pero creo que obviamente
es un conocimiento
si ya vas a cosas más avanzadas
que sí que es interesante
¿vale?
así que tenéis la sección
si le queréis echar un vistazo
también explican las clases
pero en este curso
no vamos a ver ni clases
ni vamos a necesitar
utilizar el DIS
si lo queréis utilizar
y queréis aprender
por vuestra parte
ahí lo tenéis
pero os digo
no lo hablaremos aquí
no le echaremos un vistazo
porque no lo vamos a necesitar
en otros live puede ser
pero en el full stop bootcamp
no lo vamos a ver
solo para que lo sepáis
pero que ahí lo tenéis
por si os queréis animar
y al final
que aquí da
algunos materiales
de javascript
os recomiendo
tanto el de
youdonnow.js
como el de javascript info
a mí estos dos
en youdonnow.js
además lo tenéis
en castellano
si os animáis
a ver
estaba la versión 1
aquí vais a la versión 1
y por aquí
estaba en castellano
a ver
ah bueno
lo tenéis que buscar
en github
en github
youdonnow.js
spanish
no
tenía español
bueno
ahora no lo voy a encontrar
ahora no lo voy a encontrar
bueno
pero ese libro
está en castellano
y está gratis
de hecho tengo por ahí
el enlace
y si no
el de javascript info
también
también lo tenéis en español
y también es interesante
para
revisar cositas de javascript
que nos quede claras
no sé
tipos de variables
strings
arrays
los métodos de la arrays
iterables
lo que sea
y está muy bien
me gusta muchísimo
javascript info
creo que está muy bien
y tiene la información
súper bien categorizada
así que os lo recomiendo
un montón
eso yo creo que son
el mejor
para aprender
javascript
voy a hablar con ustedes
si os parece
un momento
a ver que
cómo estáis
todo bien
hasta aquí
lo habéis entendido bien
os ha gustado
la clase de hoy
habéis aprendido algo
os lo habéis pasado bien
yo me lo he pasado pipa
yo estaba aquí hablando
y venga
nos hemos quedado
467
hemos sido en algún momento
600
me imagino que la gente
llega un momento
y dice
bueno esto ya
ah mira
gracias
mira yo
ahí está
este es
lo he puesto ahí
Jobadíaz
Dev
vale esta es la traducción
vale
que os dejo otra vez
os dejo otra vez
él lo ha puesto
pero lo dejo otra vez
pues nada
pediros que lo recomendéis
un montón
que si tenéis Prime
pues nada
suscribíos
que a mí me ayuda un montón
que suscribáis
que cuanto más seamos
pues
más contenido
podré ir creando
y más clases
y más de tal
a ver
aunque tengo que repasar mucho
si hay que repasar
todo bien bro
lo único es lo de geek
que se complica
si uno no sabe mucho
de terminales y eso
os recomiendo eso
aplicaciones
la parte 1
que llegó a la clase atrasada
que la tiene que revisar
raro que esté primero
React que JavaScript
eso es muy raro
y yo no lo comparto
gran explicación
gracias
déjame hablar por el Discord
bueno pues habla por el Discord
déjanos hablar por el Discord
pues si solo tenéis que poner
exclamación Discord
y ya podéis
¿qué más?
el M1
no sirve para Docker
está en pruebas
ahora mismo
impresionante la forma
de presentar el curso
muchas gracias
te lo agradezco
muy buena clase
dice Nacho
gracias
gracias Félix
¿cómo será el tema
del certificado?
Abraham
en mi curso
no hay certificado
eso
en el full stack
este
en esta página
que estamos siguiendo
de vez en cuando
se puede
se puede abrir
el certificado
pero eso lo tenéis que mirar
por ahí
yo no
no hacemos
claro no podemos
o sea no se puede hacer
nada
respeto
¿qué opinó del estado
de Redux?
pues está
a la baja
pero bueno
sigue estando interesante
en algunos proyectos
explica el detalle
muchas cosas que en otras partes
no explican bien
gracias hombre
llevo dos años con Fronten
y hoy he aprendido
cosas nuevas
que grande
si me gustó bastante
ahora sé que me tengo
que poner a practicar
en Git
ya
ya has visto que yo también
que hay cosas que a lo mejor
no funcionan del todo
gracias Crack
¿qué recomiendas
por aprender Git
desde la terminal?
Git
había un curso
me lo buscaré
porque había un curso
que me gustó muchísimo
Liascat
no Liascat no
perdona
último en llegar
último en llegar
qué grande
te lo buscaré
y os lo compartiré
¿vale?
estuve viendo un poco
de Riga que hace unas semanas
pero este está mucho mejor explicado
muchas gracias Alfa Code
de verdad
de verdad
no puedo
recomendaros más
que
ponéis
mira ponéis
midu.tuve
¿vale?
que es un dominio especial
vais a mi YouTube
os suscribí
le dais a la campanita
¿eh?
suscribidme
os suscribí
le dais a la campanita
le dais like a todo
pero además
vais bajando aquí en el canal
y tenéis aquí el curso de Rial desde cero
curso de Rial desde cero
aquí hay como
10 o 15 horas
de curso de Rial
10 o 15 horas
mira
el primero una hora y media
una hora y media
si os gusta como explico
ahí tenéis
vamos
mira 40.000 visualizaciones
o sea que a la gente le ha gustado
y además creo que es muy completo
y es que se ve de todo
se ve de todo
sé que
o sea y es gratis
o sea os lo recomiendo un montón
un montón
y ahí vais a aprender de Rial
lo que no está escrito
estupenda la clase de hoy
gracias por eso
gracias a ti hombre
¿cómo va lo de
do you know
do you know
you don't know
JavaScript
es un libro de JavaScript
es totalmente gratis
y por ahí han dejado el enlace
¿vale?
¿qué contiene la botella?
contiene agua
agüita para refrescarme
gracias por la clase de hoy
gracias a vosotros
¿cuántos años llevas programando?
más de 10
explica de lujo
muchísimas gracias
no nos dejen nunca
dice Dana Bayardi
pues
solo os diré
que me apoyéis
hombre
que yo que sé
que compartáis
a mí lo que más me ayuda
es que me sigáis
que compartáis mi contenido
que le deis like
que lo recomendéis
que eso
vamos
eso me
me ayuda un montón
si luego ya queréis
subir de nivel
pues el Patreon
eso también
suscribiros a Twitch
y jamás os dejaré
de hecho
cada vez quiero hacer más
entonces por eso
os animo a que
a que me apoyéis
mejor es lo que aprendemos
en proyectos propios
la gente que aprende a programar
tiene un curso de terminal
y de git
si te interesa
cobol tiene mucho trabajo
sí
pero aquí no vamos a ver
nada de cobol
la guía del book
ha estado completa
estoy migrando
mira
por aquí está dejando gente
libros de git
súper genial
yo aprendí con clases
de midudev
¿cuáles son tus referentes
españoles extranjeros
de javascript?
la verdad
es que
de referentes
de javascript
no tengo ningún referente
de javascript
a nivel extranjero
sí
tengo por ejemplo
Kyle Simpson
que es el creador
del libro
de you don't know jes
me gusta muchísimo
he aprendido un montón
de Jason Miller
Jason Miller me parece un crack
el creador de Priak
súper bueno
o sea es muy crack
eso diría que son
mis dos grandes referentes
sin ningún tipo de duda
es que
como que los dos reflejan
en lo que yo me gustaría
convertirme
o donde yo
me gustaría ir
Jason Miller
y Kyle Simpson
esos son los dos
que tengo ahí
son para mí
los pedazos de cracks
sobre los que me pedís
recomendación de
Frontend Masters
Platts y tal
pensad que yo
no lo he utilizado
mucho
entonces cualquier cosa
que os diga
es engañaros
¿sabes?
os engañaría
decir
este me gusta
este
es que no lo sé
no he utilizado
Frontend Masters
he utilizado un poco
Egghead
que me pareció
que estaba bien
Jan Start
dice
tengo un error
de iniciar el proyecto
con Jan Start
me dice que el Slim
no es el correcto
¿sabes que puede ser?
hostia
pues ni idea
no sé que puede ser
si entras en Discord
deja por ahí el error
intentaremos ayudarte
¿tienes problemas
sin decir
cuánto es el salario
promedio
de un Defend React?
no tengo ningún problema
lo que pasa
es que el salario
promedio
es un poco difícil
lo que te puedo decir
es que
en España al menos
puedes empezar
a partir de los 18
hasta el infinito
o sea
puedes llegar
hasta los 100.000 euros
fácil
digo yo
fácil no
o sea
fácil no
puedes llegar
digo que conozco casos
pero no
no es lo normal
o sea
desde 18 a 100.000
pero 100.000 serían
ya Debs
muy
no es lo normal
promedio
seguramente
estamos hablando
más de 25
a 35
así
diciéndote una cifra
¿vale?
¿qué más?
¿qué más?
me estáis comentando
ahí
me estáis bombardeando
a cosas
¿veremos higher
de components?
creo que no
pero lo intentaré
llevo 10 años
y la barba
y no está calvo
algo no cuadra
bueno
porque me he afeitado hoy
y porque tengo pelazo
pues nada
ya aquí
hemos
yo creo que ya
podemos irnos todos
muchísimas gracias
a todos los que habéis quedado
hasta el final
a los 400 espectadores
creo que haremos
una ronda de preguntas
y respuestas
solo para suscriptores
así que si te quieres
suscribir a Twitch
que sepas que
tendremos ese live
para la gente
que es anime
que quiere hacer preguntas
¿vale?
que bueno
ya que aportan
pues que
que vengan
que vengan
y que pregunten
muchísimas gracias
por vuestro apoyo
nos vemos en la semana que viene
domingo 8 de la tarde
para seguir con RIAG
vamos a ver el estado
vamos a ver cosas súper interesantes
así que no te lo pierdas
no te lo pierdas
domingo 8 de la tarde
hora peninsular española
¿ok?
te veo aquí ¿eh?
que te veo
que voy a pasar lista
que no te lo pierdas
que como no estés aquí
madre mía
como no estés aquí
yo no