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:
|
1 |
npm install --save rbx |
1b – Se você utiliza o yarn, rode no console:
|
1 |
yarn add rbx |
2 – Inclua o CSS da biblioteca atualizando o App.js:
|
1 |
import "rbx/index.css"; |
Obs: No meu exemplo ficou:
|
1 2 3 4 5 6 7 8 9 |
import React, { Fragment } from 'react'; import "rbx/index.css"; function App() { return ( <Fragment> Hello Escola de Javascript </Fragment> ); } export default App; |
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:
|
1 |
import { Button } from 'rbx'; |
2 – Agora no mesmo arquivo, coloque:
|
1 2 3 |
<Button outlined color="success" key="white"> Submit Form </Button> |
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:
|
1 |
import { Navbar } from 'rbx'; |
2 – Agora no mesmo arquivo, coloque:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<Navbar color="light"> <Navbar.Brand> <Navbar.Item href="#"> <img src="https://bulma.io/images/bulma-logo.png" alt="" role="presentation" width="112" height="28" /> </Navbar.Item> <Navbar.Burger /> </Navbar.Brand> <Navbar.Menu> <Navbar.Segment align="start"> <Navbar.Item>Home</Navbar.Item> <Navbar.Item>Documentation</Navbar.Item> </Navbar.Segment> <Navbar.Segment align="end"> <Navbar.Item> <Button.Group> <Button color="primary"> <strong>Sign up</strong> </Button> <Button color="light">Log in</Button> </Button.Group> </Navbar.Item> </Navbar.Segment> </Navbar.Menu> </Navbar> |
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:
|
1 |
import { Container, Column } from 'rbx'; |
2 – Coloque no mesmo arquivo:
|
1 2 3 4 5 6 7 8 9 10 |
<Container> <Column.Group breakpoint="mobile"> <Column size="one-half"> 50% </Column> <Column size="one-quarter"> 25% </Column> </Column.Group> </Container> |
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,
Quer se tornar um Programador Full Stack Javascript em 8 semanas? 😀
Nós desenvolvemos um treinamento completo onde você vai aprender desde a base da Web (HTML5, CSS, Bulma,
Javascript e Es6+) até React e ExpressJs totalmente do zero!
Nele você também vai desenvolver um projeto do inicio até o Deploy (clone do Evernote) e irá
aprender como conseguir as melhores vagas no módulo carreira de Programador.
Se você não quer mais perder oportunidades, clique aqui e saiba mais 💪
