Home-theater-designers
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 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.
como mudar o nome dos airpods
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 startVocê 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.
não consigo ver o ícone da bateria no Windows 10
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 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.
download grátis windows xp para pc
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 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:
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.
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.