Se è la prima volta che ti imbatti in questa guida potresti voler partire dal primo articolo: ReactJS Come creare una web app da zero.
Creazione del footer
Per prima cosa vediamo dove vogliamo arrivare. Abbiamo l’header verde con l’icona di un libro ed altre voci di navigazione. Questo vuol dire che stiamo creando una web application che gestisce vendita e produzione di libri.
Il footer normalmente si trova sotto a tutto il contenuto della pagina. Sotto al contenuto l’utente si aspetta alcune informazioni riguardanti una mail, un indirizzo e magari le informazioni sui social networks.
L’obiettivo che ci poniamo è quello di costruire un footer grigio con alcune informazioni:
So che non è bellissima la nostra web app adesso, però nella prossima lezione inseriremo la home e saremo a posto!
Font Awesome
Prima di scrivere il codice del footer abbiamo bisogno di font awesome. Font awesome è diventato con Bootstrap 4 il fornitore di icone, css e grafiche vettoriali ufficiale. Le vecchie glyphicon, un set di icone disponibili con Bootstrap, sono state soppiantate.
A noi servono le icone per i simboli relativi ai social networks, così come ci serviranno ancora in futuro per altri elementi delle nostre pagine.
Dunque vai a questo indirizzo: http://fontawesome.io/get-started/ .
Inserisci la tua mail alla quale ti invieranno il tuo indirizzo personale per recuperare il CSS. Dunque includi quanto ti è arrivato all’interno dei tag <head></head> della pagina index.html che trovi sotto alla cartella public.
Io ho incluso lo script che mi hanno inviato subito prima del <link> relativo a Bootstrap 4.
Una volta incluso puoi andare a vedere le font-awesome icons. Puoi scorrerle tutte oppure cercarle.
JS Footer
Iniziamo a creare il footer ReactJS. Apri il file footer.js che trovi in mainLayout/footer:
Dunque inserisci nel return del metodo render:
<div className = "container-fluid footer">
<div className = "row">
<div className = "col mr-auto">
<p>Book Seller Company</p>
<p>Via Paolo Dell'Aguzzo, 56</p>
<p>Senigallia, Ancona, Italia</p>
<p>info@paolodellaguzzo.com</p>
</div>
<div className = "col">
<div className = "pull-right">
<a href="https://www.facebook.com/paolodellaguzzocom/" target="_blank">
<i className = "fa fa-facebook-official fa-2x"></i>
</a>
<a href="https://twitter.com/PaoloDellaguzzo" target="_blank">
<i className = "fa fa-twitter fa-2x"></i>
</a>
<a href="https://www.linkedin.com/in/paolodellaguzzo/" target="_blank">
<i className = "fa fa-linkedin-square fa-2x"></i>
</a>
<a href="https://plus.google.com/u/0/+paolodellaguzzo" target="_blank">
<i className = "fa fa-google-plus-official fa-2x"></i>
</a>
</div>
</div>
</div>
</div>
In questo codice stiamo definendo un <div> principale con classe container-fluid. Questa classe è di Bootstrap e ci permette di avere un contenitore a tutto schermo per le row.
All’interno abbiamo una row con 2 colonne che occupano lo spazio che gli serve auto-adattandosi in base al contenuto. La prima colonna mantiene un margine destro automatico e la seconda contiene un <div> che si posiziona all’estrema destra della riga (classe pull-right).
All’interno dei tag <a> si può vedere l’utilizzo dei tag <i> per mostrare le icone di font awesome. Tutte le icone hanno una prima classe fa, dunque una classe che rappresenta ciò che mostriamo (vedi fa-facebook-official) ed infine stiamo utilizzando un ingrandimento, fa-2x, che ingrandisce le icone a 2em.
CSS Footer
Ora entra nella cartella css/mainLayout e crea la cartella footer con dentro il file footer.css:
All’interno di questo file scrivi le seguenti regole:
.footer{
background-color:#404040;
color:white;
}
.footer p{
margin-bottom: 0;
}
.footer a{
color:white;
padding-right:10px;
}
.footer a:hover{
color:grey;
}
Stiamo definendo un colore di sfondo per il footer ed un colore del testo. Dunque stiamo eliminando il margine ai tag <p> all’interno del <div> con classe footer. Modifichiamo i link e facciamo in modo che al passaggio con il mouse diventino grigi (in questo caso le icone dei social networks).
Dunque non ti rimane che includere il file css in footer.js. Apri quest’ultimo file ed inserisci sotto all’importazione di React questo nuovo import:
import footerCss from "../../../css/mainLayout/footer/footer.css";
Conclusioni
In questa lezione hai imparato a creare un bel footer ReactJS. La pagina sta prendendo vita e nella prossima lezione vedremo come creare anche il contenuto della home. Dopo di che inizieremo a creare degli endpoint ed a creare l’accesso in un’area privata.
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!).
