O React está entre as estruturas e bibliotecas JavaScript mais populares para criar aplicativos de página única e interfaces de usuário. Sua flexibilidade na construção de interfaces de usuário usando seus componentes reutilizáveis, velocidade de desenvolvimento e comunidade de suporte são razões para sua popularidade.
No entanto, o React deve ser combinado com Cascading Style Sheets (CSS) para tornar seus aplicativos visualmente mais atraentes e apresentáveis. Escrever CSS do zero pode ser demorado.
Os desenvolvedores podem gastar muito tempo trabalhando no estilo, em vez das principais funcionalidades de um aplicativo React. A boa notícia é que ferramentas e estruturas como o Bootstrap facilitam a adição de CSS ao seu aplicativo React.
últimas postagens
O que é Bootstrap?
Bootstrap é uma estrutura CSS de código aberto para desenvolvimento front-end. O Bootstrap permite que os desenvolvedores criem sites responsivos e mobile-first por meio de seu conjunto abrangente de ferramentas e modelos de design baseados em JavaScript e CSS.
O Bootstrap foi criado pelo Twitter e também é mantido por uma equipe de engenheiros da mesma empresa. Seu código-fonte é mantido no GitHub e os membros da comunidade podem contribuir e enviar relatórios de bugs e sugestões. Bootstrap 5.3.0-alpha1 é a versão mais recente no momento da escrita.
Por que usar Bootstrap com React?
- Economiza tempo: o Bootstrap cuida da formatação, dando a você mais tempo para se concentrar na funcionalidade. Portanto, você não precisa se preocupar com questões como a aparência de seus formulários ou botões, mas com áreas como se o botão enviar envia dados para seu back-end ou API.
- Facilidade de uso: Depois de adicionar o Bootstrap ao seu aplicativo React, basta pegar os componentes de interface do usuário pré-projetados e adicioná-los ao seu aplicativo.
- Design consistente: a maioria dos aplicativos aumenta de tamanho com o tempo. Garantir um design consistente do seu site é importante se você deseja atrair usuários fiéis. O Bootstrap tem um estilo consistente que dará às suas páginas uma aparência uniforme.
- Toneladas de modelos para escolher: o Bootstrap tem centenas de modelos que variam de barras de navegação, botões, formulários e carrosséis a menus suspensos, para mencionar alguns, para você escolher.
- Facilidade de personalização: embora o Bootstrap tenha modelos de design, você sempre pode personalizar o tamanho da fonte, a cor e outros recursos para atender às suas necessidades.
- Suporte da comunidade: o Bootstrap possui uma extensa documentação para você começar. No entanto, você ainda pode contar com a grande comunidade, sempre adicionando novos recursos e mantendo esse framework CSS.
- Design responsivo: depois de adicionar o Bootstrap ao seu aplicativo React, você tem certeza de que seu aplicativo da Web será responsivo em todos os tamanhos de tela.
Como instalar o Bootstrap no React
Um aplicativo React não vem com o Bootstrap instalado por padrão. Mas antes de explorarmos como adicionar/instalar o Bootstrap no React, precisamos verificar algumas coisas;
Pré-requisitos
Use este comando para verificar se o node.js está instalado no seu PC:
node -v
Se o node.js estiver instalado, você terá uma saída semelhante a esta em seu terminal.
Versão do nó
Se não estiver instalado, você pode verificar as instruções de download em https://nodejs.org/en/.
Use este comando para verificar se o React está instalado no seu PC:
npm list react
Se o React estiver instalado globalmente em sua máquina, você terá algo assim em seu terminal.
Versão Reagir
- Instale o react-create-app em sua máquina. Usando este comando
npm install -g create-react-app
- Crie seu aplicativo React usando este comando
npx create-react-app my-app
Você pode substituir my-app por qualquer nome de sua escolha. Para o nosso caso, chamamos nosso aplicativo de react-b.
Uma vez instalado, você terá algo semelhante em seu terminal:
Execute estes comandos para começar
- cd react-b (use o nome do seu app escolhido no passo anterior)
- npm start (este comando inicia seu aplicativo React)
Agora podemos ir para as próximas etapas e adicionar/instalar o Bootstrap ao nosso aplicativo React:
Método Bootstrap de instalação do NPM
Node.js vem com npm (node package manager) instalado por padrão.
Você pode verificar a versão do seu npm através deste comando:
npm -v
Se o npm estiver instalado, você obterá uma saída como 9.2.0
Agora você pode instalar o bootstrap usando este comando:
npm install bootstrap
Feito isso, vá para o arquivo ./src/index.js. Adicione esta linha no topo.
import ‘bootstrap/dist/css/bootstrap.css’;
Usando o Yarn Package Manager
Ao contrário do npm, o yarn não é instalado por padrão quando você instala o node.js.
Instale o pátio usando este comando;
npm install -g yarn
Este comando instalará yarn globalmente, então você não precisa mais instalar o pacote toda vez que criar um aplicativo React.
Execute este comando para adicionar bootstrap ao React:
yarn add bootstrap
Feito isso, vá para o arquivo ./src/index.js. Adicione esta linha no topo.
import ‘bootstrap/dist/css/bootstrap.css’;
Você sempre deve importar o Bootstrap na parte superior do arquivo de entrada do seu aplicativo antes de outros arquivos CSS. Isso facilita a alteração de suas entradas Bootstrap se você precisar alterar os valores padrão dos modelos ao criar seu aplicativo React.
Método CDN
Usando um link de Content Delivery Network (CDN), você pode adicionar Bootstrap ao React. Ao adicionar este link CDN, você inclui a biblioteca Bootstrap em seu aplicativo React sem baixar e hospedar os arquivos na pasta do projeto. Siga esses passos.
- Em sua pasta raiz, navegue até o arquivo .public/index.html
- Na tag , adicione esta tag
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- Você precisa adicionar dependências de JavaScript ao seu aplicativo. Vá para o corpo do seu arquivo index.html e adicione esta tag logo antes da tag de fechamento:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
O Bootstrap está finalmente instalado em seu aplicativo React.
Usando o pacote React Bootstrap
As abordagens que cobrimos até agora foram originalmente projetadas para arquivos HTML. Para entender isso melhor, considere este código suspenso do Bootstrap:
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div>
O que há de errado com o código? O Bootstrap, por padrão, usa classe para classificar suas divisões (DIVs). No entanto, o React usa JSX, que usa a sintaxe camelCase. Portanto, você deve substituir manualmente a classe por className.
Para fazer esse código funcionar no React, devemos substituir todas as “classes” por “className”. O código final será:
<div className="dropdown"> <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul className="dropdown-menu"> <li><a className="dropdown-item" href="#">Action</a></li> <li><a className="dropdown-item" href="#">Another action</a></li> <li><a className="dropdown-item" href="#">Something else here</a></li> </ul> </div>
Felizmente, temos mais duas abordagens, react-bootstrap e reactstrap, onde a intervenção manual não é necessária.
React-bootstrap
React-bootstrap tem componentes React verdadeiros construídos do zero. A biblioteca é compatível com o núcleo Bootstrap.
Siga estas etapas para começar a usar o React-bootstrap:
- Instale o React-bootstrap com este comando:
npm install react-bootstrap bootstrap
- Navegue até o arquivo src/index.js ou App.js e adicione esta linha antes de outros arquivos CSS
import ‘bootstrap/dist/css/bootstrap.min.css’;
O React-bootstrap permite que você importe um componente específico em vez de toda a biblioteca. Por exemplo, se você precisar importar um botão em um de seus componentes, poderá importá-lo da seguinte maneira;
importar { Button } de ‘react-bootstrap’;
Reactstrap
Esta é uma biblioteca de componentes React para Bootstrap. O Reactstrap depende da estrutura Bootstrap CSS para seus estilos e temas. Essa biblioteca importa as classes Bootstrap corretas para seu aplicativo React, permitindo que você tenha um estilo de aplicativo consistente. Você também não precisa adicionar os arquivos JavaScript do Bootstrap para acionar a funcionalidade.
Siga estas etapas para adicionar o Reactstrap ao seu aplicativo React:
- Instale o Reactstrap através deste comando:
npm install reactstrap react react-dom
- Importe o Bootstrap usando estes comandos:
npm install --save bootstrap
import ‘bootstrap/dist/css/bootstrap.min.css’; (adicione esta linha ao seu app.js)
Você também pode usar a opção de link CDN para incluir o Bootstrap em seu aplicativo. Após a primeira etapa, vá para o diretório raiz e navegue até o arquivo .public/index.html e adicione esta linha à tag
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
O Reactstrap permite importar um componente específico em vez de toda a biblioteca. Por exemplo, se você precisar importar um botão em um de seus componentes, poderá importar como;
importar { Button } de ‘reactstrap’;
Conclusão
Acima estão algumas abordagens que você pode usar para instalar o Bootstrap em seu aplicativo React para estilizar seus aplicativos da web. A escolha da abordagem de instalação é uma questão de preferência, pois o objetivo final é o mesmo.
A combinação do React com o Bootstrap evita que você tenha que acompanhar todos os estilos CSS à medida que seu aplicativo cresce. Estilizar seu aplicativo se torna fácil e eficiente à medida que você ganha mais tempo para se concentrar na funcionalidade.
Você pode explorar alguns motivos para escolher o React Native para desenvolvimento de aplicativos móveis.