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 06
ReactJS: react-router

ReactJS: react-router con Route, Switch e Template

  • 06/09/2017
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione
  • heroku, programmazione, react-routing, reactjs

Ciao 🙂

In questo articolo ti voglio mostrare come implementare il routing su un’applicazione ReactJS. Se non sai come creare un’applicazione ReactJS puoi scoprire online l’utilizzo di NodeJS e di React. Se sai già qualcosa e vuoi imparare a deployare la tua applicazione su Heroku, leggi questo articolo.

Sei pronto? Vediamo come funziona il routing a partire da un progetto totalmente vuoto. Ci basteranno pochi file.

Primo passo

Per iniziare ho diviso la mia applicazione all’interno della folder “src” in “components” e “css”. I componenti iniziali App.jsx e la index.html si trovano subito sotto “src”.

Per procedere con il routing è necessario posizionarsi con il terminale nella cartella del progetto e scrivere:


npm install --save react-router-dom

Dunque hai installato la versione di react-router per l’utilizzo su browser (esiste anche la versione per react-native). Oggi, 6 Settembre 2017, la versione disponibile è la 4.2.2.

Development Category (English)728x90

Il RouteComponent

Una volta installato fai partire Node lanciando heroku local o npm start o npm run start (per ricordarti cosa lanciare puoi guardare gli scripts all’interno del file package.json).

Dunque all’interno della cartella “components” crea la cartella “routing” e dunque crea il file “RouterComponent.jsx“.

Bene, in questo file andremo a scrivere le nostre routes. Utilizzeremo un routing di tipo Hash così da non andare in conflitto con eventuali endpoint sul server.

Deep Learning Specialization on Coursera

Scrivi questo codice in RouterComponent.jsx:

import React from "react";
import { HashRouter, Route, Switch} from 'react-router-dom';

import Home from '../home/Home';
import Test from '../test/Test';
import MainTemplate from '../templates/MainTemplate';

export default class RouterComponent extends React.Component{
 render(){ 
     return ( 
         <HashRouter> 
             <MainTemplate>
                 <Switch> 
                     <Route exact path='/' component={Home}/> 
                     <Route exact path='/test' component={Test}/> 
                 </Switch> 
             </MainTemplate> 
         </HashRouter>
      ); 
  }
}

Cosa abbiamo scritto?

Quello che abbiamo scritto è l’import dei componenti che ci servono. Come puoi vedere abbiamo tre componenti che dobbiamo creare noi. Il primo si chiama Home e conterrà un <div> con scritto “Ciao sono Home!”, poi c’è Test che contiene “Ciao sono Test!” ed infine il MainTemplate che conterrà il template di base.

Dunque nella function render andiamo a ritornare un HashRouter composto dal MainTemplate che a sua volta contiene uno Switch composto da 2 Route.  Lo Switch è un componente che serve per fare un match preciso delle routes. Il motivo del suo utilizzo ti sarà più chiaro in futuro, nel frattempo se sei curioso ti consiglio di leggere questa guida.

Dunque le 2 routes che abbiamo servono per far mostrare all’utente la Home e la pagina Test quando ci troviamo rispettivamente in “/” ed in “/test”.

Cosa vogliamo vedere

La maggior parte dei gestionali che ho dovuto costruire erano sempre strutturati in questo modo:

  1. Header con logo e menù
  2. Contenuto
  3. Footer

Essendo che l’unica cosa variabile del gestionale è sempre stata il contenuto, mentre l’header ed il footer rispettavano sempre lo stesso template, ho sin da subito avuto l’esigenza di crearmi un template di base.

Di conseguenza il MainTemplate conterrà questo codice:

import React from "react";
export default class MainTemplate extends React.Component{
 render(){ 
      return( 
          <div>
              Ciao sono il main temp 
              <hr/> 
              {this.props.children} 
              <hr/> 
              Quì finisco..! 
          </div> 
        ); 
   }
}

Come puoi vedere ora non ci sono header e footer, ma sono sostituiti da “Ciao sono il main temp” ed “Quì finisco..!”. In mezzo viene renderizzato il contenuto tramite l’utilizzo di this.props.children. Questi children all’interno delle props sono esattamente i componenti che corrispondono alla route in cui ti trovi.

Nel nostro caso nella lista di figli avremo soltanto quello corrispondente all’url che abbiamo digitato. Senza l’utilizzo di exact nelle routes avremmo visto nel browser sia il componente relativo alla Home che quello relativo a Test.

Il risultato finale

A questo punto entra nel file di ingresso della tua applicazione, nel mio caso è App.jsx ed importa il RouteComponent. Dunque inseriscilo nella render (puoi renderizzare direttamente il componente RouteComponent passandolo alla function ReactDOM.render).

Il risultato che otteniamo da questa operazione è il seguente:

ReactJS Routing

Prova a togliere lo switch ed osserva il comportamento. Dopo di che leva anche exact dalle routes ed osserva il risultato.

Conclusioni

In questo articolo hai visto come implementare il routing nella tua applicazione ReactJS. Nei prossimi articoli tratterò tanti altri temi per chiamate a server, scrittura e lettura da database e tanto altro ancora.

Non ti dimenticare di utilizzare questo tool per Chrome che ti permette di capire lo stato e le props ricevute di ogni componente della tua applicazione: clicca quì.

Se hai dubbi o domande non esitare a scrivermi 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!)

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

  • Heroku: passare dalla versione free al piano Hobby04/12/2017
  • Gli Strumenti per Costruire Web App03/11/2017
  • Register.it e CloudFlare + Heroku29/09/2017
  • Spring Boot e Flyway, migrazione script database da codice11/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...