Passer au playerPasser au contenu principal
  • il y a 3 jours
Développer un applicatif web avec le framework ReactJS 18

Notre projet est en place, commençons par créer nos pages publics.
C'est une histoire de composant vous allez voir on est dans du simple

👀 Dépôt Github
https://github.com/FaisonsLePoint/front_reactjs

Catégorie

🤖
Technologie
Transcription
00:00Bonjour à tous et bienvenue dans cette nouvelle vidéo
00:02qui elle n'est pas une nouvelle vidéo puisque c'est la mise à jour de la vidéo
00:07de notre playlist ReactJS
00:13la numéro 4 pardon
00:15donc dans cette vidéo je vous ai expliqué que
00:18par exemple on va ici, je ne sais plus si c'est là blabla
00:23oui, dans cette vidéo je vous ai expliqué que
00:26faire les imports, et vous allez comprendre
00:28faire les imports c'est bien mais il faut utiliser des raccourcis
00:32parce que sinon on ne sait plus tellement
00:34enfin il faut, c'est plus pratique d'utiliser des raccourcis
00:37sinon on ne sait plus où on se positionne
00:40ici je commence avec un raccourci sur contact
00:44avec arrobase, chose qu'on pouvait faire avant
00:48avant React18
00:50donc je remonte la méthode
00:54avec, c'était où ?
00:56voilà, avant React18 on avait la configuration webpack parce que c'était ce bundler
01:01qu'utilisait le create-react-app, l'ancien bundler
01:06on pouvait toucher ça
01:07dans React18 on ne pouvait plus
01:10et donc je vous propose sur l'époque
01:15tac, tac, tac, tac, tac, voilà
01:17d'installer
01:19Craco
01:21ok, Craco c'était bien
01:22à l'époque ça marchait très bien, on peut faire d'autres choses d'ailleurs avec cet outil
01:26ce n'est plus nécessaire avec Vite
01:30alors, hop, on va aller regarder ça
01:34voilà
01:35dans une vidéo précédente de mise à jour
01:38je vous ai montré comment créer votre projet avec Vite plutôt qu'avec create-react-app
01:43je vous rappelle qu'il y a une playlist d'ailleurs
01:45dans
01:48sur la chaîne
01:49une playlist qui explique un petit peu les différences
01:52même si ce fichier
01:54donc même si, pardon, on n'utilise plus
01:56Webpack et que ce fichier n'existe plus
01:58on a tout de même
02:00ViteConfig
02:01qui est apparu
02:03et justement
02:04c'est là où on peut commencer à faire ces raccourcis
02:07et ce raccourci, moi je vais l'utiliser
02:09tout du long
02:09dans la playlist sur laquelle vous êtes
02:13alors, ici c'est très très simple
02:15et vous allez me voir l'utiliser
02:16alors vous pouvez regarder après la vidéo entre guillemets dans l'ancienne version
02:20ça vous montrera un petit peu pourquoi je le fais
02:23parce que là je vais
02:24j'ai un peu vite
02:25je vous explique comment le mettre en place
02:27c'est dans la vidéo après où je le détaille
02:29c'est parce que ça c'est une vidéo de mise à jour
02:32donc ce raccourci là
02:34hop
02:36que j'utilisais avant
02:38enfin avant j'utilisais Craco pour pouvoir le faire
02:41donc il fallait installer Craco, etc. etc.
02:43ne le faites pas
02:44n'installez pas Craco
02:46en fait ce que vous allez faire
02:48ici
02:50simplement lui dire
02:51qu'on va ajouter un nouveau système de résolution
02:54entre guillemets de nom
02:56on va créer un alias
02:59hop
03:00et cet alias
03:01ce raccourci
03:02ce surnom
03:03entre guillemets
03:04on va lui dire
03:05qu'à chaque fois que tu vas trouver
03:07arrobase
03:07hop
03:11on va le remplacer
03:13donc attention c'est en anglais
03:14par paf
03:17hop
03:17point
03:18resolve
03:21donc le dossier où on est
03:23et c'est le dossier SRC
03:25alors attention
03:26passe
03:26il faut l'importer
03:28donc on revient un petit peu dans les imports
03:30import
03:31paf
03:35ça c'est un module qui existe déjà dans l'écosystème React
03:38donc pas de problème
03:41il se peut de temps en temps
03:43que votre système
03:44ça se produit sur un autre PC
03:46qui vous dise
03:46Dear Name
03:47je ne connais pas
03:48à ce moment là
03:49vous laissez faire
03:50VS Code
03:51vous allez voir qu'en dessous de la pop-up
03:53qui indique une erreur
03:54si vous avez cette erreur
03:56il va vous indiquer
03:58une résolution rapide
04:00et dans la résolution rapide
04:01il y a ignorer pour tous les fichiers
04:03vous cliquez dessus
04:03ça cache l'erreur
04:06c'est pas bien important
04:07et pas besoin d'aller chercher
04:09à recréer Dear Name
04:11etc
04:11etc
04:12donc voilà
04:13ça c'est vrai
04:14c'est tout ce qu'il y a à mettre à jour
04:16comparé à la vidéo suivante
04:18où il faut
04:18craco
04:19machin
04:19bidule
04:19truc mûche
04:20c'est tout ce qu'il y a à faire
04:21ça fait partie de l'écosystème
04:23vous mettez ça en place
04:24et vous pouvez suivre
04:26la vidéo
04:27la vidéo suivante
04:28qui vous explique donc
04:29comment mettre en place
04:31les premières pages
04:32voilà
04:33c'était la petite mise à jour
04:34avec Vite
04:35et son système de résolution de nom
04:38dans
04:38dans la partie gauche
04:40en bas
04:41je vous mets tout de même
04:42le lien de la playlist
04:43qui explique React
04:45et Vite
04:45en détail
04:46si vous le désirez
04:47en haut à gauche
04:48vous avez le lien
04:49pour le reste
04:50de la playlist de React
04:52c'est parti qui fait la playlist de la vidéo
Commentaires

Recommandations