Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

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.

Lataa Bootstrap-malli

Lataa valitsemasi malli osoitteesta Käynnistä Bootstrap teemasivusto tai jokin muu haluamasi. Verkossa on useita sivustoja, joissa on ilmaisia ​​Bootstrap-malleja.

instagram viewer

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 aloitus

Sinun 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:

  • 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ä:

tuonti Reagoi alkaen'reagoi'
konst Otsikko = () => {
palata (




"masto">
"kontti">
"masthead-alaotsikko">Tervetuloa studioomme!</div>









"masthead-otsikon teksti-isot kirjaimet">
 SeOn mukava tavata
 </div>



"btn btn-ensisijainen btn-xl teksti-isot kirjaimet" href="#palvelut">
 Kerro minulle lisää
 </a>
 </div>
 </header>
 </div>
 );
};


viedäoletuksena Otsikko

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ä:

html>
<htmllang="en">


<pää>
<metamerkkisetti="utf-8" />
<linkkirel="kuvake"href="%PUBLIC_URL%/favicon.ico" />
<metanimi="näkymä"sisältö="width=device-width, original-scale=1" />
<metanimi="teema-väri"sisältö="#000000" />
<metanimi="kuvaus"sisältö="Web-sivusto luotu käyttämällä create-react-app"/>
<linkkirel="omena-kosketuskuvake"href="%PUBLIC_URL%/logo192.png" />
<linkkirel="selvä"href="%PUBLIC_URL%/manifest.json" />
<otsikko>Reaktiosovellusotsikko>
<linkkirel="kuvake"tyyppi="image/x-icon"href="assets/favicon.ico" />


 Font Awesome -kuvakkeet (ilmainen versio)
<käsikirjoitussrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"ristikkäinen alkuperä="anonyymi">käsikirjoitus>


 Google-fontit
<linkkihref=" https://fonts.googleapis.com/css? perhe = Montserrat: 400 700"rel="tyylitaulukko"tyyppi="teksti/css" />
<linkkihref=" https://fonts.googleapis.com/css? perhe=Roboto+laatta: 400,100,300,700"rel="tyylitaulukko"tyyppi="teksti/css" />


 CSS-ydinteema (sisältää Bootstrapin)
<linkkihref="%PUBLIC_URL%/css/styles.css"rel="tyylitaulukko" />
pää>


<kehon>
<noscript>Sinun on otettava JavaScript käyttöön tämän sovelluksen suorittamiseksi.noscript>


<divid="juuri">div>


 Bootstrap-ydin JS
<käsikirjoitussrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">käsikirjoitus>


 Ydinteema JS
<käsikirjoitussrc="%PUBLIC_URL%/js/scripts.js">käsikirjoitus>


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


 * * SB-lomakkeet JS * *


 * * Aktivoi lomake osoitteessa https://startbootstrap.com/solution/contact-forms * *


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


<käsikirjoitussrc=" https://cdn.startbootstrap.com/sb-forms-latest.js">käsikirjoitus>
kehon>
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ä:

tuonti { Selainreititin kuten Reititin, reitit, reitti } alkaen"react-router-dom";
tuonti Navigointi alkaen'./components/Navigation';
tuonti Koti alkaen'./Pages/Home';
tuonti Noin alkaen'./Pages/About';
tuonti Ottaa yhteyttä alkaen'./Pages/Contact'
tuonti Otsikko alkaen"./components/Header";
toimintoSovellus() {
palata (


"Sovellus">










"/" element={} />
"/noin" element={} />
"/ottaa yhteyttä" element={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


viedäoletuksena Sovellus;

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.

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 ainutlaatuiseen malliin.

Nyt voit integroida Bootstrap-mallin React-sovellukseesi. Aloita rakentaminen Bootstrap-malleilla ja nauti kauniista käyttöliittymästä.