React-Bootstrap – Como utilizar o Bootstrap em uma aplicação React

O Bootstrap, é um dos mais conhecidos frameworks CSS para frontend. Com ele é possível criar facilmente, belas e responsivas interfaces Web. Ele traz diversas classes de CSS e JavaScript, que podemos utilizar em nossos projetos. Assim o Bootstrap nos permite estilizar com facilidade, diversos elementos da nossa interface. Neste artigo, vou apresentar como utilizar o Bootstrap, em nossa aplicação frontend feita com React.

Iniciando a aplicação React

Este artigo é o primeiro de uma série que estou fazendo sobre React. Ao longo desta série de artigos, vamos ver como criar um portfólio online, no estilo de um perfil de habilidades de um personagem de jogos, utilizando o React.

Para iniciar nossa aplicação React, veja o passo a passo no artigo: https://irias.com.br/blog/iniciando-uma-aplicacao-react/

Instalando o React Bootstrap

Para instalar o react-bootstrap em nosso projeto utilize o comando abaixo.

npm install --save react-bootstrap bootstrap

Hello World

Após a instalação, podemos importar os componentes Bootstrap que vamos utilizar em nossa interface. Abra o arquivo App.js que é o arquivo principal da nossa aplicação. Insira o conteúdo abaixo nele.

import 'bootstrap/dist/css/bootstrap.min.css';
import { Jumbotron } from 'react-bootstrap';
 
function App() {
  return (
    <Jumbotron>
      <h1>Hello, world!</h1>
      <p>
        Primeiro exemplo de utilização do React-Bootstrap, nosso Olá Mundo.
      </p>
    </Jumbotron>
  );
}
 
export default App;

Neste Hello word, estamos incluindo o CSS do Bootstrap em nossa aplicação e depois utilizamos o componente Jumbotron do Bootstrap, para exibir nossa mensagem. A aplicação ficará da seguinte aparência.

Layout da aplicação Web  com o Bootstrap

Vamos agora iniciar a criação de nosso portfólio online. O primeiro passo será criar o Layout da nossa aplicação React. Vamos utilizar os componentes: Container, Row e Col que são próprios para a criação de Layout com o Bootstrap. Nosso App.js ficará da seguinte forma.

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import { Container, Row, Col } from 'react-bootstrap';

function App() {
  return (
    <Container fluid>
      <Row className="cabecalho">
        <Col className="bg-primary">Cabeçalho</Col>
      </Row>
      <Row className="body">
        <Col md={4} className="bg-secondary">Conteúdo esquerda</Col>
        <Col md={8} className="bg-success">Conteúdo direita</Col>
      </Row>
      <Row className="rodape">
        <Col className="bg-warning">Rodapé</Col>
      </Row>
    </Container>
  );
}

export default App;

Também vamos alterar nosso App.css com o CSS abaixo.

.cabecalho {
  min-height: 10vh;
}

.body {
  min-height: 80vh;
}

.rodape {
  min-height: 10vh;
}

O componente Container é a raiz de Layout que vamos criar, dentro dele utilizamos o componente Row, que indica as linhas dentro do layout. Dentro do Row utilizamos o componente Col,  que são as colunas do layout.

Você pode utilizar essa lógica para organizar suas aplicações do modo que desejar. Em nosso CSS coloquei a propriedade de min-height de cada linha, para que possamos visualizar como ficará o layout base do nosso portfólio. Coloquei as cores de background, para que possamos visualizar a distribuição das linhas e colunas na tela.

Assim concluímos a primeira etapa do nosso portfólio online com React. No próximo artigo vamos continuar sua criação. O projeto está disponível em meu GitHub: https://github.com/andersonirias/portifolio