In questo articolo si va avanti con la creazione dell’header ReactJS. Nella scorsa lezione, ReactJS: Creazione della prima pagina web, abbiamo impostato il nostro progetto. Ora è il momento di iniziare ad abbellire queste pagine partendo dall’intestazione.

Se è la prima volta che ti imbatti in questa guida e non sai nulla ancora su ReactJS ti consiglio di partire da questo articolo: impara ReactJS.

Header ReactJS

Il risultato che vogliamo ottenere al momento è questo:

Per ottenerlo è necessario prima di tutto che hai seguito la scorsa lezione sulla creazione della prima pagina web. In questo modo hai Bootstrap incluso nel progetto.

Dunque esegui in ordine questi passi:

1. Scarica l’icona a questo indirizzo in formato png
2. Crea la cartella images all’interno di src
3. Incolla dentro alla cartella images l’icona dandole come nome notebook.png
4. Apri la cartella css
5. All’interno di css crea la cartella mainLayout
6. All’interno di mainLayout crea la cartella header
7. All’interno di header crea il file header.css

CSS Header

Apri il file header.css appena creato ed inserisci queste semplici regole CSS:

.logo-image {
  width: 35px;
  height: 35px;
}
.nav-item.nav-link {
  font-weight: 700;
}

Il primo selettore sulla classe logo-image ci permette di dare una dimensione all’icona. Ti ricordo che spesso la cosa migliore da fare è avere immagini delle dimensioni corrette ed utilizzare più immagini differenti a seconda del dispositivo che raggiunge la pagina web. In questo caso però il discorso si sarebbe presto perso in troppe chiacchiere che al momento possiamo evitare.

Dunque il secondo selettore indica un elemento che ha entrambe le classi nav-item e nav-link e stiamo dando al testo un peso maggiore (diventa grassetto).

JS Header

Apri il file header.js che avevi creato nella lezione precedente. Si trova all’interno dei componenti del layout principale:

Dunque adesso dovremo importare il logo ed il css per poi utilizzarli nel metodo di render. Nel file header.js posizionati in alto dopo l’import di react ed inserisci:

import headerCss from "../../../css/mainLayout/header/header.css";

import Logo from "../../../images/notebook.png";

Dunque elimina il <div> già presente nel metodo render ed inserisci questo contenuto:

<div>
   <nav className="navbar navbar-expand-lg navbar-light bg-success">
      <a className="navbar-brand" href="#">
         <img src={Logo} className = "logo-image"/>
      </a>
      <button 
         className="navbar-toggler" 
         type="button" 
         data-toggle="collapse" 
         data-target="#navbarNavAltMarkup" 
         aria-controls="navbarNavAltMarkup" 
         aria-expanded="false" 
         aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
      </button>
      <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
         <div className="navbar-nav mr-auto">
            <a className="nav-item nav-link" href="#">
               Home
            </a>
            <a className="nav-item nav-link" href="#">What</a>
            <a className="nav-item nav-link" href="#">Who</a>
         </div>
         <div className = "navbar-nav">
            <a className="nav-item nav-link" href="">Login</a>
            <a className="nav-item nav-link" href="">Registrazione</a>
         </div>
      </div>
   </nav>
</div>

Cosa abbiamo fatto?

Abbiamo utilizzato le classi di Bootstrap nei riguardi della navigation bar. Se osservi bene al momento non accade nulla cliccando sulle diverse voci. In ogni caso prova a rimpicciolire la finestra del browser ed osserva il comportamento:

Clicca sul pulsante in alto a destra e si aprirà il menù:

Se vuoi saperne di più sul funzionamento della navigation bar di Bootstrap ti rimando alla sua documentazione a questo indirizzo.

Conclusioni

Abbiamo inserito l’header in modo tale da avere qualcosa di carino da mostrare. Lo scopo è quello di fare un’ applicazione che abbia molte informazioni nella homepage ed utilizzi lo scroll automatico per mostrare le informazioni. Per vedere meglio il routing le pagine di login e registrazione si troveranno invece in path diversi così da vedere un po’ tutti i casi.

Se vuoi continuare a seguire questa guida ti ricordo di non perdere di vista ReactJS: come creare una web app da zero. Inoltre se ti iscrivi alla newsletter non ti perderai i nuovi articoli. Mando da 1 a 4 mail al mese ricapitolando dove siamo arrivati con ogni guida. Con la newsletter hai anche accesso a libri ed ebook gratuiti, così come a coupon Udemy ? .

Per dubbi o domande scrivimi nei commenti ? .

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).

Prossimo articolo della guida: ReactJS: creazione del footer