INDICE

Cerca nel sito

Cerca inserendo le parole chiave di tuo interesse. Puoi cercare tra centinaia di articoli e decine di pagine informative sul mondo web e blockchain.

Cosa è Bootstrap

Per concludere Il discorso paginazione e struttura della web app React, ci rimane da affrontare la questione inerente l’uso di Bootstrap.
Bootstrap è una libreria, cioè un insieme di file di codice, nello specifico un insieme di codice CSS e javascript.
Mettendo nel nostro progetto tale libreria, nel momento in cui utilizzeremo determinate classi nei nostri div, si applicherà il CSS e il javascript di Bootstrap appunto.

 

Installazione di Bootstrap

Anzitutto quindi, dovremo installare la libreria di Bootstrap nel nostro progetto React. Per farlo sarà sufficiente eseguire nel terminale, il comando:

npm install boostrap

A volte però, tale comando installa una versione vecchia di Bootstrap, quindi consigliamo il comando:

npm install react-bootstrap bootstrap@5.1.3

che installa la versione specificata della libreria.
Infine consigliamo anche di installare la libreria javascript di Bootstrap, per far funzionare alcuni elementi come ad esempio la dropdown nel menu:

npm i --save bootstrap jquery popper.js

 

Uso di Bootstrap

Adesso occorre inserire il codice html nel nostro codice, che richiami le librerie di Bootstrap attraverso l’uso delle classi html.
Per reperire il codice html compatibile con Bootstrap, rechiamoci sul sito: https://getbootstrap.com
Recati in alto sulla voce a menu “Docs”, e poi vai in “Components->Navbar”.
Prendi il codice mostrato, riadattalo per JSX, e inseriscilo nella tua web app.
Riguardo le regole di JSX, puoi vedere l’articolo relativo.

Pertanto, nel return del component Layout.js, inseriremo dapprima il riferimento alle librerie di Bootstrap.

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';

E successivamente, il codice html del menu del sito:

<nav className="navbar navbar-expand-lg bg-body-tertiary">
          <div className="container-fluid">
              <a className="navbar-brand" href="#"><img className="logoMenu" src="img/logo-doagency.png" /></a>
              <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span className="navbar-toggler-icon"></span>
              </button>
              <div className="collapse navbar-collapse" id="navbarSupportedContent">
              <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                  <li className="nav-item">
                  <a className="nav-link active" aria-current="page" href="/">Home</a>
                  </li>
                  <li className="nav-item">
                  <a className="nav-link" href="#">Estetica</a>
                  </li>
                  <li className="nav-item dropdown">
                  <a className="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Tipi di component
                  </a>
                  <ul className="dropdown-menu">
                      <li><a className="dropdown-item" href="/action">Function component</a></li>
                      <li><hr className="dropdown-divider" /></li>
                      <li><a className="dropdown-item" href="#">class component</a></li>
                  </ul>
                  </li>
                  <li className="nav-item">
                  <a className="nav-link disabled">Pagina disabilitata</a>
                  </li>
              </ul>
              <form className="d-flex" role="search">
                  <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
                  <button className="btn btn-outline-success" type="submit">Search</button>
              </form>
              </div>
          </div>
      </nav>

Se vogliamo aggiungere del CSS personalizzato al menu, aggiungeremo il CSS nel seguente modo, inserendo questo import in Layout.css:

import '../style/Menu.css';

A questo punto, il menu che vedremo a schermo, dovrebbe avere questo aspetto:

menu webapp react

Repository del progetto in progress su GitHub: https://github.com/DoAgency/ReactJs

Servizi di sviluppo IT che forniamo sia ai clienti finali, sia alle altre aziende di sviluppo in subappalto in white label