Come integrare un modello di tema Bootstrap con un’app React

2023/01/14

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

Inizia creando un’app ReactJS in una cartella sul tuo computer. In alternativa, puoi seguire la guida ufficiale di React sulla creazione di una nuova app.

Scarica un modello Bootstrap

Scarica un modello di tua scelta dal sito Web dei temi Start Bootstrap o un altro di tua preferenza. Esistono diversi siti con modelli Bootstrap gratuiti online.

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

Successivamente, copia il contenuto della cartella scaricata nella cartella denominata public nella tua app React. Noterai che ora hai due file index.html. Copia il contenuto del file index.html di Bootstrap nel file index.html dell’app React .

interfaccia dell'app di reazione con modello di bootstrap

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:

npm start

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

il modello di bootstrap viene visualizzato sull'app di reazione

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

import React from 'react'

const Header = () => { return ( <div> <header className="masthead"> <div className="container"> <div className="masthead-subheading">Welcome To Our Studio!</div>


            <div className="masthead-heading text-uppercase">
              It's Nice To Meet You
            </div>
            <a className="btn btn-primary btn-xl text-uppercase" href="#services">
              Tell Me More
            </a>
          </div>
        </header>
      </div>
    );
};
export default Header

Successivamente, modifica la sintassi dell’HTML nei componenti in JSX. Per farlo automaticamente nell’editor Vscode fai clic su Ctrl + Maiusc + P. Fai clic sull’opzione HTML in JSX nella finestra che si apre, per cambiare 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ì:

<!DOCTYPE html>

<html lang="en">


<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
    <!-- Font Awesome icons (free version)-->
    <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
    <!-- Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="%PUBLIC_URL%/css/styles.css" rel="stylesheet" />
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!-- Bootstrap core JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Core theme JS-->
    <script src="%PUBLIC_URL%/js/scripts.js"></script>
    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
    <!-- * * SB Forms JS * *-->
    <!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
    <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>

</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 install react-router-dom

Nel file App.js , importa BrowserRouter come router, route e route dalla libreria react-router-dom. Quindi importa tutti i componenti e le pagine . Il file dovrebbe essere così:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Navigation from './components/Navigation'; import Home from './Pages/Home'; import About from './Pages/About'; import Contact from './Pages/Contact' import Header from "./components/Header";

function App() { return ( <div className="App"> <Header /> <Home /> <About /> <Contact/>


        <Router>
          <Navigation>
            <Routes>
              <Route exact path="/" element={<Home />} />
              <Route exact path="/about" element={<About />} />
              <Route exact path="/contact" element={<Contact />} />
            </Routes>
          </Navigation>
        </Router>
      </div>
    );
}
export default App;

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

modello bootstrap integrato in un browser web

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.