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 20
creazione dell'header ReactJS

ReactJS: creazione dell’header

  • 20/09/2017
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione
  • bootstrap, navbar, programmazione, reactjs

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:

header ReactJS

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.pngicon ReactJS
  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:

Development Category (English)728x90


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

Deep Learning Specialization on Coursera

ReactJS Header

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:

Bootstrap navbar

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

Bootstrap ReactJS Responsive

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

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