Te doy la bienvenida a la primera clase del curso de Ría en esta clase empezamos explicando qué ría 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 guija con todo el código De todas las clases y si tienes cualquier duda Pásate por el disco que también te
dejo el enlace en la descripción y espero que disfrutes del curso a aprender mucho react esta frase que te Define querría y te dice es una biblioteca de javascript para construir interfaces de usuario Fíjate que en esta frase no nos está no nos está diciendo no nos está diciendo que riax 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 en cuenta react está pensada para hacer interfaces usuario independientemente de donde 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 riax se utilizan 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 reac y otro que sería react que es lo que es específico del navegador pero lo más importante que tienes que tener en cuenta es que reac es una biblioteca de javascript construida
para o sea para construir interfaces de usuario para construir interfaces de usuario y eso puede ser en cualquier sitio pues una página web dispositivo móvil una Aplicación terminal un montón de cosas dos cositas muy importantes que nos explica aquí que luego comentaremos con más detalle es que ría que es declarativo que nos permite crear estas interfaces de una forma mucho más sencilla y lo segundo es que está basado un componente ahora bien claro qué pasa con esto que hoy en día todos los frameworks o todos los las bibliotecas por ejemplo View 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 el hilo de en un hilo
de Twitter aquí si tenemos Twitter todo lo que estamos haciendo 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 y 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 si tú cambias esta pieza de Lego ese cambio se va a Replicar en toda 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 vale otra cosa muy importante de reac es que es una biblioteca que es universal de esto se habla poco pero lo que quiere decir que riax sea universal no es que sale al universo y todo esto lo que quiere decir es que riax 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 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 escribió nuestra aplicación una sola vez antiguamente a lo mejor hacías tu aplicación en el backen con punto net con Java con php Y eso se renderizaba en el servidor y una Vez que estaba el cliente tenías una biblioteca como podría ser Jake quarry o alguna cosa alternativa que lo que hacía era parchear el html esto con ríack esto 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 vamos a explicar te quiero explicar un poquito De historia Esa es la página oficial de ariax 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 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 1 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 lo que Sea aquí lo tienes si tienes alguna duda específica de reac hay otra cosa que te recomiendo tenemos una página que esto es de la comunidad que lo hemos hecho aquí que se llama riajis punto 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 que son las propias le das click y aquí tienes ya como un frecuente Asquet 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 la github puedes dejarle una Estrellita si quieres y puedes Añadir Si ves alguna pregunta que falta Si ves algún error de o lo que sea Pero bueno aquí además también tienes todas las preguntas y las tienes en 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 lo sabes dónde encontrarlo la documentación
pues 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 realgs.wiki y es Totalmente gratis o sea es totalmente gratuito si lo que 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 que queréis el libro porque 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 es obligatorio es totalmente gratis todo lo aseguro 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 ríack Por qué es tan importante riac de dónde sale react es de meta ría que 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 tienen meta Meta es Facebook Instagram WhatsApp tiene diferentes productos y en todos y cada uno de sus productos utiliza react nació en el 2011 como una forma de intentar simplificar las interfaces de usuario lo creo Jordan Walk o Jordan Walking no sé cómo se pronuncia su apellido y lo hizo porque era muy difícil trabajar con formularios él venía del backen y de sistemas distribuidos y cuando se puso a intentar trabajar 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 ya sabéis que los formularios son un rollo Pues dijo Oye necesito para mejorar esto así que en 2011 creó el digamos el embrión de riack además era súper importante y en el curso lo Vais a ver evitar ataques por xs 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 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 empiezas de código abierto de hecho a día de hoy podéis utilizar y podéis ver el repositorio de riac totalmente abierto si alguien nos puede pasar porque siempre que lo busco no sé porque la lío pero no encuentro Repositorio a ver Ah mira ya 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 ría 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 ríack no la podía utilizar por ejemplo empresas que eran competidoras de ríack había hay 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ía Por qué deberías estar aprendiendo 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 porque debes aprender ya lo primero es el framework más demandado en el mundo occidental seguro en el mundo accidental 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 reac que de otras opciones aquí podéis ver en Estados Unidos El 60% son de reac la India 60%, Francia tenemos un empate con angular Alemania está un poquito por encima el Reino Unido muy por encima y Italia
Tenemos 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 View esbelt 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 ríack una de las cosas buenas que tiene es que es Es una biblioteca una de las más demandas del mundo podemos entrar en datos si es un poquito más un
poquito menos pero lo que es cierto es que riac tiene actualmente muchísima muchísima salida laboral muchas empresas están utilizando react y si no están utilizando ría que está utilizando algún framework que utilizaría como puede ser next como ha podido ser durante mucho tiempo gatsby al final reac está cada vez en más sitios vas entrando en Cualquier página y cualquier página está utilizando reac aunque sea en un trocito antes hablábamos de Twitter Twitter está utilizando riac Facebook por supuesto está utilizando ría 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 ríack es una muy buena opción y para mí una de las mejores opciones si quieres empezar con algo con ría segundo segunda razón muy interesante la segunda razón Que te daría en mi caso es lo que vas a aprender hoy lo vas a poder utilizar para también desarrollar aplicaciones móviles con react native lo que soy 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 se 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 reac generó react para Windows y Mac y magos Microsoft todas sus aplicaciones de móvil todas las aplicaciones de móvil que tiene todas están hechas con react 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 y le funciona Perfectamente y además Microsoft también ha desarrollado reality 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 reactive para 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 escrito con riax seguramente a día de hoy serán el doble eso qué quiere decir eso quiere decir que Facebook está utilizando reac en producción en productos muy importantes que mueven muchísimo dinero lo tenemos también WhatsApp web lo tenemos también en Instagram y por lo tanto no no va a cambiar no va a desaparecer de día a la mañana pero si no fuese suficiente que tiene una gran empresa detrás como es Facebook o 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 ese meta que no lo creo vas a tener todavía un Montón de soporte de comunidad durante muchísimos años la cuarta razón aprendería te va a ayudar con el resto de frames esto también pasaría si aprendes angular Te ayudaría a aprender pero si aprendes Díaz mucho 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 View asbelt 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 5 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 mpm vamos a ver las tendencias de mpm hay veces que no son del todo fiables esto lo vamos a ver un poco un poco
para encima Para que os hagáis un poco la idea vale Pero si miramos el último año aquí podemos ver La rayita verde sería riac luego tendríamos la rayita azul que es angular la roja que es View aquí hubo como un Salto que seguramente alguien se le olvidó hizo en pie mis Touch por encima de sus posibilidades pero si vais a ver un poquito lo que es la evolución de Ría que a lo largo del tiempo Vais a poder ver durante cinco años como riax 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 tardan 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 la cómo sería el histórico ya ves que desde 2019 2020 no ha parado no ha parado de crecer no ha Parado de
crecer si alguien se pregunta qué pasó con View es que dicen que ha podido pasar dos cosas Una que alguien ha dejado un pie pistola ahí en repeat sin querer o segunda que bueno alguien lo ha hecho para hackear las estadísticas Pero bueno ya tenéis ahí otra otra razón no ahora razón 6 una de las mejores cosas que tiene react es su Api estable Qué quiere decir esto reac a diferencia de lo que ha pasado con angular y lo que ha pasado incluso con View 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 muchas de las sintaxis o sea 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 View o Angular angular le pasó con el paso de angular js angular porque al final es un framework totalmente
distinto y aviú en la comunidad de View no le gustó mucho el cambio de view2 a view3 en el caso de reac la verdad que los cambios han sido bastante incrementales muy fáciles de Pues de migrar de migrar tu aplicación y eso es una de las cosas Yo creo que de las mejores el hecho de que de alguna forma la estabilidad que tiene ría que 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 riac 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 ría como una comunidad gigante cualquier duda cualquier pregunta cualquier cosa la vas a poder encontrar siempre en algún sitio porque siempre hay soporte de reac allá donde vayas es impresionante la
comunidad súper chula que hay que te va a ayudar un montón y que no vale Así que vale pues aquí tendríamos aquí tendríamos ya todo esto una de las cosas más importantes para para mí para aprender react y te voy a Explicar por qué es que entiendas porquería 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 ríack O sea no vamos a empezar pum realidad directamente vamos a hacer una parte de una yuay con Vanilla javascript y de ahí
lo vamos a migrar poco a poco a riak 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 si a mí también se 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 ahí 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 Cody link 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 va 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 ponerle 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 con el blanco vamos a ponerlo así ya tenemos aquí dos me gusta normalmente si utilizáramos 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 se denomina Vanilla Así que vamos a hacer Vanilla Java vamos a escribir vamos a poner aquí la vanidad vale esto sería Vanilla joystick no hace falta que sepas Vania javascript porque te lo voy a explicar paso a paso no te preocupes que 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 con 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 vale vamos a ejecutar una función y al ejecutar la función queremos que haga algo que es lo que queremos hacer Bueno pues cuando el Evento vamos a escuchar el evento de click 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 ahora lo que queremos en realidad no es hacer una alerta 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 idea no O sea que vamos a recuperar tenemos un Data ID le pongo un dos tres 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 idea del atributo del html cómo hacemos Esto bueno creamos otra vez una constante y lo que tenemos que hacer Aquí tenemos el dish que nos estamos refiriendo al mismo elemento si no podríamos poner Button el que tú quieras de este vato hacemos un get atribute y recuperamos el atributo Data idea vale Ya tenemos el aire buenísimo con esto aquí podríamos Llamar llamar a un servicio para
actualizar si me gusta Entonces podríamos poner call service o toggle por ejemplo no y le pasaríamos la idea lo voy a comentar porque no vamos a crear esta 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 yuai como hemos visto reac nos sirve no funciona para trabajar y construir interfaces de usuario y justamente la interfaces de usuario normalmente son interactivas tienen que responder a lo que hacen en este caso que vamos a hacer Bueno podríamos decirle vale si el botón en la
lista de clases tiene contiene una que Sea like it O sea que le ha gustado pues lo que vamos a hacer es quitar del classlist le quitamos el like it la clase likee y el bueno el lugar del Dish vamos a utilizar el botón y en el Baton 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 inertex aquí le Pondríamos quitar me gusta quitar me gusta vale vamos a ver si funciona nuestro botón sino el 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 construyamos o cómo Pudiéramos 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 echo 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 actualizarse 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 para ver cómo tiene que hacerlo vamos a ver con react que no es imperativo sino que nos va 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 es todo 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 batones aquí le decimos que seleccione todos los botones y aquí tendríamos que empezar a hacer pues ya un forich 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 Si separado cada uno de ellos pero ya empezamos
a ver dos problemas el primer problema es que para Ser capaces de combatir esta lógica la hemos tenido que poner en el mismo sitio cuando Imagínate que a lo mejor en la u hay la ayuda y este 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 va no es escalable estamos
empezando a poner botones tenemos que empezar a hacer un forich 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 vamos a hacer desde cero vamos a hacer desde cero El ejemplo y vamos a ver cómo nos podría un poco lo primero que tenemos que hacer para utilizar react es importar importar la dependencia de reacto a un tema interesante aquí que a lo mejor hay gente me lo dice una cosa que se podría hacer para arreglar esto es utilizar Gasto melements vale podríamos utilizar castom melments para solucionar esto para arreglarlo la verdad que se puede hacer caso de la plataforma Pero bueno es un poco para que nos demos cuenta también con un
gasto Menéndez 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 reac en realidad hay mucha gente que se cree que necesitas utilizar webpack que necesitas utilizar Beat 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 javas que no así que aquí tenemos un import vamos a importar react Y lo importamos desde esta URL Fíjate que al final pone barra client
o sea estamos importando la parte del cliente ahora que ya tenemos tendríamos que tener aquí un sitio donde queremos renderizar nuestra aplicación Así que por ejemplo voy a crear aquí un dip con un ID le voy a llamar app y lo vamos a cerrar aquí con el read dom lo que podemos recuperar es decir venga voy a recuperar este elemento del dom vamos a tener aquí la app document get Element by ID recuperamos este elemento este app este le va a llamar a Don Element para que lo veamos claro Vale ahora queremos crear una aplicación
de Ría 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 reac sin instalar absolutamente nada entonces cómo creamos nuestra aplicación de react lo primero que tenemos que decirle Es 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
descargar va a ir Creando nuestra y a nivel de componentes y cada componente va a tener dentro un componente porque en riac todo es un componente Pero cómo tenemos que iniciar pues tenemos que iniciar desde una raíz no como desde desde la base así que tenemos que crear un tronco y el tronco lo vamos a crear con react 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í bien 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 en el Root vamos a decir que renderiza y aquí le podemos decir que renderice lo que queramos vamos a poner Hola ría ya podemos ver aquí que ya nos ha renderizado el olarriac 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 Imagínate que quieres integrar un widget en una página que es muy antigua y dicen no pero
esta parte la quiero hacer con react bueno podrías hacer esto para empezar a renderizar ría Obviamente el problema que tenemos aquí es que esto es una cadena de texto no la react vale está pero no no es muy interesante vamos a hacer una cosa vamos a copiarnos el estilo que tenemos Aquí vamos a poner Esto Hola riac vale Y aquí vamos a poner que esto papá vamos a poner que el font family para mejorar el Funk family no sé si existe might para que lo veamos un poquito Vale ahora que ya tenemos este Hola riac
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í batón y ponemos me gusta ojo qué ha pasado como puedes 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 reac 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 utilizar html para poder Renderizar como el html resultante lo que necesitas es crear un Element vas a ver que al principio vas a decir ostras pero el código de Ría que 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 J vamos a importaría para importar ríack nos vamos a en macri modules y
aquí importamos la dependencia de react ahora para reac vamos a crear un elemento este elemento le vamos a Poner batton y hacemos react create Element el elemento que queremos crear es un botón la segunda el segundo parámetro sería 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 Tengan 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í vale pues lo que tenemos aquí es el texto me gusta y ahora que tenemos este elemento en el Rut punto render ya podemos aquí poner el botón ahora sí estamos renderizando nuestro primer elemento Vale ahora sí que estamos realizando nuestro primer elemento Así que esto tiene que tener muy claro lo Que hace Jack es renderizar elemento 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 te puede inyectar el código ahora bien si miramos aquí estábamos creando con el Data y de 1 2 3 pero si miro Aquí con el inspector de elemento ves que aquí me falta el Data 123 dónde debería Añadir el Data 1 2 3 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 12 y ahora sí si miramos seleccionamos ahora podemos ver que si 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 el botón 2 botón
3 y vamos a poner aquí que esto es el 456 789 y vamos a poner botón me gusta vamos a por el botón 1 botón 1 botón 2 y Button necesitamos renderizar 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 porque me explica estas cosas pues es bastante importante que entiendas esto para que veas realmente cómo se 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 o una función Imagínate que tienes suma no Y tienes aquí a y b no 2 + 2 vale Pero si tú asuma
le pasas dos tres cinco es cinco 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 tip un elemento vamos a poner el dip un elemento dip vamos a decir Vale pues vamos a tener un dip y el dip 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 por lo que vamos a tener aquí Debería ser que tenemos el botón el botón 2 y el botón 3 y este dip es el que vamos a renderizar Aquí y ahora sí tendríamos ya nuestros tres botones ahora bien Qué pasa con esto Pues claro el problema que alguien nos dirá nos dirá pero claro yo no quiero un dip Con razón está bien que te quejes porque nadie quiere un tip No te preocupes justamente para que
no tengas que renderizar un dip 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 reac punto que luego más adelante veremos otra forma de escribirlo mucho más fácil y mucho más más lógico vale inspeccionamos esto y ahora puedes ver que desde la app estamos renderizando nuestros tres votos vale vale Pero alguien me dirá alguien me dirá Ah porque un dip no hacemos un dip porque al final dices por qué es Necesario un tipo o sea por qué tendríamos que
hacer un dip esto lo que nos está haciendo es obligar a crear una un nivel más en nuestro html entonces lo que tenemos que hacer es intentar y dejar nuestra html lo más simple y semántico posible con esto ya hemos evitado el dip Pero alguien seguramente en el chat estará diciendo pero yo ría que 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 los cursos van a saco a decirte no Esto es así pam pam pam Bueno pero
en realidad Así esto es real 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 HM 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 reac es esto que se llama jsx qué es esto de jsx cómo funciona y tiene que ver con reac Cómo Sé como ya te he demostrado puedes utilizar react sin jsx Y esto es puramente 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 voy a crear
este botón voy a crear este botón esta interfaz la podríamos recrear Exactamente igual simplemente subiendo reac punto fragment y qué es lo que tiene read punto fragment Pues aquí hemos dicho que tenía un botón con Data Idea 1 2 3 otro el botón hemos dicho que esto es botón 1 y aquí esto lo repetimos el react 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 se entera de la parte de arriba cuando veas esto entenderás todo lo que está pasando abajo si ahora mismo te estás Presentando la cabeza no te preocupes Y cómo está Cómo funciona esto quién se encarga de hacer esta magia claro muchas veces muchos tutoriales y muchos cursos lo que pasa es que la gente se lanza directamente a aprenderlo con jsx con 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 se encargan algunas aplicaciones o algunas herramientas como swc o papel que es muy famoso es un transpirador de código donde tú le escribes javascript y lo que hace es transformarlo lo mismo te puedes hacer con swc estos son dos herramientas que son las que utiliza por debajo algunas empaquetadores de aplicaciones como puede ser webpack o como utiliza next Beat 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 punto create vale fíjate yo tengo este código creando el botón batton 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 1 2 3 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í jotas la
línea 1 y la línea 3 son lo mismo son Exactamente lo mismo Solo que este paso de transpiració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 javas lo que estamos escribiendo en ría cuando escribamos jsx no es que estamos escribiendo directamente html lo que estamos escribiendo es javascript pero estamos escribiendo con jsx porque va a Ser mucho más fácil que podamos construir nuestras aplicaciones nuestra y una forma mucho más declarativa Así que cuando ve a 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 dip 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 compilan
lo perfecto ahora que ya sabes todo el tema de jsx tenemos que saber algunas cosas que son muy importantes de j61 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 se ha quedado esté pensado se ha quedado pensado 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ías hacer el j6x 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 grande esto lo vamos a estar haciendo Constantemente en el club cuando tú lo pones entre llaves lo que estás diciendo es esto quiero que lo evalúe quiero que evalúe 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 declaración tienes que poner cosas que devuelvan un valor un 2 ejecutar una función que devuelve un
valor el más Random evaluar por ejemplo una constante Que tengas aquí no 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 se ha muerto Bueno lo que tenemos que hacer para especificar atributos Es simplemente muy parecido como lo hacemos en html Data ID 1 2 3 no esto sería la forma de especificar atributo vas a ver que en riac 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 jsx 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 Sola no y hacemos esto si esto va a saber cómo hemos visto antes si tú pones aquí un Element y pones el h1 que tenga
el response como hemos visto antes Esto va a poner aquí el out 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 instalar código dice no en h1 meter la respuesta Imagínate que esto es información que le está pidiendo al usuario quizá te voy a Hackear Vale pues Script vale 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 ejecutasemos este código y lo ejecutamos aquí que justamente podríamos tener esto en up 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í Voy a enseñarte este y ahora la amoliación el hacha no pero ahora no estoy usando el hacha ahora no estoy usando lamen no está antes de la com no sé si hay un punto y coma por ahí o algo que no le está molando a 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 lo mejor es que está intentando crapearlo o algo puede ser que ni siquiera lo haga otra vez si ponemos aquí Hola directamente Hola Esto sí pero si le ponemos Script y aquí Script Yo creo que ni siquiera que no que no rola pero que no no es por las comillas no por las comillas A lo mejor es por el colilín que seguramente es por el link 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 mucha gente le encanta empezar ahí de primeras ahí a saco ahora que ya sabes esto Ahora ya sabemos cómo utilizarse x 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 ría claro vamos a poder estar haciendo ahí en Cody link y hacerlos 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 que esto utiliza por debajo webpack 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 hay una mucho más nueva que va mucho más rápido o mucho más para mí mejor que es Beat que es algo que va increíblemente rápido y es compatible no solo con riax sino también con View y con otras alternativas Así que vamos a utilizar Beat 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 a la página 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 Beat lo que tenéis por aquí son ya las instrucciones que pone npn create mpm es el administrador de aplicaciones de dependencias de node y Tenemos create que sería el comando que lo hace es Buscar el paquete de
create y te empieza a hacer algunas preguntas en nuestro repositorio yo voy a crear un repositorio un mono repositorio multipanquete porque en este mismo repositorio vamos a tener un montón de proyectos te recomiendo que hagas lo mismo lo primero que vamos a hacer es un npn init menos y Esto va a inicializar nuestro proyecto ya vamos a tener un pack Jason Pero dentro vamos a crear una Carpeta que le vamos a llamar projects entramos en projects y dentro de projects vamos a crear el mpm create con fit arroba laters para que pilla la última versión
ejecutamos esto y lo primero que nos pregunta es el nombre del proyecto que queremos vale pues aquí le vamos a poner el primer vamos a poner Hola mundo para ser nuestro primer componente Para que veamos que todo funciona bien aquí podemos elegir el sabor tiene soporte para View para Priack esbelt pría que es una alternativa liviana de Ría que es muy similar pero vamos a utilizar ya y aquí ya nos dice si queremos utilizar javascript o tabscript si sabe tipscript nosotros vamos a empezar por ahora con javascript Pero más adelante utilizaremos type y además Fíjate
que está aquí más swf es lo que te he enseñado aquí justamente es un transpirador como Babel que es mucho más rápido porque está hecho con ras Nosotros siempre vamos a utilizar swg 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 a nuestro primer proyecto hacemos una imprime install para instalar las dependencias esto no debería tardar mucho y ya nos da dicho aquí
que tenemos que hacer un empeño para inicializar nuestro proyecto hacemos en pie en Randés y nos dice que ha tardado 300 milisegundos nos deja una dirección 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 ría con algunos archivos que funciona que tiene un poco 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 iniciado ya nuestro proyecto vamos a ver qué ha inicializado tenemos por aquí un nord que ignora para git Pues los archivos que no queremos subir a nuestro 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 DIF y de root que tenemos aquí vale súper importante y además tenemos este Script Time model que está cargando source/main.jsx este source barrame 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 transpiración que hemos visto Antes automáticamente vamos a ver qué más tenemos antes de entrar el source que 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 Ría y a
las dependencias de desarrollo tenemos bit y el plugin para que funcione react 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 barrame 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 en los tutoriales que ya vienen 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 día desde riac esto 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 de cerrado como lo habíamos hecho antes no cambiamos importado el módulo solo lo que simplemente ahora como lo tenemos instalado podemos utilizar el lugar del https ya podemos decirle la dependencia exacta que tenemos el nuevo módulo usando su nombre también en react client Como lo hemos hecho antes
no react barra client luego estamos importando un componente app luego veremos lo que es un componente y aquí estamos importando los estilos como bit tiene soporte a que puedas importar el css y te lo empaquete automáticamente pues ya tenemos aquí los aquí tenemos reactdown punto 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 que Hemos hecho antes No fíjate que aquí lo están haciendo una sola línea pero podríamos crear aquí la constante y aquí tendríamos Root punto render que lo hemos utilizado
antes y aquí tenemos por un lado el stick Mode que esto es una cosa de react que ahora te comentaré y aquí tenemos a por ahora para empezar con nuestro nuestro primer proyecto voy a empezar a quitar cosas porque no 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 los componentes y todo eso 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 importado el app porque he borrado este fichero también Ok y este fichero también lo he borrado Esto no 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 el botón vamos a poner aquí en lugar de la mundo podríamos poner el botón o la botón ya tenemos nuestro
olavatón que hemos dicho que podríamos hacer con el react fragment pudimos tener también más de un botón podríamos Jack 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 no 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 es 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 forma Imagínate que cada botón no solo tiene que poner olavatón Sino que aquí cada
botón también tiene que tener un pequeño iconito Nos vamos aquí sistema icons Por ejemplo existen Ah no me acuerdo si estoy muy guaycons y este envío ahí a ese encuentro con los de sistema tras como no estoy en mi sesión System Why icons svg que yo conozco iconos para que lo podamos utilizar un momento Bueno a ver si no puedo utilizar cualquiera pero icons que 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 8 y lo ponemos ahí en medio Pues a lo mejor dice ostra 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-onlinecap stroke Line join esto funciona funciona pero habíamos dicho que
si estos javascript esto tendría que ser con camel Case esto lo veremos más adelante y lo arreglaremos y luego tenemos otro problema Fíjate que este su eje es bastante grande si yo todos los botones quiero que tenga este su eje empezamos a tener el problema de que Mira vamos a poner esto que cada uno tenga este su eje no svg y svg vale los 10 en el vg pero que no se 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 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í o lavaton que los tener aquí Hola otro Baton queremos empezar que cada Botón se pueda cambiar y que los botones Hola desde otro sitio y que lo 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 de vista podríamos Crear una función imagínate podemos 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 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 8000 veces lo podemos hacer Tantas veces como quiera vale pero hemos dicho que queríamos cambiar también verdad Vale pues vamos a cambiar el texto vamos a poner aquí el text 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 pulsar el texto vamos a hacer el botón 1 el texto el botón 2 el texto el botón 3 guardamos los cambios y ya está ya lo tenemos pero esto está mal esto no Es como se tienen que crear elementos en ría aunque esto nos ha funcionado no porque al final está creando Pues un botón un
elemento y se está reutilizando en realidad en ría 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 ría que 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 vato y el lugar de hacer esto no de hacer un create Button donde tenemos una función
hemos dicho que queremos que sea declarativo Fíjate que esto es imperativo porque lo están haciendo eh crea un botón no le tengo 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 nuestra parámetro Es simplemente ponérselo como si fuese un atributo queremos que el Baton 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 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 que Pascal Case Pascal Case es así Pascal Case camel Case sería así y snake Cake sería así y que Back Case sería así nuestros nombres de los componentes tienen que ser pascalque y tobeyras bueno Pero por qué Por qué no puedo utilizar este Baton y ponerle un nombre en minúscula por ejemplo o no le puedo poner un algo así por qué no le puedo poner algo así porque no podría poner un Case y ponérselo así no
y utilizarlo así Si total es el nombre no que tengo fíjate Ha desaparecido pero el nombre es correcto porque esto no funciona y esto es súper importante esto no funciona porque los nombres de nuestros componentes siempre tienen que ser en Pascal que es porque es la única forma que react hace o que la riac tiene para no es por el traslado 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 especial Button no sabemos entonces para que no exista esa colisión lo que tenemos que hacer un día que nuestros componentes siempre sean azcalcase y nunca podemos utilizar sea todo minúscula ni nada de eso tienen 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 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 este componente de aquí no sé por qué solo me sale aquí en seguir una persona normal Ah mira sale
tres pero a ver no sé si lo veis o lo voy a pasar 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 la hagamos clic y vamos a ver cómo lo hacemos todo de una forma decorativa Así que vamos a vamos a hacer si os parece este esta
y de Twitter a ver si subo esto un poco para arriba y aquí podéis ver esta interfaz vamos a crear nuestro primera parte de la que además la podríamos utilizar en cualquier 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 retazos y vamos a crear aquí nuestra app por ejemplo y le deberíamos poner la extensión jsx tiene extensión jsx porque Esto lo que hace Es que le decimos al empaquetador de aplicaciones 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 dip
y aquí nuestra twittercard guardamos los cambios Ahora quiero utilizar el 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 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
Ahora sí que nos debería aparecer y ahí lo tenemos la Twitter Card empezar a estilar nuestra Twitter car vamos a ver qué información se necesita la Twitter Card vale vamos a ver la Twitter car a ver si vamos por aquí Twitter car 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 Ártico
el Ártico el dentro vamos a tener un header donde el header va a tener la imagen así que vamos a ponerle aquí la imagen shorts 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 pues pasa nada No pasa nada vamos a utilizar un servicio para un avatar punto iOS y en avatar.io vamos a utilizar por ahora este
Avatar vale si ponemos el deudor este este hombre tan bonito vamos a utilizar este hombre vamos a seguir viendo aquí el estilillo tendríamos la imagen Aquí vamos a poner alt esto sería el avatar de mi dudev qué más tenemos dentro del header aquí tendríamos dentro un tip para separar la imagen de lo de la derecha y aquí Tendríamos el lugar de un h1 esto sería más bien un strong donde tendríamos el nombre no que sería Miguel Ángel Durán y abajo teníamos la cuenta no aquí tenemos la cuenta vale vamos a poner Oscar me dudé y
a la derecha tendríamos lo que sería más bien el 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 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 riac de dos formas diferentes una forma que podríamos hacer es directamente podríamos aquí un Style y hacer estilos
en línea pero los estilos en línea no se ponen como si fuesen un Street no se ponen así si lo ponéis así Vais a ver que ha desaparecido todo que está dejado de funcionar y que si miramos la consola A ver qué es lo que 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íneas de esta forma pero sí que la podemos
utilizar como un objeto en el display dos puntos Flex y ya empezaríamos con esto empezaríamos ya a estelar tendríamos aquí el display Flex podríamos decirle que el color Mira Vamos a poner vamos a importar Aquí vamos a crear un estilo general para toda la página que tenga el body margin 0 para que no os quede ciegos que os conozco fue un family System vamos a poner un display grid con Place content Center así lo centramos vale Y este css lo importamos a del punto de entrada importamos index.cps y entonces ya al menos empieza hasta un
poco más estirada la cosa le vamos a decir también que esto como Mínimo tenga la altura así y así lo tenemos centrado vale pues aquí a nivel de la app podríamos empezar a estirar aquí no y nos podríamos ya ves que ahora sí que el texto está en blanco podríamos seguir con esto para que el Ártico pues hemos puesto podríamos centrar aquí Alan ítems importante utilizarlo en camel case porque si no no funcionaría Center no empezaríamos a ir alineando podríamos empezar a hacer esto y esto podría funcionar o sea esto sea 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 estirando aquí a veces puede ser que la tengas que utilizar ya sea porque tienes que poner un estilo en concreto que no puedes poner a nivel de css normal o por ejemplo para react en react native Esta es la forma nativa de añadirle estilos a tus elementos en ría Bueno ya esto que esta no es la qué podemos hacer Bueno lo que podemos hacer es crear aquí un nuevo Fichero le vamos a llamar
a punto css y aquí podríamos tener todos los estilos que ya los tenía hechos excepto este Todos los estilos de nuestra Card con el Ártico el artículo header Deep 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 ceses y ahora pues ya tendríamos nuestro componente bien estirado 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 árticol también lo va a oscilar 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 clashnic 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 ría quieres Añadir una clase un selector de clase tienes que utilizar clase esto para que lo Tengas en cuenta vale tienes que utilizar 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 Ártico pero lo mejor es que utilices algo Como por ejemplo puedes utilizar Sweet O puedes utilizar bem Yo te recomiendo Suite porque es bastante sencillo Sweet 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 Cat o podríamos ponerlo para ponerlo un poco más pequeño vamos a poner que W y vamos a poner follow Cat no follow podemos poner colocar ahora cada uno de estos lo podríamos estelar aquí en lugar de aquí tendríamos el header pues podríamos decir que otro classning colocar y aquí pondríamos header aquí podríamos tener por ejemplo la imagen también podríamos Poner clashning 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 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 Kart info este dip serial del info o sea este por aquí info este sería el user name estaría en info info username por ejemplo podríamos llamarle o ya Podríamos empezar a hacer alguno más info y usar name vale Y ya sólo nos faltaría el botón esto sería otra forma como lo podríamos hacer vale YouTube esto utilizar algo nativo a partir de aquí
hay un montón pero un montón de formas de añadirle estilos a riac por ejemplo se puede hacer se podría utilizar css modules Entonces ese modules ahora hoy en esta clase no lo vamos a ver pero sería una forma también destilar podríamos utilizar telwin Podríamos utilizar esta el componentes podríamos utilizar un montón de cosas pero no es react no se mete en la forma en la que tienes que estirar tus componentes puedes utilizar diferentes tecnologías que son agnósticas a react Pero esto es un curso de react entonces cada uno pues tenlo en cuenta de ahí lo
he puesto con 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 taiwing pero también hay catálogos de componentes como por ejemplo chakra que son componentes de Ría que puedes dar directamente utilizarlos y ya está ya te vienen Pues con su Estilo con algunas propiedades que cambiar y todo esto al final Eso es lo
importante lo importante 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 Kart jsx vamos a extraer esto que hayamos hecho aquí lo vamos a extraer a nuestro componente correcto que es este export function le llamamos Twitter follow Kart y Aquí hacemos un retum de todo esto importante esto lo podemos reutilizar no La base de la reutilización de
cualquier componente en reac la base de la realizació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 user name por ejemplo el nombre del usuario y ya está podríamos pasar más cosas o podemos tener el is following no para saber si No está siguiendo el user name es lo que deberíamos poner aquí entre llaves para que se aquí tendríamos el nombre del usuario para que podamos utilizar el nombre
de 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 estrés para aquí tienes dos opciones para hacer que este source Recupere de forma dinámica estoy usando name puedes hacer la forma sencilla creas una constante porque al final dentro de los componentes no deja de ser funciones puedes crear constantes dentro creamos una constante y match creamos un template String y aquí evaluamos
el user de perfecto y este image en este source vamos a decir vale como no es un 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 Pues en lugar de crear la constante directamente podrías crear el templete 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 llave La única cosa que puede 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 Twitter follow Card 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 East following el user de name vas a pasarle por ejemplo mi dudev 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 Twitter follow Card ya me dice que no puedo no puedo devolver
dos elementos a la vez así que qué tengo que hacer vale tengo que utilizar punto pero claro utilizar rías punto fragment es una forma un poco un poco rollo de estar repitiendo todo el rato lo mismo el reac punto fragment cuando quieras envolver dos elementos o más en react para poderlos devolver y renderizarlos sin necesidad de escribir el diafragment 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 que escribir rea 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 a mí no usaba ya sabes qué es lo que hay por debajo que ese react punto fragment que es el que hace la magia con esto ya tendríamos aquí justamente nuestros dos componentes de hecho decidme algo no de usuario decime un Nombre de usuario y lo ponemos rápidamente va mira feralt y Tenemos aquí creo que era Pablo Ah no me acuerdo de Hernández me va a perdonar Pablo Hernández vale la imagen veo que da igual a ver
Pablo aferalt no le está pidiendo la imagen Ah mira ahora sí tarda un ratito gonzi gonzi gonzi no sé cómo el nombre de usuario creo que nos concie elon musk Alguien ha puesto los más elonma vale es más vale elon más los más tampoco sale la imagen todo vas Nico Que hace que esté el punto para el pri del color azul así Ah esto pues una configuración vex Thunder vale vamos a poner otro y este es vanderheart vale Bueno veo que hay un error aquí en la ya vemos que hay un error pero esto es
súper importante 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áramos componentes al arreglar el error de los lo que encontraríamos es Que lo tení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 uai cuando creamos nuestros componentes reutilizables un error muy común es el decir a es que claro te falta un margin botton te falta un margin botum Y entonces alguien puede venir aquí decir margin botón no poner margin boton y esto visualmente lo arregla Pero esto está mal porque está mal porque este margin botón 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 más de un voto 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 no 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 vamos a poner un dip vamos a ponerlo en un dip
o en un sección 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 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 vale Así que esto sería como la mejor forma de hacer como veis
Había otro otro otra Pro que habíamos dicho aquí en el que teníamos que utilizar y todavía no la estamos utilizando Y es que es booleano aquí esteis following normalmente es moleano no lo estamos usando todavía pero tampoco se lo estamos pasando cómo le Podríamos pasar un booleano cómo le pasamos una prop ese parámetro a este componente pues simplemente le podríamos pasar volea no podríamos poner is following 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 Fall si es false pasaríamos entre llaves y ahora aquí en el Twitter Cars podríamos en la Consola si miramos Cuál es el valor de is following y guardamos los cambios y miramos aquí que lo que está llegando podemos ver que llega un trulls y dos and Define porque aquí estamos pasando un true un false y aquí no le estamos pasando nada Cuando tú no pasas una Pro e intentas acceder a ella el valor que vas a tener disponible es and the fan
lo cual a veces pues te pueden ir bien Por ejemplo si el is following si no lo pasas es and the find que sería un valor False y con eso pues ya podrías saber que no tiene ese esa información y a lo mejor no la quieren Mostrar lo mismo podrías hacerlo con los user names y todo ahora bien existe una forma de pasar el true de una forma más corta en lugar de tener que pasarle el igual ya avestruz le puedes pasar también is following directamente sin las llaves esto lo que va a hacer es
que vayas a pasarle el valor true como Pro Así que si volvemos a refrescar Fíjate que le Vuelve a pasar y esto lo vamos a hacer también con esos que están como undefine si ahora pongo así tenemos un true un false y dos 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 vale no existe la forma negada así esto no existe si tenéis que pasarle un false se lo tenemos que
pasar vale no existe una Forma negada de pasarle un shock hand 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 vamos 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 que al pasarle
el user name 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á at Y entonces a este user name podríamos at y usan vale Y esto sería una función que lo que hace es Añadir la 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 formated de forma user y este formame lo ponemos Aquí y ahora fíjate que Peta Por qué Peta porque
forma tíoser name es and the find estoy intentando utilizarlo y aquí no le estoy pasando el forma user name si intentando ejecutar una función que es and the find Es normal que podríamos intentar arreglarlo por ahora bajamos 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 va a saber que es súper importante en react porque siempre vamos a querer pasar funciones o callbacks para abajo vamos a creer 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 de datos lo Que sea y esto es algo aceptable totalmente aceptable dentro de las propias podemos decir el formato le podemos pasar esta función se la podríamos pasar aquí en todos los componentes acá y ahora aquí en el formato Lo tendríamos ahora ya 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 cómo puedes pasar una
función y tal hay mucha gente que le Cuesta vale un montón de gente que le cuesta esto de pasar 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 para hacerlo solo con tres Ah Mira vas a Quedar en lo más que no es colega y
vamos a formatear esto mejor para papá aquí acá pues igual que puedes pasar como parámetro una función en javascript también lo podemos hacer Exactamente igual con las propias le estamos pasando el formato 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 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 formatem que ves aquí es este que se ejecuta aquí donde le estamos pasando el parámetro user name y este suername que le pasamos aquí de que a veces será mi duda feral o 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 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 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 forma username esto de la función sinceramente a mí no me convence Esto de poner aquí el formation name no me ha gustado podríamos hacer otra cosa el lugar de formatear el vamos a hacer otra cosa vamos a en forma de sane voy a poner formated lo voy a pasar ya formateado forma y esta función que tenemos aquí en lugar
de hacer esto voy a crear aquí formatet user name y aquí en lugar de hacer una función vamos a tener un vamos a poner un spam dentro tenga la arroba y quitamos ahora te voy a explicar una cosa que es súper Importante en realidad y que hay gente que son simios que tienen cinco años diez años diez no pero casi que todavía no entiende Muy atento con él el formato lo vamos a pasar como Pro Fíjate que lo que tenemos aquí es un elemento un elemento de 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 usernet Ah Espérate que estoy usando que lo he Puesto aquí directamente claro Es que esto no va a funcionar tan fácil porque Se use al final lo tengo aquí el Pero bueno imaginaos que vamos a poner todos los que son Vale y lo ponemos así no normalmente lo que queremos Pero hay otra fijaos en una cosa Yo estoy creando aquí un elemento que está envuelto con un spam que a todo que pone arroba
miduder Esto se lo estoy pasando como prop o sea le estoy pasando un elemento y aquí estoy evaluando este elemento y Estoy renderizando lo por lo tanto si vamos a ver que está el spam este de aquí no que tener el classne es este spam y dentro está renderizando esto de aquí que es lo que le estábamos pasando por prop está renderizando el elemento que le estamos pasando desde arriba así que por eso te spam 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 ríack 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 ría eso es lo vale componente función que devuelve elemento y reac que es lo que renderiza el elemento por qué porque ahí lo tenéis no O sea si tú Aquí intenta renderizar entre llaves y evalúas un componente no funciona todo lo que ves aquí todo lo que veis aquí Son elementos y esto es súper importante Por eso es súper importante lo que os ha 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ás hablando porque si no puedes 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 el arroba y ya está Vale dejamos ahí quitamos el formato 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 ya tenemos clarísimo entonces todo el tema de las pros otra cosa y un error muy común
tienes que tener en cuenta con es que cuando le pasamos una Pro las propias son un estado o sea las propias deberían ser inmutables Qué quiere decir esto Si yo le paso aquí el username y Digo Ah no pero el username con lo estoy utilizando Aquí voy a hacer que usan name you sarney sea igual a @josa 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 pro estás Estás cometiendo un error muy bestia básicamente estás como evitando que
riac tenga la seguridad de lo que está renderizando lo que tienes que hacer en lugar de modificar la pro en Lugar de modificar la propia tienes que hacer A lo mejor es crear una constante vale creas una constante con otro nombre y usar name con lo que tú quieras que no se llame igual que la pro y ya está nunca jamás modifiques ni mutes una Pro Por qué como Pro ya veis que también podría se le podrían pasar a Race podríamos pasarle una Rey aquí por ejemplo podríamos tener numbers no que sea y esto se
pasamos a todos no imaginemos Que estos son como las veces que queremos Mostrar algo le podríamos pasar al rey El rey llegaría por aquí numbers y alguien puede decir Ah pues numbers 4 pues ojo con esto vale porque esto sería mutar una Pro las propias 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 rey lo que sea a la hora de Trabajar con las OK
Así que nada de modificarlas muy bien Vamos a quitar el nombre este vamos a dejar por aquí luego más adelante veremos Cómo renderizar a Race Así que no os preocupéis y Solo queda una cosa más para para terminar con las props o dos cosas más que son bastante importantes y bastante interesantes uno como pasa con html por ejemplo cuando ponemos el Baton Fíjate que el Baton para indicarle qué texto tiene que renderizar lo que hacemos Es Envolver el texto no estamos envolviendo el texto Button con 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 Baton Están volviendo es 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 puedes utilizar a nivel de componentes por ejemplo Imagínate que en lugar de pasarle el nombre como una prueba Así vamos a hacer que el nombre envolvamos nuestro componente con el nombre
así que vamos a 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 como puedo recuperar el Pablo Hernández si vuelvo aquí claro ahora no le estoy poniendo un nombre hasta no sé cómo se llama exactamente esta si vuelvo aquí fíjate desaparecido el nombre y Cómo puedo recuperar este nombre pues existe una propia 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 Vale ahora podemos quitar el link 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 componetizable 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 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 cuándo sería interesante esto no 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 en h4 un párrafo lo que tú quieras no O puedas Meter incluso 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 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 asiye Y fíjate que 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 Twitter podríamos crear aquí un Twitter follocar con el user name 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 árbol 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í y en la cadena de texto vamos a poner que esto sea en 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 usa el parámetro con nombre reservado children siempre se tiene que utilizar childrence cuando quieres ceder a este Siempre tienes que utilizar el children y no puedes
utilizar el chile de todas formas 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 and the find entonces Utiliza este Igualmente no utilicéis nunca children como Pro normal el children utilizarla siempre para para esto nunca utilices como el chino normal nunca nos dice como normal y para usar varios children Pues es que puedes utilizar aquí tanto como quieras ves Miguel Ángel Puedes utilizar tanto como
quieras A ver siren solo puede tener uno eso 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 el que tiene todos los dentro o sea children 1 dentro de children todos los elementos 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 user name Imagínate que no me viene aquí no me viene el username no me viene el username pues ya la hemos liado Porque fíjate este 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 Vamos a darle un valor por defecto que va a ser a no para que sea pues no 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 Pues en 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 chiles 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 tiene vale Y finalmente otra cosa para que lo tengáis en cuenta con el tema de las props es cómo 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 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 Preguntas Imagínate que tuviésemos eso en Pues en un objeto no podríamos tener aquí el miduder Y tenemos is following tomamos como true y usar name mide Y tenemos aquí feral también que es is following Falls y el username es feralt vale perfecto Imagínate que le quieres pasar todas estas props de golpe y no quieres pasarlas allí a mano una a una porque son muchas props o lo que después lo
que puedes hacer es poner llaves y pones Punto punto punto 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 punto feralt Y esto funciona Exactamente igual lo que está haciendo es esto es el resto operator el resto perito lo que está diciéndoles Pásale cada una de las propiedades de este objeto como si fuese una Pro para mi componente Twitter follow Card Y eso justamente lo que está Haciendo ahora bien Esto es medio
Málaga mala práctica a veces puede tener sentido porque el objeto muy grande o lo que sea pero normalmente esto uno estás invirtiendo Muchas veces información que no necesaria 2 esto puede ser que haga que el componente por temas de optimización se renderice o se renderice sin necesidad esto lo veremos más adelante no 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 Baton 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 Este es un poco polémico eh un poco raro ese color vamos a utilizar mejor Este vale
vamos a poner una transition is all Bueno ese solo background color Pero bueno al Gran color y ya está Vale vamos a ponerlo tampoco 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 cómo funciona esto y es que estamos haciendo este componente quiero que cuando la idea 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 cómo funciona cómo está haciendo cómo cómo está haciendo Twitter esto realmente esto lo está haciendo en base a un estado Qué es un estado esto es súper interesante es 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 siguiente 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 ist following para asegurarnos que podemos tener como Tanto que se vea como que no se vea ya tenemos una Pro 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 East following vamos a pasar este is folloween este y este esful verdad vamos a seguir 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 mucho más fácil entonces este texto de seguir va a cambiar dependiendo de si lo estamos siguiendo o no estamos siguiendo Así que a esto Vamos a evaluar el Tec ahora ya vemos que tenemos uno siguiendo y el otro que no es siguiente también podríamos cambiar incluso los colores o sea podríamos tener estilos diferentes entre si estamos siendo o no estamos siguiendo para eso aquí podríamos decir el Button
classne 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 folloween 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 car batton y además la clase es following y el botón normal y este Button classnim se lo podemos pasar aquí esto que estamos viendo ya es la clave para hacer que ríack sea Dinámico para que vaya respondiendo a todos los
cambios que vamos a vamos a hacer que en el botón classnic Cuando esto por lo que sea ya Está siguiendo vamos a poner is following Vamos a ponerle un borde de un píxel rojo con un background claro es que me gustaría ponerle un rojo clarito pero no sé por qué no me pone Bueno luego 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í a dejarlo following bato vale vamos a dejarlo con él vamos a dejarlo con eso rojo y ya 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 ahora sí que lo vamos a hacer aquí rojo y ahora sí lo vamos a ver bastante más bestia 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 vale Ya los lo tenemos todo pero ahora lo que nos falta es dotarlo de vida lo que tenemos que decirle Es Vale
Cuando hacemos un clic Cuando hacemos un clic queremos realmente que cambie el color o sea queremos que cambie el texto que cambie el color queremos que cambie todo vale Cómo podemos hacer esto podemos hacerlo vamos a hacer aquí en el Index up vamos a quitar esta Pro porque en lugar de ser una Pro vamos a hacer que sea un estado necesitamos que tenga que sea el propio componente el Que decida cuándo tiene que Mostrar uno u otro vale entonces Cómo creamos un estado Cómo podemos tener esa memoria Cómo podemos hacer que el componente diga Oye
ahora estoy haciendo esto lo otro no 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 Ría le he llamado utilidad pero en realidad se le llaman hooks Y esto los hooks son la vida en riac 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 reac para dotar todavía de más funcionalidad tus componentes en diferentes puntos del renderizado en este caso el Us State Para qué nos va a servir el usa 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 Us 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 encendida las luces el estado inicial sería false todavía Nadie encender la luz en el State esto nos devuelve una Rey una raíz 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 cambiarse La luz está encendida o no ahora esto es muy muy muy muy muy muy largo no 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 tiene de una Rey o sea este me está devolviendo una rey 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 no vamos a quedar con eso ahora este following ya lo podemos utilizar directamente pero en lugar de utilizar el de la pro vamos a utilizar el del estado y nos faltaría este set is following 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 add listener pero ya hemos
dicho que en react es bastante declarativo O sea no le vamos a decir at evely no le declaramos lo que queremos hacer así que vamos a decirle onclick me ejecutas una función y la función que me tiene que ejecutar Podrías poner aquí una Arrow directamente vamos a poner aquí handle click y esta función handle click la vamos a crear aquí handle click y esta Función con una Arrow funtion vamos a ejecutar el sets following y vamos a hacer que le dé la vuelta vamos a decir vale si el valor que teníais following era true ahora
es falso y si es false ahora esto así que para eso hacemos esto cuando hagamos clic en el botón vamos a cambiar el estado vamos a cambiar ese interruptor y vamos a decirle Vale pues Ahora decimos sets following Vale pues le das la vuelta vamos a pasar de true a false o Dependiendo del valor que tú y si guardamos los cambios ahora y le damos un clic ahora vemos cómo 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 mi dudev 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 at the Belice
en el que habíamos visto al principio donde guardas el estado donde 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 Haz borra
esto cambia el texto no son Las instrucciones paso a paso de lo que tiene que hacer pero con ríack 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 estéis Viendo es esto es así y es así pero no estoy diciendo este
botón tienes que hacerlo así sosti 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 vean muy claro para que te hagas a la idea exactamente de que es declarativo versus imperativo tienes de 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 esos 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 la gente 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 creativo es muchísimo mejor vale o sea no hay ningún tipo de dudas siempre por eso la Programación funcional que está basado en código declarativo Normalmente se 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 código imperativo o sea tampoco 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 tener los cambios de forma imperativa hace 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 ayuda y aquí está declarada no no estamos diciéndole paso a paso todo lo que tiene que hacer para actualizar la y 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 Ría Porque
alguien dirá Oye vale es Declarativo pero que está pasando aquí cómo está esto que tú le das aquí y esto se vuelve a renderizar automáticamente Esta es la clave de donde viene el nombre de riac de reaccionar no de la reactividad que tiene ría cuando el estado cambia cada vez que cambiamos el estado lo que hace ría que es detectar el cambio de estado y reflejar los cambios en lawit pero Viene otro de los conceptos mucho más importantes famosos y también polémicos de Ría que es el Virtual Don 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 don 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 renderizarlo Y tal Pero es que en riak no ocurre esto y ahora vas a
ver en marcha lo que es el don virtual Qué es el dom Virtual y es una de las de los conceptos más interesantes y más importantes de riac y ahora más polémica 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 ría que 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 cambia Cómo hace esto reac lo que hace Es que le hace una foto a todo lo que renderiza toda la hace una foto Dice vale Esto es lo que ha renderizado la primera vez no o sea esto es lo que ha renderizado esto lo tengo renderizado no recupera esto lo tiene aquí Ah tiene esto por aquí dice Vale pues lo que ha renderizado es esto de aquí no esto 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 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 uai 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 re renderice el componente una es que se actualiza el estado interno cada vez que se actualiza el estado interno de un componente reac entiende que tiene que volver a renderizar el componente
para reflejar los cambios pero solo aquellas Partes que han cambiado forma en la que puede re renderizarse un componente es cuando un componente padre se vuelva a renderizar Y entonces propaga los cambios hacia abajo Mira Imagínate que tenemos aquí el 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 Us State y vamos a poner aquí en el Us State vamos a poner el name vamos a poner que el nombre por defecto es mi dudez pero Vamos a poner un botón
vamos a poner aquí un botón que cada vez que globo pulsamos cambio el nombre cambio nombre así que hacemos uno un clic hemos visto antes Cómo 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 un clic pues puedes hacer vale pues cuando le haga voy a cambiar el nombre y como Us State voy a poner otro nombre por ejemplo Pedro mikel vamos a crear Pedro mikel Ok guardamos los cambios ya tengo aquí el cambio de nombre este nombre se lo vamos a pasar aquí en lugar del de mi duda lo vamos a pasar aquí Qué pasa Cuando se renderiza al principio valor inicial es mi dudez pero cuando le dé un clic aquí a no sé por qué me ha parecido
este no sé si es que ha apretado el servicio Bueno cuando le dé aquí debería cambiar este nombre de mi dude pues no lo hace vamos a ver ahí qué puesto yo estoy Perdón perdón es que estos set name vale esto Esto no es así ya hemos visto aquí que el Us State devuelve una rey de dos posiciones entonces la primera posición es el valor del nombre Y la segunda posición la forma de actualizarlo ahí ahí está Eh entonces primera posición valor del Estado segunda posición Cómo actualizar el estado y tengo 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 Mitch él y ha cambiado la imagen también Cómo funciona esto lo que está pasando es que aquí si ponemos un consort vamos a poner aquí en Render with name y vamos a poner ahí el nombre no vamos a poner Qué nombre ha renderizado si yo abro las herramientas de desarrollo fíjate nada más entrar este conslock se ha renderizado este componente app al menos una vez con el nombre miduder se
renderiza y ya está ahora esta app tiene un estado que lo vamos a cambiar vamos a cambiar el nudef por el de Pedro Michel le da Hoy le voy a dar qué ha pasado aquí ha vuelto a renderizar a renderizarse la app pero Con el nombre Pedro mitcher 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í con softlock render bueno con esto vamos a poner aquí Twitter colocar render with user
name y vamos a poner aquí el usan y vamos a ver cómo se propagan los cambios vale Esta es la propagación de cambio 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 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 el en el 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 lo pagan 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 miudez se renderizan los dos componentes el de miduder 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 Gap
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 mitchel para reflejar los cambios pero también el de ferral Y esto es algo también que tienes que tener muy en cuenta cuando se vuelva a renderizar un componente padre también se utilizar el hijo independientemente que sus pros hayan cambiado por ejemplo aquí feralp no han cambiado sus propias 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 cuesta mucho y esto es muy importante muy muy importante Así que Oye esto es nuevo han cambiado 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 el 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 exactamente como lo tenemos aquí que este es el Twitter follocan no tenemos un Twitter follock vamos a ponerlo más pequeño betterfalcar y otro Twitter fo 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 print y se pone en se pone en rojo no O sea hay una actualización de estado Plim Qué pasa que entonces esta actualización tiene que ir aquí
para actualizarse Plim y también va aquí y esto pasa independientemente de que las propias hayan cambiado Imagínate que aquí pues se le está pasando este es mi dudev y ahora aquí se está pasando venga Imagínate cambio de estado Vale pues se cambia esto otra vez de estado Plim y ahora este mid cambia y cambia a Pepito Vale pues Pepito le llega a Twitter colocar y esto Qué hace pin se actualiza pero es que este aunque será 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 renderiza lo mismo aunque el código se ejecuta igual lo que pasa es que no renderiza Nada en el dom son dos 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 sí Que se actualiza pero solo las partes que cambian pero por más que le doy en feralt no veo que el dom
o sea el html que se renderiza no veo que cambie Pero El hecho de que no cambia aquí el dom no significa que en la consola no se haya vuelto a renderizar y aquí podéis ver cómo se está renderizando con el nombre de Pedro mitchen 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 reac ve que Ah pero es que vas a intentar renderizar lo mismo entonces real lo que hice 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 feralt por ejemplo Pues a lo mejor este sí que cambia cambia pues este pin también tendréis vale eso sería lo que tenéis que tener en cuenta Cómo se propagan los cambios pero sobre escribe el don 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 eso 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 que es la diferencia del dom y shadom no tiene nada que ver shadown no es algo Que tenga que ver con react todos los hooks renderizan de nuevo ahora mismo
Solo estamos viendo el Us State cada Hook sirve para una cosa diferente entonces como observa una cosa diferente hay algunos que sirven para actualizar el estado y hay otros que no Entonces no significa que todo rendericen el estado y te deje quedar con eso sirve para eso de hijo a padre de hijo a padre no se pueden pasar props te pueden pasar al pasarle un callback lo podemos hacer si Modifico desde el padre una Pro se renderiza en el componente hijo En lo que acabamos de ser el ejemplo acabamos de hacer Tokio Dark es el
ejemplo no O sea mira aquí en up con el State estamos modificando una Pro 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 a 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 excelente curso entre tarde sea todos los
miércoles sea todo miércoles el precio sea comparación entre el Virtual domi se llama Reconciliación verdad le puede llamar como quiera la verdad sí que le llaman Rocket pero ya está no usa local storage no no usa lo que el storage porque no Estamos usando lo que el storage dijo padre es con use imperatic handle pero se usa para funciones nodato Es correcto que sea lista fuese de 100 elementos y cambia uno solo se renderiza todo el resto de igual manera hay formas de actualizar esto podemos hacer y hay formas de evitar que si este componente
No cambia nada que no se renderiza y Eso lo veremos más adelante a la hora de hablar de las optimizaciones vale es lo veremos más adelante para hablar de las Optimizaciones existe un Hub 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 Hughes para para eso vale una cosa importante que para que lo tengas en cuenta es Cómo se escriben comentarios en el jsx Como ves los componentes en react no dejan de ser no deja 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 sí que funciona esto funciona pues no no funciona casi pues esto los comentarios de toda la vida javascript es todo 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 se metes aquí aquí dos barras va a renderizar ahí lo vas a ver Claramente 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 nos 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 retum pero sin 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 jsx tienes que utilizar las llaves y tienes que utilizar barra asterisco o 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 que le había 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 mi duda vale esto es otro error que
incluso gente que tiene muchos años de experiencia lo sigue cometiendo y tal vale os hemos dicho te he dicho que teníamos esto de seguir seguir y tal no 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 Pro porque al final una pro 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 mi dudev por lo tanto el
botón seguir debería aparecer como dejar de seguir aquí Podrías poner is following y aquí deberíamos poner a true no O sea ya lo estamos siguiendo si yo pongo esta pro y miro a quién la ayuda y aquí es todavía me aparece lo de seguir Claro Qué tengo que hacer pues tendría que utilizar esta prop y following y utilizar este valor como valor inicial del US State Así que en lugar de utilizar el false lo que podemos hacer es is following pasarle este este valor inicial como aquí lo que tenemos a ver qué le pasa Canon
claro es folloween 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 Pro que sirve para inicializar un estado la buena práctica Es que le llaméis inicial is folloween ahora ya tienes Claro que es el que vamos a seguir de forma inicial no así que aquí vamos a poner inicial is folloween y esto lo utilizamos como valor inicial del ahora si cambiamos Ves Ahora sí que tengo que este ha iniciado como siguiendo y este Cómo seguir y
en cambio Si le doy a este pasa a seguir Y si le di a este pasa siguiendo si Reiniciamos como empieza con el valor inicial o sea esto lo que nos ha permitido es utilizar una Pro para inicializar el Estado hemos inicializado el estado de nuestro componente Así que como los 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 cómo 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 pro de estado inicial y creemos que mágicamente hace algún tipo de de nexo y que va a hacer que se propaguen los cambios del Estado del Padre hacia el hijo y eso no lo vas a ver con un ejemplo muy claramente que aquí
solo tengo voy a quitar al Bono de Pablo Imagínate que solo tengo al menú de Fester 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 es following este estado del padre se lo vamos a pasar como prop al hijo y en el hijo vamos a utilizar este esta Pro 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 Card los dos tienen un estado el estado de la app lo estamos inicializando aquí y lo tenemos como Us 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 vamos a poner esto aquí para que veamos cada vez que se renderiza la aplicación y que cambia no En cambio cuando tenemos aquí el estado inicial ves que pone inicial 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 Falls o sea está cambiando pero qué está pasando porque si se lo estoy pasando como Pro 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 Pro para inicializar un estado se inicializa una vez no sé reinicializa cada vez que la Proc cambia Así que siempre siempre
que utilices una Pro para inicializar un estado tiene 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 sigue cometiendo una y Otra vez así que siempre que vas a utilizarlo como estado inicial utiliza inicial is following para que te quede clarísimo y luego ten en cuenta que si se inicializa solo lo inicializadas 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 vale
pues qué os parece si con todo lo que hemos aprendido hacemos un proyectito yo creo que podemos hacer un Proyecto y con el proyectito igual os puedo enseñar os puedo explicar otra cosa otra otra cosa podemos hacer un jueguecillo que es el de podemos hacer el juego del tres en raya podemos hacer el juego del tres 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 es following lo quitamos porque ya hemos visto que esto lo vamos a necesitar
vale esto os voy a dejar el ejemplo para Subir esto ahora Así que Twitter follow Card Twitter follow Card vamos a poner aquí al Bono de feralt 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 perfecto ya Lo tendríamos por aquí que podríamos hacer a ver bueno primero voy a intentar resolver vuestras dudas Oye mi duda tu aplicación es de Gracias pero cuando Cambia el estado del
componente padre no se vuelva a renderizar Y eso no debería cambiar la iniciación no porque inicializar el estado solo ocurre una vez vino con British tened en cuenta una cosa tened cuidado con una cosa tener 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 le dice pero cuando cambia el estado del componente padre no Se vuelve a renderizar y no se debería cambiar la iniciación al 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 no que pensamos el Cómo Debería ser y no Y 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 bastante fácil si queréis lo
hacemos si queréis hacemos esto y dejamos para el siguiente hacemos lo otro la buena práctica para resolver eso es no utilizar no 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í 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 tienes que hacer es Esto lo que hace es jugar con él dejar de seguir o sea lo que hace es tener dos textos aquí aquí tiene otro spam que pone dejar de seguir Entonces vamos a hacer este este efecto vamos a hacer exactamente el mismo efecto vamos a hacer ese dejar de seguir vamos a poner aquí un Clash que va a tener Twitter
follow cam vamos a poner estoy pensando follow stop follow vale stop Entonces el Stop follow lo que tendríamos que hacer En stop followe este stop follo colocar Ah bueno yo uso más fácil bueno no este stop follow lo que hace harás chulo porque hemos hecho un componente real que está bastante chulo o sea está bastante chulo vale utiliza un display Non 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 unos 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 en un bebé más o menos más o menos ahora ya nos quedaría solo El Paso sucede claro cómo cambia entre uno y otro a ver ya veis que siguiendo y dejar de seguir claro siempre tiene como en la misma anchura o sea cuando está Siguiendo siempre te anima 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 y que no sé por qué no me sale el color picker sabes color picker Por qué no saco pique cuando pongo encima color decoraditos y lento normalmente cuando pones aquí un color debería css 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 Ay
Espérate que esto esto lo puesto en el que no pero teníamos el siguiendo el siguiendo no Este joven simplemente es un poco de opacidad o sea esto sería un opacity 8 por decir algo y este hover este Joven se lo dejaríamos al folloween esto tendríamos 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 botón estamos haciendo Lis following además estamos haciendo dos veces eso hay que hacerlo a la vez ya empezamos a tener un poquito más
mejor esto y además el color el color sí que parece que es rojo o 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 aquí es Transparente también o sea es que este fondo es o muy transparente o sea o casi no se nota A lo mejor rojo pero es muy muy transparente muy transparente Así que algo así no y ahora lo único que tenemos que hacer es la magia entre que cambia una y otra no
un tenemos 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 blog y Ahora lo que tenemos que hacer es quitar el siguiente vamos a hacer esto un poco más grande 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 spam tendríamos que tener otros pan lo podríamos mover O lo podríamos poner follow tenemos
el texto podemos poner batton text o text y el text ya Lo tendríamos ahora lo que hacemos aquí esto con Sería mucho más rápido pero Bueno no pasa nada no pasa nada podemos hacerle que el texto que sea por defecto que sí que se muestre este vamos a hacer que el texto tenga el display blog pero cuando esto está con el following o low Card Button y following esto display no Y la he liado por algo Ah perdón es que esto es cuando hacemos joven Cuando hacemos joven y con esto con esto ya lo tenemos
con esto ya lo tenemos veo que hay una opacidad por ahí que claro este opacity Sólo tiene que ocurrir y no está siguiendo creo que debería ser así si no está así pero bueno Más o menos y con esto ya tendríamos con este ya Lo tendríamos ya tenemos justamente el mismo componente el mismo componente ahora voy a explicar la el renderizado de listas que es bastante importante vale Y entonces así ya tenemos hombre Paco Paco hombre Muchas gracias por la raíz de 70 personitas Muchas gracias Mira esto ya vamos aquí con programación A tope que
he hecho un curso desde cero de Ría que es una tecnología súper chula y Súper Interesante pero muchas gracias hombre Paco por pasarte crack espero que te ha gustado el tráiler de ámbar eh que está está bastante bastante interesante vamos a poner esto así y así ya quedará mejor vale Vale pues solo para que tengamos 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 fetch y nos llegan ya los componentes y ya está no
sino que lo que tenemos realmente es un 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 users que es una rey de objetos donde ya tengo el user Name tengo el name y tengo si está si es folloween o no es folloween y lo mismo con el usernet Tenemos aquí el bono de feralt
que no nunca me acuerdo y me va a perdonar y tenemos Si es following Falls y vamos a tener aquí un montón de usuarios no vamos a tener aquí también a Paco des también vamos a tener namepaco es following vamos a decir tú vale Y así todo el rato a ver alguno que te me eche teme Chain temecen y ya con este renderizamos vale Tomás vale Ok Tomás Bueno tenemos una una lista de y obviamente normalmente la lista de usuarios lo que queremos renderizar O sea no queremos no podemos tener los componentes ya hechos lo
que es decir vale quiero renderizar este array con el componente Twitter follow Card Cómo hago esto Cómo puedo renderizar esto no vale por lo que tenemos que hacer en este caso es utilizar javascript y esto es lo mejor que tiene react que es que 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 lem y Alice following y esto 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 lógico y user name user name tenemos inicialice following pues lo ponemos si está siguiendo no está siguiendo el Kia ahora lo explico y El full no me acuerdo sea full name o era name es children Vale pues no pasa nada si es como children Pues el Child ponemos aquí como name y ya está guardamos los cambios de esto y ahora ya vemos que ya tenemos los 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 no en el que Lo único que tenemos que hacer y esto es lo mejor que tiene ría que no deja de ser javascript es javascript que quiere renderizar una lista 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 programación un pseudo lenguaje ni nada Es simplemente javas 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 No 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 retur 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 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 riajsx Unique y no sé qué Qué pasa cuando renderizamos una lista de elementos una Rey en reac tenemos que Añadir también la aquí tenemos que indicar la aquí y por qué tengo que indicarla aquí Para qué sirve la aquí qué es esto la aquí es un identificador único para ese elemento Por qué Porque riac tiene que saber cómo le estamos renderizando una red tenemos que indicarle de decirle
Oye como vas a utilizar el dron Virtual para que seas capaz de saber exactamente a Qué elemento me estoy refiriendo Dentro de este rey te voy a identificar el Elemento de la red 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 aquí tiene la Fíjate que te dice Oye que he encontrado dos childs con la misma aquí entonces la gestión 1 y casi 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 aquí tiene que ser único otro error muy común que a Veces es posible es utilizar el Index puedes utilizar el Index si tienes Claro que siempre es 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 problema Entonces lo mejor es utilizar como aquí algo que sepas que es único de ese elemento en este caso el username no tiene
sentido que se repita podemos utilizar your name Si la base de datos te devuelve un ID utiliza la ID si puedes a 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 utilizarla 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 Linde es lo que hace realidad por defecto por eso no tienes que hacer a
ver por defecto os va a dar o va a utilizar el Index seguramente pero no es buena práctica evitarlo un ID solo es una práctica si la habéis creado previamente o sea si la habéis creado aquí o sea tenéis que crear aquí no utilicéis un uui ID aquí porque entonces la Vais a liar por ejemplo utilizar un Mazda Random también es mala práctica porque lo que le estáis diciendo es que Cada vez que se renderiza esto son distintos Entonces no tiene sentido no no tiene sentido no no tiene sentido no tiene sentido siempre que hayá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 te da 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 idea de base de Datos eso sería lo mejor lo mejor sería ID de base de datos eso de lejos y de base de datos Luego si no la ID de base de datos algo que sea único por ejemplo el user name suele ser único
aunque no sea la idea un date Now tampoco pero a ver un dignado 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 tener otro usuario a ver para que veamos el problema es Porque es que estáis poniendo cosas vamos a poner aquí cero vamos a por aquí más Random que un date Now es como es como más Random Pero bueno Button click set State vamos a poner lo primero es que un dignado 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 abono Mira Claro si va Lo Suficientemente rápido así que Vais a tener un Warning porque el Day 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 Kiss es un problema no utilices el del Now tampoco el más Random el más Random no Identifica nada Lo único que estáis haciendo es darle una aquí 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 aquí fíjate cuando cambia el estado de la app se están renderizando todos los elementos todo todo se está reenderizando todo
ves se renderiza todo Porque no los estoy identificando riax se cree que son nuevos se cree que son nuevos entonces fíjate con el user name el user name cambia el count Este cambio este count Y esto no cambia Así que nidate Now más Random No utilice más Random que el más Random también lo mejor la base de datos la ID y si no otra cosa que sea única el single for al final para utilizar un simple Ford tendrías que utilizar algo único para identificar el single Así que tampoco Dónde se puede utilizar que sea único
si podéis hacer aquí el símbolo antes vale claro Aquí sí que lo podríais hacer todos los inmbols 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 fecha de datos no va a dar una idea única y no vamos a tener este tipo de problema no la idea por lo que veo tampoco el símbolo no en soporte type O Sea que no soporta símbolos O sea que los símbolos tampoco sirve que nada que utilices una idea en condiciones y
ya está que no la leéis vale que no la lees no la lies venga os voy a dejar todo este todos estos códigos todos estos códigos git noir vas a poner el package.json bitconfig os voy a dejar todo esto vale at componen bueno at First cla sincronizados los cambios y ahí lo tenemos vale para que lo tengáis mira venios está pasando el repositorio O lo paso Sí sí aquí el y el ID Pues 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 algunas 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
![90's Chill Lofi | Lo-fi Music for Relax 🎶 Beats To Relax / Study / Sleep [lofi hiphop mix]](https://img.youtube.com/vi/AbGnO5kuUus/maxresdefault.jpg)
