Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Set 21
footer ReactJS

ReactJS: creazione del footer

  • 21/09/2017
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione
  • font awesome, footer reactjs, programmazione, reactjs
In questo articolo creiamo il footer ReactJS. Nelle lezioni precedenti abbiamo creato l’header e prima ancora abbiamo impostato la pagina web.

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:

ReactJS Footer Header

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.

Development Category (English)728x90

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.

Deep Learning Specialization on Coursera

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:

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:

Footer CSS ReactJS

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!).

Prossimo articolo della guida: ReactJS: creazione della home

Commenti

Condividi:

  • Fai clic qui per condividere su Twitter (Si apre in una nuova finestra)
  • Fai clic per condividere su Facebook (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Tumblr (Si apre in una nuova finestra)
  • Fai clic qui per condividere su LinkedIn (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Pinterest (Si apre in una nuova finestra)
  • Fai clic per condividere su WhatsApp (Si apre in una nuova finestra)
  • Fai clic per condividere su Telegram (Si apre in una nuova finestra)
  • Clicca per condividere su Skype (Si apre in una nuova finestra)
  • Fai clic qui per stampare (Si apre in una nuova finestra)

Correlati

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail
Paolo Dell'Aguzzo

About The Author

Sono sempre stato affascinato dal marketing e dall'informatica a tal punto di unire le due passioni :) Se ti piace l'articolo fammelo sapere in un commento :)

Related Posts

    Fammi sapere cosa ne pensi :) Annulla risposta

    Impara ReactJS imparare react
    I 10 + 1 Libri che Dovrebbe Leggere Ogni Programmatore libri programmatore
    Newsletter

    Seguimi su Facebook :)

    Facebook Pagelike Widget
    Impara React Native imparare react native
    10 Cose per Stare Più Comodo in Ufficio stare più comodo in ufficio
    Impara a Creare un Tema Wordpress imparare creare tema wordpress
    Udemy I Migliori Corsi per Programmatori udemy corsi programmatori
    UX: Perché la User Experience è Importante UX importante e cos'è
    Metodologie Agili e Lean: Come migliorare la tua azienda metodologie agili
    Libri per Imparare JavaScript Imparare JavaScript libri

    Articoli recenti

    • I principali engine utilizzati per lo sviluppo di videogiochi
    • Dalla visione alla realtà: Lo sviluppo di videogiochi dal punto di vista di un programmatore
    • 8 consigli per migliorare la tua SEO Locale

    Categorie

    • CSS
    • Interviste
    • Java
    • Lavoro
    • Normative
    • Personale
    • Programmazione
    • Strategia & Marketing
    • Tech
    • Web Design
    • Wordpress
    Paolo Dell'Aguzzo
    Programmatore Software - Marotta di Mondolfo, Pesaro e Urbino
    P. IVA: IT02758450429
    Mail: info@paolodellaguzzo.com
    Via Litoranea, 284/C - Marotta (PU)
    Privacy Policy
    Cookie Policy
    In qualità di Affiliato Amazon, ricevo un guadagno per ciascun acquisto idoneo
    Amazon e il logo Amazon sono marchi registrati di Amazon.com, Inc. o delle sue affiliate
    Programmatore Senigallia, Ancona - Siti web, app iOS e Android, gestionali ReactJS, React Native, Java, SQL, PL/SQL, Heroku

     

    Caricamento commenti...