Si en la clase anterior hemos visto cómo podemos utilizar Bootstrap en nuestra aplicación de React,
en esta clase vas a aprender a utilizar Material UI, un framework de CSS creado por Google que es súper famoso
y que queda muy bien. Así que, vamos a verlo.
Material UI, que está basado en los estilos, en el diseño de Android y de Google, de los productos de Google,
es también muy utilizada, pero el problema que tiene Material UI es que se nota mucho que es Material UI.
O sea, quiero decir, es también un estilo muy marcado que se nota que estás utilizando ese.
No pasa nada, o sea, es súper bonito. Si utilizas Google es por algo.
Pero claro, al final tu aplicación tendría un estilo muy Google.
Si no te importa, pues nada, es genial. O sea, la verdad es que está muy bien resuelto y puede funcionar genial.
Así que, para utilizarlo, lo mismo.
Tendríamos que instalar Material UI Core, en este caso. Vamos a instalarlo.
He hecho un stash de los cambios. O sea, se supone que no deberíamos ver los cambios que teníamos en nuestra aplicación
con lo que habíamos hecho. A ver, ¿vale? Empezamos como de cero.
Vamos a instalar ahora Material UI Core. De nuevo, lo estoy haciendo así porque lo añado en el package.json, ¿vale?
Y no hago un npm install directamente. Lo estoy haciendo así porque como tenemos un monorepo,
así puedo hacer la instalación desde la raíz y me evito problemas.
Porque si no, podríamos tener algún tipo de problema al hacer el install y ya está.
Así que, añado la dependencia, hago el npm install y esto debería funcionar correctamente.
Una de las cosas que deberíamos añadir a Material UI es la fuente que utiliza Material UI.
Que como ya sabrás, es una fuente muy típica en los productos de Google.
Por eso te digo que es que se nota demasiado que es un producto de Google.
Así que en el public, en el index.html, vamos a añadir aquí una nueva línea para cargarla a Roboto.
Es una fuente muy bonita, pero que ya te digo que es un estilo de material demasiado, demasiado, demasiado evidente.
Vamos a importarla a esta y ya está.
Ahora, ¿cómo empezamos a utilizar Material UI?
Vamos a ver, esta es nuestra aplicación.
Como hemos empezado antes con el container, vamos a hacer lo mismo aquí, ¿vale?
Vamos a irnos a app y aquí, que teníamos un suspense y tal, vamos a importar el container.
El container lo vamos a, de nuevo, podéis hacer lo mismo que he comentado antes.
Hacer Material UI, barra, y entonces aquí buscar container, o lo puedes importar directamente desde la raíz.
Lo que prefieras, pero antes ya te he comentado cuál es la diferencia y por qué es importante al menos conocerla.
Que hagas una u otra, mira, cada uno es libre de hacer lo que quiera, pero que al menos no se diga que no sabe lo que está pasando.
En este caso, Material sí que tiene un componente container, a diferencia del otro, que creo que no lo tiene,
pero si no puedes utilizar el class name de Bootstrap, que es container, para que lo haga, pero en este caso creo que sí que lo tiene.
Vale, vemos que, ¿ves? Ya solo utilizar este componente, pues bueno, ya nos ha centrado nuestra aplicación y todo esto.
Solo por ver lo mismo que habíamos hecho antes, pero con Material, pues podríamos ir a las notas y aquí lo mismo, ¿no?
Antes habíamos visto la tabla, pues vamos con lo mismo.
Aquí podríamos poner, este es el table container, dentro del table container tenemos el table, dentro del table tendríamos el table body, ¿vale?
Y dentro del table body, ahora sí tendríamos las notas.
Voy a quitar el ul, este, la lista desordenada, que ya no tiene sentido, la ponemos por aquí.
Y ahora aquí, pues nada, podríamos hacer un poco lo mismo que hemos hecho antes.
Yo creo que hasta aquí, ahí, table is not defined. No sé por qué no me ha importado automáticamente.
¿Ves? Aquí está haciendo el import directamente desde el index. Antes lo habíamos hecho a mano y tal.
Ok, bueno, vamos a ver cómo va quedando esto. Bueno, por ahora no le está dando ningún estilo.
Bueno, es que todavía nos falta, ¿vale? Pero quería ver, digo, igual ya empieza a verse alguna cosa.
Ahora lo que podemos hacer aquí, pues es el table row. Me gusta más la nomenclatura de Material Y.
Suele estar bastante mejor. No sé, en los nombres de los componentes me suele gustar bastante más.
Aunque ya ves que en este caso hay una diferencia, ¿no?
En este caso ves que cada uno es un componente que tienes que importar de forma separada.
En el otro, en el form, habíamos visto el table, el form, form punto, no sé qué.
Y aquí estamos viendo que a lo mejor está más pensado de esta forma.
No me acuerdo cómo es el formulario, pero ahora lo veremos.
Table row. Bueno, y ahora dentro de nota, pues lo mismo que antes.
En la nota, en lugar de hacer un leak, que es lo que estamos haciendo antes,
vamos a hacer aquí un table cell, ¿vale? Le importamos directamente de cell.
Table cell. Esto que termina aquí. Table cell. Table cell. Y esto que termina aquí.
Esto para que se pueda renderizar, pues nada, hay que utilizar un fragment, pues lo utilizamos.
¿Vale? Esto lo he importado aquí bien. Bueno, y ya tendríamos un poco lo que serían los estilos.
Podríamos poner el botón. El botón es bastante mítico, ¿eh? El botón de material es bastante, bastante mítico.
¿Ves? Que se nota mucho que es justamente el estilo de material.
Pero bueno, queda bastante bien. A mí al menos personalmente me gusta mucho.
Podríamos volver a hacer el tema del formulario. A ver, es un momento, pero no sé si os interesa o lo saltamos,
pero sería volver a repetir lo mismo. O sea, sería, pues nada, vamos con el form.
Además, normalmente es tan evidente cómo se parece, ¿sabes? O sea, cómo es el formulario, que es más o menos igual y todo esto,
que no tiene mucha historia. O sea, es buscar lo que quieras cambiar y mirar en los componentes que tenemos aquí,
que son un montón. Y ya está. Mira, el botón. Estos eran los botones.
Lo que es interesante a lo mejor, por ejemplo, de los botones, es que dentro del botón tú aquí tienes un montón de variaciones.
Hemos visto este, que es el que diríamos es por defecto, pero podríamos utilizar una variante, yo que sé,
por ejemplo, el color primario. Vamos a probar con el color primario.
Al final los colores además se pueden cambiar por si tu aplicación es de una forma u otra.
¿Ves que ahora es como azulito? Eso es porque tiene el color primario.
Bueno, aparte de los colores, pues tienes las variaciones. O sea, tendrías variaciones.
Por ejemplo, la variación, variant, y aquí tendríamos, a ver si pone las, mira, contain, online o text.
Si pones el contained, es justamente que se vea el background. ¿Vale?
Si tienes el outline, es que se ve como el borde.
Ah, no, es que no se ve el borde. A ver, el text. ¿Pensaba que se veía el borde? No.
Vale. Pues bueno, pensaba que había uno que era como ghost. Debe ser uno de los estilos que tiene.
Este es el de text. ¿Ves? Ah, el outline. Sí, ¿ves? Es el que me esperaba. Outline, outline.
Sí, pero el outline... Ah, vale. Igual lo he escrito mal. ¿Ves? Es con el borde.
Bueno, pues este queda lo suficientemente bien. La verdad es que estaba bastante chulo.
Uno que sí que puede ser interesante de revisar, el de formulario te lo voy a dejar un poco de deberes,
es el del appbar. Porque es un componente que es bastante simple en Material UI,
pero a la vez es bastante potente el appbar. Vamos a verlo aquí.
Appbar, esto que tenga el header, por aquí.
Y luego tendríamos, dentro del appbar podríamos tener un icon button,
porque además cada uno tiene sus iconos y sus historias. ¿Vale?
O sea que puedes importar el icon button. Le puedes decir justamente dónde empieza.
Vamos a decir que justo empieza en el principio, que el color, bueno, es el que herede.
Y que tenga un area label, que esto es el menú. ¿Por qué el icon button este?
Porque este justamente es el botón que aparecerá cuando sea lo suficientemente pequeño
para que aparezca un botón para abrir el menú. ¿Vale?
Y luego, pues nada, aquí podríamos seguir con el tema de los botones.
Una de dos. O pones que cada uno tenga un botón para que lo estile,
y así aparezca más o menos lo del botón que hemos visto antes.
Vamos a poner aquí button, button. Vale, pues vamos a poner aquí el button,
aquí el button y aquí que cierre. ¿Vale? Más o menos para que se vea el...
Vale, he puesto el appbar, pero me falta...
Aquí en el appbar, que además le tienes que indicar cuál es la posición.
¿Veis? Aquí, position. Tienes diferentes posiciones.
Tienes absolute, fix, relative, static.
Static sería la normal y corriente, ¿no?
Que tú puedes hacer scroll y se queda ahí.
Bueno, vamos a utilizar por ahora static.
Aparte de esto, claro, tú tienes la appbar
y tú todo esto le tienes que indicar que es el toolbar.
El toolbar al final es eso, ¿no?
Es como la barra de herramientas, digamos.
Es un material UI, está muy pensado como para aplicaciones móviles.
Y por eso vas a ver, ¿no?
Que tienes la appbar, la toolbar...
Habla mucho con ese lenguaje.
Por eso te puede parecer muy que es de muy de aplicaciones, ¿vale?
Lo interesante... Vale, toolbar no lo he importado.
Lo importamos por aquí, ¿vale?
Tenemos la toolbar, ya estamos poniendo todos los botones.
Me faltaría solo el botón del user.
Lo podemos poner también, ¿vale?
Aquí, para que aparezca de un estilo.
De hecho, el user...
Y esto también puede ser interesante.
Vamos a ver cómo queda primero.
Vale, queda con unos estilos un poco raros.
Para empezar, los colores.
Los colores son un poco raros.
En el tema de material, ¿ves que estamos haciendo esto
y que lo estamos envolviendo?
Los botones de material pueden funcionar de una forma un poco más especial.
En el hecho de, en lugar de envolverlos, lo que haces es copiarle los estilos a un componente.
Por ejemplo, este botón, podemos decir que el color es el que hereda
y que el componente que se va a tratar de esta forma es el link,
que es este link que tenemos aquí.
Y le podemos pasar las props que le llegarían al link directamente.
O sea, le podríamos poner aquí la barra.
Y de esta forma, en lugar de tener aquí el link y tenerlo repetido una vez más,
lo podríamos hacer así.
Y esto debería funcionar.
Vamos a ver cómo se ve.
¿Ves?
Y además funciona correctamente, ya empieza a verse bien.
Podríamos poner aquí otros colores que veamos, lo que sea.
Esto lo podríamos repetir con todos, ¿no?
Eso haría el color el que estamos heredando,
el componente, que este sería el link,
y en este caso el to sería barra notes.
Lo interesante además es que nos quitamos los styles estos en línea
que teníamos en ese momento, ¿vale?
Y además que pueden interferir.
O sea, hay que tener cuidado porque si tú tienes estilos en línea,
estilo CSS, lo que sea, pueden interferir.
Así que, pues nada.
Además queda bastante mejor.
De hecho, puedes crear tu propio componente.
Imagínate que esto lo tienes tan claro que es así.
Pues esto lo podrías sacar en un componente,
que fuese link button,
que a esto le llegue las props que sean.
Y esto lo que tiene que renderizar es un botón con el color,
bueno, le puede ser el que quieras,
pero en este caso es inerit,
que el componente que siempre va a renderizar es el link
y luego que le llegue el resto de props
que le estamos pasando aquí.
Pues ahora el link button ya lo podríamos utilizar aquí.
Así.
Tendríamos el link button,
esto tendríamos aquí el link button,
podríamos quitar estos estilos,
¿vale?
Esto sería el link button,
esto fuera.
Y hombre, pues queda un pelín mejor, ¿no?
Un pelín más fácil de leer.
Bueno, en este caso es un poco más complejo
porque ves, el link lo tenemos aquí dentro.
No sería tal cual como lo estábamos haciendo antes,
sino que sería así.
Link button, link button.
Y esta es la gracia también de React,
que es la composición de componentes.
¿Veis qué bonito ha quedado ahora?
Ha quedado bastante, bastante mejor, ¿no?
Ahora ha quedado ya un poquito más fácil de ver.
Lo que tengo dudas es de cómo de pequeño
tiene que verse esto para que realmente se vea.
Pensaba que haría automáticamente el tema del menú,
pero ya veo que no lo hace.
Seguro que hay una forma de conseguir
que al final colapse de la misma forma
que lo hemos hecho antes.
Lo que quería enseñarte era,
ves el position static,
pues tú aquí le podrías poner el fix.
Fíjate que ha cambiado los estilos
y además se queda ahí.
Este es una de las cosas
que está bastante bien de la appbar.
¿Ves?
Que le cambia totalmente.
Y esto lo has tenido que ver,
bueno, de hecho aquí lo tienen bastante parecido.
¿Ves aquí arriba que tiene esta appbar?
Es exactamente la misma.
Ahora ha quedado así,
ha quedado bastante bien,
ahora nos acompaña,
siempre que vamos haciendo scroll.
Bueno, en un momento,
pues ya tenemos unos estilos
que se ven bastante mejor.
Al final es cuestión de ponerse aquí
y entretenerte y entretenerte
a mirar componentes y estar jugando.
Para mí lo negativo que tiene Material UI,
me gusta mucho el design system
que tiene Material UI,
los estilos y todo.
El problema que le veo yo
es que se nota demasiado que es Material UI.
Es que es una cosa como,
guau, es Material UI.
Tienes que estar muy convencido
porque es un estilo que te va,
de alguna forma,
la gente le va a recordar
una aplicación de Google.
Además, hay que tener en cuenta
y por eso mi recomendación
para la gente que tiene una empresa
más o menos grande,
es que no utilice un framework
y se cree un design system.
¿Por qué?
Porque un design system
es parte de la marca,
es parte de lo que transmite
tu producto, ¿vale?
Entonces, si tus productos,
imaginemos una empresa
más o menos grande, ¿vale?
Si tu producto recuerda a Google,
es un poco raro.
Y si recuerda a todas las páginas
hechas con Bootstrap,
pues es un poco extraño.
Tienes que,
a partir de tu design system,
tiene más o menos
que recordar a tu marca, ¿sabes?
Tienes que hacer algo que digas,
ostras, es esta marca.
Por ejemplo,
Vercell es una empresa
que, bueno,
tiene un estilo muy suyo
que la gente ha copiado
mil veces de formas, ¿no?
Pero fíjate,
si le das al botón derecho
encima de su logo,
encuentras su UI framework.
Este es su UI,
su design system.
Y tiene sus propios componentes,
pero, ¿ves?
Tiene su style guide
con todos sus colores,
pero no se trata
solo de los colores,
de los tipos de iconos, ¿ves?
Son iconos suyos propios
porque marcan la diferencia
para ellos.
Son unos iconos
que tienen su estilo.
No solo esto,
sino todos los componentes
los tienen hechos.
O sea,
que es interesante
si tienes la empresa
lo suficientemente grande
que le dediques tiempo, ¿vale?
Y que te pongas a hacer
este design system.
Un sistema que se basa
en los colores,
que tengas grid,
que tengas tus iconos,
que tengas tus componentes
y que de alguna forma
define tu empresa.
Al final,
cuando yo veo un badge
que se parece mucho a este,
es que es como que me rememora
a Vercell, ¿vale?
O un botón
que tiene este borde de radios,
tiene este efecto,
esta animación.
Todas estas cosas
me recuerdan a Vercell.
Así que esto yo creo
que es lo que puede marcar la diferencia.
Si es una empresa muy pequeña,
pues claro,
por supuesto,
utiliza lo que tengas.