00:00Bonjour à tous et bienvenue dans cette nouvelle vidéo où ça y est, nous allons donc installer et créer notre
00:05projet React.js.
00:09Alors pour tout ce qui est installation des outils nécessaires, je vous invite à reprendre rapidement la série sur la
00:18stack Mevarn.
00:19Alors je vous le dis de suite, si vous ne l'avez pas vu, Mevarn c'est une blague, c
00:23'est parce qu'il y en a plein qui nous sortent la myrne, la merne, la marne, la machin, la
00:28truc mûche.
00:30Alors j'ai décidé d'en faire une.
00:31Et vous avez là-dedans, dans la vidéo 4 sur 6, l'installation des outils pour Angular, React et Vue.
00:39Et bien vous pouvez regarder pour React.
00:41Donc le but du jeu ici est d'installer le paquet Create React App.
00:47Attention, contrairement aux autres, ce n'est pas une ligne de commande, ça veut dire qu'on ne va pas
00:51avoir quelque chose pour lancer directement.
00:54On va utiliser NPX qui dans le monde Node.js nous permet de lancer un paquet.
01:00Il n'y a pas de ligne de commande automatisée.
01:02Alors j'ouvre un terminal, je suis dans mon dossier React, je vais rezoomer un chouïa.
01:11Normalement c'est bon, peut-être un peu plus.
01:14Ouais.
01:15Bon on verra si c'est un peu sale après, j'espère que ça sera assez bon.
01:20Normalement oui.
01:20Donc comme je vous disais, Create React App n'est pas une ligne de commande, c'est un paquet qu
01:27'on va lancer.
01:28Donc, hop, NPX qui est le lanceur de paquet.
01:33Create React App, et je vais donc nommer mon applicatif, cocktail comme beaucoup, ça va élancer le projet et créer
01:43les fichiers.
01:44Et bien évidemment aussi, créer le dossier, portant le nom du projet, et mettre les fichiers dedans.
01:50Donc clairement, j'aurai le dossier cocktail.
01:52On y va.
01:55Vas-y mon grand.
01:57Ça installe tout ce qu'il y a à installer, donc notamment le React et React DOM, ainsi que React
02:02Script.
02:04Alors oui, attention, on commence à, comme je vous disais au début, on commence à s'approcher des petites différences
02:10entre les versions de React d'avant et celles d'aujourd'hui.
02:15Alors bon, on va les voir au fur et à mesure, vous allez vite vous rendre compte.
02:20Alors ça c'est un petit peu ce que je reproche à React.
02:23En fait, on n'a pas d'environnement ni de ligne de conduite exacte avec ce framework.
02:32Si je faisais un peu mon casse-pieds, je dirais, bon, c'est Facebook, enfin méta.
02:38Donc, on ne va pas non plus cracher dans la soupe, ce framework est mine de rien assez puissant.
02:45Allez, on y va.
02:48Normalement, ça ne devrait pas tarder, sinon je ferai une coupe dans la vidéo.
02:53Ça serait sympa quand même qu'il se dépêche.
02:58Ah ben voilà, non.
03:03Allez, maintenant qu'il a mis le nécessaire, il va nous ramener tout le bousin.
03:10Il en met, hein, il en met pas mal.
03:12Tiens, on va commencer à regarder un petit peu.
03:15Ben ça y est, il a fini.
03:15Alors, on va regarder un petit peu notre projet et on va vite s'apercevoir quand même qu'il y
03:20a pas mal de différences.
03:22Du classique syndical, on a le package.json, on est dans un environnement node, donc on a notre fichier de
03:29configuration package.json.
03:32Donc, niveau dépendance du classique standard, comme beaucoup de framework, une partie test et la partie mécanique.
03:39React, React DOM, React Script et le WebVital.
03:44Contrairement à ce qu'on voyait dans les versions d'avant, il n'y a plus les paquets Webpack.
03:48Webpack est directement utilisé, mais il n'existe plus.
03:51Vous allez voir d'ailleurs que ça va nous poser un petit problème.
03:54Donc, on est simple.
03:56React, React DOM, React Script.
03:59Des systèmes de démarrage pour démarrer en dev, générer le mode production, le même délire côté test.
04:09Le fichier, enfin, la partie configuration du linter.
04:14Et enfin, tout ce qui est browser list avec des versions de compatibilité.
04:19Je ne vais pas revenir dessus.
04:21Disons que là, on peut définir la version avant, celle d'aujourd'hui, ou la version d'après.
04:27Ça, en général, au début, pour commencer, je vous invite à ne pas forcément y toucher.
04:34Côté public, on a évidemment un classique standard du robot TXT, pour dire pour les crawlers.
04:42Le manifeste, même délire.
04:44On ne va pas y toucher et on ne va pas y revenir.
04:46Ça permet de définir d'autres points.
04:50Notre fichier de démarrage, index.html.
04:54Comme beaucoup de frameworks, ça va se glisser dans l'élément qui est la divroute.
05:01On va le voir après.
05:04Qu'à la divroute, non.
05:05Qu'à l'idroute.
05:06Donc ça, c'est tout le côté public.
05:08D'ailleurs, là aussi, il y a une particularité, on y reviendra.
05:11Et puis, le cœur du système, donc, SRC.
05:15Alors, il y a des trucs qu'on va utiliser et d'autres qu'on va supprimer.
05:18Comme l'apptest ou les setup tests, etc.
05:23Ça, on n'en a pas besoin, puisqu'on ne va pas faire de test ici.
05:26Ce qu'on repère dans un premier temps...
05:28Alors, hop, j'aurais quand même regardé...
05:31Non, il va directement le mettre.
05:34Notre script d'entrée, très important.
05:37Là, on voit bien qu'au niveau du DOM, il va se glisser dans l'élément qui est l'idroute.
05:45Tout est là.
05:46Et puis, on a un render.
05:48Tout est question de render dans React.
05:52On va directement appeler le composant app.
05:56Composant app, donc, qui a été importé.
05:59Même délire.
06:00On est, mine de rien, dans un environnement node.
06:03Et dans un environnement node, pardon, si on veut utiliser un truc, on l'importe avant.
06:09Classique.
06:11Et donc, enfin, notre app, qui au final n'est qu'une fonction, toujours pareil, qui a un return.
06:19C'est comme ça que ça fonctionne.
06:20Alors, vous êtes quand même censé avoir un peu vu les objets React, pour poursuivre.
06:26Et on a simplement notre page.
06:29Donc, aujourd'hui, dans React 18, ce qu'on dit, c'est qu'on a des functional components.
06:34C'est-à-dire des composants de fonction.
06:36Alors, ça aussi, vous allez voir, ça va apporter un petit...
06:39Il y a un petit changement qui se glisse, mais vous allez voir.
06:44Je précise de suite.
06:46Ici, là.
06:47Voyez.
06:48On a nos éléments avec className, et non pas classe.
06:53Pourquoi ?
06:54Et il y a plein de petits trucs comme ça.
06:56Tout simplement parce que, de base, on est dans un environnement JavaScript.
07:01Enfin, node, mais on fait du JavaScript.
07:04Si je reprenais tel qu'on l'a dans l'HTML,
07:09classe.
07:11Classe en JavaScript, c'est un mot-clé.
07:13Ça veut dire une classe, un objet spécifique.
07:16C'est pour ça que, ici, comme on est toujours dans un environnement JavaScript,
07:21on a className.
07:21Comme ça, il n'y a pas de confusion.
07:24Et quand ils ont créé React, ils se sont dit qu'au moins, il n'y aura pas d'échange.
07:29Pour faire du CSS, on a des classesNames.
07:34Et contrairement à une classe qui est vraiment un objet JavaScript.
07:38Tout ça, c'est parce que, ici, là, même si vous écrivez de l'HTML,
07:42c'est le montage JSX,
07:44vous êtes dans du JS.
07:48La spécificité de JSX, c'est qu'on écrit comme ça directement notre HTML,
07:53avec nos imports et tout ça.
07:54Vous allez voir que tout est dans un seul fichier.
07:57Le problème, c'est que, forcément, il y a potentiellement des confusions
08:00qui peuvent se créer entre className, classe, etc.
08:05Autre changement depuis React 18,
08:08ou peut-être les versions d'avant, je n'ai pas forcément suivi.
08:11Je ne suis plus obligé d'écrire app.jsx,
08:15ou des fichiers .jsx.
08:17JS, maintenant, ça marche très très bien,
08:20il n'y a plus besoin de se prendre la tête.
08:22On écrit toujours du JSX,
08:24mais on ne se prend plus la tête avec .jsx, etc.
08:30On a notre app.jsx.
08:32Alors oui, tiens, je reviens dessus,
08:33en fait, quand on va créer nos composants,
08:35parce que app.jsxx n'est qu'un composant.
08:37À chaque fois, de façon standard,
08:40on va nommer la classe de notre composant
08:45avec le nom du composant.
08:46Ce qu'il faut comprendre aussi,
08:47c'est qu'on a un élément racine dans le return, toujours.
08:53Alors, soit on en a besoin, soit on n'en a pas besoin.
08:55On verra avec l'histoire des fragments.
08:57Mais on va utiliser cette convention.
08:59Ça nous permettra de faire du CSS un peu plus propre.
09:04OK, ça c'est vu.
09:06Donc on a, je reprends, l'index.js,
09:09le fichier de démarrage, le script de démarrage.
09:13Lui, c'est le fichier de style généraliste.
09:19Notre app.jsxx, qui est notre premier composant,
09:23la première page, avec son CSS.
09:26Voilà, c'est du simple, c'est du classique.
09:29Pour démarrer notre applicatif,
09:32on a notre start ici,
09:35qui va donc nous lancer le rect script start.
09:39On ne va pas se prendre la tête.
09:40NPM run start.
09:42Alors attention, vous voyez en bas,
09:44je fais bien attention d'être dans mon dossier,
09:46parce que sinon, il n'y a rien qui va marcher.
09:48Je vais dans cocktail.
09:50NPM run start.
09:53Ça va se lancer.
09:54Il va me lancer normalement le mauvais navigateur.
10:01Très bien, il le lance de l'autre côté.
10:02C'est impeccable.
10:03Je vais pouvoir revenir ici.
10:07Hop.
10:08Donc ça, c'est bon.
10:09Vous l'avez vu, la playlist.
10:11Donc on se met sur le port 3000.
10:15Et voilà.
10:16On a notre page directement.
10:21Et vous voyez qu'ici, c'est quasi du live reload,
10:26comme tous les frameworks.
10:27Si je change, par exemple, un truc ici,
10:30j'enregistre, il recompile.
10:35Quand tu veux.
10:36Voilà.
10:37Et ça se met à jour automatiquement ici.
10:38Donc tout va bien.
10:40Allez, la prochaine vidéo,
10:43on va s'occuper de créer nos pages.
10:45Et puis on va en profiter pour voir les petits outils,
10:49les petites astuces,
10:50parce qu'il y a plein de petits trucs pour nous aider.
10:54Et ça va nous aider à aller un peu plus vite
10:56et de faire des choses un peu plus propres.
10:59Prochaine vidéo donc.
11:00Les pages du composant public,
11:04enfin de la partie publique.
Commentaires