Home-theater-designers
Käyttöliittymän luominen voi olla haastavaa, jos olet uusi ReactJS:n käyttäjä. Bootstrap-kehys mallien ohella tekee siitä helpompaa ja nopeampaa.
Bootstrapissa on teemamalleja, joita kuka tahansa voi muokata ja julkaista ilmaiseksi. Voit valita useista malleista ennen niiden lataamista ja käyttämistä sovelluksessasi.
Mallit auttavat sinua luomaan nopeasti merkittäviä käyttöliittymäliittymiä, jolloin jää enemmän aikaa keskittyä monimutkaisiin ominaisuuksiin. Voit oppia Bootstrap-malleista integroimalla sellaisen ReactJS-sovellukseen.
Luo React-sovelluksesi
Aloita ReactJS-sovelluksen luominen koneen kansiossa. Vaihtoehtoisesti voit seurata virallista Reaktioopas uuden sovelluksen luomisessa.
miten voin luoda sähköpostiosoitteen itselleni
Lataa Bootstrap-malli
Lataa valitsemasi malli osoitteesta Käynnistä Bootstrap teemasivusto tai jokin muu haluamasi. Verkossa on useita sivustoja, joissa on ilmaisia Bootstrap-malleja.
Lataa tätä opasta varten Bootstrap-teema Agency.
Kun olet ladannut, pura kansiotiedosto nähdäksesi sen sisällön. Huomaat, että sinulla on kansioita nimeltä resurssit, CSS, JS ja tiedosto nimeltä index.html.
Lisää Bootstrap-malli ReactJS-sovellukseen
Kopioi seuraavaksi ladatun kansion sisältö kansioon nimeltä julkinen React-sovelluksessasi. Huomaat, että sinulla on nyt kaksi index.html-tiedostoa. Kopioi Bootstrapin sisältö index.html tiedosto React-sovellukseen index.html tiedosto.
Näytä Bootstrap-malli
Kun olet lisännyt Bootstrap-HTML-koodin sovelluksen index.html-tiedostoon, suorita sovellus nähdäksesi, onnistuiko integrointi. Käytä seuraavaa komentoa:
npm startSinun pitäisi nähdä malli selaimessasi, kuten seuraava kuva havainnollistaa.
Integroi Bootstrap-teema sovelluksen osiin
Integroidaksesi Bootstrap-mallin React-sovellukseen, sinun on kopioitava HTML-osat index.html-tiedostosta kuhunkin komponenttiin. Komponenttien avulla voit kirjoittaa koodia sovelluksen eri osiin ja käyttää niitä uudelleen. Tämä vähentää toistoa ja järjestää myös sovelluksesi rakenteen.
Index.html-tiedostossa on nyt eri osiot Navigointi, Tietoja meistä, Yhteystiedot ja Alatunniste. Luo src-kansioon kaksi kansiota, komponenttia ja sivua. Jaa osiot alla oleviin kansioihin:
Komponenttien tulee sisältää seuraavat:
- Header.jsx: Masthead-osio.
- Navigation.jsx: Navigointipalkki ja alatunniste.
Sivujen kansiossa on seuraavat tiedot:
iPhonen näyttö liikkuu itsestään
- AboutUs.jsx: Tietoja meistä.
- Home.jsx: Palvelut, Portfolio, Asiakkaat ja Tiimi-osiot.
- Contacts.jsx: Yhteystiedot.
Kopioi kunkin osion HTML-koodi index.html-tiedostosta ja lisää se jokaiseen komponenttiin. Syntaksin pitäisi näyttää tältä:
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
Muuta seuraavaksi komponenttien HTML:n syntaksi JSX:ksi. Voit tehdä tämän automaattisesti Vscode-editorissa napsauttamalla Ctrl + Vaihto + P. Napsauta HTML to JSX -vaihtoehtoa avautuvassa ikkunassa vaihtaaksesi HTML:n JSX:ksi.
JSX on JavaScriptin syntaksilaajennus. Sen avulla voit käyttää HTML- ja JavaScript-sekoitusta koodin kirjoittamiseen komponentteihin. Kun kopioit kaikki osiot komponentteihin, index.html-tiedostoon jää vain tyylilinkit ja komentosarjat.
Se tulee näyttämään tältä:
<!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>
Luo reitit komponenteille
Nyt kun sinulla on linkit, komentosarjat ja komponentit sovelluksessa, sinun on luotava niille reitit App.js-tiedostoon. Reitit tekevät sovelluksen sivuista dynaamisia.
Jos haluat hahmontaa sivut, asenna react-router-dom seuraavalla komennolla:
npm install react-router-dom Vuonna App.js tiedosto, tuo BrowserRouter reitittimenä, Routes ja Route osoitteesta react-router-dom -kirjasto . Tuo sitten kaikki komponentit ja Sivut . Tiedoston pitäisi näyttää tältä:
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;
Sinun pitäisi nähdä hahmonnetut sivut paikallisessa isännässä, kun selaat selainta. Samanlainen kuin lataamasi malli, kuten alla on kuvattu.
Onnittelut, olet onnistuneesti integroinut Bootstrap-teeman React-sovellukseesi. Voit nyt muokata sivuja mieltymystesi mukaan.
Miksi käyttää Bootstrapin teemamalleja?
Bootstrap-mallit auttavat luomaan merkittäviä käyttöliittymäliittymiä erittäin lyhyessä ajassa. Valittavana on monia teemoja. Kaikki teemat ovat uusimmasta Bootstrap-versiosta. Niissä on myös MIT-lisenssit ja ne ovat alan uusimpia malleja.
xbox one suojausprotokollasi ei toimi
Vaikka etuja on monia, malleihin luottaminen vähentää luovuutta. On yleistä löytää yksi suosittu teema, jota käytetään muilla sivustoilla verkossa. Voit kuitenkin mukauttaa mallin yksilölliseen malliin.
Nyt voit integroida Bootstrap-mallin React-sovellukseesi. Aloita rakentaminen Bootstrap-malleilla ja nauti kauniista käyttöliittymästä.