I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

La creazione di un'interfaccia front-end può essere difficile se non conosci ReactJS. Il framework Bootstrap, insieme ai suoi modelli, lo rende più facile e veloce.

Bootstrap ha modelli a tema che chiunque può personalizzare e pubblicare gratuitamente. Puoi scegliere tra molti modelli prima di scaricarli e utilizzarli nella tua app.

I modelli ti aiutano a creare rapidamente straordinarie interfacce frontend, lasciando più tempo per concentrarti su funzionalità complesse. Puoi conoscere i modelli Bootstrap integrandone uno con un'app ReactJS.

Crea la tua app React

A partire da creazione di un'app ReactJS in una cartella sulla tua macchina. In alternativa, puoi seguire il funzionario Guida alla reazione sulla creazione di una nuova app.

Scarica un modello Bootstrap

Scarica un modello a tua scelta dal Avvia Bootstrap temi o un altro di tua preferenza. Esistono diversi siti con modelli Bootstrap gratuiti online.

instagram viewer

Per questa guida, scarica il tema Bootstrap denominato Agency.

Una volta scaricato, decomprimi il file della cartella per vederne il contenuto. Noterai che hai cartelle denominate risorse, CSS, JS e un file chiamato index.html.

Aggiungi il modello Bootstrap all'app ReactJS

Quindi, copia il contenuto della cartella scaricata nella cartella denominata pubblico nella tua app React. Noterai che ora hai due file index.html. Copia il contenuto del file Bootstrap indice.html file nell'app React indice.html file.

Visualizza modello bootstrap

Dopo aver aggiunto l'HTML Bootstrap all'index.html dell'app, esegui l'app per vedere se l'integrazione ha avuto successo. Usa il seguente comando:

inizio npm

Dovresti vedere il modello nel tuo browser, come illustra l'immagine seguente.

Integra il tema Bootstrap nei componenti dell'app

Per integrare il modello Bootstrap nell'app React, devi copiare le sezioni HTML da index.html a ciascun componente. I componenti ti consentono di scrivere codice per diverse parti dell'app e riutilizzarle. Ciò riduce la ripetizione e organizza anche la struttura della tua app.

Il file index.html ora ha diverse sezioni Navigazione, Chi siamo, Contatti e Piè di pagina. Nella cartella src, crea due cartelle, componenti e pagine. Dividi le sezioni nelle cartelle mostrate di seguito:

I componenti dovrebbero includere quanto segue:

  • Header.jsx: la sezione masthead.
  • Navigation.jsx: la barra di navigazione e il piè di pagina.

La cartella delle pagine avrà quanto segue:

  • AboutUs.jsx: Informazioni su di noi.
  • Home.jsx: sezioni Servizi, Portfolio, Clienti e Team.
  • Contacts.jsx: informazioni di contatto.

Copia l'HTML di ciascuna sezione dal file index.html e aggiungilo a ciascun componente. La sintassi dovrebbe essere così:

importare Reagire da'reagire'
cost Intestazione = () => {
ritorno (




"testa d'albero">
"contenitore">
"masthead-sottotitolo">Benvenuto nel nostro Studio!</div>









"testo intestazione masthead maiuscolo">
 Essoè un piacere conoscerti
 </div>



"btn btn-primario btn-xl testo-maiuscolo" href="#Servizi">
 Dimmi di più
 </a>
 </div>
 </header>
 </div>
 );
};


esportarepredefinito Intestazione

Successivamente, modifica la sintassi dell'HTML nei componenti in JSX. Per farlo automaticamente nell'editor Vscode fare clic su Ctrl + Maiusc + P. Fare clic sull'opzione da HTML a JSX nella finestra che si apre per modificare l'HTML in JSX.

JSX è un'estensione della sintassi di JavaScript. Ti consente di utilizzare una combinazione di HTML e JavaScript per scrivere codice nei componenti. Una volta copiate tutte le sezioni nei componenti, il file index.html rimane con solo i collegamenti e gli script di stile.

Sembrerà così:

html>
<htmllang="it">


<Testa>
<metaset di caratteri="utf-8" />
<collegamentorel="icona"href="%PUBLIC_URL%/favicon.ico" />
<metanome="finestra"contenuto="larghezza=larghezza-dispositivo, scala-iniziale=1" />
<metanome="tema-colore"contenuto="#000000" />
<metanome="descrizione"contenuto="Sito web creato utilizzando l'app create-react"/>
<collegamentorel="icona-mela-touch"href="%PUBLIC_URL%/logo192.png" />
<collegamentorel="manifesto"href="%PUBLIC_URL%/manifest.json" />
<titolo>App Reagiscititolo>
<collegamentorel="icona"tipo="immagine/x-icona"href="assets/favicon.ico" />


 Icone Font Awesome (versione gratuita)
<copionesrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"origine incrociata="anonimo">copione>


 Caratteri Google
<collegamentohref=" https://fonts.googleapis.com/css? famiglia=Montserrat: 400.700"rel="foglio di stile"tipo="testo/css" />
<collegamentohref=" https://fonts.googleapis.com/css? famiglia=Roboto+Lastra: 400,100,300,700"rel="foglio di stile"tipo="testo/css" />


 Tema principale CSS (include Bootstrap)
<collegamentohref="%PUBLIC_URL%/css/styles.css"rel="foglio di stile" />
Testa>


<corpo>
<noscript>Devi abilitare JavaScript per eseguire questa app.noscript>


<divid="radice">div>


 JS di base Bootstrap
<copionesrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">copione>


 Tema principale JS
<copionesrc="%PUBLIC_URL%/js/scripts.js">copione>


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


 * * Moduli SB JS * *


 * * Attiva il tuo modulo a https://startbootstrap.com/solution/contact-forms * *


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


<copionesrc=" https://cdn.startbootstrap.com/sb-forms-latest.js">copione>
corpo>
html>

Crea percorsi per i componenti

Ora che hai i collegamenti, gli script e i componenti nell'app, devi creare percorsi per loro nel file App.js. I percorsi renderanno le pagine sull'App per renderla dinamica.

Per eseguire il rendering delle pagine, installa react-router-dom con il seguente comando:

npm installa react-router-dom

Nel App.js file, importa BrowserRouter come Router, Route e Route dal file libreria react-router-dom. Quindi importa tutti i file componenti E Pagine. Il file dovrebbe essere così:

importare {BrowserRouter COME Router, Percorsi, Percorso } da"reagire-router-dom";
importare Navigazione da'./componenti/Navigazione';
importare Casa da'./Pagine/Home';
importare Di da'./Pagine/Informazioni';
importare Contatto da'./Pagine/Contatto'
importare Intestazione da"./componenti/Intestazione";
funzioneApp() {
ritorno (


"App">










"/" elemento={} />
"/Di" elemento={} />
"/contatto" elemento={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


esportarepredefinito Applicazione;

Dovresti vedere le pagine renderizzate sull'host locale quando navighi nel browser. Simile al modello scaricato, come illustrato di seguito.

Congratulazioni, hai integrato con successo un tema Bootstrap nella tua app React. Ora puoi personalizzare le pagine secondo le tue preferenze.

Perché utilizzare i modelli a tema di Bootstrap?

I modelli Bootstrap aiutano a creare straordinarie interfacce front-end in brevissimo tempo. Ci sono molti temi tra cui scegliere. Tutti i temi sono dell'ultima versione di Bootstrap. Sono inoltre dotati di licenze MIT e sono i design più recenti del settore.

Sebbene i vantaggi siano molti, fare affidamento sui modelli riduce la creatività. È comune trovare un tema popolare utilizzato su altri siti online. Tuttavia, puoi personalizzare un modello con un design unico.

Ora puoi integrare un modello Bootstrap con la tua app React. Inizia a creare con i modelli Bootstrap e goditi le bellissime interfacce front-end.