Share
Questo tutorial ti guiderà attraverso l'utilizzo dei moduli react-router e react-transition-group per creare applicazioni React multi-pagina con animazioni di transizione delle pagine.
Se hai mai avuto la possibilità di provare React, probabilmente ne hai sentito parlare Create-reagiscono-app pacchetto, il che rende estremamente facile iniziare con un ambiente di sviluppo React.
In questo tutorial, useremo questo pacchetto per avviare la nostra app React.
Quindi, prima di tutto, assicurati di aver installato Node.js sul tuo computer. Installa anche npm per te.
Nel tuo terminale, corri npm install -g create-react-app. Questo verrà installato a livello globale Create-reagiscono-app sul tuo computer.
Una volta fatto, è possibile verificare se è lì digitando create-react-app -V.
Ora è il momento di costruire il nostro progetto React. Corri create-react-app-app multi-pagina. Puoi, naturalmente, sostituire multi-page-app con tutto ciò che vuoi.
Adesso, Create-reagiscono-app creerà una cartella denominata multi-page-app. Basta digitare cd multi-page-app per cambiare directory e ora eseguire inizio di npm per inizializzare un server locale.
È tutto. Hai un'app React in esecuzione sul tuo server locale.
Ora è il momento di pulire i file predefiniti e preparare la nostra applicazione.
Nel tuo src cartella, elimina tutto ma App.js e index.js. Quindi apri index.js e sostituire il contenuto con il codice qui sotto.
import Reagire da "reagire"; importare ReactDOM da 'react-dom'; importare App da './App'; ReactDOM.render (, document.getElementById ( 'radice'));
Ho praticamente cancellato il registerServiceWorker linee correlate e anche il importare './index.css'; linea.
Inoltre, sostituisci il tuo App.js file con il codice qui sotto.
import React, Component da 'react'; la classe App estende Component render () return (); Esporta l'app predefinita;
Ora installeremo i moduli richiesti.
Nel tuo terminale, digita i seguenti comandi per installare il reagiscono-router e reagire-transizione-group moduli rispettivamente.
npm install react-router-dom --save
npm install [email protected] --save
Dopo aver installato i pacchetti, puoi controllare package.json file all'interno della directory principale del progetto per verificare che i moduli siano inclusi in dipendenze.
Esistono fondamentalmente due diverse opzioni del router: HashRouter e BrowserRouter.
Come il nome suggerisce, HashRouter usa gli hash per tenere traccia dei tuoi collegamenti, ed è adatto per server statici. D'altra parte, se si dispone di un server dinamico, è un'opzione migliore da utilizzare BrowserRouter, considerando il fatto che i tuoi URL saranno più belli.
Una volta che decidi quale usare, vai avanti e aggiungi il componente al tuo index.js file.
import HashRouter da 'react-router-dom'
La prossima cosa è avvolgere il nostro
Quindi il tuo finale index.js il file dovrebbe assomigliare a questo:
import Reagire da "reagire"; importare ReactDOM da 'react-dom'; importare HashRouter dall'app di importazione "react-router-dom" da "./App"; ReactDOM.render (, document.getElementById ( 'radice'));
Se stai usando un server dinamico e preferisci usare BrowserRouter, l'unica differenza sarebbe importare il BrowserRouter e usarlo per avvolgere il
Avvolgendo il nostro
Dentro il nostro e
Crea una cartella denominata "componenti" nel tuo src directory, quindi creare il file menu.js e Content.js File.
Completiamo il nostro menu.js componente.
Sarà un componente funzionale stateless poiché non abbiamo bisogno di stati e di hook del ciclo di vita.
import Reagire da 'react' const Menu = () => return (
Qui abbiamo un tag, che saranno i nostri link.
Ora aggiungi la seguente riga al tuo Menu componente.
importa Link da "react-router-dom"
E poi avvolgere il contenuto del tag con il componente.
Il il componente è essenzialmente a reagiscono-router componente che agisce come un tag, ma non ricarica la tua pagina con un nuovo link di destinazione.
Inoltre, se stili il tuo un tag in CSS, noterai che il il componente ha lo stesso stile.
Si noti che esiste una versione più avanzata di componente, che è
Ora dobbiamo definire dove ogni link navigerà. A questo scopo, il il componente ha a a puntello.
import Reagire da 'react' import Link da 'react-router-dom' const Menu = () => return (
Dentro il nostro
Abbiamo bisogno del Interruttore e Itinerario componenti da reagiscono-router-dom. Quindi, prima di tutto, importali.
importare Switch, Route da "react-router-dom"
In secondo luogo, importa i componenti a cui vogliamo indirizzare. Queste sono le Casa, Lavori e Di componenti per il nostro esempio. Supponendo che tu abbia già creato quei componenti all'interno di componenti cartella, dobbiamo anche importarli.
importare Home da './Home'
importa Works da './Works'
import Informazioni da './Informazioni'
Quei componenti possono essere qualsiasi cosa. Li ho appena definiti componenti funzionali stateless con contenuto minimo. Un modello di esempio è sotto. Puoi usarlo per tutti e tre i componenti, ma non dimenticare di cambiare i nomi di conseguenza.
import Reagire da 'react' const Home = () => return (Casa) esportazione predefinita Home
Noi usiamo il
Le rotte sono componenti che chiamano il componente di destinazione se corrispondono a sentiero puntello.
La versione finale del nostro Content.js il file assomiglia a questo:
import Reagire da 'react' import Switch, Route da 'react-router-dom' import Home da './Home' importa Works da './Works' import Informazioni da './Informazioni su' const Content = () = > ritorno () Esporta contenuto predefinito
Si noti che l'extra esatto puntello è richiesto per il Casa componente, che è la directory principale. utilizzando esatto forza il Itinerario per abbinare il percorso esatto. Se non viene utilizzato, altri nomi di percorso iniziano con / sarebbe anche abbinato al Casa componente, e per ogni collegamento, mostrerebbe solo il Casa componente.
Ora quando fai clic sui link dei menu, la tua app dovrebbe cambiare il contenuto.
Finora, abbiamo un sistema di router funzionante. Ora animeremo le transizioni di rotta. Per raggiungere questo obiettivo, useremo il reagire-transizione-group modulo.
Animeremo il montaggio stato di ciascun componente. Quando instradi componenti diversi con il Itinerario componente all'interno Interruttore, sei essenzialmente montaggio e smontaggio componenti differenti di conseguenza.
Noi useremo reagire-transizione-group in ogni componente che vogliamo animare. Quindi puoi avere un'animazione di montaggio diversa per ciascun componente. Userò solo un'animazione per tutti loro.
Ad esempio, usiamo il
Per prima cosa, dobbiamo importare CSSTransitionGroup.
import CSSTransitionGroup da "react-transition-group"
Quindi è necessario avvolgere il contenuto con esso.
Dal momento che abbiamo a che fare con lo stato di montaggio del componente, abilitiamo transitionAppear e impostare un timeout per questo. Disabilitiamo anche transitionEnter e transitionLeave, poiché questi sono validi solo una volta montato il componente. Se hai intenzione di animare i bambini del componente, devi usarli.
Infine, aggiungi lo specifico transitionName in modo che possiamo fare riferimento ad esso all'interno del file CSS.
import Reagire da 'react' import CSSTransitionGroup da 'react-transition-group' import '... /styles/homeStyle.css' const Home = () => return () esportazione predefinita Home Casa
Abbiamo anche importato un file CSS, in cui definiamo le transizioni CSS.
.homeTransition-appear opacity: 0; .homeTransition-appear.homeTransition-appear-active opacity: 1; transizione: all .5s easy-in-out;
Se aggiorni la pagina, dovresti vedere l'effetto dissolvenza del Casa componente.
Se applichi la stessa procedura a tutti gli altri componenti indirizzati, vedrai le loro singole animazioni quando cambi il contenuto con il tuo Menu.
In questo tutorial, abbiamo coperto il reagiscono-router-dom e reagire-transizione-group moduli. Tuttavia, c'è molto di più in entrambi i moduli rispetto a quelli trattati in questo tutorial. Ecco un demo funzionante di ciò che era coperto.
Quindi, per saperne di più funzioni, consulta sempre la documentazione dei moduli che stai utilizzando.
Negli ultimi due anni, React è cresciuto in popolarità. In effetti, sul mercato sono disponibili numerosi articoli disponibili per l'acquisto, la revisione, l'implementazione e così via. Se stai cercando risorse aggiuntive intorno a React, non esitare a verificarle.
Accentsconagua