Construindo seu aplicativo React com o Blueprint UI Toolkit

Construir um aplicativo React do zero pode ser uma tarefa demorada e desafiadora, especialmente quando se trata de estilizar componentes. É aí que o Blueprint UI Toolkit é útil. O kit de ferramentas é um conjunto de componentes de interface do usuário reutilizáveis ​​que podem ajudá-lo a criar interfaces consistentes e visualmente atraentes para seus aplicativos React.

Aprenda sobre os fundamentos do Blueprint UI Toolkit e como usá-lo para criar um aplicativo React simples.

O Blueprint UI Toolkit é um Biblioteca de componentes React UI. Ele contém uma coleção de componentes pré-fabricados fáceis de usar e personalizar. Você pode usar esses componentes pré-projetados imediatamente ou modificá-los para atender às suas necessidades específicas.

Os componentes do Blueprint UI Toolkit incluem Botões, Formulários, Modais, Navegação e Tabelas. O uso desses componentes pode economizar tempo e esforço, pois você não precisa projetar e construir cada componente do zero.

Para começar a usar o Blueprint UI Toolkit, você precisará criar um aplicativo React.

Depois que seu projeto estiver configurado, você poderá instalar o Blueprint UI Toolkit usando qualquer instalador de pacote Node de sua escolha. Para instalar o Blueprint UI Toolkit usando npm, execute o seguinte comando em seu terminal:

npm install @blueprintjs/core

Para usar yarn, execute este comando:

fio adicionar @blueprintjs/core

Depois de instalar o Blueprint UI Toolkit, você pode usar os componentes de sua escolha em seu aplicativo React.

Antes de usar os componentes, inclua os arquivos CSS do Blueprint UI Toolkit:

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

Adicionar o bloco de código acima ao seu arquivo CSS aplica os estilos de interface do usuário Blueprint a seus componentes.

Por exemplo, para adicionar um botão ao seu aplicativo, use o Botão componente do Blueprint UI Toolkit:

importar Reagir de"reagir";
importar { Botão } de"@blueprintjs/core";
funçãoAplicativo() {
retornar (



"sucesso" texto="Clique em mim" ícone ="atualizar" pequeno={verdadeiro}/>
 </div>
 );
}
exportarpadrão Aplicativo;

Este bloco de código adiciona um botão ao seu aplicativo usando o Botão componente. O Botão componente leva adereços como intenção, texto, ícone, pequeno, e grande.

O intenção prop define a natureza do botão, que reflete em sua cor de fundo. Neste exemplo, o botão tem um sucesso intenção que lhe dá uma cor de fundo verde. Blueprint UI oferece várias intenções principais, incluindo primário (azul), sucesso (verde), aviso (laranja) e perigo (vermelho).

Você pode especificar o texto que aparece dentro do botão com o texto suporte. Você também pode adicionar ícones ao botão usando o ícone suporte. Ao lado do ícone suporte é o íconedireito prop, que adiciona o ícone ao lado direito do botão.

Por último, o grande e pequeno props booleanos especificam o tamanho do botão. O grande prop torna o botão maior, enquanto o pequeno prop o torna menor.

O bloco de código anterior gerará um botão parecido com este:

Você também pode usar o AnchorButton componente para criar um botão em seu aplicativo. O AnchorButton O componente é uma versão especializada do componente Button explicitamente projetado para uso como um link.

Este componente aceita muitas das mesmas props do componente Button, incluindo texto, grande, pequeno, intenção, e ícone. Também aceita o href e alvo adereços.

O href prop especifica o URL para o qual o botão está vinculado e o alvo prop especifica a janela ou quadro de destino para o link:

importar Reagir de"reagir";
importar { AnchorButton } de"@blueprintjs/core";
funçãoAplicativo() {
retornar (



 href=" https://example.com/"
 intenção ="primário"
 texto="Clique em mim"
 alvo="_em branco"
 />
 </div>
 );
}
exportarpadrão Aplicativo;

Este bloco de código acima renderiza um AnchorButton componente. Os componentes href valor prop é " https://example.com/” e a alvo prop é “_blank”, o que significa que o link será aberto em outra guia ou janela do navegador.

Outro componente essencial do Blueprint UI Toolkit é o Cartão componente. Este é um componente reutilizável que exibe informações de uma maneira visual atraente.

O componente Card leva dois adereços interativo e elevação. O elevação prop controla a profundidade da sombra do cartão, com valores mais altos produzindo um efeito de sombra mais proeminente.

O interativo prop aceita um valor booleano. Quando definido como verdadeiro, permite passar o mouse e clicar nas interações no cartão, permitindo que ele responda à entrada do usuário.

Por exemplo:

importar Reagir de"reagir";
importar { Carta, Elevação } de"@blueprintjs/core";
funçãoAplicativo() {
retornar (



verdadeiro} elevação={Elevação. DOIS}>
Este é um cartão </h2>


Este é algum conteúdo em meu cartão</p>
 </Card>
 </div>
 );
}
exportarpadrão Aplicativo;

Neste exemplo, o Cartão componente tem um título e algum conteúdo. O interativo prop está definido para verdadeiro.

Você também importa o Elevação componente de @blueprintjs/core. O Elevação component é uma enumeração que define um conjunto de valores predefinidos que você pode usar para definir a profundidade da sombra de um componente.

Aqui estão os valores disponíveis do Elevação enumeração:

1. Elevação. ZERO: Este valor define a profundidade da sombra como 0, indicando que o componente não possui nenhuma sombra aplicada
2. Elevação. UM: Este valor define a profundidade da sombra para 1.
3. Elevação. DOIS: Este valor define a profundidade da sombra para 2.
4. Elevação. TRÊS: este valor define a profundidade da sombra para 3.
5. Elevação. QUATRO: este valor define a profundidade da sombra para 4.
6. Elevação. CINCO: Este valor define a profundidade da sombra para 5.

A renderização do bloco de código acima exibirá uma imagem em sua tela semelhante a esta:

Os componentes do Blueprint UI Toolkit são fáceis de customizar. Você pode usar CSS tradicional para modificar a aparência dos componentes, ou você pode usar os adereços fornecidos para alterar seu comportamento.

Por exemplo, você pode personalizar a aparência de um botão passando um nome da classe suporte:

importar Reagir de"reagir";
importar { Botão } de"@blueprintjs/core";
funçãoAplicativo() {
retornar (



"Clique em mim" className='meu-botão'/>
 </div>
 );
}
exportarpadrão Aplicativo;

O bloco de código acima aplica uma classe personalizada ao botão, permitindo que você modifique sua aparência usando CSS:

.meu-botão{
raio da borda: 10px;
preenchimento: 0.4rem 0.8rem;
}

Aplicar esses estilos fará com que seu botão fique mais ou menos assim:

Há muito mais no Blueprint UI

A interface do usuário do Blueprint oferece mais componentes do que os mencionados acima, como Alert, Popover, toast, etc. No entanto, com as informações fornecidas, você pode criar um aplicativo React simples usando o Blueprint UI.

Você pode estilizar seu aplicativo React usando métodos diferentes. Você pode usar CSS tradicional, SASS/SCSS, Tailwind CSS e CSS em bibliotecas JS, como emoção, componentes estilizados, etc.