In questo articolo creiamo la pagina home dopo aver creato precedentemente header e footer della nostra single page application ReactJS.
Creazione della Home ReactJS
Iniziamo a vedere come fare la home e come strutturarla così da iniziare a dare un senso alla prima pagina di questa single page application.
La Situazione Iniziale
La situazione iniziale, ovvero dove siamo arrivati con le guide precedenti, dovrebbe riportare un header verde in alto. Dopo l’header verde dovresti vedere un contenuto bianco riguardante la home. Infine in basso abbiamo un footer contenente alcune informazioni sulla nostra azienda.
Cosa vogliamo creare
Quello che vogliamo fare è creare un carosello di immagini come prima cosa visibile all’utente nella home. Dunque creare lo spazio per cosa facciamo e per chi siamo.
Vorremo fare in modo che scendendo nella pagina l’header rimanga fisso in alto.
Le immagini
Per dare vita a questa pagina utilizzeremo anche 4 immagini. Le prime 3 serviranno per dar vita al carosello (carousel di Bootstrap), mentre la quarta servirà per la sezione che racconta chi siamo.
Per scaricare le immagini puoi andare a questo indirizzo.
Header
Per prima cosa apri il file header.js ed inserisci la classe “fixed-top” tra le classi del tag <nav>:
Questa classe messa a disposizione da Bootstrap permette alla barra di navigazione di rimanere sempre fissa in alto nella nostra pagina.
Index
Manca poco per creare la home, ma prima vorrei farti notare che andremo ad utilizzare il carousel di Bootstrap. Un carousel ti permette di avere uno slide di immagini che possono cambiare automaticamente o tramite click dell’utente.
In questo caso credo che possiamo convenire tutti nella scelta del carousel automatico. Quindi apri il file index.html e, prima della chiusura del <body> inserisci:
<script>
$('.carousel').carousel({interval: 1000});
</script>
In questo modo stiamo dicendo al carousel che dovrà cambiare immagine ogni 1000 ms, quindi ogni 1 secondo.
Home
Finalmente ci siamo. Apri il file home.js ed elimina quanto presente nel return del metodo render.
Importa le immagini che ti ho fatto scaricare prima e che devi inserire nella cartella images del progetto:
import FirstSlideImage from "../../images/book1.jpg"; import SecondSlideImage from "../../images/book2.jpg"; import ThirdSlideImage from "../../images/book3.jpg"; import BookPassionate from "../../images/book-passionate.jpg";
Dunque inserisci nel return del metodo render il seguente codice:
<div className = "home-content">
<div id="home-top" className="carousel slide" data-ride="carousel">
<div className="carousel-inner">
<div className="carousel-item active">
<img className="d-block w-100" src={FirstSlideImage} alt="First slide"/>
</div>
<div className="carousel-item">
<img className="d-block w-100" src={SecondSlideImage} alt="Second slide"/>
</div>
<div className="carousel-item">
<img className="d-block w-100" src={ThirdSlideImage} alt="Third slide"/>
</div>
</div>
</div>
<div className = "container">
<div className = "row" id="what">
<div className = "col-12 text-center">
<h1>Cosa Facciamo</h1>
</div>
</div>
<div className = "row">
<div className = "col-4 text-center">
<h3>Stampa</h3>
</div>
<div className = "col-4 text-center">
<h3>Rilegatura</h3>
</div>
<div className = "col-4 text-center">
<h3>Pubblicazione</h3>
</div>
</div>
<div className = "row">
<div className = "col-4 text-justify book-bordered">
<p>
Tramite un meccanismo iper-avanzato la stampa su carta non contiene errori e ti
assicuriamo una qualità ottima anche su lucido.
</p>
</div>
<div className = "col-4 text-justify book-bordered">
<p>
Ogni singolo libro viene rilegato a mano con cuciture in vista. Fatto per durare negli anni,
fatto per durare per sempre.
</p>
</div>
<div className = "col-4 text-justify book-bordered">
<p>
Sei un autore? Pubblica il tuo libro con noi! Ci occupiamo di pubblicità e costi di distribuzione,
contattaci per saperne di più.
</p>
</div>
</div>
<div className = "row division">
<div className="col-12 text-center">
<div className = "important white">
<p>La passione è l'arte di saper fare qualcosa con amore.</p>
<p>E con amore viene sempre tutto bene.</p>
</div>
</div>
</div>
<div className = "row" id="who">
<div className = "col-12 text-center">
<h1>Chi Siamo</h1>
</div>
</div>
<div className = "row">
<div className = "col-8">
<img className = "book-passionate" src={BookPassionate} alt="team"/>
</div>
<div className = "col-4">
<div className = "row">
<div className = "col-12 text-center">
<h3>Appassionati di Libri</h3>
</div>
</div>
<div className = "row">
<div className = "col-12 text-justify">
<p>
Parlare di libri, lavorarli, leggere, sentire il profumo delle pagine
ci rende persone appassionate e per questo motivo diamo sempre il massimo
per pubblicare il tuo libro senza errori.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
Ora dobbiamo aggiungere il css. Apri la cartella css e crea al suo interno la cartella home. Dunque crea all’interno di home il file home.css:
All’interno di home.css riporta le seguenti regole:
.home-content .container{
margin-top:20px;
margin-bottom:20px;
}
.home-content .container .row{
margin-top:20px;
margin-bottom:20px;
}
.home-content .container .row .book-bordered{
border-bottom: 6px solid #151515;
border-radius: 8%;
}
.home-content .container .row .book-passionate{
width:100%;
}
.home-content .container .row.division{
background-color:#232323;
}
p.important.white{
color:white;
font-size:2em;
font-weight: 700;
}
Infine importa in home.js anche il file css:
import homeCss from "../../css/home/home.css";
Il risultato visibile
Una volta eseguiti questi passaggi il risultato finale che otteniamo è il seguente:
Scendendo in fondo dunque troviamo:
Ed infine:
Scroll dalla barra di navigazione
Come facciamo per far sì che lo scroll avvenga in automatico cliccando su Home, What e Who presenti nella barra di navigazione?
Semplicemente apri il file header.js e posizionati dove ci sono i link <a>. Al momento gli attributi href dei tag <a> relativi ad Home, What e Who puntano tutti a “#”. Cambiamo questi link in questo modo:
<div className="navbar-nav mr-auto">
<a className="nav-item nav-link" href="#home-top">
Home
</a>
<a className="nav-item nav-link" href="#what">What</a>
<a className="nav-item nav-link" href="#who">Who</a>
</div>
Ora gli attributi href puntano ai <div> presenti in home.js che hanno gli id home-top, what e who. In questo modo, se osservi la barra degli indirizzi, cliccando cambierà la posizione senza dover ricaricare la pagina. La visualizzazione della home si adatterà per mostrarti quanto richiesto semplicemente scrollando verso un’ancora (home-top, what e who sono 3 ancore).
Conclusioni
Alla fine di questo articolo dovresti avere una bellissima home. Non stiamo ancora sfruttando praticamente nulla di ReactJS, ma ci stiamo abituando a creare delle belle schermate. Nella prossima lezione entreremo nei meandri del login e della registrazione ed inizieremo a scrivere la logica. Chiameremo endpoint appositi e saremo in grado di recuperare ed inviare informazioni.
Se vuoi continuare a seguire questa guida ti ricordo di non perdere di vista l’articolo 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!).
