00:00Bonjour à tous et bienvenue dans cette vidéo où nous allons nous occuper de rajouter un petit composant header
00:05pour faire notre menu de navigation, les liens qu'on va utiliser pour pouvoir naviguer simplement dans nos pages.
00:17Alors on va se faire un petit composant du coup puisque là c'est un élément supplémentaire,
00:24un truc qu'on va greffer dans une page et comme je sais que j'ai des éléments publics et
00:30que j'aurai des éléments admin,
00:31je vais directement me faire un dossier.
00:34Donc là je vais faire le dossier public et dans le dossier public je vais faire le header.js.
00:44Encore une fois, vous n'êtes pas obligé de mettre de la lettre majuscule, moi c'est une convention que
00:50je me suis fait,
00:52comme ça c'est plus simple.
00:54Toujours pareil avec mon petit...
01:00Tu ne le prends pas ? Si tu le prends.
01:03Voilà, donc là j'ai mon header.
01:07Ici on va mettre un header.
01:14On va faire quelque chose d'html propre.
01:17D'ailleurs ça va nous permettre de voir un petit truc ici.
01:19Donc je mets mon header et c'est dans le header que je vais faire mes liens.
01:25Alors, toujours html5 propre, header, nav, ul, li,
01:38et on s'en cogne 3, puisque j'ai 3 liens.
01:48Ok.
01:49Alors, basiquement ce que vous avez c'est du A, blablabla, etc.
01:53Mais là on ne va pas faire du A, on va faire du link.
01:56Alors pour faire du link, on va importer link de react-router-dom.
02:12Ok, et ici on va pouvoir les placer.
02:16Link avec une lettre majuscule, pour le coup, soit on va le placer ici, tranquillement.
02:24Et ce qu'on va y définir ici, d'ailleurs je vais reprendre ça directement.
02:31Hop, tac, et ici, tac.
02:34Ce qu'on va définir ici, ce sont exactement les paths qu'on a définis ici.
02:41Donc là, je dis que je vais à Home.
02:46J'ai comme une balise A en fait, il n'y a pas spécifiquement de...
02:51Il n'y a pas de truc hyper technique, voilà, et ici, contact, hop, contact.
03:04On n'oublie pas, de toute façon après ça changera, class name, header.
03:11Comme ça c'est un petit...
03:12Autant prendre ce réflexe, à chaque fois comme ça vous êtes tranquille.
03:16Impegable.
03:18Là on a tout ce qu'il faut.
03:21Maintenant ce que je veux faire, c'est le greffer dans mes menus.
03:25Alors le premier réflexe, et vous allez voir qu'après évidemment on les modifiera.
03:29Le premier réflexe, c'est de se dire...
03:32Non, je n'ai pas dit ici, j'ai dit là.
03:35C'est de se dire, je me l'intègre directement dans mes pages.
03:41Pourquoi pas ?
03:41Ça peut être tout à fait envisageable.
03:45Ici je mets mon header.
03:48Hop, ça t'es gentil, hop, arrobase.
03:53Hop là.
03:55Dans la home, je vais prendre l'import, de toute façon c'est du copier-coller au bout d'un
03:58moment.
04:00Largement plus simple.
04:02Tac, ça c'est service.
04:09Mais non, c'est header, je suis bête.
04:11Autant pour me.
04:16Ah, c'est pas ça qui change.
04:17Donc je me l'intègre ici.
04:24Hop.
04:26Et je le mets également ici.
04:34Ok.
04:34Alors évidemment maintenant quand je vais sur mes pages...
04:37Youp, qu'est-ce qui me fait ?
04:38Ah oui, héhéhéhéhé.
04:40Justement.
04:41Quand je vais sur mes pages, donc j'ai mon menu qui s'affiche.
04:43Problème ici, si je clique sur service, alors que je suis déjà sur la page service, vous voyez qu'il
04:49me rajoute service après.
04:52Tout simplement parce que dans mon menu, il faut que je lui dise, tu es gentil, mais de là où
04:59tu es, tu reviens à la racine.
05:02Voilà.
05:04Donc on remet un slash pour dire tu reviens à la racine du site.
05:07Donc évidemment, service n'existe plus.
05:11Je reviens, je suis sur home, service, contact, accueil, voilà.
05:15Maintenant c'est fonctionnel, parce qu'on lui a mis un slash devant, donc il sait qu'il revient à
05:19la racine.
05:20Tout le moins à la racine de là où il est.
05:22Et là où il est, c'est localhost 2.3000.
05:26Ok.
05:26Ça c'est bon, c'est fonctionnel.
05:28D'ailleurs on va y coller un peu de style quand même, histoire de faire quelque chose d'un peu
05:32plus en tête.
05:34Donc ce que je vais faire dans un premier temps, c'est me créer un fichier CSS pour mon bestiaux
05:39ici.
05:40Donc je fais un nouveau fichier, hop, header.css.
05:45Alors pareil, j'ai une convention habituelle, les fichiers CSS quand ils sont à côté de leurs composants, c'est
05:51le même nom, sans la lettre majuscule.
05:54J'en profite parce que, évidemment, moi je développe dans un environnement Linux.
05:59Ça serait bien que tout le monde d'ailleurs se mette sur ces environnements, puisque 90% du web est
06:04sous environnement Linux.
06:05Je parle des serveurs.
06:07Et le principe de base, le paradigme de base, c'est de se dire, je développe dans le même environnement
06:12de prod.
06:14Que la prod.
06:16Et là-dessus, c'est sensible à la case.
06:18Donc un H majuscule n'est pas la même chose qu'un H minuscule.
06:21Donc j'ai bien deux fichiers.
06:22Alors, ici, c'est bon.
06:26Hop, je vais me baser sur cette entête-là.
06:31Hop, ouf.
06:36Oui, allez, on va faire comme ça.
06:38Donc, ul list style, hop, none.
06:46Donc j'enlève les puces.
06:48Il me semble qu'il y a un padding ou un margin dans ces trucs-là.
06:53Alors, attendez.
06:56Hop.
06:59Ul.
07:00Ouais, il y a un.
07:03Il y a un padding.
07:05Il y a un padding pourri.
07:07C'est ça ?
07:08Si je mets padding 0 pixels.
07:13Oui, le ul colle bien pile-poil.
07:16Ok.
07:16Donc, tac, padding 2.0 pixels.
07:23Ensuite, mon ul, li, je vais les mettre sur une seule ligne.
07:29Display 2.inline block.
07:33Et non pas display.
07:34Ça ne doit rien dire.
07:36Et je vais faire un margin write de 20 pixels pour les espacer un petit peu.
07:43Et enfin, ici, Léa.
07:47Donc, text, decoration, none.
07:51J'enlève les lignes du dessous.
07:54Et je reste en couleur black.
07:58Continuellement.
07:59Ok.
07:59J'ai mon style, mais pour l'instant, il n'est pas venu.
08:01Mais ici, c'est assez simple.
08:06import header.css
08:08Alors, là, par contre, je n'utilise pas le système d'arrobas pour la bonne et simple raison que par
08:16convention, encore une fois, c'est personnel, vous pouvez en faire une autre.
08:20Je vais garder le fichier CSS à côté de son composant.
08:25Donc, c'est bien .slash, puisque c'est à côté, c'est dans le dossier où je suis.
08:29Comme ça, ça m'évite d'avoir des fichiers CSS à droite à gauche.
08:32Je sais que le CSS est à côté de son composant.
08:36Voilà.
08:38Déjà concernant les composants, donc les parties de site.
08:42Pour les pages, on peut faire différemment.
08:43Mais voilà.
08:44Comme ça, je sais que tout est à côté.
08:47Maintenant, ben voilà, j'ai bien mon menu qui s'est mis ici.
08:53Je dois avoir un display qui s'est mis.
08:57Bon, ben déjà, dans app, j'ai texte Aline Center.
08:59Ce n'est pas cool.
09:05Ouf.
09:06Bon, je vais l'enlever d'app.
09:09Je vais l'enlever d'app qui doit être ici.
09:13Voilà.
09:14Donc ça, merci d'être venu.
09:18Par contre, je vais le remettre ici.
09:21Alors, hop.
09:24Donc, dans header.
09:26Voyons voir si je fais un texte Aline Center.
09:30Ce n'est pas très propre.
09:31De toute façon, après, on le corrigera.
09:34Voilà.
09:35Ici, j'ai ma page.
09:36Et puis ici, j'ai mes menus.
09:38Vous voyez que ça fonctionne toujours.
09:41On est bien.
09:42Je clique et j'ai mon comportement qui change.
09:46Impeccable.
09:47On pourrait mettre du focus.
09:49On pourrait mettre des liens is active.
09:51Puisque dans le router, vous avez le is active.
09:55On va se le prendre de suite.
09:57React Router DOM.
10:00React Router is active.
10:05Et nous, on est en 6.
10:10Bon, après, c'est sensiblement.
10:12Voilà.
10:13Is active.
10:14On va prendre un steak overflow.
10:15Ce n'est pas bien méchant.
10:19Donc, ce n'est plus des nav link.
10:20C'est link.
10:21On est d'accord.
10:23Ici, vous voyez, vous avez la possibilité d'apporter une classe.
10:27Donc, si le lien est actif, vous pouvez coller un attribut style.
10:32Je remonte ici, pardon.
10:33Vous pouvez coller un attribut style dans votre link.
10:36Et non plus nav link, aujourd'hui.
10:38C'est internaire.
10:39C'est un if.
10:40Donc, if is active est activé.
10:42Donc, si le routeur l'a activé, ça va mettre la classe green.
10:48Sinon, ça met la blue.
10:50Voilà.
10:51Tout simplement.
10:52Donc, ça vous permet de coller du style de façon un peu plus rapide.
10:56C'est le is active.
10:58Bon, on ne va pas s'en occuper ici.
11:00Ce n'est pas l'idée.
11:02Ok.
11:02Donc, on a notre menu là.
11:06Impeccable.
11:08Tout est mis en place.
11:10Ouais, attends.
11:11On va faire un truc border bottom 2 points solid 1 px gray.
11:18On va faire une petite ligne de séparation.
11:21Hop là.
11:24Ouh, que c'est joli.
11:26Ça, c'est du design, les gars.
11:29Donc, voilà.
11:30On a fait notre composant.
11:33Alors, ce composant header, il n'est pas super, super propre.
11:37Dans le sens où, déjà, premier point.
11:42Mais non.
11:42Qu'est-ce que...
11:43Ah.
11:44Hop.
11:46Inspecter l'élément.
11:48Côté HTML, vous voyez, j'ai une div là qui vient de se placer dans le header.
11:52Ce n'est pas super joli.
11:54Alors, ça, c'est logique.
11:56Puisque, hop, je vais ici.
11:59J'ai besoin d'un élément comme ça.
12:02Donc, si je fais ça, hop, je me place.
12:06Voilà, j'ai uniquement mon composant.
12:09Enfin, mon élément HTML, pardon, header.
12:13Et normalement, voilà, on a un peu limité la casse.
12:16Alors, on va rafraîchir quand même un peu.
12:19Hop, route, app.
12:23J'ai mon header.
12:25Alors, il s'est remis dans une div, le goret.
12:31Allez, on va voir.
12:33Hop, hop.
12:33Ou c'est moi qui vois mal.
12:37Ah non, oui.
12:38On a supprimé déjà cette div là.
12:41La div class header, vous voyez qu'il a remis class au lieu de class name.
12:45On a supprimé celle là.
12:47Alors, soit, vous commentez votre bousin, ici.
12:52Parce que vous n'avez pas besoin de cette div qui pollue l'HTML5.
12:56Je rappelle qu'en référencement, il y a un ratio entre le nombre d'éléments HTML et le texte et
13:02surtout les mots clés.
13:03Donc, plus vous mettez d'éléments div et plus c'est le foutoir.
13:06Enfin, votre référencement diminue.
13:08Donc, du coup, ici, on a limité.
13:10Comme il nous faut un élément racine, c'est impeccable.
13:14J'ai mon header qui est un élément racine.
13:16Au pire, on aurait pu utiliser les fragments.
13:21Hop.
13:23Tac.
13:26Et, hop, hop, hop.
13:28Pourquoi tu n'es plus commenté, toi ?
13:32Bien sûr, tout va bien.
13:35Des fragments qui sont des éléments vides.
13:37Du coup, pareil, ça ne viendra pas polluer la chose.
13:40Alors, les fragments, ils sont utiles si, par exemple, vous aviez un truc comme ça.
13:47Voilà.
13:49Voilà.
13:49Bon, là, il s'affiche ici.
13:52Utile parce que, encore une fois,
13:56dans un return de composant, dans l'affichage, il ne nous faut qu'un seul élément à la racine.
14:03Oui, mais là, j'en ai deux.
14:03J'ai le header et j'ai le div.
14:05Donc là, pour le coup, le fragment est utile.
14:09Pseudo-lément qui ne servira à rien du tout, puisque ne viendra pas dans l'html.
14:13Ici, on n'a qu'un header.
14:16On peut largement se permettre...
14:20Hop là.
14:21Puis on va indenter sa propre.
14:23Voilà.
14:23On peut largement se permettre de le laisser à la racine.
14:26Ok.
14:27Bon, cette vidéo commence à durer un petit peu.
14:30Donc, on va l'arrêter là.
14:31Et du coup, dans la prochaine vidéo, on va s'occuper, justement, de sortir ce composant qui est dans toutes
14:37les pages.
14:38Pour faire quelque chose de plus propre, de plus généraliste.
14:41Et donc, un layout dans lequel viendra se greffer notre header.
14:49Et où le routeur devra mettre les pages à l'intérieur.
14:52Comme ça, on ne s'occupe plus, dès qu'on crée une page, on ne s'occupe plus de remettre
14:56le header.
14:57Il y a différentes méthodes, vous allez voir.
15:00Et puis, c'est, encore une fois, plus maintenable.
15:04Prochaine vidéo, donc.
15:06Un layout de notre partie publique.
Commentaires