Te doy la bienvenida a la primera clase del curso de React.
En esta clase empezamos explicando qué es React, por qué es importante que lo aprendas,
la razón de su creación, qué es JSX,
y creamos nuestro primer componente de React para replicar una parte de la UI de Twitter.
Te he dejado unas marcas en el vídeo para que saltes a los temas que más te interesan.
Y te dejo en la descripción del vídeo un repositorio de Gijack con todo el código de todas las clases.
Y si tienes cualquier duda, pásate por el Discord que también te dejo el enlace en la descripción
y espero que disfrutes del curso.
Aprender mucho React.
Esta frase que te define qué es React.
Y te dice, es una biblioteca de JavaScript para construir interfaces de usuario.
Fíjate que en esta frase no nos está diciendo que React sea para desarrollar aplicaciones web.
No nos está diciendo que es para hacer páginas web, aplicaciones web, SPAs, nada de eso.
Tienes que tener una cosa súper, súper, súper, súper en cuenta.
React está pensada para hacer interfaces de usuario independientemente de dónde sea.
Esto quiere decir que lo que vas a aprender en este curso lo vas a poder utilizar para crear páginas web,
pero también lo vas a poder utilizar para crear aplicaciones móviles o incluso aplicaciones de terminal.
React se utiliza en un montón de sitios porque es agnóstico de la plataforma.
Lo vas a entender más adelante en el curso porque vas a ver que está dividido en diferentes paquetes.
Uno que sería React y otro que sería React DOM, que es lo que es específico del navegador.
Pero lo más importante que tienes que tener en cuenta es que React es una biblioteca de JavaScript construida para construir interfaces de usuario.
Para construir interfaces de usuario y eso puede ser en cualquier sitio.
Puede ser una página web, dispositivo móvil, una aplicación de terminal, un montón de cosas.
Dos cositas muy importantes que nos explica aquí, que luego comentaremos con más detalle,
es que React es declarativo, que nos permite crear estas interfaces de una forma mucho más sencilla.
Y lo segundo es que está basado en componentes.
Ahora bien, claro, ¿qué pasa con esto?
Que hoy en día todos los frameworks o todas las bibliotecas, por ejemplo, Vue, Angular y todo,
se hace con componentes, todo se basa en componentes.
Pero antiguamente esto no era tanto así, no era tan fácil reutilizar el código.
Hoy, cuando entras a una página web, por ejemplo, si vamos a Twitter,
es muy fácil que encontremos componentes de React.
Como, por ejemplo, si vas aquí a este, ¿qué está pasando?
Ya puedes ver que esta lista se está reutilizando el mismo elemento.
Aquí lo tendríamos una vez, aquí otra, aquí otra, aquí otra.
Lo único que está cambiando sería el contenido que está mostrando.
Esto lo puedes ver incluso en un hilo de Twitter.
Aquí si tenemos Twitter, todo lo que estamos haciendo es conformar la interfaz
con partes más pequeñitas que no dejan de repetirse continuamente.
Así lo que estás haciendo es poder conformar tu UI con unas piezas de Lego
que una vez que tú las vas reutilizando, puedes construir la interfaz tantas veces como quieras.
Y esto lo que hace es que si tú cambias esta pieza de Lego, ese cambio se va a replicar en toda tu aplicación.
Y esto te va a ayudar un montón.
Para entender este concepto, no te preocupes porque lo que vamos a hacer después es un ejemplo
que te va a hacer que hagas clic.
Otra cosa muy importante de React es que es una biblioteca que es universal.
De esto se habla poco, pero lo que quiere decir que React sea universal no es que sale al universo y todo esto.
Lo que quiere decir es que React se puede ejecutar tanto en el cliente como en el servidor.
Y esto es una cosa que ahora a lo mejor también nos parece normal, pero cuando salió era bastante innovador.
Esto lo que hace es que nuestra aplicación, en lugar de tener código en el servidor y en el cliente,
podemos reutilizar el mismo código y de esta forma escribimos nuestra aplicación una sola vez.
Antiguamente a lo mejor hacías tu aplicación en el backend con .NET, con Java, con PHP
y eso se renderizaba en el servidor y una vez que estaba en el cliente tenías una biblioteca
como podría ser jQuery o alguna cosa alternativa que lo que hacía era parchear el HTML.
Esto con React es totalmente diferente.
Lo que puedes hacer es tener la misma aplicación, servidor y cliente.
Y por lo tanto, esto nos permite poder reutilizar un montón de código.
Ahora escribimos una vez la aplicación.
Muy bien, ahora que ya sabemos esto, te quiero explicar un poquito de historia.
Esta es la página oficial de React.
Si la ves, le puedes echar un vistazo, está en español.
Pero seguramente cuando veas este vídeo más adelante en el futuro,
te darás cuenta que ya no existe esta página.
Y es porque están trabajando en una nueva versión de la documentación.
La nueva versión de la documentación es muy superior, muy superior,
pero todavía le faltan muchas cosas por ser traducidas y todavía le falta contenido.
Lo que te recomiendo, olvídate de esta documentación.
Uno, porque está utilizando código muy antiguo.
Vas a ver aquí código que nosotros ni siquiera vamos a ver en el curso
porque esto es código muy antiguo que a día de hoy ya no tiene tanto sentido de utilizar.
Son ejemplos que ya habla de cosas que no se utilizan mucho.
Así que te recomiendo que directamente vayas a por la beta si tienes que consultar algo,
si tienes que buscar cualquier cosa, ¿vale?
Así que si quieres buscar, oye, este concepto o lo que sea, aquí lo tienes.
Si tienes alguna duda específica de React, hay otra cosa que te recomiendo.
Tenemos una página, que esto es de la comunidad, que lo hemos hecho aquí,
que se llama react.js.wiki.
Imagínate que tienes una duda de todo lo que estamos comentando en el curso y tal,
y dices, ostras, hay un concepto que ha comentado que ahora no me acuerdo y lo que sea.
Bueno, pues mira, puedes buscar aquí props.
¿Qué son las props en React?
Le das click y aquí tienes ya como un Frequented Asked Questions, ¿vale?
en el que tienes incluso ejemplos de código, está totalmente explicado en español
y todo esto es de código abierto.
O sea, podrías ir aquí a GitHub, puedes dejarle una cedita si quieres
y puedes añadir si ves alguna pregunta que falta, si ves algún error de ortografía o lo que sea.
Pero bueno, aquí además también tienes todas las preguntas y las tienes listadas.
Aquí hay preguntas típicas de principiante a intermedio hasta avanzado.
Hay más de 100 preguntas contestadas.
Así que si por lo que sea tienes alguna duda y no sabes dónde encontrarlo,
la documentación está un poquito más desordenada, te recomiendo mucho este repositorio
que ya te digo que lo hemos hecho en directo con toda la comunidad que hemos estado colaborando
y al final hemos hecho más de 100 preguntas y aquí tienes la página web también que la puedes utilizar, ¿vale?
La página web es riadgs.wiki y es totalmente gratis, o sea, es totalmente gratuito.
Si queréis, por lo que sea, si queréis conseguir el libro, aquí tenéis, veis que pone aquí compra el libro.
Tenéis un libro de pago pero es totalmente opcional, no estáis obligados a comprar el libro ni nada.
La página es totalmente gratuita, la podéis utilizar cuando queréis.
¿Qué queréis el libro? ¿Por qué lo queréis poner el king de lo que sea?
Pues podéis comprar el libro que no cuesta, creo que no llega a 10 dólares.
O sea, que ahí lo tenéis, pero no es obligatorio, es totalmente gratis todo, lo aseguro, ¿eh?
Ahora, ya sabéis, documentación.
Si tenéis preguntas frecuentes, ya tenemos eso.
Vamos ya a hablar un poco de React.
¿Qué pasa con React? ¿Por qué es tan importante React?
¿De dónde sale React? React es de meta.
React es de código abierto, es una biblioteca que es de código abierto,
como hemos visto era de construir interfaces de usuario, pero es de meta.
¿Quién es meta? Meta es Facebook, Instagram, WhatsApp, tiene diferentes productos
y en todos y cada uno de sus productos utiliza React.
React nació en el 2011 como una forma de intentar simplificar las interfaces de usuario.
Lo creó Jordan Walkie, no sé cómo se pronuncia su apellido.
Y lo hizo porque era muy difícil trabajar con formularios.
Él venía del backend y de sistemas distribuidos y cuando se puso a intentar trabajar en la interfaz de Facebook,
venía de Amazon y cuando se puso a trabajar en la interfaz de Facebook, le costaba muchísimo.
Como tenía que hacer el formulario, y ya sabéis que los formularios son un rollo,
pues dijo, oye, necesito algo para mejorar esto.
Así que en 2011 creó el, digamos, el embrión de React.
Además, era súper importante, y en el curso lo vais a ver, evitar ataques por XSS.
O sea, cross-site scripting.
Básicamente esto es que te intenten inyectar código cuando estás ejecutando código del usuario
que te intenta inyectar y eso es un vector de ataque muy importante.
Y vamos a ver esto, React te lo soluciona y vamos a ver cómo lo hace.
2011 nace, en 2011 empieza a ser utilizado en Facebook, 2012 empieza a ser utilizado en Instagram
y en 2013 empieza a ser de código abierto.
De hecho, a día de hoy podéis utilizar y podéis ver el repositorio de React.
Es totalmente abierto.
Si alguien nos puede pasar, porque siempre que lo busco, no sé por qué la lío,
pero no encuentro el repositorio.
A ver.
Ah, mira, ya lo he encontrado.
Bueno, es totalmente de código abierto, le podéis echar un vistazo.
Pero os voy a contar una cosa para que entendáis un poquito esto.
Aunque es de código abierto, no es de código abierto desde el primer día
y desde el primer día tampoco su licencia te permitía fácilmente utilizar React.
Fue más adelante, en 2013, que se hizo de código abierto,
dos años después de que naciese, digamos, el proyecto,
y más adelante fue que se cambió la licencia para que fuese más permisiva.
Aunque era de código abierto, React no la podía utilizar, por ejemplo,
empresas que eran competidoras de React.
Había ahí un tema legal que Facebook o Meta, en este caso, pues no le gustaba mucho
y, bueno, pues le decía, ostras, pues no lo puedo utilizar cualquiera.
Ahora bien, la pregunta de millón.
¿Por qué deberías aprender React?
¿Por qué deberías estar aprendiendo React?
¿Por qué haces bien estando en este curso?
Mira, lo primero y lo más importante, yo creo que...
Te voy a dar siete razones para que esté convencido durante todo el curso
de por qué debes aprender React.
Lo primero, es el framework más demandado en el mundo occidental seguro.
En el mundo occidental seguro.
Ya podéis ver el número de trabajo, de empleos que tenéis disponibles de React
están muy por encima, muy por encima de cualquiera de las otras alternativas.
Estando Angular en la segunda posición y Vivo en la tercera.
Seguramente puede ser que los números cambien dependiendo de qué país,
dependiendo de un montón de cosas, ¿no?
A lo mejor, si hablamos de Colombia, puede ser que cambie un poco, si hablamos...
Pero en general, hablando en general, tenemos que hay más ofertas de React
que de otras opciones.
Aquí podéis ver, en Estados Unidos el 60% son de React.
La India, 60%.
Francia, tenemos un empate con Angular.
Alemania, está un poquito por encima.
El Reino Unido, muy por encima.
Italia, no sé.
Teníamos España por aquí y en España también tenemos un poquito por encima de Angular.
O sea que ya veis que como mínimo, como mínimo, está más o menos equilibrado con Angular.
Ahora bien, alguien me dirá, no, porque en mi caso Angular, Vivo, Svelte,
son alternativas buenísimas.
Esto es un curso de React, pero eso no significa que vayamos en contra de nada.
Yo creo que al final, React, una de las cosas buenas que tiene es que es una biblioteca
una de las más demandadas del mundo.
Podemos entrar en datos, si es un poquito más, un poquito menos,
pero lo que es cierto es que React tiene actualmente muchísima, muchísima salida laboral.
Muchas empresas están utilizando React y si no están utilizando React,
están utilizando algún framework que utiliza React, como puede ser NextGS,
como ha podido ser durante mucho tiempo Gatsby.
Al final, React está cada vez en más sitios.
Vas entrando en cualquier página y cualquier página está utilizando React,
aunque sea en un trocito.
Antes hablábamos de Twitter, Twitter está utilizando React,
Facebook, por supuesto, está utilizando React.
O sea, tienes React en un montón de sitios.
Muchas startups empiezan un proyecto y ¿cómo lo hacen?
Lo hacen con React.
Así que React es una muy buena opción y para mí una de las mejores opciones
si quieres empezar con algo, con React.
Segunda razón, muy interesante.
La segunda razón que te daría en mi caso es que lo que vas a aprender hoy
lo vas a poder utilizar para también desarrollar aplicaciones móviles.
Con React Native, lo que aprendéis hoy, todo lo que vamos a estar aprendiendo,
vais a tener React Native, que con esto vais a poder hacer aplicaciones móviles.
¿Son aplicaciones móviles que son igual de buenas que si las haces con Swift?
Pues no, todo tiene un coste de oportunidad.
Pero en este caso, vale la pena.
Para que te hagas una idea de la importancia de React Native,
Microsoft, que no tiene nada que ver con React,
generó React Native para Windows y Mac.
Microsoft, todas sus aplicaciones de móvil,
todas las aplicaciones de móvil que tiene,
todas están hechas con React Native.
Mira, aquí tenéis Meta, tiene Facebook, Facebook Ads Manager, Oculus.
Microsoft tiene el Office, Outlook, Teams, Xbox, Game Pass, Skype, Shopify.
O sea, ya podéis ver que hay un montón de empresas que están utilizando todavía.
Están utilizando React Native y funciona perfectamente.
Y además, Microsoft también ha desarrollado React Native for Windows y MacOS,
que te permite utilizar React para desarrollar aplicaciones de escritorio.
Y de hecho, Windows, o sea, Microsoft, está utilizando bastante en Windows.
Y podéis encontrar que muchas de las cosas que tenéis en Windows 11, a día de hoy,
muchas ventanas, muchos settings y muchas cosas,
están en realidad utilizando React Native para Microsoft.
Así que ahí tenéis otra cosita más bastante interesante.
Todos los conceptos que vais a aprender en este curso,
lo vais a poder utilizar para eso.
El tercer caso, ¿por qué deberías aprender React?
Es porque tiene el mantenimiento asegurado.
Mira, Facebook ya en 2018 tenía más de 50.000 componentes escritos con React.
Seguramente a día de hoy serán el doble.
¿Eso qué quiere decir?
Eso quiere decir que Facebook está utilizando React en producción,
en productos muy importantes que mueven muchísimo dinero.
Lo tenemos también en WhatsApp web, lo tenemos también en Instagram.
Y por lo tanto, no va a cambiar, no va a desaparecer desde el día a la mañana.
Pero si no fuese suficiente, que tiene una gran empresa detrás, como es Facebook,
otra cosa que tiene súper importante y súper importante, súper importante,
es la comunidad.
Y es que la comunidad que tienes detrás es impresionante.
El ecosistema, contribuidores.
Así que, aunque desapareciese meta, que no lo creo,
vas a tener todavía un montón de soporte de la comunidad durante muchísimos años.
La cuarta razón, aprender React te va a ayudar con el resto de frameworks.
Esto también pasaría si aprendes Angular, te ayudaría a aprender React.
Pero si aprendes React, muchos de los conceptos que vamos a ver,
como componentes, estado, props y reactividad, handle clicks y todo esto,
eso también te lo vas a poder llevar a Angular, a Vue, a Svelte,
y te va a costar mucho menos aprenderlo.
Así que lo bueno es que no vas a tener ningún problema pasar de un framework a otro,
todo lo contrario.
El cinco, futuro prometedor.
A ver, una de las cosas más impresionantes que tiene React es que ha sido algo que ha ido hacia arriba
y no para, no para de subir.
Y lo podemos ver en las tendencias de NPM.
Vamos a ver las tendencias de NPM.
Hay veces que no son del todo fiables.
Esto lo vamos a ver un poco para encima, para que os hagáis un poco la idea.
Pero si miramos el último año, aquí podemos ver la rayita verde sería React.
Luego tendríamos la rayita azul, que es Angular, la roja, que es Vue.
Aquí hubo como un salto de Vue que seguramente alguien se le olvidó
e hizo NPM installs por encima de sus posibilidades.
Pero si vais a ver un poquito lo que es la evolución de React a lo largo del tiempo,
vais a poder ver durante cinco años cómo React se ha ido desenganchando del resto de frameworks.
Y como podéis ver, no es que de repente ahora va de capa caída.
De hecho, lo que pasa aquí, porque alguien dirá, oye, pero aquí ha pegado un bajón.
¿Qué ha pasado aquí?
Esto se le llama navidades.
Esto se le llama navidades.
De hecho, podéis ver que aquí también pasa.
Y normalmente tarda en enero todavía volver a recuperar lo que sería el nivel de instalaciones del resto del año.
Pero si vamos a ver un poquito la foto y cómo sería el histórico, ya veis que desde 2019-2020 no ha parado de crecer.
No ha parado de crecer.
Si alguien se pregunta qué pasó con Vue, es que dicen que ha podido pasar dos cosas.
Una, que alguien ha dejado un NPM install ahí en repeat sin querer.
O segunda, que alguien lo ha hecho aposta para hackear las estadísticas.
Pero bueno, ya tenéis ahí otra razón.
Ahora, razón 6.
Una de las mejores cosas que tiene React es su API estable.
¿Qué quiere decir esto?
React, a diferencia de lo que ha pasado con Angular y lo que ha pasado incluso con Vue,
ha sido una biblioteca que ha sido muy estable durante el tiempo.
O sea, tú ves un componente, tú ves mi curso de hace dos o tres años de React,
y mucha de la sintaxis, por no decir casi toda, es igual.
No ha cambiado casi.
Y al final, cuando hacen cambios, los cambios o son muy fáciles de poder tomarlos de forma incremental,
o el cambio puedes ejecutar un comando que te los cambie y tal.
Ahora bien, no significa esto que sea malo Vue o Angular.
Angular le pasó con el paso de AngularJS a Angular, porque al final es un framework totalmente distinto.
Y a Vue, en la comunidad de Vue, no le gustó mucho el cambio de Vue 2 a Vue 3.
En el caso de React, la verdad es que los cambios han sido bastante incrementales,
muy fáciles de migrar tu aplicación.
Y eso es una de las cosas, yo creo, de las mejores.
El hecho de que, de alguna forma, la estabilidad que tiene React en su API hace que sea muy fiable,
porque si ahora escribes una aplicación y vuelves dentro de un año,
vas a ver que no vas a tener que tocar casi ninguna cosa.
O sea, que no está nada mal.
Y el 7, y el último, la comunidad.
Una comunidad gigante.
Bueno, ya veis, somos 3.085 personitas.
Estáis aquí un montón.
En Discord, no para la gente de hablar.
En el canal de React está la gente on fire.
Todos los días se generan nuevas oportunidades.
Hay gente que hace un montón de hackatones.
Un montón de gente...
O sea, React mueve una comunidad gigante.
Cualquier duda, cualquier pregunta, cualquier cosa,
la vas a poder encontrar siempre en algún sitio,
porque siempre hay soporte de React.
Allá donde vayas.
Es impresionante la comunidad súper chula que hay,
que te va a ayudar un montón.
Y que...
Que no te la acas.
No te la acas.
¿Vale?
Así que...
Vale.
Pues aquí tendríamos...
Aquí tendríamos ya todo esto.
Una de las cosas más importantes para mí,
para aprender React,
y te voy a explicar por qué,
es que entiendas por qué React.
Así que vamos a ver un pequeño ejemplo
con vanilla JavaScript,
que te voy a explicar paso a paso.
Y ahora lo vamos a migrar a React.
O sea, no vamos a empezar, pum,
con React directamente.
Vamos a hacer una parte de una UI
con vanilla JavaScript,
y de ahí lo vamos a migrar poco a poco a React.
Y vamos a ver cómo hacerlo
y por qué nos interesa hacerlo.
¿Vale?
Así que vamos a darle.
A ver, os leo por ahora bien.
Sí, a mí también se me entrecorta ratos.
Ya, es que es lo de los fotogramas lentos
que me tiene frito.
¿Cuánto va a durar cada clase?
Esta seguramente tres horas.
¿En este curso volverás a explicar cosas
que ya explicaste en otro curso?
Sí, lo vamos a explicar todo.
Vamos a explicar todo.
No hay drama, ¿todo bien?
Sí, todo bien.
A mí me va genial, todo bien.
Entonces, os explico un poco
qué es vanilla JavaScript y todo.
Imaginad que queremos crear un botón,
como el botón de me gusta de Facebook, ¿no?
El botón me gusta.
Esto es HTML, ¿no?
Estoy utilizando Codilink,
que es una cosa que desarrollamos
en vivo y en directo aquí en Twitch.
Tenemos un botón.
Le podemos añadir unos estilos.
Vamos a añadir unos estilos,
y vamos a decir que el botón,
pues tiene un background,
que tiene este color,
que tiene, vamos a quitarle el borde,
y vamos a poner un padding así.
Vamos a ponerlo un poco más grande
para que lo veáis bien,
y ya está.
Bueno, este es nuestro botón.
Perfecto.
Cuando, bueno,
voy a quitarle el bol.
Como no quiero que lo paséis mal
con los colores y con el blanco,
vamos a ponerlo así.
Ya tenemos aquí el botón me gusta.
Normalmente, si utilizásemos JavaScript
sin ningún framework,
sin ninguna biblioteca,
para poder, imagínate que yo quiero
que cuando le haga clic,
pues poder hacer algo, ¿no?
Quiero que cuando haga clic,
pues pueda pasar de me gusta
a no me gusta.
Eso sería darle interactividad
a nuestra página web,
y esto sería el caso más típico,
por ejemplo,
como lo hemos hecho en Facebook.
Vamos a escribir JavaScript.
Normalmente,
cuando no utilizas ningún tipo
de biblioteca ni dependencia
para crear algo con JavaScript,
a esto se le denomina
vanilla JavaScript.
Así que vamos a hacer
vanilla JavaScript.
Vamos a escribir,
vamos a poner aquí la vanilla, ¿vale?
Esto sería vanilla JavaScript.
No hace falta que sepas vanilla JavaScript
porque te lo voy a explicar paso a paso,
no te preocupes.
¿Qué es lo primero que deberíamos hacer
si quiero que al hacer clic
pueda pasar de una cosa a otra?
¿Vale?
Pues recuperamos el botón.
Vamos a tener una constante botón
del documento.
Le decimos,
voy a seleccionar el botón
y ya tenemos en esta constante
nuestro botón, ¿vale?
Y ahora tenemos que,
al hacer clic en el botón,
tenemos que ejecutar
una función.
Ejecutar una función.
¿Vale?
Vamos a ejecutar una función
y al ejecutar la función
queremos que haga algo.
¿Qué es lo que queremos hacer?
Bueno, pues cuando el evento,
vamos a escuchar el evento de clic.
Al hacer el evento de clic,
vamos a tener una función aquí
que la vamos a ejecutar.
Ahora vamos a,
podríamos poner un alert
y decimos hola.
Esto es súper típico,
esto funciona bien,
no hay problema.
Ahora,
lo que queremos en realidad
no es hacer un alert
y ya está,
que esto no es algo real.
Lo que queremos normalmente,
cuando tenemos aquí un botón me gusta,
tenemos que,
uno,
recuperar la información
de qué es lo que te gusta.
¿Realmente qué es lo que te gusta aquí?
¿Será un artículo?
¿Será algo?
Normalmente tenemos una ID,
¿no?
O sea que vamos a recuperar,
tenemos un data ID,
le pongo un 2, 3
y ya tenemos una forma
de tener esa información ahí
en el elemento.
Lo malo es que lo ponemos en HTML,
pero bueno,
ya veremos cómo lo podemos arreglar.
Así que lo primero que tenemos que hacer
es recuperar la ID
del atributo del HTML.
¿Cómo hacemos esto?
Bueno,
creamos otra vez una constante
y lo que tenemos que hacer,
aquí tenemos el dis
que nos estamos refiriendo
al mismo elemento,
si no podríamos poner button,
el que tú quieras.
De este button,
hacemos un get attribute
y recuperamos el atributo data ID.
Vale,
ya tenemos la ID.
Buenísimo.
Con esto,
aquí podríamos llamar
a un servicio
para actualizar
si me gusta.
Entonces,
podríamos poner
call service
o toggle like,
toggle like,
por ejemplo,
¿no?
Y le pasaríamos la ID.
Lo voy a comentar
porque no vamos a crear esta función.
Una vez que esto funciona,
podríamos hacer
dos cosas diferentes,
¿no?
Podríamos empezar a trabajar
con,
o sea,
tenemos que cambiar también
la UI.
Como hemos visto,
React nos funciona
para trabajar
y construir interfaces de usuario
y justamente
las interfaces de usuario
normalmente son interactivas,
tienen que responder
a lo que hace el usuario.
En este caso,
¿qué podemos hacer?
Bueno,
podríamos decirle,
¿vale?
Si el botón
en la lista de clases
contiene una que sea
liked,
o sea,
que le ha gustado,
pues lo que vamos a hacer
es quitar
del class list,
le quitamos
el liked,
la clase liked
y el,
bueno,
en lugar del list
vamos a utilizar el button
y en el button
vamos a cambiarle el texto.
En lugar de poner me gusta,
pues vamos a cambiarlo,
¿no?
Porque deberíamos decirle,
bueno,
en este caso sería me gusta
y en el else sería al revés,
¿no?
En el else
tendríamos que poner esto
y aquí podríamos ponerle
que añadimos el like
y el inner text aquí
le pondríamos quitar me gusta,
quitar me gusta,
¿vale?
Vamos a ver si funciona nuestro botón,
si no lo he liado,
¿vale?
Ya funciona nuestro botón,
pero fíjate
que todo lo que hemos hecho
hasta aquí
es imperativo
y por qué he hecho este ejemplo
y por qué es súper importante
hacer esto,
¿no?
Obviamente aquí hay muchas cosas
que podríamos mejorar,
hay cosas que no son buenas prácticas
y tal,
pero al final lo importante
que quiero que veas
es cómo construíamos
o cómo podríamos construir
una interfaz de usuario
que sea interactiva
sin utilizar React,
¿no?
Lo estamos utilizando
de forma sin bibliotecas ni nada.
¿Qué pasa con lo que estamos haciendo?
Lo que estamos haciendo
es que estamos haciendo
código imperativo.
¿Qué significa imperativo?
Significa que le estamos diciendo
el cómo lo tiene que hacer.
Fíjate que le he dicho
oye,
recupera este botón.
Luego le he dicho
oye,
cuando a este botón
escucha el evento
que cuando haga clic,
entonces quiero que recuperes
la idea del atributo,
luego llamas al servicio
para actualizar si me gusta
y quiero que veas
si contiene esta información,
entonces borra esto.
Eso se le llama
código imperativo.
Le estamos describiendo
cómo tiene que hacer las cosas.
Le estamos dando
como una serie
de instrucciones
para ver cómo tiene que hacerlo.
Vamos a ver con React
que no es imperativo,
sino que nos va a ayudar
a hacer nuestro código
declarativo,
que vamos a describir
lo que queremos que haga.
Pero hay otro problema más.
Imagínate,
claro,
aquí tengo el botón
de me gusta.
Bastante fácil.
Claro,
tengo un botón
aquí en medio,
bueno,
pero ¿qué pasa
si quiero empezar
a reutilizar esto?
Vale,
pues podría aquí.
Tengo tres botones,
pero resulta que
cuando le doy
ahora solo me funciona
el primero.
Bueno,
esto empieza ya
a complicarse.
O sea,
ya esto,
¿por qué no me funcionan
los otros dos?
Bueno,
obviamente el JavaScript
lo tendríamos que ajustar.
En lugar de recuperar
un botón,
tenemos que recuperar
todos los botones.
Y al recuperar
todos los botones,
ponemos el buttons aquí,
le decimos que seleccione
todos los botones
y aquí tendríamos
que empezar a hacer
pues ya un for each.
For each.
Para cada botón
entonces vamos a tener
esto de aquí,
¿vale?
Y ahora sí,
lo que podríamos tener aquí
es que tenemos,
sí,
separado cada uno de ellos.
Pero ya empezamos
a ver dos problemas.
El primer problema
es que para ser capaces
de compartir esta lógica
la hemos tenido que poner
en el mismo sitio.
Cuando imagínate
que a lo mejor
la UI,
la UI de este botón
puede estar en otra parte
de nuestra aplicación
muy separada,
muy separada.
Y esto nos complicaría
porque ya tendríamos
esta parte de aquí,
la podríamos intentar
separar un método,
podríamos intentar
hacer un montón de cosas,
pero no va a ser sencillo.
Y el segundo problema
que tenemos aquí
es que obviamente
no es escalable.
Estamos empezando
a poner botones,
tenemos que empezar
a hacer un for each.
Si luego quiero quitar
estos eventos
que hemos puesto aquí
vamos a tener que hacer
a mano en otro sitio,
se nos complica.
El código imperativo,
el problema que tiene
es que no escala bien.
El código imperativo,
cuanto más necesitas
decir cómo lo haces,
cuando tengas que hacer
un cambio,
te vas a dar cuenta
que no escala bien
y que tienes que hacer
cada vez más y más cambios.
Ahora bien,
¿cómo utilizaríamos React
para intentar hacer
lo mismo que hemos hecho
en este caso?
Vamos a utilizar React
y lo vamos a hacer
desde cero.
Vamos a hacer desde cero
el ejemplo
y vamos a ver
cómo nos podría
un poco ayudar.
Lo primero que tenemos
que hacer para utilizar React
es importar
la dependencia
de React.
Un tema interesante aquí
que a lo mejor
hay gente que me lo dice,
una cosa que se podría hacer
para arreglar esto
es utilizar
Custom Elements.
Podríamos utilizar
Custom Elements
para solucionar esto,
para arreglarlo.
La verdad es que se podría hacer
Custom Elements
que es parte de la plataforma,
pero bueno,
es un poco para que nos demos cuenta
también con Custom Elements
también habría bastante código,
pero bueno,
poder se podría hacer.
Ahora bien,
ya tenemos aquí
la versión de React.
Para utilizar React,
en realidad,
hay mucha gente
que se cree
que necesitas utilizar Webpack,
que necesitas utilizar Bit,
luego lo veremos más adelante,
¿no?
Cómo podemos utilizar
empaquetadores de aplicaciones
para que nos ayuden.
Pero lo cierto,
la realidad,
es que React
es una biblioteca
y como tal
podemos utilizarla
puramente con JavaScript,
¿no?
Así que aquí tenemos un import,
vamos a importar React DOM
y lo importamos
desde esta URL.
Fíjate que al final
pone barra client,
o sea,
estamos importando
la parte de React DOM
del cliente.
Ahora que ya tenemos
el React DOM,
tendríamos que tener aquí
un sitio
donde queremos
renderizar nuestra aplicación.
Así que,
por ejemplo,
voy a crear aquí un div
con un id,
le voy a llamar app
y lo vamos a cerrar.
Aquí con el React DOM
lo que podemos recuperar
es decir,
venga,
voy a recuperar
este elemento del DOM.
Vamos a tener aquí
la app
document
getElementById.
Recuperamos este elemento.
Este app,
este le va a llamar
app DOMElement
para que lo veamos claro,
¿vale?
Ahora,
queremos crear
una aplicación de React
para que se renderice aquí.
Y con esto quiero,
¿por qué te explico esto?
Por dos cosas.
Uno,
porque vas a darte cuenta
que podrías utilizar React
para inyectarlo
en un componente
en cualquier página web
y esto es muy importante,
muy importante.
Y lo segundo
es que vas a poder
empezar a aprender React
sin instalar absolutamente nada.
Entonces,
¿cómo creamos
nuestra aplicación de React?
Lo primero que tenemos que decirle
es que tenemos que crear
como un root.
Al final,
en React,
lo que vamos a generar
es un árbol de elementos,
un árbol que va a ir
creando nuestra UI
a nivel de componentes
y cada componente
va a tener dentro
de un componente
porque en React
todo es un componente.
Pero,
¿cómo tenemos que iniciar?
Pues,
tenemos que iniciar
desde una raíz,
como desde la base.
Así que tenemos que crear
un tronco.
Y el tronco lo vamos a crear
con React DOME,
que ya lo tenemos aquí,
y creamos el root
y le decimos
dónde lo tenemos que crear.
Lo vamos a crear
en el elemento del DOM
que tenemos aquí,
aquí dentro.
Así que ya tenemos nuestro root.
Ahora que ya tenemos nuestro root,
tenemos que decirle
qué es lo que queremos renderizar dentro.
Vamos a crear en el root,
vamos a decir
que renderice
y aquí le podemos decir
que renderice
lo que queramos.
Vamos a poner
Hola React.
Ya podemos ver aquí
que ya nos ha renderizado
el Hola React.
O sea,
ya tenemos aquí
lo primero que estamos renderizando.
Esto,
que parece una tontería,
ya tenemos justamente
algo bastante potente
que podríamos empezar
a utilizar
en cualquier página web.
Si imagínate
que quieres integrar
un widget
en una página
que es muy antigua
y dices,
no,
pero esta parte
la quiero hacer con React.
Bueno,
podrías hacer esto
para empezar a renderizar React.
Obviamente,
el problema que tenemos aquí
es que esto es una cadena de texto,
¿no?
Hola React,
vale,
está bien,
pero no es muy interesante.
Vamos a hacer una cosa,
vamos a copiarnos
el estilo que tenemos aquí.
Vamos a poner esto para aquí.
Hola React,
vale,
y aquí vamos a poner
que esto,
vamos a poner que el Font Family,
para mejorar el Font Family,
vamos a hacer System UI,
para que lo veamos
un poco un poco mejor.
Vale,
ahora que ya tenemos
este Hola React,
alguien me dirá,
bueno,
pues vamos a hacer el botón.
Podríamos empezar
a hacer el botón.
Vamos a intentar
poner el botón aquí.
Button
y ponemos me gusta.
Ojo,
¿qué ha pasado?
Como pueden ver,
lo que está intentando renderizar
en realidad es
button,
me gusta button.
O sea,
está intentando renderizar
el texto.
Y eso es porque,
como veréis,
y más adelante lo veremos
con otro ejemplo,
en React,
tú no puedes renderizar
texto HTML.
Tienes que crear
de alguna forma
el elemento
para decirle a React
lo que quiere renderizar
con concreto.
Si tú intentas renderizar
HTML así,
esto no va a funcionar.
Esto lo hace
porque así lo que evita
es que alguien
intente
inyectarte código.
Así que,
sí que puedes renderizar
un texto,
pero no puedes renderizar
HTML así.
Para poder renderizar
como el HTML resultante,
lo que necesitas
es crear un elemento.
Vas a ver que al principio
vas a decir,
ostras,
pero el código de React
está quedando un poco complicado.
No te preocupes
porque más adelante
vamos a ver
cómo funciona JSX
para solucionarnos esto
y vas a saber que es.
Vamos a importar React.
Para importar React
nos vamos a
en Macri Modules
y aquí importamos
la dependencia de React.
Ahora,
para React
vamos a crear
un elemento.
Este elemento
le vamos a poner
Button
y hacemos
React.createElement.
El elemento
que queremos crear
es un botón.
El segundo parámetro
serían los atributos
o propiedades
que debería tener
nuestro botón.
Por ahora le vamos a decir
null
y vamos a poner
que dentro
queremos que tenga
el texto me gusta.
O sea,
para crear un elemento
tenemos tres parámetros.
El elemento
que queremos crear,
esto sería
un objeto
o null
que serían
las propiedades
o atributos
que queremos
que tenga
nuestro elemento
y aquí tendríamos
que poner
lo que está
envolviendo
este elemento.
Como lo que queremos
es poner
el botón
me gusta
este de aquí,
pues lo que tenemos
aquí es
el texto
me gusta.
Y ahora que tenemos
este elemento
en el root.render
ya podemos aquí
poner el botón.
Ahora sí
estamos renderizando
nuestro primer elemento.
Ahora sí que estamos
renderizando
nuestro primer elemento.
Así que esto
lo tienes que tener
muy claro.
Lo que hace React
es renderizar
elementos.
Nunca vas a poder
pasarle una cadena
de texto HTML
directamente a React.
Siempre vas a tener
que crear
o elementos
o vas a ver
más adelante
una forma
de poder saltarte
esta protección
pero todo esto
lo está haciendo
por un tema
de seguridad
porque así
la gente
no te puede
inyectar
el código.
Ahora bien,
si miramos
aquí
estábamos creando
con el data
id
123
pero si miro
aquí con el
inspector de elementos
ves que aquí
me falta el data
123.
¿Dónde debería
añadir el data
123?
Aquí en el null
este,
esto es un objeto
que hemos dicho
que serían como
los atributos
o propiedades
que le estaríamos
pasando a nuestro elemento
pues es aquí
donde podríamos
como un objeto
decirle vale
pues queremos que tenga
el 123
y ahora sí
si miramos
e inspeccionamos
ahora podemos ver
que sí tenemos
el data id
perfectamente
o sea ya hemos sido
capaces
que queremos poner
una clase
un class name
pues lo deberíamos
poner aquí
que deberíamos poner
cualquier otra cosa
lo podríamos poner aquí
ahora bien
antes lo que hemos
hecho en realidad
era mostrar
tres botones
vamos a hacer esto
para que muestre
los tres botones
vamos a poner esto así
vamos a poner botón 2
botón 3
y vamos a poner aquí
que esto es el
4, 5, 6
7, 8, 9
y vamos a poner botón me gusta
vamos a poner botón 1
botón 1
botón 2
y botón 3
necesitamos
reprendizar los tres
pero claro
¿cómo hacemos esto?
podríamos poner aquí
botón 2
botón 3
bueno
ya ves que esto no funciona
esto es súper importante
que lo entiendas
y vas a ver
ahora mismo puede ser
que te preguntes
¿pero por qué me está
explicando esto?
¿por qué me explica
estas cosas?
pues es bastante importante
que entiendas esto
para que veas
realmente
cuál es el
javascript
para crear React
para crear nuestros elementos
porque luego
lo que va a pasar
es que esto
va a hacer que entiendas
un montón de cosas
¿qué pasa ahora?
vale
lo que podemos ver
es que no podemos
no podemos
renderizar
más de un elemento
a la vez
siempre
siempre
tenemos que renderizar
un elemento
luego este problema
lo vamos a ver
mucho más
más claro
pero es que
imagínate que tienes
un método
en javascript
una función
imagínate que tienes
suma
y tienes aquí
a y b
2 más 2
vale
pero si tú a suma
le pasas 2, 3, 5
5 no te lo va a sumar
automáticamente
lo mismo puede pasar
en el tema de React
lo que siempre va a hacer
es renderizar
un elemento
ahora bien
¿cómo puedes arreglar esto?
lo puedes arreglar
envolviendo
el elemento
o sea puedes hacer
un elemento
que se envuelva
todos los botones
lo más fácil
en este caso
sería tener un div
un elemento
vamos a poner el div
un elemento
div
vamos a decir
vale
pues vamos a tener un div
y el div
vamos a tener que esto sea null
y cuál
qué es lo que debería tener aquí
qué es lo que debería tener aquí
si el tercer parámetro
es lo que envuelve
pues lo que vamos a tener aquí
debería ser un array
que tenemos el botón
el botón 2
y el botón 3
y este div
es el que vamos a renderizar
y ahora sí
tendríamos ya
nuestros 3 botones
ahora bien
qué pasa con esto
pues claro
el problema
que alguien nos dirá
nos dirá
pero claro
yo no quiero un div
con razón
está bien que te quejes
porque te he sentido
nadie quiere un div
no te preocupes
justamente
para que no tengas
que renderizar un div
React
tiene un componente
suyo propio
tiene como una forma
de envolver
cosas
con cosas vacías
para no renderizar nada
y para eso
puedes crear un React
punto
fragment
que luego más adelante
veremos otra forma
de escribirlo
mucho más fácil
y mucho más
lógico
inspeccionamos esto
y ahora puedes ver
que desde la app
estamos renderizando
nuestros 3 botones
vale vale
pero alguien me dirá
alguien me dirá
ah ¿por qué en un div?
no hacemos un div
porque al final
dices
¿por qué necesario un div?
o sea ¿por qué
tendríamos que hacer un div?
esto lo que nos está haciendo
es obligar
a crear
un nivel más
en nuestro HTML
entonces
lo que tenemos que hacer
es intentar evitar
y dejar nuestro HTML
lo más simple
y semántico posible
con esto ya habíamos evitado el div
pero alguien
seguramente en el chat
estará diciendo
pero yo React
me lo esperaba de otra forma
este React
no es el que me habían prometido
es normal
¿por qué?
porque muchas veces
lo que ocurre
es que en los cursos
van a saco
a decirte
no React
mira esto es así
pam pam pam
bueno
pero en realidad
esto es React
pero
no está bien
que escribamos
este tipo de código
este tipo de código
es bastante
verboso
es como muy difícil
una cosa que podemos intentar
para arreglar esto
sería decir
bueno voy a crear
como esto
lo voy a poner aquí
y esto lo vamos a poner aquí
¿no?
h pam
vale
esto al menos
simplifica un poco
el código
lo simplifica un poco
pero si vemos el código anterior
este hacía más cosas
y todavía era mucho más sencillo
¿qué pasa?
que nuestro código
todavía no llega
a ser declarativo
te he prometido
que iba a ser declarativo
pero ya ves que aquí
le estamos diciendo
crear esto
crear esto
crear esto
¿no?
estamos así
todo el rato
o sea que alguien
se puede sentir un poco
engañado
pero para ello
lo que tienes que utilizar
con React
es esto que se llama
JSX
¿qué es esto de JSX?
¿cómo funciona?
y tiene que ver con React
¿cómo es esto?
como ya te he demostrado
puedes utilizar React
sin JSX
y esto es puramente React
pero JSX
es una extensión
de ECMAScript
que está basada en XML
y lo que nos va a permitir
es crear de una forma
mucho más declarativa
nuestros elementos
y así
no tener que
escribir esto
de una forma
tan complicada
porque si empezamos
a escribir así
no lo vamos a entender
va a ser muy difícil
que podamos
hacer interfaces
muy grandes
y la gente
pues se va a volver
un poco loca
¿qué es esto de JSX?
pues es como un lenguaje
como una extensión
de JavaScript
que tú
escribes como una especie
de XML
que sería una sintaxis
en la que tú describes
la interfaz
que quieres crear
en lugar de poner
voy a crear
este botón
voy a crear este botón
esta interfaz
la podríamos recrear
exactamente igual
simplemente escribiendo
react.fragment
¿y qué es lo que tiene
react.fragment?
pues aquí hemos dicho
que tenía un botón
con data id
un dos tres
otro botón
espérate
el botón
hemos dicho que esto
es botón uno
y aquí esto lo repetimos
react.fragment
¿qué es lo que pasa con esto?
pues podemos ver
que el código de arriba
y el código de abajo
pero esto
con JSX
estos códigos
son justamente
lo mismo
el código de arriba
y el código de abajo
por eso es súper importante
que entiendas
la parte de arriba
porque si entiendas
la parte de arriba
cuando veas esto
entenderás todo lo que está pasando abajo
si ahora mismo
te está explotando la cabeza
no te preocupes
¿y cómo funciona esto?
¿quién se encarga
de hacer esta magia?
claro
muchas veces
en muchos tutoriales
y muchos cursos
lo que pasa
es que
la gente se lanza
directamente
a aprenderlo
con JSX
con el empaquetador
de aplicaciones
y no entiende
la magia
que está pasando por detrás
para que veas esta magia
pues ya has visto
pues está
este tipo de información
y vamos a ver
quién es el que se encarga
de hacer este tipo
de transformación
¿quién se encarga?
se encargan algunas aplicaciones
o algunas herramientas
como SWC
o Babel
Babel
que es muy famoso
es un transpilador
de código
donde tú le escribes
JavaScript
y lo que hace
es transformarlo
lo mismo
te puedes hacer
con SWC
estas son dos herramientas
que son las que utiliza
por debajo
algunos empaquetadores
de aplicaciones
como puede ser
Webpack
o como utiliza
Next.js
Bit
o alguna de las cosas
que vamos a ver
hoy en día
la más moderna
es SWC
y aquí vas a poder ver
la diferencia
y cómo hace
ese paso de magia
por ejemplo
este botón
que tenemos aquí
fíjate
cuando lo renderizamos
vamos a poner
React.createElement
¿vale?
fíjate
yo tengo este código
creando el botón
button
esta sería la forma larga
la que era más verbosa
vamos a utilizar aquí
JSX
y vamos a decirle
botón
tenemos data
id
123
y esto sería
el botón
1
¿no?
botón
vamos a poner esto
por acá
fíjate
qué es lo que ha pasado aquí
lo que ha pasado aquí
vamos a poner aquí
la línea 1
y la línea 3
son lo mismo
son exactamente lo mismo
solo que
este paso de transpilación
este paso de compilación
hace que cuando tú veas
esto
cuando tú veas esto
se transforme en esto
¿qué quiere decir?
que JSX
no es HTML
lo que estamos escribiendo
en React
cuando escribamos JSX
no es que estamos escribiendo
directamente HTML
lo que estamos escribiendo
es JavaScript
pero lo estamos escribiendo
con JSX
porque va a ser
mucho más fácil
que podamos construir
nuestras aplicaciones
nuestra UI
de una forma mucho más declarativa
así que cuando veas JSX
pues ahora sí
vas a entender
exactamente
de dónde viene
aquí puedes ver
además que
cuando creamos el elemento
pues justamente
es que es exactamente
exactamente lo mismo
esto conforme lo vas complicando
cuando vas escribiendo JSX
si tú tienes un div
que tiene los tres botones
1, 2, 3
empiezas a empezar
a hacer aquí
pues una sintaxis
mucho más complicada
vas a ver
que se va complicando
y que si eso
lo tuviésemos
que escribir a mano
pues iba a ser
mucho más difícil
así que esa es la gracia
de que utilicemos JSX
¿vale?
tú ves esto
se compila
perfecto
ahora que ya sabes
todo el tema de JSX
tenemos que saber
algunas cosas
que son muy importantes
de JSX
1, expresiones en JSX
por ejemplo
si tendríamos aquí
el nombre
Miguel
en JSX
tú podrías tener
el elemento aquí
y podrías hacer
hola
y poner aquí
el nombre de Miguel
o sea
puedes añadir expresiones
hostia
se ha quedado penchado
se ha quedado penchado
pero puedes añadir expresiones
poniendo
la constante entre llaves
esto mismo
también lo podrías hacer
por ejemplo
con
llamando una función
o sea
tú aquí
podríamos hacer
el JSX
podrías tener un elemento
y decir
strong
y poner aquí
número aleatorio
y entre llaves
podrías decir
voy a evaluar
la expresión
más random
esto lo vamos a estar
haciendo constantemente
cuando tú lo pones
entre llaves
lo que estás diciéndole
es esto
quiero que lo evalúe
quiero que evalúes
esta expresión
por lo tanto
entre llaves
solo puede ser poner
expresiones
y no declaraciones
por ejemplo
no puedes poner un código
no podrías poner aquí
un if
porque un if
no es una expresión
es una declaración
tienes que poner cosas
que devuelvan un valor
un 2
ejecutar una función
que devuelva un valor
el más random
evaluar
por ejemplo
una constante
que tengas aquí
por ejemplo así
esto lo veremos después
y luego lo especificar atributos
ya hemos visto
que este data id
lo estábamos especificando
aquí
a ver si esto devuelve
no
este se ha muerto
bueno
lo que tenemos que hacer
para especificar atributos
es simplemente
muy parecido
como lo hacemos en html
data id
123
esto sería la forma
de especificar atributos
vas a ver
que en React
obviamente
como es javascript
como es javascript
y no es html
los atributos
en realidad
se utilizan normalmente
como si fuesen camel case
por ejemplo
si tuviésemos un atributo
el tap index
en lugar de utilizarlo
ponerlo así
lo que tendríamos que hacer
sería utilizarlo
en camel case
porque es javascript
no es html
a veces uno se puede
confundir por esto
¿vale?
ahora
como hemos visto en jx
también tienes que tener en cuenta
que evita
la inyección de código
si aquí ponemos la respuesta
y pongo script alert
y ponemos hola
¿no?
y hacemos esto
si esto
vas a ver
como hemos visto antes
si tú pones aquí
un element
y pones el h1
que tenga el response
como hemos visto antes
esto
mira voy a poner aquí
el tryout
y lo vamos a ver aquí
el alert
ah vale
así
vamos a hacer esto
un poquito más grande
clip
y cerramos esto aquí
vale
como puedes ver
alguien te podría intentar
inventar código
dice no
en h1
meter la respuesta
imagínate que esto es información
que le estás pidiendo al usuario
y te dice
ah
te voy a hackear
vale
pues script alert
no sé qué
pero ya hemos visto
que si tú intentas
renderizar
de esta forma
en la response
como children
una cadena de texto
pues se queda como cadena de texto
y esto
lo que ocurriría
si ejecutásemos este código
y lo ejecutamos aquí
que justamente
podríamos tener esto
en app
vale
lo que nos vamos a encontrar
a ver
aquí hay alguna cosa
que he dejado abierta
y por eso
no me aparece esto por aquí
response
voy a enseñarte
el ejemplo este
y ahora la hemos liado
el h
no pero ahora no estoy usando el h
ahora no estoy usando el h
react-react-element
no
está antes de la com
no sé si hay un punto y coma
por ahí o algo
que no le está molando
o sea este punto
es que me deja algo abierto
ah bueno
es que seguramente
el script este
ni siquiera me lo
me lo va a poner
h1
o sea a lo mejor
es que está intentando
grapearlo o algo
script time mobile
tile dip
claro puede ser
que ni siquiera lo haga
a ver
si ponemos aquí hola
directamente
hola
entonces sí
entonces le ponemos script
y aquí script
yo creo que ni siquiera
que no
que no rula
pero que bueno
no no es por las comillas
no es por las comillas
a lo mejor es por el codilink
seguramente es por el codilink
bueno
el tema
vamos con jsx
ahora que ya hemos visto
todo esto
que seguramente es la parte
aburrida de react
que yo sé que a mucha gente
le encanta empezar ahí
de primeras ahí a saco
ahora que ya sabes esto
ahora ya sabemos
cómo utilizar jsx
quién hace la transformación
de jsx
bueno
pues vamos ya
con cosas más divertidas
para poder trabajar
con esto de jsx
para poder trabajar con react
claro
no lo vamos a poder
estar haciendo ahí
en codilink
y hacerlo sin mano
porque es que eso
nos va a complicar
un montón las cosas
vamos a utilizar un empaquetador
de aplicaciones web
qué pasa con esto
tenemos diferentes alternativas
podrías utilizar
create react app
que esto utiliza por debajo
webpack
create react app
es la forma oficial
para crear tu primera aplicación
con react
qué pasa
que es un poquito lenta
se ha quedado un poco atrás
así que no vamos a utilizar
create react app
hay una mucho más nueva
que va mucho más rápido
o mucho más
para mí
mejor
que es vid
que es
algo que
va increíblemente rápido
y es compatible
no solo con react
sino también con view
y con svelte
y con otras alternativas
así que vamos a utilizar
vid para crear
nuestro primer proyecto
vámonos aquí
donde teníamos
nuestro primer proyecto
vamos aprendiendo react
yo tengo ya aquí
mi repositorio
este repositorio
os recuerdo
que es
a ver
open
a ver si esto funciona
open repo view
repo view
a ver si soy capaz
de entrar a la página
vaya por
repo view
vale
pues voy a utilizar
este repositorio
vale
ahora mismo está vacío
pero lo que vamos a hacer
es ir creando
paso a paso
nuestra primera aplicación
para utilizar vid
lo que tenéis por aquí
son ya las instrucciones
que pone
npm create vid
npm es el administrador
de aplicaciones
de dependencias de node
y tenemos create
que sería el comando
que lo que hace es buscar
el paquete
de create vid
y te empieza a hacer
algunas preguntas
en nuestro repositorio
yo voy a crear
un repositorio
un monorepositorio
multipaquete
porque en este mismo repositorio
vamos a tener
un montón de proyectos
entonces te recomiendo
que hagan lo mismo
lo primero que vamos a hacer
es un npm init
menos y
esto va a inicializar
nuestro proyecto
y ya vamos a tener
un package json
pero dentro
vamos a crear
una carpeta
que le vamos a llamar
projects
entramos en projects
y dentro de projects
vamos a crear
el npm create
con vid
arroba
latest
para que pille la última versión
ejecutamos esto
y lo primero que nos pregunta
es el nombre
del proyecto
que queremos tener
vale
pues aquí le vamos a poner
el primer
vamos a poner
hola mundo
va a ser nuestro primer componente
para que veamos
que todo funciona bien
aquí podemos elegir
el sabor
tienes soporte para view
para priak
lit
svelte
priak es una alternativa
liviana de ria
que es muy similar
pero vamos a utilizar ria
y aquí ya nos dice
si queremos utilizar
javascript o typescript
si sabes typescript
aguantate
nosotros vamos a empezar
por ahora
con javascript
pero más adelante
utilizaremos typescript
y además fíjate
que aquí
más swc
swc
es lo que te he enseñado
aquí justamente
es un transpilador
como babel
que es mucho más rápido
porque está hecho
con rast
nosotros siempre
vamos a utilizar
swc
de hecho
ya te digo yo
eventualmente
esto va a ser
el que sea por defecto
lo que pasa es que
ahora no lo es
pero lo será
vamos a utilizar este
ya nos deja esto así
vamos a crear
vamos a entrar
en nuestro primer proyecto
hacemos un npm install
para instalar las dependencias
esto no debería tardar mucho
y ya nos ha dicho aquí
que tenemos que hacer
un npm run dev
para inicializar nuestro proyecto
hacemos npm run dev
y nos dice
que ha tardado
300 milisegundos
nos deja
una dirección
aquí en local
y si queremos
que nos exponga una ip
podríamos utilizar
guión guión host
nosotros no vamos a exponer nada
pero vamos a empezar por aquí
si entramos aquí
vamos a ver
que nos ha creado
como un pequeño
proyectito
simple
con ria
con algunos archivos
que funciona
que tiene un poco de interactividad
vamos a quitar todo esto
porque nosotros
vamos a empezar con otra cosa
vamos a abrir
el editor
de Visual Studio Code
con esta carpeta
yo he ido directamente
donde tenía el proyecto
y he hecho un code punto
para entrar ahí
si tú lo tienes de otra forma
pues entra manualmente
y ya está
y aquí tenemos
todas las carpetas
que nos han creado
todos los ficheros
nos ha inicializado ya
nuestro proyecto
vamos a ver
que ha inicializado
tenemos por aquí
un gitignore
que ignora para git
pues los archivos
que no queremos subir
a nuestro repositorio
en el index html
pues tenemos aquí
un html
que ha creado
para donde se va
a construir
nuestra aplicación
fíjate
y muy importante
este elemento
div
id root
que tenemos aquí
¿vale?
súper importante
y además
tenemos este script
type module
que está cargando
source
barra
main
punto jsx
este source
barra main
es este fichero
de aquí
esto lo podemos hacer
porque bit
automáticamente
detecta archivos
con jsx
es compatible
con jsx
y ya hace la transpilación
que hemos visto antes
automáticamente
vamos a ver
qué más tenemos
antes de entrar
en el source
que es donde están
todos los archivos
con código
tenemos el package
punto json
con las dependencias
y las dependencias
de desarrollo
en las dependencias
tenemos la última versión
de React
y en las dependencias
de desarrollo
tenemos bit
y el plugin
para que funcione
React
con bit
esta es la configuración
que ha hecho bit
para poder compilar
todo el proyecto
esto ya viene hecho
no tenemos que tocar nada
pero vamos a ver
desde este index html
vamos a ver
este módulo
que nos pone aquí
este source
barra main
esto es lo que llamamos
el punto de entrada
de nuestra aplicación
y esto es súper importante
hay muy poca gente
que entiende este concepto
porque hay gente
que como empieza
o ven los tutoriales
que ya viene todo hecho
no entiende
cómo se genera
o se crea
desde cero
un proyecto con React
algo que es
muy básico
entonces
¿qué tenemos aquí?
tenemos
estamos importando React
desde React
esto es muy similar
a como lo hemos
abierto lo que no era
muy similar
a como lo habíamos
hecho antes
en el
ah no encuentro
igual lo he cerrado
como lo habíamos
hecho antes
que habíamos importado
el módulo
solo que simplemente
ahora como lo tenemos
instalado
podemos utilizar
en lugar del https
ya podemos decirle
la dependencia exacta
que tenemos
el no module
usando su nombre
también en React
DOM client
como lo hemos
hecho antes
React DOM
barra client
luego estamos importando
un componente app
luego veremos
lo que es un componente
y aquí estamos importando
los estilos
como bit
si tienes soporte
a que puedas importar
el css
y te lo empaquete
automáticamente
pues ya tenemos
aquí los estilos
aquí tenemos
React DOM
.create root
y aquí tenemos
el elemento
del html
donde queremos
crear nuestra aplicación
donde queremos
renderizar nuestra aplicación
esto es exactamente
lo mismo
que hemos hecho antes
fíjate que aquí
lo están haciendo
en una sola línea
pero podríamos crear
aquí la constante
y aquí tendríamos
root.render
que lo hemos utilizado antes
y aquí
tenemos
por un lado
el streak mode
que esto es una cosa
de React
que ahora te comentaré
y aquí tenemos
app
por ahora
para empezar
con nuestro
nuestro primer proyecto
voy a empezar
a quitar cosas
porque no las necesitamos
y las vamos a ir creando
poco a poco nosotros
¿vale?
porque si no
pues va a ser un poco
un poco raro
que empiece por
por los componentes
y todo esto
vamos a quitar esto
luego lo haremos
y te explicaré mejor
pero vamos a quedarnos
ahora a poner aquí
otra vez de nuevo
nuestro hola mundo
el que habíamos dicho
que íbamos a tener
nuestro hola mundo
voy a hacer esto
aquí
esto lo voy a dejar
por acá
quito esta línea
que importó el app
porque he borrado
este fichero también
ok
y este fichero también
lo he borrado
esto no lo necesitamos
empezamos con nuestro
hola mundo
como lo teníamos aquí
perfecto
muy bien
hemos dicho
que queríamos el botón
vale
pues el botón
en lugar del hola mundo
vamos a tener aquí
el botón
vamos a poner aquí
en lugar del hola mundo
podríamos poner el botón
hola botón
ya tenemos nuestro hola botón
¿qué hemos dicho?
que podríamos hacer
con el react fragment
podríamos tener
también
más de un botón
podríamos react fragment
podríamos ponerlo así
teníamos que envolverlo
porque no podíamos renderizar dos
de hecho lo podéis ver
aquí
si tú intentas renderizar aquí
dos botones
uno al otro
ves que ya se pone en rojo
y ya se está quejando
si guardo esto
fíjate que va a petar
y dice
es que hay un error
en la sintaxis
porque es que esto
no es una sintaxis válida
porque ahora que ya sabemos
que esto realmente es javascript
no tiene sentido
en un sitio
que estamos pasando
un parámetro
que pasemos dos
por lo tanto es por eso que falla
como solo espera
le pasemos un parámetro
pues tenemos que pasarle
un parámetro
un elemento
así que tenemos que envolverlo
con el react fragment
que hemos visto antes
¿vale?
ahora que ya tenemos el react fragment
ahora sí que arreglamos
ahora ya tenemos los dos botones
pero empezamos a tener
un pequeño problema
si nosotros empezamos
a tener botones
y queremos empezar
a utilizarlos
de alguna forma
imagínate que cada botón
no solo tiene que poner
hola button
sino que aquí
cada botón
también tiene que tener
un pequeño iconito
nos vamos aquí
system icons
por ejemplo
system UI
no me acuerdo
system UI icons
system UI icons
a ver si lo encuentro
iconos de sistema
atrás
como no estoy en mi sesión
system UI icons
SVG
que quiero unos iconos
para que los podamos utilizar
un momento
bueno a ver
si no puedo utilizar cualquiera
hero icons
este seguro que me acuerdo
vamos a poner aquí el like
mira
aquí tenemos un like
por ejemplo
imagínate que este lo quiero aquí
y tengo este SVG
fíjate todo este SVG
como es de tocho
y lo ponemos ahí en medio
pues a lo mejor dice
ostras pero no voy a enterar
muy bien ¿no?
vale
cuando vas a darte cuenta
que este SVG
pues debería funcionar exactamente
aquí lo tenemos
lo he guardado
y funciona correctamente
o sea
he puesto este SVG
dentro del botón
y todo funciona correctamente
ahora bien
hay algunas cosas
que no están del todo bien
¿y qué es lo que pasa?
pasan dos cosas
uno
que aquí
tenemos algunas cosas
que están utilizando
ves
stroke-linecap
stroke-linejoin
esto funciona
funciona
pero habíamos dicho
que si esto es javascript
esto tendría que ser con camelcase
esto lo veremos más adelante
y lo arreglaremos
y luego tenemos otro problema
fíjate que este SVG
es bastante grande
si yo todos los botones
quiero que tenga este SVG
empezamos a tener
el problema
de que
mira
vamos a poner esto
que cada uno
tenga este SVG
¿no?
SVG
y SVG
vale
los 10 en el SVG
pero ¿qué nos está pasando?
que hay mucho contenido
¿no?
o sea
tenemos aquí un montón
de información
ahí en grande
que es imposible
¿no?
que esto
lo tengamos repetido
constantemente
ya estamos viendo
que lo que necesitamos
de alguna forma
es que nuestro botón
se repita
porque a lo mejor
queremos tener aquí
hola button
queremos tener aquí
hola otro button
queremos empezar
que cada botón
se pueda cambiar
y que los botones
hola desde otro sitio
y que los podamos reutilizar
y que le podamos cambiar
esto lo que deberíamos hacer
es crear un componente
un componente
es una función
que lo que hace
es crear un elemento
en lugar de estar aquí
constantemente
creando manualmente
los botones
y tener que repetir
constantemente esto
lo que podemos hacer
es reutilizar
reutilizar
la
el código
para que nos genere
el elemento
que queremos organizar
podríamos crear una función
imagínate
podríamos hacer un
create button
¿no?
podemos crear un botón
y simplemente
que esto
devuelva
lo que queremos renderizar
podríamos tener aquí
button
podríamos tener esto
¿vale?
y podemos meterlo aquí
con esto
fíjate que ya tenemos aquí
el botón
create button
y aquí podríamos
como hemos visto
podríamos utilizar
la expresión
entre llaves
para decirle
quiero que
lo que devuelve
el create button
me lo renderices aquí
¿vale?
pues esto lo podríamos hacer
tres veces
y con esto
ya lo tendríamos ¿no?
guardamos los cambios
y ahora vemos que está
tres veces
esto lo podríamos hacer
mil veces
ocho mil veces
lo podríamos hacer
tantas veces como queramos
vale
pero hemos dicho que queríamos
cambiar también el texto
¿verdad?
vale
pues vamos a cambiar el texto
vamos a poner aquí
el texto
le vamos a pasar el texto
se lo vamos a pasar así
como un parámetro nombrado
así cuando vayamos al create button
vamos a decirle
mira
el texto que le vamos a pasar por aquí
quiero que aparezca aquí
y para evaluar eso
lo ponemos entre llaves
ahora si guardo los cambios
no va a aparecer nada
porque no tengo absolutamente nada
¿no?
porque como no le he pasado nada
pues está fallando
porque está intentando acceder al texto
y no funciona
vamos al create button
le vamos a pasar el texto
vamos a hacer el botón uno
el texto
el botón dos
el texto
del botón tres
guardamos los cambios
y ya está
ya lo tenemos
pero esto está mal
esto no es como se tienen que crear
elementos en React
aunque esto nos ha funcionado
¿no?
porque al final está creando
pues un botón
un elemento
y se está reutilizando
en realidad
en React
cuando queremos crear
una función
que tiene
que devolver un elemento
lo tenemos que hacer
de otra forma
esto es una función
normal y corriente
pero en React
existe el concepto
de componente
un componente
es una función
que devuelve un elemento
es exactamente esto
pero en lugar de
utilizar un create button
de esta forma
lo que hacemos es ponerle
un nombre a ese componente
por ejemplo
el nombre va a ser
button
y en lugar de
hacer esto ¿no?
de hacer un create button
donde tenemos una función
y llamamos a una función
hemos dicho que queremos
que sea declarativo
fíjate que esto es imperativo
porque le están diciendo
¡eh!
crea un botón
no le tenemos que decir
que crea un botón
le tenemos que decir
que queremos mostrar un botón
así que vamos a tener
button
y lo que tenemos que hacer
para pasarle nuestra propiedad
nuestro parámetro
es simplemente
ponérselo como si fuese
un atributo
queremos que el button
tenga el texto este
lo mismo pasaría
con los otros
en lugar de crear funciones
creamos componentes
y los componentes
quedarían justamente así
lo único que hemos hecho
es cambiar aquí este nombre
para que sea
con que empiece por mayúscula
y esto es importante
los componentes
tienen que ser
pascal case
pascal case
¿qué significa pascal case?
pascal case
es así
pascal case
camel case
sería así
y snake case
sería así
y kebab case
sería así
nuestros nombres
de los componentes
tienen que ser pascal case
y tú me dirás
bueno
¿pero por qué?
¿por qué no puedo utilizar
este button
y ponerle un nombre
minúscula por ejemplo?
o no le puedo poner
algo así
¿por qué no le puedo poner
algo así?
¿por qué no podría poner
un special case
y ponérselo así?
¿no?
y utilizarlo así
si total es el nombre
que tengo
fíjate
ha desaparecido
pero el nombre es correcto
¿por qué esto no funciona?
y esto es súper importante
esto no funciona
porque los nombres
de nuestros componentes
siempre tienen que ser
en pascal case
porque es la única forma
que React hace
o que React tiene
para
no es por el traspilador
es por React
es por
porque
no es capaz
de diferenciar
si lo que has escrito
es un elemento
HTML
o si realmente
es un componente
fíjate que realmente
los ha renderizado
los ha renderizado
pero los ha renderizado
como si fuesen
elementos HTML
y es que
elementos HTML
el día de mañana
no sabemos
si van a existir más
no sabemos
si un día
van a poner
un special button
no sabemos
entonces
para que no exista
esa colisión
lo que tenemos que hacer
en un día
es que nuestros componentes
siempre
sean
pascal case
y nunca
podemos utilizar
que sea todo minúscula
ni nada de eso
tiene que ser pascal
y ahora que lo sabes
y ya sabes la razón
por la que tiene que ser así
pues ahora sí
que lo tenemos
ahora bien
os he dicho
esto está bien
ya hemos creado
nuestro primer componente
pero os he comentado
que claro
lo interesante
de muchas veces
de React
es poder tener
una parte
de nuestra interfaz
es verdad que un botón
es un poco
de aquella forma
para poder ver
mejor
cómo pueden renderizar
vamos a crear
nuestro primer proyectillo
y nuestro primer proyectillo
que va a ser el primer
como hola mundo
va a ser
va a ser creando
mira
vamos a crear
este componente de aquí
no sé por qué
solo me sale
aquí en seguir una persona
normalmente
ah mira
salen tres
pero a ver
no sé si lo veis
os lo voy a pasar por aquí
a ver si lo veis
veis este componente aquí
de aquí en seguir
y a partir de aquí
lo que vamos a empezar a hacer
es primero visual
vamos a ver
cómo hacerle los estilos
vamos a ver
cómo poner props
para que cambie la información
y luego vamos a ponerle también
pues que este botón
cambie
cuando le hagamos click
y vamos a ver
cómo lo hacemos todo
de una forma declarativa
así que
vamos a
vamos a hacer
si os parece
este
esta UI
de Twitter
a ver si
subo esto un poco para arriba
vale
y aquí podéis ver
esta interfaz
vamos a crear nuestra primera parte
de la UI
que además la podríamos utilizar
en cualquier sitio
vamos a quitar todo esto
vamos a quitar todo esto
esto lo vamos a dejar aquí
y esto
lo vamos a dejar
como estaba
vamos a dejar aquí
vamos a dejar por ejemplo
tip
y vamos a poner
Twitter card
vale
lo primero y lo más interesante
como hemos visto ya
cómo utilizar un componente
es que creemos el componente
en lugar de crearlo aquí
porque si empezamos a crear
constantemente aquí
pues es un poco rollo
¿no?
una cosa que puedes hacer
para separar un componente
sería crear un componente
dentro de la carpeta source
y vamos a crear aquí
nuestra app
por ejemplo
y le debemos poner
la extensión
JSX
tiene extensión JSX
porque esto lo que hace
es que le decimos
al empaquetador de aplicaciones
le estamos diciendo
oye
que sepas que en este archivo
voy a utilizar JSX
vale
ahora que tenemos aquí esto
tenemos que hacer
tenemos que crear nuestra función
app
y decirle lo que tiene que renderizar
vamos a hacer que renderice un div
y aquí
nuestra Twitter card
guardamos los cambios
ahora
quiero utilizar
en lugar de renderizar esto aquí
quiero que me renderice
este componente
¿cómo lo podemos hacer?
pues obviamente
podría poner aquí
que quiero que me renderice
la app
cuando un componente
no le pasamos
no tiene que envolver
absolutamente nada
lo cerramos así
directamente y ya está
cuando utilizamos esto
pues esto me está fallando
¿por qué?
porque no estoy importando
absolutamente nada
por un lado
tenemos que exportar el componente
así que aquí tenemos que decirle
export function app
y aquí tenemos que importar
nuestro componente
desde la ruta
ahora sí
que nos debería aparecer
y ahí lo tenemos
la Twitter card
vamos a empezar
a estilar nuestra Twitter card
vamos a ver
qué información
necesita la Twitter card
¿vale?
vamos a ver
la Twitter card
a ver si vamos por aquí
Twitter card
que tengo por aquí
la chuleta
de algunos estilos
y así
no tengo
no me los tengo que ir mirando
la Twitter card
tiene como cuatro
cuatro elementos importantes
la imagen
el nombre
el nombre de usuario
y el botón
así que aquí en app
vamos a hacer eso
vamos a envolverlo todo
en un article
el article dentro
vamos a tener
un header
donde el header
va a tener la imagen
así que
vamos a ponerle aquí
la imagen
source
podríamos utilizar
directamente esta imagen
la imagen aquí
que tenemos
vamos a utilizar
la de astro
si os parece
vamos a utilizar
la de astro
si soy capaz
de pillarlo
de este sitio
tan pequeñito
bueno mira
vamos a utilizar
este
este buen hombre
no la puedo pillar
directamente
bueno
pasa nada
no pasa nada
vamos a utilizar
un servicio
para esto
un avatar.io
¿ves?
y en avatar.io
vamos a utilizar
por ahora
este avatar
¿vale?
si ponemos
el de midudev
a ver qué sale
mira este
este hombre tan bonito
vamos a utilizar
este hombre tan bonito
vamos a seguir viendo
aquí el estilillo
tendríamos la imagen
aquí vamos a poner alt
esto sería
el avatar
de midudev
¿qué más tenemos?
dentro del header
aquí tendríamos
dentro un div
para separar
la imagen
de lo de la derecha
y aquí tendríamos
en lugar de un h1
esto sería más bien
un strong
donde tendríamos el nombre
¿no?
aquí sería
Miguel Ángel Durán
y abajo
tendríamos la cuenta
¿no?
aquí tenemos la cuenta
vale
vamos a poner
Oscar
midudev
y a la derecha
tendríamos
lo que sería
más bien
el más buena site
aquí
y esto sería
un botón
que es seguir
vamos a guardar los cambios
y si vamos aquí
bueno
no ha quedado exactamente
igual que el de Twitter
¿no?
no ha quedado exactamente
igual que el de Twitter
pero bueno
no pasa nada
lo que ahora
sí que tenemos
al menos
esto es lo que nos está
renderizando
exactamente
lo que sí que necesitamos
ahora son los estilos
podemos hacer los estilos
de React
de dos formas diferentes
una forma que podríamos
hacer es
directamente
podríamos poner aquí
un style
y hacer estilos en línea
pero los estilos en línea
no se ponen
como si fuesen
un stream
no se ponen así
si lo ponéis así
vais a ver
que ha desaparecido
todo
que esto ha dejado de funcionar
y que si miramos la consola
a ver qué es lo que le ha pasado
a todo esto
miramos la consola
y nos dice
oye
que el style
la prop style
espera en realidad
que las propiedades sean
un objeto
y no una cadena de texto
así que
deja de funcionar
porque no podemos utilizar
estilos en línea
de esta forma
pero sí que la podemos utilizar
como un objeto
poner display
dos puntos
flex
y ya empezaríamos
con esto
empezaríamos ya
a estilar
tendríamos aquí
el display flex
podríamos decirle
que el color
mira
vamos a poner
vamos a importar aquí
vamos a crear un
un estilo
general
para toda la página
que tenga el body
margin 0
para que no os quedéis ciegos
que os conozco
font family
system UI
vamos a poner
un display grid
con place content center
así lo centramos
vale
y este css
lo importamos a nivel
del punto de entrada
importamos index.css
y entonces ya al menos
empieza a estar un poco más
estilada la cosa
le vamos a decir también
que esto como mínimo
tenga la altura
así
y así lo tenemos
centrado en condición
vale
pues aquí a nivel de la app
podríamos empezar
a estilar aquí
y nos podríamos
ya veis que ahora sí
que el texto está en blanco
podríamos seguir
con esto
para que el article
pues hemos puesto
podríamos centrar aquí
alan items
importante utilizarlo
en camel case
porque si no
no funcionaría
center
empezaríamos a ir alineando
podríamos empezar a hacer esto
y esto podría funcionar
o sea esto sería una forma
de hacerlo
pero no es la forma
ni la más correcta
ni la más cómoda
ni nada
pero ya verás
que esta forma
que estamos estilando aquí
a veces
puede ser que
la tengas que utilizar
ya sea porque
tienes que poner
un estilo en concreto
que no lo puedes poner
a nivel de css normal
o por ejemplo
para react native
en react native
esta es la forma
nativa de añadirle
estilos a tus elementos
en react
bueno ya hemos visto
que esta no es la forma
¿qué podemos hacer?
bueno lo que podemos hacer
es crear aquí
un nuevo fichero
le vamos a llamar
app.css
y aquí podríamos tener
todos los estilos
que ya los tenía hechos
excepto este
todos los estilos
de nuestra card
tonel article
article header
header div
todos los estilos
a nivel de elemento
¿no?
directamente
y al guardar los cambios
tenemos que importar
aquí a nivel de componente
también podríamos importar
nuestro css
y ahora pues ya tendríamos
nuestro componente
bien estilado
perfectamente
ya se vería bien
y ya está
ahora bien
este css
ya lo teníamos hecho
porque era para no hacerlo
y tal
pero ¿qué pasa?
que como puedes ver
el css
como lo había hecho
estaba tirando directamente
de los elementos
html
esto quiere decir
que si a nivel
de nuestra aplicación
en otro componente
fuera
tenemos un article
también lo va a estilar
utilizando esto
por lo tanto
deberíamos utilizar
algún tipo de clase
un selector en concreto
para evitar esta colisión
¿cómo podemos hacer las clases?
lo que tenemos que hacer
podemos utilizar
ideas
que no es recomendable
porque si queremos
que nuestro componente
sea reutilizable
no tiene mucho sentido
podemos utilizar
class names
¿por qué class names?
porque como hemos visto antes
el jsx
se transforma
en javascript
y en javascript
class
es una palabra reservada
entonces
por temas históricos
cuando en RIA
quieres añadir una clase
un selector de clase
tienes que utilizar
class name
esto para que lo tengas en cuenta
tienes que utilizar
class name
ahora en el class name
aquí podríamos empezar a poner
pues lo que sea
podríamos utilizar
un class name
puedes utilizar
un nomenclatura
la que tú quieras
podríamos directamente
poner aquí
pues esto es article
pero lo mejor es que utilices
algo como por ejemplo
puedes utilizar
suite
o puedes utilizar
BEM
yo te recomiendo suite
porque es bastante sencillo
suite
¿en qué consiste?
consistiría en que
añadas algún tipo de prefijo
vamos a poner
MD
de midu
y aquí vamos a poner
twitter
follow card
o podríamos ponerlo
para ponerlo un poco más pequeño
vamos a poner que esto es
TW
y vamos a poner
follow card
¿no?
follow card
lo podemos poner
en camel key
follow card
ahora cada uno de estos
lo podríamos estilar aquí
en lugar de aquí
tendríamos el header
pues podríamos decir
aquí otro class name
follow card
y aquí podríamos header
aquí podríamos tener
por ejemplo
la imagen también
podríamos poner
class name
avatar
vale
pues así
podríamos empezar a ver
cada uno como lo hemos estilado
y aquí pues empezaríamos
a ir cambiando
podríamos hacer esto aquí
este sería el del header
el de la imagen
este sería el del avatar
punto
este sería el avatar
¿vale?
¿qué más tendríamos?
el del div
este de aquí
por ejemplo
follow card
info
este div
sería el del info
o sea este
por aquí
info
este sería el username
estaría en info
info
username
por ejemplo
podríamos llamarle
o ya podríamos empezar
a hacer alguno más
info
username
¿vale?
y ya solo nos faltaría
el botón
class name
esto sería otra forma
como lo podríamos hacer
¿vale?
esto para utilizar algo
nativo
a partir de aquí
hay un montón
pero un montón
de formas
de añadirle estilos
a React
por ejemplo
se puede hacer
se podría utilizar
CSS modules
los CSS modules
ahora
hoy en esta clase
no lo vamos a ver
pero sería una forma
también de estilar
podríamos utilizar
Tailwind
podríamos utilizar
Stile Components
podríamos utilizar
un montón de cosas
pero no es React
React
no se mete
en la forma
en la que tienes
que estilar tus componentes
puedes utilizar
diferentes tecnologías
que son agnósticas
a React
pero esto es un curso de React
entonces cada uno
pues te lo cuenta
de...
ay lo he puesto como clase
cada uno lo hará
como quiera
en el curso en general
en esta clase no
pero en el curso en general
sí que vamos a ver
otras alternativas
porque son dentro del ecosistema
pero no es que haya
una mejor que otra
a mí
tengo preferencias personales
por ejemplo
últimamente me gusta
muchísimo Tailwind
pero también hay catálogos
de componentes
como por ejemplo
Chakra UI
que son componentes de React
que puedes usar directamente
utilizarlos
y ya está
ya te vienen
pues con su estilo
con algunas propiedades
que le puedas cambiar
y todo esto
al final
eso es lo importante
lo importante es que ahora
ya tenemos esto
pero este componente
un problema que tiene
es que no es reusable
y además fíjate
que como lo hemos dejado
a nivel de app
pues tampoco es que
se pueda reusar mucho
así que vamos a usar bien
el componente
vamos a poner
twitter follow card
JSX
vamos a extraer
esto que habíamos hecho aquí
lo vamos a extraer
a nuestro componente correcto
que es este
export function
le llamamos
twitter follow card
y aquí hacemos un return
de todo esto
importante
esto lo podemos reutilizar
no
la base de la reutilización
de cualquier componente
en React
la base de la reutilización
es las propiedades
los parámetros
igual que las funciones
para poder reutilizar
una función
tienes que poder parametrizarla
los componentes
para poder reutilizarlos
tenemos que ser capaces
de pasarle la información
que nos interese
por ejemplo
el username
por ejemplo
el nombre del usuario
y ya está
podríamos pasar más cosas
o podemos hacer
is following
para saber si nos está siguiendo
el username
es lo que deberíamos poner aquí
entre llaves
para que se evalúe
aquí tendríamos
el nombre del usuario
para que podamos utilizar
el nombre del usuario
donde queramos
y aquí
como hemos visto
en este source
fíjate que aquí
aquí tenemos
el nombre del usuario
pero claro
si yo pongo esto aquí
así pongo username
esto no me va a funcionar
porque me va a detectar
que esto es un string
aquí tienes dos opciones
para hacer que este source
recupere de forma dinámica
este username
puedes hacer la forma sencilla
creas una constante
porque al final
dentro de los componentes
no dejan de ser funciones
puedes crear constantes dentro
creamos una constante
image source
creamos un template string
y aquí evaluamos el username
perfecto
y este image source
en este source
vamos a decir
vale
como no es una cadena de texto
queremos que evalúes
una expresión
y la expresión
¿cómo se evalúa?
con llaves
y le decimos
¿qué es lo que queremos que evalúe?
la variable
puedes hacer esto
o otra cosa que puedes hacer
como quieres una evaluación
puedes hacer
en lugar de crear la constante
directamente
podrías crear
el template string así
tienes las dos formas de hacerlo
lo puedes hacer
con el image source
como hemos hecho
con una constante fuera
o lo puedes hacer directamente
pero como queremos que evalúe
esta expresión
tenemos que hacerlo
entre llaves
¿vale?
esto por ejemplo
no es correcto
¿por qué?
porque si le dices esto
no le estás evaluando nada
esto es sintaxis
que es incorrecta
¿ok?
no puedes utilizar
esto directamente
tienes que hacer una evaluación
entre llaves
la única cosa que puedes pasarle
directamente
son strings
cadenas de texto
lo que tú quieras
si queréis con menos líneas
así
si lo queréis entender mejor
de la otra forma
si guardamos los cambios
vale
todavía no funciona
porque esto no lo hemos cambiado
esto ahora
en lugar del app
vamos a poner aquí
el twitterfollowcard
vamos a utilizarlo primero así
vemos que está vacío
o sea ahora mismo no funciona
porque tenemos que pasarle
el username
el name
y el isfollowing
el username
vamos a pasarle
por ejemplo
midudev
el name
vamos a poner
miguelángel
y luego
esto ya lo podemos repetir
tantas veces como queramos
pero fíjate
si lo repito dos veces
¿qué es lo que pasa otra vez?
pues lo que pasa
es que el twitterfollowcard
ya me dice que no puedo
no puedo devolver dos elementos
a la vez
así que ¿qué tengo que hacer?
vale
tengo que utilizar
react punto
pero claro
utilizar react punto fragment
es una forma
un poco
un poco rollo
de estar repitiendo
todo el rato lo mismo
el react punto fragment
cuando quieras envolver
dos elementos o más
en react
para poderlos devolver
y renderizarlos
sin necesidad de escribir
el react fragment
lo que puedes hacer
es utilizarlo así
vacío
queda mucho más fácil
mucho más limpio
y de esta forma
pues no tienes que poner
escribir react punto fragment
y visualmente
tiene sentido
porque como es algo
que no se va a renderizar
pues lo puedes dejar así
esto es exactamente
lo mismo
que lo otro
pero al menos
ahora ya sabes
que es lo que hay
por debajo
que es el react punto fragment
que es el que hace
la magia
con esto
ya tendríamos aquí
justamente
nuestros dos componentes
de hecho
decidme algo
un nombre de usuario
decimos un nombre de usuario
y lo ponemos rápidamente
va
mira
feralp
y tenemos aquí
creo que era
pablo
ah no me acuerdo
si era hernández
me voy a perdonar
pablo
pablo hernández
vale
la imagen veo que
se ha quedado igual
a ver
pablo a feralp
no le está pillando la imagen
ah mira ahora sí
tarda un ratito
gonzi
gonzi
gonzi
no sé como el nombre de usuario
creo que no es gonzi
elonmask
alguien ha puesto elonmask
elonmask
vale
elonmask
elonmask
elonmask
tampoco sale la imagen
eh
tovals
nico
que hace que
donde está el punto
de palpite el color azul así
eh
ah esto
pues una configuración
vexneder
vale vamos a poner otro
vexneder
y este es
van der hart
vale
bueno veo que hay un error
aquí en la
ya vemos que hay un error
pero esto es súper importante
y súper interesante
porque vemos que hay un error
en los estilos
¿verdad?
hemos visto que hay un error
en los estilos
si no utilizásemos componentes
al arreglar
el error de los estilos
lo que encontraríamos
es que
lo tendríamos que arreglar
a mano
en todos los sitios
¿verdad?
o sea tendríamos que poner
a mano tendríamos que ir
cada uno de los estilos
para arreglarlo
pero ahora simplemente
como estamos utilizando
componentes reusables
y es el mismo componente
cuatro veces
con que lo arreglemos una vez
pues justamente
ya lo tenemos arreglado
en todos los sitios
y con esto
ya tenemos componente
reutilizable
totalmente
además
podemos ver que
también están como muy cerca
podríamos
y esto es una buena práctica
que es bastante importante
cuando creamos la UI
cuando creamos nuestros
componentes reutilizables
un error muy común
es el decir
es que claro
te falta un margin bottom
te falta un margin bottom
y entonces
alguien puede venir aquí
y decir margin bottom
¿no?
poner un margin bottom
y esto visualmente
lo arregla
pero esto está mal
¿por qué está mal?
porque este margin bottom
va a afectar
allá donde estés poniendo
este componente
imagínate que hay en algún momento
que quieres este componente
utilizarlo solo
que quieres que solo aparezca uno
¿por qué debería tener un margin bottom?
podrías llegar a utilizar
esta magia
y hacer más estilos aquí
para decirle
cuando esto está al lado de otro igual
entonces haces un margin top
y esto lo arreglaría
pero aún así
tampoco sería necesario
¿no?
también estaríamos todavía
como dependiendo dentro
cuando a lo mejor
esta separación
depende más bien
de dónde lo estén mostrando
entonces normalmente
lo que puedes hacer
más bien
es tener aquí
pues un
vamos a poner un div
vamos a ponerlo en un div
o en un section
o como quieras
y que sea este section
esto vamos a poner
que sea app
por ejemplo
y que sea más
a nivel de aplicación
la que tenga
la separación
flex direction
le vamos a poner
que es una columna
y le vamos a poner
que el cap sea de 16
y ahora
la separación
la tenemos
a nivel
del contenedor
o sea ahora
podemos cambiar
allá donde se esté renderizando
le podemos decir
bueno
¿cómo se tienen que separar?
estos elementos
cuando se muestran
así que esto sería
como la mejor forma
de hacer
como veis
había otro
prop que habíamos dicho
aquí en el isFollowing
que teníamos que utilizar
y todavía no la estamos utilizando
y es que es boleano
aquí
este isFollowing
normalmente es un boleano
no lo estamos usando todavía
pero tampoco se lo estamos pasando
¿cómo le podríamos pasar un boleano?
¿cómo le pasamos una prop
ese parámetro
a este componente?
pues simplemente
le podríamos pasar boleano
podríamos poner
isFollowing
igual
y como no es un string
o sea no serían llaves
porque si le pongo true
esto es la cadena de texto true
no es el valor true
tenemos que hacerlo entre llaves
y entre llaves pondríamos true
y lo mismo si fuese false
si es false
pasaríamos entre llaves
false
y ahora aquí en el Twitter Cards
podríamos en la consola
si miramos
cuál es el valor
de isFollowing
y guardamos los cambios
y miramos aquí
que es lo que está llegando
podemos ver que llega
un true
un false
y dos undefined
¿por qué?
porque aquí
estamos pasando un true
un false
y aquí no le estamos pasando nada
cuando tú no pasas
una prop
e intentas acceder a ella
el valor que vas a tener disponible
es undefined
lo cual a veces
pues te pueden ir bien
por ejemplo
si el isFollowing
si no lo pasas
es undefined
que sería un valor falso
y con eso
pues ya podrías saber
que no tiene
esa información
y a lo mejor
no la quieres mostrar
lo mismo podrías hacerlo
con los usernames
y todo eso
ahora bien
existe una forma
de pasar el true
de una forma más corta
en lugar de tener que pasarle
el igual
llaves true
le puedes pasar también
isFollowing
directamente
sin las llaves
esto lo que va a hacer
es que vayas a pasarle
el valor true
como prop
así que si volvemos a refrescar
fíjate que le vuelve a pasar true
y esto lo vamos a hacer también
con esos que están
como undefined
si ahora pongo así
tenemos un true
un false
y dos true
esta es una forma corta
muchas veces
mucho más recomendable
porque se lee
directamente
y está asociada
a cómo funciona también
en html
así que lo podrías hacer así
no existe
no podéis hacer esto
no existe la forma negada
así
esto no existe
si tenéis que pasarle un false
se lo tenemos que pasar
no existe una forma
negada
de pasarle
un shorthand
y tal
eso
por desgracia
no existe
entonces
ya hemos visto
un booleano
ya empezamos a entender
un poco
las props
pero todavía hay más
imagínate
imagínate
que este
este arroba
por lo que sea
este arroba
no
no trae
no trae esta arroba
porque depende
realmente
fíjate que
habíamos puesto aquí
pero queremos que tenga
esa arroba
dependiendo de cómo
el padre
lo detecte
¿qué podríamos hacer?
hay otro tipo de prop
que le puedes pasar
imagínate que tuviésemos aquí
una constante
que pongamos
add
add
¿no?
add add
¿ves?
que al pasarle el username
lo que hagamos
es que le añade
la arroba
esto
lo podríamos hacer
también
imagínate
lo podemos hacer
aquí dentro
podríamos ponerlo aquí
¿no?
y le añadiríamos eso
y ya está
add add
y entonces
a este username
podríamos add add
user ¿vale?
y esto
sería una función
que lo que hace
es añadir el arroba
pero imagínate
que esta
esta función
en lugar de tenerla
dentro del componente
se la pudiéramos
pasar desde fuera
vamos a poner
format username
format username
y este format username
lo ponemos aquí
y ahora
fíjate que peta
¿por qué peta?
porque format username
es undefined
estoy intentando utilizarlo
y aquí
no le estoy pasando
el format username
si estás intentando
ejecutar una función
que es undefined
es normal que pete
podríamos intentar arreglarlo
por ahora
lo vamos a dejar así
porque lo que vamos a hacer
es pasársela desde aquí
esto es solo para ver
para explicarte
que puedes pasar
también como props
también puedes pasar
funciones
y esto vas a ver
que es súper importante
en React
porque siempre vamos a querer
pasar funciones
o callbacks
para abajo
vamos a querer
que nuestros hijos
los componentes
que estamos renderizando
más abajo
podamos pasarle una función
para que pueda
pues ya sea
actualizar un estado
cambiar algo
hacer un fetching de datos
lo que sea
y esto
es algo aceptable
totalmente aceptable
dentro de las props
podemos decir
el format username
le podemos pasar esta función
se la podríamos pasar aquí
en todos los componentes acá
y ahora
aquí en el format username
lo tendríamos
ahora ya funciona
no da ningún problema
o sea
podemos pasarle
una función
vamos a seguir este hilo
porque hay mucha gente
que le cuesta un montón
el tema de
pero como puedes pasar
una función
y tal
hay mucha gente
que le cuesta
un montón de gente
que le cuesta
esto de pasar una función
hay que tener en cuenta
que las funciones
en javascript
son
son de primera clase
o sea
esto quiere decir
que tú puedes pasar funciones
como parámetro
eso en javascript
hay lenguaje de programación
que no ocurre
pero en javascript
por suerte
sí que es así
así que
igual que lo puedes pasar
con cualquier función
a cualquier función
lo puedes hacer
hacerlo solo con tres
vamos a quitar Elon Musk
que no es colega
y vamos a formatear esto mejor
aquí para acá
pues igual que puedes pasar
como parámetro
una función
en javascript
también lo podemos hacer
exactamente igual
con las props
le estamos pasando
el format username
fíjate que le pasamos
la función directamente
o sea
no pasamos
la ejecución de la función
hay veces que vas a querer
pasar la ejecución de la función
pero la ejecución de la función
lo que va a devolver
es lo que devuelva la función
en este caso
no queremos ejecutarla
lo que queremos es pasarle
esto
lo que queremos es
oye
yo te paso la función
para que la ejecutes tú
desde aquí
y entonces
este format username
que ves aquí
es este que se ejecuta aquí
donde le estamos pasando
el parámetro username
y este username
que le pasamos aquí
de argumento
que a veces será
midudev
feral
por lo que sea
es lo que llegará aquí
entonces
no hace falta
que los nombres
sean los mismos
en este caso
esto es una cosa
que ha pasado así
de hecho
podríamos cambiar este nombre
para que lo veas claro
¿vale?
format
format
format
y ya está
y esto funciona exactamente igual
esto es súper importante
que lo tengas en cuenta
cómo puedes pasar funciones
como parámetros
como props
como props
y espérate
porque hay todavía más
o sea
no solo podemos pasar funciones
sino que también podemos pasar elementos
fíjate
imagínate que este format username
esto de la función
sinceramente a mí
no me ha convencido
esto de poner aquí el format username
no me ha gustado mucho
podríamos hacer otra cosa
en lugar de formatear username
vamos a hacer otra cosa
vamos a
el format username
voy a poner formated username
o sea lo voy a pasar ya formateado
formated username
y esta función que tenemos aquí
en lugar de hacer esto
voy a crear aquí
formated username
y aquí
en lugar de ser una función
vamos a tener
vamos a poner un span
que dentro
tenga el arroba
username
y quitamos
ahora te voy a explicar una cosa
que es súper importante
en React
y que hay gente
que son sinios
que tienen 5 años
10 años
10 no
pero casi
que todavía no entienden
así que muy atento con esto
el format username
lo vamos a pasar como prop
fíjate que lo que tenemos aquí
es un elemento
un elemento de React
entonces ahora
aquí
en lugar de ejecutar la función
voy a evaluar directamente
el elemento
y por props
también
el elemento
y ahora
con esto
que tenemos por aquí
a ver el username
ah espérate
que este username
que lo he puesto aquí directamente
claro
es que esto no va a funcionar tan fácil
porque este username
al final
lo tengo aquí el username
pero bueno
imaginaos que
vamos a poner todos
que son miudes
¿vale?
y lo ponemos así
no es normalmente lo que queremos
pero ahí lo tenemos
fijaos en una cosa
yo estoy creando aquí un elemento
que está envuelto con un span
que pone arroba midwedef
esto se lo estoy pasando como prop
o sea le estoy pasando un elemento
y aquí estoy evaluando este elemento
y estoy renderizándolo
por lo tanto
si vamos aquí a midwedef
vamos a ver que está
el span
este de aquí
¿no?
que tiene el class name
es este span
y dentro
está renderizando
esto de aquí
que es lo que le estábamos pasando por prop
está renderizando el elemento
que le estábamos pasando desde arriba
así que por eso tener span
span midwedef
una cosa que mucha gente falla constantemente
es
¿cuál es la diferencia entonces
entre un componente y un elemento?
¿cuál es la diferencia entre componente y elemento?
y esto es muy básico
es muy importante
y mucha gente todavía le cuesta
básicamente
un componente
podríamos decir que es una factoría de elementos
un componente
sería una función
que al ejecutarla
te devuelve un elemento
eso es súper importante
esa es la diferencia
el componente
es la factoría de los elementos
y el elemento
es lo que renderiza
es importante esto
porque mucha gente dice que
React renderiza componentes
o cosas así ¿no?
no es así
lo que renderiza son los elementos
los componentes
crean elementos
y los elementos
son los que renderiza React
eso es lo que sería ¿vale?
componente
función que devuelve elemento
y React
que es lo que renderiza
el elemento
¿por qué?
porque ahí
lo tenéis
¿no?
o sea
si tú aquí
intentas renderizar
entre llaves
si evalúas
un componente
no funciona
todo lo que veis aquí
todo lo que veis aquí
son elementos
y esto es súper importante
por eso es súper importante
lo que os he enseñado al principio
para que tengáis en cuenta
esa diferencia vital
para que cuando habléis
habléis con propiedad
y sepáis de lo que estáis hablando
porque si no
podéis utilizar mal el léxico
podéis estar diciendo cosas
que no están bien
y no tienen sentido
¿vale?
vamos a dejarlo como estaba antes
vamos a dejar la arroba ahí a mano
lo dejamos aquí
y esto
vamos a dejarlo también como estaba
para dejar la arroba
y ya está
¿vale?
dejamos ahí
quitamos el format
dejamos así
quitamos este método también
que tampoco necesitamos
y ya está
pero ten en cuenta eso
que también podemos renderizar
también podemos renderizar
elementos
podemos pasar un elemento
y ya está
ya tenemos clarísimo
entonces todo el tema
de las props
otra cosa
y un error muy común
tienes que tener en cuenta
con React
es que cuando le pasamos una prop
las props son un estado
o sea
las props deberían ser inmutables
¿qué quiere decir esto?
si yo le paso aquí el username
y digo
ah no
pero el username
como lo estoy utilizando aquí
voy a hacer que username
username
sea igual a
arroba username
por ejemplo
¿no?
esto
esto es una mala práctica
esto es una mala práctica
porque lo que estás haciendo
es modificar la prop
y al modificar la prop
estás
estás cometiendo
un error muy bestia
básicamente estás como
evitando que React
tenga la seguridad
de lo que está renderizando
lo que tienes que hacer
en lugar de
modificar la prop
en lugar de modificar la prop
lo que tienes que hacer
a lo mejor es crear
una constante
¿vale?
creas una constante
con otro nombre
username
con lo que tú quieras
que no se llame igual que la prop
y ya está
nunca jamás
modifiques
ni mutes
una prop
¿por qué?
como prop
ya veis que también
se le podrían pasar
arrays
podríamos pasarle un array
aquí
por ejemplo
podríamos tener numbers
¿no?
que sea
un, dos, tres
y esto se lo pasamos a todos
¿no?
imaginemos que
estos son
como las veces
que queremos mostrar algo
numbers
le podríamos pasar un array
el array
llegaría por aquí
numbers
y alguien
puede decir
ah pues numbers
punto push
cuatro
pues ojo con esto
¿vale?
porque esto sería
mutar una prop
las props deben ser
inmutables
porque si no
al final lo que
estás haciendo
es que
el, digamos
que la fuente de la verdad
la estás
la estás como
modificando
y no deberías hacer eso
siempre tienes que crear
una nueva
un nuevo array
lo que sea
a la hora de trabajar
con las props
¿ok?
así que nada de
modificarlas
muy bien
vamos a quitar el numbers
este que vamos a dejar
por aquí
luego más adelante
veremos cómo renderizar
arrays
así que no os preocupéis
y solo queda
una cosa más
para terminar
con las props
bueno, dos cosas más
que son bastante
importantes
y bastante interesantes
uno
como pasa con html
por ejemplo
cuando ponemos el button
fíjate que el button
para indicarle
qué texto
tiene que renderizar
lo que hacemos
es envolver el texto
¿no?
estamos envolviendo
el texto button
con el elemento
botón
esto sería el texto
del botón
pero también
lo que tenemos aquí
este aside
lo que está haciendo
es envolver un botón
que a su vez
envuelve un texto
pues a esto
se le llamaría
children
o sea
este elemento button
está envolviendo
seguir
y esto
lo deberíamos llamar
como children
es como son los hijos
de ese elemento
¿no?
lo que envuelve
lo que envuelve
ese elemento
es sus hijos
esto mismo
también lo puedo utilizar
a nivel de componentes
por ejemplo
imagínate que en lugar
de pasarle el nombre
como una prop así
vamos a hacer
que el nombre
envolvamos
nuestro componente
con el nombre
así que
vamos a utilizar
solo dos
para no cambiarlos todos
vamos a quitar
Pablo Hernández
al final el nombre
es bastante grande
¿no?
pues igual
puede ser lo más
Álvaro
vamos a poner esto
¿no?
pam pam pam
ya tenemos esto
vale
ahora ¿qué pasa?
¿cómo puedo recuperar
también este texto?
¿cómo puedo recuperar
el Pablo Hernández?
si vuelvo aquí
claro
ahora no le estoy poniendo
un nombre a esta prop
no sé cómo se llama
exactamente esta prop
si vuelvo aquí
fíjate
ha desaparecido el nombre
¿y cómo puedo recuperar
este nombre?
pues existe una prop especial
que se llama
children
que básicamente
el children
es todo lo que envuelve
ahora en este caso
es esta cadena de texto
que es Miguel Ángel Durán
si guardamos aquí los cambios
pues deberíamos ver
ah
espérate
children
lo estamos recuperando
pero también tenemos
que utilizarlo
donde estamos utilizando
aquí el name
ahora no utilizamos el name
vamos a utilizar el children
ahora podemos quitar el name
de aquí
porque utilizamos el children
y si guardamos los cambios
pues fíjate
vale
ten en cuenta que
en children
ahora estamos renderizando
un texto
pero en children
puedes tener cualquier cosa
o sea
aquí en children
podrías tener un h1
o podrías tener otros componentes
esto es justamente
la componentización
o sea
nuestra UI
debe ser componentizable
y por lo tanto
un children
puede tener
una cadena de texto
o puedes poner un elemento h1
este elemento h1
fíjate
es lo que se va a renderizar
justamente dentro de esto
y aquí ahora
si miramos
el elemento este
vamos a ver
que tiene un h1
de hecho
podríamos quitar
este strong
que habíamos hecho aquí
y simplemente decir
bueno
pues esto que sea el h1
quitamos el strong
y eso que lo haga ahí
y ya está
o podríamos dejar
que en lugar de h1
pues podríamos poner aquí un strong
¿cuándo sería interesante esto?
¿cuándo utilizar uno
y cuándo utilizar el otro?
esto depende muchísimo
de qué es lo que
cómo quieres componer
la interfaz del usuario
porque a veces
quieres que la interfaz
del usuario
puedas cambiar
desde fuera
puedas cambiar
por ejemplo
si esto es un strong
si es un h1
un h4
un párrafo
lo que tú quieras
o puedas meter
incluso más cosas aquí
más cosas
que al guardarlas
también se rendericen
esto lo que te permite
es que sería un campo libre
es un campo
en el que básicamente
estás haciendo
que ese componente
sea todavía más reutilizable
así que normalmente
cuando es lo más importante
de tu componente
que además
quieres que sea muy extensible
normalmente es que sea un children
fíjate que esto de children
es algo que has usado
toda tu vida
porque en html
lo has usado constantemente
esto sería
el children de aside
y fíjate
aquí hay otros elementos
uno detrás del otro
o sea
que al final
lo importante
es que puedas
puedas utilizarlo
como utilizas en tu html
cuando quieres
empezar a anidar información
y aquí podrías tener
un componente
dentro de otro
por ejemplo
podrías ponerlo
de twitterfollowcard
podríamos crear aquí
un twitterfollowcard
con el username
por ejemplo
de ahora no me acuerdo
de otro
pero yo que sé
santi
toby
no sé si existirá
vale
twitter
obviamente ahora
va a quedar mal
pero ya ves
que puedes crear
un componente
dentro de otro componente
o sea
esto lo podrías hacer también
no es visualmente
lo que queremos
pero lo puedes hacer
que a veces
sí que puede ser útil
por ejemplo
cuando creas
un árbol
a veces cuando creamos árboles
y cosas así
por ahora
lo voy a dejar
como lo tenía
con la cadena de texto
porque creo que tiene más sentido
vale
con la cadena de texto
y así
aquí en la cadena de texto
vamos a poner que esto sea un strong
como estaba
en este caso
creo que el children
tiene sentido
que sea más bien
que sea así
que no sea con un h1
y todo
se debusa el parámetro
con nombre reservado
children
siempre se tiene que utilizar
children
cuando quieres ceder a este
siempre te hay que utilizar
el children
y no puedes utilizar
el children de otra forma
o sea si tú pones aquí
children
pones hola
vale
ves
o sea te lo ignora
aunque vaya vacío
aunque vaya vacío
el children
no lo puedes
no lo puedes
si viene vacío
sí que lo utiliza
fíjate
interesante
si es undefined
entonces utiliza este
igualmente
no utilicéis nunca children
como prop normal
el children
utilizarla siempre
para esto
nunca lo utilicéis
como children normal
nunca lo utilicéis
como children normal
y para usar varios children
pues es que puedes utilizar
aquí tantos children
como quieras
ves
Miguel Duran
Miguel Duran
puedes utilizar
tantos children
como quieras
a ver
children solo puede tener uno
solo puede tener uno
un elemento
que es el que envuelve
los demás
o sea aquí
puedes tener
un h1
y aquí un h2
hola
sabes
o sea puedes poner aquí
tantos elementos como quieras
y se van a renderizar
pero fíjate
que al acceder
solo tienes un children
o sea
solo tienes un children
que es el que
tiene todos los elementos
dentro
o sea children
uno
dentro de children
todos los elementos
que hayas
vale
vamos a dejar esto
con el
como estaba
ahora bien
imagínate
y esto también es un tema
muy típico
que no nos viene
alguna información
por ejemplo
aquí tengo el username
imagínate
que no me viene
aquí no me viene el username
no me viene el username
pues ya lo hemos liado
porque fíjate
este username
me queda aquí fatal
me queda horrible
a ver
una cosa que puedes hacer
es utilizar
los valores por defecto
de los parámetros
por ejemplo
en username
podríamos decirle
bueno
cuando no viene el username
vamos a darle un valor por defecto
que va a ser
unknown
para que sea
pues no sé
desconocido
al menos que aparezca así
vamos a evitar
que aparezca
de una mala forma
mira ha salido esta imagen
que ya lo tiene
lo importante es que sepas
que una vez que tienes
props
si no las informas
pero quieres que tenga
un valor por defecto
la forma de hacerlo
es utilizando
los valores por defecto
de los parámetros
nombrados
de las funciones
de javascript
esto no deja de ser javascript
y cuando quieres tener
un valor por defecto
pones igual
y le pones aquí
el valor por defecto
puede ser números
puede ser un string
normalmente vas a intentar
obviamente
obviamente que sean
del mismo nombre
luego los children
que hemos dicho antes
solo existe uno
y no hay children
nombrados
al final para los children
nombrados
podéis utilizar las props
o sea no puedes tener aquí
como en otros sitios
que le llamáis
slot
no sé qué
no sé cuánto
en este caso
no se pueden utilizar así
solo tienes un children
y ya lo tienes
vale
y finalmente
otra cosa
para que lo tengas en cuenta
con el tema de las props
es como le podéis pasar
toda la información
como un objeto
yo os digo que esto
no es normalmente
una buena opción
pero a veces
en este
por ejemplo
aquí le estamos pasando
las props por separado
pero también le podríamos pasar
todas las props juntas
y para pasarle todas las props juntas
imagínate que tuviésemos
esto en un objeto
podríamos tener aquí
el midudev
y tenemos
isfollowing
tenemos como true
username
midudev
y tenemos aquí
feralp
también
que es
isfollowing
false
y el username
es feralp
vale
ok
perfecto
imagínate que le quieres pasar
todas estas props
de golpe
y no quieres pasarlas
ahí a mano
una a una
porque son muchas props
pues lo que puedes hacer
es poner llaves
y pones
punto punto punto
midudev
esto lo que va a hacer
es pasar
todas las propiedades
del objeto
como props
a este componente
y lo mismo
aquí
en lugar de poner esto
podrías hacer
llaves
punto punto punto
feralp
y esto funciona
exactamente igual
lo que está haciendo
es
esto es el rest operator
el rest operator
lo que está diciéndole es
pásale cada una
de las propiedades
de este objeto
como si fuese
una prop
para mi componente
twitter follow card
y eso es justamente
lo que está haciendo
ahora bien
esto
es medio
mala práctica
a veces puede tener sentido
porque el objeto
es muy grande
o lo que sea
pero normalmente esto
uno
estás enviando muchas veces
información que no es necesaria
dos
esto
puede ser
que haga que el componente
por temas de optimización
se renderice
o se re renderice
sin necesidad
esto lo veremos más adelante
cuando sepamos que es el estado
y tres
esto también puede hacer
que sea más complejo
entender
qué información
le está llegando
al componente
a veces tiene sentido
pero no empecéis a hacer esto
en todos los sitios
muchas veces es mucho mejor
ser bastante declarativo
y hacerlo
de esta forma
¿no?
vale
ahora
ahora bien
tenemos este componente
que no está mal
pero todavía nos queda
esto de
oye
¿qué pasa si le doy a seguir?
me gustaría que este botón
cuando le doy a seguir
a ver el button
que lo tenemos por aquí
vamos a poner el cursor
vamos a poner que sea pointer
vamos a ponerle un hover
¿vale?
para que quede un poquito mejor
vamos a ponerle hover
vamos a cambiar esto
bueno
es un poco polémico
un poco raro ese color
vamos a utilizar mejor este
¿vale?
vamos a poner una transition
is
all
bueno
debe de ser solo background color
pero bueno
background color
y ya está
vale
vamos a poner solo este
tampoco es que se vea mucho
no sé si ponerle un color muy bestia
para que lo veáis mejor
vamos a ponerle ese color
para que lo veáis bien
para que estamos haciendo
vale
ya estamos haciendo el hover
pero ahora lo que quiero
es realmente como funciona esto
y es que estamos haciendo este componente
quiero que cuando le de a seguir
fíjate que si le doy aquí a seguir
¿no?
esto cambia a siguiendo
y además luego cambia
lo de dejar de seguir y tal
bueno
lo podemos intentar hacer
¿no?
para intentar hacer exactamente el mismo
aquí sale una modal
pero bueno
cuando le das a seguir
se cambia a siguiendo
por ahora vamos a hacer eso
esto es justamente lo que queremos
esto como funciona
como está haciendo
como está haciendo twitter esto
realmente
esto lo está haciendo
en base a un estado
¿qué es un estado?
esto es súper interesante
súper vital
y súper importante
y es que esto
imagínate que entras a una habitación
imagina que tienes un interruptor
¿cómo ves visualmente tu habitación?
puedes tener la luz
encendida
o apagada
y ese es el estado
en el que se encuentran
las luces de tu habitación
pueden estar encendidas o apagadas
y dependiendo
de si están encendidas o apagadas
tu habitación
visualmente
se va a ver distinto
este concepto
es exactamente el mismo
en los componentes
y es
básico
y es vital
para que podamos hacer
que nuestros componentes
cobren vida
¿cómo está haciendo twitter
justamente esto?
pues lo está haciendo
con un estado
un estado
que le está diciendo
si el usuario
está siguiendo o no
y dependiendo
de cómo cambia este estado
vamos a cambiar
también la interfaz
necesitamos que la interfaz
responda
a los cambios
que tiene el usuario
así que vamos a ver
justamente
cómo podemos hacer esto
vamos a darle
cuando tenemos aquí
el siguiendo
que nos ponemos encima
y que pone aquí
dejar de seguir
vamos a hacer esto
exactamente
también en nuestro componente
por ahora
por ahora
lo que podríamos hacer
con el isFollowing
para asegurarnos
que podemos tener
como tanto que se vea
como que no se vea
ya tenemos una prop
que nos dice
si le seguimos
o si no lo seguimos
y esto pues debería
debería cambiar
¿no?
así que vamos a volver aquí
y en el isFollowing
vamos a pasar
este isFollowing
este es true
y este es false
¿verdad?
vamos a hacer algo
vamos a poner aquí
dentro de este
vamos a cambiar
los estilos
para cambiar los estilos
vamos a aprender
una cosa
que es muy interesante
que es el renderizado
condicional
porque necesitamos
dependiendo de una condición
que renderice
una cosa u otra
por ejemplo
el texto
el texto
va a cambiar
si estamos siguiendo
a la persona
vamos a poner
que es siguiendo
y si no
vamos a poner
que es seguir
esto es una ternaria
que es como hacer
un if
en cortito
y mucho más funcional
mucho más declarativo
y mucho más fácil
entonces este texto
de seguir
va a cambiar
dependiendo de si
lo estamos siguiendo
o no lo estamos siguiendo
así que esto
vamos a evaluar
el texto
ahora ya vemos
que tenemos uno
siguiendo
y el otro
que no es siguiendo
también
podríamos cambiar
incluso los colores
o sea
podríamos tener estilos
diferentes
entre si estamos siguiendo
o no estamos siguiendo
para eso
aquí
podríamos decir
el button
podríamos decirle
si estamos siguiendo
vamos a decirle
que el
follow card button
este va a tener
la clase
button
vamos a ponerlo mejor
aquí
y además
la clase
following
que esto
en realidad
lo vamos a hacer
así
vamos a decirle
is following
como un estado
vale
si está siguiendo
vamos a tener
el css
follow card button
y además
la clase
is following
y si no
el botón normal
y este button
class name
se lo podemos pasar aquí
esto que estamos viendo
ya es la clave
para hacer que react
sea dinámico
para que vaya respondiendo
a todos los cambios
que vamos a hacer
vamos a hacer que en el
button class name
cuando esto
por lo que sea
ya está siguiendo
vamos a poner
is following
vamos a ponerle
un borde
de un pixel rojo
con un background
claro es que me gustaría
ponerle un rojo
clarito
pero no sé por qué
no me pone
bueno
lo vamos a dejar
solo para que
lo veamos más o menos
claro
vale
siguiendo
lo vamos a poner rojo
bueno
vamos a dejarlo así
vamos a dejarlo
following
button
vale
vamos a dejarlo con el
vamos a dejarlo con eso
rojo
y ya está
y aquí vamos a poner
el borde
negro
para que siempre tenga uno
bueno al menos así
pues va cambiando
de hecho el following
este lo podríamos cambiar
para que el hover
ahora sí
sea rojo
ahora sí que lo vamos a hacer
aquí rojo
y ahora sí
lo vamos a ver
bastante map
este vale
background
y este transition
vamos a hacer que esté aquí
para que esté
vale ya vemos uno
siguiendo y seguir
siguiendo y seguir
siguiendo y seguir
vale
ya los estilos
lo tenemos todo
pero ahora lo que nos falta
es dotarlo de vida
lo que tenemos que decirle
es vale
cuando hacemos un click
cuando hacemos un click
queremos realmente
que cambie el color
o sea queremos que cambie el texto
que cambie el color
queremos que cambie todo
vale
como podemos hacer esto
podemos hacerlo
vamos a hacer aquí
en el index app
vamos a quitar esta prop
porque en lugar de ser una prop
vamos a hacer que sea un estado
necesitamos que tenga
que sea el propio componente
el que decida
cuando
tiene que mostrar
uno u otro
vale
entonces
como creamos un estado
como podemos tener
esa memoria
como podemos hacer
que el componente diga
oye
ahora estoy haciendo esto
lo otro
como lo que habíamos hecho
en el primer ejemplo
de todos con html
para eso
tenemos que importar
una utilidad
que se llama
use state
de react
le he llamado utilidad
pero en realidad
se le llaman hooks
y esto
los hooks
son la vida
en react
los hooks
lo que te permiten
es añadir
cierta funcionalidad
a los componentes
de react
o poder ejecutar
código arbitrario
cuando ocurre
ciertas cosas
en tus componentes
o tener
algún tipo
de funcionalidad
de mejorar
el tanto
el rendimiento
de tus componentes
o sea
los hooks
no dejan de ser
como unas utilidades
que te permite
react
para dotar
todavía
de más funcionalidad
de tus componentes
en diferentes puntos
del renderizado
en este caso
el use state
para que nos va a servir
el use state
nos va a servir
para poder guardar
una variable
que nos diga
si estamos
o no estamos
siguiendo
a ese usuario
así que
vamos a crear
una constante
y para crear
un estado
lo que hacemos
es un use state
y tenemos que decirle
cuál es el valor
por defecto
cómo es el valor
inicial
de nuestro estado
así que
imagina tu habitación
cuando nadie
ha encendido las luces
el estado inicial
sería false
todavía nadie
ha encendido la luz
en el state
esto nos devuelve
un array
un array
de dos posiciones
en la primera posición
lo que tenemos
es el valor
del estado
el valor
del estado
y en la segunda posición
lo que tenemos
es una función
que nos va a permitir
actualizar el estado
para la nueva versión
por ejemplo
en la primera versión
podríamos saber
si nuestra habitación
tiene la luz
encendida o no
y en la segunda posición
lo que tendríamos
es el interruptor
el interruptor
que nos permitiría
cambiar
si la luz
está encendida o no
ahora
esto es muy
muy muy muy largo
un poquito complicado
de escribir
¿no?
¿por qué?
porque estamos escribiendo
tres líneas de código
para un estado
por suerte
javascript
tiene una cosa
se llama desestructuración
donde podemos
en una sola línea
decirle
vale
esta constante
viene de un array
o sea
este useState
me está devolviendo
un array
que la primera posición
tiene el valor
y la segunda posición
tiene la forma
de actualizar
y con esto
estas líneas
serían exactamente
las mismas
¿vale?
tanto las de arriba
¿vale?
la primera línea
esta
y estas tres líneas
son equivalentes
obviamente
la de arriba
se entiende mucho mejor
así que
nos vamos a quedar con esto
ahora
este isFollowing
ya lo podemos utilizar
directamente
pero en lugar de utilizar
el de la prop
vamos a utilizar
el del estado
y solo nos faltaría
este set isFollowing
que es la forma
de actualizar
el estado
¿cómo podemos actualizar
el estado?
bueno
pues tendríamos que buscar
¿dónde tenemos nuestro botón?
este botón de seguir
pues este botón de seguir
que lo tenemos aquí
deberíamos decir
un addEventListener
pero ya hemos dicho
que en React
es bastante declarativo
o sea
no le vamos a decir
addEventListener
no
le declaramos
lo que queremos hacer
así que vamos a decirle
onClick
me ejecutas
una función
y la función
que me tienes que ejecutar
podrías poner aquí
una arrow function
¿no?
directamente
vamos a poner aquí
handleClick
y esta función
handleClick
la vamos a crear aquí
handleClick
y esta función
con una arrow function
vamos a ejecutar
el setIsFollowing
y vamos a hacer
que le dé la vuelta
vamos a decir
vale
si el valor que teníais
following era true
ahora es false
y si es false
ahora es true
así que para eso
hacemos esto
cuando hagamos click
en el botón
vamos a cambiar
el estado
vamos a cambiar
ese interruptor
y vamos a decirle
vale
pues ahora decimos
setIsFollowing
vale
pues le das la vuelta
vamos a pasar
de true a false
o de false a true
dependiendo del valor
que tú veas
si guardamos los cambios
ahora
y le damos un click
ahora vemos
como nos está
cambiando
exactamente
lo que queremos
fíjate además
de esto es súper importante
fíjate en algo
el estado
está separado
está separado
del de cada componente
este estado
es interno
a esto se le llama
un estado
interno
interno porque está
a nivel de cada uno
de los elementos
que crea el componente
no está compartido
entre elementos
o sea
puedes seguir a
midudev
pero esto no hace
que automáticamente
sigas a pablo
o sea
están separados
y fíjate
que esto lo hemos logrado
en apenas
35 líneas de código
te reto
que hagas esto
con javascript
y a ver cómo te quedaría
que lo puedas hacer
lo puedes hacer
pero verás
que empieza a hacerse
bastante más complejo
tanto por los
atblis
en el que habíamos visto
al principio
dónde guardas el estado
dónde guardas la información
y en este caso
fíjate
te acuerdas
en el primer ejemplo
que habíamos visto
que era muy declarativo
o sea muy imperativo
te lo voy a enseñar
ahora un momento
para que te acuerdes
para que lo veamos
vale
mira
acuérdate de este ejemplo
que te decía
cómo era ser imperativo
mira
habíamos hecho esto
y fíjate
que era ser imperativo
era dar instrucciones
de lo que tenía que hacer
recupera este botón
haz clic aquí
recupera esta idea
si esto contiene tal
borra esto
cambia el texto
son las instrucciones
paso a paso
de lo que tiene que hacer
pero con React
lo que hemos conseguido
es algo totalmente diferente
si tú lees este código
no le estamos diciendo
qué es lo que tenemos que hacer
le estamos declarando
lo que esperamos
lo que estamos diciendo es
tengo un estado
que es following
y tal
bueno
que cuando estoy siguiendo
me gustaría ver esto
siguiendo
y cuando esto
no lo sigo
debe ser así
el botón class
cuando estoy siguiendo
es esto
es así
y es así
pero no estoy diciendo
este botón
tienes que hacerlo así
se lo estoy declarando
cuando hagas un clic
haz esto
y esto es lo que tienes que renderizar
y esto
todo esto
se va a adaptar
a los cambios
que va a tener
nuestro estado
lo está haciendo
de forma declarativa
otro ejemplo más
para que lo veas muy claro
para que te hagas a la idea
exactamente
de qué es declarativo
versus imperativo
tienes
imperativo es
imagínate que quieres
ir a por el pan
imperativo sería
vístete
toma las llaves
baja las escaleras
anda hasta la panadería
compra el pan
dale el dinero
vuelve a casa
esas son las instrucciones
precisas
de lo que tienes que hacer
dónde lo tienes que hacer
qué acción tienes que hacer
en cambio declarativo
quiero
quiero pan
quiero pan
o sea le estoy dando ya
el resultado final
quiero pan
si tengo dinero
lo conseguiré
si no tengo dinero
no lo conseguiré
pero quiero pan
¿sabes?
esa sería un poco
la diferencia
entre imperativo
y declarativo
y aquí
está pasando exactamente eso
fíjate que no le estoy diciendo
escucha un evento
que cuando hagas esto
que no sé qué
que no sé cuánto
lo estamos declarando
eso sería totalmente
para mí
o sea que si es
que si para mí
el código declarativo
es mejor
el código declarativo
es mucho mejor
es mucho mejor
el código declarativo
es muchísimo mejor
¿vale?
o sea no hay ningún tipo
de dudas siempre
por eso la programación funcional
que está basada
en un código declarativo
normalmente
es más fácil de entender
es más fácil de cuidar
el código imperativo
es demasiado complicado
hemos hecho toda nuestra vida
el código imperativo
o sea tampoco es que esté mal
no es que esté mal
pero especialmente
a la hora de hacer
interfaces de usuario
nos puede costar mucho más
porque no
porque imagínate
hacer los cambios
de forma imperativa
es que es mucho más difícil
fíjate que aquí
los cambios que hacemos
son
son declarativos
es que aquí
este
por ejemplo
este texto
este texto
no está cambiando
dependiendo
o sea
lo estamos declarando
simplemente
la UI aquí está
declarada
no estamos
diciéndole paso a paso
todo lo que tiene que hacer
para actualizar la UI
¿no?
o sea que es bastante importante
por eso
ahora
hay otra cosa
mucho más importante
de todo lo que hemos hecho
y es la magia de React
porque alguien dirá
oye
vale
es declarativo
pero ¿qué está pasando aquí?
¿cómo está funcionando esto?
que tú le das aquí
y esto se vuelve
a renderizar automáticamente
esta es la clave
de donde viene el nombre
de React
de reaccionar
¿no?
de la reactividad
que tiene React
cuando el estado cambia
cada vez que cambiamos el estado
lo que hace React
es detectar el cambio de estado
y reflejar los cambios
en la UI
pero viene otro de los conceptos
mucho más importantes
famosos
y también polémicos
de React
que es el virtual DOM
y es que fíjate
cuando hemos cambiado esto
normalmente
si tuvieses un código
de imperativo
tendrías que indicarle
exactamente
cuál es la parte
del DOM
que tiene que cambiar
recuerda este código
mira
cuando hacíamos este código
fíjate que
mira
lo vamos a poner
un poco más arriba
fíjate en este código
que yo le decía
exactamente
cuál era
la parte
que tenía que cambiar
con el texto
no, no
tienes que cambiar
esto en concreto
¿por qué?
porque si no
lo que íbamos a hacer
es
podríamos cambiar
todo el HTML
re-renderizarlo
y tal
pero es que en React
no ocurre esto
y ahora vas a ver
en marcha
lo que es
el DOM virtual
¿qué es el DOM virtual?
y es uno de los conceptos
más interesantes
y más importantes
de React
y ahora más polémico
vale
cuando tú haces esto
y le das a seguir
y cambia
y vuelve a renderizar
si miramos las herramientas
de desarrollo
fíjate en un detalle
¿ves algo raro?
bueno
lo que está pasando aquí
es que
en lugar de
volver a renderizar
todo el artículo
lo que está haciendo React
es solo actualizar
aquello que cambia
de una forma quirúrgica
casi como si fuese
un doctor
un cirujano
que va ahí
dice con bisturí
dice
lo único que ha cambiado
y que tengo que volver
a renderizar
fíjate
es aquello que parpadea
y lo único que parpadea
es esto
siguiendo
y la clase
por lo tanto
lo único que puedes ver
que está cambiando
es eso
esto
hacerlo normalmente
con JavaScript
vanilla
sin ningún tipo de dependencias
es algo muy complicado
muy difícil
y tendrías que utilizar
mucho código imperativo
pero esto lo estamos haciendo
de forma declarativa
el hecho de decirle
no, no
es que solo quiero
que cambies
esta parte de aquí
no está cambiando
nada más
solo la parte
que ha detectado
que cambia
¿cómo hace esto?
React lo que hace
es que le hace una foto
a todo lo que renderiza
hace una foto
y dice
vale
esto es lo que ha renderizado
la primera vez
o sea
esto es lo que ha renderizado
esto lo tengo renderizado
recupera esto
lo tiene aquí
tiene esto por aquí
dice vale
pues lo que ha renderizado
es esto de aquí
esto es lo que ha renderizado
esto lo crea
como un árbol de elementos
donde lo va separando
y dice vale
cuál es la diferencia
entre esto que he renderizado
antes
y lo que quiero renderizar
ahora
encuentra las diferencias
y dice vale
esto es lo único
que ha cambiado
voy a hacer las actualizaciones
mínimas
para reflejar estos cambios
en la UI
así que así es como funciona
React a la hora de volver
a renderizar el componente
hay otra forma
en la que puede ser
que renderice el componente
una es que se actualiza
el estado interno
cada vez que se actualiza
el estado interno
de un componente
React entiende
que tiene que volver
a renderizar el componente
para reflejar los cambios
pero solo aquellas partes
que han cambiado
otra forma
en la que puede
renderizarse un componente
es cuando un componente
padre
se vuelve a renderizar
y entonces propaga
los cambios hacia abajo
mira
imagínate
que tenemos aquí
a nivel de app
que es todo lo que tenemos
en toda la aplicación
¿no?
vamos a poner aquí
un estado
vamos a recuperar
el useState
y vamos a poner aquí
en el useState
vamos a poner
el name
vamos a poner que el nombre
por defecto
es midodef
pero vamos a poner un botón
vamos a poner aquí un botón
que cada vez que
lo pulsamos
cambio el nombre
cambio el nombre
así que hacemos un onclick
hemos visto antes
como podíamos pasarle
al onclick una función
lo hemos visto aquí
¿no?
como creando una función
tenéis otra forma de hacerlo
que sería crear
la arrow function
directamente aquí
aquí cada uno
que lo haga como quiera
normalmente es mucha mejor opción
que creéis una función
va a ser mucho
a mí me gusta más
tener lo renderizado
mucho más
simple
fácil
y todo lo que es código
arriba
pero bueno
a veces hay gente
que lo puede hacer
en línea
aquí en el onclick
pues puedes hacer
vale
pues cuando le haga clic
voy a cambiar el nombre
y como useState
voy a poner otro nombre
por ejemplo
Pedro Miquel
vamos a crear
Pedro Miquel
¿ok?
guardamos los cambios
ya tengo aquí
el cambio de nombre
este nombre
se lo vamos a pasar
aquí
en lugar del de
midodef
lo vamos a pasar aquí
¿qué pasa?
cuando se renderiza
al principio
valor inicial
es midodef
pero cuando le dé
un clic aquí
no sé por qué
me ha aparecido este
no sé si es que ha apretado
el servicio
bueno
cuando le dé aquí
debería cambiar este nombre
de midodef
pues no lo hace
vamos a ver
ay
es que he puesto useState
perdón
perdón
esto es setName
vale
esto no es así
ya hemos visto aquí
que el useState
devuelve un array
de dos posiciones
entonces la primera posición
es el valor del nombre
y la segunda posición
la forma de actualizarlo
ahí está
entonces
primera posición
valor del estado
segunda posición
cómo actualizar el estado
y tenemos que utilizar
la forma de actualizar el estado
lo tenemos aquí
y ya está
vale
guardamos los cambios
y ahora cuando le dé
a cambiar nombre
ves
ha cambiado a Pedro Mitchell
y ha cambiado la imagen también
cómo funciona esto
lo que está pasando
es que
aquí
si ponemos un console.log
vamos a poner aquí
render
with name
y vamos a poner ahí el nombre
vamos a poner que nombre
ha renderizado
si yo abro la herramienta
de desarrollo
fíjate
nada más entrar
este console.log
se ha renderizado
este componente app
al menos una vez
con el nombre
midodef
se renderiza
y ya está
ahora
esta app
tiene un estado
que lo vamos a cambiar
vamos a cambiar
el midodef
por el de Pedro Mitchell
le voy a dar
¿qué ha pasado aquí?
ha vuelto a renderizarse la app
pero con el nombre
Pedro Mitchell
como se ha renderizado la app
vuelve a renderizarse
todos los componentes
que hay debajo
se están renderizando
todos los componentes
que hay debajo
si ponemos aquí
en twitter follow card
vamos a poner aquí
console.log
render
bueno con esto
vamos a poner aquí
twitter follow card
render with
username
y vamos a poner aquí
el username
y vamos a ver
cómo se propagan los cambios
¿vale?
esta es la propagación
de cambios
entonces cuando estamos
actualizando un componente
que está en un nivel superior
propaga los cambios
hacia abajo
porque imagínate
que no lo hiciese
imagínate que no lo hiciese
claro
lo que haría
es que nuestra interfaz
estaría mostrando
información incorrecta
necesitamos que los cambios
se propaguen
entonces imagínate
que tienes un árbol
una vez que pasa
un cambio
en la rama
cerca del tronco
ahí tiene que propagarse
hasta el final de la rama
para que esos cambios
lleguen al revés
pero siempre se propagan
hacia abajo
no se van a propagar
hacia arriba
se propagan
hacia abajo
¿vale?
así que eso es lo que necesitamos
para que se vuelva a renderizar
entonces
ya tenemos aquí
cómo se propaga
vamos a volver a reiniciar
fíjate
la primera vez
nada más entrar
la aplicación se renderiza
con el nombre
Midudev
se renderizan los dos componentes
el de Midudev
y el de Feralp
que los tenemos aquí
pero cuando cambio el nombre
ojo
y esto es muy importante
¿por qué?
porque
hemos cambiado
estado de app
y se han vuelto a actualizar
se han vuelto a actualizar
tanto el componente de arriba
como el de abajo
fíjate que se ha actualizado
el de Pedro Mitchell
para reflejar los cambios
pero también el de Feralp
y esto es algo también
que tienes que tener
muy en cuenta
cuando se vuelva a renderizar
un componente padre
también se va a renderizar
el hijo
independientemente
que sus props
hayan cambiado
por ejemplo
aquí Feralp
no han cambiado sus props
no han cambiado
pero se ha vuelto
a renderizar igualmente
y esto es muy importante
porque hay gente que se cree
que no se renderiza
hay gente que se cree
que no pasa absolutamente nada
para que entendamos
exactamente esto
mira
vamos a ver esto
con un croquis
porque sé que esto es una cosa
que cuesta mucho
y esto es muy importante
muy muy importante
así que
oye esto es nuevo
dan cambio algunas cosas
vale
imagínate
yo tengo aquí
la app
esta es mi aplicación
¿no?
y la aplicación
pues tiene
como hemos visto
tenemos aquí
pues un componente
vamos a ponerle
componente 1
componente 1
componente 1
componente 2
y componente 3
esto está
esto está pillado por aquí
esto es aquí
esto aquí
y esto
o sea
esto si quieres
mira vamos a hacer
el eje exactamente
como lo tenemos aquí
que este es el twitter follow card
¿no?
tenemos un twitter follow card
vamos a ponerlo más pequeño
twitter follow card
y otro twitter follow card
el otro que se llaman igual
pues mira
es lo que hay
y aquí tenemos estos dos componentes
estos dos componentes
cuando la app
se actualiza
vamos a poner
que se actualiza
y se pone en rojo
¿no?
o sea
hay una actualización de estado
¿qué pasa?
que entonces esta actualización
tiene que ir aquí
para actualizarse
y también va aquí
y esto pasa
independientemente
de que las props
hayan cambiado
imagínate que aquí
pues se le está pasando
este es midudev
y ahora aquí se está pasando
venga
imagínate
cambio de estado
vale
pues se cambia esto otra vez de estado
y ahora este midudev
cambia
y cambia a
pepito
vale
pues pepito
le llega a twitter follow card
y esto
que hace
ping
se actualiza
pero es que
este
aunque feral
haya quedado
exactamente igual
esto
por defecto
se vuelve a ejecutar
se vuelve a renderizar
aunque renderice lo mismo
la única diferencia
es que
aunque renderice lo mismo
aunque el código
se ejecuta
igual
lo que pasa
es que no renderiza nada
en el DOM
son dos cosas distintas
que tienes que diferenciar
y lo vas a ver aquí
cuando tú actualizas
y estamos aquí
en los elementos
fíjate
que hay que diferenciar esto
muy importante
y tenerlo clarísimo
tengo aquí todos los elementos
vale
si yo cambio el nombre
vamos a ver
como el twitter info este
si que se actualiza
pero solo las partes que cambian
pero por más que le doy
en feral
no veo que el DOM
o sea
el html que se renderiza
no veo que cambie
pero el hecho de que no cambie aquí el DOM
no significa
que en la consola
no se haya vuelto a renderizar
y aquí podéis ver
como se está renderizando
con el nombre de Pedro Mitchell
aquí lo tenéis
como feral se ha renderizado
esto significa
que este código
se ejecuta
se vuelve a renderizar el componente
aunque luego en el html
gracias a que react
ve que
pero es que vas a intentar renderizar lo mismo
entonces react lo que dice es
bueno
pues entonces
no hace falta
que lleve esos cambios
al DOM
así que es muy importante
que entendáis
que cada vez
que nuestra aplicación
cambia su estado
y aunque hay veces
por ejemplo aquí
no cambia el estado de pepito
pero también se renderiza
el de abajo
y aquí en feralp
por ejemplo
pues a lo mejor este sí que cambia
cambia
pues este
también renderiza
¿vale?
eso sería lo que tenéis que tener en cuenta
cómo se propagan los cambios
pero sobreescribe el DOM
con la misma información
no
lo deja intacto
porque justamente dice
vale
no hace falta
no hace falta
que despliegue
que vuelva con estos cambios
¿vale?
¿cómo pasar props de hijo a padre?
pero si ya lo hemos hecho
¿no?
o sea
lo acabamos de hacer
hemos hecho esto todo el rato
amigo
¿y esto qué es?
si esto es
esto es el app
es el padre
pues estamos pasando props al hijo
o sea es que
esa es la forma
de cómo funciona todo
¿no?
¿qué es la diferencia del DOM
y el Shadow DOM?
no tiene nada que ver
el Shadow DOM
no es algo que
tenga que ver con React
todos los hooks
renderizan de nuevo
ahora mismo
solo estábamos viendo
el useState
cada hook
sirve para una cosa
diferente
entonces
como sirve para una cosa
diferente
hay algunos que sirven
para actualizar el estado
y hay otros que no
entonces no significa
que todos rendericen
el estado
y te tienes que quedar con eso
sirve para eso
de hijo a padre
de hijo a padre
no se pueden pasar props
pero se pueden pasar
al pasarle un callback
lo podemos hacer
si modifico desde el padre
una prop
se renderiza en el componente hijo
es lo que acabamos de
es el ejemplo
que acabamos de hacer
Tokyo Dark
es el ejemplo ¿no?
o sea mira
aquí en app
con el State
estamos modificando
una prop
que se le pasa al hijo
por lo tanto
ya está ¿no?
¿cuáles son los dos valores
del estado?
el estado no tiene dos valores
el estado
ah estos dos dices
esto es el valor
y la forma de actualizar el estado
¿se pueden pasar estados
de un componente a otro?
también lo estamos haciendo
aquí le estamos pasando
estamos pasando
de este componente
le estamos pasando
el estado al componente hijo
lo estamos pasando por aquí
también
excedente curso entre tardes
sea todos los miércoles
sea todos los miércoles
el proceso de comparación
entre el virtual DOM
y el real DOM
se llama reconciliación ¿verdad?
le puede llamar como quiera
la verdad
sí que le llaman
reconciliation
pero ya está
¿no usa local storage?
no
no usa local storage
porque no estamos usando
local storage
dijo a padre
es con
use imperative handle
pero se usa para
pasar funciones no datos
es correcto que si la lista
fuese a decir elementos
y cambia uno solo
se renderice todo el resto
de igual manera
hay formas de mejorar esto
podemos hacer
y hay formas de evitar
que si este componente
no cambia nada
que no se renderice
y eso lo veremos más adelante
a la hora de hablar
de las optimizaciones
¿vale?
eso lo veremos más adelante
para hablar de las optimizaciones
existe un hook
para manejar el local storage
no hay un hook nativo
para manejar el local storage
pero React es javascript
y por lo tanto
podremos crear
nuestros propios hooks
para eso
¿vale?
una cosa importante
que para que lo tengas en cuenta
es como se escriben comentarios
en el JSX
como ves
los componentes en React
no dejan de ser
no dejan de ser javascript
por lo tanto
aquí puedes escribir
los comentarios
de toda la vida
de javascript
ya sea con dos barras
con esto
o incluso
si
con esto
esto
ah pues no
con esto no
o si que funciona
esto funciona
pues no
no funciona
casi
pues esto
los comentarios de toda la vida
de javascript
estos dos
¿vale?
pero dentro del render
de lo que devuelvas
de lo que quieras renderizar
aquí
lo que tienes que hacer
aquí no puedes meter dos barras
porque si metes aquí
aquí dos barras
esto se va a renderizar
ahí
lo vas a ver claramente
aquí
aquí las dos barras
no lo hagas así
¿cómo tienes que hacerlo?
necesitas utilizar
las llaves
porque tienes que evaluar
esa línea
pero ¿qué pasa?
que si pones las dos barras
aquí las dos barras
claro
no sabe
si esta llave
es de cierre
o no es de cierre
así que los comentarios
que tienes que utilizar aquí
son los de la barra
y el asterisco
y aquí
le puedes indicar
dónde termina
esto es
no normalmente
no sería buena idea
que utilices
este tipo de comentario
ni ningún comentario
dentro del return
pero si en algún momento
es necesario
o ves que yo lo utilizo
para explicarte algo
pues que sepas
que esta sería
la forma correcta
de utilizar comentarios
dentro del jcx
tienes que utilizar
las llaves
y tienes que utilizar
barra asterisco
para entender
tanto dónde empieza
y dónde termina
¿vale?
ahora
te voy a explicar
otro error
típico
y bastante complejo
con el tema
de las props
y el estado
vale
vamos a quitar
este use state
que lo habíamos puesto
a nivel de app
vamos a quitar esto
vamos a quitar esto
y este name
vamos a dejar otra vez
que sea el de midudev
¿vale?
esto es otro error
que incluso gente
que tiene muchos años
de experiencia
lo sigue cometiendo
y tal
vale
te he dicho
que teníamos esto
de seguir
seguir y tal
que esto lo teníamos
correctamente
y esto funcionaba bien
primero
tienes que ver una cosa
que es muy importante
y es que tú
puedes inicializar
un estado
con una prop
porque al final
una prop
es un valor de javascript
y por lo tanto
lo puedes utilizar
¿qué quiere decir esto?
imagínate que
nada más entrar
tú entras en twitter
y yo ya sigo
a midudev
por lo tanto
el botón seguir
debería aparecer
como dejar de seguir
aquí podrías poner
isFollowing
y aquí deberíamos poner
a true
¿no?
o sea ya lo estamos siguiendo
si yo pongo esta prop
y miro aquí en la UI
aquí todavía me aparece
lo de seguir
claro
¿qué tengo que hacer?
pues tendría que utilizar
esta prop
isFollowing
y utilizar este valor
como valor inicial
del useState
así que en lugar de utilizar
el false
lo que podemos hacer
es isFollowing
pasarle este valor inicial
como aquí lo que tenemos
a ver
a ver
¿qué le pasa?
canotracing
ah claro
isFollowing
vale
y entonces tenemos
este problema
¿no?
que el nombre
pues se llama igual
la constante
el parámetro
que el estado
aquí normalmente
lo que utilizamos
cuando es una prop
que sirve para inicializar
un estado
la buena práctica
es que le llaméis
initial isFollowing
ahora ya tienes claro
que es el
que vamos a seguir
de forma inicial
¿no?
así que aquí vamos a poner
initial isFollowing
y esto lo utilizamos
como valor inicial
del useState
y ahora si cambiamos
¿ves?
ahora sí que tengo
que este ha iniciado
como siguiendo
y este como seguir
y en cambio
si le doy a este
pasa a seguir
y si le doy a este
pasa siguiendo
si reiniciamos
como empieza con el valor inicial
o sea
esto lo que nos ha permitido
es utilizar una prop
para inicializar
el estado
hemos inicializado
el estado
de nuestro componente
así que
como el componente
es interno
hemos dicho
vale
unos pueden ser
que ya los siga
otros que no
este código
que estáis viendo
es exactamente lo mismo
que utiliza Twitter
o sea
es exactamente lo mismo
o así es como funciona
también el me gusta
de Twitter
de Facebook
de un montón de sitios
vale
así es como funciona
entonces
además
ahora te voy a explicar
un error muy común
para que tengas muy claro
una cosa
los componentes
tienen un estado interno
o sea
estos dos componentes
tienen dos estados
separados
que son internos
un error muy común
es cuando utilizamos
una prop
de estado inicial
y creemos que
mágicamente
hace algún tipo
de nexo
y que va a hacer
que se propaguen
los cambios
del estado
del padre
hacia el hijo
y eso no funciona
lo vas a ver
con un ejemplo
muy claramente
imagínate
que aquí solo tengo
voy a quitar al bueno
de Pablo
imagínate
que solo tengo
al midudef este
y que aquí tengo
un estado
que le voy a llamar
pues
is following
set is following
y le voy a poner
que esto por defecto
es
y este is following
este estado del padre
se lo vamos a pasar
como prop
al hijo
y en el hijo
vamos a utilizar
esta prop
para inicializar
el estado
del propio componente
vamos a tener
otra forma aquí
para cambiar
cambiar
estado
de app
vale
para que veamos
muy claro
cuál es el que estamos
cambiando
aquí le vamos a poner
el set is following
le hacemos
el cambio
ojo con esto
que esto es un error
muy común
muy común
y que tienes que tener
muy claro
cuando entiendas esto
vas a estar muy por encima
vas a estar muy por encima
de mucha gente
que al final
estas cosas
ni las entiende
tenemos la
el app
el app
contiene
el componente
del twitter
follow car
los dos
tienen un estado
el estado
del app
lo estamos inicializando
aquí
y lo tenemos
como use state
y lo pasamos
como false
y aquí
a nivel de app
lo podemos cambiar
de hecho
podemos ver aquí
voy a poner
app render
with is following
vamos a poner esto aquí
para que veamos
cada vez que se renderiza
la aplicación
y que cambia
en cambio
cuando tenemos aquí
el estado inicial
ves que pone
initial is following
lo estamos pasando
como prop
este mismo estado
se lo pasamos al hijo
pero el hijo
lo está utilizando
para inicializar
otro estado
y que luego
internamente
lo va a cambiar
vamos a cambiar
el estado de la app
vale
fíjate
cambio el estado
de la app
y no cambia
el estado del hijo
nunca
no cambia
en cambio
si miro la consola
fíjate
se está
va cambiando
o sea
yo estoy viendo
como true
false
true
false
o sea
está cambiando
pero
¿qué está pasando?
porque si se lo estoy pasando
como prop
¿qué está pasando?
en el hijo
lo estamos utilizando
como estado
inicial
y esto es lo que
tienes que tener en cuenta
el estado inicial
solo se inicia
una vez
o sea
si tú utilizas una prop
para inicializar un estado
se inicializa una vez
no se reinicializa
cada vez que la prop
cambia
así que siempre
siempre siempre
que utilices
una prop
para inicializar un estado
ten en cuenta
que solo se inicializa
una vez
esto es un error
muy común
que gente que tiene
10 años de experiencia
lo siga cometiendo
una y otra vez
así que
siempre que vas a utilizarlo
como estado inicial
utiliza
para que te quede clarísimo
y luego ten en cuenta
que si se inicializa
solo lo inicializas una vez
pero fíjate
que el estado interno
sí que sigue funcionando
así que
este estado
no se propaga para abajo
y además
normalmente
hacer esto
suele ser una mala prueba
vale
pues
¿qué os parece
si con todo lo que hemos aprendido
hacemos un proyectito?
yo creo que podemos hacer un proyectito
y con el proyectito
igual os puedo enseñar
os puedo explicar otra cosa
otra cosa
podemos hacer un jueguecillo
que es el de
podemos hacer el juego del 3 en raya
podemos hacer el juego del 3 en raya
podemos quitar todo lo que habíamos hecho
vale
en lugar de quitar
que si no la vamos a liar
voy a quitar
voy a simplificar esto
este is following
lo quitamos
porque ya hemos visto que esto
lo vamos a necesitar
vale
os voy a dejar el ejemplo
para subir esto ahora
así que
twitter follow car
twitter follow car
vamos a poner aquí
al bueno de Feralp
nunca me acuerdo
del apellido
Heraldo
vale
Heraldo
vamos a poner aquí
vale
así os pongo los dos
y voy a poner que uno sea
is following
y así os dejo el
este
esto
entonces
esto sería
el twitter follow car
perfecto
ya lo tendríamos por aquí
que podríamos hacer
a ver
bueno primero voy a intentar
resolver vuestras dudas
oye mi duto
explicaciones de un 10
gracias
pero cuando cambio el estado
del componente padre
no se vuelva a renderizar
y eso no debería cambiar
la inicialización del componente
no
porque inicializar el estado
solo ocurre una vez
vino con pretty
tened en cuenta una cosa
tened cuidado con una cosa
tened cuidado con una cosa
no intentéis luchar con esto
o sea
pensad que
lo que os digo
es lo que es
¿por qué?
porque hay mucha gente
que se cabrea
como diciendo
lo que dice vino con pretty
de dice
pero cuando cambia el estado
del componente
padre
no se vuelva a renderizar
y no se debería cambiar
la inicialización del componente
hijo
no
porque el estado
solo se inicializa una vez
punto
ya está
entonces cuando tengáis esto
porque muchas veces
la gente se queda como
estancada
en cómo debería ser
o no debería cambiar
o cómo debería
y esto en programación
nos pasa muchas veces
que pensamos el cómo debería ser
y no el cómo es
y es así
el estado se inicializa
una vez
punto
y a partir de ahí
vas a entender
cuando tengas problemas
lo vas a entender
clarísimamente
clarísimamente
en twitter
el hacer hover
cambia el texto
¿cómo lo puedo hacer?
es bastante fácil
si queréis lo hacemos en un momento
si queréis hacemos esto
y dejamos
para el siguiente
hacemos lo otro
la buena práctica para resolver eso
es no utilizar
o sea tenerlo en claro
tenerlo claro
y no utilizarlo nunca
o sea no hacer
nunca esperar
nunca jamás esperar
que se vaya a renderizar
porque cambia el estado
cuando lo estás utilizando
yo lo aprendí en las malas
sí sí no totalmente
vale ya sabéis que en twitter
hacen esta cosa
que es muy chula
¿no?
de que tienes seguir
siguiendo
mira a ver si os lo enseño
para que lo veáis bien
aquí tenemos
seguir siguiendo
esto
seguir y siguiendo
y cuando hace hover
fíjate que deja
que cambia esto ¿no?
que cambia hasta el texto
esto es bastante fácil
es bastante fácil
mira
para hacer esto
lo único que tenéis que hacer
es
esto lo que hace es jugar
con el dejar de seguir
o sea lo que hace es tener
dos textos aquí
aquí tiene
otro span
que pone
dejar de seguir
entonces
vamos a hacer este
este efecto
vamos a hacer exactamente
el mismo efecto
vamos a hacer
dejar de seguir
vamos a poner aquí
un class name
que va a tener
twitter
follow card
vamos a poner
estoy pensando
follow
stop follow
vamos a llamarle
stop follow
entonces el stop follow
lo que tendríamos que hacer
en el stop follow este
stop follow
follow card
ah bueno
incluso más fácil
bueno no
follow
este stop follow
lo que hace
la verdad es chulo
porque
hemos hecho un componente real
que está bastante chulo
o sea
está bastante chulo
vale
utiliza un display none
entonces
ya tenemos esto
¿qué más?
luego
cuando está así
está con
siguiendo
con el mismo color
del fondo
entonces
en lugar de blanco
¿cuál es el color?
vale
uno es blanco
y el otro sería
como transparente
no sé si ponerle transparente
following
background
transparent
para que tenga
el color de fondo
parent
vale
tendría el transparente
solo que el color
sería blanco
y el borde
sería
de un estilo
así
un gris
clarito
¿no?
todo debería ser
un BBB
más o menos
más o menos
ahora ya
nos quedaría
solo el paso este
de claro
cómo cambia
entre uno y otro
a ver
ya veis
que
siguiendo
y dejar de seguir
claro
siempre tiene
como la misma anchura
o sea
cuando está siguiendo
siempre tiene la misma anchura
que a lo mejor
no sé si son 100 píxeles
o lo que sea
¿vale?
ya tiene la misma anchura
igual tiene un poquito más
obviamente
eso para empezar
luego el color
del hover
cuando
no es red
he puesto red aquí
a saco
que no sé por qué
no me sale el
color picker
¿sabes?
color picker
¿por qué no sale el color picker
cuando le pongo encima?
color decorator
inline decorator
normalmente
cuando pones aquí un color
debería
ese ese
ahora
ya está
¿vale?
pues entonces
con esto
podemos ponerle
que sería
más o menos
alguna cosa así
¿vale?
este hover
del background color
ah y espérate
que esto
esto lo he puesto
en el que no hay
pero tendríamos
el siguiendo
el siguiendo
no
este hover
simplemente es un poco
de opacidad
o sea esto sería un opacity 8
por decir algo
y este hover
este hover
se lo dejaríamos
al is following
esto tendríamos
esto
el is following
lo utilizaríamos aquí
tendríamos el hover
pondríamos este background color
¿vale?
además también cambia
la barra
is following
¿vale?
cuando
esto
lo tiramos para arriba
¿vale?
cuando el button
estamos haciendo
el is following
además estamos haciendo dos veces
o sea eso hay que hacerlo una vez
ya empezamos a tener
un poquito mejor esto
y además el color
el color sí que parece que es rojo
rojo
y el border
también es rojo rojo
más o menos
no sé exactamente los colores
pero eso ya
cada uno lo
vale
o sea que esto es todavía más
ah es que es transparente también
o sea es que este fondo
es o muy transparente
o sea o casi no se nota
o sea a lo mejor rojo
pero es muy muy muy transparente
muy transparente
así que algo así ¿no?
y ahora lo único que tenemos que hacer
es la magia
entre que cambie una y otra ¿no?
tenemos dos formas de hacerlo
una sería moviendo uno y otro
podemos utilizar el hidden
directamente
o sea podemos decirle
oye cuando hagas esto
el stop follow
este me lo muestra
y haces un display block
y ahora lo que tendríamos que hacer
es quitar el siguiendo
vamos a hacer esto un poco más grande
dejar de seguir
igual un poquito menos grande
vale igual de grande
y lo que tenemos que hacer con el otro
es quitar el siguiendo
o sea que aquí
este span
tendríamos que tener otro span
lo podríamos mover
o lo podríamos
poner follow
tenemos el text
text
podemos poner el button text
o text
y el text
ya lo tendríamos
ahora lo que hacemos aquí
esto con
con telwin
sería mucho más rápido
pero bueno
no pasa nada
no pasa nada
podemos hacerle
que el text
este text
que sea por defecto
que sí que se muestre
este vamos a hacer
que el text
tenga el display block
pero
cuando esto
está con el following
follow car
button
is following
esto
display no
y la he liado por algo
ah perdón
es que esto es cuando hacemos hover
cuando hacemos hover
position
y con esto
con esto ya lo tenemos
con esto ya lo tenemos
veo que hay una opacidad
por ahí
claro
este opacity
solo tiene que ocurrir
si no está siguiendo
creo que debería ser así
si no está siguiendo
pero bueno
más o menos
y con esto ya lo tendríamos
con esto ya lo tendríamos
ya tenemos
justamente
el mismo componente
el mismo componente
ahora
voy a explicar
el renderizado de listas
que es bastante importante
vale
y entonces así
con esto ya lo tenemos
hombre Paco
Paco
muchas gracias por la raid
de 70 personitas
muchas gracias
mira
estamos aquí con
con programación a tope
que he hecho un curso
desde cero de RIA
que es una tecnología
súper chula
y súper interesante
pero muchas gracias
hombre Paco
por pasarte
crack
espero que te haya gustado
el trailer de Antman
que está
bastante interesante
vamos a poner esto así
y así ya
quedará mejor
vale
vale
pues
solo
para
que tengamos
una
una cosa más
claro
vamos a hacer
un renderizado de listas
porque es bastante importante
o sea
normalmente
la información
como nos viene
no es que nos viene
que hacemos un
un fetch
y nos llegan ya los componentes
y ya está
sino que lo que tenemos
realmente
es
un array
con elementos
y con el array
de elementos
tenemos que renderizar esto
cuando hagamos un fetch
a una API
cuando hagamos un montón de cosas
lo que vamos a necesitar
es
oye
quiero renderizar
esta lista de elementos
que tengo
y en esto
nos pasa lo mismo
imagínate que tengo aquí
una lista de users
que es un array de objetos
donde ya tengo el username
tengo el name
y tengo si está
si es following
o no es following
y lo mismo con el username
tenemos aquí el bueno de feralp
que nunca me acuerdo
y me va a perdonar
y tenemos
si es following false
y vamos a tener aquí
un montón de usuarios
¿no?
vamos a tener
aquí también
a
pacodest
también
y vamos a tener
name
pacodest
es following
vamos a decir
true
¿vale?
y así todo el rato
a ver
alguno que
teme chain
teme chain
teme chain
y ya con este
renderizamos
¿vale?
tomás
vale ok
tomás
bueno
tenemos una lista
de ellos
y obviamente
normalmente
la lista de usuarios
es lo que queremos renderizar
o sea
no queremos
no podemos
tener los componentes
ya hechos
lo que queremos
es decir
vale
quiero renderizar
este array
con el componente
twitter follow car
¿cómo hago esto?
¿cómo puedo renderizar esto?
¿no?
vale
pues lo que tenemos que hacer
en este caso
es utilizar
javascript
y esto es lo mejor
que tiene
react
que es que todo
todo
todo es javascript
todo es javascript
aquí tenemos
users
¿vale?
pues lo mapeamos
y aquí vamos a tener
la información
de cada usuario
para la información
de cada usuario
podemos extraer
tanto
el username
el name
y el is following
y esto lo sacamos
del user
y aquí vamos a devolver
el componente
que queremos renderizar
para cada uno
de los usuarios
y aquí le pasamos
esto ahora os lo explico
username
username
tenemos
initial is following
pues lo ponemos
si está siguiendo
o no está siguiendo
el key
ahora os lo explico
y el full
no me acuerdo
si era full name
o era name
es username
ah children
vale
pues no pasa nada
si es como children
pues el children
lo ponemos aquí
como name
y ya está
guardamos los cambios
de esto
y ahora ya vemos
que ya tenemos
nuestros usuarios
renderizándose
este seguramente
es que no ha encontrado
este usuario
de Paco
pero bueno
ya tenemos nuestros usuarios
renderizados
fíjate
que ha sido bastante fácil
en el que
lo único que tenemos que hacer
y esto es lo mejor
que tiene React
que no deja de ser
JavaScript
es JavaScript
que quieres renderizar
una lista de elementos
utiliza JavaScript
sabes
o sea que tienes que hacer
un renderizado condicional
utiliza JavaScript
si sabes JavaScript
no te va a costar
absolutamente nada
utilizar React
no tienes que aprender
otro lenguaje de pronunciación
un pseudo lenguaje
ni nada
es simplemente
JavaScript
mapeamos los usuarios
lo envolvemos con llaves
porque lo que devuelve
el mapeo de usuarios
es lo que queremos renderizar
por eso utilizamos las llaves
porque las llaves
son para evaluarlo
luego
para cada usuario
extraemos esta información
esta información
la podríamos extraer
directamente de aquí
y ya lo podríamos tener aquí
y este return
que lo estamos haciendo aquí
que tampoco pasa nada
lo podríamos también
hacer directamente
y devolverlo así
podríamos devolverlo así
si quisiéramos
ok
y ya está
o sea con esto
ya estamos renderizando
la lista de usuarios
pero
ojo con esto
que hay un
hay un problema
hay un problema
con lo que hemos hecho
un problema que no es muy grave
pero es un problema
si miramos en la consola
y renderizo esto
fíjate que vamos a tener
un warning
seguramente
habrás visto un warning
¿vale?
habrás visto aquí
warning
each
react js
unique key
no sé qué
¿qué pasa?
cuando renderizamos
una lista de elementos
un array
en react
tenemos
que añadir también
la key
tenemos que indicar
la key
¿y por qué tenemos que indicar
la key?
¿para qué sirve la key?
¿qué es esto?
la key
es un identificador único
para ese elemento
¿por qué?
porque react
tiene que saber
como le estamos renderizando
un array
tenemos que indicarle
de decirle
oye como vas a utilizar
el DOM virtual
para que seas capaz
de saber exactamente
a qué elemento
que estoy refiriendo
dentro de este array
te voy a identificar
el elemento del array
y te lo voy a identificar
con un
algo que sea único
por lo tanto
yo aquí no puedo poner a
porque si pongo aquí a
y todos
como key
tiene la A
fíjate que te dice
oye que he encontrado
dos children
con la misma key
entonces
las keys tienen que ser únicas
tenemos que tener una identificación
porque si no
lo que puede pasar
es que la información
aparezca duplicada
que al renderizarse
tengas problemas
entonces la key
tiene que ser única
otro error muy común
que a veces es posible
es utilizar el index
puedes utilizar el index
si tienes claro
que siempre ese elemento
va a tener el mismo índice
si por lo que sea
este índice
luego lo reutiliza
otro elemento
la alia
vas a poder ver
información anterior
vas a ver información
que no cuadra
vas a tener problemas
entonces lo mejor
es utilizar
como key
algo que sepas
que es único
de ese elemento
en este caso
el username
no tiene sentido
que se repita
podemos utilizar el username
si la base de datos
te devuelve un id
utiliza el id
si puedes crear
a través de
username
más
más yo que sé
avatar
un id único
lo puedes utilizar
lo importante
es que sea
justamente
único
un identificador
único
y una vez que utilizarlo aquí
pues ya lo tenemos
ahora sí
ves
no tenemos ningún problema
podemos seguir funcionando
y estamos renderizando
una lista de elementos
y lo hemos hecho
simplemente con un
pero el index
es lo que hace
real por defecto
por eso no tienes que hacer
a ver
por defecto
os va a dar el wording
os va a utilizar
el index
seguramente
pero no es buena práctica
evitarlo
un uuid
solo es buena práctica
si la habéis creado
previamente
o sea
si la habéis creado aquí
o sea
lo tenéis que crear aquí
no utilicéis
un uuid aquí
porque entonces
la vais a liar
por ejemplo
utilizar un más random
también es mala práctica
porque lo que le estáis diciendo
es que cada vez
que se renderiza esto
los id son distintos
entonces
no tiene sentido
no tiene sentido
no tiene sentido
no tiene sentido
siempre queréis identificar
a la id con el mismo
no utilicéis aquí
cosas que sean aleatorias
no se trata de que hagáis
algo aleatorio
se trata de que hagáis
algo único
para ese elemento
para identificarlo
¿vale?
no utilicéis cosas
aquí aleatorias
porque eso también
os va a dar problemas
¿sí?
lo mejor sería utilizar
una id de base de datos
eso sería lo mejor
lo mejor sería
id de base de datos
eso de lejos
id de base de datos
luego
si no la id de base de datos
algo que sea único
por ejemplo
el username
suele ser único
aunque no sea la id
un date now
tampoco
pero a ver
un date now
¿eso identifica
a ese elemento?
no
porque cada vez
que se renderice
será diferente
amigos
no
no tiene sentido
tiene que ser algo
que sea único
que no pueda tenerlo
otro usuario
a ver
para que veamos
el problema
porque es que
estáis poniendo cosas
vamos a poner aquí
cero
vamos a poner aquí
un más random
un date now
es como un más random
pero bueno
button
click
set
state
date más
lo primero
es que
un date now
no es un identificador
para nada
porque no identifica
absolutamente nada
y además
va a ir cambiando
cada vez que se renderiza
entonces
si vosotros ponéis esto
seguramente
como podéis ver
no vais a tener
ningún
ah bueno mira
claro
si va lo suficientemente rápido
si que vais a tener
un warning
porque el date now
alguno
ves aquí hay dos elementos
que han tenido el mismo
ahora tres
depende
hay veces que tendrás suerte
por lo que sea
pero mira
fíjate
cambio el count
y mira lo que me está pasando
me está pasando
que se están replicando
se están replicando
entonces
se están replicando
porque se están repitiendo
las keys
es un problema
no utilices el date now
tampoco el más random
el más random
no identifica nada
lo único que estáis haciendo
es darle una key
siempre diferente
que eso no es un identificador
es simplemente
hacer uno diferente
no vais a tener
a lo mejor un problema
de visual
ves
no tienes ningún warning
pero vas a tener un problema
a nivel
de rendimiento
porque fíjate
como ha cambiado la key
fíjate
cuando cambia el estado
de la app
se están renderizando
todos los elementos
todo todo
se está re-renderizando
todo
ves
se re-renderiza todo
porque no los estoy
identificando
react se cree que son nuevos
se cree que son nuevos
entonces
fíjate con el username
el username
cambio el count este
cambio este count
y esto no cambia
así que ni date now
ni más random
no utilices más random
que el más random también
lo mejor
la base de datos
la idea
y si no
otra cosa
que sea única
el symbol for
al final para utilizar
un symbol for
tendrías que utilizar
algo único
para identificar
el symbol for
así que tampoco
¿dónde se puede utilizar
que sea único?
si podéis hacer aquí
el symbol
antes
¿vale?
claro
aquí sí que lo podríais hacer
todos los symbols
son únicos
si lo podéis hacer antes
pero bueno
esto es un ejemplo
un poco tonto
porque al final
esto
funcionará
con un fetching de datos
el fetching de datos
no va a dar una idea única
y no vamos a tener
este tipo de problemas
bueno
la idea por lo que veo
tampoco
el symbol no
el soporte
type symbol
o sea que no soporta símbolos
o sea que los símbolos
tampoco sirven
que nada
que utilices una idea
en condiciones
y ya está
que no la liéis
¿vale?
que no la liéis
no la liéis
venga
os voy a dejar
todo este
todos estos códigos
todos estos códigos
gitignore
vamos a poner el package log
package log.json
bitconfig
os voy a dejar
todo esto
¿vale?
add component
bueno
add first class
realizamos los cambios
y ahí lo tenemos
¿vale?
para que lo tengáis
mira
ven y os está pasando
el repositorio
o lo pasó
sí sí
la key y el id
puede ser el mismo
os dejo este repositorio
aquí ya tenemos en proyectos
el hola mundo
que es el de hoy
la semana que viene
haremos otra clase
la semana que viene
haremos el juego
vamos a hacer un juego
desde cero
con todo lo que hemos aprendido
para repasar
y añadiremos
unas cositas más
para que poco a poco
vayamos mejorando
pero haremos el primer proyecto
así que os dejo por aquí
el repositorio
poco a poco
iremos haciendo este repositorio
cada vez más grande
y ya está
¿vale?