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:
<html>
<head>
<title>TutsPlus - React Nested Routing</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
Dentro la cartella ReactRouting, inizializzate il progetto usando Node Package Manager (npm).
npm init
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.
{
"name": "reactroutingapp",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Installate le dipendenze react e react-dom usando npm.
npm install react react-dom --save
Installate il package babel usando npm e salvatelo nel file package.json.
npm install --save-dev webpack-dev-server webpack babel-core babel-loader babel-preset-react babel-preset-es2015
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:
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js',
},
module: {
loaders: [
{ exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
]
}
}
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:
import React from 'react'
import { render } from 'react-dom'
const App = () => {
return (
<h2>{'TutsPlus - Welcome to React Nested Routing App'}</h2>
);
};
render((
<App />
),document.getElementById('app'))
Riavviate il server di sviluppo webpack.
webpack-dev-server
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.
npm install react-router --save
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:
const View1 = () => {
return(
<h3>{'Welcome to View1'}</h3>
);
};
const View2 = () => {
return(
<h3>{'Welcome to View2'}</h3>
);
};
Create un componente Menu per visualizzare View1 e View2 al click. Ecco come apparirà:
const Menu = () => {
return(
<section>
<ul>
<li>{'Home'}</li>
<li>
<Link to="/view1">{'View1'}</Link>
</li>
<li>
<Link to="/view2">{'View2'}</Link>
</li>
</ul>
</section>
)
};
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à:
render(
<Router history={hashHistory}>
<Route component={Menu} path="/"></Route>
<Route component={View1} path="/view1"></Route>
<Route component={View2} path="/view2"></Route>
</Router>,
document.getElementById('app'));
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/.
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.
render(
<Router history={hashHistory}>
<Route component={App} path="/">
<Route component={View1} path="/view1"></Route>
<Route component={View2} path="/view2"></Route>
</Route>
</Router>,
document.getElementById('app'));
Modificate il componente App in modo da nidificare il componente Menu al suo interno.
const App = () => {
return (
<div>
<h2>{'TutsPlus - Welcome to React Nested Routing App'}</h2>
<Menu />
</div>
);
};
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.
const App = (props) => {
return (
<div>
<h2>{'TutsPlus - Welcome to React Nested Routing App'}</h2>
<Menu />
{props.children}
</div>
);
};
Aggiungiamo inoltre un componente Home alla nostra applicazione.
const Home = () => {
return(
<div>
<h3>{'Welcome Home !!'}</h3>
</div>
);
};
Includiamo il componente Home nella lista di route nidificata.
render(
<Router history={hashHistory}>
<Route component={App} path="/">
<Route component={Home} path="/home"></Route>
<Route component={View1} path="/view1"></Route>
<Route component={View2} path="/view2"></Route>
</Route>
</Router>,
document.getElementById('app'));
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.
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.
