Se eventualmente me pedirem para citar algumas paixões tecnológicas de grande parte dos desenvolvedores web, não só do Brasil, mas do mundo inteiro, sem dúvidas eu citaria o React e o Bootstrap logo de cara. Hoje, é inegável que o React se tornou a biblioteca front-end favorita dos desenvolvedores e do mercado (repare que não estou falando que ela é melhor que outras ferramentas, mas sim da preferência!). Basta ver os números:

Mas antes do React entrar em cena, um framework já nos ajudava há muito tempo a criar sites forma responsiva – é claro que estou falando do Bootstrap. Desde que foi lançado com a proposta de facilitar o desenvolvimento de sites responsivos, ele se tornou a paixão de muitos programadores, tanto que recentemente eles lançaram a quarta versão com uma série de melhorias e funcionalidades novas (se quiser saber mais, dê uma olhada neste e-book).

Não seria fantástico se houvesse uma maneira fácil de utilizar as facilidades do Bootstrap com a ideologia do React? Nada te impede de criar um projeto React e utilizar o Bootstrap como framework externo. No entanto, existe uma maneira muito melhor: o React-Bootstrap.

Componentes Bootstrap

De forma simples e direta, o react-bootstrap é uma biblioteca que nos oferece os componentes 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 o React-Bootstrap 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-bootstrap

Eu 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

O React-Bootstrap é uma reimplementação completa dos componentes do Bootstrap usando o React. Não tem dependência nenhuma com o bootstrap.js ou o jQuery. Podemos consumir a biblioteca como módulos CommonJS, módulos ES6l, AMD ou como um script JS global.

Para nossos exemplos, utilizarei o CodePen. Você pode reproduzir todos eles aí na sua casa, apenas dando um fork neste link. Todas as configurações necessárias já estarão prontas pra você.

Na página de componentes da documentação oficial, conseguimos ver como utilizar cada um dos componentes, desde os Grids, Panels, Alerts, Modals, etc. Começaremos colocando um componente Jumbotron, e dentro dele um componente de Button com mais alguns textos:

const Jumbotron = ReactBootstrap.Jumbotron;
const Button = ReactBootstrap.Button;

const App = () => {
    return (
   	 <Jumbotron>

   		 <h1>Olá iMasters!</h1>
    	<p>Este é um exemplo do Componente Jumbotron construído com o React-Boostrap!</p>
    	<p><Button bsStyle="primary">Aprenda mais!</Button></p>

   	 </Jumbotron>
    )
}

ReactDOM.render(<App />, document.getElementById('app'))

Se tudo estiver correto, você já verá o conteúdo renderizado na sua tela!

Bem legal, né? Seguindo a mesma lógica, conseguimos inserir outros tipos de componentes dentro do nosso projeto. Como por exemplo, vamos adicionar um componente Accordion com vários componentes Panel.

const Jumbotron = ReactBootstrap.Jumbotron;
const Button = ReactBootstrap.Button;
const Accordion = ReactBootstrap.Accordion;
const Panel = ReactBootstrap.Panel;

const App = () => {
    return (
   	 <div>
   		 <Jumbotron>
   			 <h1>Olá iMasters!</h1>
   	 	<p>Este é um exemplo do Componente Jumbotron construído com o React-Boostrap!</p>
   	 	<p><Button bsStyle="primary">Aprenda mais!</Button></p>
   		 </Jumbotron>
   		 <Accordion>
   		   <Panel header="Item #1" eventKey="1">
   		 	Conteúdo do Item 1
   		   </Panel>
   		   <Panel header="Item #2" eventKey="2">
   		 	Conteúdo do Item 2
   		   </Panel>
   		   <Panel header="Item #2" eventKey="3">
   		 	Conteúdo do Item 3
   		   </Panel>
   		 </Accordion>
   	 </div>
    )
}

ReactDOM.render(<App />, document.getElementById('app'));

Ao renderizar, temos o seguinte resultado:

E a mesma lógica segue para os demais componentes. Reparem que no caso do Panel, por exemplo, já tivemos que passar duas propriedades: Header e EventKey. Cada componente conterá os seus próprios atributos customizáveis, por isso a importância de acompanhar a documentação.

E como funciona o sistema de grid?

A funcionalidade chave do Bootstrap é o seu sistema de grades que torna fácil criar layouts responsivos. Quando estamos trabalhando com o React-Bootstrap, seu funcionamento continua o mesmo, somente a forma como o declaramos que muda. No exemplo a seguir criarei uma grade com uma linha e duas colunas, veja:

const Grid = ReactBootstrap.Grid;
const Row = ReactBootstrap.Row;
const Col = ReactBootstrap.Col;

const App = () => {
    return (
   	 <Grid>
  	<Row className="show-grid">
    	<Col xs={12} md={8}>
      	<p>Lado Direito</p>
    	</Col>
    	<Col xs={12} md={4}>
      	<p>Lado Esquerdo</p>
    	</Col>
  	</Row>
	</Grid>
    )
}

ReactDOM.render(<App />, document.getElementById('app'));

Com os textos renderizados, comece a brincar com o tamanho da janela e você notará que o conteúdo está responsivo: quando a janela é pequena, o elemento com o texto “Lado Esquerdo” cai para baixo do elemento com o texto “Lado Direito”. No entanto, quando a janela é grande o suficiente, eles permanecem na mesma linha.

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 excelente pedida. A biblioteca abstrai uma porção de detalhes e configurações e dá ao programador 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

• https://github.com/react-bootstrap/react-bootstrap
• https://react-bootstrap.github.io/
• https://react-bootstrap.github.io/getting-started/introduction