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 19
imparare ReactJS

ReactJS: creazione della prima pagina web

  • 19/09/2017
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione
  • guida reactjs, mainLayout, reactjs, routing reactjs

Con questo articolo iniziamo ufficialmente la creazione della prima pagina web ReactJS. Vedremo come impostare il routing, un layout principale e come dare vita ad una pagina esteticamente interessante. Lo scopo è sempre lo stesso: imparare ReactJS.

Se non ti senti pronto per la creazione della prima pagina web ReactJS non ti dimenticare che questo articolo è parte di un’intera guida per imparare ReactJS che puoi trovare a questo indirizzo.

Iniziamo

Per prima cosa è necessario fare un po’ di pulizie per rimuovere tutto ciò che è altamente inutile. I file CSS per esempio, così come quanto mostrato dal file App.js.

Esegui in ordine questi passi:

  1. Apri il file index.js e rimuovi l’import in alto di index.css
  2. Elimina il file index.css dentro alla cartella css
  3. Apri il file App.js e rimuovi l’import in alto di app.css
  4. Elimina il file app.css dentro alla cartella css
  5. Nel file App.js scrivi in alto: import { BrowserRouter, Route, Switch} from ‘react-router-dom’;
  6. Sempre nel file App.js elimina l’import di logo.svg
  7. Sempre nel file App.js elimina:
    1. lo state nel constructor
    2. la function showText inserita nelle lezioni precedenti
    3. il contenuto ritornato dal metodo render
  8. Inserisci come contenuto ritornato dal metodo render: <BrowserRouter></BrowserRouter>

Il file App.js si presenta ora così:

React App

Fai partire con npm start l’applicazione, dovresti avere una pagina completamente bianca e nessun errore nella console sviluppatori (al massimo qualche warning).

Development Category (English)728x90

Il routing

Nell’articolo su react-router, switch e template ti spiego già come funziona la libreria react-router-dom installata nella scorsa lezione (vedi quì). In ogni caso adesso rivedremo insieme i passaggi. Il nostro componente di routing sarà App ed utilizziamo BrowserRouter invece di HashRouter.

Per prima cosa vogliamo fare in modo che tutte le pagine della nostra applicazione facciano parte di un layout ben definito costituito da:

  1. header
  2. contenuto
  3. footer

Ogni componente che creeremo sarà parte del contenuto mentre header e footer saranno sempre gli stessi.

Deep Learning Specialization on Coursera

Crea il template principale

Iniziamo con la creazione del template principale. Esegui in ordine queste operazioni:

  1. Se sotto la cartella src non hai la cartella components, creala
  2. Dunque inserisci all’interno di components la cartella mainLayout
  3. Dentro alla cartella mainLayout inserisci le cartelle:
    1. header
    2. footer
    3. template

footer header template

Per prima cosa apri la cartella footer ed inserisci all’interno il file footer.js. Questo file non farà altro che inserire nello schermo un <div> con scritto “Ecco Footer”:


import React from "react";
export default class Footer extends React.Component{ 
   constructor(props){ 
      super(props); 
   }
   render(){ 
      return( 
         <div> ecco Footer.</div>
      ); 
   }
}

Dunque apri la cartella header e crea il file header.js il quale sarà simile al footer, ma manderà a schermo un <div> con scritto “sono Header”:


import React from "react";
export default class Header extends React.Component{ 
   constructor(props){ 
      super(props); 
   }
   render(){ 
      return( 
         <div> sono Header. </div>
      ); 
   }
}

Infine apri la cartella template e crea il file mainTemplate.js con il seguente codice:


import React from "react";
import Header from "../header/header";
import Footer from "../footer/footer";
export default class MainTemplate extends React.Component{ 
   constructor(props){ 
      super(props); 
   }
   render(){ 
       return( 
          <div> 
             <Header/> 
             {this.props.children} 
             <Footer/> 
         </div>
      ); 
   }
}

All’interno di this.props.children troveremo i componenti relativi al contenuto.

Crea la pagina Home

Nella cartella components adesso crea la cartella home ed inserisci al suo interno il file home.js. Il componente della home al momento ci restituirà un <div> con scritto “Sono la home”. Ecco il codice:


import React from "react";
export default class Home extends React.Component{ 
   constructor(props){ 
      super(props); 
   }
   render(){ 
      return( 
         <div> Sono la home. </div>
      ); 
   } 
}

Collega il tutto

Abbiamo quindi un template principale costituito da header e footer che vengono divisi a loro volta dal contenuto. Il contenuto, preso da this.props.children, vogliamo che sia renderizzato in base al path in cui ci troviamo.

Per ottenere ciò vuol dire che la nostra applicazione deve essere in grado di riconoscere un path ed assegnare il giusto contenuto a this.props.children.

Apri App.js e:

  1. Importa il componente della home
  2. Importa il componente del mainLayout
  3. Inserisci il routing definitivo dell’applicazione

Ecco il codice:


import React, { Component } from 'react';
import { BrowserRouter, Route, Switch} from 'react-router-dom';

import MainTemplate from "./components/mainLayout/template/mainTemplate";
import Home from "./components/home/home";

class App extends Component {

   constructor(props){
      super(props);
   }

   render() {

      return (
         <BrowserRouter>
            <MainTemplate>
               <Switch>
                   <Route exact path='/' component={Home}/>
               </Switch>
            </MainTemplate>
         </BrowserRouter>
      );
   }
}

export default App;

Da questo momento in poi quando il path sarà esattamente (utilizzo di exact in Route) “/” ci troveremo il componente della home renderizzato tra header e footer.

Esegui npm start e guarda nel browser il risultato:

main layout reactjs

Bootstrap 4

Il setup iniziale è quasi concluso. Per avere un set di regole CSS utilizzeremo Bootstrap 4. Per includerlo nel progetto al momento copieremo link e script presi dal sito ufficiale, senza troppi giri ne utilizzo di pacchetti.

Apri il file index.html presente nella cartella public e copia, prima della chiusura del tag head, il seguente link:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

Dunque posizionati in fondo al body e subito prima della chiusura (</body>) inserisci gli script:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Se hai problemi puoi copiare il tutto da questa pagina ufficiale.

Per testare che tutto sia andato a buon fine apri il file header.js ed aggiungi al <div> ritornato dal metodo render la classe bg-primary:

Bootstrap bg-primary

Aprendo nel browser l’applicazione dovresti vedere lo sfondo dell’intestazione di colore blue.

Conclusioni

Bene, nelle prossime lezioni daremo forma ad header, footer, home ed ad altre pagine. In questo articolo hai imparato ad usare il routing ed a creare qualche componente da zero. La creazione della prima pagina web ReactJS richiede ancora qualche lezione, però vedrai che imparerai senza problemi a muoverti bene e raggiungerai il tuo scopo: imparare ReactJS 🙂 .

Se vuoi continuare a seguire questa guida per imparare ReactJS 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 dell’header

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

  • ReactJS: le context API ufficiali, come usarle e cosa sono28/06/2018
  • ReactJS: cos’è il lifecycle e lo state15/09/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...