React-Bootstrap: a fusão entre o React e o Bootstrap
Se você já trabalha com desenvolvimento web há alguns anos, provavelmente se aproveitou bastante da era Bootstrap. O framework web mais famoso do mundo trouxe várias facilidades para os programadores e continua sendo relevante até hoje (confira o nosso e-book sobre o tema). Entretanto, nos últimos anos novas tecnologias apareceram e mudaram ainda mais a forma como escrevemos nossas aplicações. Uma destas tecnologias é o React, fruto do time de engenharia do Facebook.
Mas ao utilizar o React, será que precisamos abrir mão do Bootstrap? Não necessariamente. É totalmente possível e plausível criar os seus componentes utilizando o framework. Mas para facilitar a nossa vida, um grupo de desenvolvedores fez a fusão perfeita entre os dois: o React-Bootstrap.
Versão em Vídeo
Além das instruções que daremos abaixo, você também pode acompanhar todos os passos que serão feitos na versão em vídeo!
Componentes Bootstrap
O React-Bootsrap é uma biblioteca que nos oferece os componentes clássicos do Bootstrap construídos em React. O projeto se encontra na versão 0.32.1, é de código aberto e está disponível no GitHub; sendo que já possui mais de 13 mil estrelas e 2 mil forks — tudo sob licença MIT.
O projeto conta com muitos contribuidores e busca alcançar a versão 1.0 em um futuro muito próximo. Além disso, é importante destacar que até o momento eles ainda trabalham com o Bootstrap 3, mas estão caminhando em direção ao Bootstrap 4.
Para entender como este projeto funciona e quais as suas vantagens, vamos dar uma olhada em alguns exemplos.
Instalando no seu projeto
Para que toda a mágica funcione de forma adequada, precisaremos de duas dependências bem óbvias no projeto: o React e o React-Bootstrap (lembrando que: para o React, precisamos do ReactDOM também).
npm install --save react react-dom
npm install --save react-bootstrapEu particularmente recomendo que você utilize o create-react-app (se você ainda não sabe como ele funciona, dê uma olhadinha nesse artigo) para dar o pontapé inicial no seu projeto. Assim, tudo o que bastará adicionar é o react-bootstrap. Com isso feito, o próximo passo é inserir as folhas de estilo do Bootstrap 3 no projeto; no caso, dentro do seu index.html:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">Com isso, já estamos prontos para criar nossos primeiros componentes.
Hello Componentes
Para nosso exemplo, utilizarei o CodePen. Você pode reproduzir ele aí na sua casa, apenas dando um fork neste link. Todas as configurações necessárias já estarão prontas.
Na página de componentes da documentação oficial, conseguimos ver como utilizar cada um dos componentes, desde os Grids, Panels, Alerts, Modals, etc. Para este exemplo, vamos colocar um componente Jumbotron, e dentro dele um componente de Button com mais alguns textos:
Se tudo estiver certinho, teremos o seguinte resultado:
Bem bacana, né? A lógica para utilizar os outros componentes é exatamente a mesma. Basta seguir a documentação para ver quais os tipos de configuração cada um deles aceita.
Conclusão
Se você gosta de trabalhar com o Bootstrap e seus componentes mas quer utilizar o React para desenvolver sua aplicação, o React-Bootstrap é uma boa pedida. A biblioteca abstrai uma porção de detalhes e configurações e nos dá uma maneira fácil de utilizar os componentes e customizá-los através de atributos. A única ressalva é que o projeto ainda está em desenvolvimento, então cuidado ao adotá-lo em projetos de grande porte!
Referências
Gostou? Recomende 👏 este artigo e acompanhe nossa publicação para não perder os próximos conteúdos!
Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.br • Facebook, Twitter, Youtube
Siga o autor deste artigo e troque uma ideia com ele! http://www.diegopinho.com.br • Twitter, LinkedIn
Aprenda mais com nossos cursos de programação online!
ECMAScript 6 • ECMAScript 7 e 8 • React 16 • VS Code • Mais
