Como integrar um modelo de tema Bootstrap com um aplicativo React

2023/01/14

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

Comece criando um aplicativo ReactJS em uma pasta em sua máquina. Como alternativa, você pode seguir o guia oficial do React sobre como criar um novo aplicativo.

Baixe um modelo de Bootstrap

Baixe um modelo de sua escolha no site de temas Start Bootstrap 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 public em seu React App. Você notará que agora você tem dois arquivos index.html. Copie o conteúdo do arquivo index.html do Bootstrap para o arquivo index.html do React App .

interface do aplicativo react com modelo bootstrap

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.

o modelo de bootstrap é exibido no aplicativo react

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:

import React from 'react'

const Header = () => { return ( <div> <header className="masthead"> <div className="container"> <div className="masthead-subheading">Welcome To Our Studio!</div>


            <div className="masthead-heading text-uppercase">
              It's Nice To Meet You
            </div>
            <a className="btn btn-primary btn-xl text-uppercase" href="#services">
              Tell Me More
            </a>
          </div>
        </header>
      </div>
    );
};
export default Header

Em seguida, altere a sintaxe do HTML nos componentes para JSX. Para fazer isso automaticamente no editor do Vscode clique em Ctrl + Shift + 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:

<!DOCTYPE html>

<html lang="en">


<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
    <!-- Font Awesome icons (free version)-->
    <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
    <!-- Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="%PUBLIC_URL%/css/styles.css" rel="stylesheet" />
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!-- Bootstrap core JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Core theme JS-->
    <script src="%PUBLIC_URL%/js/scripts.js"></script>
    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
    <!-- * * SB Forms JS * *-->
    <!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
    <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>

</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 arquivo App.js , importe BrowserRouter como um roteador, rotas e rota da biblioteca react-router-dom. Em seguida, importe todos os componentes e páginas . O arquivo deve ficar assim:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Navigation from './components/Navigation'; import Home from './Pages/Home'; import About from './Pages/About'; import Contact from './Pages/Contact' import Header from "./components/Header";

function App() { return ( <div className="App"> <Header /> <Home /> <About /> <Contact/>


        <Router>
          <Navigation>
            <Routes>
              <Route exact path="/" element={<Home />} />
              <Route exact path="/about" element={<About />} />
              <Route exact path="/contact" element={<Contact />} />
            </Routes>
          </Navigation>
        </Router>
      </div>
    );
}
export default App;

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

modelo de bootstrap integrado em um navegador da web

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.