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 Bootstrap. Primeiro 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.