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.