Share
React è una libreria JavaScript creata da Facebook per la creazione di interfacce utente. Se sei nuovo su React, ti consiglio di leggere uno dei nostri tutorial precedenti su come iniziare con React. In questo tutorial, discuteremo come gestire il routing annidato in un'applicazione web React.
Inizieremo configurando la nostra applicazione web React. Creiamo una cartella del progetto chiamata ReactRouting. Dentro ReactRouting, crea un file chiamato app.html. Di seguito è il app.html file:
TutsPlus - React nested routing
Dentro il ReactRouting cartella, inizializza il progetto usando Node Package Manager (npm).
npm init
Inserire i dettagli specifici del progetto o premere accedere per le impostazioni predefinite, e dovresti avere il package.json file all'interno del ReactRouting cartella.
"name": "reactroutingapp", "version": "1.0.0", "description": "", "main": "app.js", "scripts": "test": "echo \" Errore : nessun test specificato \ "&& exit 1", "author": "", "license": "ISC"
Installa il reagire e reagire-dom dipendenze usando npm.
npm install react react-dom --save
Installa il Babele pacchetto usando npm e salvarlo nel package.json file.
npm installa --save-dev webpack-dev-server webpack babel-core babel-loader babel-preset-react babel-preset-es2015
Babele i pacchetti sono necessari per trasformare il codice JSX in JavaScript. Creare un file di configurazione del webpack per gestire le configurazioni del webpack. Ecco come webpack.config.js il file sarebbe:
module.exports = entry: './app.js', output: nome file: 'bundle.js',, module: caricatori: [exclude: / node_modules /, loader: 'babel-loader? preset [ ] = es2015 e preimpostazioni [] = reagisci ']
app.js è il file in cui risiede il nostro codice React. Crea un file chiamato app.js dentro il ReactRouting cartella. Importa le necessarie librerie di reazione in app.js. Crea un componente chiamato App avere un div con del testo Renderizza il componente usando il metodo render. Ecco come base app.js il file sarebbe:
import Reagire da 'react' import render da 'react-dom' const App = () => return ('TutsPlus - Benvenuto in React Nested Routing App'
); ; rendering ((), Document.getElementById ( 'app'))
Riavvia il webpack server di sviluppo.
webpack-dev-Server
Una volta riavviato il server, dovresti essere in grado di visualizzare l'app React in esecuzione su http: // localhost: 8080 /.
Faremo uso di reagiscono-router per implementare il routing e il routing nidificato. Innanzitutto, installa reagiscono-router nel nostro progetto.
npm install react-router --save
Ora abbiamo reagiscono-router installato nel nostro progetto. Creiamo un paio di viste per implementare il routing. Dentro il app.js file, creare due componenti chiamati view1 e view2. Ecco come apparirà il codice:
const View1 = () => return ('Benvenuto in View1'
); ; const View2 = () => return ('Benvenuto in View2'
); ;
Creare un Menu componente da visualizzare view1 e view2 cliccando. Ecco come appare:
const Menu = () => return ();
- 'Casa'
- 'View1'
- 'View2'
Usiamo il router di reazione per visualizzare il percorso predefinito per la nostra applicazione. Fare il Menu componente il percorso predefinito. Definisci anche il percorso per il view1 e view2 componenti. Ecco come appare:
render (, document.getElementById ( 'app'));
Salvare le modifiche precedenti e riavviare il webpack server. Dovresti avere il menu di navigazione verticale visualizzato su http: // localhost: 8080 / webpack-dev-server /.
Prova a cliccare sul view1 e view2 collegamenti, e dovrebbe navigare verso i componenti appropriati.
Abbiamo già un App componente che visualizza il testo dell'intestazione. Supponiamo di voler fare clic sul menu per visualizzare la vista appropriata, ma vogliamo renderla all'interno App componente.
Vogliamo che il menu di navigazione sia disponibile su tutte le pagine. Per raggiungere questo obiettivo, proveremo a nidificare i nostri componenti di reazione view1 e view2 dentro il App componente. Quindi ogni volta che il view1 è reso, è visualizzato all'interno del App componente.
Ora modifica la configurazione del router e posiziona il view1 e view2 route config all'interno del App percorso componente.
render (, document.getElementById ( 'app'));
Modifica il App componente per nidificare il Menu componente al suo interno.
const App = () => return (); ;'TutsPlus - Benvenuto in React Nested Routing App'
Per rendere i percorsi nidificati dentro il App componente, aggiungeremo props.children al App componente. Passa dentro oggetti di scena come argomento di una funzione per il App componente.
const App = (props) => return (); ;'TutsPlus - Benvenuto in React Nested Routing App'
Props.children
Aggiungiamolo anche uno Casa componente alla nostra applicazione.
const Home = () => ritorno (); ;'Benvenuto a casa !!'
Includi il Casa componente nell'elenco di percorsi nidificati.
render (, document.getElementById ( 'app'));
Salvare le modifiche precedenti e riavviare il server e dovresti essere in grado di visualizzare l'applicazione. Fare clic sulle voci di menu elencate e ognuna quando viene fatto clic deve essere nidificata all'interno di App componente.
In questo tutorial, hai visto come implementare il routing annidato in un'applicazione React usando reagiscono-router. È possibile sviluppare piccoli componenti indipendenti e quindi utilizzare i componenti per creare applicazioni più grandi. Rendendo possibile la realizzazione di piccoli componenti in applicazioni di grandi dimensioni è ciò che rende React davvero potente.
React sta diventando una delle piattaforme di fatto per lavorare sul web. Non è senza le sue curve di apprendimento, e ci sono molte risorse per tenerti occupato, pure. Se stai cercando ulteriori risorse da studiare o da utilizzare nel tuo lavoro, dai un'occhiata a ciò che abbiamo a disposizione sul mercato Envato.
Il codice sorgente di questo tutorial è disponibile su GitHub. Fateci sapere i vostri suggerimenti e pensieri nei commenti qui sotto.
Accentsconagua