Home-theater-designers
Priekinės sąsajos sukūrimas gali būti sudėtingas, jei nesate naujokas ReactJS. „Bootstrap“ sistema kartu su šablonais palengvina ir pagreitina.
„Bootstrap“ turi teminius šablonus, kuriuos kiekvienas gali tinkinti ir paskelbti nemokamai. Galite pasirinkti iš daugelio šablonų prieš atsisiųsdami ir naudodami juos programoje.
Šablonai padeda greitai sukurti nuostabias sąsajas, paliekant daugiau laiko susitelkti ties sudėtingomis funkcijomis. Galite sužinoti apie „Bootstrap“ šablonus integravę juos į „ReactJS“ programą.
Sukurkite savo „React“ programą
Pradėkite nuo sukurti ReactJS programėlę įrenginio aplanke. Arba galite sekti pareigūną Reagavimo vadovas kuriant naują programą.
Atsisiųskite „Bootstrap“ šabloną
Atsisiųskite pasirinktą šabloną iš Paleiskite „Bootstrap“. temų svetainę ar kitą jūsų pageidaujamą. Internete yra keletas svetainių su nemokamais „Bootstrap“ šablonais.
Norėdami gauti šį vadovą, atsisiųskite „Bootstrap“ temą, pavadintą „Agentūra“.
Atsisiuntę išpakuokite aplanko failą, kad pamatytumėte jo turinį. Pastebėsite, kad turite aplankus, pavadintus turtu, CSS, JS ir failą, pavadintą index.html.
Pridėkite „Bootstrap“ šabloną prie „ReactJS“ programos
Tada nukopijuokite atsisiųsto aplanko turinį į aplanką pavadinimu viešas savo React programėlėje. Pastebėsite, kad dabar turite du index.html failus. Nukopijuokite „Bootstrap“ turinį index.html failą į „React“ programą index.html failą.
Rodyti Bootstrap šabloną
Pridėję Bootstrap HTML prie programos index.html, paleiskite programą, kad pamatytumėte, ar integracija buvo sėkminga. Naudokite šią komandą:
npm startŠabloną turėtumėte matyti naršyklėje, kaip parodyta toliau pateiktame paveikslėlyje.
pažinčių programos 18 metų asmenims
Integruokite „Bootstrap“ temą į programos komponentus
Norėdami integruoti „Bootstrap“ šabloną į „React“ programą, turite nukopijuoti HTML skyrius iš index.html į kiekvieną komponentą. Komponentai leidžia parašyti kodą skirtingoms Programėlės dalims ir pakartotinai jas naudoti. Tai sumažina pasikartojimų skaičių ir taip pat sutvarko jūsų programos struktūrą.
Dabar faile index.html yra skirtingos skiltys Navigacija, Apie mus, Kontaktai ir Poraštė. Aplanke src sukurkite du aplankus, komponentus ir puslapius. Padalinkite skyrius į toliau nurodytus aplankus:
Komponentai turėtų apimti šiuos elementus:
- Header.jsx: pagrindinio puslapio antraštės skiltis.
- Navigation.jsx: naršymo juosta ir poraštė.
Puslapių aplanke bus:
- AboutUs.jsx: Informacija apie mus.
- Home.jsx: paslaugų, portfelio, klientų ir komandos skiltys.
- Contacts.jsx: kontaktinė informacija.
Nukopijuokite kiekvienos skilties HTML iš failo index.html ir pridėkite jį prie kiekvieno komponento. Sintaksė turėtų atrodyti taip:
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
Tada pakeiskite komponentų HTML sintaksę į JSX. Norėdami tai padaryti automatiškai Vscode redaktoriuje, spustelėkite Ctrl + Shift + P. Pasirodžiusiame lange spustelėkite parinktį HTML į JSX, kad pakeistumėte HTML į JSX.
JSX yra „JavaScript“ sintaksės plėtinys. Tai leidžia naudoti HTML ir JavaScript mišinį, kad galėtumėte įrašyti kodą į komponentus. Nukopijavus visas dalis į komponentus, faile index.html lieka tik stiliaus nuorodos ir scenarijai.
Tai atrodys taip:
<!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>
Sukurkite komponentų maršrutus
Dabar, kai programoje turite nuorodas, scenarijus ir komponentus, turite sukurti jiems maršrutus App.js faile. Maršrutai pateiks programos puslapius, kad būtų dinamiški.
Norėdami pateikti puslapius, įdiekite react-router-dom naudodami šią komandą:
npm install react-router-dom Viduje App.js failą, importuokite „BrowserRouter“ kaip maršrutizatorių, „Routes“ ir „Route“ iš react-router-dom biblioteka . Tada importuokite visus komponentai ir Puslapiai . Failas turėtų atrodyti taip:
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;
Naršydami naršyklėje turėtumėte matyti pateiktus puslapius vietinėje priegloboje. Panašus į atsisiųstą šabloną, kaip parodyta toliau.
Sveikiname, sėkmingai integravote „Bootstrap“ temą į savo „React“ programą. Dabar galite tinkinti puslapius pagal savo pageidavimus.
Kodėl verta naudoti „Bootstrap“ teminius šablonus?
„Bootstrap“ šablonai padeda per labai trumpą laiką sukurti nuostabias sąsajas. Galima rinktis iš daugybės temų. Visos temos yra naujausios „Bootstrap“ versijos. Jie taip pat yra su MIT licencijomis ir yra naujausio pramonės dizaino.
Nors pranašumų yra daug, pasikliaujant šablonais sumažėja kūrybiškumas. Įprasta rasti vieną populiarią temą, naudojamą kitose interneto svetainėse. Tačiau galite pritaikyti šabloną pagal unikalų dizainą.
Dabar galite integruoti „Bootstrap“ šabloną su „React“ programa. Pradėkite kurti naudodami „Bootstrap“ šablonus ir mėgaukitės gražiomis sąsajomis.