React è tra i framework e le librerie JavaScript più popolari per la creazione di applicazioni e interfacce utente a pagina singola. La sua flessibilità nella creazione di interfacce utente utilizzando i suoi componenti riutilizzabili, la velocità di sviluppo e la comunità di supporto sono le ragioni della sua popolarità.
Tuttavia, React deve essere combinato con Cascading Style Sheets (CSS) per rendere le sue app visivamente più accattivanti e presentabili. Scrivere CSS da zero può richiedere molto tempo.
Gli sviluppatori possono dedicare molto tempo a lavorare sullo stile anziché sulle funzionalità chiave di un’app React. La buona notizia è che strumenti e framework come Bootstrap semplificano l’aggiunta di CSS alla tua app React.
Sommario:
Cos’è Bootstrap?
Bootstrap è un framework CSS open source per lo sviluppo front-end. Bootstrap consente agli sviluppatori di creare siti Web responsive e mobile-first attraverso il suo set completo di strumenti e modelli di progettazione basati su JavaScript e CSS.
Bootstrap è stato creato da Twitter ed è gestito anche da un team di ingegneri della stessa azienda. Il suo codice sorgente è mantenuto su GitHub e i membri della comunità possono contribuire e inviare segnalazioni di bug e suggerimenti. Bootstrap 5.3.0-alpha1 è la versione più recente al momento della scrittura.
Perché usare Bootstrap con React?
- Risparmio di tempo: Bootstrap si occupa della formattazione, dandoti più tempo per concentrarti sulla funzionalità. Quindi non devi preoccuparti di problemi come l’aspetto dei tuoi moduli o pulsanti, ma di aree come se il pulsante di invio invia dati al tuo back-end o API.
- Facilità d’uso: dopo aver aggiunto Bootstrap alla tua app React, prendi semplicemente i componenti dell’interfaccia utente pre-progettati e aggiungili alla tua app.
- Design coerente: la maggior parte delle app cresce di dimensioni nel tempo. Garantire un design coerente del tuo sito Web è importante se desideri attirare utenti fedeli. Bootstrap ha uno stile coerente che darà alle tue pagine un aspetto uniforme.
- Tonnellate di modelli tra cui scegliere: Bootstrap ha centinaia di modelli che vanno da barre di navigazione, pulsanti, moduli e caroselli a menu a discesa, per citarne alcuni, tra cui scegliere.
- Facilità di personalizzazione: anche se Bootstrap dispone di modelli di design, puoi sempre personalizzare la dimensione del carattere, il colore e altre funzionalità in base alle tue esigenze.
- Supporto della community: Bootstrap dispone di un’ampia documentazione per iniziare. Tuttavia, puoi ancora contare sulla grande comunità, aggiungendo sempre nuove funzionalità e mantenendo questo framework CSS.
- Design reattivo: dopo aver aggiunto Bootstrap alla tua app React, hai la certezza che la tua app Web sarà reattiva su tutte le dimensioni dello schermo.
Come installare Bootstrap in React
Un’app React non viene fornita con Bootstrap installato per impostazione predefinita. Ma prima di esplorare come aggiungere/installare Bootstrap in React, dobbiamo controllare alcune cose;
Prerequisiti
Usa questo comando per verificare se node.js è installato sul tuo PC:
node -v
Se node.js è installato, avrai un output simile a questo sul tuo terminale.
Versione del nodo
Se non è installato, puoi controllare le istruzioni per il download da https://nodejs.org/en/.
Usa questo comando per verificare se React è installato sul tuo PC:
npm list react
Se React è installato globalmente sulla tua macchina, avrai qualcosa di simile sul tuo terminale.
Reagire versione
- Installa l’app react-create sulla tua macchina. Usando questo comando
npm install -g create-react-app
- Crea la tua app React usando questo comando
npx create-react-app my-app
Puoi sostituire my-app con qualsiasi nome di tua scelta. Per il nostro caso, abbiamo chiamato la nostra app react-b.
Una volta installato, avrai qualcosa di simile sul tuo terminale:
Esegui questi comandi per iniziare
- cd react-b (usa il nome della tua app scelto nel passaggio precedente)
- npm start (questo comando avvia la tua app React)
Ora possiamo andare ai passaggi successivi e aggiungere/installare Bootstrap alla nostra app React:
Metodo bootstrap di installazione NPM
Node.js viene fornito con npm (node package manager) installato per impostazione predefinita.
Puoi controllare la versione del tuo npm tramite questo comando:
npm -v
Se npm è installato, otterrai un out come 9.2.0
Ora puoi installare bootstrap usando questo comando:
npm install bootstrap
Una volta fatto, vai al file ./src/index.js. Aggiungi questa riga in alto.
import ‘bootstrap/dist/css/bootstrap.css’;
Utilizzo di Yarn Package Manager
A differenza di npm, il filato non è installato per impostazione predefinita quando installi node.js.
Installa cantiere usando questo comando;
npm install -g yarn
Questo comando installerà il filato a livello globale, quindi non dovrai più installare il pacchetto ogni volta che crei un’app React.
Esegui questo comando per aggiungere bootstrap a React:
yarn add bootstrap
Una volta fatto, vai al file ./src/index.js. Aggiungi questa riga in alto.
import ‘bootstrap/dist/css/bootstrap.css’;
Dovresti sempre importare Bootstrap nella parte superiore del file di ingresso della tua app prima di altri file CSS. Ciò semplifica la modifica delle voci Bootstrap se è necessario modificare i valori predefiniti dei modelli durante la creazione dell’app React.
Metodo CDN
Utilizzando un collegamento Content Delivery Network (CDN), puoi aggiungere Bootstrap a React. Aggiungendo questo collegamento CDN, includi la libreria Bootstrap alla tua app React senza scaricare e ospitare i file nella cartella del progetto. Segui questi passi.
- Nella cartella principale, vai al file .public/index.html
- Sul tag , aggiungi questo tag
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- Devi aggiungere dipendenze JavaScript alla tua app. Vai al corpo del tuo file index.html e aggiungi questo tag appena prima del tag di chiusura :
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Bootstrap è finalmente installato sulla tua app React.
Utilizzo del pacchetto React Bootstrap
Gli approcci che abbiamo trattato finora sono stati originariamente progettati per i file HTML. Per capirlo meglio, considera questo codice a discesa da Bootstrap:
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div>
Cosa c’è di sbagliato nel codice? Bootstrap, per impostazione predefinita, utilizza la classe per classificare le sue divisioni (DIV). Tuttavia, React utilizza JSX, che utilizza la sintassi camelCase. Devi quindi sostituire la classe con className manualmente.
Per far funzionare quel codice su React, dobbiamo sostituire ogni “classe” con “className”. Il codice finale sarà:
<div className="dropdown"> <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul className="dropdown-menu"> <li><a className="dropdown-item" href="#">Action</a></li> <li><a className="dropdown-item" href="#">Another action</a></li> <li><a className="dropdown-item" href="#">Something else here</a></li> </ul> </div>
Fortunatamente, abbiamo altri due approcci, react-bootstrap e reactstrap, in cui l’intervento manuale non è necessario.
Reagire-bootstrap
React-bootstrap ha veri componenti React costruiti da zero. La libreria è compatibile con il core Bootstrap.
Segui questi passaggi per iniziare con React-bootstrap:
- Installa React-bootstrap con questo comando:
npm install react-bootstrap bootstrap
- Passare al file src/index.js o App.js e aggiungere questa riga prima di altri file CSS
import ‘bootstrap/dist/css/bootstrap.min.css’;
React-bootstrap ti consente di importare un componente specifico anziché l’intera libreria. Ad esempio, se devi importare un pulsante su uno dei tuoi componenti, puoi importarlo come segue;
import { Button } da ‘react-bootstrap’;
Reactstrap
Questa è una libreria di componenti React per Bootstrap. Reactstrap si affida al framework Bootstrap CSS per i suoi stili e temi. Questa libreria importa le classi Bootstrap giuste nella tua app React, permettendoti di avere uno stile coerente dell’app. Inoltre, non è necessario aggiungere i file JavaScript di Bootstrap per attivare la funzionalità.
Segui questi passaggi per aggiungere Reactstrap alla tua app React:
- Installa Reactstrap tramite questo comando:
npm install reactstrap react react-dom
- Importa Bootstrap usando questi comandi:
npm install --save bootstrap
import ‘bootstrap/dist/css/bootstrap.min.css’; (aggiungi questa riga al tuo app.js)
Puoi anche utilizzare l’opzione di collegamento CDN per includere Bootstrap nella tua app. Dopo il primo passaggio, vai alla directory principale e vai al file .public/index.html e aggiungi questa riga al tag
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
Reactstrap ti consente di importare un componente specifico anziché l’intera libreria. Ad esempio, se devi importare un pulsante su uno dei tuoi componenti, puoi importare come;
import { Button } da ‘reactstrap’;
Conclusione
Sopra ci sono alcuni approcci che puoi utilizzare per installare Bootstrap nella tua app React per modellare le tue app web. La scelta dell’approccio di installazione è una questione di preferenza, poiché l’obiettivo finale è lo stesso.
La combinazione di React con Bootstrap ti salva dal dolore di dover tenere traccia di tutti gli stili CSS man mano che la tua app cresce. Disegnare la tua app diventa facile ed efficiente man mano che hai più tempo per concentrarti sulla funzionalità.
Puoi esplorare alcuni motivi per scegliere React Native per lo sviluppo di app mobili.