Hola, soy Luis y aquí les traigo otro nuevo post.
Índice
No reinvente la rueda, aproveche una biblioteca de componentes sólidos para iniciar su próxima aplicación React
Cuando comienzo un nuevo proyecto de React, siempre busco ahorrar tiempo. Tengo una idea en la cabeza y solo quiero empezar a programar. No quiero pasar horas creando componentes de interfaz de usuario, codificando CSS, escribiendo animaciones, eligiendo un tema de color.
Soy un gran fan de trabajar con Tailwind solo por esa razón. Acelera mis proyectos. Pero a veces quiero más que un marco CSS: quiero componentes listos para usar. En estos casos, recurro a IU de chakra.
Chakra UI es una biblioteca de componentes simple, modular y accesible que le brinda todos los componentes básicos que necesita para construir sus aplicaciones React.
Las notas del acantilado
El rápido y sucio. Aquí hay siete razones por las que debería usar la interfaz de usuario de Chakra en su próximo proyecto.
- Está construido con TypeScript
- Es compatible con la representación del lado del servidor
- Sigue la especificación WAI-ARIA de accesibilidad.
- Es fácilmente temable
- Es un proyecto activo con más de 7000 estrellas en Github
- Tiene genial documentación
- Está repleto de todo lo que necesita para comenzar: entradas, acordeones, íconos, información sobre herramientas, etc.
Como desarrollador frontend, encuentro que la mayoría de las veces, la accesibilidad se queda atrás. Al comenzar su proyecto sobre una base de componentes sólidos y accesibles, es más probable que cree una experiencia en línea que todos puedan disfrutar.
Empezando
Instalar y comenzar con Chakra no podría ser más fácil. Primero, instalamos Chakra con hilo (o npm).
yarn add @chakra-ui/core
A continuación, dado que Chakra UI usa emoción (una biblioteca CSS en JS), necesitamos instalar sus dependencias entre pares.
yarn add @emotion/core @emotion/styled emotion-theming
A continuación, podemos configurar nuestro tema personalizado para personalizar un poco la interfaz de usuario.
import theme from "@chakra-ui/core";// we can customize the "brand" color const customTheme = ...theme, colors: ...theme.colors, brand: 900: "#1a365d", 800: "#153e75", 700: "#2a69ac", }, }, };
Entonces podemos envolver toda nuestra aplicación con nuestro tema.
import React from "react";
import ReactDOM from 'react-dom';
import ThemeProvider from "@chakra-ui/core";
import App from './App';ReactDOM.render(
<ThemeProvider theme={customTheme>
<App />
</ThemeProvider>,
document.getElementById('root')
);
Finalmente, podemos usar los componentes de la interfaz de usuario de Chakra en nuestra aplicación.
import Box from "@chakra-ui/core";<Box bg="tomato" w="100%" p=4 color="white"> This is the Box </Box>
¿Qué tipo de componentes ofrece Chakra?
Chakra ofrece una gran cantidad de componentes React de alta calidad. En aras de la brevedad, solo mencionaremos algunos.
Componentes de entrada
Chakra ofrece muchos componentes de entrada, que incluyen entradas de texto, entradas numéricas, botones de radio, casillas de verificación, selecciones y entradas de conmutación.
Componentes de diseño
Chakra te respalda cuando se trata de formatear y diseñar tu aplicación. Puedes usar su Grid y Flex componentes para organizar su contenido y su componente Stack para separar sus componentes.
También puede hacer uso de Chakra Pestañas componente para separar sus vistas en varias pantallas. Me gusta usar el componente Breadcrumbs para facilitar el enrutamiento entre diferentes páginas.
¿Qué falta?
Chakra no nos da todo lo que necesitamos para crear aplicaciones web complejas.
Una admisión notable de la biblioteca es la falta total de un selector de fecha. Puede usar el selector de fechas HTML nativo o elegir otra biblioteca de React. He tenido buenas experiencias trabajando con ReactDayPicker en el pasado.
No culpo a Chakra por omitir un Selector de día de la biblioteca. Son notoriamente difíciles de construir, meticulosos y tienen muchos casos extremos. Además, las bibliotecas que contienen DatePickers a menudo terminan incluyendo otras dependencias en su proyecto (moment o date-fns).
¿Cuáles son algunas alternativas?
Ant-Design ofrece componentes React de nivel empresarial. También podría estar interesado en utilizar el siempre popular Material-UI. Si está creando una aplicación de escritorio, es posible que también desee consultar Blueprint JS .
Resumiendo
Encuentro el uso de bibliotecas de componentes muy útil para validar mis ideas. Es mucho más fácil empezar un proyecto cuando no tengo que preocuparme por jugar con CSS.
Ahorre tiempo al no reinventar la rueda y comience su próximo proyecto React con Chakra UI. No te arrepentirás.
Añadir comentario