React - Versão 19.2

1 - Introdução 2 - Conceitos 3 - Configurar ambiente 4 - Criar e executar projeto 5 - Componente 6 - Fragment 7 - Imagens 8 - CSS 9 - Condicional 10 - Escolha 11 - Repetição 12 - Eventos 13 - Funções 14 - Hook useState 15 - Activity 16 - Manipular formulários (1ª parte) 17 - Manipular formulários (2ª parte) 18 - Props 19 - User Interface 20 - Considerações

19 - UI (User Interface)

Nesta aula, vamos conhecer algumas bibliotecas para trabalhar com UI (User Interface), e também aprender como adicionar o Bootstrap ao nosso projeto React.

Existem diversas tecnologias para podermos deixar nossos projetos React mais bonitos. Na aula que está no YouTube, apresento as seguintes:

Abaixo vamos aprender como efetuar o uso do Bootstrap, as demais bibliotecas possuem documentação explicando como integrar cada uma delas em seus projetos React.

1. Instalando o Bootstrap via npm

O jeito mais recomendado de usar o Bootstrap em projetos React é através do npm. Abra o terminal na pasta do seu projeto e execute:

npm install bootstrap

Explicação:

  • O comando npm install bootstrap baixa e adiciona o Bootstrap às dependências do seu projeto
  • Depois de instalado, podemos importar o CSS do Bootstrap no nosso projeto React

No arquivo principal do seu projeto, geralmente main.jsx, importe o CSS do Bootstrap:

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

Isso permitirá que todos os componentes do seu projeto tenham acesso às classes do Bootstrap.

Agora você pode utilizar as classes do Bootstrap diretamente nos seus componentes. Por exemplo:


function BotaoBootstrap() {
    return (
        <button className="btn btn-primary">Clique aqui</button>
    );
}

export default BotaoBootstrap;

Explicação:

  • A classe btn aplica o estilo de botão do Bootstrap
  • A classe btn-primary aplica a cor azul padrão do Bootstrap
  • Você pode combinar várias classes do Bootstrap para criar botões, formulários, cards, navbars e muito mais

2. Alternativa: CDN

Se você não quiser instalar via npm, também é possível usar o Bootstrap através de uma CDN. Basta adicionar o seguinte link no public/index.html dentro do <head>:


<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  integrity="sha384-..."
  crossorigin="anonymous"
/>

Depois disso, você já pode usar as classes do Bootstrap normalmente nos componentes.

Dicas importantes

  • Se estiver usando React, prefira instalar via npm para ter melhor integração e controle de versão
  • O Bootstrap também possui componentes JS (como modais e dropdowns), que podem ser utilizados com a biblioteca react-bootstrap
  • Evite misturar classes CSS próprias com as do Bootstrap de forma confusa; organize seu projeto para facilitar manutenção

Agora você já sabe como adicionar e utilizar o Bootstrap no seu projeto React.

Abaixo compartilho o vídeo dessa aula no YouTube: