DEV Community

Cover image for Guia para Instalar o Bootstrap em um Aplicativo React
rodrigozan
rodrigozan

Posted on

11

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:

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

Caso prefira utilizar o yarn, rode o comando:



yarn add bootstrap


Enter fullscreen mode Exit fullscreen mode

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';


Enter fullscreen mode Exit fullscreen mode

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>
);



Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

Aplicação React Bootstrap - Button

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;


Enter fullscreen mode Exit fullscreen mode

Aplicação React Bootstrap - Table

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;


Enter fullscreen mode Exit fullscreen mode

Aplicação React Bootstrap - Modal

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;
}



Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

Aplicação React Bootstrap com estilo personalizado

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.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more