Crear una interfaz de usuario compleja en React, como un tablero, puede ser desalentador si lo hace desde cero. Afortunadamente, no tienes que hacerlo.

Una de las mejores bibliotecas de componentes que puede usar es Tremor, que le permite crear paneles modernos y receptivos en React con poco esfuerzo. Descubra cómo usar Tremor para crear paneles en React.

¿Qué es el temblor?

Tremor es una biblioteca de componentes de interfaz de usuario moderna, de código abierto y de bajo nivel para crear paneles en React. Tremor se basa en Tailwind CSS, React y Recharts (otra biblioteca de gráficos basada en componentes para React). Además de eso, usa íconos de Heroicons.

Cuenta con más de 20 componentes con todos los elementos esenciales para crear una fantástica interfaz analítica como gráficos, tarjetas y elementos de entrada. La biblioteca incluye componentes pequeños y modulares, como insignias, botones, menús desplegables y pestañas, que puede combinar para crear paneles completos.

Lo que hace que Tremor se destaque es que es muy obstinado, por lo que siempre que esté de acuerdo con las decisiones de la biblioteca, puede iniciar un panel de control de aspecto profesional en un abrir y cerrar de ojos.

Tremor admite la personalización, por supuesto, y facilita hacerlo a través del sistema de accesorios de React.

Cómo empezar con Temblor

Comienza por creando una nueva aplicación React utilizando el crear-reaccionar-app paquete (o Vite si eso es lo que prefiere).

Deberá tener Node.js y npm instalados en su sistema. Puede confirmar esto ejecutando nodo --versión y luego npm --versión en una línea de comando. Si falta alguno de los comandos, puede instalarlos mediante un proceso simple; vea esta guía para instalando Node.js y npm en Windows, Por ejemplo.

Configuración de su proyecto React con Tremor

1. Abra su terminal y navegue a su directorio preferido usando el cd dominio.
2. Correr npx create-react-app tremor-tutorial. Este comando creará una nueva aplicación React llamada temblor-tutorial en su sistema en el directorio actual.
3. Cambie al directorio de la aplicación ejecutando cd tremor-tutorial.
4. Instale Tremor en su proyecto React usando el siguiente comando:

   npm instalar @temblor/reaccionar

5. Una vez que haya instalado Tremor, importe el paquete en su Aplicación.js (o principal.jsx si usó Vite) agregando la siguiente línea en la parte inferior de sus importaciones:

   importar"@temblor/reaccionar/dist/esm/temblor.css";

Aunque Tremor usa Tailwind CSS, no necesita instalarlo en su aplicación React para usar la biblioteca. Esto se debe a que Tremor ya tiene Tailwind configurado internamente. Sin embargo, si quieres, echa un vistazo a nuestro tutorial sobre instalando Tailwind CSS en React.

Luego, instala Heroicons en tu proyecto usando el siguiente comando:

npm y [email protected] @temblor/reaccionar

Ahora, eliminemos el código innecesario en nuestro src/Aplicación.js archivo. Aquí está nuestro código de inicio en Aplicación.js:

importar"./Aplicación.css";
importar"@temblor/reaccionar/dist/esm/temblor.css";
exportarpor defectofunciónaplicación() {
devolver (


Nuestro impresionante panel de React</h1> 
 </div>
 );
}

A continuación, cree una componentes subcarpeta en su origen carpeta. En eso componentes carpeta, cree una nueva Tablero.js archivo y agregue el siguiente código:

funciónPanel() {
devolver<división>Paneldivisión>;
}
exportarpor defecto Panel;

Importe el componente Dashboard en Aplicación.js agregando la siguiente declaración después de otras importaciones:

importar Panel de"./componentes/Tablero";

Finalmente, muestre el componente en su aplicación React agregando bajo el h1 elemento.

Creación de un tablero con Tremor

Para crear un tablero completo usando Tremor, con un mínimo de esfuerzo, seleccione uno de los bloques disponibles. Los bloques son diseños preconstruidos compuestos por diferentes componentes modulares pequeños.

Un buen punto de partida es Bloques de temblor sección que muestra diferentes tipos de componentes de bloque preconstruidos que puede usar. Las estructuras de diseño, por ejemplo, le permiten unir diferentes componentes para crear un tablero.

Primero, agregue el siguiente código a su Tablero.js archivo:

importar {
 Tarjeta,
 Título,
 Texto,
 ColGrid,
 gráfico de área,
 Barra de progreso,
 Métrico,
 Doblar,
} de"@temblor/reaccionar";
funciónPanel() {
devolver (


 {/* Sección principal */}
 "mt-6">
 
"h-96" /> 
 </Card>
 {/* Sección KPI */}
 2} gapX="brecha-x-6" gapY="brecha-y -6" marginTop="mt-6">
 
 {/* Marcador de posición para establecer la altura */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
exportar predeterminado Tablero;
El bloque shell contiene diferentes componentes que importa en la parte superior del archivo. Si obtiene una vista previa de esto en su navegador, solo verá dos bloques vacíos.
Puede completar sus bloques con los componentes prediseñados de Tremor, como un gráfico, una tarjeta o una tabla. Puede extraer datos de una API (REST o GraphQL) o almacenarlos en una matriz de objetos dentro de su componente.
Para agregar un componente a su bloque de shell, reemplace el 
 línea con lo siguiente:
 
 
Después eso, agregue la siguiente matriz antes de su declaración return (estos son los datos que se mostrarán en la sección principal del tablero):
 
 // Datos para mostrar en el sección principal
const data = [
 {
 Mes: "Jan 21",
 Ventas: 2890,
 Beneficio: 2400,
 },
 {
 Mes: "Feb 21",
 Ventas: 1890,
 Beneficio: 1398,
 },
 // ...
 {
 Mes: "22 de enero",
 Ventas: 3890,
 Beneficio: 2980,
 },
];
const valueFormatter = (number) =>< /span>
$ ${Intl.NumberFormat("us").formato (number).toString()};
A continuación, agregue el siguiente código a su archivo después de valueFormatter:
 
 // Datos para mostrar en KPI sección
const categorías = [
 {
 título: "Ventas",
 métrica: "$ 12.699",
 valor porcentual: 15,9,
 objetivo: "$ 80 000",
 },
 {
 título: "Beneficio",
 métrica: "$ 45 564" span>,
 valor porcentual: 36,5,
 objetivo: "$ 125 000",
 },
 {
 título: "Clientes",
 métrica: "1072",
 valor porcentual:  53,6,
 objetivo: "2000",
 },
 {
 título: "Resumen de ventas anuales",
 métrica: "$ 201.072",
 valor porcentual: 28,7,
 objetivo: "$ 700,000",
 },
];
Para el categorías matriz de objetos, tiene que mapear a través de cada objeto para mostrar los datos en componentes separados de Tarjeta. Primero, elimine el componente Tarjeta en la sección KPI y luego reemplácelo con este código:
 
 {categories.map((item) => span> (
 
 {item.title}</Text>
 {item.metric}</Metric> 
 "mt-4">
  truncar={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Texto>
 {item.target}</Text>
 </Flex>
  percentValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}
Y eso es todo. Ha creado su primer tablero con Tremor. Vea su tablero ejecutando npm start. Debería ser similar a la captura de pantalla anterior.
 Personalización de los componentes de Tremor
Tremor permite la personalización mediante accesorios. Deberá revisar la documentación del componente que desea personalizar y verificar todas las propiedades incluidas con sus valores predeterminados.
Por ejemplo, si tiene un , puede ocultar el eje x pasando la propiedad showXAxis={false} o cambiar la altura usando altura={h-40}. Para accesorios que declaran valores que se encuentran en Tailwind CSS, como el tamaño, el espaciado, los colores y el resto, debe usar las clases de utilidad de Tailwind.
 Cree paneles de React complejos con facilidad
Gracias a las bibliotecas de componentes como Tremor, no necesita compilar cada una sola parte de su interfaz de usuario desde cero. El uso de una biblioteca como Tremor puede ahorrarle tiempo y el dolor de cabeza de crear interfaces de usuario receptivas complejas.