En las próximas clases vas a aprender cómo puedes estilar tu aplicación de React y en esta en concreto lo vamos a ver con Reactstrap, una implementación del framework Bootstrap en forma de componentes para tu aplicación de React, así que vamos a verlo.
Bootstrap que es un framework CSS, digamos que tiene como unas versiones que están pensadas directamente para utilizarse con React, porque claro lo podríamos utilizar así, instalando Bootstrap, utilizando las clases y todo esto, pero ya tenemos un par de bibliotecas que lo que hace es que ya te proporciona unos componentes que de forma mucho más fácil puedes utilizarlo en tu aplicación de React.
Pues vamos a empezar si os parece con React Bootstrap, vamos a ver nuestra aplicación como la habíamos dejado, la de Notes App, vamos a ver aquí, vamos a levantar por la API primero para que funcione y aquí vamos a levantar la App, vamos a ver que le habíamos dejado un React Router, le habíamos dejado el Custom Hooks, eso es de la clase anterior y vamos a ver si esto sigue funcionando, vale, tenemos las rutas, aquí tenemos las notas y bueno podemos ver que se ve de aquella forma.
Entonces vamos a empezar con React Bootstrap, ya os digo que hay como dos sabores, una es React Strap y otra que es React Bootstrap, cada una tiene sus ventajas y sus desventajas.
React Strap lo que tiene es que los componentes como que están mejor preparados para utilizarse directamente, veis, ya importaríamos el alert, lo utilizaríamos y ya está.
En cambio React Bootstrap lo que tiene es que es un poquito más manual, pero esto puede ser una ventaja especialmente si queréis customizar mucho o entrar más al detalle, vale.
Digamos que React Strap es más rápido, sobre todo para prototipar puede venir muy bien, pero React Bootstrap es una cosa que puede evolucionar mejor, así que os dejo aquí vosotros que elijáis el que queráis,
nosotros vamos a utilizar React Bootstrap que es un poquito más complejo, pero ya os digo que evoluciona con el tiempo, puede evolucionar un pelín mejor.
Vamos con la instalación que nos dice npm install, React Bootstrap y Bootstrap, pues vamos con ello.
Lo único que tenemos que hacer aquí, voy a abrir otra aquí, vamos a hacerlo dentro de la app y vamos a abrir el editor primero, que ya lo tengo por aquí,
lo vamos a añadir como dependencia en la app y aquí vamos a añadir tanto React Bootstrap, por ejemplo aquí, React Bootstrap, Bootstrap 1.5.2 y vamos a añadir Bootstrap 4.6.0.
Y ahora sí nos podemos ir aquí a ver qué versión tengo de npm, no la vaya a liar.
Voy a hacer la instalación y instalamos las dependencias que necesitamos para que funcionen.
Ya se supone que las deberíamos tener.
Ahora, lo que tenemos que hacer, aquí es un poquito raro porque bueno, para importar componentes a lo mejor lo hacemos,
pero lo primero que tendríamos que asegurarnos es que tenemos los estilos.
Para importar los estilos de Bootstrap tenemos dos opciones.
Una, utilizar el import del CSS, que en mi opinión es el que sería el mejor, aunque podríamos hacerlo directamente en HTML.
O sea, podríamos ir al archivo del HTML que tendríamos que tener en public aquí y podríamos poner aquí esta parte, ¿no?
Podríamos hacer este link.
Yo creo que es mejor utilizar el import.
Vamos a ver si esto nos da algún problema y tal, pero a mí me parece que es la mejor opción.
Más que nada porque así siempre irá alineado más con tu versión que tengas instalada, en lugar de buscar una CDN.
Y además que lo estás controlando de una forma mejor en tu propio código, ¿vale?
Por supuesto, también tendrías la opción de hacerlo con Sass.
Esto es lo que te permite justamente customizar mejor a través de variables.
Nosotros lo vamos a hacer con CSS, pero luego que vamos a ver Webpack, vamos a ver cómo podríamos hacerlo con Sass, utilizando un loader y tal.
En este caso no lo vamos a hacer así, se podría, sin ningún problema.
Así que ya tenemos con esto los estilos.
De hecho, ahora que he importado los estilos, podéis ver que ya ha habido un cambio, ¿eh?
Mira, fíjate que si quito esto y refresco, se ve así.
Solo importando ya los estilos de Bootstrap, podemos ver que ya hay algún cambio.
Ya se están notando cambios en nuestra aplicación, ¿no?
O sea, ya se ve de otra forma.
Parece que ha mejorado justamente nuestra UI solo con esto.
Así que, bueno, ya esto sería un paso, ¿no?
Pues vamos a ir un poquito más allá, ¿no?
No lo vamos a dejar así y vamos a ver, ah, bueno, pues ya está.
Con estos estilos es suficiente.
Por ejemplo, uno que es súper típico aquí en App.
Lo que podríamos hacer, esto es la Home.
Vale, nos vamos aquí a App.
Mira, aquí además habíamos hecho lo de Suspense.
Habíamos hecho un montón de cosas, ¿eh?
Con lo de Real Router.
Pues vamos a poner aquí el class name y vamos a añadir esto que sea dentro de un container.
¿Por qué?
Porque la clase container en Bootstrap tiene un significado y lo que hace justamente es estirarla un poquito.
Bueno, pues vamos a añadirlo.
Puede ser necesario justo para algunas cosas.
¿Veis?
Ahora ya nos lo ha centrado.
Ha detectado esto y ya nos lo ha centrado.
La verdad es que solo con lo poco que hemos hecho ya un poquito de gracia le da.
Ahora otra cosa que podríamos hacer, por ejemplo, sería la lista, ¿no?
La lista de notas.
Pues la lista de notas, vamos a ver dónde teníamos los componentes.
Nos vamos a ir a Note, Note, Note.
Tiene que ser Notes.
Igual en la página, ¿no?
Teníamos una página, Note.
Vale, pues ahora teníamos una lista, ¿no?
Notes, tu, tu, tu, donde tenemos aquí, ¿no?
Teníamos una lista y en cada una salía la nota y tal.
Podríamos hacer unas cuantas cosas con esto.
Por ejemplo, podríamos utilizar una tabla.
Vamos a utilizar una tabla en lugar de esto.
¿Veis que cuando he puesto Table ya me dice de dónde lo quiero importar?
Pues vamos a importarlo desde React Bootstrap.
Y fíjate que nos da dos opciones, Table o Index.
Vamos a ver las dos y te voy a explicar cuál es la diferencia exactamente.
Vamos a hacer lo primero de Index.
Voy a cambiar este de Table por aquí, ¿vale?
Esto que me dice que debería cerrar, for Table, si uno aquí.
Esto se ha cerrado bien, ¿no?
Que no estaba bien alineado.
Esto, ¿ves que me lo ha añadido aquí?
Pero me estaba diciendo también que podía hacer React Bootstrap barra Table.
Bueno, vamos a llamarle otra forma.
Vamos a llamarle...
Vamos a llamarle Table from Component directamente, ¿vale?
Estas serían las dos formas que tenemos para importar.
Hay una diferencia interesante entre las dos.
Más que nada, esto es algo que debes conocer no solo para React Bootstrap, esto es también
una cosa interesante para web.
Lo que está ocurriendo aquí es que el primero, estamos importando un módulo nombrado desde
el Index de React Bootstrap que estará exportando todos los componentes que tiene, ¿vale?
Y el segundo, lo que estamos haciendo es importar directamente un componente.
Normalmente, en temas de performance, es mejor la segunda, porque solo está utilizando e
importando el componente que necesitas, aquel en concreto.
En lugar de importarlos todos, está importando ese en concreto.
Lo que pasa es que con el primero, si tienes bien la configuración de webpack, que muy pocas
veces la tienes bien porque no es cosa tuya, es que es difícil, podría hacer tree shaking.
¿Qué quiere decir?
Que si, por ejemplo, aquí también puedes importar el NAP y el NAP no lo utilizas, debería
eliminarlo y no introducirlo en el paquete final.
Pero a veces eso no es tan fácil como pinta, porque puede haber side effects, puede haber
un montón de cosas que tú no controlas.
Así que, normalmente una buena forma de hacerlo, para asegurarte que vas a tener la máxima
performance y vas a utilizar lo mínimo de React Bootstrap, podría ser esta, ¿vale?
De utilizar directamente este tipo de import.
Un import directamente de lo que tengas por aquí.
No sé si aquí podremos verlos todos.
Sí, ¿ves?
Estas son todas las carpetas que tiene y lo que estamos diciendo es, cárgame justamente
Table.
Y Table es lo que está exportando este módulo.
Bueno, vamos a añadir por aquí un poco del T-Body y aparte de esto tendríamos que
hacer que cada una de las notas, aquí, tenemos que tener el TR.
Vamos a poner que aquí tenemos el Note ID, ¿vale?
Esta aquí, que la estamos haciendo aquí, está aquí ya fuera.
Y aparte del TR, pues cada uno, pues vamos a poner un TB aquí y esto lo bajamos aquí.
Y creo que con esto ahora sí debería, vamos a ver lo que sale.
Bueno, más o menos, ¿no?
O sea, tenemos ya un poquito mejores estilos.
No sé si dentro de la nota seguramente tenemos también el I.
Claro, que esto nos puede estar poniendo el puntito.
Así que vamos a ponerlo así, ¿vale?
Ahora no nos sale con el puntito.
Y si vamos a Notes, pues podemos ponerle, por ejemplo, que sea el Stripe.
Esto es una prop.
Podemos ver las props, ¿no?
Tiene algunas props.
Si ponemos aquí Control Espacio, ¿ves?
Nos va a dar un montón de props.
Hay algunas que son de HTML y otras que tenemos justamente para estilar, ¿vale?
Que ya vienen definidas en React Bootstrap, que vienen de Bootstrap en su momento.
Hay una que se llama Stripe, que lo que nos hace, nos debería hacer es este efecto Zebra de cada una de ellas, ¿vale?
O sea, que este es el componente integrado de Bootstrap.
Lo hemos utilizado bastante fácil.
A ver, ha mejorado bastante el tema.
A partir de aquí, bueno, pues podríamos seguir mejorando un poco cómo hacemos cada cosa.
De hecho, podríamos separar el botón, intentar separar el botón en cada una de ellas.
El TD este que hemos puesto aquí, si, por ejemplo, lo añadimos dentro, dentro de Notes, vamos a Note.
Y aquí vamos a poner, en lugar de este TD, podríamos hacer, creo que algo así.
Vamos a probar para mejorar un poco más el estilo, ¿vale?
Vamos a hacer que este sea, esto sea TD, ¿vale?
TD, TD, TD, ¿vale?
Porque así lo que vamos a hacer es que tenga dos columnas.
Vamos a ver si esto es necesario o no.
Yo creo que esto puede funcionar.
¿Ves?
Mira, ha quedado bastante mejor, ¿no?
Ahora lo que hemos hecho es que esté los botones a la derecha.
Esto lo que ha hecho básicamente es una tabla.
Tenemos aquí filas.
En cada fila ahora lo que hemos hecho son dos columnas.
Como lo que está haciendo es que sea fluido y que tenga el máximo espacio que necesita,
pues nos ha puesto aquí el botón en la derecha, ¿no?
Ya lo ha separado.
Bueno, esto es un ejemplo, ¿eh?
Ya os digo, no vamos a entrar en hacer UI, pero sí al menos quería que vieseis un poco
cómo funcionaba esto, ¿vale?
De la misma forma podríamos mejorar un poco.
A ver si tenemos por aquí algún, ¿vale?
Show create.
Mira, esto.
Teníamos aquí un formulario.
O el del login.
Vamos a quitar, voy a limpiar las cookies y vamos a ver el del login.
Y lo vamos a intentar, vamos a intentar arreglarlo un poquito el del login, ¿vale?
Por ejemplo, a ver, aquí en login, bueno, pues nos salía este.
Pues podríamos irnos al login, a la página de login, login.
Y aquí lo que podemos utilizar es, pues lo mismo, un componente que además se llama form,
vale, está aquí dentro del login form, ¿vale?
En lugar, muchas veces en estas librerías de UI que tienen ya componentes,
se suelen llamar igual al elemento HTML al que viene a sustituir,
solo que con la mayúscula, ¿no?
En lugar de form, pues utilizaría un form mayúscula.
¿Veis otra vez que nos dice esto para importarlo?
Pues importamos form.
En este caso, bueno, lo vamos a hacer de la otra forma,
más que nada para que lo veamos de las dos formas distintas, ¿vale?
También vamos a traernos el botón.
De form, en React nos muestra que si tenéis alguna duda de cuántos componentes tiene y tal,
podéis venir aquí a components, ¿veis?
Y aquí los tendríais todos.
Y aquí en forms tiene una cosa bastante interesante y es que tiene como subcomponentes, ¿vale?
Tiene un form que es el que tiene que englobarlo todo y luego ves que tienes form punto
y ya tienes el label, control, text, ¿vale?
Tienes como subcomponentes dentro del mismo componente.
Esto es un patrón que se puede ver bastante en, no solo en librerías de UI,
pero en librerías de terceros, ¿vale?
Por ejemplo, para una modal, pues que tengas la modal, modal.header, modal.content, modal.footer
y puedes verlo bastante.
Entonces, como me parece interesante, digo, pues venga, vamos a darle una prueba a esto.
Para hacer el form group, esto es interesante.
No sé si tiene que ser todo o cada uno de los grupos.
Vamos a ver aquí cómo lo hacen.
Sí, ¿ves?
Como los diferentes grupos.
O sea, aquí tendríamos un grupo que este, por ejemplo, sería,
podríamos ponerle una idea y ponerle username, ¿vale?
Este sería un grupo.
Luego, pues tendríamos otro grupo, que sería el siguiente.
En lugar de utilizar el div, pues podríamos utilizar el form group.
Form group.
Y la idea de esto, pues esto sería el password, por ejemplo, ¿vale?
Y esto sería el form group.
Y aquí, pues el botón, vamos a cambiarlo también por el botón en mayúsculas.
Y los inputs, de la misma forma, ¿ves?
Aquí pone form.text, label, control.
Pues lo mismo.
Podríamos hacer el control, podríamos hacer, ¿ves?
Aquí tenemos form controls.
Los controls son como inputs, selects, text areas.
Tú le defines luego en el type cómo tiene que verse y todo esto.
Pues vamos a hacer esto, ¿vale?
Vamos a hacer esto.
Sería el form.control.
Y este form.control.
Cambiamos este form para que sea en mayúscula.
¿Vale?
No sé este linter que se queda así, pero está bien.
O sea, esto ya está cerrando.
Igual es que tarda a veces un poquito, ¿vale?
Vale.
Pues vamos a ver cómo ha quedado esto.
Bueno, a ver.
Ha quedado mejor, ¿no?
Ha quedado mejor.
Ya sería este nuestro formulario.
Podríamos seguir mirando de cómo lo podemos mejorar, ¿vale?
De cómo hacemos que esto esté más separado del NAP y todo esto.
Por ejemplo, para arreglar rápidamente el NAP, ¿no?
El NAP que además nos gustaría que fuese mobile, ¿no?
Que al hacerlo pequeño, pues que se vea mejor.
Para esto hay uno que se llama NAPBAR, que es bastante interesante, ¿vale?
De nuevo, este también utiliza la misma técnica, ¿no?
De que tienes el NAPBAR, punto brand, punto toggle, punto collapse.
O sea, un montón de NAP, punto, punto, punto.
Pero ves si lo haces chiquitito, mira lo que ha pasado aquí.
Y de esta forma ya no te tienes que preocupar tú de hacerlo, sino que directamente ya te lo hace por ti.
Así que, bueno, vamos a probar a ir al NAPBAR, que sería en la app, punto JS.
Y ya ves que esto ha sido en un momento.
O sea, tampoco es que estamos haciendo gran cosa.
Lo único que estamos haciendo es cambiar los componentes que hasta ahora estábamos utilizando.
Y lo que estamos haciendo es utilizar el componente que corresponde con Bootstrap.
Pues aquí sería NAPBAR, ¿vale?
En lugar de header, NAPBAR.
Ahora, esto lo ha debido importar directamente, ¿vale?
Recuerda que puedes utilizarlo, importarlo así o de la otra forma, el que prefieras.
Aquí tienes diferentes opciones.
Por ejemplo, el collapsible on select.
Y luego también le puedes decir cuándo tiene que ser expandido.
Tienes diferentes medidas.
Esto lo puedes ver en la documentación.
Son diferentes breakpoints que te dice, vale, cuando estoy en esta medida,
entonces me tengo que expandir, ¿vale?
También tienes diferentes colores de fondo.
Por ejemplo, puedes tener el que es oscuro y una variación en general de este NAPBAR.
O sea, también tendrías la variación en oscuro.
Puedes hacer el que sea en claro, el que tú prefieras, ¿vale?
Entonces, obviamente, para hacer que se expanda o no se expanda,
tendríamos que añadirle al NAPBAR un...
No sé si era toggle.
Creo que es un toggle.
¿Vale?
Si quieres meterte en temas de accesibilidad, pues bueno, ya podrías ir más allá y decir,
bueno, pues esto es lo que hace.
Esto es el responsive NAPBAR.
NAP, ¿vale?
Y nos faltaría ahora decir qué es lo que tiene que colapsar.
Por ejemplo, todo esto que teníamos aquí, ¿vale?
Colapsar significa que es el contenido que cuando no quepa lo va a meter dentro del menú.
Así que vamos a hacer el NAPBAR.collapse y esto es lo que va a...
Vale, esto lo vamos a poner aquí.
¿Ves?
Va a envolver el contenido que queremos que después se colapse.
Y esto vamos a decirle que es justamente el NAP, ¿vale?
NAP y esto NAP.
Podríamos seguir un poco...
Esto también hay que importarlo, ¿eh?
El NAP.
Podríamos seguir más.
Podríamos, por ejemplo, cada link, podríamos decir que es un NAP link, no sé qué.
O sea, podríamos envolver cada uno de los links con un NAP link,
pero vamos a ver por ahora cómo funciona, ¿vale?
Bueno, ya va pintando bastante mejor.
De hecho, ¿ves?
Ya lo tenemos.
O sea, con esto ya justamente tenemos el menú.
Podríamos cambiarle los colores, ¿eh?
Que el color es un poco de esta forma.
Pero ya tenemos fácilmente este menú, pues que se colapsa y tal.
De hecho, este VG, pues se lo podríamos quitar, ¿eh?
Si el oscuro queda un poco raro, ¿ves?
Así sería con el clarito.
Ahí tendríamos el menú y ya lo tendríamos.
Ya os digo que se puede seguir mejorando esto.
Por ejemplo, si cada uno de estos NAPs, estos links, lo pones con el NAP.link,
creo que es NAP.link o NAP.link.
A ver.
Yo creo que es NAP.link, ¿eh?
Y esto lo que hace es también estilarlo cada uno de ellos.
De hecho, ¿ves cómo este tiene ahora un estilo diferente a este?
Lo ideal sería estilarlo, ¿vale?
Que todos tuviesen justamente este estilo.
Lo que le estamos indicando es que cada uno de estos links tiene estos estilos
y que los tiene que estilar acordemente.
Si no, puede quedar un poco raro.
Pero bueno, al final es que esto uno se puede estar ad infinitum, ¿sabes?
El ir haciendo esto.
Bueno, el login no lo he hecho.
Pues lo mismo.
NAP.link.
Y esto lo podríamos hacer hasta aquí.
¿Vale?
Ahora quedaría un poquito mejor.
Y ya lo tendríamos, ¿vale?
Ya tendríamos nuestro menú.
Ya está.
Ya está.
Con estos estilos.
En un momento.
Pim, pam.
A ver.
Podríamos seguir mejorando nuestra aplicación, ¿vale?
Porque este botón, ¿ves?
El botón sí que lo hemos puesto aquí, pero no lo hemos puesto en las notas.
Pues también podríamos utilizarlo.
El make not important.
Al final hacerlo es tan sencillo como cambiar.
Ay, perdón.
Este botón, por lo tanto, utilizar el que es en mayúscula.
¿Vale?
Lo autoimportamos desde...
Ay, ¿ves?
Me lo ha importado de Bootstrap, no de Reap Bootstrap.
Y este botón así.
Y podríamos seguir, y podríamos seguir, y podríamos seguir, ¿vale?
Pero bueno, esto solo quería enseñarte rápidamente cómo lo haríamos porque tú aquí te puedes tirar lo que quieras al estirarlo.
A mí personalmente mucha gente me pregunta, ostras, ¿lo debería hacer todo en Bootstrap?
¿Cuándo debería utilizar Bootstrap y cuándo no?
No, es una pregunta bastante interesante, ¿vale?
Por ejemplo, una empresa lo suficientemente grande, yo evitaría utilizar Bootstrap.
¿Por qué?
Porque tiene un estilo muy marcado Bootstrap.
Es verdad que al final lo puedes editar un poquito, pero se nota, normalmente se nota mucho cuando estás utilizando Bootstrap.
Así que puede venir muy bien a la hora de prototipar.
Ya ves tú, hemos hecho esto en un momento y ha ido bastante bien, ¿no?
Porque con lo poco que hemos hecho, pues ya estamos viendo cómo mejoras justamente en el diseño de nuestra aplicación.
Lo importante es la funcionalidad, no tanto el cómo se veía, pero aún así la hemos mejorado.
Así que cuando no tienes tiempo, cuando no quieres dedicarle tiempo al tema de styling, bueno, pues puede ser una buena opción, ¿vale?
Ahora que tenemos este, ya os digo, os voy a dejar como ejercicio si queréis poneros ahí a hacer cositas y os podéis volver muy locos a estilar con Bootstrap o con cualquier librería.