00:00Bonjour à tous et bienvenue dans cette nouvelle vidéo qui n'est pas vraiment une nouvelle vidéo.
00:04Ici le but du jeu c'est de modifier un petit peu la vidéo qui dans la playlist où on
00:09se trouve a été faite avec une ancienne version qui commence à dater.
00:15Donc là le but du jeu c'est de reprendre cette vidéo et de voir un petit peu comment ça
00:19se passe aujourd'hui.
00:21Si vous avez fait la playlist React plus Vite ou les différences avec Vite et le QH React App, vous
00:30avez compris, vous avez vu la chose, vous aurez les liens en fin de vidéo pour ceux qui ne l
00:35'ont pas vu.
00:36Le but du jeu ici si on reprend notre playlist, on va se situer ici, c'est la nouvelle version
00:423, c'est de voir un petit peu comment ça se passe.
00:44Parce qu'il y a quand même quelques différences.
00:47Alors à l'époque avec le CRA, j'avais donc lancé NPMON Create React App, il me semble, NPX, c
00:57'est pas bien grave.
00:58Ici on va le faire avec Vite.
00:59Je vous avais expliqué aussi à l'époque la structure des fichiers, elle change légèrement, on fera un petit comparatif
01:06d'ailleurs.
01:07Puisque ici on ne va pas forcément retrouver les fichiers tels qu'ils étaient à l'époque.
01:13Alors si on regarde un petit peu cette documentation que je vous mettrai aussi dans la description, on a une
01:21façon très simple pour attaquer la chose.
01:24Alors bien évidemment on a des raccourcis, mais la façon la plus simple c'est le NPM Create Vite Arrobas
01:29Latest.
01:30Vous allez voir que cette commande est interactive et même par rapport à la documentation, elle a changé.
01:36Alors on va voir ça.
01:37Je suis dans mon terminal, dans un nouveau dossier et je fais NPM, attends, hop là, NPM Create, voilà.
01:47Vite Arrobas Latest.
01:49J'ai plus qu'à lancer.
01:52Alors par contre il se peut effectivement que depuis le temps que j'ai installé Vite sur ce poste et
01:57aujourd'hui, il me propose une mise à jour.
01:59Mise à jour que je vais faire.
02:01Et là il commence son côté interactif, le nom du projet.
02:05Alors il y a une petite astuce en fait, si vous voulez le faire dans le dossier où vous êtes,
02:10le point fonctionne très très bien.
02:12Le point en informatique voulant dire le dossier où on est.
02:16Et là il y a une grosse différence par rapport à la documentation, c'est que déjà on a beaucoup
02:20plus de framework à disposition.
02:24Évidemment on va passer sur React, on a du vu, un truc qui est arrivé il n'y a pas
02:29très longtemps, Angular.
02:31Alors ça je vous avouerai que je n'ai pas testé, je ne sais pas ce que ça vaut.
02:35Moi j'ai l'habitude d'utiliser la ligne de commande d'Angular avec le ng-serve.
02:40Et bien là, ça sera intéressant de voir un petit peu.
02:43Donc je prends du React.
02:45Là encore il y a une petite modification.
02:48Il vous propose un petit peu à la sauce Next, qui est un autre framework, un montage dédié ou orienté
02:56routage.
02:57Alors dans la playlist que vous allez voir, le routeur, je vais l'installer moi-même.
03:01Et ce n'est pas dérangeant, on peut encore faire comme ça.
03:05Mais moi je vais taper du simple, on est là pour monter, pour découvrir comment on monte.
03:09Hop, JavaScript React.
03:11Donc ça c'est avec les deux dernières versions du routeur.
03:15Celui-là, il vient d'arriver, je ne le connais pas.
03:18Il faudrait que je regarde aussi.
03:19Hop, il fait son installation.
03:22Alors comme j'avais choisi point, donc il le fait là où je suis.
03:27Et si vous aviez par contre mis un nom de dossier, ça vous aurait créé encore un dossier et mis
03:34les fichiers à l'intérieur.
03:36Ok, bon, allez hop, ça c'est fait, on a vu les choses.
03:40Alors maintenant qu'est-ce qui se passe ?
03:41Et surtout c'est quoi la différence avec le reste ?
03:44Le package JSON, votre fichier de configuration qui s'est quand même grandement simplifié.
03:50On a par contre les scripts, les raccourcis et nos dépendances.
03:55Ok, le lock ne bouge pas.
03:57Le fichier index, donc le fichier de démarrage par rapport à tout ça.
04:02Et enfin, là où on va travailler, donc notre main JSX, forcément, qui est notre fichier de démarrage, son style,
04:11le premier composant qui va représenter la première page.
04:14Bon, c'est du classique syndical, vous allez voir dans la vidéo suivante pour reprendre un petit peu les choses.
04:20Et les assets si vous voulez faire de la ressource.
04:23Bon, notre dossier public, je vous avoue que c'est là où je mets toutes les images par rapport à
04:27la construction classique, mais ça vous le verrez.
04:30Et enfin, notre fichier de configuration de notre bundler.
04:34Ça y est, là, ici on va pouvoir lui expliquer pas mal de choses.
04:38Si vous allez regarder la playlist Vite, React Vite, vous allez voir qu'on peut faire énormément de choses.
04:45C'est pas forcément important de le taper ici.
04:48Sachez que c'est dans ce fichier qu'on peut lui donner des modes de fonctionnement.
04:53Et vous allez voir qu'au final, dans la vidéo je vais le faire d'ailleurs, vous allez voir qu
04:56'au final, il y a des raccourcis qu'on va prendre ici.
04:59Donc, Vite vous a généré votre structure.
05:04On retrouve, c'est un projet JSNode, donc pas de problème, on retrouve nos structures.
05:12Vous verrez dans les vidéos, je ferai npm run start, parce que c'était avec le QA React App.
05:16Forcément, vous faites un npm run dev.
05:21C'est simplement ça la différence.
05:24Et ensuite, il n'y a rien qui change.
05:28On se retrouve toujours dans le SRC.
05:30Et vous allez voir que dans les vidéos qui vont suivre de cette playlist,
05:34et bien au final, il n'y a pas grand chose qui change.
05:37Voilà, ça c'est pour la vidéo de mise à jour de comment on crée un projet avec Vite.
05:45Je vous mets en bas à gauche la playlist React plus Vite.
05:51Donc là aussi, vous voulez rentrer un peu dans les détails de Vite.
05:53Et en haut à gauche, vous avez donc la suite de cette playlist.
05:58Comment créer un applicatif avec React.
Commentaires