React tiene una biblioteca de componentes; la biblioteca de componentes es un plan de diseño que organiza los componentes para construirlos mediante combinaciones multidimensionales. El diseño de componentes se realiza mediante el desmontaje, la inducción y la reorganización de elementos en funciones y expresiones visuales, y se basa en la reutilizable. El propósito es formar componentes estandarizados. Las bibliotecas de componentes más utilizadas para reaccionar incluyen Bulma, AntDesign, Bootstrap, etc.
El entorno operativo de este tutorial: sistema Windows 10, versión de reacción 17.0.1, computadora Dell G3.
El diseño de componentes consiste en desmontar, resumir y reorganizar elementos en funciones y expresiones visuales, y formar componentes estandarizados según el propósito de la reutilización. Todo el plan de diseño se construye mediante una combinación multidimensional y estos componentes se organizan juntos. está formado.
Bibliotecas de componentes de reacción de uso común:
Diseño de hormigas
Enlace del proyecto: Diseño de hormigas
Tamaño del paquete (de BundlePhobia): 1,2 mB después de la minificación, 349,2 kB después de la minificación + compresión gzip, reduzca el tamaño agitando el árbol.
ventaja:
AntDesign viene con una extensa documentación de soporte, tiene una comunidad, que incluye un proyecto separado (AntDesignPro) con plantillas prediseñadas;
Biblioteca de interfaz de usuario que se puede utilizar para diseñar rápidamente aplicaciones internas/backend.
defecto:
falta de accesibilidad;
Es grande y se espera que tenga un gran impacto en el rendimiento;
Contamina tu CSS (espera agregar! Importante para evitar que diseñe tus componentes que no sean Ant).
Oreja
De hecho, pienso principalmente en Bootstrap como una biblioteca de interfaz de usuario. No le otorgará ningún premio de diseño, pero puede usarse para completar algunos proyectos de vanguardia y productos mínimos viables.
Pero depende de para qué quieras usarlo. Si eres nuevo en React, es una excelente biblioteca para comenzar. Para los desarrolladores más experimentados, podrían buscar componentes con estilo/Emoción.
Hay dos bibliotecas populares con enlaces de React para Bootstrap, yo personalmente solo uso Reactstrap.
Enlace del proyecto: Reaccionar Bootstrap
Tamaño del paquete (de BundlePhobia): 111 kB después de la minificación, 34,4 kB después de la minificación + gzip, reduzca el tamaño agitando el árbol
Enlace del proyecto: Reactstrap
Tamaño del paquete (de BundlePhobia): 152,1 kB después de la minificación, 39,4 kB después de la minificación + compresión gzip, reduzca el tamaño agitando el árbol
ventaja:
La biblioteca Bootstrap con enlaces de React que a todos les encanta;
Fácilmente personalizable mediante CSS-in-JS;
Ha existido por suficiente tiempo como para que no tengas que preocuparte por errores o problemas;
Comience rápidamente;
No existe dependencia de jQuery ya que se ha reimplementado por completo en React.
defecto:
Esto es Bootstrap: si no lo personalizas, tu sitio se verá como cualquier otro.
Bulma
Bulma es diferente de las otras bibliotecas presentadas en este artículo porque Bulma es un marco CSS puro y no requiere JS. Puede optar por utilizar clases de Bulma directamente o utilizar una biblioteca contenedora como react-bulma-components.
Enlace del proyecto: Bulma
Enlace del proyecto: reaccionar-bulma-componentes
Tamaño del paquete (de BundlePhobia): 179 kB minificado, 20,1 kB minificado + comprimido gzip
ventaja:
No hará que su sitio web se parezca a Bootstrap;
Perfecto para ponerse en marcha rápidamente;
Funciones modernas (subyacentes a Flexbox/Grid).
defecto:
Accesibilidad: hay algunas, pero no tan estrictas como otras, que cumplen con las pautas WCAG.
Interfaz de usuario de chakras
Enlace del proyecto: ChakraUI
Tamaño del paquete (de BundlePhobia): 326,2 kB después de la minificación, 101,2 kB después de la minificación + compresión gzip, reduzca el tamaño agitando el árbol
ventaja:
Accesibilidad: Siguiendo las pautas WAI-ARIA, los componentes utilizan etiquetas aria;
Desarrollado por el servidor Discord;
Fácil de personalizar (con soporte para temas);
Altamente modular, por lo que sacudir el árbol eliminará el código que no utilices.
defecto:
Bastante nuevo.
Aviso:
Está muy cerca de la v1, así que tenga en cuenta los cambios importantes posteriores a la v0.8.0.
Interfaz de usuario de materiales
MaterialUI es una de mis bibliotecas de amor y odio. Me ha ayudado a superar algunos plazos de proyectos muy estresantes en el pasado, pero al final siempre lo solucioné lo más rápido posible.
En el pasado, solo podías personalizar los estilos de MaterialUI escribiendo JSS, pero afortunadamente ahora puedes anular los estilos usando componentes con estilo y Emotion.
Enlace del proyecto: UI de material
Tamaño del paquete (de BundlePhobia): 325,7 kB minificado, 92 kB minificado + gizp comprimido, reducido por agitación de árboles
ventaja:
Documentación completa
La biblioteca de iconos es enorme.
Sencillo y fácil de usar (situación al principio)
defecto:
Difícil y doloroso de personalizar, pero necesario (para mejorar las imágenes);
Rendimiento: se procesarán demasiados nodos DOM;
Su aplicación se verá como un producto de Google (para algunos, esto puede representar una apariencia profesional).
IU semántica
Enlace del proyecto: UI semántica
Semántica-UI-React
Tamaño del paquete (de BundlePhobia): 300,8 kB después de la minificación, 80,9 kB después de la minificación + compresión gzip, reduzca el tamaño agitando el árbol.
ventaja:
Composable (pasar componentes usando como accesorio)
Fácil de personalizar
Documentación útil
El usuario es bien conocido (usado internamente por Netflix y usado por productos lanzados por Amazon)
Compatibilidad con mecanografiado
defecto:
Incertidumbre potencial de los proyectos de código abierto.
Ver problema:
https://github.com/Semantic-Org/Semantic-UI/issues/6109
https://github.com/Semantic-Org/Semantic-UI/issues/6413
Bifurcación administrada por la comunidad:
https://github.com/fomantic/Fomantic-UI
Mención de Honor
Acceder a la interfaz de usuario
ReachUI es una biblioteca de componentes de bajo nivel que permite a los desarrolladores crear componentes React accesibles en sus sistemas de diseño.
No hay ningún tamaño de paquete disponible porque cada componente se exporta individualmente como su propio paquete npm.
Rekit
Reakit es otra biblioteca de componentes de bajo nivel. Técnicamente es una biblioteca de interfaz de usuario, pero no viene con CSS. Así que todavía necesitas encontrar una solución de peinado.
Tamaño del paquete (de BundlePhobia): 119,9 kB después de la minificación, 32,1 kB después de la minificación + compresión gzip, reduzca el tamaño agitando el árbol.
rebajo
Llevo un tiempo siguiendo a Rebass. Es una poderosa biblioteca de componentes que no viene con un tema, pero puede cambiarlo fácilmente. Para ver un ejemplo en acción, consulte su demostración.
Enlace del proyecto: Rebass
Tamaño del paquete (de BundlePhobia): 43 kB después de la minificación, 14,4 kB después de la minificación + compresión gizp, reduzca el tamaño agitando el árbol.