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 25
ReactJS

ReactJS: creazione della home

  • 25/09/2017
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione
  • javascript, programmazione, react, reactjs, single page application
Proseguiamo con la guida per imparare ReactJS. Come detto più volte in questa guida si fanno delle semplificazioni e delle scelte strutturate per l’apprendimento di chi legge.

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.

Development Category (English)728x90

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

reactjs header

Questa classe messa a disposizione da Bootstrap permette alla barra di navigazione di rimanere sempre fissa in alto nella nostra pagina.

Deep Learning Specialization on Coursera

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.

Carousel Bootstrap

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:

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:

ReactJS

Scendendo in fondo dunque troviamo:

imparare ReactJS

Ed infine:

ReactJS imparare

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

Prossimo articolo della guida: ReactJS: come fare routing tra più pagine

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

  • React, TypeScript e Redux: Come creare una web app25/06/2018
  • CodeLobster: Il nuovo IDE per lo sviluppo web rapido, leggero e completo!19/04/2018
  • Imparare a programmare con Udemy – Sondaggio tra programmatori16/01/2018
  • ReactJS: Come testare i componenti React con Enzyme e Jest12/12/2017

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