Home-theater-designers
Priekšgala saskarnes izveide var būt sarežģīta, ja esat iesācējs ReactJS. Bootstrap sistēma kopā ar veidnēm padara to vieglāku un ātrāku.
Bootstrap ir tematiskas veidnes, kuras ikviens var pielāgot un publicēt bez maksas. Varat izvēlēties no daudzām veidnēm, pirms tās lejupielādējat un izmantojat savā lietotnē.
Veidnes palīdz ātri izveidot ievērojamas priekšgala saskarnes, atstājot vairāk laika, lai koncentrētos uz sarežģītām funkcijām. Varat uzzināt par Bootstrap veidnēm, integrējot to ar ReactJS lietotni.
Izveidojiet savu React lietotni
Sāciet ar izveidojot ReactJS lietotni mašīnas mapē. Varat arī sekot ierēdnim Reakcijas ceļvedis par jaunas lietotnes izveidi.
Lejupielādējiet sāknēšanas veidni
Lejupielādējiet pēc savas izvēles veidni no Startējiet Bootstrap motīvu vietne vai cita pēc jūsu izvēles. Tiešsaistē ir vairākas vietnes ar bezmaksas Bootstrap veidnēm.
Lai iegūtu šo rokasgrāmatu, lejupielādējiet Bootstrap motīvu ar nosaukumu Agency.
viens vai vairāki videoklipi ir noņemti no atskaņošanas saraksta, jo tie tika izdzēsti no pakalpojuma YouTube.
Pēc lejupielādes izpakojiet mapes failu, lai redzētu tā saturu. Jūs ievērosiet, ka jums ir mapes ar nosaukumu aktīvi, CSS, JS un fails ar nosaukumu index.html.
Pievienojiet Bootstrap veidni ReactJS lietotnei
Pēc tam kopējiet lejupielādētās mapes saturu mapē ar nosaukumu publiski savā React lietotnē. Jūs ievērosiet, ka tagad jums ir divi index.html faili. Kopējiet Bootstrap saturu index.html failu lietotnē React index.html failu.
Parādīt sāknēšanas veidni
Pēc Bootstrap HTML pievienošanas lietotnes indeksam.html palaidiet lietotni, lai redzētu, vai integrācija bija veiksmīga. Izmantojiet šādu komandu:
npm startJums vajadzētu redzēt veidni savā pārlūkprogrammā, kā parādīts nākamajā attēlā.
Integrējiet Bootstrap motīvu lietotnes komponentos
Lai integrētu Bootstrap veidni React App, jums ir jākopē HTML sadaļas no index.html uz katru komponentu. Komponenti ļauj rakstīt kodu dažādām lietotnes daļām un izmantot tās atkārtoti. Tas samazina atkārtošanos un arī sakārto jūsu lietotnes struktūru.
Failā index.html tagad ir dažādas sadaļas Navigācija, Par mums, Kontaktpersona un Kājene. Mapē src izveidojiet divas mapes, komponentus un lapas. Sadaliet sadaļas tālāk parādītajās mapēs:
Komponentos jāiekļauj šādas sastāvdaļas:
- Header.jsx: virsraksta sadaļa.
- Navigation.jsx: navigācijas josla un kājene.
Lapu mapē būs šāda informācija:
- AboutUs.jsx: informācija par mums.
- Home.jsx: sadaļas Pakalpojumi, Portfelis, Klienti un Komanda.
- Contacts.jsx: kontaktinformācija.
Nokopējiet katras sadaļas HTML no faila index.html un pievienojiet to katram komponentam. Sintaksei vajadzētu izskatīties šādi:
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
Pēc tam mainiet komponentu HTML sintaksi uz JSX. Lai to izdarītu automātiski Vscode redaktorā, noklikšķiniet uz Ctrl+Shift+P. Uznirstošajā logā noklikšķiniet uz opcijas HTML uz JSX, lai mainītu HTML uz JSX.
JSX ir JavaScript sintakses paplašinājums. Tas ļauj izmantot HTML un JavaScript sajaukumu, lai rakstītu kodu komponentos. Kad visas sadaļas ir nokopētas komponentos, failā index.html paliek tikai stila saites un skripti.
Tas izskatīsies šādi:
<!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>
Izveidojiet maršrutus komponentiem
Tagad, kad lietotnē ir saites, skripti un komponenti, jums ir jāizveido tiem maršruti App.js failā. Maršruti atveidos lietotnes lapas, lai padarītu to dinamisku.
Lai renderētu lapas, instalējiet react-router-dom ar šādu komandu:
npm install react-router-dom Iekš App.js failu, importējiet BrowserRouter kā maršrutētāju, maršrutus un maršrutu no react-router-dom bibliotēka . Pēc tam importējiet visus sastāvdaļas un Lapas . Failam vajadzētu izskatīties šādi:
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;
Pārvietojoties pārlūkprogrammā, jums vajadzētu redzēt atveidotās lapas vietējā resursdatorā. Līdzīga veidnei, kuru lejupielādējāt, kā parādīts tālāk.
Apsveicam! Jūs savā React lietotnē esat veiksmīgi integrējis Bootstrap motīvu. Tagad varat pielāgot lapas atbilstoši savām vēlmēm.
Kāpēc izmantot Bootstrap tematiskās veidnes?
Bootstrap veidnes palīdz izveidot ievērojamas priekšgala saskarnes ļoti īsā laikā. Ir daudz tēmu, no kurām izvēlēties. Visas tēmas ir jaunākajā Bootstrap versijā. Tiem ir arī MIT licences, un tie ir jaunākie nozares dizaini.
Lai gan priekšrocību ir daudz, paļaušanās uz veidnēm samazina radošumu. Parasti tiešsaistē tiek atrasts viens populārs motīvs, kas tiek izmantots citās vietnēs. Tomēr jūs varat pielāgot veidni unikālam dizainam.
Tagad varat integrēt Bootstrap veidni savā React lietotnē. Sāciet veidot ar Bootstrap veidnēm un izbaudiet skaistas priekšgala saskarnes.