Como usar Bulma CSS com React

Projetado primeiro para dispositivos móveis e construído usando a metodologia Flexbox, o framework CSS de código aberto Bulma fornece componentes front-end prontos para usar para construir interfaces web responsivas sem JavaScript, tornando-o ideal para uso Reaja.

Conhecido por ter o sistema de grade mais simples, Bulma é tão suave que as colunas se redimensionam automaticamente dependendo do tamanho da tela do dispositivo que está sendo usado.

Ao contrário da maioria dos frameworks CSS, Bulma não é um framework tudo ou nada; ele permite que você importe e use componentes específicos, como um breadcrumb ou formulário, sem importar toda a estrutura. Ele também oferece uma infinidade de componentes , elementos , colunas , layouts e formulários para projetar sites, permitindo que os usuários o instalem e executem rapidamente.

E como o Bulma não inclui JavaScript, você tem controle total sobre a funcionalidade de seus componentes ao usá-lo com o React, dando-lhe a liberdade de escrever o código JavaScript da maneira que achar conveniente, em vez de ficar restrito à opinião de Bulma sobre a escrita JavaScript. Para desenvolvedores que desejam usar sua própria implementação de JavaScript, o fato de Bulma seguir uma abordagem estrita de CSS apenas permite que eles consigam isso.

Bulma tem suporte para navegador no Chrome, Edge, Firefox, Opera, Safari e Internet Explorer (10+), fornecendo classes CSS para ajudá-lo a estilizar seu site.

Neste tutorial, você aprenderá como Bulma CSS pode ser usado com React.

Usando Bulma CSS no React

Embora os criadores de Bulma afirmem que não é necessário ter nenhum conhecimento de CSS para usar Bulma, ter um conhecimento básico de CSS irá apoiar seu trabalho em qualquer estrutura CSS, incluindo Bulma.

Este tutorial pressupõe que você tenha um conhecimento básico de CSS, bem como o seguinte:

• Node 8.10 ou superior instalado em sua máquina de desenvolvimento local
• npx 5.2 ou superior instalado em sua máquina de desenvolvimento local
• Um conhecimento básico de HTML e JavaScript
• Uma compreensão básica de como criar componentes no React

Agora, vamos ver como podemos usar diferentes elementos e componentes Bulma CSS com o React.

Instalando Bulma no React

Primeiro, vamos ativar um aplicativo React usando Criar aplicativo React e executando o seguinte comando:

 npx create-react-app bulma-tutorial

Depois que o aplicativo React for instalado com sucesso em sua máquina local, mude para seu diretório usando o comando cd bulma-tutorial e instale o pacote Bulma em seu projeto React usando a instalação npm comando bulma .

Depois de instalar o Bulma, execute npm start para acessar o aplicativo na janela do seu navegador via localhost: 3000 .

Agora, navegue até a pasta src , clique em App.js e cole o snippet de código abaixo:

 import'bulma/css/bulma.min.css'; const App=()=> { Retorna ( 
 
  Primário   Link   Informações   Sucesso   Aviso   Perigo   Preto   Branco   Escuro   Claro  
 
 ) } exportar aplicativo padrão;

Ao importar Bulma CSS para o nosso projeto, agora podemos acessar os componentes, elementos, variáveis ​​do Bulma e muito mais, e utilizar o Bulma em nosso projeto.

Estilizando com Bulma in React

Aqui está o componente criado App com o div pai adicionado. Ao exportar o componente, podemos direcioná-lo para outras seções do aplicativo.

 const App=()=> { Retorna ( 
 ... 
 ) } exportar aplicativo padrão;

Aqui, adicionamos um div contendo 10 botões e o estilizamos com Bulma CSS.

 
  Primário   Link   Informações   Sucesso   Aviso   Perigo   Preto   Branco   Escuro   Claro 

A maioria dos elementos Bulma tem estilos alternativos que requerem o uso de is- ou has- para acessá-los . Por exemplo, no trecho de código acima, você notará que cada botão contém dois valores: o nome do elemento, botão , que sinaliza a Bulma que este elemento é um botão; e o modificador, is-dark , que acessa a propriedade da classe de estilo.

Portanto, se você quiser colorir um elemento de turquesa do seu aplicativo, por exemplo, use a sintaxe do modificador is-primary .

Os tons de cores padrão que podem ser usados ​​no Bulma estão abaixo, com seus respectivos modificadores:

• is-primary é turquesa
• is-link é azul
• is-info é ciano
• is-success é verde
• is-warning é amarelo
• is-danger é vermelho
• is-white is white
• is-black is black
• is-dark is dark
• is-white is white

Com os botões completos, salve o código e retorne à janela do navegador para ver a aparência da página atualizada. Se tudo for feito corretamente, deve ser semelhante à tela abaixo:

Ver a Caneta
Colors-Bulma CSS Tutorial de Didicodes ( @edyasikpo )
em CodePen .

Alterando tamanhos de elementos e componentes

Com a compreensão de como aplicar cores a elementos e componentes do React, podemos continuar a manipular botões usando as classes modificadoras de Bulma, is-small , is-medium e is-large , para redimensionar qualquer elemento ou componente.

Como cada nome de modificador indica, os elementos se tornarão menores com a adição de is-small , médio com a adição de is-medium e grande com a adição de is-large à propriedade do elemento.

Vamos adicionar essas propriedades ao código em nosso arquivo App.js e ver como ele funciona:

 import'bulma/css/bulma.min.css'; const App=()=> { Retorna ( 
 
  Pequeno   Médio   Grande  
 
 ) } exportar aplicativo padrão; 

Ao adicionar is-small , is-medium e is-large à base de código, seu aplicativo React agora deve se parecer com o seguinte:

Ver a Caneta
Tamanhos-Bulma CSS Tutorial de Didicodes ( @edyasikpo )
em CodePen .

Controlando o estado de elementos e componentes

A capacidade de controlar o estado de um elemento ou componente em um aplicativo é muito importante. Para fazer isso em um aplicativo React, use qualquer uma das três propriedades Bulma CSS abaixo:

• is-outlined
• is-loading
• disabled

No trecho de código abaixo, o estado do primeiro botão é delineado adicionando is-outlined , o segundo botão mostra uma roda de carregamento adicionando is-loading e o o terceiro botão fica desabilitado adicionando is-disabled .

 import'bulma/css/bulma.min.css'; const App=()=> { Retorna ( 
 
  Delineado   Carregando   Desativado  
 
 ) } exportar aplicativo padrão;

Você pode ver a saída deste código abaixo:

Utilizando snippets de código personalizados de Bulma

Conforme mencionado anteriormente, Bulma oferece uma coleção de componentes já personalizados que você pode usar para personalizar rapidamente seus aplicativos React em vez de estilizá-los do zero.

Por exemplo, se quisermos girar uma barra de navegação, Bulma fornece um código padrão e podemos copiar um snippet de seu site, colá-lo no arquivo App.js e adicionar um tag de fechamento para os elementos img e hr .

 import'bulma/css/bulma.min.css';
const App=()=> { Retorna ( 
  
 ) } exportar aplicativo padrão;

Agora temos uma barra de navegação em meu site com um simples copiar e colar e podemos personalizá-la ainda mais usando os conceitos usados ​​neste tutorial.

Ver a Caneta
NavBar-Bulma CSS Tutorial de Didicodes ( @edyasikpo )
em CodePen .

Conclusão

Embora este tutorial cubra alguns dos fundamentos do uso de Bulma com React, eles fornecem uma base para expandir ao estilizar. Você pode aprender mais sobre como o Bulma funciona, acessar snippets de código e fazer experiências visitando a documentação oficial. Sinta-se à vontade para explorar estes Bulma tutoriais que eu criei no CodePen também.

Se você tiver alguma dúvida, pode deixá-la na seção de comentários abaixo.

A postagem Como usar Bulma CSS com React apareceu primeiro no LogRocket Blog .