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:

Apri il file index.js e rimuovi l’import in alto di index.css
Elimina il file index.css dentro alla cartella css
Apri il file App.js e rimuovi l’import in alto di app.css
Elimina il file app.css dentro alla cartella css
Nel file App.js scrivi in alto: import { BrowserRouter, Route, Switch} from ‘react-router-dom’;
Sempre nel file App.js elimina l’import di logo.svg
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
Inserisci come contenuto ritornato dal metodo render: <BrowserRouter></BrowserRouter>

Il file App.js si presenta ora così:

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

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:

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

Se sotto la cartella src non hai la cartella components, creala
Dunque inserisci all’interno di components la cartella mainLayout
Dentro alla cartella mainLayout inserisci le cartelle:
1. header
2. footer
3. 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:

Importa il componente della home
Importa il componente del mainLayout
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:

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:

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