Guia para Instalar o Bootstrap em um Aplicativo React

Introdução

Você está pronto para melhorar o visual do seu aplicativo React com o Bootstrap? Atendendo a alguns pedidos no meu artigo Como adicionar o Bootstrap ao Next.js, mostrarei nesse guia como você pode instalar o Bootstrap de forma simples e eficaz para aprimorar a interface do seu aplicativo.

Caso queira dar um fork no repositório deste tutorial, basta acessar o link abaixo:

• Repositório React Bootstrap

E ainda utilizar o JavaScript do Bootstrap no projeto, ou seja, usar componentes como o Modal, que necessita do JavaScript do framework Bootstrap para funcionar.

Preparação

Antes de começarmos, é importante garantir que você tenha o seu ambiente de desenvolvimento React configurado e o seu projeto já em andamento. Certifique-se de estar usando o Node.js e o npm (ou yarn) para gerenciar suas dependências.

Se você ainda não tiver um projeto React em andamento, pode criar um novo com o seguinte comando:

npx create-react-app meu-app

Instalação do Bootstrap

Para instalar o Bootstrap no seu projeto React, você pode utilizar o npm. Abra o terminal no diretório do seu projeto e execute o seguinte comando:

npm install bootstrap

Caso prefira utilizar o yarn, rode o comando:

yarn add bootstrap

Isso irá baixar e instalar o Bootstrap e suas dependências no seu projeto.

Importando o Bootstrap

Depois de instalar o Bootstrap, você precisa importá-lo no seu código. No seu arquivo index.js, ou nos arquivos onde você deseja usar o Bootstrap, adicione a seguinte linha no topo:

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

Isso importará o arquivo CSS do Bootstrap e permitirá que você utilize os estilos e componentes em seu aplicativo React.

Exemplo de como ficará seu arquivo index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';

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


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Utilizando Componentes Bootstrap

Agora que o Bootstrap está integrado ao seu projeto, você pode começar a usar seus componentes. Por exemplo, você pode adicionar um botão Bootstrap ao seu aplicativo com o seguinte código:

// App.js
import React from 'react';

import './App.css';

function App() {
  return (
    <div className="container">
        <h1>React Bootstrap</h1>

        <button className="btn btn-primary">Clique em Mim</button>
    </div>
  );
}

export default App;

Ou printar informações do banco de dados em uma tabela:

// App.js
import React from 'react';

import './App.css';

function App() {
  return (
    <div className="container">
        <h1>React Bootstrap</h1>

        <table class="table">
            <thead>
                <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</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 colspan="2">Larry the Bird</td>
                <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
  );
}

export default App;

Importando o Bootstrap JavaScript

Se você deseja usar os recursos JavaScript do Bootstrap (como modais, carrosséis, etc.), você pode importar o JavaScript no seu componente.

Vamos importar o JavaScript do Bootstrap no componente App.js e usar um modal (lembrando que já importamos o arquivo bootstrap css no arquivo index.js):

// App.js
import React from 'react';

import 'bootstrap/dist/js/bootstrap.bundle.min.js';

import './App.css';

function App() {
  return (
    <div className="container">
        <h1>React Bootstrap</h1>

        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Launch demo modal
        </button>

        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
            </div>
        </div>
        </div>
    </div>
  );
}

export default App;

Personalização (Opcional)

Se você deseja personalizar o tema ou os estilos do Bootstrap para corresponder à identidade visual do seu aplicativo, o Bootstrap oferece diversas variáveis de CSS que podem ser sobrescritas. Você pode criar um arquivo CSS personalizado e importá-lo após o CSS do Bootstrap para aplicar suas modificações.

Para fazer isso, crie um novo arquivo CSS personalizado dentro do diretório src. Por exemplo, você pode chamá-lo de meu-bootstrap.css. Este arquivo conterá suas modificações e estilos personalizados.

Exemplos de estilos personalilzados:

/* meu-bootstrap.css */

/* Modificações no botão Bootstrap */
.btn-primary {
    background-color: purple;
    border: solid 1px white;
}

/* Estilo personalizado para um elemento específico */
.minha-classe {
    font-size: 18px;
    color: #333;
    text-decoration: underline;
}

/* Estilo personalizado para a tag strong dentro da classe minha-classe */
.minha-classe strong {
    color: purple;
}

Importe o arquivo CSS personalizado

Para garantir que seu arquivo CSS personalizado meu-bootstrap.css seja aplicado após o CSS do Bootstrap, você deve importá-lo em seu aplicativo React. Você pode fazer isso no componente onde deseja usar os estilos personalizados. Por exemplo, no arquivo App.js:

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css'; // Importando o CSS do Bootstrap
import './meu-bootstrap.css'; // Importando o seu arquivo CSS personalizado meu-bootstrap.css

function App() {
    return (
      <div className="container">
            <h1>React Bootstrap</h1>
            <p className="minha-classe">Este parágrafo tem o estilo da <strong>classe minha classe</strong></p>
            <button className="btn btn-primary">Clique em Mim</button>
        </div>
    );
}

export default App;

Conclusão

Agora você sabe como instalar e utilizar o Bootstrap em um aplicativo React. Isso abrirá um mundo de possibilidades para melhorar o design e a usabilidade do seu aplicativo. Lembre-se de explorar a documentação do Bootstrap para descobrir todos os componentes e recursos disponíveis.

Com o Bootstrap, você pode criar interfaces atraentes e responsivas de forma mais eficiente.