Creación de su aplicación React con Blueprint UI Toolkit

Crear una aplicación React desde cero puede ser una tarea desafiante y que requiere mucho tiempo, especialmente cuando se trata de diseñar componentes. Ahí es donde Blueprint UI Toolkit resulta útil. El kit de herramientas es un conjunto de componentes de interfaz de usuario reutilizables que pueden ayudarlo a crear interfaces consistentes y visualmente atractivas para sus aplicaciones React.

Obtenga información sobre los conceptos básicos de Blueprint UI Toolkit y cómo usarlo para crear una aplicación React simple.

Blueprint UI Toolkit es un Biblioteca de componentes de la interfaz de usuario de React. Contiene una colección de componentes prefabricados que son fáciles de usar y personalizar. Puede usar estos componentes prediseñados listos para usar o modificarlos para que se ajusten a sus necesidades específicas.

Los componentes de Blueprint UI Toolkit incluyen botones, formularios, modales, navegación y tablas. El uso de estos componentes puede ahorrarle tiempo y esfuerzo, ya que no tiene que diseñar y construir cada componente desde cero.

Para comenzar con Blueprint UI Toolkit, deberá crear una aplicación React.

Una vez que su proyecto esté configurado, puede instalar Blueprint UI Toolkit usando cualquier instalador de paquetes de Node que elija. Para instalar Blueprint UI Toolkit usando npm, ejecute el siguiente comando en su terminal:

npm instalar @blueprintjs/core

Para usar hilo en su lugar, ejecuta este comando:

añadir hilo @blueprintjs/core

Una vez que haya instalado Blueprint UI Toolkit, puede usar los componentes de su elección en su aplicación React.

Antes de usar los componentes, incluya los archivos CSS de Blueprint UI Toolkit:

@importar"normalizar.css";
@importar"@blueprintjs/core/lib/css/blueprint.css";
@importar"@blueprintjs/icons/lib/css/blueprint-icons.css";

Agregar el bloque de código anterior a su archivo CSS aplica los estilos de interfaz de usuario de Blueprint a sus componentes.

Por ejemplo, para agregar un botón a su aplicación, use el Botón componente de Blueprint UI Toolkit:

importar Reaccionar de"reaccionar";
importar { Botón } de"@blueprintjs/núcleo";
funciónaplicación() {
devolver (



"éxito" texto="Haz click en mi" icono="actualizar" pequeño = {verdadero}/>
 </div>
 );
}
exportarpor defecto aplicación;

Este bloque de código agrega un botón a su aplicación usando el Botón componente. El Botón componente toma apoyos tales como intención, texto, icono, pequeño, y grande.

El intención prop define la naturaleza del botón, que se refleja en su color de fondo. En este ejemplo, el botón tiene un éxito intención que le da un color de fondo verde. Blueprint UI ofrece varias intenciones principales, que incluyen primario (azul), éxito (verde), advertencia (naranja), y peligro (rojo).

Puede especificar el texto que aparece dentro del botón con el texto apuntalar. También puede agregar íconos al botón usando el botón icono apuntalar. junto a la icono el apoyo es el icono derecho prop, que agrega el ícono al lado derecho del botón.

Por último, el grande y pequeño Los apoyos booleanos especifican el tamaño del botón. El grande prop hace que el botón sea más grande, mientras que el pequeño prop lo hace más pequeño.

El bloque de código anterior generará un botón que se ve así:

También puede utilizar el Botón de ancla componente para crear un botón en su aplicación. El Botón de ancla El componente es una versión especializada del componente Button diseñada explícitamente para su uso como enlace.

Este componente acepta muchos de los mismos accesorios que el componente Button, incluidos texto, grande, pequeño, intención, y icono. También acepta la href y objetivo accesorios.

El href prop especifica la URL a la que se vincula el botón y el objetivo prop especifica la ventana o marco de destino para el enlace:

importar Reaccionar de"reaccionar";
importar { Botón de ancla } de"@blueprintjs/núcleo";
funciónaplicación() {
devolver (



 href=" https://example.com/"
 intención="primario"
 texto="Haz click en mi"
 objetivo="_blanco"
 />
 </div>
 );
}
exportarpor defecto aplicación;

Este bloque de código de arriba representa un Botón de ancla componente. Los componentes href valor prop es " https://example.com/” y el objetivo el valor de prop es "_blank", lo que significa que el enlace se abrirá en otra pestaña o ventana del navegador.

Otro componente esencial del Blueprint UI Toolkit es el Tarjeta componente. Este es un componente reutilizable que muestra información de una manera visual atractiva.

El componente Tarjeta toma dos apoyos interactivo y elevación. El elevación prop controla la profundidad de la sombra de la tarjeta, con valores más altos que producen un efecto de sombra más prominente.

El interactivo prop acepta un valor booleano. Cuando se establece en verdadero, habilita las interacciones de pasar el mouse y hacer clic en la tarjeta, lo que le permite responder a la entrada del usuario.

Por ejemplo:

importar Reaccionar de"reaccionar";
importar { Tarjeta, Elevación } de"@blueprintjs/núcleo";
funciónaplicación() {
devolver (



verdadero} elevación={Elevación. DOS}>
Esta es una tarjeta</h2>


Este es un contenido en mi tarjeta</p>
 </Card>
 </div>
 );
}
exportarpor defecto aplicación;

En este ejemplo, el Tarjeta componente tiene un título y algo de contenido. El interactivo prop está configurado para verdadero.

También importas el Elevación componente de @blueprintjs/núcleo. El Elevación componente es una enumeración que define un conjunto de valores predefinidos que puede usar para establecer la profundidad de la sombra de un componente.

Estos son los valores disponibles de la Elevación enumeración:

1. Elevación. CERO: este valor establece la profundidad de la sombra en 0, lo que indica que el componente no tiene ninguna sombra aplicada
2. Elevación. UNO: este valor establece la profundidad de la sombra en 1.
3. Elevación. DOS: este valor establece la profundidad de la sombra en 2.
4. Elevación. TRES: este valor establece la profundidad de la sombra en 3.
5. Elevación. CUATRO: este valor establece la profundidad de la sombra en 4.
6. Elevación. CINCO: este valor establece la profundidad de la sombra en 5.

Renderizar el bloque de código de arriba mostrará una imagen en su pantalla que se ve así:

Los componentes de Blueprint UI Toolkit son fáciles de personalizar. Puedes usar CSS tradicional para modificar la apariencia de los componentes, o puede usar los accesorios proporcionados para cambiar su comportamiento.

Por ejemplo, puede personalizar la apariencia de un botón pasándole un nombre de la clase apuntalar:

importar Reaccionar de"reaccionar";
importar { Botón } de"@blueprintjs/núcleo";
funciónaplicación() {
devolver (



"Haz click en mi" nombreclase='mi-botón'/>
 </div>
 );
}
exportarpor defecto aplicación;

El bloque de código anterior aplica una clase personalizada al botón, lo que le permite modificar su apariencia usando CSS:

.mi-boton{
borde-radio: 10píxeles;
relleno: 0.4 rem 0.8rem;
}

La aplicación de estos estilos hará que su botón se vea un poco así:

Hay mucho más en la interfaz de usuario de Blueprint

Blueprint UI ofrece más componentes que los mencionados anteriormente, como Alert, Popover, brindis, etc. Sin embargo, con la información proporcionada, puede crear una aplicación React simple utilizando la interfaz de usuario de Blueprint.

Puede diseñar su aplicación React usando diferentes métodos. Puede usar CSS tradicional, SASS/SCSS, Tailwind CSS y CSS en bibliotecas JS como emoción, componentes con estilo, etc.