Hoy vamos a hablar de React desde cero.
Vamos a hacer una introducción un poquito a React.
¿Qué es React? ¿Por qué creo que deberías aprenderlo?
En mi humilde opinión, un poquito.
Y sobre todo, ¿por qué lo necesitamos?
Y a partir de ahí vamos a ir viendo un poco a poco cómo funciona React.
Desde Medellín, Colombia, tenemos a Andrés Felipe.
Voy saludando, así vamos dando tiempo que se va conectando todo el mundo.
Vamos a ver hooks. Veremos hooks, ¿sí?
Porque es que hoy en día solo tiene sentido ver React con hooks.
Sé que hay muchos de vosotros y de vosotras que habréis hecho mi curso de Udemy
y que en mi curso de Udemy no se ven los hooks.
Y es porque el curso lo hice hace dos o tres años y nunca me dio tiempo a actualizarlo.
Entonces, nada, el caso es que se quedó un poco así, pero para eso lo puse gratuito.
Creo que los conceptos siguen estando bastante guay.
Os dejaré el enlace abajo en el vídeo de mi curso de Udemy por si queréis verlo y probarlo.
Pero ya os digo que no tiene hooks y eso sí que lo vamos a intentar ver hoy.
Y cualquier cosa que se queda a medias, pues lo veremos mañana.
¿Qué más? Pasa link del curso de Udemy.
Luego os paso el link y si alguien lo tiene...
Bueno, creo que no se puede poner enlaces en el chat.
Si a alguien lo intenta pasar, pues no podrá dejar.
¿Podrías explicar cómo hace una MPA en lugar de una SPA?
Me lo apunto. Es una cosa que tengo apuntada y que miraremos.
¿Qué más? Invita a Horacio para seguir viendo GraphQL, Apolo con hooks.
Le invitaré a ver si se viene.
Héctor Manuel Rojas desde Colombia.
Vaya, un montón de gente desde un montón de lados.
Jonathan Orellano desde Bogotá, Colombia también.
Desde el otro lado del charco.
Muchas gracias a todos y a todas por estar aquí.
Espero que estéis todos súper bien, dentro de lo que cabe.
Sobre todo los que estamos aquí cerquita con el confinamiento.
Pero espero que estéis bien.
Vale.
Hoy vamos a hablar de React.
React, que como sabréis, yo soy un amante.
Me encanta esta biblioteca de Facebook.
Y muchas veces me gusta hablar sobre ella.
Y hace tiempo que no hablo sobre ella un poco desde cero.
Porque creo que las cosas han cambiado.
Y hay una cosa que sé que me gustaría explicar.
Un poquito al menos por encima.
Sé que hoy, en el tiempo que voy a tener,
no voy a poder explicar todas las cosas que me gustarían.
Pero al menos os quiero hacer un pequeño ejemplo
de por qué React es importante.
Y vamos a ver cuál es la gracia que tiene React hoy en día.
Así que veremos un poco desde cero, desde el HTML,
cómo ir poniendo React poco a poco.
Y hasta dónde podemos llegar para tener un proyecto
más o menos con cara y ojos.
Y vamos a ver todos sus conceptos.
Voy a intentar ir leyendo el chat.
Si me lo permite, pues un poco el leyendo de la pantalla y esto.
Pero ir preguntando.
Intentaré conectarme y ver.
A veces puede ser que me equivoque.
Seguro que me podéis echar una mano en el chat.
Somos 350 ahora mismo que estamos online.
Y solo os diría que os animo a todos y a todas a que os suscribáis
para que no perdáis los siguientes clases que tengamos aquí en directo.
Porque cuanto más seamos, mejor nos lo pasaremos y tendremos más temas
de los que hablar seguro y la gente tendrá más dudas y más temas irán surgiendo.
Así que voy a compartir mi pantalla y vamos a empezar un poquito con esto.
Vamos a hacerla más grande.
Aquí estamos.
Bueno, alguien ya me pregunta.
¿Prefieres Vue o React?
Bueno, la verdad es que prefiero React.
Y si hoy hacemos esta clase, sobre todo es un poco para intentar convenceros
a todos y a todas de que React es seguramente ahora la mejor opción
en el sentido de lo que vamos a ver.
Que no os quiero hacer spoiler.
Pero Vue sigue siendo una alternativa buenísima que os recomiendo muchísimo
y creo que el saber no ocupa lugar.
Y de hecho, espero muy pronto empezar a hacer una serie de vídeos
para aprender Vue en mi canal.
Porque es una cosa que quiero aprender y nunca me animo.
Y creo que haciendo vídeos me animaré más a aprenderlo.
Entonces, React.
Esta frase es como mítica.
Una biblioteca de JavaScript para construir interfaces de usuario.
Y muchas veces la gente ya aquí le salta un poquito un interrogante.
Y dice, bueno, ¿cómo puede ser que sea interfaces de usuario
y no hable de hacer páginas web directamente o aplicaciones web?
Y esto es muy interesante.
Y es que hay que tener en cuenta que React, como tal,
es una biblioteca que podemos hacer interfaces de usuario
independientemente de dónde se vaya a mostrar esa interfaz.
Quiero decir que está preparada no solo para hacer aplicaciones web,
sino también para hacer una aplicación nativa
utilizando la tecnología de React.
O podemos hacer incluso cosas de realidad virtual con React.
Incluso podemos hacer aplicaciones de terminal con React.
Porque al final lo importante no es tanto React en sí,
sino el conector que tiene en medio.
En el caso de hoy, pues vamos a ver React DOM
porque nos interesa hacer páginas web.
Pero también tenemos React Native o tenemos React VR o React Terminal.
O sea, que hay diferentes adaptadores para llevar esta tecnología
de hacer interfaces de usuario a otras plataformas.
De hecho, es muy interesante y muy poca gente lo sabe,
pero hay videojuegos que su menú principal está hecho con React
y lo que tiene es un adaptador para hacerlo con motores nativos
de esas consolas o de Unreal Engine y cosas así.
Así que, bueno, imaginaos para que veáis la potencia que tiene React.
Así que, es verdad que hay algunos proyectos, dicen aquí en el chat,
que React 360 está desactualizado.
Es verdad.
Es verdad que hay algunos que están desactualizados.
Y es una pena porque hay algunos que ni siquiera los comparten.
Hay algunos que los utilizan empresas de forma interna
y los sé de buena tinta porque tengo amigos trabajando en Unreal Engine
y me lo comentan, pero no lo dejan fuera, ¿sabes?
No es de código abierto.
Y es una pena.
Pero hoy hablamos de React, ¿vale?
Y esto es, quería ya comentar esto porque esto es importante
para que entendáis un poquito de React
y por qué vamos a necesitar tanto React como React DOM, ¿vale?
Porque son dos quisitas separadas, que están unidas, pero están separadas.
Entonces, React tiene como estas tres cosas, ¿no?
La primera, que una vez que aprendes React y todos sus conceptos,
lo puedes utilizar en diferentes sitios.
Esto está muy bien, pero lo que realmente marca la diferencia
es que es totalmente declarativo.
Y esto lo veremos después con el ejemplo que haremos del HTML.
Y es que básicamente, cuando antes hacíamos una página web,
le decíamos lo que tenía que hacer.
Teníamos que hacer imperativo.
Cuando tú le das a este botón, haz esto, ¿vale?
Pues declarativo significa que básicamente lo que hacemos es declarar.
Voy a poner un ejemplo que es un poco chorra, ¿vale?
Pero esto quiero que os quede súper claro, ¿no?
Pero hay un ejemplo muy bueno que es el de querer comprar sushi, ¿vale?
Para que penséis en declarativo o imperativo.
Si yo quisiera comprar sushi, diría, cojo el teléfono, llamo al restaurante,
le pido este sushi, le digo lo que quiero, le digo mi dirección.
Esto sería imperativo, estoy dando acciones, ¿no?
Pues le doy el dinero, viene a mi casa, al final cojo los palillos, como el sushi.
O sea, eso sería imperativo, estoy haciendo acciones, ¿no?
Declarativo sería, quiero comer sushi, ¿no?
Quiero, ya lo estoy declarando y ya está.
Y a partir de ahí, automáticamente ocurriría.
Eso es lo que nos ofrece React.
Y luego lo veremos un poquito en detalle.
Luego, lo segundo, que está basado en componentes.
Y esto es súper interesante a la hora de hacer interfaces de usuario,
porque lo que queremos es reutilizar, pues, trocitos de nuestra interfaz.
Por ejemplo, aquí tenemos, esta es la página de React, ¿vale?
Pues vamos a ver, por ejemplo, Twitter, ¿no?
Twitter es una página que, en este caso, tiene React, está hecha con React.
Por eso está aquí, este iconito de aquí que podéis ver.
Esto es porque tengo la extensión de Chrome y te avisa cuando hay una página
que utiliza React.
En este caso, pues, esta página tiene un montón de cosas que se están repitiendo.
No tendría sentido, pues, no separarlo en componentes reutilizables.
Por ejemplo, aquí, tal vez te guste, pues, tenemos este trozo de aquí,
este rectángulo que totalmente se podría reutilizar, ¿no?
O sea, si mirásemos aquí un poco el HTML.
Y, de hecho, el ejercicio de hoy es vamos a intentar replicar este, ¿no?
Pues, este, esto, es exactamente lo mismo que tenemos aquí abajo
y que tenemos aquí abajo.
O sea, que son tres cajitas que se podrían replicar.
Lo único que cambia es la información que tiene dentro.
Y a partir de ahí, además, todo sería un componente.
¿Qué quiere decir esto?
Que no solo la cajita en sí, sino lo que incluye dentro de la cajita
podría ser un componente.
Este avatar podría ser un componente.
El título es un componente porque se está repitiendo a través de la página.
Este botón seguir, ¿cuántas veces habéis visto este botón?
De hecho, el botón en sí no solo se utiliza en esta cajita,
sino que lo podemos ver también aquí, ¿no?
En editar perfil.
Así que hay un montón de trozos de nuestra interfaz
que se repiten por todos los sitios
y que lo que tendríamos que hacer es convertirlos en componentes
que podamos reutilizar.
Y, al final, a través de unos parámetros,
que veremos cómo se llaman, que se llaman props,
pero a través de unos parámetros, poder cambiar tanto cómo se ve,
dependiendo de pequeñas cositas,
cómo se comportan estos componentes.
Y esto, aquí, es donde está la gracia de React.
Que son componentes, pero no solo es que son componentes,
es que todo es un componente.
La página en sí está hecha de trocitos de componentes.
Por ejemplo, en Twitter, toda la página podría ser un componente
y aquí el sidebar, el menú, sería un componente,
lo del centro, otro componente, lo de la derecha, otro componente.
Y dentro de un componente tendría trozos de componentes.
O sea, nos estamos quedando, ¿no?
Componente tras componente tras componente.
Vamos a ver qué dice la gente en el chat.
A mí me encanta el sushi, a mí también me encanta el sushi,
por eso siempre pongo este ejemplo.
Que hay alguien, ya aquí hay cosas.
Andrea dice que le gusta Edu Salgado.
Bueno, bueno, o sea, yo no sé esto,
qué está pasando aquí, lo que estáis haciendo aquí en el chat, ¿vale?
No me voy a meter en eso.
Bueno, entonces, ya ha quedado claro.
Tres cositas de React.
Que es declarativo, ¿vale?
No le tenemos que decir paso a paso todo lo que tiene que hacer,
sino que le declaramos cómo queremos que se vea la interfaz,
que está basado en componentes.
Todo es un componente para React.
Y lo tercero, que es muy interesante,
que lo aprendes una sola vez, todos sus conceptos,
y puedes llegar a hacer hasta aplicaciones nativas
utilizando React Native.
Así que todas las cosas que aprendas hoy
te van a servir también para React Native.
Así que, perfecto.
Amor puro a React.
Muy bien, Nicolás Santis, eso es.
Amor puro.
Vale.
Pues, yo creo que lo mejor que podemos hacer en este caso
es un poco explicar, bueno, tenía aquí la página de Marvel
porque también está hecha con React.
Hay un montón de páginas que están hechas con React,
aunque no lo notéis.
Por ejemplo, aquí es muy típico todos estos componentes
que se están repitiendo.
Entonces, otra razón por la que aprendes React
es que detrás de React está Facebook.
Y esto, en realidad, es importante por muchos temas, ¿vale?
¿Por qué?
Lo primero porque tiene una empresa muy potente detrás
y que no paran de desarrollarlo, no paran de mantenerlo.
¿Por qué?
Porque Facebook está utilizando React,
entonces necesitan nutrirse, ¿no?
Esto es la expresión esta de comerse tu propia comida de perro, ¿no?
Y es que lo que ellos desarrollan lo utilizan.
Y esto es una gran diferencia que podemos encontrar
con Vue o con Angular.
Angular sí que es verdad que Google lo utiliza en algunos sitios,
pero creo que tiran más por Polymer, creo yo,
igual estoy equivocado,
pero creo que tiran más por Polymer y estas cosas.
Pero es importante que Facebook sí que utiliza esta propia biblioteca.
Entonces, la mantienen bastante bien
y son bastante consecuentes con todos los cambios que hacen,
porque saben que ellos mismos tienen miles y miles de componentes
que utilizan esta tecnología.
Luego, ¿por qué creo que deberías aprender React?
Y esto sé que puedes cocer, ¿vale?
Pero yo lo hago sin ningún tipo de acritud,
porque creo que es interesante saberlo,
pero esto no significa que sea mejor.
No significa que ya sea mejor,
sino simplemente significa que es bastante aconsejable
que priorices aprenderlo.
Aquí tenemos NPM Trends,
que es un poco para ver las tendencias de diferentes paquetes en NPM,
¿vale?
Que es el repositorio de paquetes por excelencia de Node.
Vamos a poner diferentes paquetes aquí.
Vamos a poner de Angular, Angular Core,
que este diríamos que es el core, el núcleo de Angular
y que necesitas descargarlo siempre.
Vamos a poner también View,
que es bastante interesante View,
y vamos a poner React.
Vamos a ver un poquito cuáles son las descargas
que tienen cada uno de los paquetes.
Vale.
Aunque es raro, el color azul es Angular,
que debería ser el rojo,
pero el azul es Angular,
el naranja es View y React sería el verde.
Podemos ver además un poquito la tendencia.
Vamos a verlo en los últimos dos años un poco, ¿vale?
Vale.
Puedes ver aquí cómo además se ha ido desenganchando un poquito
y cómo la, digamos que la curva,
pues se ha ido yendo hacia arriba,
la de React y las demás sí que están,
parece que no, pero sí que están evolucionando,
pero a lo mejor no tanto a la misma velocidad.
A partir de aquí, esto es solo un dato.
Esto no significa que React sea mejor que View o que Angular.
No tiene nada que ver con esto.
Simplemente es verdad que tiene una tendencia ascendente
y que ahora mismo está en un montón de proyectos.
Solo indica esto.
Porque luego, a nivel de estrellitas, por ejemplo,
si dijeras, bueno, yo me quiero fiar de las estrellas de GitHub,
pues View tiene más estrellas que React.
Así que a lo mejor en ese aspecto,
View podría considerarse que es más popular que React
entre los desarrolladores.
Yo solo dejo esto como un dato, ¿no?
Que React en realidad no se va a ir a ningún sitio.
Y de hecho, cada vez se va a ir en más sitios
y más empresas están pidiendo desarrolladores
que sepan de React.
Y especialmente no sé qué ha pasado estos últimos dos meses
que se ha disparado.
No sé qué ha pasado.
No sé si ha sido el confinamiento o lo que sea.
Pero últimamente se puede ver cómo no para de dispararse.
Además, hay frameworks muy potentes
que están haciendo que esto cada vez vaya a más.
Y es que Next.js, que es un framework muy, muy famoso de React,
que te da un montón de beneficios,
nada más sacarlo de la caja y instalarlo,
pues está ayudando a que esto ocurra.
Next.js, para el que no lo sepa,
es este proyecto que es de Site,
que vamos a hacer una colección de vídeos también sobre esto,
de hacer un curso de Next.js desde cero,
porque me parece una tecnología, un framework muy potente,
y está basado en React.
Así que, a partir de ahí, claro,
todo lo que esté basado en React,
pues va a ser cada vez más, más y más famoso.
Vamos a ver, ¿qué me comentáis por aquí?
¿Qué tal React con TypeScript?
Pues React con TypeScript, muy bien.
Yo no lo recomiendo, personalmente.
Personalmente no lo recomiendo
porque creo que es innecesario normalmente
o intentaría tener TypeScript lo mínimo posible
para evitar pasar todos tus componentes a TypeScript,
porque al final TypeScript es un lenguaje
que compila a JavaScript.
Entonces, a mí, yo confío mucho en la plataforma.
Me gusta mucho utilizar tecnologías que son la plataforma,
intentar utilizar cosas que van a durar durante,
va a durar mucho, mucho tiempo.
Entonces, intentaría mantener lo máximo posible a JavaScript
y a lo mejor cosas de la lógica de negocio
sí que utilizaría TypeScript,
porque creo que sería bastante interesante.
Veremos también cómo crear.
Lo dejamos a medias en el pasado live.
Dejamos a media un poco esto de TypeScript y lo veremos.
Vale.
React es el más usado.
Pueden verlo en State of Yes 2019, dice Nicolás Santis.
Es verdad, es el más usado,
pero insisto, no significa que sea el mejor,
pero creo que es una recomendación interesante
saber que es una tecnología que tiene un presente
y, por supuesto, al corto plazo, un futuro asegurado.
Así que ya está.
¿Qué más, qué más?
¿Tiene sentido React con el framework Bootstrap?
Sí, pero bueno, yo también lo evitaría,
pero sí, se puede utilizar con Bootstrap totalmente.
Gatsby también está muy bueno y también está basado en React,
aunque luego lo que sale no tiene por qué ser React, pero también.
Así que veremos el Creo React App de React.
Si nos da tiempo en el vídeo de hoy, sí, lo veremos.
Vale, pues hasta aquí quería comentaros un poquito
por qué creo que es interesante aprender React.
Porque tenemos Facebook detrás, que es una compañía enorme
y que tiene muchísimo cuidado a la hora de hacer cambios
y, por supuesto, sabemos que la van a mantener.
Y lo segundo, pues por su popularidad y porque es tendencia
y al corto plazo parece que esa tendencia
no va a disminuir ni mucho menos.
Y además que sus conceptos,
y esto también creo que es interesante,
los conceptos que te ofrece React
son muy parecidos a los que te ofrece Angular y Vue.
O sea, que si tienes que aprender uno,
el primero que tendrías que aprender,
es verdad que Vue, en mi opinión,
tiene una curva de aprendizaje más sencilla
que la de React al principio,
sobre todo para gente que viene al diseño y cosas así,
porque está basado en plantillas,
pero creo que React tampoco es mucho más complicado
y, bueno, pues puede ser que empieces con React
y luego te pases en Vue porque los conceptos son parecidos.
Los componentes, las props, el estado y todo esto.
Vale.
Entonces, ya tenemos un poquito de esto.
Ahora lo que me gustaría es explicar
por qué es interesante React.
¿Vale?
Entonces vamos a verlo con un poquito de HTML.
Vale.
Vamos a hacer un pequeño ejercicio
que va a ser tener un componente que sea avatar.
Para eso hay aquí una API que es muy interesante,
que es la que te da usuarios random aleatorios,
que está muy bien.
Y en esta API además tienen las fotos.
Así que vamos a hacer como si fuésemos a crear la página
de, no sé, Women in Tech, por ejemplo.
Women in Tech.
Y estos son, pues, mujeres que programan
y que están en la tecnología.
Y vamos a hacer, pues, un listado.
Y para ello lo primero que nos gustaría tener
es un componente de avatar, ¿no?
Un avatar.
Lo que podríamos hacer es esto.
El HTML.
Voy a hacer esto un poquito más grande.
Si no veis, decídmelo y lo intento hacer más grande
para que lo veamos todos bien.
Se ve bien, todo perfecto.
Si alguien no ve, que me lo diga.
Vale.
Vale.
Lo que queríamos hacer es este avatar, ¿no?
Un avatar.
Pues vamos a coger la imagen de esta chica.
Cogemos la imagen y la pegamos ahora mismo aquí.
Vale.
Guardamos los cambios.
Ya tenemos, pues, una imagen.
Lo que vamos a...
Voy a poner aquí un estilo.
No, muy sencillo.
Tampoco nada muy fancy.
No voy a aliarme con los estilos.
Pero vamos a hacer que se vea un poco redondito.
Y vamos a hacer que tenga un poquito de...
Así de sombra.
Que todo con sombra queda un poco mejor.
Vamos a ver.
Bueno, quizás un poquito más exagerado.
Pero menos...
Así.
Vale.
Pues eso.
Ya está.
No es muy...
Sé que no es muy complejo.
Voy a hacerlo un poco más pequeño.
Vale.
Ya está.
Tenemos aquí nuestra imagen.
Entonces, ¿qué pasa?
Si quisiésemos volver a crear esto...
Vale.
Pues, ¿qué pasa?
Tendría que copiar esto, volver a ponerlo aquí.
Y imaginemos que tenemos aquí la imagen 1, que es otra chica.
Perfecto.
Así que esta sería un poco la ID, ¿no?
Aquí tenemos el 69, vamos a ponerle el 2.
Y ahí tenemos.
Sería la ID del usuario es 2 y la ID del usuario es 1.
Vale.
Aquí ya tenemos nuestras dos imágenes.
Por supuesto, si queremos poner más...
Vale.
¿Cuál es el problema?
¿Cuál es el problema?
El problema aquí es que esto podría complicarse.
Un avatar normalmente no es solo una imagen, sino que a lo mejor lo que queremos hacer es que tenga un poquito más de HTML, ¿no?
Por ejemplo, que tenga Picture y que dentro podamos tener la opción de poner si esta imagen tiene que poner su nombre.
Por ejemplo, vamos a llamar que a esta...
El 1 es Linda.
Vamos a ponerle que es Linda.
Y al 2 vamos a poner esto aquí.
Y el 2 es esta mujer.
Vamos a poner que se llama...
No sé.
Antes he visto por ahí gente.
Daniela.
Vale.
Pues Daniela.
Picture.
Ya tenemos a Linda y Daniela.
Vale.
No se ven muy bien los estilos porque tenemos que arreglarlo.
Tenemos que decidir que estos sean Display Flex.
Y Flex Direction Column.
Esto ahora...
Vale.
Y Text Align Center.
Más o menos.
Ahora esto...
Lo que queremos que tenga el...
Aquí está.
Vale.
Ya tenemos aquí nuestras dos...
Eh...
Se me ha tirado.
Vale.
Ya tenemos aquí nuestros dos HTML que sé que son muy sencillos.
Pero, ¿qué pasa si quiero hacer un tercero?
Pues lo mismo.
Tendría que copiarlo todo.
¿Cuál es el problema?
Imagínate que tú tienes tu página.
Esto es un HTML muy sencillo.
Pero tu página empieza a ser muy grande, muy grande, muy grande.
Entonces, si vas copiando el HTML, esto no escala, ¿no?
Por ninguna forma.
Esto al final lo que te va a pasar...
Mira, alguien me dice que se llame Andrea.
En lugar de Linda, vamos a ponerle Andrea.
¿Qué va a pasar, no?
Si tú te dedicas a copiar tu HTML, esto no va a acabar bien.
Porque habrá en algún sitio donde habrás puesto que sea con el picture y el image y tal,
pero una vez que evolucione tu componente, ¿no?
Lo que va a pasar es que esto se va a romper.
Entonces, ya empieza que empieza mal, ¿no?
Así que vamos a hacer una cosa.
Lo que vamos a hacer es crear un componente.
A nosotros lo que nos gustaría es poder reutilizar este HTML.
Y cada vez que queramos, en lugar de hacer este picture, tengamos una forma de recrearlo.
Existen los custom elements, los web components, y podríamos crearlo.
Pero lo que quiero es que veáis un poquito, vamos a intentar llegar a React de una forma más iterativa.
Entonces, lo que vamos a hacer es crear un componente con JavaScript sin que sea de...
Vamos a poner un script.
Sin que llegue a ser un custom element.
Un poquito para ir viendo la idea que sería tener React.
Lo que vamos a hacer aquí es, primero, todo esto lo vamos a envolver en un div que le llamamos app.
Y aquí lo vamos a cerrar aquí.
Vale.
Esto lo dejamos aquí.
Y vamos a hacer algo.
Aquí tengo una etiqueta script donde puedo poner JavaScript en línea.
Y lo que vamos a hacer es tener una constante que le voy a llamar app.
O, bueno, sí, app así.
Y vamos a coger este elemento, getElementById, app.
Y ahora aquí vamos a crear una función que le vamos a llamar avatar.
Vamos a hacer con la A en mayúscula.
O sea, que vamos a hacer un componente nosotros todavía sin React.
Vamos a hacer esto y le vamos a pasar unos parámetros porque cada componente, cada avatar,
necesitamos que cambie según la ID que le pasamos.
Así que lo que le tenemos que pasar aquí...
Vamos a ver...
Aquí.
Vale.
Vale.
Vamos a crear el source de una forma separada.
El source es esto, ¿no?
La fuente donde está la imagen.
Vamos a ponerla aquí.
En lugar de uno, esto le va a llegar por parámetro.
Y por parámetro vamos a poner el params.id.
Aquí vamos a poner el params.id.
De forma que si a este componente le pasamos uno, dos o catorce, pues ahí salga eso.
Aquí esto lo vamos a transformar en un template string.
Voy a hacer esto...
Voy a ponerlo un poquito por aquí.
Que ya es suficiente que se vea así.
¿Vale?
Ya tenemos el source de nuestra imagen.
Y esto lo que va a devolver es lo que queremos que renderice nuestro componente.
En este caso, queremos que renderice todo esto.
Ahora, lo que pasa con esto...
También necesitamos, por supuesto, el nombre.
Así que vamos a poner params.name.
Vale.
Vamos a ponerlo aquí.
Vamos a ponerlo aquí.
Perfecto.
Y aquí esto.
Ahora este source ya lo hemos creado aquí antes.
Así que quedaría así.
Este source veniría de la línea 37.
Tenemos la fuente de la imagen, ¿no?
De donde vamos a extraer esta imagen dependiendo del parámetro que es la id.
Y lo que vamos a hacer es devolver lo que queremos que renderice.
Un picture dentro de la imagen con este source dependiendo del params.id.
Y luego el nombre que tiene que tener cada uno de ellos.
Vale.
Entonces, ya podemos borrar todo esto.
Y lo que vamos a hacer es intentar renderizar estos componentes dentro de app.
Así que guardo los cambios.
Me lo ha formateado de una forma un poco extraña.
Ahora sale todo vacío.
Normal.
Lo que vamos a hacer ahora es que en la aplicación lo que queremos que tenga dentro de HTML sea el avatar que queremos renderizar.
Por ejemplo, el de id 1 y de nombre, pues, le habíamos puesto Linda o Andrea.
Andrea me había dicho alguien.
Vale.
Andrea.
Y ahora, pues, ¿qué más queremos renderizar?
Vale.
Pues, queremos renderizar el avatar con id 2 y el name que sea, pues, Manuela.
Vale.
Guardamos los cambios.
Y ahora podemos ver, vamos a cambiar las id para que salgan otras chicas.
Y así puedas ver que realmente estamos haciendo algo.
Guardo los cambios.
Perfecto, ¿no?
Ya tenemos nuestro componente, una función que sería como un componente que está funcionando.
Hasta aquí, lo que hemos hecho es que esta función recibe unos parámetros y dependiendo de estos parámetros lo que hace, básicamente, es renderizar una cosa u otra.
O sea, genera un string que es HTML que va a renderizar una cosa u otra.
Esto está bien.
Lo que pasa que ahora, y que antes no pasaba, es que si yo ahora cambio, por ejemplo, este componente avatar y yo pongo un strong aquí y guardo los cambios, ahora puedes ver cómo todos los componentes han cambiado de golpe y ahora todos tienen un strong.
Si el día de mañana, pues, resulta que cambiamos de idea y no es un strong, sino que es un H3, guardamos los cambios y de nuevo, pues, cambiaría a un H3.
Pues, si queremos cambiar esa una cursiva, lo cambiaríamos e iría cambiando.
Pero esta es la clave, ¿no?
Que tenemos un componente que está totalmente separado de nuestro HTML y que cada vez que hagamos cambios justamente ahí, pues, de repente estarán esos cambios en toda nuestra aplicación.
Eso es lo que queremos, que nuestra interfaz esté componentizada.
Y esto todavía sin React, pero por eso necesitamos React, porque React nos va a ayudar a conseguir esto de una forma súper sencilla.
Vamos a ver un poquito los, vamos a ver aquí, ¿algún moderador que pueda banear?
Sí, vamos a hacer un moderador rápidamente.
A ver, alguien de confianza que nos pueda ayudar aquí a poner un poquito de paz.
Vamos a poner un moderador, pum.
Vale.
Yo te programaría el corazón, luego no sé qué.
¿Qué más?
De la fuente dice, no sé si está cargando, yo también escucho la música ahora por fin.
Vale, me alegro, sí, está.
Ese código está muy pro.
Bueno, tampoco he hecho nada del otro mundo.
No está acabando, que acaba de empezar, hace un momento que he empezado.
¿Qué más?
Puedes usar StackBlitz también, es una opción como CodeSandbox.
Al final lo de CodeSandbox es simplemente, lo que estoy haciendo es HTML puro.
Es como si abriésemos este HTML directamente en nuestro ordenador.
Lo que pasa es que quería hacerlo rápidamente y por eso lo he hecho con CodeSandbox.
Creo que ya me está empezando a gustar la sintaxis de React.
Pues todavía no hemos hecho nada con React.
¿Qué más?
¿Qué más?
¿Qué más?
¿Puedo agrandar un poquito más?
Puedo agrandar un poquito más.
Voy a intentarlo sin que yo me vuelva un poco loca.
Sin que me vuelva loco.
Vale.
A ver.
A ver si se ve un poquito mejor.
Vale.
Hasta aquí hemos llegado a hacer nuestros propios componentes.
Pues vamos a empezar ya a ver un problemita que tendría esto.
Imaginemos que queremos que cuando le hagamos un clic a un avatar, pues se pueda desactivar.
Que digamos, bueno, voy a hacer clic a avatar y al avatar se desactivará o se activará dependiendo de su estado.
Vale.
Lo que podríamos hacer, vale, sería hacer, pues nada, un tema de eventos.
Escuchar todos los eventos que hay.
Vale.
Vamos a ver.
Vamos a coger de la aplicación, vamos a hacer un query selector de todos los elementos que sean picture o de todas las imágenes.
Vamos a hacer cuando se clica la imagen.
Vamos a hacer, coger todas las imágenes y cuando le hagamos clic a la imagen, vamos a ejecutar algún código.
Lo que vamos a hacer es que esta imagen, vale, query selector, vale, esto no es así.
El query selector all nos recupera todos los elementos.
Ahora, para cada uno de los elementos que recupera, lo que vamos a hacer es añadirle un evento.
Y que cada vez que hagamos clic en ese elemento, haga algo.
Lo único que vamos a hacer es hacer un toggle de una clase, disabled.
O sea, explicamos aquí.
De la aplicación, recuperamos todas las imágenes y por cada imagen hacemos una de listener, vale, de forma que cada vez que se haga clic en una imagen, ejecutamos la línea 45, que es esta.
Y lo que vamos a hacer es pasar una imagen que esté activa o desactiva, dependiendo de cómo estaba.
Eso es todo lo que vamos a hacer.
Para asegurarnos esto, este class list lo que hace es añadirle una clase, así que ahora este disable, lo que tenemos que hacer es añadirlo aquí.
Así que hacemos image.disable y lo que vamos a hacer es que el opacity pase a ser .3 para que se vea un poquito más difuminado.
Así que ahora si le doy un clic a Andrea, pues se ha dejado de ver.
Si le vuelvo a dar a Manuela, pues ya está, ya tenemos este estado, ¿no?
Tendríamos como que está activado o desactivado, según cuando le hacemos clic o dejamos de hacerle clic.
Vale, hasta aquí es donde vamos a llevar nuestro HTML y a partir de ahora vamos a empezar a utilizar React.
Pero lo que quería que vieras claramente es un poco la complejidad que hemos tenido que hacer para crear un solo componente.
Y es que hemos creado nuestro componente avatar, que podía recibir unos parámetros para verse de una forma u otra.
Para añadirlo le hemos tenido que decir, vale, a la app me añades este HTML.
Y luego a la app me vuelves a añadir este HTML.
Y así constantemente.
Un poquito difícil de hacer.
Y luego además le hemos dicho, vale, ahora recupérame todas las imágenes y por cada una de ellas quiero que cada imagen escuche un evento
y al hacer clic me cambies la clase por disable.
Esto es el imperativo.
Que yo también diría que es un poquito mandón, ¿no?
Así que está diciendo lo que tiene que hacer y tal.
Vale, pues todo esto vamos a hacer que deje de ser así con React, ¿vale?
Vamos a ver si se mantiene inmueble, agranda el navegador para todo el más grande.
No sé, a ver, yo creo que ya se tiene que ver bien porque si no el que me va a quedar ciego voy a ser yo.
A ver, ¿lo puedo hacer un pelín más grande si hago esto así?
A ver, ¿lo veis mejor?
Ya como lo sigo haciendo más grande voy a hacerlo tamaño póster, ¿eh?
Así que, a ver, ¿qué más?
Preguntas, ¿puedes cambiar la disposición de la cámara y dónde explicas?
Sí, la verdad es que es un poco, es que tengo aquí la cámara, igual un día la monto ahí arriba.
Lo tendré en cuenta, gracias por la recomendación.
Minimize el site de archivos y un poco más grande la letra.
Vale, ya he quitado el site de archivos, perfecto.
Yo desde el celular lo veo bien, se ve genial desde la suela, ¿vale?
Angular vendría a ser imperativo.
Tiene cosas que sí y otras que no, es un poquito más complicado.
No, vale, ya se veía perfecto, no tan grande porque si no vemos poco código.
Ahora está bien, ahora no tan grande.
Bueno, pero me estáis volviendo locos.
Lo voy a dejar así, que yo creo que se debe ver bien.
Así ya está bien, sin el site y un poco más pequeño.
Hasta ahí.
Vale, vamos a darle caña a React.
Aquí en React hay una cosa que mucha gente cree, ¿no?
Que para utilizar React tienes que aprender Webpack, que por cierto, hicimos un live la semana anterior para ver cómo podíamos utilizar Webpack.
Y no es verdad.
O sea, no tenemos que utilizar Webpack para empezar a utilizar React.
De hecho, suele ser bastante más sencillo que eso.
Ya la documentación te explica un poco cómo empezar a utilizar React, que no es la mejor forma y ya veremos por qué.
Pero al menos para empezar y probarlo y aprender, ya lo podrías utilizar así.
Aquí lo que nos dice es de utilizar y añadir este script a nuestra aplicación, a nuestro HTML.
Y con este script, estos dos scripts, ya lo tendríamos.
Vamos a ver, lo vamos a añadir y os explico un poco qué es cada cosa.
Lo vamos a añadir aquí en el head para que los cargue justo debajo del estilo.
Primero, el primero sería la librería de React, la dependencia de React, que es totalmente agnóstica a dónde va a utilizarse.
¿Vale? ¿Esto qué quiere decir?
Que esto va a ser en la web, pero esta dependencia de React, esto es para todas.
Para React Native, para React Terminal, para todas.
Porque digamos que es el core, ¿no?
Que tiene la aplicación donde tiene sus conceptos y su motor interno para que funcione en cualquier vista que queramos hacer.
Luego tendríamos React Dome, que React Dome sí es el que tiene todo el código para hacer que React funcione en el navegador.
Así que necesitamos por eso estas dos dependencias en nuestro código.
Entonces, ahora lo que podríamos hacer, esto lo que nos da, si miramos la documentación nos lo dirá, bueno, aquí me imagino que el código inicial.
Lo que nos permite es utilizar esto, React, React, y luego utilizar Credit Element, que ahora vamos a ver un poco qué es esto del Credit Element, porque es un poco raro.
Pero es lo que nos permitirá entender por qué necesitamos más adelante JSX.
Así que ahora, en el script, podemos utilizar React, hemos dicho.
Pues de React, lo que vamos a extraer es una cosa que se llama Create Element, que es para crear un elemento.
Lo vamos a poner en una letra, porque si no, ya verás que queda un poco raro de utilizar.
Vamos a dejarlo así, React.Create Element.
Lo que nos va a permitir esto es crear elementos.
Vale, esta constante la vamos a dejar un poquito aquí arriba.
Y ahora vamos a intentar crear este avatar que teníamos aquí, pero con React.
Lo que deberíamos hacer, vamos a, esto si lo podemos, lo quería comentar, lo voy a comentar para que no nos influya a lo que estamos haciendo.
Vale.
Entonces, lo que, voy a empezar a hacer una versión muy sencilla del avatar hasta conseguir como habíamos dejado, pero para ver algo renderizándose.
Vamos a crear avatar y lo que, de nuevo, voy a decirle que recibe params, que son unos parámetros.
Ahora, como he dicho que quería empezar de forma sencilla, ahora lo que quiero hacer es que simplemente lo que esto devuelva sea una imagen.
Antes habíamos dicho que para hacer la imagen, pues, estamos utilizando un string.
Pero ahora, lo que queremos realmente es utilizar este Create Element.
Y lo que le tenemos que decir a esto es, primero, ¿qué es lo que tiene que renderizar este elemento?
Pues, queríamos una imagen.
Y ahora, lo que necesitaríamos decirle es tanto qué atributos tenía esta imagen, ¿no?
Y para ver los atributos tenemos que pasárselo, como sale aquí, para los atributos sería el segundo parámetro del Create Element.
Así que el segundo parámetro le vamos a decir que tiene un objeto.
Y este objeto va a tener un source.
El source es lo que teníamos antes, ¿no?
El atributo este, el params ID.
Así que vamos a copiarlo, como lo teníamos antes, aquí, así.
De hecho, podríamos copiar todo.
Y lo dejamos aquí creado.
Creamos el source a través de los parámetros, exactamente lo mismo que estábamos haciendo antes.
Así que ahora, lo que tenemos que hacer es esto, simplemente.
Creamos un elemento, que es la imagen, y que le vamos a pasar el atributo source.
Sé que esto ahora es un poquito raro, ¿vale?
Es un poco raro el cómo se ve, pero vamos a empezar así para que vayamos entendiendo cómo tenemos que evolucionar
y por qué tenemos que utilizar luego, más adelante, JSX.
Pero por ahora, lo vamos a dejar así.
Ahora, esto así no lo podemos utilizar.
Vale, ya tenemos aquí nuestro primer componente de React, pero no lo podemos utilizar así como está, ¿no?
¿Cómo hacemos que esto realmente lo podamos ver aquí, en esta pantalla vacía?
¡Ay, he hecho esto otra vez así!
Vale.
¿Cómo podemos hacer ver este avatar aquí, en nuestra aplicación?
Pues lo que podemos hacer es utilizar React DOM.
Entonces, a React DOM lo que le vamos a decir es que queremos renderizar este componente en nuestra aplicación.
Así que, utilizamos el método render de React DOM y le decimos que queremos renderizar el avatar,
que es este elemento, ¿vale?
A ver cómo estamos haciendo aquí, aquí no sé, ¿vale?
Sí.
Aquí, vale.
Queremos renderizar.
Tenemos que utilizar otra vez la H para crear el elemento y le decimos el componente que queremos renderizar.
Y le vamos a decir dónde lo queremos renderizar.
Así que vamos a decirle en la app.
Y ahora, guardamos los cambios y no ha funcionado.
¿Por qué no ha funcionado?
Porque no le hemos pasado una ID.
Así que, al avatar, le tenemos que pasar también las dependencias, los parámetros que queremos que utilice.
Igual que eso lo estamos pasando a la imagen que le estamos diciendo al source,
le vamos a pasar aquí la ID que queremos que tenga.
En este caso, vamos a añadir que la ID, pues, antes que hemos dicho 1, por ejemplo.
Bueno, guardamos los cambios y ahora sí que funciona.
Así que, esto es un poquito difícil de leer.
Sé que no es sencillo, pero quería que lo entendáis hasta aquí porque es importante para el siguiente paso.
Tenéis que ver un poquito por qué se utiliza JSX y qué es JSX en realidad.
Así que, esto sería utilizar React en crudo.
Esto sería utilizar, importar React directamente ahí y utilizar el createElement así a mano.
Y esto, la verdad, es que no es muy cómodo.
Así que, vamos a dejarlo un momento aquí y voy a leer vuestros comentarios mientras bebo un brebaje mágico.
A ver.
Sí, haremos vídeos sobre test unitarios en algún momento.
No voy a utilizar hoy, voy a utilizar el Visual Studio Code igual más adelante, pero por ahora no.
Ahora es demasiado grande.
Dios, qué gente más quejosa.
Sí, retocarlos.
A ver, qué más, qué más, qué más por aquí.
Lo que dicen de la cómoda es que lo pongas dentro del código y que el navegador ocupe el 100% de la pantalla.
Ah, vale.
Sí, claro, para que no me salga cierto.
Mira.
No me queréis ver mi cara.
Vale, pues ya está.
Mejor usar hooks o state.
En realidad, para utilizar hooks o state, ahora lo veremos.
Pero yo lo que os recomendaría, si miráis artículos antiguos o si veis mi curso de Udemy, veréis que los componentes se hacen con clases.
A partir de cierto momento, los componentes empezaron a hacerse con funciones.
Y creo que ahora es mejor que lo hagáis todo con funciones.
¿Cerveza? No, era zumo de piña.
¿Podrías explicar un poco de autentificación y de seguridad? Sí, pero hoy no creo.
No era jugo de manzana. No, era de piña. Lo he dicho.
Una pregunta, ¿puedo usar JSX sin necesidad de React?
Sí, podrías. Y de hecho lo puedes utilizar con diferentes cosas.
¿Por qué es incorrecto usar React como dice la documentación?
Porque, como dice la documentación, esto en realidad es para probar y es para empezar.
¿Vale? Esto no sería la forma idónea de hacerlo en un proyecto realmente profesional y tal.
¿Vale? ¿Qué más? ¿Qué más?
Haremos cosas de Lazy Load, Suspense y pruebas unitarias.
¿Vale? Perfecto.
Vale. Hasta aquí todas las preguntas. Pues vamos a seguir.
Hemos visto, voy a cerrar un poquito aquí algunas cositas.
Esto también, esto también.
Vale. Hasta aquí hemos visto que ahora ya tendríamos esto de renderizar, ¿no?
¿Qué pasa si yo quiero renderizar dos avatares?
Vale. Pues que esto empieza a ser un poco complicado.
De hecho, vamos a probarlo porque al final es un poco difícil de leer.
El caso es que este método H que puedes ver aquí, en realidad también acepta un tercer parámetro.
Y este parámetro podría ser lo que envuelve este componente.
Así que lo que podríamos hacer aquí sería decir que lo que queremos renderizar es un div que no tiene ningún atributo
y que dentro lo que tiene que renderizar sería un array que fuese uno el avatar este.
Vamos a ver si esto me funciona a la primera porque es un poco raro.
Y luego otro avatar. Vale. Así. A ver que esto... ¿Dónde me he dejado esto? Que no lo he cerrado.
Esto sería el avatar 1. Esto estaría aquí. Vale. A ver que no me gusta porque me he dejado este.
¿Sí? No. Me he dejado algo aquí.
Expected. Ay, ay. Es que me habéis puesto esto tan grande que ya no veo exactamente ni dónde, ni lo que estoy aquí haciendo.
Vale. Aquí este está aquí, este aquí, este aquí. Ay, ay, ay. Vale. Ya está. Vale.
Imaginemos que quiero renderizar dos elementos. Quiero renderizar dos avatares.
Claro, para hacerlo con este H es un poco raro. ¿Vale?
Porque tendría que utilizar el tercer parámetro de esa función y sería bastante complicado y bastante difícil de leer.
Y si fuese React así, ninguno de nosotros lo estaríamos utilizando.
Entonces, vamos a utilizar JSX para hacer que esto funcione correctamente.
Para ello, vamos a copiar este script aquí arriba que lo que va a hacer es transformar nuestro código al vuelo.
Así que, para que esto funcione, tenemos que añadirle un atributo.
Esto es algo solo para probar. Esto no lo vamos a hacer, no lo deberíamos hacer en un proyecto real.
Esto es solo para ver cómo funciona React y para verlo rápidamente sin hacer ningún tipo de paso de compilación ni nada.
¿Vale?
Entonces, ahora que tenemos este text Babel, lo que va a hacer este script es detectar las etiquetas del script como este.
¿Vale? Los que tengan este text Babel lo que va a hacer es transformarlos.
Ahora mismo no es importante que sepáis exactamente qué es esto de transformarlos y tal, sino que simplemente veáis que lo que va a hacer es que este script que tenemos aquí,
todo esto de aquí dentro, lo va a pasar por una transformación de forma que podamos utilizar JSX.
¿Qué es JSX?
Bueno, lo que habíamos visto aquí de este Stock Create Element era un poquito raro, era un poco difícil de leer.
Así que lo que podríamos hacer es utilizar JSX.
JSX básicamente sería utilizar una notación que se parece mucho a HTML, pero no es HTML.
Sería poner esto y esto lo que va a hacer directamente es renderizar algo parecido a lo que teníamos arriba.
De hecho, si vamos a Babel JS, podríamos rápidamente, para que veamos tanto cómo se ve antes y el después, vamos a hacer esto.
Vamos a copiar esto y vamos a ponerlo aquí.
Voy a intentar hacer esto un poco más grande.
Vale.
Aquí en Babel tenemos a la izquierda el código real y a la derecha el código que está expulsando, digamos, después de la transformación.
Entonces, antes lo teníamos de esta forma.
Teníamos que h era React.createElement.
Entonces, esto es lo que nos estaría devolviendo, que es algo muy parecido.
Tenemos la h y todo esto.
¿Qué pasa?
Que ya no queremos utilizar nada de esta h.
Lo que queremos es utilizar JSX.
Pues, ahora vamos a ver cómo nos quedaría.
Esta notación, que se parece mucho a HTML, lo que va a hacer Babel es transformarlo en esto, en un React.createElement.
Pero esto ahora es totalmente transparente para nosotros.
De esta forma ahora ya no tenemos que preocuparnos.
Ahora, mucha gente aquí, voy a poner un momento mi cámara, mi cámara.
Mucha gente aquí, mucha gente aquí se confunde y dice que esto es meter HTML en JavaScript.
Esto no es meter HTML en JavaScript.
Esto es JavaScript.
Como podemos ver a la derecha en la transformación, esto es JavaScript.
¿Qué pasa?
Que lo que estamos haciendo es escribir una especie de HTML sin ser HTML, esto no es HTML, para que sea mucho más fácil.
Porque, como hemos podido ver, es muy complicado hacerlo desde cero.
Si tuviésemos que poner manualmente el React.createElement, a todo lo que queremos hacer sería muy complejo.
Entonces, aquí puedes ver por qué estamos haciendo de esta forma.
Así que esto no es HTML y esto no es un string como estábamos haciendo antes.
Esto son llamadas a JavaScript, al React.createElement.
Esto es súper importante y que os quede súper claro porque mucha gente cuando dice, esto es HTML, no es HTML.
Parece HTML y está bien que parezca HTML para ayudarnos justamente a que funcione como nosotros queremos.
Así que, ya tenemos aquí nuestro JSX y lo bueno es que también lo podríamos utilizar aquí.
Podríamos hacer esto y visualmente se entendería mucho mejor.
Para utilizar un componente que hemos creado tendríamos que ponerlo así, con una mayúscula avatar.
Y aquí vamos a poner que queremos renderizar un avatar con la ID 1 y aquí un avatar con el ID 2.
Y finalmente, esto lo podemos borrar.
Lo que vamos a hacer es que esto lo rendericemos en app.
Vamos a cambiarle los IDs para ver si todo esto funciona correctamente.
Guardamos los cambios y ya lo tenemos.
Ya está funcionando como esperábamos.
Vamos a ver, ¿qué me estáis preguntando?
¿Qué me vais diciendo gente que sí que quiere ver mi cara de guapo?
El título cuando termine va a quedar aprendiendo React desde cero, los bipolares.
Cuando lea los comentarios de nuevo, le decimos, ¿vale?
¿Me decís? ¿Qué me decís?
Ana, la, la, la, la.
Igual hago una pregunta de Canelo a esta altura, ¿pero qué es JSX?
Pues básicamente JSX es ese pseudolenguaje que lo que hace es transformar esa especie de HTML en llamadas JavaScript.
Pero que visualmente lo que hace es que sea mucho más fácil programar con ello.
Como habéis podido ver, pues se entiende bastante mejor.
Muy buena explicación para entender el porqué de React y JSX.
Sé que no es muy entretenido, pero prefiero explicar esto así para que esto es una base fundamental para entender bien React y creo que es muy interesante entender por detrás cómo funciona.
Y no quiero que lanzaros JSX sin que sepáis lo que es por detrás, ¿vale?
Entonces por eso he preferido perder un poquito de tiempo con esto, pero que lo veáis.
Entonces, ¿qué nivel de JS necesitas para pasarte a React?
Algo de JS de JavaScript necesitas.
Así que sería interesante que aprendieses JSX.
Vale.
Pues hasta aquí tenemos esto, pero habíamos dicho que esta image, pues antes lo habíamos hecho un poquito más complejo, ¿no?
Teníamos el picture y teníamos todavía todo esto de añadir un evento.
Así que vamos a añadirlo aquí fácilmente.
Bueno, habíamos puesto que esto tenía que ser un picture y dentro teníamos aquí, pues, el params, era params.name y el picture.
Y ahora guardamos los cambios y, vale, algo está pasando que no le gusta.
¿Por qué no le está gustando esto?
Vamos a ver la consola y dice que ha habido un error en el avatar.
Vale.
El error seguramente es que lo que le estamos pasando aquí, esto no le debe estar gustando porque, vamos a poner aquí un spam.
A ver, otra vez.
¿Por qué no le está?
Ah, no le está gustando porque el return lo he puesto donde no es.
Lo que queremos es devolver todo esto.
Ahora sí.
Vale.
Pero igualmente no me está mostrando el nombre, ¿no?
Yo he puesto el nombre y aquí no me lo está mostrando.
No me está mostrando el nombre porque no se lo estoy pasando.
Así que vamos a pasarle aquí, en honor a Ana que había escrito, le vamos a poner aquí el nombre y, además, vamos a poner, pues, aquí JSXLady.
Vamos a ponerle.
Guardamos los cambios y ya lo tenemos ahí.
Perfecto.
Y, de nuevo, aquí tenemos otra vez la potencia del componente.
Cuando cambiamos esto a un strong, pues, directamente se cambia y pasa a ser un strong.
Perfecto.
Ahora, esto ya lo tenemos.
Esto ya lo tenemos y ya tenemos también el cómo se renderizaba.
Ya no tenemos que decir quiero que me renderices esto y esto porque es más declarativo.
Básicamente, aquí se lo estamos mostrando lo que queremos que renderice, pero no estamos diciendo que lo renderice.
Aquí estamos viendo más que sea declarativo.
Ahora, nos falta esto, ¿no?
Nos falta hacer el query selector y hacer que, pues, bueno, que se desactive cuando hagamos un clic a cada uno de los avatares.
Así que lo que tenemos que aprender aquí, básicamente, son cómo manejamos los eventos.
Podríamos hacer esto, ¿eh?
Podríamos coger esto y meterlo por aquí dentro, hacer cosas muy raras.
De hecho, esto seguramente debería seguir funcionando.
Si yo guardo los cambios de esto, pues, sigue funcionando, pero lo hacemos así.
Y así no es como lo queremos hacer.
Lo queremos hacer bien con React.
Lo queremos hacer como debe ser.
Así que vamos a hacerlo ya.
Para hacer que esto funcione, lo que habíamos dicho es que cada vez que hagamos un clic en la imagen, pues, tenía que cambiar la clase que se tenía que renderizar, ¿no?
Tenía que pasar a ser disabled.
Si miramos aquí en el inspector de elementos, vale, puedes ver aquí la clase disabled porque le he dado un clic.
Vale, vamos a conseguir eso.
Vamos a conseguir ese efecto.
Voy a guardar los cambios.
No funciona el clic.
Vamos a hacer que funcione con React.
Voy a poner aquí en la imagen, como estaba antes, y vamos a añadirle un nuevo atributo que se va a llamar onClick.
Esto normalmente también vuelve a la gente loca porque se parece mucho al onClick que se utilizaba antiguamente en el HTML y que estaba mal, que no es una buena práctica, ¿vale?
No era una buena práctica.
Y en este caso se parece mucho, pero utilizando el camel case.
Los eventos en React hay un montón.
Aquí estaría el onClick, onMouseEnter, onMouseIf.
Al final está todo esto documentado.
Hay un montón que empieza por on y luego lo que quieras hacer.
En este caso es el onClick.
Y aquí le tenemos que decir lo que tiene que hacer.
Aquí le vamos a decir que tiene que ejecutar una función.
Así que le vamos a pasar una función.
Y en esta función, ¿qué es lo que tiene que hacer?
En este caso, habíamos dicho que lo que tenía que hacer era cambiar la clase de la imagen.
Entonces, voy a enseñaros cómo estaría esto mal y luego cómo estaría esto bien.
Para que esto quede claro, el onClick, para que funcione, tenemos que pasarle...
Es verdad, esto en JSX no lo he explicado y es importante.
Y es que el source tenemos que utilizar las llaves.
Esto no funciona...
Para decirle que tiene que entender el valor que le estamos pasando aquí a este atributo,
le tenemos que pasar entre llaves.
Y lo mismo con onClick, que le tenemos que pasar entre llaves lo que queremos que ejecute.
Así que le pasamos aquí dentro la función que queremos que ejecute.
Así que ahora, cuando haga clic, quiero que haya un alert y digamos, vale, pues esto ha sido un clic.
Vamos a darle un clic.
Vale, pues perfecto.
Ahora cuando dé un clic, ya la está.
Ya tenemos el clic que está funcionando correctamente.
El tema es que lo que queremos es que sea el elemento este el que cambie de clase.
Así que lo que vamos a hacer es recuperarlo del evento.
Aquí, cuando manejamos un evento en JavaScript, recuperamos en esta función el evento.
Y el evento nos devuelve el propio elemento que estamos clicando.
Y lo tenemos en event.target, creo que es.
Vamos a ver si esto es correcto.
Vamos a probar alert.
Vamos a hacer un alert de esto.
Directamente.
Guardamos los cambios.
Y sí.
Vale, aquí tenemos el objeto, el HTML image element, que se refiere al elemento que ha sido clicado.
Así que este event.target es el que le vamos a hacer el cambio de la clase que habíamos hecho anteriormente.
Hasta aquí tendríamos la clase.
Perfecto.
Guardamos los cambios.
Y ahora, cuando hagamos clic, ya pasa a estar desactivado.
Ya vuelve a funcionar como funcionaba antes.
Esto hasta aquí funcionaría.
Pero no estaría bien del todo.
¿Y esto por qué no estaría bien del todo?
Pues que estaríamos trabajando de una forma que, de nuevo, sería más imperativa.
Le estaríamos diciendo, tienes que cambiar esta clase que tienes aquí.
Esto no estaría bien del todo.
Entonces, para poder solucionar esto, necesitamos aprender el concepto de state.
Y es que en React tenemos dos conceptos.
Uno, las props, que son las params.
Le hemos llamado desde el principio params.
Pero esto es lo que se conoce como props.
Que básicamente son las propiedades que tiene nuestro componente.
Y que a partir de estos parámetros, de estas propiedades, podemos hacer que el comportamiento y la interfaz de nuestro componente cambia.
Dependiendo, como hemos visto, pasando en un nombre diferente o, por ejemplo, la ID.
Pero podremos ver más adelante que también le podemos cambiar incluso el comportamiento.
Podríamos cambiar, por ejemplo, si se tiene que ver en negrita o no en negrita.
Si tiene que hacer algo al ser clicado o al no ser clicado.
Le podríamos cambiar cualquier comportamiento a nuestro componente a través de las props.
Ese sería el primer concepto.
El segundo concepto es el de state, el estado.
Y es que si piensas en un botón, por ejemplo, antes tenía un botón aquí.
O, por ejemplo, en nuestros avatares.
Tenemos este avatar, el de Ana, que ahora mismo está activado.
Está en un estado de activación.
Está activo.
Pero el de JSX Lady está desactivado.
Lo hemos desactivado.
Está en otro estado.
Está en dos estados distintos.
Es como que tiene un estado interno nuestro componente.
Así que lo que vamos a querer hacer es que esto se pueda manejar de forma interna en nuestro componente.
Que este estado cambie dentro de nuestro componente.
Y en lugar de hacer esto, que esa vida de nuestro componente la podamos controlar mejor.
Así que vamos a ver cómo funciona esto del estado.
Para eso tenemos que recuperar una cosa nueva.
Ahora esto ya no lo utilizamos porque como tenemos JSX,
pues ya no lo necesitamos.
Ahora vamos a coger de aquí, vamos a tomar del React otra cosa que le vamos a llamar useState.
Y esto lo recuperamos de react.useState.
También podríamos hacerlo así, que sería un poquito más cómodo.
Pero bueno, lo dejamos así para no liar a la gente.
UseState.
Lo que vamos a hacer es crear un estado a nuestro componente.
Para crear un estado tenemos que decir useState, lo utilizamos dentro de nuestro componente,
y le tenemos que decir cuál es el valor inicial de nuestro estado.
El valor inicial se lo pasamos como parámetro y vamos a decir que el valor inicial es que está activo.
Así que vamos a poner true.
Ahora, este useState devuelve una variable.
Le vamos a llamar state.
Y esta variable tiene dos posiciones.
Es un array de dos posiciones.
En la primera posición tendría si está activo.
Y en la segunda posición tendríamos una forma de activarlo o desactivarlo.
Esto normalmente se puede hacer de una forma mucho más fácil de leer,
que sería hacer aquí una deconstrucción y decir que en la primera posición tenemos si está activo,
y en la segunda posición tenemos una forma de actualizarlo.
Hasta aquí.
Muy bien.
Ahora, ¿qué hacemos con esto?
Vamos a quitar por ahora este onclick.
Lo vamos a quitar.
Y lo que vamos a hacer es añadir aquí a nuestra imagen, al picture este,
bueno, a la imagen, vamos a añadirle un nuevo atributo que le vamos a llamar className.
El className en React, y esto es un poquito raro,
pero el className en React es para poner las clases de HTML.
No se puede poner class porque como esto es JavaScript,
que ya te acuerdas que esto es JavaScript, ¿vale?
Como esto es JavaScript, class es una palabra reservada en JavaScript,
porque puedes crear una clase.
Así que para evitar estas colisiones se utiliza className.
Entonces, como className vamos a poner disable.
Vamos a hacer que siempre sea desactivado.
Cuando es un string, esto lo podemos utilizar sin llaves, como prefieras.
Vamos a guardar los cambios.
Y ahora esto ha dejado de funcionar.
Vamos a ver qué ha pasado, que no le ha gustado.
No le ha gustado, que no sé lo que no le ha gustado,
porque no explica mucho esto.
Vamos a ver, React, useState.
Pues no sé lo que no le ha gustado.
A ver si es que he puesto una versión...
Ah, igual es que he puesto una versión muy antigua de React,
que todavía no tiene esta...
Vamos a ver.
No.
Sí que lo tiene, sí que lo tiene.
Vale.
Vamos a ver si en useState está lo que tiene que estar.
Vamos a ver.
Sí, sí que está.
True, setEnable.
A ver.
Voy mirando el chat a ver si alguien...
Ah, sí, cierto, cierto.
Mira, me lo ha chivado Joaquín.
Muy bien, Joaquín.
Que cuando os he explicado lo de las props,
he dejado aquí props y aquí he dejado params.
Y esto no está entendiendo de dónde está sacando las params.
Es props, ¿vale?
Props.
Perfecto.
Muy bien, muchas gracias, Joaquín.
Ahí está.
Perfecto.
Vale, pues vamos a dejar esto para abajo.
Vale, ahora siempre sale desactivado, ¿no?
Ahora la imagen sale siempre desactivada.
Pero, como hemos dicho, por defecto debería ser que estuviese activada.
Entonces, lo que vamos a decir es que vamos a crear aquí una variable
que le llamamos className.
Y vamos a decir que si está activada,
la clase que tiene que añadirle es un extreme vacío,
porque no queremos que añade ninguna clase.
Y si no está desactivada,
esto también lo podríamos hacer con un if,
pero vamos a hacer una ternaria que es un poquito más corta.
Y si no está desactivada,
o sea, si no está activada,
lo que vamos a hacer es una clase que sea disabled.
Así que este className es el que vamos a utilizar aquí dentro.
Y no lo hagamos así, ¿vale?
Esto es súper importante.
No pongamos este string así,
sino que lo tenemos que hacer con llaves
para que evalúe el valor de la constante.
Así que va a estar ahora,
se van a ver todas activadas,
porque por defecto es true.
Si ahora este true lo paso a false y guardo los cambios,
pasan a ser desactivadas.
Entonces, aquí ya te puedes estar dando cuenta un poco
de lo que vamos a querer hacer, ¿no?
Que cuando hagamos un clic,
este valor de este estado pase de true a false o de false a true.
Lo que queremos es que cambie.
Así que por defecto va a ser true,
pero cuando hagamos clic en la imagen,
lo que vamos a querer hacer es ejecutar un método
que lo que va a hacer es utilizar este método setEnable
para pasarle el nuevo valor que tiene que tener nuestro estado.
¿Y cuál va a ser el nuevo valor?
Pues básicamente va a ser el contrario al que ya tenía.
Y ahí vamos a guardar los cambios.
Y ahora cuando hagamos clic, está cambiando.
Aquí está pasando diferentes magias
y esto es una cosa bastante importante de React.
¿Por qué?
Porque normalmente, si estuviéramos utilizando HTML y JavaScript,
a la hora de cambiar el estado,
tendríamos que decirle de forma imperativa,
oye, te tienes que volver a renderizar,
tienes que volver a hacer el trabajo,
tienes que cambiar visualmente lo que has hecho.
Pero HTML, React, lo que tiene es que cada vez que cambian las props,
que le llegan props nuevas, o que el estado del componente cambia,
lo que hace es volver a renderizar el componente.
Lo que hace es volver a renderizarlo.
Una forma muy sencilla de ver esto que está ocurriendo,
si yo inspecciono este elemento,
vamos a inspeccionar aquí el elemento,
ahora lo hago un poquito más grande,
que sé que no sé.
Aquí, vale, vale, este es el elemento.
No queda muy sencillo, pero es este, ¿no?
Esta imagen tiene la clase desactivado.
Si yo ahora le hago clic,
aquí has podido ver cómo ha quitado la clase, ¿no?
Lo pone, lo quita, lo pone, lo quita, lo pone.
Pero esto es súper importante de React,
porque lo que ha hecho es hacer el cambio mínimo necesario
para que este cambio se vea visualmente en nuestra aplicación.
Normalmente en HTML lo que habría hecho es cambiar todo el componente,
o podría haber sido cambiar solo la clase,
pero teníamos que haber hecho un control más granular.
Lo que está haciendo React es renderizar todo el componente,
pero está detectando qué es lo mínimo que tiene que cambiar.
De esta forma controla de una forma muy granular
los cambios que hacen en HTML.
Y esta es una de las razones por las que se creó React,
porque Facebook, bueno, imagínate,
Facebook es una aplicación gigante.
Entonces, si tuvieran que hacer un re-renderizado
de un montón de elementos cada vez que cambiaba un estado
como un me gusta, pues claro, lo que hubiera pasado
es que la performance, el rendimiento de la página
hubiera sido mucho peor.
Así que lo que podemos hacer con esto
es que solo se renderice lo que necesitamos.
De la misma forma, y esto es una de las cosas súper potentes,
y voy a ponerme un momento en la cámara
y os voy a ir leyendo para ver.
Vale, a ver lo que me vais diciendo.
Sí, unos cuantos me habéis chivado el problema,
muchas gracias por estar súper atentos.
Ángelo, Gedier, Rubén, Sergio,
gracias por ayudarme y encontrar dónde estaba el problema.
Madakode, explica muy bien.
Y tú haces comentarios muy buenos, muchas gracias.
¿Por qué es una error function y es para usarla ahí mismo?
Sí, es verdad.
Claro, hay que saber un poquito de JavaScript
con lo que estoy explicando.
O sea, no es JavaScript desde cero, es React desde cero,
pero esto es una error function,
que es una forma corta de escribir esto.
Para el que no lo sepa, que me imagino que alguna habrá.
Pero esto sería lo mismo que lo que teníamos,
que es esto.
¿Vale?
Es exactamente lo mismo.
¿Qué más?
Se le diría un nombre, tendría que llamarle y usar más código.
Claro, es porque si dejara setEnable directamente al cargar la página
se ejecutaría.
Claro, el setEnable lo que queremos es que se ejecute
solo cuando se hace clic.
Si por lo que fuese yo pongo el setEnable en el propio componente,
esto se ejecutaría, generaría un nuevo estado,
generaría un nuevo render, es nuevo render,
generaría un nuevo estado porque ejecutaría el setEnable
y ya entiendes, ¿no?
Ahora habría un leap infinito,
algo que quieres evitar tú y tu máquina.
Vale, sé que ahora no se ve el código,
que ahora me veo yo,
porque os quería explicar hasta aquí donde habíamos llegado.
Lo que os quiero explicar ahora,
que es súper, súper importante y súper interesante,
es la potencia que tienen las props y los componentes.
Y lo vamos a ver ahora con un ejemplo súper sencillo,
pero súper potente,
de hacer que este avatar nos sirva para diferentes cosas.
Voy a compartir la pantalla.
Voy a colocar aquí.
Vale.
Vale.
Ay, es verdad.
Sí, lo de la función.
Cierto.
Lo explico aquí de nuevo.
Lo explico aquí otra vez.
Voy a poner la pantalla.
Lo de la función.
Function.
Básicamente esto y lo que hay es lo mismo.
En lugar de hacerlo así,
esto es una forma un poco más corta de hacerlo.
Es lo mismo.
Es una de las novedades que tuvo el más credit 2015.
Vale.
Vamos con nuestro avatar.
Vamos a querer tener diferentes tamaños para los avatares,
porque es súper típico.
Por ejemplo, en Twitter tienes diferentes tamaños.
En tu propio perfil, vamos a verlo aquí,
este avatar que tienes aquí, este es enorme,
y en cambio estos son más chiquititos.
Dependiendo de dónde va saliendo el avatar,
pues tiene el grande o chiquitito.
Vamos a hacer una cosa.
Vamos a hacer al menos tener dos tamaños,
el pequeño y el normal.
Entonces, lo que vamos a hacer es que ahora
Ana va a tener otro tamaño,
que le vamos a llamar small.
Y con este tamaño de small se tendría que ver de otra forma.
Así que ahora en estas props vamos a tener ese small.
¿Cómo podríamos hacer,
y esto es un poco más tricky y es bastante interesante,
podríamos hacer que el class name cambiase
dependiendo de los tamaños que queremos tener?
Vamos a hacer algo.
Bueno, voy a cambiar los estilos,
porque creo que si cambio esto ahora,
seguramente, vale, perfecto.
O sea, si ahora ponemos aquí 50,
se verá más pequeño.
Así que eso es lo que queremos.
Lo que queremos, este sería el class name para la imagen,
así que lo ponemos aquí.
Y ahora lo que vamos a querer es que el picture
tenga, dependiendo de las props,
pues un tamaño u otro.
Así que vamos a crear aquí otro picture class name
y vamos a decirle que si el props.size es small,
vamos a poner aquí que le ponga la clase is small.
Y si no, que lo deje como está.
Este picture class name lo ponemos aquí,
guardamos los cambios,
y ahora lo que hacemos en los estilos
es que este picture, vamos a ponerle el is small.
Cuando tenemos el is small,
vamos a hacer que tenga un tamaño,
pues un poquito más pequeño.
Así que ya tenemos a Ana y a JSXlady,
que tenemos estos dos tamaños.
Y fíjate que aquí está lo interesante.
Lo único que le decimos al componente es esto,
size small,
y ya tenemos una forma declarativa
de reutilizar este avatar con otro tamaño.
Al final, si aquí lo pudiéramos poner con large,
también lo podríamos hacer.
O sea, sería un poquito más complejo,
pero para esto existe una utilidad
que es muy interesante.
Ahora vamos a querer tener tres tamaños,
que sea small, large,
y este sería el medium.
Y el large lo que vamos a hacer
es que tenga un tamaño de 200 píxeles,
o sea, que sea todavía más, más, más grande.
Vale.
Vale.
Ahí he puesto is large.
Ahora, vale.
Tenemos Ana, que es la pequeña,
JSXlady, que es la mediana,
y vamos a hacer una que sea más grande,
que será, vamos a quitarle el nombre a Ana,
y vamos a ponerle Rodríguez,
y la id, que sea la 12, para que sea diferente.
Vale.
Ya tenemos tres.
Así que vamos a hacer que Rodríguez
sea bastante más grande.
Para hacer eso, lo que podríamos hacer
es, pues, básicamente utilizar un montón de if, ¿no?
Y decir, picture class name,
picture class name, pues, sería vacío.
Si prop size es small,
pues, ya tendríamos aquí que picture class name
sería el small, is small.
Y si es large,
pues, tendríamos que el picture class name
sería más grande.
Y así que este, este, esta línea de aquí,
ya la podríamos eliminar.
Ahora guardamos los cambios
y ya lo tendríamos.
Y ya está.
O sea, ya tenemos un componente,
esto se podría mejorar,
pero ya tenemos un componente
totalmente reutilizable,
con tres tamaños,
y que lo podemos utilizar donde queramos,
de una forma súper sencilla.
Así.
Entonces, aquí,
y con esto vamos a ir empezando a terminar,
¿qué podríamos hacer?
Podríamos hacer una cosa, por ejemplo,
¿qué pasa con esto
si no le pasamos un nombre?
Vamos a tener aquí un 13,
vamos a eliminar estos,
ya que hemos visto que es bastante...
Vale.
El número 13, large,
nos sale esta chica, ¿vale?
Todavía funcionan los clics,
pero ¿qué pasa si no le pasamos un nombre?
Nos gustaría tener un nombre por defecto, ¿no?
Lo que podemos hacer es,
podríamos hacer una cosa,
es decir, que el nombre, aquí,
podríamos utilizar avatar,
esta es la forma antigua de hacerlo,
que no os recomiendo.
Sería decirle que tenga unas default props,
y decirle, vale,
las default props,
el nombre, por defecto,
va a ser,
pues, vamos a poner este,
este mismo.
Vale, lo que le estamos diciendo es,
avatar las default props,
los valores por defecto que tienen las propiedades,
la de nombre,
en el caso de que no llegue y que venga no definida,
pues, le pasaríamos esta,
de forma que si no le llega, sale esa,
y si le llega, pone la que le pasamos.
María.
Guardamos los cambios,
y aquí tenemos María,
pero si no se lo pasamos,
ya hemos puesto uno por defecto.
Ahora, esta es la forma que se utilizaba anteriormente,
pero la mejor y la más sencilla,
y la que os recomiendo ahora,
es que utilicéis siempre los parámetros.
En realidad, los parámetros de las props que le llegan,
lo que podríamos hacer aquí es una desestructuración,
y de construir el objeto,
y quedarnos con las llaves que queremos.
Por ejemplo,
podríamos tener aquí el size,
y podríamos tener también el name,
y también la id,
que son las props,
los parámetros que le estamos pasando a nuestro compuesto,
así que en todos los sitios que utilizamos props.size,
ahora lo que hacemos es utilizar directamente size,
y de la misma forma,
aquí que tendríamos que tener el props.name,
y la id, props.id,
pues directamente podemos utilizar la id.
Para hacer esto,
pues con las llaves,
para desestructurar el objeto.
Vale, perfecto.
Ahora,
si guardamos esto,
pues hemos perdido lo del valor por defecto de name.
Pues ahora,
lo que podemos hacer es añadirlo aquí.
Ponemos un name,
le decimos cuál es el valor que tiene que quedarse,
y vamos a poner aquí,
pues,
a la mujer obrera,
aquí.
Perfecto.
Pues ya lo tenemos.
De esta forma,
aquí podríamos poner todos los valores por defecto.
Ahora,
podemos llegar y hacer algo más.
¿Qué pasa si a un avatar
no se le pasa id?
Si directamente le pasamos,
pues,
el tamaño.
O ni siquiera.
No le pasamos el tamaño,
porque el tamaño ya hemos visto que es opcional.
Vale,
pasa esto,
¿no?
Esto no tiene buena pinta.
Esto lo queremos evitar a toda costa.
¿Por qué?
Porque cuando un componente,
este componente,
no se le pasa id,
pues,
no funciona,
porque la imagen,
pues,
necesitamos que tenga la id.
Vale,
lo que podemos hacer
es una cosa que se llama
como renderizado condicional,
que es renderizar una cosa u otra
dependiendo de las props
o el estado que tengamos.
Así que lo que podemos decir
es que si no tenemos id,
lo que queremos devolver es,
por ejemplo,
un string que sea
avatar incorrecto,
por ejemplo.
Guardamos los cambios
y saldría este texto,
avatar incorrecto.
O lo que podríamos hacer,
por ejemplo,
sería renderizar una imagen,
pero otro tipo de imagen.
Lo que podríamos decirle
es que la imagen que tiene que renderizar
pues,
sea siempre la del,
este hombre tan,
bueno,
vamos a poner el chef.
Vamos a poner el chef.
Vamos a poner el chef,
¿no?
Y lo que tenemos que hacer
es que siempre sale el chef,
por ejemplo.
Esto lo que,
el renderizado condicional
lo que quiere decir básicamente es,
si no,
si tienes una prop o tienes otra,
lo que vamos a hacer
es renderizar una cosa u otra
dependiendo de eso.
Una cosa que se puede hacer incluso
es dentro de nuestro render
que tenemos aquí,
lo que devolvemos,
podríamos devolverlo antes,
como hemos visto ahora,
que si esto es tal,
pues,
hacemos un retur antes de llegar a ese
o lo que podemos hacer
es aquí dentro renderizar diferentes cosas.
Por ejemplo,
si no tenemos id,
en lugar de utilizar el source,
lo que podríamos hacer
es, pues,
poner aquí,
seguir utilizando este picture,
pero dentro renderizar algo diferente.
Podríamos,
si tenemos id,
renderízame la imagen.
¿Vale?
Vamos a,
voy a intentar esto un poco.
¿Vale?
Si tenemos id,
si la id está presente,
renderízame la imagen.
Y si no,
pues,
renderízame,
pues,
por ejemplo,
un strong
sin imagen.
Y aquí tenemos el strong,
pero al menos,
aquí tendríamos,
sin imagen,
pero al menos estaríamos reutilizando el nombre,
¿no?
A lo mejor el nombre sí que es,
alguien nos lo pasa,
y decimos name,
y esta es Susana.
Y resulta que Susana,
pues,
todavía no tiene imagen.
Pues,
podríamos hacer esto.
O podríamos llegar a tener,
también,
una forma de,
por ejemplo,
hacer como si tuviera una imagen,
pero todavía sin imagen.
Podríamos poner aquí una i,
sin imagen,
y esto,
pues,
estilarlo de alguna forma.
Decirle que esto tenga esto,
y por de que sea esto así,
algo,
bueno,
más o menos.
Y el borde radius que teníamos en la imagen,
básicamente,
y min height,
vamos a poner 50 píxeles,
bueno,
con display flex,
bueno,
más o menos ya se entiende por dónde,
dónde iban los tiros,
¿no?
Intentar,
pues,
hacer que,
hay,
una line,
hacer que la imagen,
hay,
line items,
bueno,
lo pueden intentar todos aquí.
Bueno,
X,
en el caso.
El caso,
que podríamos llegar a hacer eso,
¿no?
Intentar que tenga como una imagen aquí,
o simular que tenga una imagen.
Y esto lo estaríamos haciendo con un renderizado condicional.
Si tiene ID,
renderizamos esto.
Si no tengo ID,
pues,
pasamos a tener este,
el de sin imagen.
De esta forma,
pues,
lo mismo podríamos hacer con el name.
Por ejemplo,
vamos a quitar aquí unos cuantos,
y vamos a dejar solo el de María.
Vale,
con el de María.
Si María,
podríamos cambiar lo que renderiza cuando se desactiva o cuando está activa.
Podríamos decir que si está activado,
pues,
vale,
que enseñe el nombre.
Y si no,
que solo ponga el string que sea desactivada.
Y de esta forma estaríamos cambiando lo que renderizamos.
Esto sería un renderizado condicional.
Esto es básicamente,
dependiendo de una condición,
renderizar una cosa u otra.
Y como puedes ver,
lo hacemos con,
pues,
lo podemos hacer con el state
para renderizar un string u otro,
o lo podemos hacer con cosas que nos llegan por las props
para renderizar diferentes elementos dentro del componente.
Y vaya,
esto lo que hace es que tenga una potencia brutal
y un mismo componente
sea capaz de adecuarse a diferentes necesidades.
Ya hemos visto aquí que tenemos las props para los diferentes tamaños,
que podemos hacer que tengan valores por defecto,
y además,
bueno,
ahora siempre va a salir María.
María está chupando cámara.
Esto es lo que está pasando con María.
Susana.
Vale.
Y ya tenemos valores por defecto,
diferentes tamaños,
y esto lo hemos conseguido,
pues,
en muy poquitas líneas de código.
Y además,
lo estamos haciendo de una forma declarativa.
No estamos indicándole cuando desactivamos algo,
no le estamos diciendo,
entonces renderiza así,
o sea,
no,
le estamos declarando.
Si está esto activo,
pues,
tienes que enseñar el nombre.
Si no,
lo que tienes que mostrar es esto.
Lo estamos declarando.
Esto es una de las cosas súper,
súper importantes de React.
Y vamos a leer el chat,
a ver por dónde se ha quedado la cosa.
Este manejo de estado es muy confuso.
¿Es el mejor modo de gestionarlo?
Sí.
La verdad es que no,
si te parece confuso,
pues,
pregúntame y a ver cómo te lo puedo solucionar.
Pero en realidad es,
tengo un estado interno,
tiene un valor inicial,
que puede ser,
puede ser un booleano,
puede ser un número,
puede ser un string,
puede ser lo que queráis.
Si queréis,
puedo hacer rápidamente el ejemplo de un contador también,
que es el típico ejemplo,
pero que también ayuda a entender muchas cosas del principio de React.
Y donde se ve claramente también que se puede utilizar con un número,
para ver cómo se va incrementando el número.
¿No sería mejor darle nombre de la clase directamente por parámetros?
Podría ser,
pero en este caso,
en este caso que estábamos hablando de un estado interno,
de si está activo o desactivo,
en este caso es mejor que lo controle dentro del componente.
Porque en este caso,
el componente dentro sabrá qué clase le tiene que poner.
Se podría llegar a configurar por props,
pero en este caso creo que no sería tampoco muy necesario.
Puedes usar clases si vienes de programación orientada a objetos
y tienes un setter.
Esa forma es con el hook de useState.
Sí,
esta es la forma con el useState,
el hook de useState,
pero podrías utilizar clases.
No te lo recomiendo.
Te recomiendo que aprendas funciones.
Las clases son más largas,
un poquito más complejas
y además tienen mayor coste a la hora de evaluarse en el navegador.
Por lo tanto,
ahora la forma más recomendada es utilizar funciones
porque queda mucho más corto
y se maneja y se detectan errores de una forma más fácil
y además que ocupan menos.
Así que te recomiendo que, Sergio,
lo hagas con funciones.
Imagino que también podrías poner una ID por defecto.
Dice Cristina.
Sí,
podrías poner una ID por defecto sin ningún tipo de problema.
Francisco José me soluciona el tema
y me dice Flex Direction Column.
Sí, seguramente.
Como lo echáis a saco,
no he sido capaz de hacer el avatar ese,
pero ya está.
El código de componentes normalmente lo separa en otro archivo
o queda así.
Normalmente se separa en otro archivo.
Esto ha sido un ejemplo
porque me quería centrar en que aprendierais React.
A partir de aquí,
en realidad se podría utilizar diferentes soluciones
y de hecho lo podemos mirar en el siguiente live.
Si queréis,
si queréis,
si os animáis,
pues mañana repetimos y hacemos otro,
pero con Create React App.
Nos quedamos con este
y mañana lo repetimos a la misma hora,
a lo mejor más corto,
y vemos cómo hacerlo
con todas las herramientas,
con las buenas prácticas
de ir separándolo
y cómo funcionaría en un proyecto más real.
Porque esto es un ejemplo
enfocándonos solo en React.
¿Qué más?
¿Qué más?
A ponerlo en práctica.
Sí, espero que la habéis puesto en práctica.
No entiendo la const enable y set enable.
¿Qué hacen las almohadillas?
Pues voy a hacer una cosa.
Voy a hacer el ejemplo del contador
que me lo está pidiendo gente en el chat
y además os vuelvo a explicar esto.
¿Vale?
Entonces hago las dos cositas.
¿Algún curso de React Hooks que recomiendes?
No, la verdad es que no.
No te recomiendo ninguno
porque no creo que deba haber un curso de React Hooks.
¿Vale?
Porque Hooks es parte de React.
O sea, tiene que haber un curso de React.
Y bueno, algún día,
espero que muy pronto haga yo el mismo.
¿Qué has dado aquí que no aparezca en el curso de React?
Pues la parte de los hooks,
la verdad es que casi todos los conceptos
ya los pongo en el curso de React.
Lo que pasa es que en el curso de React
es con clases y esto es con funciones.
¿Mañana Hooks?
Vale, pues mañana seguiremos con los hooks,
aparte de esto.
¿Dirías que el estado de React
equivale al data object de Vue?
No conozco el data object de Vue,
pero me imagino que sí, Cristina.
Me imagino que sí.
¿Crees que el context API maneja mejor el estado que Redux?
No.
No creo que lo maneje mejor,
pero sí creo que lo maneje lo suficientemente bien,
que muchas veces es lo interesante.
No puede estar desde el principio,
se queda colgado en YouTube.
No te preocupes, Roger, me lo preguntáis mucho.
Se queda colgado en YouTube.
Suscribíos, le dais like al vídeo
y lo compartís con todos vuestros amigos
y si os suscribís,
pues os llegará el aviso cuando esté colgado el vídeo.
Los hooks lo veis en el curso de Platzi.
En el curso de React avanzado
sí que se da porque lo di yo,
entonces, y sí que se ven hooks, ¿vale?
Así que si os interesa
o podéis esperar qué voy a hacer,
qué estoy preparando.
Hacemos rápidamente el ejemplo del contador.
Os explico un poquito
lo del qué significan los corchetes
y con eso terminaremos, ¿vale?
Así que os comparto la pantalla.
Muchas gracias a todos por vuestro apoyo,
que sois un montón,
300 o así que había visto por ahí.
A ver si soy capaz de poner la pantalla.
Voy a quitar todo lo que tenía hasta ahora.
Bueno, voy a quitar este avatar,
solo el avatar.
Y voy a hacer una nueva función
que va a ser contador.
Hay una cosa que no he comentado
que es bastante importante, ¿vale?
Voy a crear este componente contador
y voy a hacer que por ahora
renderice un botón.
Así.
Y este contador es el que vamos a querer renderizar
en nuestra aplicación.
Bueno, este es el peor contador del universo, seguramente.
Voy a quitar también lo de womanintech por ahora,
porque ahora ya no tiene sentido.
Podría llamarle womancontadorintech,
pero bueno.
Voy a poner por ahora el botón,
que sé que es un poco flojo el botón,
pero ahora os explico una cosa
que es muy importante que entendáis, ¿vale?
Cuando creáis un componente en React,
le tenéis que llamar con mayúscula la primera letra.
Porque si yo intento utilizar contador en minúscula
y utilizo esto aquí y lo guardo, desaparece.
¿Y a dónde ha ido?
Pues en realidad está ahí.
Está ahí.
Pero el tema es que no está como queremos que esté.
Si miramos aquí las herramientas de desarrollo,
si soy capaz de sacarlas, sin liaros mucho,
vale, ahí, ahí, más o menos.
Es un momentito, pero es importante que lo veáis.
Vale.
Aquí tenemos la app.
Y la app está renderizando el elemento contador.
Esto está pasando porque si utilizamos minúsculas,
lo que React cree que estás intentando renderizar
es un elemento HTML.
Entonces, no puedes utilizar minúsculas.
Te vas a volver loco o loca si haces esto.
Tienes que utilizar siempre camel case.
Bueno, pascal case.
No podéis utilizar camel case.
Tiene que ser pascal case.
Pascal case es que al menos la primera empieza con mayúscula.
Luego contador, muy guay.
Puede ser así, si queréis.
¿Vale?
Puede ser por pascal case.
¿Vale?
Ahora sí que funciona bien.
Puede ser pascal case.
Puede ser solo la primera mayúscula.
Pero la primera tiene que ser mayúscula para que React
sepa diferenciarlo.
Súper importante.
¿OK?
Entonces, vamos con el contador.
Vamos a poner el contador muy guay.
Esto es muy español, lo sé.
Así que voy a poner un contador.
Vamos a dejarlo en contador porque podría poner perrísimo,
arrechísimo.
Podría poner cosas de esas.
Pero vamos a dejarlo así.
Vale.
Ahí tenemos nuestro contador.
Vamos a poner el botón que sea de incrementar.
Y otro botón que sea de decrementar.
Y esto lo guardamos.
Vale.
¿Qué ha pasado?
Esto no funciona.
¿Por qué no funciona una cosa tan sencilla como esto?
Vale.
Tiene una explicación.
Esto no funciona porque React lo que necesita,
como es un árbol de elementos,
lo que necesita siempre es solo renderizar un elemento a la vez.
Si yo pongo un dip aquí y aquí,
lo que va a pasar es que va a funcionar correctamente.
Porque al final,
lo único que puede renderizar es un elemento.
Ahora que este elemento tenga más elementos dentro,
perfecto.
¿Qué pasa?
Que esto nos está generando innecesariamente una estructura de
HTML que no queremos.
Este dip nos sobra.
Así que voy a borrar este dip.
Y lo que puedo utilizar aquí es una cosa que se llama fragment.
Podría utilizar aquí un React.fragment.
React porque lo tenemos aquí y lo habíamos importado.
Ya lo podríamos utilizar gracias a los scripts.
Entonces, este fragment lo que hace es no renderizar nada.
Y lo que nos permite es poder renderizar dos elementos sin necesidad del dip.
Bueno, esto es por si queréis saberlo.
Pero por ahora vamos a dejar un dip que ya es suficiente.
Pero que no es necesario.
Solo que sepáis que no es necesario.
Así que vamos a poner un spam.
Y aquí vamos a poner nuestro contador a cero.
Vale.
No es el mejor contador del mundo.
Vamos a hacerlo un poquito más grande.
PhoneFamily.
Al menos que se vea más bonito.
Y PhoneSize 24.
Vale.
No es el mejor contador, pero ahí vamos.
Entonces, vamos a ver el UseState.
Que alguien decía que todavía no le estaba quedando muy claro el tema del UseState.
Entonces, los que estáis comentando de utilizar esto así,
también se puede utilizar así.
Lo que pasa es que aquí no está preparado porque esto,
el ReactFragment se puede utilizar así o se puede utilizar así.
Pero para que se pueda utilizar así,
tenéis que utilizar un plugin de Babel y hacerlo más correcto.
Que ya veremos cómo hacerlo.
Ahora, en este ejemplo, solo lo podemos hacer así.
¿Vale?
Pero vamos a dejar el dip por ahora.
Bueno, volvemos con nuestro contador.
Vamos con el UseState.
El UseState.
El UseState lo que hace es crearnos un estado.
Porque lo que vamos a querer aquí es tener nuestro contador.
Y quiero que cada vez que le demos a incrementar,
este número se incremente en uno.
Alguien podría decir, bueno, pues crea una constante aquí, ¿no?
Que se empiece en cero.
Y vale.
Pues haces el onClick aquí.
Y al hacer el onClick, lo que hacemos en esta función
es que el contador sea contador más uno, ¿no?
Esto sería, pues, maravilloso.
Y aquí lo mismo.
En decrementar, pues, sería contador menos uno.
Y guardamos los cambios.
Y esto ahora, pues, cada vez que le damos a incrementar,
aquí, este cero, vamos a evaluar contador.
Imaginemos que el contador, queremos que empiece en 10,
para que veamos el cambio.
Vamos a guardar el cambio.
Bueno, 12, que se ve más.
Vale, 12.
Ahora, cuando le doy a incrementar, pues, no se está incrementando.
No está pasando aquí nada.
Pero, ¿está funcionando esto?
Pues, vamos a verlo.
Si aquí pongo esto, hago un alert,
que pongo a incrementar y guardo los cambios,
y le doy aquí, pues, está funcionando, ¿no?
Vemos el alert, perfecto.
Pero no se está incrementando esto.
No se está incrementando de ninguna forma.
Vale, para los que hayáis visto mi curso de Svelte,
esto, una cosa así parecida, sí que funcionaría en Svelte.
Pero en React no funciona así.
No funciona así porque lo que necesitamos
es tener un estado que le diga al componente
que se tiene que volver a renderizar
cuando el valor de ese estado cambie.
Entonces, para crear un estado,
tenemos que utilizar UseState.
Ahora, entonces, el contador este,
vamos a hacer que sea react.useState.
Estoy utilizando react.
Pero podría ser UseState directamente, ¿vale?
Porque arriba lo habíamos aquí, lo teníamos.
Así que puedo utilizar el UseState directamente.
Y aquí le ponemos el valor inicial del contador.
Pongamos que es 50.
Perfecto.
50.
Ahora sí que funciona aquí con el 50, ¿no?
Tenemos el 50.
Si le pongo 51, el valor inicial parece que funciona bien.
Pero no funciona del todo bien
porque en realidad vamos a ver
qué tenemos dentro del contador.
Vamos a poner un Console.Log y voy a abrir la consola.
Este es el Console.Log.
En realidad, el contador es un array de dos posiciones.
En la posición 0 tengo el valor del contador.
Y en la posición 1 tengo una forma de actualizar el valor del contador.
Entonces, lo que me está devolviendo el UseState, en realidad,
el contador este es un array.
El contador state, en realidad, es un array de dos posiciones.
En contador state 0, en la posición 0,
lo que tengo es el valor.
Vamos a llamar contador value.
Y lo que tenemos en la posición 2
es para actualizar el valor.
Actualizador.
Vamos a llamarle actualizador.
Nombre horrible.
Y eso lo tenemos en la posición 1.
¿Vale?
Posición 0 tenemos el valor.
En la posición 1 tenemos el actualizador.
Ahora, lo que vamos a hacer aquí,
en lugar de utilizar el contador,
vamos a utilizar el valor.
Lo que queremos mostrar es el valor.
Vamos a quitar todo el tema de un clic.
Por ahora lo vamos a dejar vacío.
Y ahora veremos.
Vale.
Guardamos los cambios.
Y aquí tenemos el 51.
Si yo le pongo 77 y guardo los cambios,
vuelve a ser 77.
Entonces, el valor ya lo tenemos solucionado.
Ahora falta utilizar el actualizador para actualizarlo.
Lo que queremos es que queremos actualizarlo.
Entonces, ¿qué tenemos que hacer?
Lo que tenemos que hacer aquí es llamarlo cada vez que hagamos un clic.
Y le decimos el contador actualizador.
Es un nombre horrible.
Voy a poner actualizar contador.
Voy a llamar actualizar contador.
Actualizar contador.
Al llamar a actualizar contador,
le tenemos que decir cuál es el nuevo valor que va a tener contador.
Entonces, si queremos incrementar, ¿qué va a ser?
Pues contador valor más 1.
Le pasamos como parámetro el nuevo valor del contador.
Y ahora, en decrementar, lo que vamos a hacer es contador valor menos 1.
Lo contrario, básicamente.
Uno incrementar y otro decrementar.
Vamos a hacer que esto empiece en 14.
Ahora, cuando le da incrementar, pasa 15, 16, 17.
Lo que está haciendo aquí React es que detecta que estás llamando a este método
actualizar contador, que es el que has extraído del contador state que hemos creado aquí.
Y, de esta forma, sabe cuándo tiene que actualizar el estado.
También funcionaría decrementar, incrementar y decrementar.
O sea, esto funcionaría correctamente.
Y lo bueno es que le puedes decir cuál es el valor inicial que tiene que tener.
33, pues 33.
Y a partir de ahí, pues funciona perfectamente.
Ahora, ¿qué pasa?
Cuando tenemos este tipo de estructura, se puede crear de una forma mucho más sencilla
utilizando una desestructuración.
Que esto, es decir, si esto es un array, lo que puedo hacer es crear una constante
y diciendo que está entre corchetes, podemos decir, vale, en la primera posición
tengo el contador value.
Y en la segunda posición tengo el actualizar contador.
Así que, lo que habíamos visto antes, que era esto, básicamente, lo de arriba y lo de abajo
son lo mismo.
Esta línea de aquí y estas tres líneas de aquí son lo mismo.
Lo que pasa es que esta línea es mucho más limpia y más cómoda y, no sé, es mucho más fácil de entender.
Es decir, créame dos constantes.
En la primera constante, que es la primera posición del array que nos devuelve el useState
es contador value y en la segunda posición tenemos el actualizar contador.
Y así, de esta forma, ya no necesitamos nada de esto.
Por supuesto, puedes utilizar la otra si te parece más fácil de entender.
Pero una vez que estás ya habituado a hacerlo así, ya fácilmente entiendes al ver este corchete
que es crear una variable que es contador value y otra que es actualizar contador.
La primera, que es la primera posición del array del useState y la segunda, que es la segunda posición del array que nos devuelve.
Y con esto ya tendríamos nuestro ejemplo del contador.
Entonces, la pregunta de por qué si es una constante se puede actualizar es porque en realidad esto,
una constante lo que no podríamos hacer es esto.
Esto no lo podríamos hacer.
Esto estaría mal, mal.
Pero ¿qué pasa?
Nosotros en realidad nunca estamos volviendo a asignarle un nuevo valor.
Esta constante dentro del componente no se está asignando.
Esto lo está actualizando React de forma interna.
Y en realidad para React esto siempre es, o sea, para JavaScript esto siempre tiene el mismo valor
porque nosotros no se lo estamos reasignando.
Como lo estamos haciendo con el método actualizar contador,
esto se está actualizando internamente.
Y internamente cuando se vuelva a ejecutar esta función se volverá a crear esta constante,
pero solo con el valor nuevo.
Entonces no estamos reasignándola.
Por lo tanto, podemos utilizar una constante.
Y claro, esto de contador value esto es porque es un número,
pero en realidad, y esto para complicarlo un poco más,
podríamos poner que fuese un objeto.
Entonces el contador value tendríamos que utilizar punto value, contador value, punto value, y punto value.
Podríamos hacer cosas así.
Al final podríamos poner, bueno, ahora no sé qué le he liado, pero algo le he liado.
Pero podríamos poner otro tipo de estructura de datos.
No hace falta que siempre pongamos la misma.
Al final podemos poner tantas estructuras como queramos.
O sea, no hace falta que utilicemos un número o un string.
Pueden ser objetos, puede ser arrays, puede ser lo que queramos.
Así que voy a dejarlo como estaba, que estaba funcionando muy bien.
Y ahí, eso, 33.
No sé si esto ahora ha quedado más claro.
Voy a poneros aquí que os vea la cara.
Bueno, que me veáis la cara.
Puedes tener un único state para ese componente.
Se pueden tener tantos states como queráis.
Podemos tener, mira, podemos hacer rápidamente.
Ya, esto, lo último ya.
Lo último.
Podríamos tener otro state que fuese número de veces.
Y actualizar veces.
¿No?
Y esto sería una cosa que queremos enseñar con el número de veces que hemos utilizado, veces utilizado.
Y aquí vamos a ver cuántas veces hemos utilizado el contador.
Pues el número de veces, al principio, debería ser cero.
Vale.
Uf.
Se ve ahí, vamos a poner una P.
Se vea separado.
Vale.
Vezes utilizado, cero.
Tenemos otro estado.
O sea, que puede tener, un componente puede tener más de un estado.
Ahora, cuando tanto incrementemos como cuando decrementemos, lo que vamos a querer es actualizar el número de veces que hemos utilizado.
Así que vamos a actualizar el número de veces con este actualizador, el de actualizar veces.
Ahora, le damos aquí y vemos cómo estamos actualizando los dos estados.
Y se está, el número de veces utilizado siempre se incrementa, claro, pero el otro no.
Este es el número de veces que hemos utilizado el contador y esto es nuestro contador.
Así que podemos tener dos estados en un mismo componente.
Dos, tres, cuatro, diez mil, o sea, los que necesites.
¿Vale?
Así que con eso creo que queda más claro.
Vamos a ver que el segundo ejemplo estuvo mejor.
Bueno, yo creo que al final necesitáis unos cuantos ejemplos para entenderlo del todo.
El del contador es muy, muy, muy claro para el estado porque, claro, se ve solo el tema del estado.
Así que creo que era interesante que lo viésemos.
En lo primero os ingresa el valor inicial y la segunda posición es para la función que modificará ese valor.
Dice Madacode.
Exactamente es así.
Dice Adrián Durán.
Ahora lo entendí, pero me parece horrible, la verdad.
A la hora de gestionar muchos estados deberíamos tener una story central.
Me parece muy mal tener una story central para todo el estado de vuestra aplicación.
¿Vale?
Es un error muy típico tenerlo todo en una story central.
Y de verdad no os lo recomiendo.
De hecho, no os lo recomienda ni el creador de las stories, que es Dan Abramov, que además trabaja en React.
Tenéis que tener en la story global estados que realmente se compartan en más de un sitio.
No tengáis todo el estado de vuestra aplicación en una story global.
Por ejemplo, si tenemos un avatar y queremos que tenga un estado local para saber si está activo o desactivo,
tenerlo solo en el avatar.
¿Vale?
No os volváis locos de ponerlo todo en la story porque al final eso no escala.
Y de hecho, normalmente veo miles y miles de problemas de aplicaciones que no escalan por eso y luego no saben cómo sacarlo.
Vale.
Daniel dice que las constantes no crean variables inmutables, crean bindings inmutables.
La mejor forma de entender esto es que no puedes reasignar una constante, pero en realidad al final sí puedes llegar a cambiar o mutar el valor que hay en una constante como un objeto.
Pero en este caso, lo que hemos visto no es el caso.
Cristina dice, súper clarificador, mil gracias, eres excelente explicando.
Vaya, muchísimas gracias, me encantó.
Muchas gracias.
Hermano, ¿qué trabajo que te mandaste?
Este paso a paso es inmejorable, me dice Roberto Suárez.
Muchas gracias.
Espero que lo hayáis entendido.
Quería que, sobre todo a la gente que lo está entendiendo desde cero, quería que vieseis claramente todos los conceptos,
por qué se hacen las cosas.
Creo que es súper importante entender el por qué de las cosas que hay detrás.
que las cosas no se hacen porque sí, sino que realmente tiene una explicación y creo que es la forma de entender las cosas y de aprenderlas correctamente.
Porque si no, luego se crean errores o malas prácticas.
Y la base es lo más importante para entender bien las cosas que se utilizan después.
Si yo me pongo a utilizar aquí JSX y cosas así desde el principio, seguramente podríais ser capaces de utilizar React,
pero no entenderíais por detrás lo que está pasando.
¿Qué más?
Para una landing page se usaría State o el concepto de State se usa para la sesión de una app, dice Ricardo.
El State puede ser para la sesión de una app, pero podría utilizarse perfectamente para una landing page,
dependiendo de la acción que haga un usuario, que se vea, por ejemplo, un menú.
Por ejemplo, podrías tener un estado que si el usuario ha hecho clic en un sitio, se despliegue un menú.
Y eso lo podrías hacer con un estado y un renderizado condicional.
Así que en realidad al final es tan complejo como lo quieras hacer.
Así que, ¿un estado cuántos, cuántos, cuántos parámetros puede tener?
Dice Manuel.
En realidad, parámetros solo puede tener un valor, pero ese valor puede ser un objeto.
Por lo tanto, cuando es un objeto, puedes tener tantas propiedades como quieras.
Puedes poner un string, un número, lo que quieras, pero puedes poner un objeto.
Y dentro del objeto, como puedes tener tantas y tantas propiedades como quieras, pues ya lo tendrías.
Gracias desde Colombia, gracias Martín.
¿El segundo parámetro es una función?
Sí, el segundo parámetro del UseState es una función que se utiliza para actualizar el valor del estado.
¿Qué es un Astor Central?
Básicamente, un Astor Central es tener el estado que hemos visto, pero en lugar de tenerlo dentro del componente,
lo tendrías fuera y sería como global.
No sería solo a nivel de componente, sino que sería a nivel de toda tu aplicación o en partes de tu aplicación.
Pero es una buena idea para cuando son estados que quieres compartir en más de un sitio,
pero es algo a evitar siempre que puedas, ¿vale?
Porque al final esto complica tu aplicación.
Es una recomendación que hago yo.
¿Qué más?
Real lo que nos permite es generar componente independiente.
Un componente no necesita saber la información de la aplicación completa, dice Pablo.
Exactamente, no necesita.
Pero hay veces que sí que lo puede necesitar y existen soluciones para ello.
Para eso está lo del Astor Central que estamos diciendo.
¿Cuál es la diferencia de Hooks y Redux?
¿O no tienen relación?
No tienen ninguna relación.
De hecho, Redux tampoco es parte de React y es una librería totalmente externa que podrías utilizar sin React.
Los Hooks lo que te permiten es como dotar de cierta funcionalidad a los componentes.
Darle estado, podrías también guardar información, tienes, por ejemplo, cómo generar, ejecutar métodos y funciones cuando se vuelve a renderizar el componente.
Por ejemplo, cuando queramos que se vuelva a renderizar, que ejecute una función, podríamos utilizar un Hook.
Porque los Hooks son ganchos y eso es lo que significa que se engancha en ciertas ejecuciones de las funciones de nuestros componentes.
Rafael, primera vez que veo algo de React y la verdad es que me ha encantado la explicación.
Todo muy claro. Mil gracias. Mil gracias a ti. Me alegro que te haya gustado.
¿Qué recomiendas para formularios grandes?
Te recomiendo un componente que se llama Formic.
Muy bueno, que ya está preparado para no tener que liarse.
Gracias por este live sobre React.
Ahora, algunas buenas prácticas para ingresar en el mundo de React.
Igual lo vemos mañana en otro live o en otro live otro día.
¿Qué más?
Midu, ¿cómo uso un Query Selector o un GetElementById?
¿Puedes dar un ejemplo?
Pues al Query Selector y al GetElementById solo le tienes que pasar la ID y al Query Selector una selector.
Yare Sánchez, ¿tienes un curso de React con funciones?
No lo tengo todavía. Estoy trabajando en ello.
David Peek, MoveOnLife. Gracias.
Si no recomiendas un Store Central, ¿recomiendas reducir?
No digo que un Store Central esté mal, solo digo que lo evitéis.
Hay veces que se necesita y entonces lo uséis.
Solo digo eso.
¿Cuál es recomendable utilizar Next.js?
Sobre todo en proyectos grandes o grandes que necesitas que pasen muy rápido.
Por ejemplo, para una aplicación de producción que vaya a servir millones de usuarios,
a mí me gustaría tener control más granular y no utilizar Next.js.
Pero es muy buen framework y para hacer cosas rápidas.
Aunque sean aplicaciones grandes, está muy bien.
Cuando necesitas pequeños detalles, cada vez es un poquito más complicado.
Si yo tengo un web server, ¿puedo ocupar React sin Node.js?
Claro. O sea, como hemos podido ver, React lo podemos utilizar como una página estática.
Y de hecho, en el próximo live lo deployaremos en un servidor y lo veremos.
No he manejado React con Django y la verdad es que no tengo ni idea cómo integrarlos,
pero al final React se debería poder integrar en cualquier cosa.
Lo que sí que puede ser difícil es si quieres utilizar React en el servidor,
porque React también se puede utilizar en el servidor y realizar toda tu aplicación en el servidor
es un tema más complejo y no todo el mundo lo necesita.
¿Cómo haces test de integración? Utilizo Cypress, sí.
Y también React Testing Library y os los recomiendo a los dos mucho porque son muy guays.
Muchísimas gracias a todos los que estáis aquí.
Hemos sido más de 400 en un momento brutal.
Solo deciros que os suscribáis al canal, que le deis like, que comentéis, que le deis vida,
que cualquier cosa, que me deis ideas para próximos vídeos, que me lo voy apuntando.
No hago tantos vídeos como me gustaría, pero cualquier cosa que veáis que os interesa
y que sobre todo tengan cabida en un vídeo y que se pueda explicar,
pues me encantaría hacerlos y darle vidilla, compartirlo con vuestros amigos,
que eso también ayuda para que seamos más y cuanto más seamos, pues más cosas ya iremos haciendo.
Juan Zuleta dice, ¿cuándo utilizar Redax?
Lo intentaría evitar a toda costa utilizar Redax,
pero sobre todo cuando necesitas compartir muchas cosas del estado en diferentes componentes.
Por ejemplo, pues haces una búsqueda o unos filtros, tienes unos filtros que necesitas que cuando cambien su estado
pasen cosas en el header y en los resultados de la búsqueda, pues igual tiene sentido.
Lo evitaría, intentaría utilizar el contexto de React.
¿Qué más? Test para los próximos vídeos. Lo tengo apuntado, pero todavía quiero que todo el mundo vaya aprendiendo
de lo que estamos hablando y tal antes de llegar a testing, pero seguramente pronto.
Liliana, muchas gracias por tu curso. Me ha gustado mucho. Muchas gracias por tu comentario. También me ha gustado mucho.
David Ramírez, ¿qué tipos de proyectos recomiendas usar React?
React, yo lo haría más al revés. Por ejemplo, mi blog no tiene nada de React, cero líneas. ¿Por qué?
Porque no tiene ningún tipo de necesidad de actualizarse con la interacción del usuario.
Cualquier aplicación, cualquier web que necesite responder y cambiar y renderizar cosas diferentes al cambiar el estado,
o sea, que tengas que renderizar grandes cosas cuando tú haces un clic o que cambie, cualquier cosa que sea muy dinámica,
seguramente ya React sería mejor solución. Pero mi blog, que es midu.def, no tiene nada de React.
Es totalmente estático. No tiene sentido. Para lo poco que es de interactivo, ¿para qué lo vamos a utilizar?
Pues hasta aquí vamos a llegar. Muchas gracias a todos los que os ha gustado. Gracias por compartir, dice Ricardo.
Gracias Jesús David Rodríguez. Gracias a todos. Ha sido a todos y a todas, que habéis bastante chicas, y os lo agradezco.
Espero que os haya gustado mucho el live de hoy. Se me ha ido otra vez de las manos. Seguramente mi pareja me va a matar,
porque seguramente se está muriendo de hambre, pero espero que haya valido a la pena.
Así que muchísimas gracias de verdad, de corazón. Cuidaos mucho, portaos bien, que estéis a salvo.
Y nos vemos en siguientes vídeos aquí en el canal. Suscribíos, por favor, dadle like y compartidlo con todos vuestros amigos y vuestros colegas
para que vayamos siguiendo aprendiendo Frontend. Así que muchas gracias. Os mando un abrazo enorme.
Cuidaos mucho y seguid dándole, por supuesto, al Frontend. Hasta luego.