00:00Bonjour et bienvenue dans cette vidéo où nous allons nous occuper du layout.
00:05Je vous rappelle, alors petit point ici, que notre objectif est de faire passer nos pages publiques dans un composant
00:12layout
00:13qui va s'occuper du cadre, du squelette de notre page, en l'occurrence le header qu'on avait créé
00:18dans la vidéo précédente.
00:20Et puis c'est surtout le fait de sortir cette inclusion à chaque fois du header.
00:25Certes ça fonctionne mais c'est pas très propre, c'est pas très maintenable.
00:29Si vous créez une page, il ne faudra pas oublier d'inclure le header, etc.
00:34Alors pour faire déjà notre objectif, je vais supprimer tout ça.
00:43Je vais faire quelque chose de propre.
00:44Nos pages donc n'ont plus de header.
00:48Ça c'est fait.
00:51Et enfin, service et contact.
00:54Voilà, je supprime l'engin.
00:57Mon menu, il a dégagé.
01:00Je regarde.
01:01Voilà, j'ai plus de menu.
01:03Bon, évidemment ça va poser problème mais c'est pas grave.
01:07Donc, mes pages, ok.
01:09Hop.
01:11Ah oui, je suis obligé de laisser mon app par contre.
01:13Hop là.
01:16Alors, il y a différentes façons.
01:18Il y a deux façons que j'ai vues, que j'ai utilisées pour faire ce genre de choses.
01:25Il y a soit on fait des routes enfants.
01:27Et on va le voir.
01:28Enfin, des routes enfants.
01:29On s'entend.
01:31Soit on fait un envoi direct à.
01:36Vous allez comprendre.
01:38Alors pour l'instant, je vais utiliser la route enfants.
01:42Et on verra quand on s'occupera du layout.
01:46De, du, pardon.
01:48Quand on s'occupera de catégoriser nos pages.
01:50Donc une partie publique, une partie admin.
01:53Il y a potentiellement une autre façon de faire.
01:55Je vous montre la façon la plus simple, la plus élémentaire de la chose.
02:00Ici, donc, j'ai mes routes.
02:03Et ce que je vais dire, c'est que ça va simplement, en tant qu'enfant, traverser un élément.
02:11Alors, je vais me créer ici un nouveau composant que je vais appeler layout.js.
02:18Layout.js, ce n'est qu'un composant.
02:20Donc, RSC, bam.
02:22Et ici, le layout.
02:26Simple.
02:26Et toujours pareil, petit réflexe, class name.
02:31Layout.
02:32Boom.
02:34Très bien.
02:35A partir de maintenant, je veux que tout traverse ce layout.
02:38Donc, je vais aller dans le routeur.
02:41Hop.
02:43Et je vais simplement rajouter une route, mais une route parente.
02:46Vous allez comprendre.
02:48Route.
02:49Je ne définis pas de pass.
02:51Je dis que ça va me chercher...
02:54Hop, pardon.
02:54Donc, le layout.
02:58Il va me l'inclure en haut.
02:59Je vais aller modifier après.
03:01Et là, je ne vais pas faire une balise orpheline.
03:03Je fais une balise fermante.
03:05Et toutes mes routes vont aller à l'intérieur de ce parent-là.
03:10Alors, déjà, je corrige.
03:13Ici.
03:14Voilà.
03:15Et je dis que toutes mes routes...
03:18Hop.
03:20Tac.
03:23Vont directement ici.
03:26Et j'indente proprement mon code.
03:29Et donc, c'est simplement inclure mes routes, qui vont devenir des routes enfants, là-dedans.
03:36Hop, là.
03:40Ici, c'est bon.
03:42Dans mon layout, par contre, il y a un truc très important qu'il ne faut pas que j'oublie.
03:46C'est l'affichage du routeur.
03:48Parce que là, pour l'instant, j'ai le layout.
03:51Je peux aller dans tous les menus que je veux.
03:53Tiens, contact.
03:55Il n'y a rien qui s'affiche.
03:58Parce que le routeur, on a besoin de lui expliquer que...
04:01Bah, écoute, mon grand, maintenant, tu affiches ça là-dedans.
04:03Et pour faire ça, on a besoin du routeur Outlet.
04:10Oui, il n'est pas importé.
04:12Oh là là, Feignas.
04:14Hop, voilà.
04:15Le Outlet du React Router DOM.
04:18Je n'oublie pas de fermer.
04:19Boum.
04:20J'enregistre.
04:23Et maintenant, on a notre layout.
04:25Hop, je peux faire Home.
04:27On a notre layout et les pages qui s'affichent à l'intérieur.
04:31Alors, même topo.
04:32Soit vous faites balise ouvrante, balise fermante.
04:36Soit vous faites une balise orpheline.
04:38Je rappelle qu'en HTML5, une balise orpheline, c'est une balise qui n'est pas ouvrante et fermante.
04:44Et ça fonctionne pareil.
04:46Bon, évidemment, je n'ai pas mon menu.
04:47C'est complètement idiot.
04:50Donc, je vais enlever ça.
04:52Et je vais me l'inclure.
04:54Hop.
04:54Header du Component.
04:57Tac, vous voyez, on commence à avoir des deux points qui arrivent dans tous les sens.
05:00Hop là.
05:01Pardon, je ne l'ai pas fermé.
05:04Très bien.
05:05J'ai mon header.
05:06Et à partir de ce moment-là, le routeur va afficher.
05:10Alors, hop, je vais mettre ça ici plutôt.
05:13Je ferme ça.
05:14Voilà.
05:16Toutes les routes qui sont en fente de ceci s'afficheront ici.
05:24Là où on a le, entre guillemets, routeur outlet.
05:27Je regarde.
05:29Et hop, ça y est.
05:30J'ai bien mon layout qui s'est mis en place.
05:35D'ailleurs, vous vous doutez bien que ça va être le même délire pour l'admin.
05:39Soyons simples.
05:40Et puis qu'ici, on pourrait se mettre en dessous du route-let, un footer.
05:45Comme ça, à partir de ce moment-là, tout est entièrement à l'intérieur de mon layout.
05:52Donc, l'autre façon un peu bizarre, je ne vais pas forcément vous la montrer parce qu'au final, ça
05:58ne ferait que complexifier un peu le délire.
06:03Donc, il y avait une méthode expliquant que, hop, si vous voulez, je le montre simplement.
06:12Route avec le path d'origine.
06:17Alors, route, c'est mieux.
06:20En fait, l'origine, mais tout ce qui est à l'origine.
06:25On allait dans l'élément, donc, layout.
06:31Hop là, tac, tac, tac, je ferme ma route, boum.
06:34On n'avait plus besoin de tout ça.
06:39Ni de ça.
06:40Alors, c'est vrai que ça simplifiait quand même, parce qu'à la fin, on n'avait plus que cet
06:44élément-là.
06:46Bon, évidemment, pour certains éléments, ça va être quand même assez pratique.
06:51Pour l'instant, je vous montre simplement l'affaire du layout, qui est relativement simple.
06:59Hop, ça, je commente.
07:01Voilà.
07:02Peut-être que dans le développement de notre projet, on en aura besoin de ce fonctionnement-là.
07:07Alors, c'est pareil, du coup, les routes, elles vont dans le layout.
07:10Là, il n'y a aucune route.
07:11Mais si je fais ce principe-là, c'est-à-dire tout ce qui est étoile, tout ce qui correspond,
07:17ça va dans le layout.
07:19Ça veut dire qu'inévitablement, j'ai mes routes qui se mettent, hop, ici.
07:24Il me faut l'outlet, par contre.
07:26Ça, c'est indispensable.
07:27Et du coup, ici, je n'ai plus que la route standard et la route magique.
07:35À voir.
07:36Mais ça génère des problèmes, parce que la route comme ça, slash, ça correspond de temps en temps à ça.
07:42Donc, il faudrait l'attribut exact.
07:44Enfin, on ne va pas se compliquer la vie.
07:47Pour l'instant, on fait des choses simples.
07:50Hop là.
07:51Tac.
07:53Et tac.
07:54Voilà.
07:55On est là.
07:56On est bien.
07:57On a notre site qui fonctionne.
08:00Côté public.
08:02Vous voyez ?
08:02Tout est OK.
08:04Tout est fonctionnel.
08:05C'est impeccable.
08:06Par contre, ce n'est pas super rangé.
08:09Vous voyez ?
08:10Au bout d'un moment, on a tout notre routeur qui est ici.
08:13Ça commence à être un peu complexe.
08:15Il y a quelque chose qui...
08:17Plus on va avancer dans le temps, plus on va avoir nos routes qui vont se mettre ici.
08:22Ce n'est pas génial.
08:24Alors, prochaine vidéo, on va optimiser notre routage.
08:27Et puis, on va le rendre un peu plus propre.
08:29Et encore une fois, un peu plus maintenable.
Commentaires