Como integrar o React com Bootstrap


Neste tutorial será dado a continuidade a série sobre React. Esse tutorial é a continuação do anterior O que é componente no React.

Neste tutorial será apresentado como integrar o React com BootstrapPrimeiro será apresentado como usar a dependência Reactstrap. Em seguida como incluir o Bootstrap no projeto React. Para finalizar será apresentado como usar o Bootstrap no React na prática, criando o menu e a mais alguns componentes do Bootstrap.

Download do código fonte desenvolvido na aula: DOWNLOAD


Vamos para explicação textual o que é implementado nesse tutorial.

Primeiro será utilizado com base o código fonte do tutorial anterior o que é componente no React.

Será utilizado a dependência Reactstrap para gerenciar os componentes do Bootstrap. Acessando o site será realizado a instalação da biblioteca do Bootstrap. Necessário instalar o Bootstrap, porque o Reactstrap não inclui o CSS do Bootstrap. Para instalar o Bootstrap é utilizado o comando abaixo.

npm install --save bootstrap

Em seguida será instalado o Reactstrap usando o comando abaixo.

npm install --save reactstrap react react-dom

Para poder usar o Bootstrap, necessário incluir o mesmo no arquivo "src/index.js".

import 'bootstrap/dist/css/bootstrap.min.css';

Para utilizar o Boostrap necessário incluir o Reactstrap e importar o componente que será utilizado, no exemplo abaixo será importado o botão.

import { Button } from 'reactstrap';

Em seguida pode ser utilizado o componente botão no projeto.

<Button color="danger">Danger!</Button>

Código completo da página incluindo o Reactstrap e o botão citado acima.

import React from 'react';
import { Button } from 'reactstrap';

function App (props) {
  return (
    <div>
        <Button color="danger">Danger!</Button>
    </div>    
  );
};

export default App;

No tutorial é apresentado mais exemplos, utilizando como base o código fonte do tutorial anterior, no componente "Headers" é acrescentado o menu, este menu vai utilizar o Reactstrap. Para utilizar é necessário importar os componentes e em seguida pode ser utilizado para criar o menu. Segue abaixo o código fonte completo da página "Headers.js".

import React, { useState } from 'react';
import {
    Collapse,
    Navbar,
    NavbarToggler,
    NavbarBrand,
    Nav,
    NavItem,
    NavLink,
    UncontrolledDropdown,
    DropdownToggle,
    DropdownMenu,
    DropdownItem,
    NavbarText
} from 'reactstrap';

const Headers = (props) => {
    const [isOpen, setIsOpen] = useState(false);

    const toggle = () => setIsOpen(!isOpen);

    return (
        <div>
            <Navbar color="primary" dark expand="md">
                <NavbarBrand href="/">Celke</NavbarBrand>
                <NavbarToggler onClick={toggle} />
                <Collapse isOpen={isOpen} navbar>
                    <Nav className="mr-auto" navbar>
                        <NavItem>
                            <NavLink href="https://celke.com.br/">Site Celke</NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
                        </NavItem>
                        <UncontrolledDropdown nav inNavbar>
                            <DropdownToggle nav caret>
                                Options
                </DropdownToggle>
                            <DropdownMenu right>
                                <DropdownItem>
                                    Option 1
                  </DropdownItem>
                                <DropdownItem>
                                    Option 2
                  </DropdownItem>
                                <DropdownItem divider />
                                <DropdownItem>
                                    Reset
                  </DropdownItem>
                            </DropdownMenu>
                        </UncontrolledDropdown>
                    </Nav>
                    <NavbarText>Simple Text</NavbarText>
                </Collapse>
            </Navbar>
        </div>
    );
}


export default Headers;

Para entender melhor o funcionamento, no componente "Article" acrescentado o Jumbotron do Bootstrap. Para isso é importando os componentes do Reacstrap, em seguida utilizado o Jumbotron. Segue abaixo o código fonte completo do arquivo "Article.js".

import React from 'react';
import { Jumbotron, Container } from 'reactstrap';

const Article = (props) => {
  return (
    <div>
      <Jumbotron fluid>
        <Container fluid>
          <h1 className="display-3">Titulo do artigo</h1>
          <p className="lead">Conteúdo do artigo. This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
        </Container>
      </Jumbotron>
    </div>
  );
};

export default Article;

Para finalizar também acrescentado no componente "Footer" a tabela. Para isso, importando do Reactstrap os componentes para criar a tabela, em seguida criado a tabela. Segue abaixo o código fonte completo da página "Footer.js".

import React from 'react';
import { Table } from 'reactstrap';

const Footer = (props) => {
  return (
    <Table borderless>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </Table>
  );
}

export default Footer;

Para baixar o código fonte do projeto implementado até esse tutorial "DOWNLOAD", após baixar executar o comando "npm install" para instalar todas as dependências e o comando "npm start" para rodar o servidor. 

Portanto, nesse tutorial foi abordado como integrar o Bootstrap com React. Para ver todas as aulas de React acesse a PlayList.