Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Comprendere il Routing nidificato in React

by
Difficulty:IntermediateLength:ShortLanguages:

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

React è una libreria JavaScript sviluppata da Facebook per la realizzazione di interfacce utente. Se non conoscete React, suggeriamo di leggere uno dei precedenti tutorials in getting started with React. In questo tutorial, vedremo come gestire il routing nidificato in un'applicazione web React.

Impostare l'App

Cominceremo con l'impostare la nostra applicazione web React. Creiamo una cartella di progetto chiamata ReactRouting. All'interno di ReactRouting, creiamo un file denominato app.html. Di seguito il file app.html:

Dentro la cartella ReactRouting, inizializzate il progetto usando Node Package Manager (npm).

Inserite i dettagli specifici del progetto o digitate Enter per i parametri di default, e dovreste avere il file package.json all'interno della cartella ReactRouting.

Installate le dipendenze react e react-dom usando npm.

Installate il package babel usando npm e salvatelo nel file package.json.

I packages babel sono richiesti per trasformare il codice JSX in Javascript. Create un file di configurazione webpack per gestire le configurazioni webpack. Di seguito come apparirà il file webpack.config.js

app.js è il file dove risiederà il nostro codice React. Create un file denominato app.js dentro la cartella ReactRouting. Importate le librerie react richieste in app.js. Create un componente chiamato App contenente un div con del testo. Renderizzate il componente usando il metodo render. Di seguito come apparirà il file app.js:

Riavviate il server di sviluppo webpack.

Una volta riavviato il server dovreste essere in grado di vedere l'app React all'indirizzo http://localhost:8080/.

Gestire il Routing in React

Useremo react-router per implementare il routing e il routing nidificato. Per prima cosa installate react-router nel nostro progetto.

Ora abbiamo react-router installato nel nostro progetto. Creiamo un paio di views per implementare il routing. Dentro il file app.js, creiamo due componenti chiamati view1 e view2. Di seguito il codice:

Create un componente Menu per visualizzare View1 e View2 al click. Ecco come apparirà:

Usiamo il router react per visualizzare il route di default per la nostra applicazione. Rendete il componente Menu il route di default. Definite inoltre il route per i componenti View1 e View2. Ecco come apparirà:

Salvate le modifiche soprastanti e riavviate il server webpack. Dovreste vedere visualizzato il menu di navigazione verticale all'indirizzo http://localhost:8080/webpack-dev-server/.

An example of the vertical navigation menu

Provate a cliccare sui link View1 e View2, e dovrebbero condurre ai componenti appropriati.

Routes nidificate in React

Abbiamo già un componente App che rende visibile il testo dell‘header. Supponete di voler visualizzare la view adeguata al click del menu, ma desiderate che venga renderizzata dentro il componente App.

Vogliamo che il menu di navigazione sia disponibile su tutte le pagine. Per ottenere questo effetto, proveremo a nidificare i nostri componenti react View1 e View2 dentro il componente App. Così ogni volta che View1 viene renderizzato, verrà visualizzato dentro al componente App.

Ora modificate la configurazione del router e collocate la configurazione del route di View1 e View2 dentro il route del componente App.

Modificate il componente App in modo da nidificare il componente Menu al suo interno.

Per avere il rendering delle routes nidificate all'interno del componente App, aggiungeremo props.children al componente App. Passate props come argomento di funzione al componente App

Aggiungiamo inoltre un componente Home alla nostra applicazione.

Includiamo il componente Home nella lista di route nidificata.

Salvate le modifiche soprastanti e riavviate il server, dovreste essere in grado di vedere l'applicazione. Cliccate sugli oggetti elencati nel menu, e ognuno di essi una volta cliccato dovrebbe essere renderizzato all'interno del componente App

The app nested in the App component

Riassumendo

In questo tutorial, avete visto come implementare routing nidificato in un'applicazione React usando react-router. Potete sviluppare piccoli componenti indipendenti e poi usare i componenti per creare applicazioni più grandi. Dare la possibilità di ricucire piccoli componenti in applicazioni di più grandi dimensioni è ciò che rende React davvero potente.

React sta diventando de facto una delle piattaforme per lavorare sul web. Non è priva di curve d'apprendimento, e inoltre c'è pieno di risorse per tenervi occupati. Se state cercando risorse aggiuntive per lo studio o il vostro lavoro, controllate cosa abbiamo a disposizione nel marketplace Envato.

Il codice sorgente di questo tutorial è disponibile su Github. Fateci sapere i vostri suggerimenti e riflessioni nei commenti sottostanti.

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