La crescente popolarità delle applicazioni a pagina singola negli ultimi anni ha portato a un afflusso di framework JavaScript, tra cui Angular, React, Vue.js, Ember – la lista continua. Di conseguenza, non è più necessario utilizzare una libreria DOM, come jQuery, per creare app Web.
Questo ha coinciso con l’emergere di framework CSS progettati per aiutare gli sviluppatori a creare applicazioni web reattive., Se sei uno sviluppatore di frontend, hai quasi certamente usato o almeno sentito parlare di Bootstrap, Foundation e Bulma, tutti i framework CSS responsive (mobile-first) con funzionalità robuste e utilità integrate. Se React è il framework JavaScript più utilizzato per la creazione di applicazioni Web, Bootstrap è il framework CSS più popolare, che alimenta milioni di siti Web su Internet.,
In questo tutorial, ti mostreremo come usare React e Bootstrap, come aggiungere Bootstrap a un’app React, come installare i pacchetti React Bootstrap come react-bootstrap (con esempi) e, infine, come creare un’app React con Bootstrap.
Se hai appena iniziato con questi framework, suggerirei di sfogliare la documentazione ufficiale di React e Bootstrap. Ti incoraggio anche a guardare il video tutorial completo qui sotto per un’immersione più profonda.,
Aggiungi Bootstrap di Reagire
I tre modi più comuni per aggiungere Bootstrap per il vostro Reagire app sono:
- Utilizzare BootstrapCDN
- Importa Bootstrap, Reagiscono come una dipendenza
- Installare un Reagire Bootstrap pacchetto (ad esempio
bootstrap-reactoreactstrap)
Utilizzando BootstrapCDN
BootstrapCDN è il modo più semplice per aggiungere Bootstrap per il vostro Reagire app. Non sono richieste installazioni o download. Metti semplicemente un <link>nella sezione<head> della tua app, come mostrato nel seguente frammento.,
Se sei interessato a utilizzare i componenti JavaScript forniti con Bootstrap, devi posizionare i seguenti tag<script>vicino alla fine delle tue pagine, subito prima della chiusura</body> tag, per abilitarli.
Come puoi vedere, Bootstrap 4 richiede jQuery e Popper.js per i suoi componenti JavaScript. Nel frammento di cui sopra, abbiamo usato la versione slim di jQuery, anche se è possibile utilizzare anche la versione completa.
Per la tua app React, questi frammenti di codice verranno solitamente aggiunti alla pagina indice della tua app., Se hai usatocreate-react-app per creare la tua app, la tua paginapublic/index.html dovrebbe apparire come il seguente snippet:
Ora puoi iniziare a utilizzare le classi Bootstrap integrate e i componenti JavaScript nei componenti dell’app React.
Importa Bootstrap come dipendenza
Se stai usando uno strumento di compilazione o un bundler di moduli come webpack, questa è l’opzione preferita per aggiungere Bootstrap all’applicazione React. Dovrai installare Bootstrap come dipendenza per la tua app.,
npm install bootstrap
O se stai usando Yarn:
yarn add bootstrap
Una volta installato Bootstrap, vai avanti e includilo nel file JavaScript della voce della tua app. Se sei abituato a create-react-app, questo dovrebbe essere il tuo src/index.js file.
Si noti che abbiamo importato il CSS minificato Bootstrap come prima dipendenza. Con questo, possiamo andare avanti usando le classi Bootstrap integrate nei nostri componenti dell’app React., Tuttavia, prima di poter utilizzare i componenti JavaScript di Bootstrap nella tua app, dovrai installare jquery e popper.js se non sono già installati.
npm install jquery popper.js
Successivamente, verranno apportate ulteriori modifiche al file src/index.js per aggiungere le nuove dipendenze come mostrato nel frammento seguente.
Qui abbiamo aggiunto le importazioni per $ e Popper. Abbiamo anche importato il Bootstrap JavaScript minified bundle file. Ora puoi utilizzare i componenti JavaScript Bootstrap nella tua app React.,
Installa un pacchetto React Bootstrap
Il terzo modo per aggiungere Bootstrap a un’app React consiste nell’utilizzare un pacchetto che ha ricostruito componenti Bootstrap progettati per funzionare come componenti React. I due pacchetti più popolari sono:
react-bootstrap-
reactstrap
Entrambi i pacchetti sono ottime scelte per l’utilizzo di Bootstrap con le app React, anche se non è necessariamente necessario utilizzare nessuno di essi. Condividono caratteristiche molto simili.,
Utilizzo di classi e componenti Bootstrap incorporati
È possibile utilizzare Bootstrap direttamente su elementi e componenti nell’app React applicando le classi integrate come qualsiasi altra classe. Costruiamo un semplice componente React theme switcher per dimostrare l’utilizzo di classi e componenti Bootstrap.,
Come mostrato in questa demo stiamo utilizzando un menu a tendina componente disponibile in Bootstrap per implementare il nostro tema switcher. Usiamo anche le classi di pulsanti integrate per impostare la dimensione e il colore del pulsante a discesa.
Andremo avanti per scrivere il codice per il nostro componente ThemeSwitcher. Assicurarsi di avere un’applicazione React già impostata., Creare un nuovo file per il componente e aggiungere il seguente frammento di codice ad esso:
Qui abbiamo costruito un componente molto semplice tema switcher sfruttando componente a discesa di Bootstrap e un paio di classi built-in. Puoi saperne di più sull’utilizzo del menu a discesa Bootstrap qui.
Per prima cosa, impostiamo lo stato del componente con una proprietà theme e lo inizializziamo in null., Successivamente, abbiamo definito due gestori di eventi click resetTheme()e chooseTheme() sulla classe component per scegliere un tema e reimpostare il tema rispettivamente.
Nel metodorender(), rendiamo un menu a discesa con pulsante diviso contenente tre temi. vale a dire: Primary, Danger, e Success. Ogni voce di menu è collegata a un gestore di eventi click per l’azione appropriata. Si noti come usiamo theme.toLowerCase() per ottenere la classe di colore del tema sia per i pulsanti a discesa che per il testo., Di default usiamo secondary come colore del tema se non è impostato alcun tema.
In questo esempio, abbiamo visto quanto sia facile usare le classi e i componenti incorporati di Bootstrap nella nostra app React. Controllare la documentazione di Bootstrap per ulteriori informazioni sulle classi e sui componenti incorporati.
react-bootstrap esempio
Ora, ricostruiremo il nostro commutatore di temi usando react-bootstrap. Useremo lo strumento da riga di comandocreate-react-app per creare la nostra app. Assicurarsi di avere lo strumentocreate-react-app installato sulla macchina.,
Creare una nuova Reagire app utilizzando il create-react-app come segue:
create-react-app react-bootstrap-app
quindi, andare avanti e installare le dipendenze come segue:
yarn add bootstrap@3 react-bootstrap
react-bootstrap obiettivi attualmente Bootstrap v3. Tuttavia, il lavoro è attivamente in corso per fornire supporto Bootstrap v4.
Crea un nuovo file chiamatoThemeSwitcher.js nella directorysrc del tuo progetto e inserisci il seguente contenuto.
Qui abbiamo cercato di imitare il nostro esempio iniziale il più possibile usandoreact-bootstrap., Importiamo due componenti dal pacchettoreact-bootstrap, ovveroSplitButton eMenuItem. Vedere la documentazione a discesareact-bootstrap per ulteriori informazioni.
Per prima cosa, impostiamo lo stato del componente con una proprietà theme e lo inizializziamo in null. Successivamente, definiamo unchooseTheme() fare clic su event handler per scegliere un tema o reimpostare il tema.
Dal momento che stiamo usando Bootstrap 3.3.,7, abbiamo creato alcuni stili di contenitore nel metodorender() per aiutarci a raggiungere il centraggio orizzontale e verticale.
Si noti come si specifica la dimensione del pulsante sul componenteSplitButton utilizzando il propbsSize. Inoltre, si noti come stiamo passando ilthemeClass albsStyle prop per cambiare dinamicamente il colore del pulsante in base al tema dello stato.
Passiamo il nome del tema aleventKey prop di ogni componenteMenuItem., Abbiamo anche impostato il gestoreonSelect suthis.chooseTheme(), che abbiamo definito in precedenza. MenuItem componente passa il eventKey e event stesso per il onSelect gestore come segue:
(eventKey: any, event: Object) => any
Infine, andremo a modificare il src/index.js file a guardare come il frammento di codice seguente:
Qui, in primo luogo l’importazione di Bootstrap del minified file CSS. Importiamo anche il nostro componenteThemeSwitcher e lo rendiamo al DOM.,
Se si esegue l’applicazione ora con il comando yarn start o npm start. L’app deve iniziare sulla porta 3000 e di come dovrebbe apparire la seguente demo:
react-bootstrap demo.
reactstrap esempio
Andremo avanti e ricostruire il nostro switcher tema utilizzandoreactstrap questa volta., Useremo lo strumento da riga di comandocreate-react-app per creare la nostra app. Assicurarsi di avere lo strumentocreate-react-app installato sulla macchina.
Creare una nuova Reagire app utilizzando il create-react-app come segue:
create-react-app reactstrap-app
quindi, andare avanti e installare le dipendenze come segue:
yarn add bootstrap reactstra
Creare un nuovo file denominato ThemeSwitcher.js nel src cartella del vostro progetto e inserire il seguente contenuto in essa:
Qui abbiamo ricostruito il nostro esempio iniziale utilizzando reactstrap., Importiamo un paio di componenti da reactstrap. Vedere la documentazione a discesa del pulsantereactstrap per ulteriori informazioni.
Per prima cosa, impostiamo lo stato del componente con due proprietà:
-
themeproprietà inizializzata anull -
dropdownOpeninizializzata afalse. Questa proprietà verrà utilizzata nel componenteButtonDropdowndareactstrapper mantenere lo stato di commutazione del menu a discesa.,
Definiamo anche un metodotoggleDropdown() per attivare o disattivare lo stato aperto del menu a discesa. Questo verrà utilizzato anche nel componenteButtonDropdown.reactstrapfornisce anche un componente non controllato UncontrolledButtonDropdownche non richiede il isOpenprop o il toggle prop gestore per funzionare. Nella maggior parte dei casi, questo può essere usato invece di usare ButtonDropdown.
Ogni elemento del menu a discesa viene visualizzato utilizzando il componenteDropdownItem., Si noti come si specifica la dimensione del pulsante sul componenteDropdownToggle utilizzando il propsize. Si noti inoltre come stiamo passando ilthemeClass alcolor prop su entrambi i componentiButton eDropdownToggle per cambiare dinamicamente il colore del pulsante in base al tema dello stato.
anche onClick gestore in ogni DropdownItem proprio come abbiamo fatto prima, utilizzando il chooseTheme() e resetTheme() gestori abbiamo definito in precedenza.,
Infine, modificheremo il filesrc/index.js per assomigliare al seguente snippet:
Qui, importiamo prima il file CSS minificato Bootstrap. Importiamo anche il nostro componenteThemeSwitcher e lo rendiamo al DOM.
Se si esegue l’applicazione ora con il comando yarn start o npm start., L’app deve iniziare sulla porta 3000 e di come dovrebbe apparire la seguente demo:
Creare un Reagire app con Bootstrap
Proviamo a spingere un pochino di più questa per creare un’app con qualche dettaglio in più. Cercheremo di utilizzare il maggior numero possibile di classi e componenti Bootstrap. Useremo anche reactstrap per integrare Bootstrap con React, poiché supporta Bootstrap 4.,
Useremo lo strumento da riga di comando create-react-app per creare la nostra app. Assicurarsi di avere lo strumentocreate-react-app installato sulla macchina. Ecco uno screenshot di ciò che creeremo.,
Creare una nuova Reagire app utilizzando il create-react-app come segue:
create-react-app sample-app
quindi, andare avanti e installare le dipendenze come segue:
yarn add axios bootstrap reactstrap
si Noti qui che si installa axios come una dipendenza. Axios è un client HTTP basato su promesse per il browser e il Nodo.js. Ci consentirà di recuperare i post dall’API JSON BaconIpsum.,
Apportare una piccola modifica al filesrc/index.js per includere il file CSS minimizzato Bootstrap. Dovrebbe apparire come il seguente frammento:
Crea una nuova directory denominatacomponents nella directorysrc del tuo progetto. Crea un nuovo file, Header.js, nella directory appena creata components con il seguente contenuto:
Il componente appena creato in questo snippet è il Header che contiene il menu di navigazione., A quel punto, andremo a creare un nuovo file denominato SideCard.js nel components directory con il seguente contenuto:
creare un nuovo file denominato Post.js nel components directory e aggiungere il seguente frammento di codice è:
Qui abbiamo creato un Post componente che esegue il rendering di un post sulla pagina. Inizializziamo lo stato del componente con una proprietàpost impostata sunull., Quando il componente viene montato, usiamo axiosper recuperare un post casuale di quattro paragrafi dall’API JSON BaconIpsum e aggiornare la proprietàpost nello stato.
Infine, modificare il src/App.js file a guardare come il frammento di codice seguente:
Qui abbiamo semplicemente includere il Header SideCard e Post componenti App componente. Si noti come utilizziamo un paio di classi di utilità reattive fornite da Bootstrap per adattare la nostra app a diverse dimensioni dello schermo.,
Se esegui l’app ora con il comando yarn start o npm start, la tua app dovrebbe iniziare sulla porta 3000 e dovrebbe apparire esattamente come lo screenshot che abbiamo visto in precedenza.
Conclusione
In questo tutorial, abbiamo esplorato alcuni modi diversi in cui possiamo integrare Bootstrap con le nostre applicazioni React. Abbiamo anche visto come possiamo usare due delle più popolari librerie React Bootstrap ,ovveroreact-bootstrap ereactstrap.,
In questo tutorial abbiamo utilizzato solo alcuni componenti di Bootstrap, come alert, badge, dropdown, navbar, nav, form, button, card, ecc. C’è ancora un paio di componenti Bootstrap che puoi sperimentare, come tabelle, modali, tooltip, carosello, jumbotron, impaginazione, schede, ecc.
Puoi controllare la documentazione dei pacchetti che abbiamo usato in questo tutorial per scoprire altri modi in cui possono essere usati. Il codice sorgente per tutte le applicazioni demo in questo tutorial può essere trovato su GitHub.,
La piena visibilità delle applicazioni Production React
Il debug delle applicazioni React può essere difficile, specialmente quando gli utenti riscontrano problemi difficili da riprodurre. Se sei interessato al monitoraggio e al monitoraggio dello stato di Redux, alla visualizzazione automatica degli errori JavaScript e al monitoraggio delle richieste di rete lente e del tempo di caricamento dei componenti, prova LogRocket. 
LogRocket è come un DVR per le app web, registrando letteralmente tutto ciò che accade sull’app React., Invece di indovinare perché si verificano problemi, è possibile aggregare e riferire in quale stato si trovava l’applicazione quando si è verificato un problema. LogRocket monitora anche le prestazioni della tua app, riportando metriche come il carico della CPU del client, l’utilizzo della memoria del client e altro ancora.
Il pacchetto middleware LogRocket Redux aggiunge un ulteriore livello di visibilità alle sessioni utente. LogRocket registra tutte le azioni e lo stato dai tuoi negozi Redux.
Modernizza il modo in cui esegui il debug delle tue app React — avvia il monitoraggio gratuitamente.