Home-theater-designers
Att skapa ett front-end-gränssnitt kan vara utmanande om du är ny på ReactJS. Bootstrap-ramverket, tillsammans med dess mallar, gör det enklare och snabbare.
Bootstrap har temanmallar som alla kan anpassa och publicera gratis. Du kan välja mellan många mallar innan du laddar ner och använder dem i din app.
Mallar hjälper dig att snabbt skapa anmärkningsvärda frontend-gränssnitt, vilket ger mer tid att fokusera på komplexa funktioner. Du kan lära dig mer om Bootstrap-mallar genom att integrera en med en ReactJS-app.
Skapa din React-app
Börja med skapa en ReactJS-app i en mapp på din maskin. Alternativt kan du följa tjänstemannen Reaktionsguide på att skapa en ny app.
Ladda ner en Bootstrap-mall
Ladda ner en valfri mall från Starta Bootstrap teman webbplats eller någon annan av dina önskemål. Det finns flera webbplatser med gratis Bootstrap-mallar online.
För den här guiden, ladda ner Bootstrap-temat som heter Agency.
När du har laddat ner, packa upp mappfilen för att se dess innehåll. Du kommer att märka att du har mappar som heter tillgångar, CSS, JS och en fil som heter index.html.
Lägg till Bootstrap-mall i ReactJS-appen
Kopiera sedan innehållet i den nedladdade mappen till mappen som heter offentlig i din React-app. Du kommer att märka att du nu har två index.html-filer. Kopiera innehållet i Bootstrap index.html fil i React-appen index.html fil.
Visa Bootstrap-mall
Efter att ha lagt till Bootstrap HTML till appens index.html, kör appen för att se om integrationen lyckades. Använd följande kommando:
npm startDu bör se mallen i din webbläsare, som följande bild illustrerar.
Integrera Bootstrap-tema i appkomponenterna
För att integrera Bootstrap-mallen i React-appen måste du kopiera HTML-sektionerna från index.html till varje komponent. Komponenter låter dig skriva kod för olika delar av appen och återanvända dem. Detta minskar upprepning och organiserar även strukturen i din app.
Filen index.html har nu olika avsnitt Navigering, Om oss, Kontakt och Sidfot. Skapa två mappar, komponenter och sidor i src-mappen. Dela upp avsnitten i mapparna som visas nedan:
Komponenterna bör innehålla följande:
var är Facebook -kodgeneratorn
- Header.jsx: Toppsektionen.
- Navigation.jsx: Navigationsfältet och sidfoten.
Sidornas mapp kommer att ha följande:
- AboutUs.jsx: Information om oss.
- Home.jsx: Tjänster, Portfölj, Klienter och Teamsektioner.
- Contacts.jsx: Kontaktinformation.
Kopiera HTML-koden för varje avsnitt från filen index.html och lägg till den i varje komponent. Syntaxen ska se ut så här:
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
Ändra sedan syntaxen för HTML i komponenterna till JSX. För att göra detta automatiskt i Vscode-redigeraren klicka Ctrl + Shift + P. Klicka på HTML till JSX-alternativet i fönstret som dyker upp för att ändra HTML till JSX.
JSX är ett syntaxtillägg till JavaScript. Det låter dig använda en blandning av HTML och JavaScript för att skriva kod i komponenter. När du har kopierat alla avsnitt till komponenterna, finns filen index.html kvar med endast stillänkarna och skripten.
Det kommer att se ut så här:
<!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>
Skapa rutter för komponenter
Nu när du har länkarna, skripten och komponenterna i appen måste du skapa rutter för dem i filen App.js. Rutterna kommer att återge sidorna i appen för att göra den dynamisk.
För att rendera sidorna, installera react-router-dom med följande kommando:
npm install react-router-dom I den App.js fil, importera BrowserRouter som en router, rutter och rutt från react-router-dom-bibliotek . Importera sedan alla komponenter och Sidor . Filen ska se ut så här:
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;
Du bör se de renderade sidorna på den lokala värden när du navigerar i webbläsaren. Liknar mallen du laddade ner, som illustreras nedan.
Grattis, du har framgångsrikt integrerat ett Bootstrap-tema i din React-app. Du kan nu anpassa sidorna efter dina önskemål.
Varför använda Bootstraps temamallar?
Bootstrap-mallar hjälper till att skapa anmärkningsvärda front-end-gränssnitt på mycket kort tid. Det finns många teman att välja mellan. Alla teman är av den senaste Bootstrap-versionen. De kommer också med MIT-licenser och är de senaste industridesignerna.
Även om fördelarna är många, minskar kreativiteten att lita på mallar. Det är vanligt att hitta ett populärt tema som används på andra webbplatser online. Du kan dock anpassa en mall till en unik design.
Nu kan du integrera en Bootstrap-mall med din React-app. Börja bygga med Bootstrap-mallar och njut av vackra front-end-gränssnitt.
hur man ansluter wii till hdmi