Support & Downloads

Quisque actraqum nunc no dolor sit ametaugue dolor. Lorem ipsum dolor sit amet, consyect etur adipiscing elit.

s f

Contact Info
198 West 21th Street, Suite 721
New York, NY 10010
youremail@yourdomain.com
+88 (0) 101 0000 000
Follow Us

Criando APPs responsivos com React e Bulma | React em 8 minutos!

O Bulma é um framework Css que facilita na hora de criar APPs responsivos e elegantes, neste Screencast você vai aprender como utiliza-lo dentro de projetos React de forma rápida.
Para integrarmos o Bulma e o React nós vamos usar a lib Rbx, caso tenha alguma dúvida basta visitar a documentação oficial dela.

 

Instalando no seu projeto

0 – Crie um novo projeto usando o create-react-app ou acesse o projeto react que você gostaria de incluir o Bulma.

1a – Se você utiliza o npm, rode no console:

1b – Se você utiliza o yarn, rode no console:

2 – Inclua o CSS da biblioteca atualizando o App.js:

Obs: No meu exemplo ficou:

 

Incluindo o primeiro elemento

1 – Atualize o arquivo app.js (ou no arquivo que você desejar incluir a navbar no seu projeto) colocando no topo:

2 – Agora no mesmo arquivo, coloque:

 

Incluindo uma Navbar no seu Projeto

1 – Atualize o arquivo app.js (ou no arquivo que você desejar incluir a navbar no seu projeto) colocando no topo:

2 – Agora no mesmo arquivo, coloque:

 

Inserindo o Container e as Colunas

1 – Atualize o arquivo app.js (ou no arquivo que você desejar incluir a navbar no seu projeto) colocando no topo:

2 – Coloque no mesmo arquivo:

 

Conclusão

Criar um APP responsivo usando o Bulma e React é realmente fácil, neste Screencast criamos algumas elementos básicos para demonstrar isto. Para conhecer outros elementos do Bulma acesse o repositório oficial da lib react-bulma-components.

Para aprender mais sobre React, visite também o nosso Screencast sobre como usar os Hooks facilmente no React clicando aqui.

Se você gostou desse Screencast, deixe um comentário e compartilhe esse link com seus(uas) amigos(as) e nas comunidades de programação que você faz parte, muito obrigado o/

 

Grande abraço, Leonardo Scorza

Deixe um comentário

avatar
  Subscribe  
Notify of