El frontend en react es un problema: librerías de componentes al rescate

Sabemos que existen librerías de CSS para frontend que pueden ahorrarnos bastante tiempo (y esfuerzo si no somos tan creativos en la parte visual/estética) para desarrollar web apps. Algunas de estas son Bootstrap 5, Tailwind, Bulma (así es, como la de Dragon Ball Z jaja). En general mejoran el proyecto dándole estética y responsividad. Sin embargo, tienes que poner divs, inputs de html y todo eso, se vuelve un poco tedioso en cierto punto, ¿no? es más fácil importar un componente ya creado, copiarlo y pegarlo, lo cual, te ahorra aún más el trabajo, por eso aquí te presento las que, para mí, son las librerías de componentes de react más bonitas y fácil de usar; tan fácil como instalar una dependencia, copiar, pegar y personalizar, el resto es backend. Voy a dar la reseña de las tecnologías que yo he usado, pues puedo dar una opinion con base en mi experiencia, además, todas son gratuitas. Cuando uso estas librerías, casi no escribo CSS/SASS (más allá de personalizar algo muy específico).


- React-bootstrap:
Me gusta esta ya que la documentación tiene bastantes ejemplos y es bastante amplia. El pequeñísimo problema es que al proporcionar componentes, puede parecer poco personalizable para algunos desarrolladores; sin embargo, es fácil buscar en Stack overflow como personalizarlos, creo que esta es la mejor opción para empezar con tu roadmap en el mundo de lo fully responsive, y si quieres quedarte con esta alternativa para trabajar a nivel profesional para una empresa, no tiene limitaciones en ningún aspecto. Otra ventaja es que puedes descargarle temas en bootswatch.



- Material UI: 
En mi opinion, estos componentes son visualmente más bonito's que los de react-boostrap, sin embargo, requiere instalar unas cuantas más dependencias si se quiere usar el paquete completo. Aunque el paquete principal es bastante bueno y atractivo a la vista, en lo personal, creo que react-bootstrap es más fácil de combinar con otras herramientas que probablemente vas a necesitar (como react-router). Un pro de esta librería es que para sitios vistos en celular provee una UI que se asemeja a la de Android, lo cual, familiariza bastante al usuario.


- Mantine:
Esta librería no se queda atrás respecto a las dos anteriores, pues tiene una UI increíblemente bonita e intuitiva, además tiene (40) hooks útiles para casos de uso bien pensados, como formularios, pantalla completa, mapear algún cursor dentro de un area, entre otros. Otra cosa, muy ventajosa respecto a las dos librerías anteriores es que, no es necesario instalar las media queries de react por aparte, simplemente ya trae un hook que imita el comportamiento. La documentación tiene ejemplos interactivos, tiene providers para diferentes temas, es fácil hacer override a los estilos, se nota que la pensaron muy bien.



En fin, estas son las que he probado, me gustan y les he encontrado bastantes utilidades en proyectos personales y de la universidad, espero te haya servido de algo la recomendación, si tienes alguna sugerencia o no estás de acuerdo con alguna funcionalidad de estas librerías no dudes en hacerlo saber en los comentarios, el chiste de estos blogs es aprender mutuamente qué tecnologías conviene aprender a usar y experimentar :)

No hay comentarios:

Con la tecnología de Blogger.