kasvava suosio yhden sivun sovelluksia viime vuosina on johtanut tulva JavaScript puitteet, kuten Angular, React, Vue.JS, Ember — lista jatkuu. Seurauksena, se ei ole enää tarpeen käyttää DOM-kirjastoa, kuten jQuery, rakentaa web-sovelluksia.
samaan aikaan on syntynyt CSS-kehyksiä, joiden tarkoituksena on auttaa kehittäjiä rakentamaan reagoivia web-sovelluksia., Jos olet frontend-kehittäjä, olet lähes varmasti käyttää, tai ainakin kuullut siitä, Bootstrap, Foundation, ja Bulma, kaikki reagoiva (mobile ensin) CSS-kehysten kanssa tehokkaita ominaisuuksia ja sisäänrakennettu apuohjelmia. Jos Reagoida on eniten käytetty JavaScript puitteet rakentaa web-sovellukset, Bootstrap on suosituin CSS puitteet, virtaa miljoonia verkkosivuja internetissä.,
tässä opetusohjelmassa näytämme, miten käyttää Reagoivat ja Bootstrap, miten lisätä Bootstrap Reagoida app, miten asentaa Reagoida Bootstrap paketteja, kuten react-bootstrap (esimerkkejä), ja lopuksi, miten luoda Reagoida app kanssa Bootstrap.
Jos olet juuri aloittanut nämä kehykset, ehdotan kahlannut läpi virallinen Reagoida ja Bootstrap asiakirjat. Kannustaisin myös katsomaan alla olevan kattavan opetusvideon syvempää sukellusta varten.,
Lisää Bootstrap Reagoida
kolme yleisintä tapaa lisätä Bootstrap oman Reagoida sovellus ovat:
- Käytä BootstrapCDN
- Tuo Bootstrap Reagoivat riippuvuus
- Asentaa Reagoida Bootstrap-paketti (kuten
bootstrap-reacttaireactstrap)
Käyttämällä BootstrapCDN
BootstrapCDN on helpoin tapa lisätä Bootstrap oman Reagoida app. Asennuksia tai latauksia ei tarvita. Yksinkertaisesti laittaa <link> osaksi <head> osiossa app, kuten seuraava katkelma.,
Jos olet kiinnostunut käyttämällä JavaScript-komponentteja, jotka aluksen Bootstrap, sinun täytyy laittaa seuraavat <script> tunnisteet lähellä loppua sivut, juuri ennen sulkevaa </body> – tagin, jotta ne.
kuten näet, Bootstrap 4 vaatii jQueryn ja Popperin.JS sen JavaScript komponentteja. Yllä olevassa pätkässä, käytimme jQueryn slim-versiota, vaikka voit käyttää myös koko versiota.
React-sovelluksellesi nämä koodinpätkät lisätään yleensä sovelluksen etusivulle., Jos käytit create-react-app luoda oman app, sitten public/index.html sivun pitäisi näyttää seuraava pätkä:
Nyt voit aloittaa käyttämällä sisäänrakennettua Bootstrap luokat ja JavaScript-komponentteja oman Reagoida app osia.
Tuo Bootstrap riippuvuus
Jos käytät rakentaa työkalu tai moduuli paalain, kuten webpack, niin tämä on paras vaihtoehto lisätä Bootstrap oman Reagoida sovellus. Sinun täytyy asentaa Bootstrap riippuvuus sovelluksen.,
npm install bootstrap
Tai jos käytät Lanka:
yarn add bootstrap
Kun olet Bootstrap asennettu, mennä eteenpäin ja sisällyttää sen app on merkintä JavaScript-tiedoston. Jos olet tottunut create-react-app, tämän pitäisi olla src/index.js tiedosto.
Huomaa, että olemme tuoneet Bootstrap minified CSS ensimmäisenä riippuvuutta. Tämän avulla voimme mennä eteenpäin käyttämällä sisäänrakennettu Bootstrap luokat meidän React app komponentteja., Kuitenkin, ennen kuin voit käyttää Bootstrap JavaScript-osia app, sinun täytyy asentaa jquery ja popper.js jos ne eivät ole jo asennettu.
npm install jquery popper.js
Seuraavaksi sinun tulee tehdä muita muutoksia src/index.js tiedosto lisätä uusia riippuvuuksia kuten seuraava katkelma.
– Täällä meillä on lisätty tuonti $ ja Popper. Toimme myös Bootstrap JavaScript minified bundle-tiedoston. Nyt voit käyttää Bootstrap JavaScript komponentteja React app.,
Asenna Reagoida Bootstrap paketti
kolmas tapa lisätä Bootstrap Reagoida sovellus on käyttää paketti, joka on uudelleen rakennettu Bootstrap komponentteja, jotka on suunniteltu toimimaan React komponentteja. Kaksi suosituimmat paketit ovat:
react-bootstrapreactstrap
Molemmat paketit ovat suuria valintoja varten käyttäen Bootstrap Reagoida apps vaikka sinun ei välttämättä tarvitse käyttää niitä. Niillä on hyvin samanlaiset ominaisuudet.,
Käyttämällä sisäänrakennettu Bootstrap luokat ja komponentit
Voit käyttää Bootstrap suoraan elementit ja komponentit oman Reagoida app soveltamalla sisäänrakennettu luokkiin aivan kuten mikä tahansa muu luokka. Rakennetaan Yksinkertainen teema vaihtaja reagoida komponentti osoittaa Bootstrap luokat ja komponentit.,
Kuten on esitetty demo, käytämme avattavasta komponentti saatavilla Bootstrap toteuttaa meidän teema vaihtaja. Käytämme myös sisäänrakennettuja nappiluokkia laskupainikkeen koon ja värin määrittämiseen.
menemme eteenpäin kirjoittamaan koodin meidän ThemeSwitcher komponentti. Varmista, että sinulla on jo React-sovellus., Luo uusi tiedosto komponentti ja lisää seuraava koodin pätkä siitä:
– Täällä meillä on rakennettu hyvin yksinkertainen teema vaihtaja komponentti hyödyntämällä Bootstrap avattavasta osa ja pari on sisäänrakennettu luokissa. Voit oppia lisää Bootstrap dropdown käytöstä täällä.
Ensinnäkin, me määrittää komponentti on valtio, jossa theme omaisuutta ja alustetaan se null., Seuraavaksi määritellään kaksi napsauta tapahtuman käsittelijät resetTheme() ja chooseTheme() komponentti, luokka valitsemalla teema ja nollaus teema vastaavasti.
render() menetelmä, olemme tehdä split-painiketta pudotusvalikosta, joka sisältää kolme teemaa. nimittäin: Primary, Danger ja Success. Jokainen valikkokohta on liitetty klikkaustapahtumien käsittelijään sopivaa toimintaa varten. Huomaa, miten käytämme theme.toLowerCase() saada teema väri luokan sekä pudotusvalikosta painikkeet ja teksti., Oletamme käyttävämme secondary teemavärinä, jos teemaa ei ole asetettu.
tässä esimerkissä olemme nähneet, kuinka helppoa on käyttää Bootstrapin sisäänrakennettuja luokkia ja komponentteja React-sovelluksessamme. Tarkista Bootstrap-dokumentaatio saadaksesi lisätietoa sisäänrakennetuista luokista ja komponenteista.
react-bootstrap esimerkki
Nyt meillä on rakentaa meidän teema vaihtaja käyttäen react-bootstrap. Käytämme create-react-app komentorivityökalua sovelluksen luomiseen. Varmista, että koneeseesi on asennettu create-react-app – työkalu.,
Luo uusi Reagoida app käyttäen create-react-app seuraavasti:
create-react-app react-bootstrap-app
Seuraava, mennä eteenpäin ja asentaa riippuvuudet seuraavasti:
yarn add bootstrap@3 react-bootstrap
react-bootstrap tällä hetkellä tavoitteet Bootstrap v3. Bootstrap v4-tuen tarjoaminen on kuitenkin käynnissä aktiivisesti.
Luo uusi tiedosto nimeltä ThemeSwitcher.js src directory-projektin ja laittaa seuraavat sisältöä se.
tässä olemme yrittäneet matkia alkuperäistä esimerkkiämme mahdollisimman paljon käyttäen react-bootstrap., Tuomme kaksi osat react-bootstrap paketti, eli SplitButton ja MenuItem. Katso lisätietoja react-bootstrap Dropdown dokumentaatiosta.
Ensinnäkin, me määrittää komponentti on valtio, jossa theme omaisuutta ja alustetaan se null. Seuraavaksi määrittelemme chooseTheme() klikataan tapahtumakäsittelijä teeman valitsemiseksi tai teeman nollaamiseksi.
koska käytössä on Bootstrap 3.3.,7, olemme luoneet joitakin kontti tyylejä render() menetelmä auttaa meitä saavuttamaan vaaka-ja pystysuuntainen keskitys.
Huomaa, miten me määrittää painikkeen koon SplitButton component käyttäen bsSize prop. Myös, huomaa, miten olemme kulkee themeClass ja bsStyle prop dynaamisesti muuttaa painikkeen värin perusteella valtion on teema.
ohitamme teema nimi eventKey prop kunkin MenuItem komponentti., Asetimme myös onSelect käsittelijän this.chooseTheme(), jonka määrittelimme aiemmin. MenuItem komponentti kulkee eventKey ja event itsensä onSelect handler seuraavasti:
(eventKey: any, event: Object) => any
Lopulta, meidän tulee muuttaa src/index.js tiedosto näyttää seuraavalta pätkä:
– Täällä meillä on ensimmäinen tuoda Bootstrap on minified CSS-tiedostoja. Tuomme myös ThemeSwitcher – komponenttimme ja renderoimme sen DOM: lle.,
Jos olet ajaa app nyt komennolla yarn start tai npm start. App pitäisi alkaa port 3000 ja pitäisi näyttää seuraavat demo:
react-bootstrap demo. reactstrap esimerkki
Meidän tulee mennä eteenpäin ja rakentaa meidän teema vaihtaja käyttäen reactstrap tällä kertaa., Käytämme create-react-app komentorivityökalua sovelluksen luomiseen. Varmista, että koneeseesi on asennettu create-react-app – työkalu.
Luo uusi Reagoida app käyttäen create-react-app seuraavasti:
create-react-app reactstrap-app
Seuraava, mennä eteenpäin ja asentaa riippuvuudet seuraavasti:
yarn add bootstrap reactstra
Luo uusi tiedosto nimeltä ThemeSwitcher.js src directory-projektin ja laittaa seuraavat sisältö:
– Täällä meillä on uudelleen meidän ensimmäinen esimerkki käyttäen reactstrap., Tuomme pari osat reactstrap. Katso lisätietoja reactstrap – painikkeen Pudotusdokumentaatiosta.
Ensinnäkin, me määrittää komponentti on valtio, jossa on kaksi ominaisuuksia:
-
themekiinteistön alustetaannull -
dropdownOpenalustetaanfalse. Tätä ominaisuutta käytetäänButtonDropdownosan vuodestareactstrapsäilyttää vaihda tila-pudotusvalikosta.,
– Meillä on myös määritellä toggleDropdown() tapa vaihtaa avoin tila pudotusvalikosta. Tätä käytetään myös – komponentissa.reactstrap tarjoaa myös hallitsematon komponentti UncontrolledButtonDropdown, joka ei vaadi isOpen prop tai toggle handler prop töihin. Useimmissa tapauksissa tätä voidaan käyttää sijasta.
jokainen pudotusvalikon kohde käännetään käyttäen DropdownItem – komponenttia., Huomaa, miten me määrittää painikkeen koon DropdownToggle component käyttäen size prop. Huomaa myös, miten olemme kulkee themeClass ja color potkuri sekä Button ja DropdownToggle komponentteja dynaamisesti muuttaa painikkeen värin perusteella valtion on teema.
myös asettaa onClick handler kummallakin DropdownItem juuri kuten teimme ennen, käyttämällä chooseTheme() ja resetTheme() handlers määrittelimme aiemmin.,
Lopuksi, meidän tulee muuttaa src/index.js tiedosto näyttää seuraavalta pätkä:
– Täällä meillä on ensimmäinen tuoda Bootstrap minified CSS-tiedostoa. Tuomme myös ThemeSwitcher – komponenttimme ja renderoimme sen DOM: lle.
Jos olet ajaa app nyt komennolla yarn start tai npm start., App pitäisi alkaa port 3000 ja pitäisi näyttää seuraavat demo:
Luo Reagoida app, Bootstrap
Katsotaanpa push tätä vähän eteenpäin, luoda sovellus, jossa on hieman enemmän yksityiskohtia. Pyrimme käyttämään mahdollisimman paljon Bootstrap-luokkia ja komponentteja. Käytämme myös reactstrap integroida Bootstrap kanssa Reagoivat, koska se tukee Bootstrap 4.,
käytämme create-react-app komentorivityökalua sovelluksen luomiseen. Varmista, että koneeseesi on asennettu create-react-app – työkalu. Tässä on kuvakaappaus siitä, mitä luomme.,
Luo uusi Reagoida app käyttäen create-react-app seuraavasti:
create-react-app sample-app
Seuraava, mennä eteenpäin ja asentaa riippuvuudet seuraavasti:
yarn add axios bootstrap reactstrap
Huomaa täällä, että me asentaa axios riippuvuus. Axios on selaimen ja solmun lupauksiin perustuva HTTP-asiakasohjelma.js. Sen avulla voimme noutaa viestejä BaconIpsum JSON API.,
Tee pieni muutos src/index.js tiedosto sisältää Bootstrap minified CSS-tiedostoa. Sen pitäisi näyttää seuraava pätkä:
Luo uuden hakemiston nimeltä components src directory of teidän projekti. Luo uusi tiedosto, Header.js juuri luotu components hakemiston sisältö on seuraava:
komponentti, me juuri luonut tässä pätkä on Header komponentti, joka sisältää navigointivalikko., Seuraavaksi aiomme luoda uuden tiedoston nimeltä SideCard.js components hakemiston sisältö on seuraava:
Seuraava, luo uusi tiedosto nimeltä Post.js components hakemisto ja lisää seuraava koodin pätkä siitä:
– Täällä meillä on luonut Post komponentti, joka tekee post sivulla. Me alustaa valtion komponentti post ominaisuus on asetettu arvoon null., Kun komponentti kiinnikkeet, käytämme axios hakemaan satunnainen lähettää neljä kappaletta alkaen BaconIpsum JSON API ja päivittää post omaisuutta valtion.
Lopuksi, muuttaa src/App.js tiedosto näyttää seuraavalta pätkä:
Täällä me yksinkertaisesti ovat Header, SideCard ja Post osat App komponentti. Huomaa, miten käytämme Bootstrapin tarjoamia responsiivisia hyötyluokkia mukauttaaksemme sovelluksemme erilaisiin näytön kokoihin.,
Jos olet ajaa app nyt komennolla yarn start tai npm start, app pitäisi alkaa portissa 3000, ja sen pitäisi näyttää täsmälleen samalta kuin kuvakaappaus näimme aiemmin.
Johtopäätös
tässä opetusohjelmassa, me tutkia muutamia eri tapoja, joilla voimme integroida Bootstrap meidän Reagoida apps. Olemme myös nähneet, kuinka voimme käyttää kahta suosituinta Reagoida Bootstrap kirjastot, eli react-bootstrap ja reactstrap.,
tässä opetusohjelmassa on käytetty vain muutamia Bootstrap-komponentteja, kuten alert, badge, dropdown, navbar, nav, form, button, card, jne. Siellä on vielä pari Bootstrap osia voit kokeilla, kuten taulukoita, modals, vihjeet, karuselli, jumbotron, sivunumerointi, välilehdet, jne.
voit tarkistaa tässä opetussuunnitelmassa käyttämiemme pakettien dokumentoinnin saadaksesi selville, miten niitä voidaan käyttää. Kaikkien tämän opetusohjelman demosovellusten lähdekoodi löytyy GitHubista.,
Täysi näkyvyys tuotantoon Reagoivat sovellukset
Debugging Reagoida sovelluksia voi olla vaikeaa, varsinkin, kun käyttäjät kokea asioita, joita on vaikea kopioida. Jos olet kiinnostunut seuranta ja seuranta Redux valtion, automaattisesti pintaan JavaScript virheitä, ja seuranta hidas verkon pyyntöjä ja component kuorma kerralla LogRocket. 
LogRocket on kuin DVR web-sovellukset, tallennus kirjaimellisesti kaikkea, mikä tapahtuu Reagoida app., Sen sijaan arvailla, miksi ongelmia tapahtuu, voit koota ja raportoida, missä tilassa hakemuksesi oli, kun ongelma tapahtui. LogRocket myös valvoo sovelluksen suorituskykyä, raportointi mittareilla, kuten asiakkaan suorittimen kuormitus, asiakkaan muistin käyttö ja paljon muuta.
LogRocket Redux middleware-paketti lisää ylimääräisen kerroksen näkyvyyden käyttäjän istuntoja. LogRocket kirjaa kaikki toiminnot ja tilan Redux-myymälöistäsi.
modernisoi miten debug React — Sovellukset-Aloita seuranta ilmaiseksi.