Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

Criar uma interface front-end pode ser desafiador se você for novo no ReactJS. A estrutura Bootstrap, junto com seus modelos, torna isso mais fácil e rápido.

O Bootstrap possui modelos temáticos que qualquer pessoa pode personalizar e publicar gratuitamente. Você pode escolher entre muitos modelos antes de baixá-los e usá-los em seu aplicativo.

Os modelos ajudam você a criar interfaces de front-end notáveis ​​rapidamente, deixando mais tempo para se concentrar em recursos complexos. Você pode aprender sobre modelos de Bootstrap integrando um com um aplicativo ReactJS.

Crie seu aplicativo React

Começar por criando um aplicativo ReactJS em uma pasta em sua máquina. Alternativamente, você pode seguir o oficial Guia de reação na criação de um novo aplicativo.

Baixe um modelo de Bootstrap

Faça o download de um modelo de sua escolha no

instagram viewer
Inicie o Bootstrap site de temas ou outro de sua preferência. Existem vários sites com modelos gratuitos de Bootstrap online.

Para este guia, baixe o tema Bootstrap chamado Agency.

Uma vez baixado, descompacte o arquivo da pasta para ver seu conteúdo. Você notará que tem pastas denominadas assets, CSS, JS e um arquivo denominado index.html.

Adicionar modelo Bootstrap ao aplicativo ReactJS

Em seguida, copie o conteúdo da pasta baixada para a pasta chamada público em seu aplicativo React. Você notará que agora você tem dois arquivos index.html. Copie o conteúdo do Bootstrap index.html arquivo no React App's index.html arquivo.

Exibir Modelo de Bootstrap

Após adicionar o HTML do Bootstrap ao index.html do App, execute o App para verificar se a integração foi bem-sucedida. Use o seguinte comando:

npm start

Você deve ver o modelo em seu navegador, conforme ilustrado na figura a seguir.

Integre o tema Bootstrap aos componentes do aplicativo

Para integrar o modelo Bootstrap no React App, você deve copiar as seções HTML de index.html para cada componente. Os componentes permitem que você escreva código para diferentes partes do aplicativo e os reutilize. Isso reduz a repetição e também organiza a estrutura do seu App.

O arquivo index.html agora tem diferentes seções Navegação, Sobre nós, Contato e Rodapé. Na pasta src, crie duas pastas, components e pages. Divida as seções nas pastas mostradas abaixo:

Os componentes devem incluir o seguinte:

  • Header.jsx: a seção de masthead.
  • Navigation.jsx: a barra de navegação e o rodapé.

A pasta das páginas terá o seguinte:

  • AboutUs.jsx: Informações sobre nós.
  • Home.jsx: seções Serviços, Portfólio, Clientes e Equipe.
  • Contacts.jsx: informações de contato.

Copie o HTML de cada seção do arquivo index.html e inclua-o em cada componente. A sintaxe deve ficar assim:

importar Reagir de'reagir'
const Cabeçalho = () => {
retornar (




"cabeçalho">
"recipiente">
"cabeçalho-subtítulo">Bem-vindo ao nosso estúdio!</div>









"masthead-cabeçalho texto-maiúsculo">
 IstoPrazer em Conhecer Você
 </div>



"btn btn-principal btn-xl texto-maiúsculo" href="#Serviços">
 Me diga mais
 </a>
 </div>
 </header>
 </div>
 );
};


exportarpadrão Cabeçalho

Em seguida, altere a sintaxe do HTML nos componentes para JSX. Para fazer isso automaticamente no editor Vscode clique Ctrl + Deslocamento + P. Clique na opção HTML para JSX na janela que aparece, para alterar o HTML para JSX.

JSX é uma extensão de sintaxe para JavaScript. Ele permite que você use uma mistura de HTML e JavaScript para escrever código em componentes. Depois de copiar todas as seções para os componentes, o arquivo index.html permanece apenas com os links e scripts de estilo.

Vai ficar assim:

html>
<htmlidioma="en">


<cabeça>
<metaconjunto de caracteres="utf-8" />
<linkrele="ícone"href="%PUBLIC_URL%/favicon.ico" />
<metanome="janela de exibição"contente="largura=largura do dispositivo, escala inicial=1" />
<metanome="cor do tema"contente="#000000" />
<metanome="descrição"contente="Web site criado usando create-react-app"/>
<linkrele="ícone de toque de maçã"href="%PUBLIC_URL%/logo192.png" />
<linkrele="manifesto"href="%PUBLIC_URL%/manifest.json" />
<título>aplicativo de reaçãotítulo>
<linkrele="ícone"tipo="imagem/x-ícone"href="assets/favicon.ico" />


 Font Awesome icons (versão gratuita)
<roteiroorigem=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"origem cruzada="anônimo">roteiro>


 fontes do google
<linkhref=" https://fonts.googleapis.com/css? família=Montserrat: 400.700"rele="folha de estilo"tipo="texto/css" />
<linkhref=" https://fonts.googleapis.com/css? família=Robô+Laje: 400,100,300,700"rele="folha de estilo"tipo="texto/css" />


 CSS do tema principal (inclui Bootstrap)
<linkhref="%PUBLIC_URL%/css/styles.css"rele="folha de estilo" />
cabeça>


<corpo>
<sem roteiro>Você precisa ativar o JavaScript para executar este aplicativo.sem roteiro>


<diveu ia="raiz">div>


 Núcleo do Bootstrap JS
<roteiroorigem=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">roteiro>


 JS do tema principal
<roteiroorigem="%PUBLIC_URL%/js/scripts.js">roteiro>


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


 * * SB Forms JS * *


 * * Ative seu formulário em https://startbootstrap.com/solution/contact-forms * *


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


<roteiroorigem=" https://cdn.startbootstrap.com/sb-forms-latest.js">roteiro>
corpo>
html>

Criar Rotas para Componentes

Agora que você tem os links, scripts e componentes no App, você deve criar rotas para eles no arquivo App.js. As rotas renderizarão as páginas no App para torná-lo dinâmico.

Para renderizar as páginas, instale react-router-dom com o seguinte comando:

npm install react-router-dom

No App.js arquivo, importe BrowserRouter como um roteador, rotas e rota do biblioteca react-router-dom. Em seguida, importe todos os componentes e Páginas. O arquivo deve ficar assim:

importar { NavegadorRouter como Roteador, Rotas, Rota } de"react-router-dom";
importar Navegação de'./componentes/Navegação';
importar Lar de'./Páginas/Home';
importar Sobre de'./Páginas/Sobre';
importar Contato de'./Páginas/Contato'
importar Cabeçalho de"./components/Cabeçalho";
funçãoAplicativo() {
retornar (


"Aplicativo">










"/" elemento={} />
"/sobre" elemento={} />
"/contato" elemento={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


exportarpadrão Aplicativo;

Você deve ver as páginas renderizadas no host local ao navegar no navegador. Semelhante ao modelo que você baixou, conforme ilustrado abaixo.

Parabéns, você integrou com sucesso um tema Bootstrap em seu React App. Agora você pode personalizar as páginas de acordo com sua preferência.

Por que usar os modelos temáticos do Bootstrap?

Os modelos Bootstrap ajudam a criar interfaces front-end notáveis ​​em um tempo muito curto. Há muitos temas para escolher. Todos os temas são da versão mais recente do Bootstrap. Eles também vêm com licenças do MIT e são os designs mais recentes do setor.

Embora as vantagens sejam muitas, depender de modelos reduz a criatividade. É comum encontrar um tema popular usado em outros sites online. No entanto, você pode personalizar um modelo para um design exclusivo.

Agora você pode integrar um template Bootstrap com seu React App. Comece a construir com modelos Bootstrap e desfrute de belas interfaces front-end.