7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. React

Come gestire il Routing in React

Scroll to top
Read Time: 4 mins

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

In uno dei precedenti tutorial abbiamo visto come iniziare a usare React e JSX. In questo tutorial vedremo come iniziare a impostare e creare applicazioni React. Ci concentreremo su come gestire il routing in un'applicazione React usando react-router.

Guida introduttiva

Cominciamo dall'avviare il progetto usando Node Package Manager (npm).

Installate le librerie necessarie react e react-dom nel progetto.

Useremo il bundler webpack per questo progetto. Installate webpack e il server di sviluppo webpack.

Useremo Babel per convertire la sintassi JSX in JavaScript. Installate il seguente package babel nel progetto.

webpack-dev-server richiede un file di configurazione dove definiremo il file iniziale, il file di output e il loader di babel. Ecco come apparirà il file webpack.config.js:

Creeremo poi app.html dove l'applicazione React verrà renderizzata.

Creiamo il file iniziale app.js per l'applicazione React.

Come mostrato nel codice soprastante abbiamo importato react e react-dom. Abbiamo creato un componente stateless denominato App che restituisce un titolo. La funzione render restituisce il rendering del componente all'interno dell'elemento app nella pagina app.html.

Avviamo il server webpack e l'applicazione dovrebbe avviarsi e mostrare il messaggio dal componente.

Indirizzate il browser verso http://localhost:8080/app.html e dovreste vedere l'app funzionante.

Creare Views React

Ora siamo operativi con la nostra applicazione React. Cominciamo creando un paio di views per l'applicazione di routing React. Solo per mantenere le cose semplici, creeremo tutti i componenti all'interno dello stesso file app.js.

Creiamo un componente principale denominato navigation in app.js.

Nel componente soprastante Navigation abbiamo il titolo dell'applicazione e un menu appena creato per navigare in diverse schermate dell'applicazione. Il componente è piuttosto semplice, con codice HTML di base. Andiamo avanti e create schermate per Contact e About.

Abbiamo appena creato un componente per il rendering delle schermate About e Contact.

Collegare Views utilizzando react-router

Per connettere Views differenti useremo react-router. Installate react-router usando npm.

Importate la libreria richiesta da react-router in app.js.

Invece di specificare di quale componente desideriamo il rendering, definiremo routes differenti per la nostra applicazione. Per fare ciò useremo react-router.

Definiamo le routes per la schermata Home, Contact e About.

Quando l'utente visiterà la route / verrà eseguito il rendering del componente Navigation, visitando /about avremo il rendering del componente About e /contact ci mostrerà il componente Contact.

Modificate le schermate About e Contact per includere un collegamento per tornare alla schermata Home. Per collegare le schermate useremo Link che funziona in modo simile all'anchor tag HTML.

Modificate il componente Navigation per includere il collegamento alle altre schermate dalla home.

Salvate le modifiche e riavviate il server webpack.

Indirizzate il browser verso http://localhost:8080/app.html e dovreste vedere l'app funzionante con il route di base implementato.

Riassumendo

In questo tutorial abbiamo visto come iniziare a creare un'applicazione React e collegare diversi componenti insieme usando react-router. Abbiamo appreso come definire routes differenti e collegarle tra loro usando react-router.

Avete provato a usare react-router o qualsiasi altra libreria di routing? Fateci sapere le vostre riflessioni nei commenti sottostanti.

Il codice sorgente di questo tutorial è disponibile su GitHub.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.