Share
Ce didacticiel vous expliquera comment utiliser les modules react-router et react-transition-group pour créer des applications React de plusieurs pages avec des animations de transition de page..
Si vous avez déjà eu la chance d’essayer React, vous avez probablement entendu parler de la créer-réagir-app package, ce qui le rend très facile à démarrer avec un environnement de développement React.
Dans ce tutoriel, nous allons utiliser ce paquet pour lancer notre application React..
Donc, tout d’abord, assurez-vous que Node.js est installé sur votre ordinateur. Il installera également npm pour vous.
Dans votre terminal, lancez npm installer -g créer-réagir-application. Cela installera globalement créer-réagir-app sur ton ordinateur.
Une fois que c'est fait, vous pouvez vérifier s'il est là en tapant créer-réagir-app -V.
Il est maintenant temps de construire notre projet React. Juste courir créer-réagir-application app multi-page. Vous pouvez bien sûr remplacer application multi-page avec tout ce que vous voulez.
À présent, créer-réagir-app va créer un dossier nommé application multi-page. Il suffit de taper cd multi-page-app pour changer de répertoire, et lancez maintenant npm start initialiser un serveur local.
C'est tout. Vous avez une application React en cours d'exécution sur votre serveur local.
Il est maintenant temps de nettoyer les fichiers par défaut et de préparer notre application.
Dans ton src dossier, tout supprimer sauf App.js et index.js. Puis ouvert index.js et remplacez le contenu par le code ci-dessous.
importer Réagir de 'réagir'; importer ReactDOM de 'react-dom'; importer l'application depuis './App'; ReactDOM.render (, document.getElementById ('root'));
J'ai essentiellement supprimé le registerServiceWorker lignes connexes et aussi la import './index.css'; ligne.
Aussi, remplacez votre App.js fichier avec le code ci-dessous.
importer Réagir, Composant de 'réagir'; La classe App étend le composant render () return () export par défaut App;
Maintenant nous allons installer les modules requis.
Dans votre terminal, tapez les commandes suivantes pour installer le réagir-routeur et groupe de transition-réaction modules respectivement.
npm installer react-router-dom --save
npm install [email protected] --save
Après avoir installé les paquets, vous pouvez vérifier la package.json fichier dans votre répertoire de projet principal pour vérifier que les modules sont inclus dans les dépendances.
Il existe fondamentalement deux options de routeur différentes: HashRouter et BrowserRouter.
Comme le nom l'indique, HashRouter utilise des hachages pour garder une trace de vos liens, et il convient aux serveurs statiques. D'autre part, si vous avez un serveur dynamique, il est préférable d'utiliser BrowserRouter, compte tenu du fait que vos URL seront plus jolies.
Une fois que vous avez choisi celui que vous devriez utiliser, continuez et ajoutez le composant à votre index.js fichier.
importer HashRouter de 'react-router-dom'
La prochaine chose est d'envelopper notre
Donc, votre finale index.js Le fichier devrait ressembler à ceci:
importer Réagir de 'réagir'; importer ReactDOM de 'react-dom'; importer HashRouter depuis 'react-router-dom' import App depuis './App'; ReactDOM.render (, document.getElementById ('root'));
Si vous utilisez un serveur dynamique et préférez utiliser BrowserRouter, la seule différence serait d'importer le BrowserRouter et l'utiliser pour envelopper le
En enveloppant nos
À l'intérieur de notre et
Créez un dossier nommé "Composants" dans ton src répertoire, puis créez le Menu.js et Content.js des dossiers.
Remplissons notre Menu.js composant.
Ce sera un composant fonctionnel sans état puisque nous n’avons pas besoin d’états ni de crochets de cycle de vie.
importer Réagir de 'réagir' const Menu = () => return (
Ici nous avons un balises, qui seront nos liens.
Maintenant, ajoutez la ligne suivante à votre Menu composant.
importer Link de 'react-router-dom'
Et puis envelopper le contenu de la balises avec le composant.
le le composant est essentiellement un réagir-routeur composant agissant comme un tag, mais il ne recharge pas votre page avec un nouveau lien cible.
Aussi, si vous appelez votre une balise en CSS, vous remarquerez que le composant obtient le même style.
Notez qu’il existe une version plus avancée de la composant, qui est
Nous devons maintenant définir où chaque lien naviguera. À cette fin, le composant a à soutenir.
import Réagir de 'réagir' importer Lien de 'réagir-routeur-dom' const Menu = () => return (
À l'intérieur de notre
Nous avons besoin de Commutateur et Route composants de réagir-routeur-dom. Alors, tout d'abord, importez-les.
importer Switch, Route de 'react-router-dom'
Deuxièmement, importez les composants vers lesquels vous souhaitez router. Voici les Accueil, Travaux et Sur composants pour notre exemple. En supposant que vous ayez déjà créé ces composants dans la Composants dossier, nous devons également les importer.
importer Home de './Home'
importer des travaux à partir de './Works'
importer À propos de './À propos'
Ces composants peuvent être n'importe quoi. Je viens de les définir comme des composants fonctionnels sans état avec un contenu minimal. Un exemple de modèle est ci-dessous. Vous pouvez l'utiliser pour les trois composants, mais n'oubliez pas de modifier les noms en conséquence.
import Réagir de 'réagir' const Home = () => return (Accueil) export default
Nous utilisons le
Les itinéraires sont des composants appelant votre composant cible s'il correspond à la chemin soutenir.
La version finale de notre Content.js Le fichier ressemble à ceci:
import Réagissez à partir de 'réagir' import Switch, Route à partir de 'react-router-dom' import Home from './Home' import Works from './Works' import About from './About' const Content = () = > retour () exporter le contenu par défaut
Notez que le supplément exact un accessoire est requis pour le Accueil composant, qui est le répertoire principal. En utilisant exact force le Route faire correspondre le chemin exact. Si ce n’est pas utilisé, d’autres chemins commençant par / serait également égalé par le Accueil composant, et pour chaque lien, il n’afficherait que le Accueil composant.
Maintenant, lorsque vous cliquez sur les liens du menu, votre application devrait basculer le contenu.
Jusqu'à présent, nous avons un système de routeur qui fonctionne. Nous allons maintenant animer les transitions de route. Pour ce faire, nous utiliserons le groupe de transition-réaction module.
Nous animerons le montage état de chaque composant. Lorsque vous acheminez différents composants avec le Route composant à l'intérieur Commutateur, vous êtes essentiellement montage et démonter différents composants en conséquence.
Nous utiliserons groupe de transition-réaction dans chaque composant que nous voulons animer. Vous pouvez donc avoir une animation de montage différente pour chaque composant. Je n'utiliserai qu'une seule animation pour chacun d'eux.
Par exemple, utilisons le
Tout d'abord, nous devons importer CSSTransitionGroup.
importer CSSTransitionGroup depuis 'react-transition-group'
Ensuite, vous devez envelopper votre contenu avec elle.
Puisque nous avons affaire à l’état de montage du composant, nous activons transition et définir un délai d'attente pour cela. Nous désactivons également transitionEnter et transitionleave, puisque ceux-ci ne sont valables que lorsque le composant est monté. Si vous envisagez d’animer des enfants du composant, vous devez les utiliser..
Enfin, ajoutez le spécifique nom de transition afin que nous puissions y faire référence à l'intérieur du fichier CSS.
import Réagir de 'réagir' importer CSSTransitionGroup de 'réagir-transition-groupe' importer '… /styles/homeStyle.css' const Home = () => return () export default Accueil
Nous avons également importé un fichier CSS, où nous définissons les transitions CSS.
.homeTransition-apparaissent opacité: 0; .homeTransition -apparaître.homeTransition -apparaître-actif opacity: 1; transition: tous les .5s easy-in-out;
Si vous actualisez la page, vous devriez voir l’effet de fondu de la Accueil composant.
Si vous appliquez la même procédure à tous les autres composants routés, vous verrez leurs animations individuelles lorsque vous modifiez le contenu avec votre Menu.
Dans ce tutoriel, nous avons couvert la réagir-routeur-dom et groupe de transition-réaction modules. Cependant, les deux modules ne se limitent pas à ce didacticiel. Voici une démo de travail de ce qui était couvert.
Donc, pour apprendre plus de fonctionnalités, consultez toujours la documentation des modules que vous utilisez.
React a acquis une popularité croissante au cours des deux dernières années. En fait, un certain nombre d’articles sur le marché sont disponibles à l’achat, à l’examen, à la mise en oeuvre, etc. Si vous recherchez des ressources supplémentaires autour de React, n'hésitez pas à les consulter..
Accentsconagua