- il y a 5 semaines
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
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
🤖
TechnologieTranscription
00:00Bonjour à tous et bienvenue dans cette vidéo où on devait créer les composantes ou du moins les pages publiques
00:07donc le Home, Cocktail et Contact, on verra après pour le layout
00:12mais en fait, je vais utiliser une petite vidéo, un petit truc rapide
00:18pour vous expliquer 2-3 outils et 2-3 petites modifications pour nous aider à travailler
00:24Alors, la dernière fois, on avait notre applicatif, on l'avait lancé, créé et puis on avait lancé notre page
00:31en mode développement sur le port 3000, tout va bien
00:36Bon, il y a un truc dont je n'ai pas besoin, c'est l'apptest puisque je ne vais
00:41pas en faire
00:41donc ça je peux le supprimer, ça roule et puis je vais laisser à la racine tout ce qui est
00:46app et index
00:47grosso modo tout ce qui est fichier de lancement
00:51On va utiliser la convention standard, qu'on voit un peu partout
00:57Pour tout ce qui est pages dans le dossier SRC, je me fais le dossier Pages
01:01Et enfin, pour tout ce qui est composants, morceaux de site
01:07Morceaux qu'on va greffer en haut, à droite, devant, à gauche, derrière, diagonale, verticale, tout ce que vous voulez
01:12On les met dans Components
01:14Le plus typique, c'est le menu en haut, le header de votre site
01:18Lui il se retrouve sur plusieurs pages par exemple, comme le footer, ce sont des composants
01:23Donc on fait le dossier Components
01:26Très bien
01:29Alors, ce que je veux faire dans un premier temps
01:31C'est, je vais simplifier l'app puisque c'est mon point de démarrage
01:38Je n'en ai pas forcément besoin
01:41On va voir déjà au niveau de la mise en place
01:46Donc, dans la page, je vais me faire un nouveau fichier que je vais appeler home.js
01:53Ok
01:54On prend l'habitude de mettre
01:56Alors, moi j'ai cette habitude, vous n'êtes pas obligé du tout
01:59De mettre les pages, enfin tous les composants avec une lettre majuscule
02:05Alors, d'entrée de jeu, vous allez pouvoir utiliser un système assez simple
02:09Donc, à chaque fois, ce sont des composants
02:13Fonction, donc du Functional Component
02:17Mais on a une petite extension dans VS Code qui va aussi nous aider
02:22Et qui s'appelle React Code Sniped
02:25Si je ne dis pas de bêtises
02:32React.js Code Sniped
02:34Ça va vous aider à générer
02:37Donc c'est celui-là
02:38Ça va vous aider à générer plus facilement
02:42Nos composants
02:43Donc il est rempli de petites astuces
02:46Vous voyez, voilà
02:47Il suffit de taper des morceaux de
02:50Des morceaux de composants
02:51Des mots-clés, pardon
02:53Et ça vous génère le contenu du composant
02:55Bon
02:56Alors
02:57Si on reprend les documentations
02:59D'ailleurs, lui aussi, il nous l'explique
03:02On va créer une classe
03:04Qui va être un machin, truc mûche, bidule
03:05Aujourd'hui, c'est simplifié
03:07Je vous rassure de suite
03:08Donc une fois que vous avez installé le React.js Code Sniped
03:12On va pouvoir autogénérer
03:15Notre composant
03:16Par exemple
03:17On a notre RSC
03:21Pour React Stateless
03:23Alors je sais
03:26J'ai dit
03:28Qu'aujourd'hui
03:28On faisait des composants fonction
03:30Et que les stateless
03:32C'était avant
03:33Et vous allez voir
03:34Parce que de toute façon
03:34Dans un composant aujourd'hui
03:36Il y a un state
03:37Ça aussi, on y reviendra
03:38Vous inquiétez pas
03:40Alors ce n'est pas
03:41C'est un composant stateless
03:43Parce que je n'ai pas défini
03:44De state
03:46On l'écrirait ici plus tard
03:48Mais vous voyez que ça vous permet
03:50D'écrire facilement
03:52Votre composant
03:53Alors on pourrait se dire
03:54Attends mais c'est bizarre
03:56Ce sont des composants fonction
03:58Mais ça, ça se génère un peu bizarrement
04:01Attention hein
04:02Ça c'est la façon d'écrire
04:03Avant le S6
04:04La norme javascript
04:05Depuis 2015 donc
04:07On écrit nos fonctions comme ça
04:09Les fameuses fonctions fléchées
04:10C'est exactement la même chose
04:13Que si j'avais écrit
04:16Export default
04:18Function
04:21Home tagada
04:22Tac
04:23C'est tout pareil
04:24C'est qu'aujourd'hui
04:26On écrit plus facilement
04:27En fonction fléchées
04:29Ok
04:30Donc ici
04:31Je vais faire
04:33Home
04:34Works
04:35Voilà
04:35Ça c'est un composant
04:37Que j'ai mis là-dedans
04:38Maintenant si je veux
04:39L'utiliser dans mon app
04:42Hop
04:42D'ailleurs tiens
04:43On va enlever tout ça
04:46Je vais le mettre
04:47Oui je vais le mettre ici
04:48On s'en fiche
04:49Je n'ai plus qu'à me le greffer
04:51Donc déjà ici
04:52L'IDE me propose
04:53De l'importer automatiquement
04:55Il est là
04:56Il faut quand même le finir
04:57C'est une balise orpheline
04:59Donc
05:00On se met
05:01On le finit avec un
05:02Slash
05:02Et un chevron
05:04Si je regarde maintenant
05:05Ce que j'ai
05:06J'ai bien mon
05:07Homeworks
05:07Ici
05:09Hop
05:09Pardon
05:09Oui j'ai sélectionné
05:10L'image
05:11Mais c'est pas grave
05:12Donc on a notre
05:13Homeworks
05:13Ici
05:15Continuons
05:16New file
05:18Donc on avait dit
05:19Service.js
05:20Et
05:23Contact.js
05:28Hop
05:29Donc on va aller ici
05:30Service même délire
05:33RSC
05:34Boom
05:34Voilà
05:37Service works
05:40J'enregistre
05:41Contact
05:41Pareil
05:42RSC
05:45Hop
05:47Contact
05:48Works
05:50Voilà
05:52Je n'ai plus qu'à me les greffer
05:55Directement
05:55Ici
05:56Pour tester bien sûr
05:57Parce que c'est clairement pas le
05:59C'est clairement pas le délire
06:02Non
06:02Si je finis
06:03Il ne me le sort pas
06:04Boom
06:05Hop
06:08Contact
06:09Entrée
06:11Et on enregistre
06:12Je regarde ce que ça donne
06:14J'ai mes trois pages
06:15Qui sont ici
06:16Encore une fois
06:17Vous l'avez compris
06:17Ce n'est pas l'idée
06:20Les pages
06:21Elles ne sont jamais les unes
06:22En dessous des autres
06:23Bon
06:25Déjà
06:26Autre chose
06:27J'ai un petit problème
06:28Ici
06:30C'est que
06:32Ce n'est pas terrible
06:33Ce point
06:34Ces références
06:35Il y a des moments
06:36Ça sera
06:36Point
06:36Point
06:37Slash
06:38Point
06:38Point
06:38Slash
06:39Point
06:39Point
06:39Enfin
06:39Il faudra bouger
06:40Dans l'arborescence
06:42Ça devient un peu la panique
06:44Il y a un framework
06:45Qui l'a très bien intégré
06:46C'est VueJS
06:47On a un petit raccourci
06:49Si on commence par
06:50Arobas
06:52Ça veut dire pour lui
06:53Le dossier SRC
06:56Question propreté de code
06:57On va faire pareil ici
06:59Mais il va falloir ajouter quelque chose
07:01Parce que
07:02Bon
07:02Là si j'enregistre
07:03Arobas
07:03Il ne connait pas
07:04Il est incapable
07:05De me résoudre
07:06Le truc
07:08Alors
07:09Je vous en parlais
07:11En début
07:11De vidéo
07:13D'installation
07:14Je crois que c'est la précédente
07:15D'ailleurs
07:15Avant
07:17On avait
07:19Une petite config
07:21Webpack
07:22Donc ça nous permettait
07:23De
07:24De pouvoir
07:25Gentiment
07:26Y coller
07:28Un Webpack config
07:29Alors ce qu'on avait
07:30L'habitude de faire
07:31Hop
07:32New file
07:34Donc c'était le
07:36Webpack.config.js
07:38Hop
07:42Il est à la racine
07:44De mon dossier
07:47Oui
07:48Oui voilà
07:48Non
07:49Il est dans cocktail
07:51Oui oui
07:52Voilà
07:53Il est ici
07:54Puis ce qu'on mettait à l'intérieur
07:56Paf
07:57Je vous explique rapidement
07:59On utilisait
08:01On reprenait le Paf
08:02Le système de Paf
08:03De Node
08:04On y définit
08:06Qu'on pouvait lire
08:07Du JS
08:08Et du JSX
08:08Ça commençait déjà
08:09Dans les versions précédentes
08:12Les règles d'écriture
08:14Des résolves
08:15Et surtout
08:16Ce fameux alias
08:18Celui-là
08:19L'arrobase
08:19Qui permettait
08:20A Webpack
08:21De comprendre que
08:22Arrobase
08:23C'était le dossier
08:24SRC
08:25Et puis aussi
08:26On pouvait définir
08:27Pas mal de choses
08:29Sur
08:30Sur nos
08:31Sur nos
08:32Confils
08:34Problème
08:36Le petit problème
08:37Que nous avons
08:38Au final
08:39C'est qu'on a plus
08:40Cette config
08:41On a plus
08:42Le Webpack config
08:44Va pas être pris en compte
08:46Je vais le mettre
08:49Hop
08:50Je repars
08:53A mettre mon arrobase
08:54Saucisse merguez
08:56Comme dit l'autre
08:56Ça marche plus
08:57Alors on va utiliser
08:58Un autre objet
09:00Je sais
09:00Que c'est un peu pénible
09:01Mais je vous promets
09:02Qu'ici
09:03Côté composant
09:04Ça fait propreté
09:05Clairement
09:06Donc
09:07J'enlève mon Webpack
09:10Je supprime
09:11Ceci
09:13Et nous on va utiliser
09:15Un autre module
09:16Qui s'appelle
09:17Craco
09:19NPM
09:20Hop
09:21Craco
09:22Alors l'engin
09:23C'est un peu
09:25Pour nous aider
09:26A
09:28Configurer
09:28Vous voyez qu'ici
09:29Il y a tout ce qu'il faut
09:30Pour
09:30Pour paramétrer
09:32Toute la configuration
09:33Le fonctionnement
09:34De notre React
09:35On peut y mettre
09:3640 000 choses
09:37On voit aussi
09:38Que
09:39En fait
09:40Il prend la place
09:41Il se met en avant
09:42En frontal
09:42On va plus lancer
09:44Le React Script Start
09:46On va lancer
09:46Craco Start
09:47Et c'est lui derrière
09:48Qui va s'occuper
09:49De travailler
09:51Il y a
09:52Différentes façons
09:53De le configurer
09:54Vous avez tout ce qu'il faut
09:55Ici
09:56Vous pourrez tester
09:57Des trucs
09:57Moi le principal
09:58Et la seule chose
09:59D'ailleurs
09:59Que je veux utiliser
10:00Pour le moment
10:01C'est ce foutu
10:03Système d'alias
10:04Pour Webpack
10:04Alors
10:06On va l'installer
10:08Donc
10:09L'installation
10:10Est assez simple
10:11Où est-ce qu'elle est
10:13Ici
10:13Voilà
10:14NPM install
10:15Arrobas
10:15Craco
10:16Blablabla
10:17Bon
10:17C'est parti
10:18Alors
10:20J'arrête
10:22Mon compiler
10:23NPM install
10:26Arrobas
10:27Craco
10:28Slash
10:29Craco
10:33Hop
10:35On va le laisser faire
10:37Il va aller chercher
10:38Et boum
10:39Ça y est
10:40Joie guette et bonheur
10:41On a un souci
10:42Ne vous en faites pas
10:43Il est logique le truc
10:44Il vous dit que
10:47Il ne trouve pas
10:48De correspondance
10:49A ReactScript 4.0
10:51Mais le problème
10:52C'est qu'il a trouvé
10:53ReactScript 5.0
10:56Donc la version 6
10:57De Craco
10:58N'est pas compatible
10:59Avec la 4.0
10:59Mais pourtant
11:00Il lit la 5
11:01Voilà
11:02Il y a un peu couillon
11:03On est dans une phase
11:04Où l'écosystème de React
11:06Est en train de changer
11:07Petit à petit
11:07Et on est
11:08Tous les frameworks
11:09Les connaissent
11:10Ces phases
11:11Et on est dans
11:12Cette phase
11:13Où
11:14Il n'y a plus grand chose
11:15Qui marche
11:16Alors
11:16Ne vous inquiétez pas
11:17Il y a une solution
11:20Hop
11:22Viens ici
11:24On peut faire du Craco
11:26Alpha
11:27Alors l'alpha
11:28Ce n'est jamais bon
11:30On ne s'y amuse pas trop
11:32Ça ne va pas trop poser de problème
11:33Puisqu'on va juste
11:34Ici
11:35L'utiliser pour la partie
11:37SRC
11:38Avec l'alias
11:38Arrobase
11:40Donc c'est cool
11:40On peut se le permettre
11:42Par contre
11:43C'est clair
11:43Que si c'est pour des gros applicatifs
11:45Avec beaucoup de modifications
11:46De configuration
11:48On ne va pas s'amuser à ça
11:49On va attendre que
11:52Malheureusement
11:54Comme on va essayer
11:54De faire du propre
11:56Donc
11:57NPM install
11:58Arrobase
11:59Craco
12:00Slash
12:00Craco
12:01Slash
12:01Hop
12:03Arrobase
12:03Oui
12:06Arrobase
12:06Alpha
12:11Donc lui
12:11Craco
12:12A pris en compte
12:12Les modifications
12:13Mais on est encore
12:14En version alpha
12:15Joua guété bonheur
12:17Ça y est
12:17Ça s'est installé
12:19Et donc
12:20Dans mon package
12:21.json
12:23Hop
12:25J'ai mon Craco
12:26Qui s'est mis ici
12:27Ok
12:29Maintenant
12:31Ce qu'il faut faire
12:32C'est donc
12:32Un fichier
12:33De configuration
12:36Craco
12:37Config
12:37Donc à la racine
12:39De notre projet
12:40New file
12:42Craco
12:43Craco
12:43.config
12:44.js
12:45Ok
12:46Et dans ce fichier
12:48De configuration
12:49Bah tout bêtement
12:50Alors je l'ai déjà préparé
12:51On ne va pas se prendre la tête
12:53Hop
12:54Je récupère le système
12:56De path de node
12:56Et je définis
12:58Mon alias
12:59Donc mon arrobase
13:00Qui va correspondre
13:01Au dossier SRC
13:04Impeccable
13:04On n'oublie pas
13:06Alors je vous le mets
13:07Dans la description
13:07Le code
13:09On n'oublie pas
13:11Ici
13:12Alors je vais faire un autre
13:16Starto
13:17Tiens je vais faire
13:18Voilà
13:18Starto
13:19Et c'est
13:20Craco
13:21Start
13:23Voilà
13:24J'aime bien laisser
13:25Quand même ces trucs là
13:27Le système Craco
13:28Nous dit
13:28C'est moi qui vais prendre
13:29La main pour démarrer
13:30Donc
13:31On passe en Craco
13:34Ok
13:34Et je vais même aller
13:35Jusqu'au bout
13:36Je vais dans
13:36Entrée de jeu
13:37Y coller mon arrobase
13:39Comme ça
13:39Pour voir si contact
13:40Est bien pris en compte
13:41Je rappelle que le but du jeu
13:42Est de faire comprendre
13:43Que l'arrobase
13:44Ça pointe sur le dossier SRC
13:48NPM run
13:51Starto
13:53Donc là on a bien
13:54Notre Craco start
13:58Il va démarrer
13:59Il va faire sa dépendance
14:00Et tout le tintouin
14:01Bon en avant
14:02On a des petits bugs
14:03C'est pas bien méchant
14:05On va attendre
14:06Qu'il finisse
14:07De démarrer l'engin
14:12Quand tu veux
14:16Voilà
14:17Merci d'être venu
14:18Bonne soirée
14:19Hop
14:19Et
14:20Je reviens ici
14:22Je rafraîchis ma page
14:24Je n'ai pas
14:25D'erreur
14:27Dans ma console
14:29Tout va bien
14:30Il n'y a aucune erreur
14:32Et puis dans mon compiler
14:34Il n'y a aucune erreur
14:35Également
14:36Il a bien compris l'arrobase
14:37Donc je vais directement
14:40Me cogner
14:41Arrobase
14:43Hop
14:45Voilà
14:45Encore une fois
14:46C'est une question
14:47De propreté de code
14:48C'est vraiment
14:49Pour être sûr
14:50Que si jamais
14:51On bouge de place
14:51Un composant
14:52On parte
14:53Toujours
14:56Du chemin relatif
14:57À SRC
14:58C'est comme si c'était
14:59Notre absolu
15:02Les point point
15:02Slash point point
15:03Slash point point
15:04Ce n'est pas parlant
15:05Même visuellement
15:05On ne sait pas ce qu'on fait
15:06On est obligé d'avoir
15:07Le système de fichiers
15:08À côté
15:09Donc voilà
15:10Avec Craco
15:11Vous pouvez simplement
15:12Mettre votre arrobase
15:13Ça pointe sur le dossier
15:15SRC
15:15Et à partir de là
15:16C'est largement plus simple
15:17Et plus propre
15:19Et donc
15:20Maintenable
15:21Voilà
15:21On y est arrivé
15:22Hop là
15:24Allez
15:24C'est bon
15:25On a nos pages
15:25Prochaine vidéo
15:28On va essayer
15:30Donc de router
15:32Ces pages là
15:33On va faire en sorte
15:34De pouvoir router
15:35Toute cette partie là
15:36Avec
15:38Avec le routeur
15:40De React
Commentaires