Mira nuestra reseña de los 10 mejores Frameworks de usuario para ReactJS

Top 10: Mejores Frameworks de interfaz de usuario para ReactJS

La clave para una interfaz de usuario de alta calidad radica en el diseño que te ayuda a lograr la mejor interfaz gráfica de usuario posible. Hay desarrolladores como yo que son terribles al diseñar desde cero componentes de interfaz de usuario para mi aplicación. Afortunadamente para personas como nosotros, que normalmente trabajan en el backend y por alguna razón tienen que jugar con el front-end, hay muchos frameworks increíbles que ayudan a crear asombrosas interfaces de usuario. Si estás utilizando React para manejar el código del lado del cliente, aunque no hay tantos frameworks adecuados para trabajar con Componentes en React, todavía existen algunos que tienen lo mejor de todos los frameworks CSS conocidos.

Disfruta de nuestra colección de 10 de los mejores Frameworks de usuario disponibles para el increíble framework de React.js.

10. Blueprint

Github

Blueprint UI Framework for ReactJS

Blueprint es una colección de componentes de la interfaz de usuario de React que cubre la mayoría de los elementos, patrones e interacciones comunes de la interfaz en la web. El uso de Blueprint asegura que terminará con una interfaz de usuario elegante y fácil de usar, lo que te permitirá concentrarte en la construcción de tu producto, no en las piezas atómicas que lo componen. Aumenta tu productividad con un conjunto de componentes genéricos de alta calidad que puedes usar de inmediato y un diseño universal, conceptos y modificadores que se aplican a todos los componentes. Blueprint fue diseñado desde cero para aplicaciones de escritorio, por lo que no se ha probado a fondo en navegadores web móviles (el iPad funciona bien).

9. Belle

Github

Belle User Interface ReactJS

Belle te proporciona un conjunto de componentes de React como Toggle, ComboBox, Rating, TextInput, Button, Card, Select y pronto muchos más. Todos los componentes están optimizados para funcionar tanto en dispositivos móviles como de escritorio. Los estilos son altamente personalizables en dos niveles. Puedes configurar los estilos base de todos los componentes así como modificar cada uno de ellos individualmente.

8. Office UI Fabric

Github

Fabric Office UI ReactJS

Fabric es el Framework de front-end oficial para crear experiencias que se adaptan perfectamente a Office y Office 365. Fabric es el framework de diseño oficial de UX para los complementos de Office. Con Fabric, los complementos se combinan a la perfección con Word, Excel, PowerPoint y Outlook. Los componentes robustos y actualizados de Fabric se construyen con el framework React. Mira la lista de componentes para ver los bloques de construcción que están disponibles usando Fabric React. Los componentes de Fabric te ayudan a obtener botones, navegación y más que se parecen a Office de manera rápida y sencilla. También contienen una funcionalidad adicional que ayuda a tu aplicación a actuar como Office.

7. React MD

Github

React MD Material Design Framework UI

Los objetivos de React MD son poder crear un sitio web con estilo de diseño de materiales totalmente accesible utilizando React Components y Sass. Con la separación de estilos en Sass en lugar de estilos en línea, debería ser fácil crear componentes personalizados con los estilos existentes. El  sitio web de documentación  se puede utilizar para ver ejemplos en vivo, ejemplos de código y documentación general de accesorios.

6. React Boostrap

Github

Bootstrap ReactJS Framework UI

React Bootstrap es la versión reconstruida para React del framework front-end más popular. React-Bootstrap es una libreria de componentes de front-end reutilizables. Obtendrás la apariencia de Twitter Bootstrap, pero con un código mucho más limpio, a través del framework React.js de Facebook. La libreria de componentes React-Bootstrap intenta seguir la filosofía de React.js de que una sola pieza de funcionalidad debe definirse en un solo lugar. mira la libreria React-Bootstrap actual en la página de componentes.

5. Elemental UI

Github

Elemental UI ReactJS

Elemental UI es un kit de herramientas de interfaz de usuario para sitios web y aplicaciones de React.js. Elemental UI nació para resolver los requisitos del mundo real en los proyectos en los que trabajamos y para su uso en la plataforma de gestión de contenido de node.js KeystoneJS. El objetivo de Elemental UI es crear un conjunto de componentes funcionales y sin supervisión que sean útiles por sí solos o juntos, con un estilo predeterminado discreto y capacidades de tema flexibles. Elemental está diseñado para ser instalado desde npm e integrado en tu proyecto con browserify o webpack. Puedes personalizarlo incluyendo nuestro LESS también.

4. Ant Design

Github

Ant Design UI Framework for React.js

Ant Design ofrece un lenguaje de diseño de interfaz de usuario de clase empresarial para aplicaciones web con un conjunto de componentes React de alta calidad listos para usar. Está escrito en TypeScript con tipos definidos completos. Funciona en navegadores modernos e Internet Explorer 9+ (usando polyfills) y es compatible con la representación del lado del servidor. Durante el desarrollo, es posible que debas compilar y depurar código JSX y ES2015, e incluso transferir parte de la solicitud a datos simulados o algunos servicios externos. Y todo esto debe hacerse con una retroalimentación rápida proporcionada a través de la recarga en caliente de cambios.

3. React Toolbox

Github

React Toolbox UI Framework

React Toolbox es un conjunto de componentes de React que implementa la especificación de Google Material Design. Está construido sobre algunas de las propuestas más modernas como los módulos CSS (escritos en SASS), Webpack y ES6. La libreria se integra armoniosamente con tu flujo de trabajo de Webpack y es fácilmente personalizable y muy flexible.

React Toolbox utiliza módulos CSS  de forma predeterminada para importar hojas de estilo escritas en SASS. En caso de que desees importar los componentes que ya están empaquetados con CSS, tu empaquetador de módulos debería poder requerir estos módulos SASS.

2. React Semantic UI

Github

React Semantic UI

Semantic UI React es la integración oficial de React para Semantic UI. La interfaz de usuario semántica trata las palabras y las clases como conceptos intercambiables. Las clases utilizan la sintaxis de los lenguajes naturales como las relaciones sustantivo / modificador, el orden de las palabras y la pluralidad para vincular conceptos de manera intuitiva. La semántica utiliza frases simples llamadas comportamientos que activan la funcionalidad. Cualquier decisión arbitraria en un componente se incluye como una configuración que los desarrolladores pueden modificar. Viene equipado con un sistema de herencia intuitivo y variables temáticas de alto nivel que le permiten tener total libertad de diseño. Es totalmente gratuito con jQuery y utiliza una API declarativa fácil de seguir.

1. MaterialUI

Github

React UI Framework Material UI

MaterialUI es un conjunto de componentes de React que implementan las pautas de diseño de materiales de Google. Hay 2 proyectos que puedes mirar para empezar. Se pueden encontrar en la  carpeta de ejemplos. Estos proyectos son ejemplos básicos que muestran cómo consumir componentes de material-ui en su propio proyecto. El primer proyecto usa  browserify para la agrupación de módulos y  gulp  para la automatización de tareas de JS, mientras que el segundo proyecto utiliza  webpack para la agrupación y construcción de módulos. Puedes incluir Material-UI en tu proyecto simplemente ejecutando npm install material-ui desde el directorio de su proyecto y luego usando los componentes de Material-UI que necesites.

Menciones honoríficas

React Material Bootstrap

React Boostrap Material

Material Design para Bootstrap (MDB) es un potente y gratuito KIT de interfaz de usuario de Material Design para Bootstrap 4. Es uno de los frameworks de diseño de materiales más completos que se han creado hasta la fecha. Está disponible para diferentes frameworks o librerias como ReactJS, Vue.js, jQuery y Angular. La versión React de Material Bootstrap se basa en las últimas Bootstrap 4 y React 15.6.1, lo que significa absolutamente nada de jQueryCon más de 400 elementos de UI de material, más de 600 iconos de material, 74 animaciones CSS, archivos SASS y muchos más componentes, la versión React del ampliamente conocido Material Bootstrap estará segura en la lista de opciones de UI para implementar en sus nuevos proyectos.

Shards React

Github

Shards React UI Library

Si trabajaste con jQuery simple y Bootstrap desde el principio como desarrollador web, seguramente conoces Shards, el hermoso y moderno kit de interfaz de usuario Bootstrap 4 repleto de plantillas y componentes adicionales. La versión React de Shards presenta el mismo sistema de diseño moderno que hace que Shards sea especial para que puedas impresionar a sus usuarios con microinteracciones fluidas y una hermosa experiencia de usuario en general. Shards React proporciona soporte para los paquetes de íconos Material y Fontawesome. También viene con todos los componentes personalizados disponibles en Shards, incluidos selectores de fechas, controles deslizantes de rango, entradas de alternancia y más.

Shards React es de código abierto en GitHub y está disponible como un paquete NPM. Sin embargo, también puedes descargarlo aquí y acceder a los archivos centrales originales para que puedas ensuciarte las manos y ampliar el kit para que se ajuste a tus propias necesidades.

Si conoces otro impresionante framework de usuario de código abierto para ReactJS, compártelo con la comunidad en el cuadro de comentarios.

<


Ingeniero de Software Senior en EPAM Anywhere. Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores