FOR https://www.youtube.com/watch?v=f0X1Tl8aHtA 
  bonjour à tous et bienvenue on se 
 retrouve aujourd'hui pour faire durer 
 acte 2 0 qu'est ce qu'on va faire.
ils occupés
elles sont prises
des genoux
 aujourd'hui refaire une application une 
 petite application qui va nous permettre 
 de parcourir un bon nombre de principes 
 de ré actes on verra notamment comment 
 faire une navigation 
 voyez plutôt une navigation en ré accès 
 à dire une navigation là il n'y a pas de 
 chargement ça c'est pas mal qu'est ce 
 qu'on va faire d'autres et bien on fera 
 une requête est une api via notre ami 
 axione et puis on ira affiché est donné 
 on verra comment on fait ça en ré actes 
 et puis on fera durant du conditionnel 
 on dira combien votre pays ou viable 
 infiltrera par continent éventuellement 
 et ça nous permettra de voir énormément 
 de choix de parcourir déjà beaucoup de 
 choses de radio on verra bien sûr pas 
 tout dans cette première vidéo rassurez 
 vous ça serait trop beau si non mais non 
 on verra quand même énormément de choses 
 à travers ce petit projet donc voilà je 
 pense que j'en ai assez dit donc ce 
 qu'on va faire sans plus attendre c'est 
 que on va se télécharge et l'impératif 
 c'est node js dont vous tapez node.js 
 télécharger ou node js download ça 
 marche aussi vous tombez sur cette page 
 et en fait ne deviennent bons ressorts 
 que jesse c'est javascript mais c'est 
 juste le moteur de javascript donc qui 
 peut marcher en dehors d'un navigateur 
 puisque javascript je pense que vous le 
 savez il marche d'un navigateur 
 d'ailleurs si vous ne saviez pas que 
 javascript fonctionne dans un navigateur 
 c'est peut-être que vous n'avez pas le 
 niveau pour faire cette vidéo puisque 
 cette vidéo s'adresse qu'à des gens qui 
 ce qu'ils connaissent javascript un 
 d'accord 
 sinon ce sera rien de faire du réacteur 
 sion connaît pas si on connaît pas 
 encore assez bien javascript croyez dans 
 ma propre expérience donc du coup 
 vous prenez sur votre système 
 d'exploitation le node js qu'il nous 
 faut puisque à l'intérieur il ya quoi il 
 y as in cloud npm huit points trois 
 points voilà c'est ça qui nous intéresse 
 maintenant la version nous intéresse pas 
 ce qui m'intéresse surtout que ça inclut 
 npm notre package manager et donc ça ça 
 nous permet d'aller chercher un certain 
 nombre de paquets un certain nombre de 
 choses qui vont être 
 très intéressante pour ce projet donc ce 
 qu'on va faire maintenant pour trait 
 décrira comme j'imagine que maintenant 
 vous avez note anna g auche pas cette 
 étape puisque moi je les note js sur ma 
 machine d'accord donc une fois que vous 
 avez node.js qu'est-ce qu'on fait tout 
 ce qu'on peut contrôler donc moi je vais 
 utiliser la console lanouf une console 
 on peut utiliser n'importe quel de 
 n'importe laquelle de vos consoles c'est 
 la cas lequel vous a plu plus à l'aise 
 vous pouvez utiliser guide bâches ça 
 marche aussi moi je vais carrément 
 utiliser la console devait s code donc 
 je vais faire contrôler pourcentage pour 
 mieux sortir sinon on fait terminal le 
 terminal 
 ok donc là j'ai ma place est sur le 
 bureau comme ça les fichiers que je vais 
 que je vais aller chercher avec mpm eh 
 bien ils seront placés sur mon bureau 
 c'est plutôt pas mal quand on développe 
 des choses doivent aller dans les 
 fichiers apporter de maintenant qu'on va 
 faire c'est des 
 desktop ok donc là je suis placé sur mon 
 bureau 
 alors une fois sur mon bureau c'est 
 maintenant que ça commence à être un peu 
 rigolo 
 qu'est ce qu'on va faire la table déjà 
 on va contrôler la version de notes 
 qu'on a et voyez comment il me dit que 
 j'ai là 16 points 13 points tous donc 
 c'est le point de s'il n'avait pas la 
 même qu'au moins c'est pas grave hein 
 d'accord l'important c'est que ça marche 
 npm 
 tirer v et la version lp m c'est là vite 
 pour un poids de vriller là ils ont déjà 
 fait ils se sont déjà loin 3.1 c'est là 
 que j'ai pas la dernière version d'une 
 pme c'est pas très grave 
 toujours est il que j'ai prouvé que 
 j'avais note j'ai prouvé que les mêmes 
 peinent donc je vais pouvoir aller me 
 chercher 
 react 
 alors la phrase magique la phrase 
 magique c'est quoi il va falloir dire 
 nvx 
 create 
 v act up ça c'est à chaque fois voulu 
 commencer un projet d'acte vous commencé 
 comme ça et de pecixe c'est une forme de 
 npm et parce qu'on n'a pas alourdir là 
 on n'a pas senti les package donc ça 
 permet d'aller chercher directement le 
 projet criait tu react ap ça c'est été 
 créés par nos amis de facebook s'est on 
 veut dire un petit projet enfin et pas 
 mal de choses qui ont déjà été codé 
 d'avancé je vais pas rentrer dans les 
 détails pour ce surcoût sur ce cours là 
 parce que j'ai pas envie de vous 
 accablez d'information il ya plein de 
 choses qu'on apprend au fur à mesure en 
 fait donc ça c'est pas vraiment 
 important de le maîtriser ce qu'est le 
 web pas quelque chose comme ça en 
 revanche ce qui est important c'est de 
 savoir enfin sadou codé de mettre les 
 mains dans le code de coder et donc on 
 va on va on va appeler ça court 
 react je vais appeler un parce que c'est 
 la première partie 
 est donc là ça va être un tout petit peu 
 de temps à charger et donc pendant que 
 pendant que ça va charger ce que je vais 
 faire c'est que je vous explique et de 
 trois choses fondamentales serez actes 
 alors tout d'abord qu'est-ce qu'il faut 
 savoir un réacteur chose primordiale la 
 chose la plus importante c'est de savoir 
 que tout est un composant un réacteur 
 koodie en anglais composantes vous 
 montrerez souvent dire comprenant tout 
 composant peu importe c'est la même 
 chose 
 donc ce qu'il faut savoir c'est à quoi 
 est-ce qu'on reconnaît déjà un composant 
 par exemple hommes pointent js nous qui 
 sera là j'ai pris l'exemple de la page 
 de garde enfin la page d'accueil 
 home point g est ce sera le composant 
 qui va englober qui tout une autre série 
 de composants donc ce sera le composant 
 le plus aux besoins de la page on va 
 dire en quelque sorte donc à coup un vox 
 est un composant up premières lettres 
 majuscules et ça c'est une convention 
 tous nos composants rayons tous une 
 première est majuscule d'accord dans 
 qu'est ce qu'on a dans un point j'ai 
 assez bonnes dans podium on appellera le 
 logo dont qui s'appelle logo point g est 
 son apparat le composant navigation 3g s 
 on appellera le composant countries 
 point g est d'accord le cadre là il se 
 rappelait plus tard il a rappelé 
 qu'entre son encontre il donc bien oui 
 mais à quoi ça sert et bien à quoi ça 
 c'est arrivé ça sert à part d pété son 
 code des centaines de fois ça sert à 
 partitionner aussi son code dans des 
 petites pages qui sont beaucoup plus 
 lisible beaucoup plus facile à maintenir 
 donc dans le cas de logos de navigation 
 c'est en tout cas dans le cas de logos 
 et que du rendu graphique n'y a pas 
 vraiment de logique particulière dans le 
 cas de navigation où il ya une petite 
 logique de navigation qu'elle pour aller 
 à un endroit où un lot du site 
 mais ces composants la fête on reste les 
 coder une seule fois on va les mettre 
 dans un fichier qui s'appelle donc par 
 exemple logo ps et une fois qu'on l'aura 
 connaît ce truc là on n'aura plus jamais 
 besoin leurs côtés on pourra l'appeler 
 partout sur votre projet et ses 
 actionnaires un projet avec 50 pages eh 
 bien on pourrait s'appeler partout où on 
 veut logo projet assez juste en mettant 
 une petite ligne en direct en disant 
 logo point g s est bien ça ira 
 immédiatement nous chercher toute cette 
 logique là voilà c'est ça qui est 
 pratiquant react et pour aller plus loin 
 mais par exemple là on a un composant 
 qui est complexe qui s'appelle countries 
 point g est spécieux il va faire à une 
 requête à une api il va faire du tri 
 avec le nombre de pays afficher ou bien 
 le continent d'accord et bien il y aura 
 aussi un map pour map est différente car 
 dont celle là c'est du javascript est 
 bien 
 ce qu on trees il va map est un 
 composant qu'on a codé qui s'appellera 
 card point js donc on va ce bien sûr ce 
 codec qu'une seule fois la logique de 
 nos cartes et on pourra le répercuter 
 partout on donc voilà pour être encore 
 un petit peu plus précis le temps que 
 cet ermite de télécharger 
 juste là sur la partie de droite on à la 
 structure d'un composant react d'asic 
 donc la gauche vous avez la structure 
 des fichiers mais 
 en fait on va regarder ça juste après la 
 course sera finie télécharger là ce qui 
 m'intéresse c'est de dire que un 
 composant en fait un conte ponette ça se 
 présente comme une fonction un composant 
 c'est une fonction qu est ce qu a fait 
 cette fonction peut faire beaucoup de 
 choses dont vous voyez c'est tout ça la 
 fonction à quoi on voit que c'est une 
 fonction en balle allait fléchir la 
 fonction on le voit ici à ces structures 
 là il ya là un nom égale le paramètre 
 ensuite une flèche donc c'est une 
 fonction fléchés 
 et donc ensuite on peut balancer autant 
 de maisons on peut déclarer des 
 variables si on en a besoin on peut 
 balancer autant de fonctions qu'on veut 
 et à la toute fin on fait quoi on fait 
 un rendu en ont fait un return on return 
 donc venez à quoi ça ressemble sa 
 ressemble de lâcheté mn alors c'est pas 
 vraiment le html ça s'appelle du gie et 
 6 mais bon dites vous que c'est comme 
 l'actuel mali vraiment les quelques 
 petites nuances entre la shnpm élégie 
 les six ne vous inquiétez pas si vous 
 avez faim d'html vous saurez faire le g6 
 par exemple la voyez les classe c classe 
 times bon il ya plein de petites choses 
 comme ça mais vous inquiétez pas c'est 
 si vous faites l'erreur react vous le 
 dira et voudra vous voulez plutôt dire 
 classe naïma la place de classe enfin 
 nous allons vous et on va être aidé en 
 fait tout le tout le long de 
 notre code on va voir comment ça se 
 présente immédiatement alors je ferme ça 
 et il me dit ah pis hacking c'est bien 
 allez vous amuser à l'écho des donc ce 
 n'est que l'application et les saumons 
 bureau maintenant donc si je dis c d 
 ahmed mois l'application cela plairait 
 actes 
 je sais plus court j'y fais tabulation 
 il va m'aider normalement non s'est 
 courue acte plutôt je vais appeler 
 voir la cour et actes 
 et là on va dire code espace points et 
 là qu'est ce qui se passe ça nous ouvre 
 directement 
 notre espace de travail on est prêt à 
 travailler avec react alors on va 
 regarder un petit peu à quoi tout 
 correspond hommes ont semé comme ça 
 on va se laisser qu'un petit peu de 
 place voilà alors comment comment ce 
 comment sont organisés les fichiers tout 
 d'abord on a notre module notre beau 
 succès quoique c'est ce qui prend du 
 temps à télécharger c'est tous les 
 paquets dieu qu'il a été chercher c'est 
 en gros toutes les bibliothèques tout ce 
 qui est utile pour pour coder haut 
 c'est ce que criait tu react ap en fait 
 nous a apporté 
 c'est en fait un environnement de 
 travail il faut sort que react c'est une 
 bibliothèque d'accord c'est là c'était 
 quelque chose dans lequel on va puiser 
 les chaussées paf comme warcraft par 
 contre cris est très actes ap ça se 
 rapproche de frère mort se dire qu'on a 
 un environnement de travail qui est pas 
 complet mais qui est quand même pas mal 
 donc se ranger par d'après bétique sur 
 scène chercher rade depuis tout à 
 l'heure voilà c'est la wii colonnes à la 
 bibliothèque react et si on se balade un 
 petit peu mais on a on peut trouver le 
 code source de réaction peut voir un 
 petit peu à quoi ça correspond bon 
 souvent c'est compilé 20 points que la 
 même pas bon voila si vous allez jeter 
 un oeil dans le code source de réac 
 allez-y en tout cas nous régissent 
 cherché à faire marcher tout ça donc 
 notre module c'est toutes nos 
 bibliothèques 
 ensuite public src je reviendrai plus 
 longuement dessus donc ensuite je 
 descend directement sur guy tig nord dit 
 innoncent et tout ce qu'on a pas bien 
 sur github dont le nomme module 
 puisqu'il est très volumineux donc on ne 
 va pas sans qui tape ça veut dire que si 
 on n'aurait pas sur github quand vous 
 récupérez un projet react sur github de 
 quelqu'un vous allez devoir vous ré 
 installer votre module va falloir faire 
 une petite manipulation ça on verra dans 
 la deuxième partie de secours 
 ensuite le paquet du lock 
 on s'en fiche c'est quelque chose qu'il 
 faut pas toucher c'est lui qui fait sa 
 petite tambouille effet ce petit 
 il fait ses petits réglages par contre 
 attaque est produite soit on peut 
 toucher on peut dire la version 2 le 
 projet on a surtout toutes les 
 dépendances qui ont été ajoutés à notre 
 projet vous voyez qu'on a réac l'âge et 
 la version 10 7 actuellement react 
 d'hommes donc voilà les gouttes vital on 
 se sait pas très utile c'est pour le 
 référencement 
 les pour tester aussi pour faire des 
 tests en réaction 
 et on a aussi des scripts alors faut 
 savoir qu'un script c'est pour éviter 
 d'avoir à écrire des choses qui sont un 
 peu longues par exemple si je dis npm 
 start et bien ça va jouer ce truc là et 
 donc en fait ça va nous lancer d'autres 
 projets faut savoir que pour lancer un 
 projet react vous pouvez pas faire un go 
 live ça marcherait pas votre parce qu'on 
 a besoin de compiler toutes nos 
 bibliothèques toutes les choses qui sont 
 d'un src on a besoin de les compiler et 
 donc il faut faire un npm start c'est 
 comme ça qu'on arrive à coder notre 
 projet 
 ensuite le signe qu'on fixe à ce que 
 nous poser un petit problème en ce 
 moment un petit bug là dessus donc aussi 
 ses impôts ce problème on supprimera 6 
 et vous posera pas problème offensif 
 chez vous si y'a pas de problème ne 
 devrait pas le faire mais bon on verra 
 et voilà à peu près tout et le readme 
 buzz c'est là qu'on met les informations 
 pour que l'utilisateur puisse reprendre 
 notre projet ou un collègue que sais-je 
 donc un pétard nous explique que c'est 
 pour lancer le projet en plein test pour 
 lancer les tests npm run bild ce assez 
 pour ben tout compiler notre projet à la 
 toute fin quand on est prêt quand on est 
 prêt à mettre le neuf sites en ligne on 
 fait ce qu'on appelle un build et 
 ensuite ce build on le met on line en 
 ligne tout simplement donc voilà on 
 verra dans la deuxième partie de la 
 deuxième partie comment comment métro et 
 notre site notre site aurillac tu 
 gratuitement en plus 
 voilà est donc maintenant les deux 
 parties qui m'intéresse c'est un peu 
 plus donc c'est cette partie là donc les 
 icônes on va la garder au moins la 
 fabrique own c'est le l'icône qu'on a 
 qu'on a ici un ce truc là 
 l'icône 191 dans le garder pour faire 
 l'icône du logo par contre la 512 et 
 dégage donc l'appui son support le 
 manifesto jissah ça sert à rien c'est 
 pour faire une progressive web apps est 
 pas très à la mode quand même donc on 
 supprime héros beau pointer ses 
 pourparlers avec les robots de ses 
 pourparlers avec les robots de google 
 ok maintenant voilà un peu plus 
 précisément dans un d'experts html donc 
 il faut savoir que index pour html c'est 
 toujours le fichier qui est lui en 
 premier par le navigateur ça change pas 
 en reste même si là on va faire une 
 application qui est quasiment 
 intégralement en javascript notre 
 application elle sera tout de même 
 injecté ici d'en route elle sera 
 injectée ici et c'est ça qui sera lui en 
 premier par le navigateur 
 donc qu'est-ce qui est pas utile avait 
 déjà tout il tout ce qui est en 
 commentaire vous pourrez les lire les 
 commentaires si ça vous intéresse si 
 vous voulez vous cultivez si vous aimez 
 lire mais là je vais pas vous dorer le 
 crâne avec des choses un peu un peu 
 superflu en tout cas qui sont pas 
 vitales 
 le manifeste appletouch ça c'est pour 
 faire une progressive web apps on s'en 
 fiche aussi est donc long intellectuelle 
 on peut se changer le title on peut dire 
 cours réaffecte un sur deux par exemple 
 voilà 
 montlaurais ça vous intéresse pas trop 
 quand la page rappelé m en français si 
 on voulait vraiment faire des choses 
 précisément devant leurs parents s'en 
 fiche un peu du bestiau offre comme 
 sarko react est très apprécié par les 
 robots de google au niveau du 
 référencement naturel 
 il faut savoir que 
 en fait les sites henry l'acte ils sont 
 extrêmement rapides vous ai montré lors 
 des présentations qu'on pouvait changer 
 de page extrêmement rapidement et donc 
 ce sont des sites qui sont bien conçues 
 puisque quand on fait un build à la fin 
 on a on obtient ainsi qui compile et qui 
 est mini fier au minimum possible et 
 donc qui est extrêmement performant et 
 donc ça s'est appréciée par les robots 
 de google donc sachez que le vos 
 applications en react en de bonnes 
 chances d'être les bien référencés voilà 
 ça sent petite parenthèse alors 
 maintenant 
 on a fait ça tiens on va faire ressortir 
 la console donc je fais contrôler 
 pourcentage et je vais faire un mpm 
 start pour lancer le projet donc on fait 
 pas beau la lv1 d'accord on fait mpm 
 stade moelleux trois militantes déjà le 
 port trois villes parce que j'ai bon 
 modèle dessus le modèle que je vous 
 montre là donc je vais faire y pour yes 
 et voilà ça me fait tourner au 3000 1 
 mais bon c'est pareil c'est la même 
 chose ok là jeu réduit un peu la console 
 mais on a besoin de la sortir cette 
 console puisque voilà c'est là qu'on a 
 les erreurs c'est là qu'on a plein de 
 choses d'ailleurs j'ai une erreur voilà 
 je les avais un petit peu anticipé cette 
 erreur en ce moment il ya cette erreur 
 allait elle est là depuis deux trois 
 mois en réacteur peut-être que quand 
 vous regardez la vidéo elle n'y sera 
 plus en tout cas pour dégager pour se 
 dégager cette erreur et pour pouvoir 
 bosser tranquillement on va se virer la 
 config es lynch ici on sait vraiment pas 
 hyper russie d'avoir vs lite enfin ça 
 peut être utile vraiment quand un 
 développeur extrêmement chevronnés qui 
 avait qui a ses petites habitudes etc 
 mais là pour débuter on s'en fiche donc 
 dans paquet du progiciel j'ai viré qu'on 
 soit bien d'accord je virais toute la 
 partie configurer slit hockey en ayant 
 fait ça et bien le miracle d'internet 
 s'est produit voilà ça fonctionne on est 
 content donc c'est bien je vais sortir 
 et consoles pourquoi parce que on en 
 aura forcément besoin dans ce projet je 
 vais la mettre sur ce côté là 
 puisque sur vos habitudes un canton code 
 en javascript parce que quand on utilise 
 techno fronde html css ou javascript 
 console est totalement indispensable ok 
 donc voilà plus forte chute au rideau un 
 petit tour d'horizon de ça donc le 
 public on pourra essayer aussi stocker 
 des images des icônes enfin plein de 
 petites choses on vers un petit peu 
 après après on va reprendre le support 
 du court mais d'abord je veux quand même 
 parler de src et puis de constable tous 
 les bons plugins et après on pourra 
 commencer à coder pour la partie 
 installation est un peu lent que c'est 
 normal il faut quand même présenter les 
 choses après que tu as l'habitude de ré 
 axa prend vraiment deux minutes sans la 
 partie installations donc dans la crcc 
 là dedans qu'on reconnaît c'est là 
 dedans que tout va se passer c'est src 
 pour source et 
 comment ça se passe en fait sources 
 m'ont déjà on vous vire est tout sauf à 
 point js et index pointilleuse voilà je 
 préfère qu'on parte vraiment de quelque 
 chose de propre oncle en a plein 
 d'erreurs 
 donc j'ai que a.ga syndex j lc 1 à plein 
 d'erreurs pourquoi il me dit du coup tu 
 reconnais pas dans à point g est ce tu 
 appelles logo tu appelles ap et ça 
 marche pas ok je sais quoi dans hop on 
 va aussi tous supprimés 
 voilà il ya 3 0 seul dans un index 
 d'un index où il faut dire que happy le 
 reconnaît pas mais on va on va se créer 
 un composant après d'abord jeunes gens 
 vivent vraiment qu'on soit le plus pur 
 possible relève le plus de choses 
 possibles pour vous compris un peu le 
 principe donc là les web vital ça c'est 
 pas utile dans un index pointilleuse 
 s'en dégage 
 et 
 qu'est ce que je vais enlever d'autres 
 voilà un d'explorer cette voie là là on 
 est plutôt clean mon public est encore 
 une erreur 
 a dit ed slint il dit encore le premier 
 slicks alors ça c'est parce que j'ai pas 
 relancer les stars veulent eux 
 le 
 mpf star toi donc là je sors je fais 
 contrôler c'est pour quitter le terminal 
 mais ça c'est seulement si vous avez le 
 même problème que moi un accord ce que 
 tu veux être que vous l'avez pas ce 
 problème et je fais npm start que je 
 relance 
 est logiquement si les dieux du code 
 sont avec moi je devrais ne pas avoir ce 
 problème là en tout cas je rate d'autres 
 problèmes enfin voilà prudence en fait 
 ça nous pousse à nous produire feuille 
 blanche choqué tant bien je préfère 
 avant ça qu'un problème voilà 
 alors 
 ok donc à point g est ce là dedans et 
 index j'ai vidé tout ça d'accord donc la 
 src gelé vraiment j'ai détaillé pas mal 
 de choses donc qu'est ce qu'on fait en 
 un portrait acte on importe rédac 
 d'hommes et qu'est ce qu'on dira en fait 
 on fait un vendeur enfin rendue donc on 
 se ment strictes au mode saas et pour 
 avoir des choses un peu plus fort 
 crippen un peu plus strictes on peut 
 moins se permettre deux choses en 
 stricte mode comme déclaré des variables 
 en bas enfin au déclarent des variables 
 fin bref faire des appels un peu 
 bizarres ou quoi on peut rester en 
 stricte mode c'est pas grave forcément 
 ça sûr ça change rien et en fait on voit 
 que ont dit ok tu vas me rendre ce qui 
 est dans entre les balises du strict 
 mois d'octobre rendre à la balise ap 
 donc en fait ap c'est le composant le 
 plus haut qu'on va avoir dans notre 
 application et de zap veuve a découlé 
 tout lattre applications et ensuite on a 
 un document getelementbyid route ça veut 
 dire quoi ça veut dire des écoutes tu as 
 tu vas faire un rendu tu vas me prends 
 tout ce qu'il ya dans ap donc sachant 
 que ap va faire d'écouler tous les 
 composants de lui d'accord on avait vu 
 de notre architecture de composants 
 qu'on avait un homme point gscb 
 au-dessus de 1 point g sont doha un 
 appoint js mais bon ça va vous avez 
 facilement le comprendre dès qu'on va 
 faire le décompte à faire leurs auteurs 
 et donc on dit tout notre application le 
 jeu la passe à document.getelementbyid 
 route ça si vous vous rappelez laïdi 
 route il est ici voilà ce que ça veut 
 dire et donc on importe tout on met tout 
 dans cette année des routes et apprendra 
 donc toute autre application là dedans 
 donc index a rien à faire de plus que ça 
 on va aller dans la presse que le 
 premier composant à la main et après je 
 vous montrer comment on peut faire ça 
 plus rapidement elle faisant référence 
 en 1 à la main pour nous entraîner donc 
 on va dire constants 
 ap c'est égal à tak tak et ensuite on 
 dit x-force default 
 up donc la junte de créer un composant 
 le composant sais quoi je voulais 10 est 
 une fonction clef un dépôt plus 
 d'appelés react forcément ressort que 
 après on va utiliser des raccourcis pour 
 appeler les composants un usap aileron 
 automatiquement réac mais là c'est plus 
 vraiment obligatoire m'attendre avec les 
 nouvelles mises à jour de réac mais peu 
 importe sachez juste que d'autres 
 composants c'est une fonction et que à 
 chaque fois une fonction hautement 
 l'export ça veut dire quoi sûr que 
 maintenant n'importe où dans le projet 
 je vais pouvoir importer cette fonction 
 pour la pour l'appeler pour en faire ce 
 que je veux par exemple dans l'index on 
 importe ap et bien se mettre ici voilà 
 c'est ça que ça veut dire et donc on 
 peut lui dire que notre fonction elle va 
 avoir un rôle elle va retourner elle va 
 retourner bien un achat par exemple 
 alors regardez moi si j'écris h1 je suis 
 aidé pour taper d'accord ça c'est ainsi 
 un petit plugin qui ont installé après 
 les jeux le faire je vais faire comme 
 vous je vais écrire à chiens à la mano 
 comme ça je vais dire hello react et je 
 vais refermer le h1 à la main nous aussi 
 voilà 
 j'enregistre et c'est tout alors oui vu 
 qu alger qu'une seule ligne le return 
 hippel on le met directement qu il peut 
 le mettre directement comme ça avec moi 
 m'ont prêté leur hymne à voir une amie 
 directement comme ça 
 ok regardons ce que ça fait et lauréate 
 voilà on a réussi on a réussi à appeler 
 le composant ap ici et à l'injecter dans 
 route c'est ça qui s'est passé bon là 
 c'est extrêmement simpliste ans que je 
 vous présente d'accord on l'a ici 
 d'autres composants et regarder si on se 
 balade on voit qu'il ya beau dit il a un 
 enfant ces routes et route il a un 
 enfant ch 1 en fait lui a appris à la 
 fin il fait toute sa tambouille et il 
 nous ressort tout comme si c'était une 
 page html classique en fait on n'y voit 
 que du feu 
 on aurait pu rajouter une classe on 
 aurait pu bien sûr mettre tout le style 
 qu'on veut y a aucun problème d'accord 
 on l'avait vu souvent très ce principe 
 là maintenant on va passer à la partie 
 mécanique on va aller un petit peu se 
 mettre des plugins 
 comme il faut et puis puis voilà comme 
 ça on va qu'elle connaît un peu plus 
 vite 
 alors vous avez juste en dessous la 
 vidéo le support du court pourquoi parce 
 qu'on ne va pas faire le style ou en 
 tout cas bon le style je vais en 
 reparler mais on va pas c'est pas un 
 projet enfin c'est pas c'est pas le 
 sujet par contre donc dans ce support 
 qu'est ce que vous avez vous avez 
 d'autres petites choses qui sont assez 
 intéressantes st-gelais je l'aimais 
 clara site du projet comme ça vous les 
 aurez aussi dans le projet finit donc il 
 ya un screen de installé react donc je 
 vous dis jusque dans la console se 
 placer sur le dossier qu'on veut ou le 
 bureau mpx qui a trait à taper le nom de 
 mon projet ensuite on fait céder mon 
 projet code et après on verra qu'à 
 quelques bibliothèques zut il a 
 téléchargé est ici vous est précisé 
 que pour lancer le projet cnpm start 
 pour reprendre un projet de quinquas 
 donne sur github donc il y aura pas les 
 bibliothèques va faire une pmi et quand 
 votre projet il est prêt à être mis sur 
 internet ça c'est ce qu'on verra dans la 
 deuxième partie on verra comment le 
 mettre en ligne gratuitement ce site de 
 deux d'ailleurs une ancienne de façon de 
 mettre une date je pense qu'on peut 
 aussi le faire sur github remettra 
 gratuitement soi qui est over citant 
 react c'est possible mais on diffusera 
 plus tôt avec les failles et donc 
 mon beau compiler un projet mais çà et 
 là les bibliothèques qui vont être 
 utiles les bibliothèques qu'on utilise 
 très souvent 
 quand on code en ré actes donc on va 
 avoir besoin de réacteurs hauteur 
 d'homme ça c'est indispensable 
 et si vous codé en saas ce que je vous 
 recommande très chaudement et aux 
 fraudeurs à prendre s'associent on 
 s'installera ça on s'installe grâce à la 
 très très vite faut qu'elle que je parle 
 de tout ce qu'il ya dans ce support ont 
 consulté les plugins c'est ce qu'on va 
 faire en suivant donc jésus même 
 expliquer ce qu'il fallait mettre dans 
 settings point-g ça c'est ce petit bout 
 de ce type de texte 
 donc en gros les plugins installés cessa 
 simpl react snippets d'accord moi j'ai 
 déjà ses plugins d'accord que le plugin 
 c'est ici j'espère vous savez comment 
 installer des plugins sinon je pense que 
 je pas sûr que j'ai le niveau pour faire 
 durer actes 
 donc si poehl react snippets 
 parce que quand je dis je pense que j'ai 
 le niveau c'est à dire que pour faire du 
 rapt il faut au moins 1 1 ou 2 watts 
 javascript derrière soit d'accord faut 
 être à l'aise il faut être capable de la 
 par soi même de créer des jeunes en 
 javascript d'accord 
 ensuite réacteurs jsk snippets ça vous 
 prenez et mithril et mettent d'accord 
 vous prenez ces trois le guide que moi 
 j'ai déjà 
 et dans 7 6 points jason 
 rajouter ce bout de code donc là vous 
 vous reprenez ce bout de code contrôle 
 c'est 
 cet exploit du seul comment est-ce qu'on 
 peut y avoir accès eh bien on va dans 
 settings on tape settings là par exemple 
 elle ne propose pas s'il est dit il 
 c'est six points ji sun il vous propose 
 ici je crois qu'il ya une méthode plus 
 rapide pour y aller 
 j'ai un trou de mémoire je sais que là 
 où il ya une méthode je ne sais plus 
 simple est dans nos vignes ou non bon 
 tuto tels que l'avs ou si vous tapez 
 c'est x par exemple les vous re edit 
 insightix projet sonne 
 et donc ses tics positionne en fait 
 c'est le résumé de tous vos réglages 
 vous devez ce code oui moi par exemple 
 une fonte un peu particulière enfin pas 
 plus très différentes on peut choisir la 
 grosseur de sa faute on peut choisir 
 notre thème etc donc tout est résumé 
 dans ce fichier points jason est ce 
 qu'il faut rajouter densifier point du 
 sun et bien c'est ce et mettre la ce 
 truc là je vais l'enlever je vais vous 
 montrer 
 donc on se place ici à la suite d'un 
 fichier point-g seuls ont fait 2,2 on 
 sort pas des accolades là les accolades 
 qui sont ici hockey et on fait un 
 contrôle v tac tac tac tac et on se 
 copient donc c'est le truc donc on a 
 aimé include langouet javascript ça en 
 fait ça va nous aider à dés qu'on va 
 faire h1 et b dans le gie sx donc vous 
 savez le g6 et le la sorte d'acheter ml 
 ça nous fera les raccourcis en fait donc 
 c'est quand même très utile d'avoir les 
 raccourcis croyez moi sinon c'est 
 beaucoup trop fuyant à te paie donc au 
 lancement ça on enregistre et la baie 
 normalement que vous aidant ap ici 
 donc attendait parce que là c'est 
 présenté comment ceux ci passent bleu 
 vous faites h1 entrée voilà là il est 
 humain il est allé me chercher les 
 balises si je fais une classe title par 
 exemple il maclean il va créer une diva 
 avec la classe title d'accord donc il 
 faut soit que ces classes naïm quand on 
 utilise du g16 assez classe times mais 
 il faut aussi savoir que si jamais je 
 vous montre quand même si jamais je dit 
 claes d'accord là je fais un titre 
 coucou eh bien regardez ce que samedi 
 dans la console savoir une erreur et ça 
 veut dit il valide pas partie classe did 
 you mean classe name est ce que vous 
 voulez dire classe name is music maceo 
 que les dix arabe ce qu'aubry que l'on 
 n'a pas la ligne et ou bien vous et que 
 vous n'êtes pas juste dire ok classe 
 parce que j'étais appelé classe de mon 
 projet dont je vais sur la loupe et je 
 vois que j'ai tapé classe ici ça c'est 
 dans le cas où on a plein plein plein de 
 fichiers d'accord c'est pour pouvoir 
 rechercher plus rapidement les erreurs 
 ok 
 donc effectivement c'est que la fnaim et 
 grands s'en fiche parce que ce composant 
 on va pas vous le faire comme ça pour 
 voir si vous avez bien télécharger les 
 plugins aussi vous allez faire rsc ça 
 veut dire react style est ce qu'on peut 
 n'être ses terres c'est la façon la plus 
 moderne de faire du rect avant on 
 faisait des composants est un state ses 
 dires des classes compo note bon bref 
 c'était un bordel j'ai même pas envie 
 d'en parler ça vous envoyer peut-être 
 que vous tomberez sur du vieux réac 
 scandale et sortent à cover flow ça vous 
 échapperez pas donc vous comprendre un 
 peu un petit peu de quoi je veux parler 
 en tout cas le meilleur react le réactif 
 au savoir l'europe moderne c'est le 
 réacteur laisse comprenant cela déclare 
 que des fonctions donc si je dis rsc que 
 je fais entrer et bien voilà la magie 
 d'internet jeu j'ai donc mon composants 
 qui est prêt qui est exportée hors week 
 on a importé react sa chance et plus 
 vraiment obligatoire maintenant le bon 
 il le fait on va pas le vexer on le 
 laissait et voilà l'élan n'est prêt à 
 taper d'autres composants 
 regardez là je peux faire un champ donc 
 on m'a aidé à taper h1 et là je refais 
 l'aurait actes et voilà c'est cool on 
 est content voilà on à l eau 
 encore un truc tant que j'y pense si 
 vous allez si vous voulez faire d 
 enregistrement automatique et bien 
 formaté votre code là par exemple oui 
 mon chéri là je place mal si je fais 
 clic-droit formats de documents with je 
 choisis pretty young configure des 
 formateurs pretty heures 
 et donc si je dis formats de documents 
 et paf ça me formate automatiquement les 
 annotations et où je peux même aller 
 plus loin je peu formaté quand 
 j'enregistre ça je le dis rapidement ce 
 que c'est un truc que je dis souvent 
 mais bon c'est quand même ultra pratique 
 donc on va danser tic j'en fais une 
 molette 
 c'est higgs 
 formate 
 bonne c'est évident ça s'appelle louis 
 formate conseil voilà vous cochez 
 formateur save vous avez rien à faire 
 d'autre vous fermez settings et là ce 
 qui est génial c'est que bd vous 
 enregistrez 
 frétillant vous entendre votre code 
 voilà ça c'était la petite parenthèse 
 maintenant et bien qu'il va faire il va 
 quand même falloir qu'on fasse des 
 choses un peu plus consistante c'est à 
 dire qu'on commence à se faire notre 
 application 
 alors 
 qu'est ce que j'avais mis dans le screen 
 installations points psg j'ai mis les 
 bibliothèques zut il sait les deux seuls 
 dans vos sites usa axios mais pour 
 l'instant resté chargé ces deux là parce 
 que c'est 2-2 quelqu'un doit commencer 
 donc lp m yport ennstal tirer s react 
 routeur d'hommes et saas donc là il faut 
 se prendre une nouvelle console ou 
 fermer le live ça cela ne vous met pas 
 le faire mais ce truc là donc on va se 
 prendre une nouvelle console voilà j'ai 
 écrite cliqué sur plus et je vais dire 
 lpn epour install tirer s e dans son tir 
 est ça veut dire cei mais c'est même 
 plus obligatoire maintenant dans une pme 
 je ne me rende compte en revanche vous 
 pouvez vouloir vous l'installer 
 directement dans vos fichiers npm sur 
 votre ordinateur c'est de ces deux 
 paquets de là pour installer directement 
 ces deux paquets sur votre ordinateur 
 est comme ça vous aurez plus besoin d re 
 télécharger à chaque fois aux frais du 
 ray l'acte vous pouvez faire tirer j'ai 
 pour global 
 et donc c'est react routeur d'hommes 
 enfin moi j'ai déjà en global mais bon 
 je leur téléchargent et saas et vouloir 
 que vu que les indiens en global ils 
 vont télécharger extrêmement vite encore 
 vrai ça ça prend un petit peu de temps 
 je crois vous et où elle j'ai déjà fini 
 puisqu'ils sont déjà sur un machine en 
 fait c'est de ces fichiers là et donc il 
 est partie les chercher et donc là vous 
 voyez que si on va 
 dans pas quelquefois dû ce nom on ne le 
 voit pas du coup ce que j'ai installé 
 globalement 
 ce qu'un problématique ouakam se les 
 prendre mpm y 
 donc react routeur d'hommes et sas 
 j'aimerais quand même les avoir là dans 
 mes dépendances 
 voilà donc celle là ça a été très vite 
 parce que je vous avais déjà sur une 
 machine voilà c'est mieux c'est mieux 
 expliquer comme ça donc j'ai d'abord 
 celle et globalement effectivement ça a 
 été vite puisque j'avais déjà et 
 maintenant je faisais incorporé à mon 
 projet donc gérer at routeur d'hommes 
 qui est ici et j'ai ça ce qui est ici 
 c'est bon on est content 
 donc ça c'est bien on va pouvoir se 
 créer une navigation 
 mais avant de secret navigation wacogne 
 en terminer que le support du cours donc 
 je vous avais dit qu'il y avait tout ça 
 tout seul ça et une partie style style 
 donc c'est tout le style de notre projet 
 qui là dedans d'accord donc ce stylo la 
 dent src on se le prend et on colle dans 
 un sens c'est comme ça paf voilà c'est 
 bon comme ça je peux fermer le support 
 on aura pu revenir dessus et le style je 
 reviendrai 
 dessus quand on va créer notre premier 
 composant qui sera la navigation non pas 
 la délégation le logo quand on va créer 
 le logo je reviendrai beaucoup plus 
 profondément sur le style d'accord pour 
 expliquer comment ça marche à laquelle 
 des petites spécificités qu'il faut 
 savoir 
 alors 
 maintenant la toute première chose qu'on 
 fait en tout cas si on a besoin d'une 
 navigation dans un site si on a besoin 
 d'un routeur c'est de se créer le 
 routeur dans app engine est ce donc 
 c'est ce qu'on va faire donc je 
 cherchais pas vraiment à comprendre 
 c'est quand même bien de comprendre mais 
 en fait 
 faire un moteur je vais vous montrer 
 comment on fait après ça sera juste tout 
 le temps pareil il y aura pas besoin de 
 se prendre la tête 
 voilà ça sera juste comme ça donc ce 
 qu'on va faire c'est que dans la serre 
 c'est donc je me place sur un sas et je 
 vais faire un nouveau dossier 
 il va faire un dossier pages tien vaut 6 
 charles sur le dossier composants non 
 composantes sonangol 
 combo ne vois là oui c'est les trois 
 fichiers principaux l'emploi dans tous 
 nos composants individuels ensuite on 
 aura toutes nos pages donc les pages qui 
 vont regrouper beaucoup de composants 
 qui rend la logique de chaque page la 
 page ob la page à propos et enfin on 
 aura 
 on aura notre style bien sûr qu'ils 
 aient toute la partie style mais je 
 reviendrai encore une fois un peu plus 
 tard dessus 
 donc dans ap quand j s c'est là que ça 
 se déroule je peux faire mais ça ça ça 
 en a plus besoin je vais réduire encore 
 un petit peu la console aussi c'est là 
 qu'ils les messages d'erreur jeu réduit 
 un petit peu comme ça alors 
 donc notre routeur aura besoin de la 
 librairie réacteurs routeur donc ça 
 c'est ce qu'on a téléchargé et on va 
 importer depuis cette librairie des 
 composants on va importer brothers 
 auteurs on va importer broots au pluriel 
 et route au singulier d'accord et ses 
 composants mais on va les utiliser pour 
 créer une navigation à vue en train de 
 penser qu'on n'a pas encore créé nos 
 pages donc on va se faire deux pages 
 dont page là on va se créer notre 
 premier composant réellement que ce sens 
 que appoint ges est un composant mais il 
 est déjà créé tout le fichier des 
 diacres et donc pour créer un composant 
 surtout n'oubliez pas ça c'est le la 
 première lettre majuscule 
 donc on va dire un point g est celle en 
 affaires à rsc react steak composantes 
 paf ok qu'est ce que ça va composer 
 qu'est ce que ça va comporter le home 
 point j s 
 pour l'instant on va juste écrire a que 
 comme ça parce qu'après la logique on va 
 rajouter le logo le composant logo le 
 composant navigation le composant 
 countries etc on le fera après 
 ensuite 
 deuxième page c'est un site à deux pages 
 est donc j'essaie de faire le plus 
 simple possible 
 mais bon si vous avez vous envie de 
 faire cinq pages bref c'est la même 
 logique je pense que j'ai compris on va 
 dire une page about donc la page à 
 propos 
 la page à propos on va faire h un 
 à-propos voit sara est pas je sais que 
 c'est pour vous montrer comment comment 
 faire donc on va faire un paix avec 1 1 
 lors m400 où là c'est beaucoup le 24 ça 
 on sait pas 
 ça va un peu choquer en faire à leur 
 avis en voilà 
 et en refaire un break surfer alors rp 
 lorraine 200 
 ok notre page l effet donc bon c'est 
 vraiment ça c'est une page pour eux à 
 titre d'exemple c'est juste pour vous 
 montrer comment ça va marcher la 
 navigation 
 alors 
 on va se placer sur un point g est ce 
 ça on peut l'enlever et non pas dedans 
 on va appeler nos petits composants 
 qu'on a qu'on a mis ici qu'on a importé 
 il faut juste savoir que la navigation 
 l'avait le plus haut possible dans notre 
 projet mais parce que c'est elle qui va 
 nous dire où est ce qu'on va à celle qui 
 va gérer les routes de notre projet donc 
 on va dire brothers routeur 
 comme ceci donc brothers routeur c'est 
 lui qui va englober toute l'application 
 à l'intérieur est encore un composant à 
 mettre ces routes au pluriel hockey est 
 là maintenant il va voir qu'on déclare 
 nos routes et donc c'est cette logique 
 la f1 c'est ça qui fait que notre 
 application englober là-dedans va nous 
 emmener à toutes les pages qu'on veut 
 donc par exemple on va dire route 
 si jamais ton chemin donc le pape en 
 anglais c'est cela c'est à dire c'est 
 l'accueil du site se lâche et l'accueil 
 et bien tu vas vous fournir le composant 
 suivant 
 donc là c'est element égal et là on va 
 se chercher un composant voilà comment 
 ça marche comment est ce qu'on va 
 chercher un composant donc là le 
 composant n'a créé que deux composantes 
 non sans ces hommes - gs et aubade point 
 g est d'accord 
 comment est-ce qu'on va se fier se 
 cherche et pardon hommes - js ont fait 
 chou blanc aux ouvrants 
 h majuscule au et la regarder il me le 
 propose sa ces natifs avait skoda 
 d'accord nous propose des chemins comme 
 savez ce code donc vous embêtez pas à 
 aller chercher à chaque fois les 
 composants parce qu'en fait regard déjà 
 publiques et là il nous il va nous 
 chercher l'import parce qu'en fait tous 
 les composants qu'on appelle où que ce 
 soit qu'on les appelle il faut à chaque 
 fois les importer donc il va falloir 
 utiliser au maximum loto un port devait 
 s code comme ça on n'aura pas besoin de 
 les apporter à la main et on évitera un 
 grand nombre d'erreurs donc j'enregistre 
 voulons voir voilà là ça dit je suis sur 
 l'accueil mais pourquoi mais parce que 
 ce qu on correspond bien à slash par 
 contre si dans le loiret là j'écris 
 n'importe quoi ben là il m'emmène à il 
 sait pas ou parce qu'en fait lui il 
 cherche par rapport au paf par rapport 
 au chemin là le paf on les x tessin 
 d'accord donc ensuite j'aurai je répète 
 cette ligne ces chiffres halte flèche du 
 bas paf je récupère je répète cette 
 ligne et là je vais dire ben tiens je te 
 faire une page je te faire un chemin 
 about 
 et quand tu verras le chemin about dans 
 l'ue à rennes d'accord ça faut bien faut 
 bien comprendre que passé ce qu'il ya 
 dans l'url quand tu verras le chemin 
 about dans l'ue reste c'est ça 
 conviendrait acte est bien là tu vas 
 aller me chercher le composant about 
 donc là il faut le écrire à bay hill à 
 il me propose about ici donc je fais 
 entrer ou tu peux même faire 
 la tabulation et ça fonctionne ce qui 
 compte c'est qui est l'auto rapport là 
 où en fait c'est ça qui compte d'accord 
 hop j'enregistre qu'est ce que ça veut 
 dire ça eh bien ça veut dire que là 
 quand je vais dans no doubt comme ceux 
 ci 
 ça fonctionne voilà il ya écrit à propos 
 tatatata et ça nous produit ce qu'on 
 veut donc ça fonctionne 
 ok et donc vous pouvez créer une 
 infinité de page comme ça lui dire si 
 j'avais le chemin c'est ça tu m'emmènes 
 là si j'avais le chemin c'est ça tu 
 m'emmènes là lorsqu'on peut se faire 
 aussi c'est qu'on peut dire que si 
 j'avais le chemin 
 si jamais le chemin 
 c'est n'importe quoi donc si t'as pas 
 trouvé de deux pages référente on peut 
 pas renvoyer le 
 renvoyer à l'accueil on peut dire aux 
 hommes mais on peut aussi mettre une 
 erreur 404 faire une page d'erreur donc 
 là je vais juste commenté cette partie 
 là je veux dire 
 donc le paf 
 étoiles 
 fonctionne si jamais 
 lurel ne correspond à rien 
 de connu ou de déclarer je veux dire 
 rien de déclarer au dessus voilà donc je 
 fais contrôler slash pour 
 contrôler slash pour commenter et ça 
 commence comme ça en direct en fait ça 
 rajoute des keys accolade n'y fait pas 
 attention avant de commencer un peu 
 commenté moi j'écris toujours le tout le 
 texte que je veux et après je fais 
 contrôler slash c'est tout faux pas ce 
 point il faut pas plus se prendre la 
 tête que ça d'accord donc le seul le 
 précise puisque pour le hall des fois on 
 peut avoir envie de mettre une erreur 
 404 donc en vous qu'est ce que ça veut 
 dire le hall b ça veut dire que si l' on 
 écrit n'importe quoi dans l'url ses 
 utilisateurs de faire le petit malin et 
 bien ça l'emmène à l'accueil d'accord il 
 ya plein de sites qui font ça 
 ok 
 donc c'est bien on a réussi 
 on a réussi à analyser 
 c'est bien voilà c'est ça donc si on a 
 vu beaucoup plus de pages il l'aurait 
 fallu vous avez bien compris le principe 
 du nord a ajouté nos pages ici faire des 
 nouvelles routes tiens je veux faire une 
 nouvelle route 
 boutique une nouvelle route blog donc 
 j'écris blog et j'appelle mon composants 
 blog et voilà et ça et ça fonctionne en 
 fait vous voyez que ça va très vraiment 
 très très vite là je vous j'ai pris mon 
 temps à vous expliquer en réalité quand 
 vous reprenez un projet vous faites ça 
 vous fait contrôler ses comptes relevé 
 et boum c'est parti on enchaîne donc 
 maintenant vous dites ok la navigation 
 c'est bien cool 
 mais elle a quand même un petit défaut 
 cette navigation c'est que l'utilisateur 
 va pas s'amuser à taper about comme ça 
 avec ses petits doigts pour dire à tien 
 an men mois sur à propos là il faut lui 
 mettre des liens il faut le dire déclic 
 là pour afficher telles choses ou telle 
 chose d'accord donc ça nous amène à quoi 
 ça vous amène à la création de notre 
 tout premier composant notre tout 
 premier composant le compo nes on va 
 aller et on va créer 
 navigation 
 point j s 
 alors navigation - js et bien c'est une 
 composante navigation qu'ensuite on vint 
 a appelé dans toutes nos pages le 
 concept on va seul à coder qu'une seule 
 fois de navigation alors est ce logique 
 qui sera codée qu'une seule fois et elle 
 sera rappelé par tous voilà c'est ça qui 
 est fort en react donc on va faire quoi 
 on va faire un 
 rsc react steak les compos note et on va 
 avoir besoin pour se balader sur le site 
 henri acte 
 fait sur un site normal devrait créer 
 une encre on leur dit href emmène moi là 
 bas on a créé un âge médian est bien là 
 en react ce à ça s'appelle nav link 
 donc on va dire un porte-monnaie blink 
 from la bibliothèque c'est react routeur 
 donne 
 est donc là 
 je veux dire points 
 navigation ce sera le la classe pour 
 démarrer et donc de navigation sera 
 annuel donc il y aura que deux éléments 
 pour l'instant mais pourquoi pas à 
 prendre un jour en rejeter d'autres on 
 va dire courir bénavent link to c'est 
 comme ça que ça s'appelle se dit tout 
 est donc en gros ça veut dire navx nique 
 on va là on va englober notre accueil 
 par exemple notre lit accueille 
 donc comment comment est-ce qu'on va s'y 
 prendre forme que je leur fais d'un flic 
 voilà comme ça et là dedans mais un lit 
 et on n'a qu'à dire que ça c'est 
 l'accueil 
 2e 2e d'avic 
 donc là c'est tout about ne sais pas si 
 vous voyez en fait on lui dit tous et 
 l'url qui va taper donc quand l'url va 
 correspondre à ce qu'on a mis dans notre 
 routeur et bien il a fait chaud il 
 affichera le composant en question 
 il a on va dire à propos 
 c'est tout pour l'instant c'est tout 
 donc en ayant fait ça 
 où est-ce qu'on est non et pour 
 l'instant on peut pas l'avoir délégation 
 puisque bien sûr on vient de se créer un 
 composant mais nous la fiche du par 
 donc il faut appeler ce composant est 
 seule chose qu'ont affiché c'est nos 
 pages puisque nos pages correspondent à 
 l'url qui est tapé ici 
 donc dans nos pages dans le bas ou tu 
 qu'est ce qu'on va faire avant à propos 
 on va dire ben à v et regarder les bleus 
 proposent ici d'accord il faut vraiment 
 voir le chemin là qu'ils proposent c'est 
 lui donc j'appelle navigation 
 j'enregistre je vais dans home 
 j'appelle navigation 
 et voilà 
 donc faites bien attention à ce qu'ils 
 soient importés la hauteur sans ciller 
 pas importer regard des jeunes importe 
 pas j'enregistre et là il va veut dire 
 quoi si on va sur la page d'accueil 
 patatrac ça marche pas on remonte le 
 message d'erreur il nous dit navigation 
 is not be found hommes ligne 5 ok donc 
 là c'est quand même assez clair comme 
 message on va sur home ligne 5 oui bon 
 lieu à lille conserve sa ligne de sacs 
 ce que tout est sur une seule ligne vu 
 que ça commence par des parenthèses les 
 parenthèses c'est à dire que tout sur le 
 mignon c'est les accolades faire l'amour 
 sur plusieurs lignes toujours est il que 
 lui il le connaît pas 
 effectivement par contre si on l'appelle 
 oui il le connaît forcément et regardez 
 plutôt à quoi ça correspond à de 
 navigation accueil à propos si on fait 
 un clip de inspectés 
 qu'est-ce qui vous injectez bilecik td a 
 donc neuf link sont devenus des encres 
 sont devenus des as mais bon c'est comme 
 ça que ça marche un réac qu'il faut dire 
 neuf licques et donc au regard des 
 données sur accueilli là je clique sur à 
 propos et voilà on va sur un propos on 
 va sur accueil à propos accueil à propos 
 accueil à propos que je pense que j'ai 
 compris le principe mais ce qui est cool 
 c'est clair aucun chargement ya rien 
 tout est déjà prêt chargé ça s'appelle 
 une sigl paige applications c'est comme 
 ça qu'on dit en anglais et donc en fait 
 c'est comme si tout le site était pré 
 chargées de base et donc ensuite quand 
 utilisateur clique en fait le navigateur 
 il a déjà toutes les informations il est 
 déjà tout donc il peut envoyer et un 
 navigateur c'est extrêmement puissant 
 donc voilà vous avez la logique de la 
 navigation 
 en fait on l'a appelé dans les deux 
 projets dans les deux pages on l'a 
 appelée et voilà le composant il 
 souhaite mais alors là le composant une 
 un style 
 dégueulasse qu'est ce qu'il faut faire 
 et bien il faut faire un peu de style 
 donc je vais faire parler un petit peu 
 du style donc le style est là il est 
 fait en saas donc si vous voulez être un 
 développeur react c'est-à-dire 
 développeurs fronte 
 a minima il faut quand même s'y 
 connaître un petit peu hostile il faut a 
 minima travaillant react et à minima que 
 ce que je vous montre là vous soit pas 
 complètement étranger d'accord 
 donc la structure du style vous ai fait 
 un exemple parce que la tempe agit rien 
 n'y a pas de mouvements de l'eau 
 utilisée les pages mais il ya des fois 
 il ya besoin d'un gros projet c'est pour 
 une autre et à quoi ça peut ressembler 
 d'accord l'achitecture on a un index 
 point css qui regroupe 
 tous les autres fichiers donc en fait on 
 a juste à importer l'index pointé as le 
 plus haut possible notre application et 
 tous les autres fichiers vont seront 
 appelés vu que c'est des emplois à 
 chaque fois qu'on fait donc d'abord on 
 importe c'est ixe c'est xbc les réglages 
 généraux d'accord 
 je suis en train de me rends compte que 
 l'âge importe une police mais qu'on ne 
 l'a pas on n'a pas dans le projet je 
 vais la prendre je vais la prendre vite 
 fait 7,7 police joséphine sens sauf ceux 
 des cours n'a pas besoin je vous laisse 
 juste pour l'exemple la faune de faith 
 comme ça d'accord et vous me la prendre 
 comme ça si ça marche pas il écrit sans 
 serif le voilà le site le projet ils 
 seront sans serif je voulais juste pour 
 l'exemple cela parce que bon j'ai pas 
 non plus m'embêter aller chercher des 
 polices 
 donc aux sites ont pu avoir ne variable 
 on peut avoir nomix in et après on 
 balance tous les réglages généraux notre 
 projet une fois qu'on a fait toute la 
 bière généraux donc ça fout la danse aux 
 arts premiers ses tigres puisqu'il ya 
 des variables etc ces variables on va 
 les réutiliser dans ses pages là donc il 
 faut forcément que cette idée soit dans 
 son premier comme ça les variables sont 
 connus et non de navigation ce qui 
 m'intéresse maintenant 
 voilà navigation ce qui m'intéresse 
 c'est qu'on pourrait faire ce qu'on 
 appelle une nav active c'est-à-dire 
 qu'on pourrait injecter une classe quand 
 on est sur la bonne page on va voir 
 comment on fait ça donc d'abord j'aime 
 brûler le style donc on va aller au plus 
 haut possible au cédant index point j s 
 ici on va dire importe 
 va me chercher 
 point se loge style enfin sachez pour 
 d'habitude par de là où tu es 
 composants non pas composant 
 ces styles et ses index point scs il ne 
 propose pas 
 mais je sais que c'est celui-là 
 et on regarde on a beau nier une erreur 
 il ya une erreur il me dit quoi 
 il me dit 4 isolement ah oui une 
 horrible afonso et forcément si on n'a 
 pas bon vous savez quoi je vais la 
 chercher du coup donc on va je vais 
 couper je veux la route est plutôt ses 
 répliques 
 donc il faut la justifie 10 ans médium 
 j'étais sur google phone vous épargner 
 ça donc je vous ai fini sans ce médium 
 extraire vers cours et actes et d'en 
 exercer ce qu'il nous faudrait ce serait 
 un nouveau dossier qui s'appellerait à 
 cette voie là laurens est tombée des 
 images on me défendre des icônes 
 d'accord donc la dent à cet effet on va 
 refaire un nouveau dossier fonce voilà 
 ce sera comme ça dans une belle 
 cohérence ok donc j'ai été chercher 
 cette fonte ou est-elle voilà à cette 
 fatwa josy finissent en ce moment là 
 c'était ça un détail en fait c'est pas 
 un cours c'est pas en course et à ses 
 sous sas non plus donc donc voilà j'ai 
 preuve le père trop tendue alors 
 qu'est ce qui m'intéresse ou de relier 
 notre notre sas le plus haut possible 
 donc dans un deck ce projet est ce un 
 10.26 lequel plus haut possible puisque 
 c'est lui qui rend toute l'application 
 et qu'il injecte dans route d'accord 
 donc à quoi ça ressemble maintenant 
 est-ce qu'on a du style 
 j'actualise 
 non il me dit encore compiled 
 oui ce problème il a pas réussi à aller 
 chercher men iem jaoui l'image on n'a 
 pas été c'est prendre 
 effectivement 
 ok donc ce que j'ai fait c'est que j'ai 
 rajouté un dossier à cette d'accord 
 comme ça vous aurez aussi la faune toile 
 comme ça on s'en bat rappaz donc ce 
 qu'on va faire c'est que enfin je veux 
 dire dans le support du cours sont là 
 vous vous dites mais pourquoi il parle 
 tout seul alors que vous vous l'avez 
 déjà le dossier à ses astuces que 
 j'enregistre forcément dans le passé 
 donc du coup d'un ascète on aura les 
 fentes et on a un petit fichier image 
 voilà comme ça maintenant glycémie 
 d'enfants tu vois qu'il ait mes dents 
 n'ont toujours pas 
 voilà là j'ai bien fait image et il m'a 
 fait un image copie donc ça on supprime 
 voilà donc la petite image c'est quoi 
 oui c'est l'image du logo l'image de 
 fond du logo la scène j'ai oublié mais 
 dans les supports enfin vous vous lavez 
 du cru de récits parts d'un fonds géré 
 de dire ça ok on est bon 
 est ce qu'on a encore un message 
 d'erreur donc vous voyez qu'à chaque 
 fois on a des messages d'erreur qui sont 
 quand même assez car nul ne la renvoie 
 déjà que la police a pris et on voit 
 effectivement 
 on peut cliquer sur les éléments qu'on 
 veut donc qu'est-ce que j'ai qu'est-ce 
 que j'ai préparé dans les stades dans le 
 style j'ai préparé 
 donc donc en poudre en composant 
 navigation une native 7,9 active a fait 
 quoi et révèle un after donc l'after en 
 fait ici une barre qui va souligner 
 l'élément donc quand on va injecter 
 cette classe on aura une barre qui 
 viendra là comme ça et donc on sera sur 
 quelle page en est d'accord donc on peut 
 rajouter le style qu'on veut en activant 
 fait donc pour indiquer l'utilisateur 
 sur quoi et sauf en fait il va juste 
 falloir que ça ça corresponde il faudra 
 juste que ce schéma-là correspondent 
 elana d'activ s'appliquera donc comment 
 est ce qu'on fait ça comment est ce 
 qu'on fait savoir ça ça a un peu changé 
 avant c'était plus facile en ré l'acte 
 et je sais pas pourquoi maintenant ça 
 l'est moins forcément enfin non pas 
 forcément malheureusement ça l'est moins 
 donc ce qu'on va faire c'est comment se 
 placer dans navigation point j s et là 
 dans la balise on va dire battant je te 
 mettre une classe name mais cette classe 
 je voudrais que tu me la met que si tu 
 es active tb regarder comment dit sa 
 part sur une fonction fléché donc et 
 anonyme on va dire nav 
 is active et ont fait une ternaire si 
 oui alors tu me mets la classe d'actifs 
 ça c'est la classe qu'on a créé non un 
 css ou en saas pour pouvoir injecter le 
 style qu'on veut d'accord et si non 
 bitumée rien voilà comment se présente 
 la ternaire donc ça avant c'était plus 
 facile à faire maintenant c'est comme ça 
 bon écoutez on va pas 
 bataillé on récupère cette logique là et 
 on l'a mais aussi à son copain de la 
 soucoupe homs où il enregistre voilà la 
 pretty heures eva vomissent à la ligne 
 je sais pas pourquoi il a fait pour l'un 
 comme pour l'autre 
 c'est pas très grave en soi on a fait ça 
 comme ça comme ça et n'ont même pas eu 
 la miss a aussi admis comme ça pourquoi 
 pas ça change pas grand chose ah non là 
 il veut pas le faire poursuit la banque 
 peu importe ok et donc là en faisant ça 
 qu'est ce qu'on vient de faire eh bien 
 on vient de créer une navigation ou en 
 indique à l'utilisateur sur quoi ils 
 servent 
 regardez-la ci fixera propos on voit 
 très bien que là il ya une classe 
 d'actifs qui intersecté cette classe est 
 bien l'injectent une barbe bleue en bas 
 alors c'est tout ce qu'elle fait voilà 
 c'est comme ça vous indiquez votre corps 
 vous posez pas obligé de faire une barbe 
 bleue 1 vous pouvez changer la couleur 
 de fond ou écrire plus gros la page sur 
 laquelle on etc il ya plein là c'est à 
 vous de le voir ce que voulait faire en 
 termes de style en tout cas là vous 
 voyez qu'on a toute cette logique 
 magnifique de navigation 
 et c'est bien parce que du coup ça c'est 
 fini ok alors ensuite qu'est ce qu'on va 
 vouloir qu'est-ce qu'on va vouloir faire 
 je fais un petit peu au fur et à mesure 
 ça leur apprendra plus besoin parce 
 qu'en fait quand on creuse dans red act 
 fin là vous le voyez déjà là sur le côté 
 là on a une on a une arborescence de 
 fichiers qui devient vite énorme en fait 
 donc il faut moi je prend l'habitude de 
 fermer pour pas trop embrouillé en fait 
 alors maintenant le logo deuxième partie 
 il ya une chose qui m'intéresse dans le 
 logo ça a l'air facile comme ça le logo 
 que je vous montre il est comme ça il 
 ressent la salle logo donc ce coin fable 
 c'est qu'on va se créer un composant 
 logo qu'on va incorporer une image avec 
 une balise img 
 h2 et une image de fond eh bien ça ça 
 vous paraît anodin et bien quand on 
 débute moi je sais que de beaux débuts 
 j'ai un petit peu buggé là dessus parce 
 que selon si vous déclarez votre image 
 avec une balise iem v ou si vous la 
 prenez 
 depuis depuis sas en mettant background 
 et bien c'est pas pareil il faut les 
 ranger ailleurs les images il faut il 
 faut les ranger à différents endroits 
 donc qu'on soit bien clair 
 je vous mettra prend note comme ça dans 
 les dents le projet en fait vous aurez 
 tout pour démarrer après un site vitrine 
 ou fin vous démarrez d un truc assez 
 assez clean donc si je dis logo 
 point j s on va faire un rsc react steak 
 est ce qu'on peut note 
 je vais dire pour le gone ok ça démarre 
 comme ça donc d'abord on a une image 
 et là 
 on ira la chercher après on va juste 
 appeler sa logorrhée actes ok 
 on va faire un âge de 
 react world ok c'est tout d'ailleurs ce 
 que je vais faire un jeu trois peut-être 
 que c'est un peu mieux au niveau du 
 style se fera par tranches ok 
 donc déjà j'ai envie de faire simple on 
 vient de se créer le composant 
 maintenant j'ai envie de vous montrer 
 comment ça marche enfin j'ai envie déjà 
 qu'on se la fiche le composent donc on 
 va le logo moi ce que vous le faire 
 apparaître des partout et en plus il 
 apparaît avant la navigation de logo il 
 doit être au plus haut de l'application 
 donc on va dans nos pages 
 about 
 et là on dit l eau et la regarder d'une 
 propose 
 et donc ça nous fait l'auto import là 
 haut c'est indispensable à sion si c'est 
 encore une fois si ça marche pas vous 
 aurez des indices dans les messages 
 d'erreur fins non pas des indices avec 
 vous diront que c'est le problème est là 
 j'appelle logo des voiliers qu'on n'a 
 pas su qu des 50 fois logo on la connaît 
 une seule fois et toute sa logique 
 après on peut l'importer n'importe où et 
 voyons là le logo à eux ne s'en est 
 jamais une image de fond ce que j'ai 
 fait le style est effectivement 
 donc on a des yeux l'image de fond 
 on se passerait à vous montrer comment 
 on fait pour l'image de fond ce qui 
 m'intéresse c'est que pour les images en 
 fait que vous allez avoir incorporé en 
 bas les img donc ça je vais vous le 
 commenter je vais l'écrire commenté le 
 vous aussi si vous voulez donc 
 les images 
 inclus enfin non 
 je viens les images importées 
 depuis la balise img 
 sont accessibles dans 
 public qu'est ce que ça veut dire ça 
 mais ça veut dire claque j'enregistre 
 voilà comme ça ça veut dire quoi se dire 
 que quand notre site vous voyez oui 
 comment comment il fait la réac la 
 cantine ou quand ils nous compile tous 
 là on a l'impression d'avoir un html 
 tout à fait classique oui comment ça se 
 présente 
 et bien fait notre belle image là est là 
 et elle prend sa source elle prend sa 
 src dans public donc là dedans on peut 
 cas on peut imaginer qu'on se fait un 
 dossier un dossier images bon là pour le 
 pour le pour l'exemple on veut juste 
 prendre là le logo 192 le celui ci 
 mais en gros c'est comme si bien 
 d'autres balises elles étaient importés 
 directement ici comme si dans route 
 on a des images tata et donc ça veut 
 dire quoi c'est sûr que là pour avoir 
 l'image si je vais les chercher l'image 
 du logo 192 j'ai juste à faire points se 
 lâche legault 192 points png d'accord et 
 bien la denrée l'acte on va pas être 
 aidé pour taper 
 puisque effectivement un peloton et 
 jouer comme ça effectivement il va 
 falloir qu'on fasse comme si on était 
 dans public pour taper donc là dans 
 public eh bien il faut des jeux 10 
 points slash et la wei qui me propose 
 rien 
 et je lui dis va me chercher logo 
 192 points png 
 ils veulent trouver hilal trouver leurs 
 corps et des chemins quand on est dans 
 le logo il faudrait faire deux fois deux 
 points sortir de là ensuite sortir du 
 hrc ensuite allé dans public et ensuite 
 elle est là et non là vous vous dire 
 juste les balisiers mg c'est comme si 
 j'étais dans public voilà ça c'est un 
 truc primordial à seurre donc regardons 
 voilà ça a fonctionné 
 bon c'est précis est primordial mais bon 
 une fois vous le savez vous savez je ne 
 faut pas non plus trop s'en faire une 
 montagne par contre d'un composant donc 
 ça s'appelle logo 
 si vous avez besoin d'inclure un bag ont 
 donc l'envoi de notre image notre logo 
 il est l'image de baghran clairement je 
 voulais refaire au ralenti hop je 
 supprime 
 voilà là ya pas de background ok on va 
 aller se chercher et bien en fait c'est 
 le principe que vous connaissez donc on 
 dit 
 url 
 dans ses pas points soit donc là du coup 
 on fait deux points se lâchant sort 
 ensuite on ressort à nouveau ensuite on 
 va dans la set ensuite on voit dans 
 l'image et ensuite on va dormir et on 
 dit center covers assez pour que ce soit 
 parfaitement bien voilà 
 bon là pour le coup l'image en 
 background faut presque rien que je vous 
 dise parce que ben c'est comme si vous 
 allez chercher l'image normalement en 
 fait c'est le bon chemin donc dites vous 
 juste que c'est pour la balise ing que 
 c'est particulier pour l'image en bas 
 quand vous allez chercher l'image et 
 puis si vous la voyez c'est que ça a 
 marché si vous l'avez pas par contre dès 
 fois je n'ai pas dit ça actualisé des 
 fois parce que quand on enregistre ça 
 fait une mise à jour mais des fois en 
 react eelv et des choses en cash ou quoi 
 et on a besoin d'actualiser moi je sais 
 pas c'est pas le cas mais je vous le dis 
 pour pour l'avenir 
 et donc voilà on a réussi à enfin je me 
 suis en tout cas vous expliquer cette 
 petite particularité les images et sons 
 a surtout réussi à ce qu d un composant 
 corps utilise un compose encore utilisé 
 puis des pages complètes qu'on appelle 
 quant à lui à elle correspond donc on a 
 déjà là on vient de se faire la logique 
 d'un site vitrine à vous pouvez déjà 
 faire un site vitrine il a vécu 
 navigation hyper dynamique et en 
 utilisant des composants donc maintenant 
 bon bien sûr on va aller quand même un 
 petit peu plus dans ce projet puisque on 
 va aller se chercher les pays ce lait 
 stocké seul est listé 
 bien on va se connaît donc la partie 
 avec tous nos pays qui sont là là la 
 petite partir chercher à ce truc là on 
 le fera à la fin c'est ce qui est plus 
 complexe d'abord on va aller se chercher 
 les données dans une api on va se les 
 stocker ses données et après on va faire 
 un map d'accord c'est parti alors le 
 lien de l'apei peut-être en train de 
 penser ce qu'il nous faudrait ce lien 
 reste 
 countries as pays 
 si je taperai ce countries as pays est 
 ce que je trouve quelque chose 
 je sais plus bon écoutez moi le mien je 
 vous le passé celui ci s'appelle reste 
 contre is.com 
 et cela chevet 3.1 slash all 
 wheel la pays a changé récemment la ce 
 que j'avais fait des vidéos précédentes 
 mais là pays a changé récemment 
 et maintenant c'est ça le bon lien le 
 maintien de la paix y donc avant de 
 travailler que d'appeler la première 
 chose qu'on doit faire c'est de mettre 
 le lien dans l'url est de contrôler que 
 ça fonctionne parce que sinon ça sert à 
 rien de faire une requête à la pays là 
 ça fonctionne donc on va pouvoir faire 
 une requête effectivement alors 
 nouveau composant le composant de tous 
 les pays j'ai dit qu'il allait s'appeler 
 countries donc les pays au pluriel les 
 coaches with 
 fsc est donc 
 là dedans qu'est ce qu'on va faire et 
 bien on va chercher vos déjà savez quoi 
 en acajou se mettre à h 1 
 au moins pour voir si notre composants 
 fonctionnent donc j'écris juste 
 countries ça c'est quelque chose qui se 
 fait souvent que vous créez un composant 
 vous vous mettez des jaloux que vous 
 comptez le m donc nous on compte le 
 mettre dans home on compte dire logo 
 accueille même accueil on peut le virer 
 et on va dire j'appelle countries ok 
 j'enregistre 
 voyons voir ce que ça donne 
 voilà rokia countries ok le composant et 
 bien naples est donc maintenant on peut 
 travailler dans cette zone là de notre 
 site il ya aucun problème 
 concernant le style d'ailleurs en 32e de 
 juin d'utilité là si vous voulez faire 
 du style que vous êtes un ancien mais 
 comment comment on fait pour faire du 
 style en fait j'ai juste à vous y 
 prendre comme si vous faisiez votre 
 style habituel fait clic droit sur le 
 devant que vous voulez vous inspecté 
 whitta ok mon l'ipad il n'ya pas de 
 classe mais bon pour abattre une classe 
 on pourrait dire countries containers 
 adsea country de containers il ya 1 h 
 accès peuvent contribuer à vous 
 sélectionnez ça en saas et vous mettez 
 vos styles c'est tout il n'y a rien de 
 plus à faire que ça c'est faux faux fait 
 fonctionner avec la console ici si vous 
 les maîtres du style vous dites tiens 
 comment ça a été injecté voilà vous 
 récupérez les non français comme ça 
 qu'on fait du style en général on n'a 
 pas besoin d'aller dans les fichiers 
 voir comment appeler les choses vont 
 mieux se balade dans la console comme ça 
 on voit exactement comment le navigateur 
 interprète bon cette parenthèse étant 
 dit voilà on revient là est donc là où 
 on aurait pu être une petite classe en 
 cours et dirk claes name 
 countries ok donc là c'est là qu'on aura 
 nos pays 
 très bien on voit que ces centres est 
 maintenant 
 parce qu'il y avait du style sur cette 
 classe de countries 
 alors on va aller chercher nous donner 
 pour aller chercher à donner avoir 
 besoin de mpm hypo install axios axios 
 est une technologie qui nous permet de 
 faire des fêtes 
 qui nous permet de faire défection club 
 georges de contrôle et qu'il est bien 
 installée voilà l'ag axios 
 axios ça permet de faire des fêtes ch un 
 peu plus rapide et où sont ses conseils 
 pour faire que son conseil en vue 
 anguilard ou un réac mais on peut le 
 faire vania javascript axios vous pouvez 
 utiliser partout 
 donc comment on va faire 
 on va pas ici s'appelait axios à l'air 
 libre d'accord je pourrais faire axios 
 pointe guette c'est comme ça qu'on va 
 essayer de donner 
 mais si on faisait ça on aurait des 
 soucis dans notre composants en fait il 
 faut jamais a déclaré dr libre il faut 
 lui dire plutôt on peut les déclarer des 
 fonctions toutes celles qu'on voudra 
 plus tôt ça dans l'ain dans la deuxième 
 partie mais si on veut qu'ils fassent 
 quelque chose quand le composant est 
 appelé quand le composant est monté 
 c'est comme ça qu'on dit et bien ce 
 qu'il faut lui dire c'est qu'il faut 
 faire un use effect 
 et use effect en fait c'est 
 en gros y'a on va là tout le bout de 
 code qu'on veut à l'intérieur et ça se 
 joue quand le composant est monté 
 voilà comment ça se présente comme ça ça 
 s'appelle un call back le petit crochet 
 je vais me contenter quand même je vais 
 dire donc le use effect 
 se joue 
 lorsque le composant 
 et monte donc c'est que quand on arrive 
 dessus c'est comme ça qu'on dit ou le 
 monde il est monté le commente le 
 composant quand on l'appelle là il est 
 mis en place 
 d'accord mais il faut quand même savoir 
 que ce bout de code l'a peut-être 
 rappeler si jamais 
 quelque chose se passe là dedans 
 mais 
 sachez juste que ça c'est le colback on 
 va pas l'utiliser pour pour ce cas 
 concret parce que l'on fait on va juste 
 aller chercher les données une fois de 
 nos pays et approuvé les stocker ses 
 données mais bien sûr on verra on verra 
 tout au long des prochaines vidéos 
 les cas concret dans lesquels on peut 
 utiliser sa ont toujours est il que 
 l'art lui dit bond quand le composant 
 aimante et je veux que tu me joue et là 
 on peut le dire axios non non c'est une 
 bonne pratique de faire ça on dit axios 
 point guette va me chercher sans 
 donc bien sûr si on appelle axios il 
 faut l'appeler là où aussi oui que moi 
 j'ai fait un appel automatique 
 j'ai été un peu vite mais je vous le dis 
 donc ça fait une porte axios axios à 
 vous pouvez taper la main sinon pensez à 
 ces cours à taper 
 et nos colis va me chercher ça 
 zen non classés aux habitudes du fait ch 
 c'est un peu la même chose bazaine le 
 résultat que tu as été chercher notre le 
 moi je vais faire un console blog 
 donc qu'est-ce que ça dit la console 
 sadique ont été chercher un heureux avec 
 de la data 
 donc il faut dire res point date à mon 
 avis on va dire reste point data et là 
 effectivement on est à l'entrée d'un 
 arrêt de deux cent cinquante pays ok on 
 a réussi à les chercher à donner donc 
 voyez on n'utilise pas le fait chaud 10 
 axios et si vous avez l'habitude du fesh 
 pas sûr d'avoir marqué mais il ya des 
 tabliers tapas - l'étape du reste pointe 
 qui sonne qu'elle disparaît avec axione 
 se dire qu'ils transforment directement 
 le fichier ji sun en un objet java 
 script exploitables 
 donc c'est plutôt pas mal 
 maintenant 
 ce qui va falloir faire baisser ceux 
 stockés ou le faire un console blog bien 
 sûr de se mettre cette donnée cette date 
 à aures la mettre dans une variable et 
 donc on pourrait être tenté de dire 
 const data égale un tableau puis après 
 on te passe on te passera des choses 
 suivantes 
 mais non c'est pas comme ça qu'on ferait 
 acte enfin on peut en réalité faire son 
 break mais c'est pas comme ça qu'on fait 
 en reste qu'on fait c'est qu'on utilise 
 le state vous allez mieux comprendre 
 petit à petit le c'est en fait à force 
 de faire des choses enfin en tout cette 
 première partie ensuite en faisant la 
 seconde partie donc je vais pas trop 
 m'étendre dessus pour expliquer je vais 
 plutôt comprend le faisant donc on va 
 dire je crée une variable datant ma 
 seule chance 
 seule opportunité de pouvoir modifier 
 cette date assez de passer par cette 
 date a donc fait on modifie jamais la 
 variable directement on passe par un set 
 data c'est elle qui va nous permettre de 
 modifier cette date à ce que cette date 
 est en fait c'est comme si enfin cette 
 variable data c'est comme si elles 
 étaient stockées dans l'état de notre 
 compose en fait il ya un état au dessus 
 et on peut stocker toutes sortes de 
 choses mais je vous montrais avec un 
 petit plugin comment est-ce qu'on peut 
 regarder ça et donc on va dire que c'est 
 un lieu aux states voilà et on peut dire 
 bon on a on attend à décrocher les 
 crochets vide comme ça on part sur un 
 tableau donc on a data la seule façon de 
 pouvoir modifier cette date assez de 
 passer par cette date a et on déclare 
 que c'est et rieuse state donc il faut 
 le déclarer aussi lahoud alors j'ai pas 
 dit pour nous effect il faut aussi que 
 ce soit déclaré non sur des composants 
 de réaction qu'il faut les appeler ici 
 d'accord mais en vrai si vous commencez 
 à taper use il vous propose en fait le 
 yoyo state donc 
 donc voilà faut princier qui vous 
 proposer ça fais le toi rapport labeaume 
 et sinon vous avez toute façon un 
 message d'erreur il vous aurait dit yu 
 state is not diffa new state je sais pas 
 quoi faire dans tous les cas il n'aura 
 pas qu'il n'aurait pas connu enfin il 
 connaissait pas ce que c'était ok 
 donc on a déclaré une autre variable ici 
 eh bien il ya un outil qui s'appelle le 
 réacteur tous sans mot stupide que ça en 
 fait on n'a quasiment jamais besoin de 
 votre console blog 
 donc vous prenez les grecs developer 
 tools ça existe sur firefox ça existe 
 sur 
 sur chrome évidemment ce qu'on a 
 embauché son brave mais bon ce soir que 
 breivik robe c'est la même chose on sait 
 le même le code en tout cas 
 de fond c'est le même c'est ce que bref 
 c'est beaucoup plus ça respecte beaucoup 
 plus la vie privée donc voilà 
 donc vous prenez ce petit toolkit là ce 
 petit developer tools 
 et 
 vous allez peut-être devoir recharger 
 votre navigateur refermez relancer ou 
 sinon vous allez directement l'avoir ici 
 donc s'appelle profilers son smartphone 
 profilers mais ça s'appelle copenhague 
 l'autre en vrai vous allez l'avoir enfin 
 bien sûr quoi la voilà vous avez sur 
 copenhague est donc ce truc là qui 
 s'appelle components donc là où il ya 
 éléments qu'on soit les tout ça c'est un 
 plugin qu'on s'est téléchargé et bien ça 
 nous regroupe tous les composants de 
 notre application et là vous voyez 
 comment ils sont fichus et quand vous 
 allez sur twitter ou sur facebook est 
 bien avec cet outil composantes vous 
 pouvez voir exactement tout 
 l'application que mal était fait puisque 
 le code en fronte guy libre vous avez 
 enfin le code que votre navigateur 
 interprète vous y avez accès vous bien 
 sûr donc vous pouvez voir les 
 vous pouvez voir les 
 différents éléments 
 les différents éléments de la structure 
 du site est donc là ce qui intéresse 
 tous et countries il a appelé ici il est 
 dans l'eau chlorée d'en route donc au 
 début on part du browser auteurs 
 tatatata on descend des 100 ap homme 
 qu'est ce qu'il ya des hommes blancs 
 omya logo ya navigation il ya les links 
 les na'vi qui sont bien navigation c'est 
 comme si c'est des composants ne sont 
 pas des composants qu'on a créé mais 
 c'est des composants et navigue et 
 bien sûr la country et là d'un country 
 un truc intéressant c'est que oui il 
 nous dit qu'on amuse effect bon on s'en 
 fiche 
 et il ya un oeil aux states il mixe et 
 décroché il ya un style tout court ibis 
 et décrocher évident et bien fait c'est 
 là qu'on voit notre style a évolué la 
 wec il est vide notre state 
 mais dont je vous ai dit que la seule 
 façon de pouvoir modifier date à se dire 
 cette date a donc s'il a la place du con 
 sol log jeudi mais cette date à je te 
 passe c'est comme ça que ça marche entre 
 parenthèses on lui passe les valeurs 
 qu'on veut donc cette date à je te passe 
 le responsable a not to be de 150 pays 
 j'enregistrais bien à regarder 
 vous avez vu si vous n'avez pas vu je 
 voulais refaire approuvera lentilles 
 hop on a notre state on a donc fort que 
 le 1 c'est la première soit faite ils 
 s'appellent tous state les différentes 
 variables qu'on va créer en faisant le 
 yo-yo state mais le un ben là c'est la 
 première qu'on a déclaré 
 et elle abrite absolument les deux cent 
 cinquante pays donc on a toutes les 
 données qu'ils souhaitaient passer à 
 l'état d'autres composants et maintenant 
 on va pouvoir exploiter cet état mais ce 
 qui est bien c'est que prix peut être 
 exploité en temps réel cet état c'est ça 
 qui est bien on va voir un petit peu 
 comment ça fonctionne et 
 oui vous le voulez comme vous remonterez 
 regarder quand je recharge la page 
 c'était qui va être vide il aurait juste 
 décroché lui dit vous allez voir c'est 
 le temps de réponse du serveur le temps 
 qu'on mette les choses là des lacets 
 vide et c'est bon là on a la data 
 ok vous voyez que les consoler on n'a 
 pas besoin de les faire on se positionne 
 sur le composant qu'on veut et on peut 
 savoir voir en vrai défaut on peut avoir 
 envie d'en faire des consoles mais on va 
 dire que pour ces cas là on a plus 
 besoin d'en faire des consoles blog on a 
 tous directement on a l'état tel qu'il 
 est actuellement devant nous quoi 
 ok donc ça vous inquiétez pas on va le 
 revoir plusieurs fois façon c'est comme 
 ça qu'on fait les variables la plupart 
 des variables en 
 react donc c'est une preuve ont été 
 reçus une première couche que je vous 
 fais tout comme muse effect chaque 
 composant quand on le crée si on a envie 
 qui joue quelque chose dès qu on le crée 
 on fait ce qu'on n'a pas les réflexes et 
 dès que le composant est monté tu me 
 joue ça ça que ça veut dire les effects 
 mais il faut tout cloisonné parce que 
 vous allez me dire mais pourquoi si on 
 veut que ce soit je vous noterez 
 pourquoi ce qu'on n'est pas comme ça à 
 klaus parce que là en fait il serait 
 tenté le composant react d'euros de 
 rejouer sa de le rejouer de rejouer à 
 l'infini en fait c'est pour ça qu'il 
 faut plus raisonner les choses il faut 
 les mettre voilà comme ceci dans un user 
 fee act par exemple donc ça s'appelle d 
 où qu use effect use the state c'est dur 
 et actes moderne c'est des choses qui 
 n'existaient pas il ya 3 4 ans d'accord 
 donc vous pouvez encore tombés sur des 
 vieux projet de gens qui ont fait durer 
 actes et qu'ils n'utilisent pas ces 
 choses là c'est tout à fait plausible 
 mais moi ma toute première vidéo que 
 j'ai fait sur youtube il ya deux ans un 
 peu plus de deux ans froid jeu 
 j'utilisais palais où j'utilisais des 
 classes composantes voilà du coup j'ai 
 un peu connu l'ancien reato si je peux 
 vous dire que leur actuelle est beaucoup 
 beaucoup mieux alors maintenant qu'on a 
 notre data bien exploitons la date data 
 comment est ce qu'on fait pour exploiter 
 un noir et un aurait dans lequel il ya 
 plein d'objets bas il ya une méthode 
 pour ça en javascript je pense je 
 suppose que vous la connaissez 
 vous pouvez pas me répondre je veux 
 répondre pour vous c'est la méthode la 
 méthode qui ont recréé une je vais créer 
 un nul c'est pas très 
 bon je vais créer annuel on va rester 
 sur un néant fait savoir que quand on 
 liste des cartes il ya plus il ya plus 
 de deux éléments dans les lits il faut 
 pas faire des 10 mais bon là je vais 
 quand même faire des livres parce que 
 j'ai envie de rester sur le même style 
 que j'ai envie de rester sur le même 
 style qui a été fait et ne parlent pas 
 le reprendre restez sur un truc simple 
 donc on va faire des uli là-dedans va 
 solliciter nos pays mais bon faut savoir 
 que c'est pas non plus une archive 
 howett pratique de lister les choses 
 dans un duel et dans un lit mais c'est 
 juste comme ils y vont être un peu gros 
 par rapport à ce qu'elle accepte et on 
 va dire 
 donc on va dire quoi on va dire data 
 point map je te ma 
 oui je n'ai pas précisé mais pour écrire 
 dans nos dans nos composants là on peut 
 écrire n'importe quoi tant défaut quand 
 même que je vous montre si j'avais des 
 constats 
 et l'eau sept lots non va faire juste un 
 petit texte qui dit elle au 
 youth states on va dire bah tiens toi tu 
 dis hello n'ont guère aidé les amis sera 
 un peu plus parlant est bien fait henri 
 acte dès qu'on veut parler d'eux dès 
 qu'on veut faire durer at on nous les 
 accolades ont fait pas de dollars 
 accolade commun javascript on fait juste 
 accolades des par exemple on dit l eau 
 et là regardez ce que ça fait et ça me 
 dit elle les a mis d'accord donc on a eu 
 ce brin de citer la variable comme ça 
 mais on peut aussi faire une ternaire et 
 on peut mais aussi balancé tout 
 javascript pouvait en fait en quelque 
 sorte un bon ça c'est pour vous montrer 
 qu'on peut afficher les choses comme ça 
 et donc là pour lancer mon map eh ben 
 j'ouvre des guides et des accolades 
 et jeudi data 
 point bas peut partir de là je lui 
 disais comment je vais appeler chaque 
 élément du helmand on va dire en un 
 contre un 
 et qu'est ce que tu vas faire de chacun 
 de ces éléments vas tu vas me faire 
 tu vas me faire un lit par exemple 
 et on va on va dire tu vas me faire 
 country point n'est maintenant c'est 
 papy sable pas comme ça patrick 
 c'est country 
 preneur countries donc c'est là qu'on a 
 notre notre state on peut le consulter 
 en temps réel 
 et non mais là plus c'est un nom il ya 
 un nom particulier parce que 
 ça s'appelle oui parce qu'en fait il ya 
 une sorte de traduction 
 s'est construit 
 point name points 
 annoncés sans traduction suit la vaccine 
 on avait transmission peut faire 
 contrepoint transmisssion ce 
 qu on three points transmisssion ce 
 point fr à point common 
 c'est rapide 
 bon vocable de faire mon cou three 
 points trans et ssions et fera common 
 est ce qu'on a réussi à se booster nos 
 deux cent cinquante pays le suspense non 
 alors j'ai du mal à écrire un truc 
 là il me dit que chaque élément d'un 
 d'une liste doit avoir une clé unique ça 
 c'est pour pouvoir après dé manipuler 
 ces éléments en ré l'acte mais c'est pas 
 ça le 
 ça ça pose pas enfin c'est pas bloquant 
 en soit 
 je vais vous montrer comment il faut 
 faire dans quel fait il faudrait se 
 placer dans le lit il faut dire bête 
 attends je vais te donne une clé 
 est la clé c'est country par exemple 
 donc toujours égale accolade vous 
 pourrez dire 
 country point name chacun chaque pays a 
 un nom différent donc vu qu'il faut 
 qu'ils aient tous une clé unique je 
 pense que country point n'aime ça 
 fonctionnerait 
 dans la poterie point n'est que tout 
 court ça marcherait pas parce que 
 ça suffit pas il faut dire qu'au matin 
 pour accéder à sa dans la base de 
 données 
 ah non mais il ya des pays et depuis qu 
 il est piquant même nom forcément il 
 fallait que il fallait que ça arrive 
 alors si on trouve pas d'aller dit comme 
 ça ce qu'on peut faire on peut lui 
 donner enfin ce qu'il faut c'est donne 
 une clé qui soit unique à chaque élément 
 qui va lister nos le map en fait si on 
 n'a pas d'éléments comme ça parce qu'on 
 fait c'est qu'on fait un index oui le 
 deuxième paramètre index est donc 
 évidemment le premier élément ce sera le 
 02 03 et donc il ya eu le le 10e ce sera 
 le 1 le troisième ce sera le 2e etc 
 et donc on va lui dire bellac laisser 
 l'index on vend aux index ai vus pour 
 compte et il va compter de 0 à 250 mais 
 c'était pas ça le problème j'actualise 
 il en a plus problème de clefs 
 cependant il veut quand même pas nous 
 afficher nos lits 
 mais je crois que c'est parce que j'ai 
 mis un s la regardons 
 ouais c'est mieux ok bon ils sont en 
 flex ils sont tous scotchés recrutant 
 flex ils sont en fait ce drapeau est ce 
 pour ça qu'ils reviennent à la ligne 
 voilà réussi à lister nos deux cent 
 cinquante pays oui d'accord j'ai fait 
 une faute de frappe mais ça que moi dans 
 mon modèle final j'avais pas utiliser 
 des mots et noms français monsieur dans 
 la pays propose de nous en france elle 
 en cotant autant profiter par contient 
 pas le nom de capital n'est pas en 
 français c'est un peu particulier mais 
 on n'a qu'à dire qu'on fait comme ça 
 toujours est il que 
 toujours utile que 
 je vous ai quand même dit que 
 on allait faire des composants un coût 
 des composants particulier et juteuse 
 expliqué qu'un schéma 
 alors qu'on comprenne bien comment ça se 
 présente l'arborescence décompose en a 
 le composant le plus haut possible notre 
 application on sait bien le ap 
 ensuite dans about on a bien appelé de 
 composants ok bon tout ça c'est facile 
 vous êtes un peu compris que ça marchait 
 comme ça donc appuyé l'appel homme comme 
 lui l'intérieur il ya trois composants 
 la navigation logo countries 
 aidant countries ce qu'on va faire 
 baisser qu'on va lui aussi on va lui 
 aussi lui faire lui appelé un composant 
 c'est un peu comme un composant en 
 france leurs composants qu'on appelle à 
 l'intérieur de l'anneau de composants et 
 on recommence on va se liste est la 
 logique de toutes nos cartes on va 
 solliciter une seule fois la logique de 
 nos cartes et bien sûr le map va les 
 multiplier 
 sauf que il y a un problème et c'est ce 
 qui va nous emmener à une notion qui est 
 très importante aussi en ré accélère ses 
 les props c'est à dire que le le 
 countries notre compte risque y est 
 enfin lui le cart plus tôt eh bien il va 
 falloir qu'ils connaissent les données 
 de pays diouf a reconduit parce qu'on 
 passe à carde les données du pays et car 
 il va pas les connaître de base eh bien 
 ça en fait ça s'appelle une propre en 
 react en fait un élément un un composant 
 parent peut passer ces données les 
 données qu'il veut à un composant 
 enfants d'accord voyez c'est pour ça que 
 j'ai mis des flèches comme ça ne sont 
 pas anodines ces flèches ça veut dire 
 quoi ça veut dire que tant qu'il ya deux 
 parents enfants on peut passer les 
 données par contre un enfant qui a des 
 données il peut pas les redonner à son 
 parent d'accord et ça ça peut donner des 
 blocages alors bien sûr nous dit c'est 
 bien qu'ils aient des solutions mais là 
 on est dans du rac qui est bien plus 
 évoluée ce sera se sera vu beaucoup plus 
 tard ce sera même pas vu dans la partie 
 ii se sera vu encore plus loin que la 
 partie 2 
 donc pour bien comprendre ça il va 
 falloir que countries donne ces données 
 aux cartes qu'on va lister ok donc je 
 peux refaire mais mon petit truc 
 alors ce qu'on va faire ses courses crie 
 un composant card 
 on va dire card points 
 jsr s c est donc lui il aura la logique 
 d'affichage d'une carte donc on va dire 
 c'est un lit qui a la classe card 
 d'accord et puis oui aura le drapeau 
 d'un côté or le drapeau on va par repas 
 encore sera parcours se remplir tout ça 
 on va juste essayer de faire apparaître 
 les choses donc j'ai tout bien une div 
 info les données des pays et ce sera d 
 age 2 
 dans lequel on mettra le nom du pays 
 d'accord on va juste faire ça comme ça 
 le but d'abord de faire apparaître ce 
 composant est de lister 250 fois c'est 
 ça la première étape donc notre map au 
 lieu de dire l'image un chouette non on 
 va pas faire un lit 
 et un défaut quand même que je récupère 
 non mélodique sur son fou on va faire 
 comme ça on va dire ok eh bien tu vas me 
 lis tes 
 gardes donc oui on va prendre ces 
 données et il va jouer mais autant de 
 fois qu'il faut par contre le tabac en 
 fait c'est ça que ça fait un map 1 absa 
 parcours autant de fois que vous voulez 
 un tableau là il ya 250 
 énumération b va te faire 250 fois il va 
 le chercher ce composant 250 faut 
 il me dit que j'ai toujours pas la clé 
 ah bin là j'ai réussi à lister oui oui 
 parce que il faut quand même savoir que 
 au début un accueil et drapeaux et 
 éventuellement la les infos over 
 d'accord c'est comme ça que ça tu 
 affiches c'est over qui s'affichent les 
 infos c'est à dire que la partie 
 la partie que j'ai nommé 
 cette partie là info en fait aidé en 
 display en opacity 0 et quand on survole 
 la carte elle passe en opacity 1 voilà 
 c'est tout c'est juste ça le petit truc 
 css 
 donc c'est pour ça que l'on voit rien 
 mais on a bien non du pays dont du pays 
 non du pays donc bon c'est pas dynamique 
 il a écrit rendu renom du pays à chaque 
 fois donc il me dit déjà que ichaï d'une 
 liste shoots avant l'unique kiprop ok si 
 tu veux le clé unique 
 si tu veux une pièce unique mon ami mais 
 tu vas prendre l'index 
 enfin ce soir qu'on peut aussi passer 
 une clé vraiment unique si jamais on est 
 sur une base de données 
 d'utilisateurs ou d'articles et que par 
 exemple on a un truc cette belle 
 'article point heidi un édile unique à 
 chaque fois mais là on n'a pas le mandat 
 il dit donc on va faire un index 
 d'ailleurs je vois pas de chez caissier 
 en haïti mais c'est bien nous apprendre 
 aussi qu'on peut faire un index 
 ok donc la map le message d'erreur 
 maintenant je vous ai dit qu'on a un 
 composant enfants qui est card qui est 
 dans countries ce composant enfants 
 les composants entre eux ils ne 
 connaissent pas les données d autres par 
 contre il peut se dépasser entre le 
 parent peut lui passer un enfant donc si 
 on veut passer les données on va faire 
 ce qu'on appelle une propre on va dire 
 je vais appeler 
 les de la donne et que je te passe je 
 l'appelle country et qu'est ce que ça va 
 être cette donnée là eh bien ça va être 
 ce country là c'est en gros le country 
 c'est un nom générique un qu'on donne à 
 chaque tour de maps dont je me rends 
 compte que c'est un peu compliqué quand 
 j'explique mais c'est la pratique en 
 gros country qu'on soit bien d'accord 
 c'est voyez là vous pouvez les laisser 
 les clés la convainc qu'on a à chaque 
 fois bon c'est pas ça je vais vous 
 montrer ce que je veux montrer steak 
 country 
 est dans countries as il me dit encore 
 rudik kiprop donc soir ça c'est bon faut 
 que tu as lease est peut-être un groupe 
 country c'est chaque tour de boucles 
 country beau tour de bouc numéro zéro 
 basse et c'est ce pays là autour de bouc 
 numéro un c'est ce pays là donc en gros 
 nous lui passe vraiment toutes les 
 données de chaque pays individuellement 
 des deux des deux cent cinquante pays 
 mais c'est à chaque tour c'est ça que ça 
 fait le maps va lister 250 x card c'est 
 ce qu'il a fait là là il a listé 250 x 
 card sauf qu'à chaque fois on peut lui 
 passer b donner à chaque fois du pays où 
 il en est donc on va dire que je te 
 passe country 
 ok donc on lui dit composants card tu as 
 une clé unique bien sûr pour chaque pays 
 donc attendez cij actualisé ce qu'on a 
 tous le message d'erreur non la plus le 
 message d'erreur d'envoyer des fois faut 
 actualiser on a bien la clé unique pour 
 chaque élément ça ça peut être utile 
 pour mettre à jour ou pour supprimer des 
 éléments réac il a besoin d'avoir un 
 heidi unique pour chaque élément ok mais 
 surtout ce qu'on veut c'est récupérer 
 construit ici et ça on peut se récupérer 
 ça on peut se récupérer regardez plutôt 
 sillage des props 
 alors propre c'est le terme générique en 
 vrai elle a pris un moyen d'aller plus 
 vite mais je vous montre au moins à quoi 
 ça correspond donc je lui log the log 
 props 
 et donc il va bloquer 250 fois 
 chaque tour de boucles voilà oui il m'a 
 fait 250 console log 
 deux hommes 
 de chaque pays 
 sauf qu est le propre on n'est pas 
 directement à l'entrée des données en 
 fait si vous voulez être à l'entrée des 
 données du pays lassés république c'est 
 quoi ce soit public trinidad et tobago 
 et bien 
 il faudrait faire preuve ce point 
 country la wii là effectivement on 
 aurait on serait à l'entrée des deux 
 cent cinquante pays voyez là on a à 
 l'entrée de 150 pays donc bien sûr à 
 chaque fois on passe une donne est 
 différente et donc le console og ils 
 jouent les deux fins à chaque 
 énumération du map l'oncle et 250 fois 
 que le map et du maire ça ne voit 
 console longue et donc si vous 
 connaissez un petit peu javascript vous 
 n'êtes pas sans savoir qu'il y a 
 il ya une façon de déstructurer sens on 
 pourrait juste dire country et en disant 
 juste contre yb 1 on accède regardez là 
 si je blogue country 
 on accède directement à preuve ce point 
 country en fait en faisant comme ça donc 
 il faut mettre les accolades ici pour 
 déstructurer 
 en déstructurant comme ça là on accède à 
 la donne et qu'on veut et c'est comme ça 
 que un composant parent en transmet ces 
 données un composant enfants là je 
 voulais montrer l'exemple pour le map 
 mais il y en a vraiment une envie énorme 
 en cas d'usagé d'accord 
 et donc voilà ça nous liste chaque fois 
 des données de chaque pays donc 
 maintenant les photos ici on dit country 
 point flag ça nous donne le drapeau 
 sylla etc bon là si on revient du 
 javascript assez classique dire que 
 maintenant l'un et dans chaque tour de 
 map donc on va faire une balise img ici 
 jusqu'au début on ne voit que le drapeau 
 du pays et lee mg ça s'appelle country 
 point flags point svg c'est le drapeau 
 on peut réécrire drapeau et le nom du 
 pays 
 je fais chier ce qu'on veut vraiment se 
 faire ça 
 donc si on veut s'écrire drapeau 
 et le nom du pays il faudrait se mettre 
 comme ça 
 on pourrait la drapeau plus c'est quoi 
 le nom du pays c'est 
 country 
 point 
 j'aimais je m en anglais le vent tourner 
 et on va le faire bien parce que 
 c'est country points 37 chaînes ce point 
 fr a point comme anne voilà c'est 
 beaucoup plus court ok ok donc l'affiché 
 drapeau est par contre si jamais cela 
 sources étaient pas bonnes 
 regardons 
 regardons l'alternative voyons un 
 drapeau cubain drapeau guadeloupe 
 drapeau grèce donc là pour les non 
 voyants on a vraiment un truc très 
 accessible et même pour les robots de 
 google bien sûr qui référence les images 
 c'est que c'est grâce à la lutte qui 
 référence les images et donc là on a une 
 acte qui est dynamique d'accord ok bon 
 ça c'est grave ça reste javascript 
 classique mais bon ça fait quand même 
 pas de mal d'en parler ok on a réussi à 
 afficher tous nos drapeaux 
 et maintenant il faut mettre les données 
 dynamiques du pays donc j'avais dit quoi 
 joli capital donc il faut payer d'abord 
 donc non du pays bas il est l'âme du 
 pays c'est tout ce truc là 
 ok j'enregistre voir si on a dynamic man 
 le nom du pays martinique grèce où elle 
 loupe ok c'est bon ça fonctionne 
 bermudes danemark on est content 
 ensuite on avait le la capitale donc 
 c'est country point capital la capitale 
 dans le tableau 
 ça fonctionne 
 et enfin pour finir on avait 
 la population vous avec les pop comme ça 
 et là il nous faut donc la donne et 
 dynamique de la population 
 country point population donc vous voyez 
 que 
 on est dans du de l'html en quelque 
 sorte un même si c'est du vieil 6 et 
 qu'on peut intégrer extrêmement 
 facilement et rapidement 
 des données dynamiques des données donc 
 qui sont vénérés comme ça et 
 dynamiquement là on a la logique de 250 
 cartes elle était codé une seule fois et 
 le composant il a rappelé 250 fois 
 regardons voilà ça marche par contre les 
 le chiffre là n'est pas optimisé on va 
 faire un séparateur de milliers pour 
 faire ça on va dire points to look elle 
 string tout simplement 
 hélas hélas voilà ça fonctionne on a un 
 séparateur de milliers 
 ok 
 bon ça c'est du javascript mais non 
 enfin si vous avez souvent figuré script 
 surtout avec moi vous avez quand même 
 déjà vu cette cette façon de faire quand 
 on fait des maps quand oif et chez les 
 choses ensuite on fait des maps ben là 
 c'est la version react c'est une version 
 un peu sous stéroïdes un petit peu 
 améliorée mais bien sûr ça permet aussi 
 de faire beaucoup beaucoup beaucoup 
 d'autres choses à l'interface de 
 réacteurs comme ça maintenant on va voir 
 comment trier comment trier les choses 
 n'en voit on peut vraiment faire 
 beaucoup de choses particulières on 
 verra aussi dans la partie numéro 2 donc 
 par exemple la le h1 et dégagent pop et 
 maintenant on va donc ce qu 17,7 grande 
 barre pour trier là 
 donc c'est un duel 
 c'est un duel 
 qui a la classe radio 
 conteneur 
 à l'intérieur il ya une poutre de type 
 range donc on va d'abord faire ça en 
 premier d'accord on va pas s'occuper des 
 continents pour l'instant on n'a pas 
 besoin de name 
 notre une poule et qui pointe on n'a pas 
 besoin d'aller dit spécialement non plus 
 faut juste dire qu'il démarre au minimum 
 à un link ou de type range 
 et que au max il va à 250 
 c'est à peu près tout genre j des genres 
 un peu ce que ça donne 
 ok il est là il va de 1 à 250 
 et donc moi ce que j'aimerais bc affiché 
 que le nombre de pays 
 de pays déterminés 
 et donc pour faire ça pour ce faire 
 je sais pas si vous connaissez cette 
 méthode très pratique la fameuse méthode 
 slice 
 pourriez un truc qui s'appelle il avait 
 dû importer un truc sans faire exprès 
 hop je l'enlève 
 du cool en amap et si on veut limiter le 
 nombre d'affichages à un certain nombre 
 est bien on à la méthode slice donc 
 avant le map on peut se mettre comme ça 
 si on que sur les espaces ne compte pas 
 c'est tout est compilé quand tout est 
 compilé tous très rapprochés donc 
 messieurs mais qu'elle banalise c'est 
 mieux représenté 6 pas d'un fusil slice 
 tu coupes à partir de zéro dans le 
 tableau à partir d'éléments 0 et tu me 
 garde que cinq éléments bien regarder 
 il m'a gardé que cinq pays 
 ok si je lui dis abder quand 
 j'enregistrais oui que le seul schéma 
 puis nous envient côte à côte mais vous 
 inquiétez pas quand on va rajouter 
 d'autres trucs pretty or je sais qu'à 
 priver le mettra lui sera plus 
 présentable si je lui dis tiens 0,15 eh 
 bien il me met 15 pays donc le slice on 
 voit comment ça fonctionnait bien ce 
 chiffre là qui nous dit le nombre de 
 pays qu'on veut 
 on pourrait 
 essayer match une valeur dynamique comme 
 par exemple ce qui est tapé dans l'oeil 
 tout 
 comme la range value par exemple on 
 pourrait appeler ça comme ça donc là il 
 connaît pas à la rendre value l'on voit 
 screen variable ici on va dire qu'on se 
 range value donc la seule façon de 
 pouvoir changer la valeur de ce chiffre 
 donc on va se lie c'est qu'on va couper 
 c'est de faire un cette rage value donc 
 bien sûr c'est un use state c'est comme 
 ça que lui il s'occupe de les gérer dans 
 son état et on lui dit tiens tu vas 
 partir à 36 on veut 36 pays au début 
 pourquoi 36 puisque c'est un multiple de 
 12 etc et multi l'eau douce est beaucoup 
 plus pratique quand on veut afficher 
 beaucoup de choses c'est un truc que 
 j'explique c'est souvent parce que 12 
 est un multiple de 1 2 3 4 6 donc voilà 
 c'est assez pratique 
 c'est juste pour qu'en fait dans les 
 pays tombe en bas là ici défaut appuyé 
 pas que ça tombe pas n'importe comment 
 encore que là ça va il ya des cas où on 
 peut vite tomber sur les sur n'importe 
 quoi donc 
 on a créé à voir le value 
 c'est ça et donc on dit maintenant tu 
 slice entre 0 et rendent value donc là 
 j'ai mis 36 où il va s'il a 36 pays 
 j'imagine que oui voilà bon il ya à peu 
 près 36 on va pas compter aussi la cise 
 par la cie la cid de côté et si de web 
 os x 6 par six 
 donc maintenant y'a plus qu'à modifier 
 rendre value via cette rente value et ça 
 modifiera instantanément ici parce que 
 c'est ça qui est fort et crée acte c'est 
 qu'ils surveillent en fait en permanence 
 l'évolution des variables donc s'ils 
 rentrent value évolué vu que c'est dans 
 l'état du composant eh bien il va 
 réussir à tout faire bonne à tout faire 
 évoluer sans qu'on lui dise pas grand 
 chose au final 
 donc notre niveau de type frange on peut 
 lui dire que par défaut 
 donc ça s'appelle default value faut pas 
 maître valliot tout court ce qu'on va 
 lui tout court en fait ça nous 
 empêcherait de modifier il faut mettre 
 default va lui aussi tout démarre à bas 
 s'est rendu van houten valeur par défaut 
 est maintenant sous les roues d'un 
 événement il faut dire input quand tu 
 changes unchanged on peut dire eh bien 
 le all-in tout ça marche aussi mais 
 c'est correct c'est plus dû au challenge 
 eh bien tu me modifie tu me modifie la 
 valeur dur la valeur de range valliot et 
 cette valeur-là en évoluant eh bien ça 
 fait que les pays vont être seul c'est 
 plus ou moins donc regarder plutôt à 
 quoi ça ressemble comment avez-vous un 
 événement react et bien on se place dans 
 la balise on bouge pas on bouge pas de 
 la balise en fait tout se passe là on 
 est bonne chez ge 
 wang chen mettant savez c'est un 
 événement cidre à chaque changement 
 jamais tu fais quelque chose 
 je récupère le e le lives et je vais le 
 log est 
 ce que l'on peut pas faire une poutre 
 enfin le nom mondine coup-de-poing value 
 ça marcherait pas ça marche pas en reste 
 c'est un truc que vous êtes beaucoup à 
 apprendre javascript en réa qu'il faut 
 récupérer l'événement d'accord john shen 
 g dans ce blog l'événement au caire on 
 voit ce qui se passe à l'intérieur alors 
 dans une vie de la console donc je bouge 
 d'input up et ça crée un événement 
 ok donc si on a event point target je 
 pense que vous connaissez si on veut 
 savoir ce qu est la pèlerine toute fin 
 la valeur en tout cas qu'il a c'est 
 yvette - target point ta ta ta ta ta on 
 se croit dans ce chrono scroll pour un 
 vent 
 doux nom acide au dessus lavalloise 
 number dans une section fait que pour 
 être à 4 moins values ont là aussi mais 
 je vois pas valu à m 
 non mais c'est bizarre beau jeu c'est 
 que ça marche le matin des points 
 maillot vert en tout cas c'est comme ça 
 qu'on fait donc du coup si on lui dit 
 l'aude - e point target pour value c'est 
 du grand classique 
 des jeux nettoyer la console et là il me 
 log à chaque fois qu'est vainement 
 déclenché il me log la valeur de ce 
 qu'ils appellent à une poutre en moi et 
 je suis tout en bas j'ai un tout en haut 
 j'ai 250 
 hockey et donc 
 et donc qu'est-ce qu'on a besoin de lui 
 dire maintenant à la place de consoles 
 blog on va juste dire 
 cette range value 
 comme ceux ci et ou lui passe le point 
 target pouvait se dire que rand value va 
 évoluer va passer de 36 à 12 par exemple 
 est donc ici le slice au lieu d'avoir 
 0,36 yvan à 0,12 par exemple et voilà et 
 là on a réussi à créer cette petite 
 interface à la réalité ça prend ça prend 
 vraiment deux minutes à faire une fois 
 qu'on a l'habitude et voilà on a notre 
 interface voyez là j'ai un pays 
 et on peut citer tous les le nombre de 
 pays creux de façon instantanée bien sûr 
 n'a jamais besoin de repasser par un 
 serveur c'est nous qui coupons les 
 choses c'est nous qui en feront en fait 
 on demande une fois les données aux 
 serveurs après en fronton on peut faire 
 absolument tout ce qu'on veut que les 
 données on peut les manipuler comme on 
 veut et donc voilà 
 allez on va finir cette première partie 
 avec encore un truc un poil plus 
 technique enfin même bien plus technique 
 mais bon vous vous présentez ces choses 
 là après une fois qu'on laissait ces 
 choses là et c'est pas beaucoup plus dur 
 là je vous avoue que les inputs de type 
 radio ça va vous paraître un petit peu 
 barbare comme façon de faire 
 mais c'est comme ça qu'on fait donc je 
 vais vous montrer quand même alors tout 
 d'abord vous féliciter nos une politique 
 radio donc là on annuel avec d'abord une 
 politique prendre j'ai ensuite là on va 
 créer des va se créer on va d'abord se 
 créer une base de données avec nos 
 impôts de cette radio colvin pour vous 
 compreniez en fait donc si je mets une 
 poutre de type radio 
 et donc avec son label avec son label 
 voilà vous dire html fort par exemple 
 afrique parce que c'est ça qu'on va 
 chercher à faire c'est à lister les 
 continents et laon mais heidi 
 afrique ok 
 si on fait ça il va falloir qu'on se 
 liste cinq fois il put label input label 
 il boucla belle sauf que l'interface de 
 leurs actes elle nous permet 
 d'automatiser tout ça vous voyez les 
 poutres radio il est là c'est écrit en 
 noir soir noire à mon avis c'est pour ça 
 c'est pour ça qu'on ne voit pas le label 
 met toi bien qu'il est il est par là 
 donc c'est pas comme ça qu'on veut faire 
 on veut pas se répéter cinq fois ça pour 
 lister tous les continents 
 ce qu'on va faire il faut savoir que la 
 litté continent elle est dispo tient sur 
 deux composantes 
 si on va dans ce composant 
 countries 
 fameux mode à monter dans les cars de là 
 donc les continents il faut savoir 
 qu'ils sont là mais c'est un tableau 
 c'est un peu un peu bizarre parce qu'il 
 ya peut-être des pics sont considérés 
 comme ceux sur deux continents j'imagine 
 que la turquie pourrait peut-être 
 considéré comme sur deux continents donc 
 toujours est il que 
 quand il est comme ça avec un s donc il 
 va falloir accéder toujours au alors et 
 numéro zéro pour après avoir accès aux 
 bons trucs comme ça c'est plus tard que 
 je vous le dis en tout cas nous reste 
 liste est donc le nom des pays avec la 
 première est majuscule comme ça n'aura 
 pas de problèmes de casse et on sera 
 tranquille donc d'abord en référé une 
 base de données petite base de données 
 donc là on n'est pas obligé d'utiliser 
 le yoo state on peut utiliser 
 tout simplement une variable en 
 javascript classique 
 on va faire un tableau donc on va dire 
 premier continent c'est afrique à ce que 
 ses écrits en anglais après ces 
 américains ont les deux amériques eux 
 seront ensemble 
 asia et le dernier non c'est d'abord 
 europe après océaniens 
 océaniens 
 donc on a un tableau avec cinq éléments 
 qui sont les chaînes de caractères 
 jusque là rien qui vous paraît fou ce 
 qu'on va faire c'est que ce radio on va 
 le map et on a l'habitude amap et ce 
 truc là premier élément bain ce sera 
 africa fin ce sera un map de à chaque 
 fois de ce trade mais au moins on n'aura 
 pas d'autre de se copier les inputs et 
 toute logique en fait un retour on va 
 tous codé qu'une seule fois que je vous 
 montre ans mais ici on dit attention je 
 prépare à faire du javascript donc je 
 sens les accolades et là je veux dire 
 mais radio ça c'est la classe ou 
 hystériques à ce 
 point map donc chaque élément individuel 
 je vais appeler ça un continent 
 d'accord c'est roux un nom bien sûr qui 
 parle 
 et là qu'est ce que tu vas me faire tu 
 vas me retourner un lit 
 un lit dans lequel il y aura quoi il y 
 aura un hymne foot est un label sauf qui 
 va le map et il va le map et cinq fois 
 ce truc là donc il faut juste dire que 
 dans la wii dans la balle on voyait pas 
 ce que je vais pas écrire intérieur tout 
 à l'heure donc là par exemple 
 désolé donc là par exemple on va écrire 
 continent 
 on referme comme ça 
 donc dans l'aï dit 
 c'est pareil on va écrire continent sont 
 la seule donnée qu'on a ces continents 
 il a besoin faire continent point 
 quelque chose puisque c'est une chaîne 
 de caractère qu'on a donc juste en 
 disant continent ça va nous lister tous 
 les éléments 
 et la continent 
 regardez ce qu'on vient de produire la 
 henriade tendance à 
 regarder bien et bien envers ceux listés 
 5 
 input connecter avec leur label ils sont 
 bien connectés 
 ont par contre faut qu'ils aient tous le 
 même temps ce que l'input de type radio 
 l'on peut tous les coachs et parce 
 qu'ils sont pas tous liés par leur part 
 leurs bâillements fait donc si par 
 exemple on leur dit que tous les inputs 
 ils ont le même nom 
 on va l'appeler pardon continuant radio 
 c'est ça le nom de le nom d une petite 
 radio mais là on ne peut de plus qu'en 
 cochet qu'un vu qu'ils sont ils sont 
 liés voilà voiliers qui sont liés tous 
 ensemble à logoualé ce navet mille 
 éléments brève le code n'a pas été plus 
 long que ça sorte c'est toujours le même 
 truc donc vous voyez un petit peu le la 
 logique de react on peut balancer 
 enfin si oui qu'est du code qui se 
 répète en fait vous pouvez lister les 
 choses la seule de la seule différence 
 qu'ils avaient saisi une poutre c'était 
 le label qui changeait de nom on met 
 tout dans un tableau et puis comme ça on 
 connecte lydie l'aï dit avec lâcheté ml 
 fort donc html fort c'est juste pour 
 dire fort d'accord qu'on se met d'accord 
 c'est le fort en html sauf qu'en react 
 il faut dire html forte comme on dit 
 claes name d'accord ceux des petites 
 différences 
 et donc on s'est dit et deux continents 
 donc maintenant et bien 
 faudrait 
 faudrait éventuellement se stocker 
 qu'est-ce qu'il faudrait se stocker b 
 quand l'utilisateur clique sur océanie 
 par exemple et de conte se mettre dans 
 une boîte la valeur de océanie d'accord 
 donc on peut se créer une variable tout 
 là-haut dans le dans l'état qu'on va 
 dire 
 selected radio donc la radio sélectionné 
 toutefois cette trouée des noms qui 
 parlent même si c'est long à écrire et 
 bien votre code il sera beaucoup plus 
 simple à comprendre et c'est comme ça 
 qu'on veut donc on part sur un new state 
 par exemple de guillemets vide pour 
 l'instant erignac est sélectionné en 
 selected radio 
 maintenant mais il faudrait ajouter un 
 événement sont les inputs et donc la vue 
 qu'on les listes cinq fois bon on peut 
 ajouter cinq fois le même événement ici 
 sac est trop bien c'est que là je peux 
 dire bête au challenge à chaque 
 changement 
 tu vas me récupérer le eu 
 est ce que tu vas faire c'est que tu vas 
 passer à 7 
 selected 
 radio 
 qu'est-ce qu'on va passer mais la valeur 
 de la i10 vu qu'ils ont tous un heidi 
 qui est le nom du continent c'est à dire 
 que là dedans 
 oui dans luz dans ce lieu où state on va 
 passer soit africa soit america soit 
 asia soit europe soit enseignant et donc 
 comment ça s'appelle ça ça s'appelle e 
 point target 
 points et dix éléments clic et je vais 
 tourner dit voile et là ça m'a tout bien 
 la ligne pour ce soit mieux représenté 
 donc maintenant allons dans compo note 
 on se place sur countries c'est ce 
 composant la voyez qu'il a le state 
 d'abord de tous nos pays et ensuite il a 
 un state du nombre de trucs qu'on veut 
 afficher regardez là si je monte et 
 démonte à 135 le state et enfin un 
 dernier state qui est belle si on clique 
 sur africa 
 ça marche pas 
 et america non plus ok bon ça fonctionne 
 pas notre événement ici puisqu'on a pas 
 à dire en fait on a juste passé la 
 valeur ah non non la passe à glg m'y 
 attendais ah oui j'ai mis sélectif value 
 l'accès radio c'est ça quand on parle en 
 même temps qu'on écrit c'est un peu on 
 s'embrouille vite voilà sept selected 
 radio 
 alors vous voyez comme je vais remarqué 
 ça je le remarque et parce que mon 
 élément il était grise et donc oui quand 
 vous utilisez des variables mais que 
 voulez que c'est grise et ça veut dire 
 qu'on les utilise pas ailleurs dans le 
 document et donc si on utilise par 
 ailleurs c'est qu'il ya un problème 
 parce que j'ai fait en sorte qu'on 
 utilise d'ailleurs donc comme ça on peut 
 se rendre compte aussi 
 on peut se rendre compte de 
 des problèmes qu'on a commencé des 
 choses qu on développe aussi avec 
 l'habitude ça croyez pas que ça vient ça 
 vient comme ça en claquant des doigts 
 bien sûr c'est beaucoup beaucoup 
 beaucoup de pratique aucun secret que la 
 pratique donc du coup je me replace / 
 countries ici donc je rappelle que fut 
 dans kung fu nantes saint leu le fameux 
 plug in direct des blues 
 et là si je clique sur africa voilà j'ai 
 africa qui s'affiche l'ag américain l'ag 
 asia europe au sérieux ça fonctionne 
 voyons comment la logique de nos labels 
 ont la paramétrer avec ce bout de code 
 donc la prochaine fois que vous aurez à 
 faire si peu cheap radio que vous aurez 
 juste vous aurez juste à venir c'est 
 tout vous avez rien d'autre à faire 
 y'a rien à faire de plus 
 d'accord 
 moi même j'ai appris que j'avais appris 
 ça on regarde une vidéo d'un mec très 
 longtemps et b après je le bund que je 
 l'avais chez moi et dès que j'avais 
 besoin de réutiliser des radios en ré 
 actes eh bien je m'en sers aller 
 chercher pas inventer quelque chose 
 maintenant je pense que je pourrais le 
 faire de tête mais on sait jamais ce 
 qu'on aime bien faire des copier coller 
 d'utiliser du code captcha marché cédées 
 c'est pas mal ok donc on a réussi à ceux 
 stockés dans cette selected radio on a 
 réussi à se stocker 
 le nom du continent que l'utilisateur 
 veut voir 
 donc 
 et bien avant le bape 
 après le service on pourrait dire mais 
 attends tu vas faire un filtre 
 au nom même avant on peut maintenant 
 faut même le faire avant le slice 
 avant de couper 1 on va le faire le truc 
 on va le faire à ce niveau là 
 donc attendez la torre à la ligne 
 automatiquement parce que là c'est un 
 peu le bordel donc on va faire un filter 
 avril à chaque élément individuellement 
 j'appelle ça un country 
 est pour l'instant offert nul ça c'est 
 juste voilà loin comme ça on est bien 
 implanté donc d'abord en filtre à prions 
 couple ce qu'on veut garder et après on 
 affiche 
 c'est ça la logique défavorable 
 franchement si vous êtes allé dans un 
 vaste crypte ça vous est pas totalement 
 étranger ce que je montre donc le filter 
 comment il va marcher eh bien 
 on va dire on va dire quoi on va dire 
 qu'est-ce qu'on va dire 
 il faut dire est-ce que country point 
 continue donc là vous dit qu il fallait 
 que saidal éléments 0 de continence donc 
 accroché 0 
 est-ce-qu'il includes basse que 
 l'utilisateur veut voir donc selected 
 radio est donc là ça veut dire quoi le 
 fils très bien il va filtrer tous les 
 éléments qui correspondent à ça dans 
 tous les pays qui auront comme continent 
 africain et bien sûr ils vont passer le 
 fils tripp ils se retrouveront au niveau 
 du slice 
 c'est ça que ça va faire a battu vous 
 voyez on était déjà sur africa et donc 
 on a immédiatement vous n'auriez pas 
 tous les pays africains voilà tous les 
 pays africains si on voir tous les pays 
 d'océanie b c'est pareil la brique à la 
 dpi de 2300 personnes 1400 personnes qui 
 dit mieux voilà 
 et l'europe nos principes laulan à tous 
 les pays d'europe on peut réduire 
 et voilà on a réussi à coder cette 
 logique d'affichage deux continents vous 
 voyez un peu les interfaces la puissance 
 qu'on peut faire comment on peut coder 
 des choses avec react comment on peut 
 avoir un site ultra dynamique avec une 
 navigation tout aussi dynamique 
 en ce sens que quand on change de page 
 le composant se démonte la le composant 
 countries in ait pu monter d'accord donc 
 là je reviens il va devoir refaire une 
 recherche quand même malgré tout faux 
 comme qu'il fasse une recherche si 
 jamais on change de page par contre tant 
 qu'on reste dans cette page là c'est bon 
 le les données dont les arrêts ont été 
 stockés il n'y a pas de souci on peut 
 exploiter 
 et voilà ça fonctionne ça fonctionne on 
 est content 
 qu'est ce qui nous manquait troisième un 
 truc qui me faisait dit ah oui on 
 pourrait classer les pays quand même du 
 plus peuplé au moins peuplé parce que là 
 c'est un petit peu arbitraire 
 donc ce qu'on pourrait faire on pourrait 
 faire en sorte avant le filtre avant ou 
 après d'ailleurs ans c'est la même chose 
 on peut lui dire dans d'ailleurs cette 
 lumière pratique de le faire après le 
 sorte parce que si on mettait avant le 
 sorte il fera un sorte de 150 pays alors 
 que si on lui dit après par exemple s'il 
 tombe sur un continent comme le sony eh 
 bien il fait un sortent plus que sur 20 
 pays donc c'est en sorte qu'ils aient 
 plus rapide à faire donc ses meilleures 
 pratiques de le mettre ici d'abord ils 
 filtrent après itri après ils coupent 
 d'accord parce que si coupet avant le 
 filtre ils sont un peu faussés et a pris 
 la fiche il voit l'un vraiment tout ce 
 qu'on peut faire doué d'un tableau 
 comment on peut manipuler un tableau 
 donc sorte ça prend deux paramètres 
 c'est a et b 
 et donc si on lui dit b - à sa tri en 
 décroissant le problème c'est que c'est 
 des objets donc b - ah ça suffit pas 
 folle rb point population 
 - appoint 
 population 
 la wii là ça fonctionne 
 donc le nigeria voilà c'est bien le pays 
 le plus peuplé d'afrique et ainsi de 
 suite par contre j'ai vu qu'il y avait 
 un bug dernière fois je sais pas 
 pourquoi sans l'algérie 
 et ce qu'il dit toujours ce blog il ya 
 toujours un blog sur l'algérie à cinq 
 cent dix mille personnes 
 bon après c'est la base de données qui 
 fournit donc nous n'y est pour rien en 
 tout cas bon la donne et la base de 
 données si on l'est plutôt plutôt fiable 
 en tout cas j'ai rien remarqué à part ça 
 et donc voilà on a pris un dernier 
 dernier truc qu'on pourrait faire et 
 après c'est fini vous promet pour cette 
 première partie il ya un dernier truc 
 qu'on pourrait faire c'est arrêter le 
 le l'input de type radio l'a arrêté le 
 filtre 
 parce que là vous voyez que on peut plus 
 revenir à tous les pays du monde 
 d'accord donc si on voulait revient à 
 tous les pays du monde il faudrait faire 
 quoi 
 eh bien regardez comment on pourrait 
 créer une interface très très facilement 
 react alors après l'hypothétique filter 
 il est où une politique tout ça on va se 
 mettre là il en reste créé une petite 
 interface on va dire est-ce que selected 
 radio 
 il est roux c'est à dire est-ce qu'il ya 
 quelque chose à l'intérieur 
 est ce que quelqu'un a cliqué sur africa 
 sur au cnrs de base des guillemets vide 
 sans renvoi falls d'accord donc en gros 
 en javascript je situe sous le nom comme 
 ça ça veut dire est-ce que ça c'est roux 
 d'accord 
 et alors ça veut dire que tu ma fiche ce 
 que je vais te mettre non 
 je vais faire comme ça c'est pas nous 
 embêter alors là tu vas me crée un 
 bouton pour annuler la recherche 
 regardons annulé la recherche vous voyez 
 je clique willin forcément espace rien 
 n'a pas encore quelle est la logique 
 mais par contre regarder si notre page 
 on est et on partait de rien regarder à 
 lui la recherche on l'a pas dès qu'on 
 commence à taper sur europe paf annulé 
 la recherche il apparaît pourquoi parce 
 que c'est l'équipe de radio il est 
 devenu trop est tous assez surveillé par 
 le state tous assez surveillé en haut 
 lieu du composant il ya rien à faire de 
 plus que ça il surveille en temps réel 
 en fait ce qui se passe sur la page il 
 n'y a pas de relancer des fonctions le 
 faire si faire ça non il surveille donc 
 ça veut dire quoi c'est dire si ces 
 liquides radio être ou alors tu affiches 
 d'automne c'est comme ça qu'on dit henri 
 acte mais vous verrez dans la seconde 
 partie qu'on fait des trucs encore plus 
 encore plus techniques qu'ils ont à dire 
 sur le sur le dom des choses qu'on peut 
 afficher sur le dom et donc 
 on va faire 
 bottone 
 onclick on va lui ajoute un événement 
 quand on te cliquer dessus le bouton 
 qu'est ce que j'ai vécu face au ballon 
 on peut balancer une fanfare fléché 
 comme ceux ci 
 bien tu vas mettre selected 
 7 selected pardon 
 tu aimais peur ils mettent pas de taper 
 cette sélection de radio monsieur les 
 poches des guillemets vide et salue la 
 recherche et du coup ça rxh sarr cache 
 le bouton puisque le bouton est 
 conditionné à ce que ça se trouve 
 c'est fou 
 c'est fou sans react sa merveille rien 
 que d'en parler chez marie regarder hop 
 hop et là paf c'est fini hop paf a par 
 contre le 1 le truc il encore cochet là 
 ça je l'avais pas je n'ai pas vu donc on 
 va devoir se corriger ça en fait le lean 
 tous deux titres en jeu restent cochet 
 c'est le décroche pas donc il va faire 
 conditionner quand est ce qu'ils les 
 tchèque cz et input d'accord team 
 franches dans le type radio pardon il va 
 falloir conditionné quand est ce qu'ils 
 les petits actes 
 et après c'est fini vous premier donc 
 quand est ce qu'ils les tchèques tu ta 
 ta ta ta ta donc on a radio continent 
 donc ici 
 on va dire bah checked en gros on peut 
 dire trou ou fausses si on dit trou 
 normand ils sont tous cochés fait voit 
 donc que ça va faire un bug aussi le 
 dernier coach est en fait vu qu'ils sont 
 tous liés c'est forcément le dernier qui 
 raque iran retrouve c'est lui qui gagne 
 à la fin mais c'est pas ça qu'il faut 
 faire ce sens il faut juste dire 
 est ce que enfin ces check est en fait 
 l'or va tester une condition vous dirai 
 ce que continent il est égal à selected 
 radio 
 si oui va envoyer trou 
 sinon il va renvoyer falls et de cette 
 façon là 
 de cette façon là les jeux de chèques là 
 je fais à nu leurs recherches et voilà 
 il n'y a plus rien qui est factice y 
 voilà bon ça c'était la petite partie 
 quand même un petit peu plus technique 
 pour finir mais en tout cas dans la 
 première heure où la première bonheur 
 vous avez vu quand même comment faire un 
 site vitrine comme encoder des 
 composants un briquet des composants met 
 du style on n'a pas encore vu le style 
 conditionnel c'est un truc qu'on va voir 
 après mais on a déjà vu pas mal de 
 bonnes petites choses en direct je pense 
 que vous prenez conscience de delà de la 
 force du truc après bon c'est sûr qu'il 
 va falloir il va falloir forcément 
 beaucoup de beaucoup de pratiques 
 etc lefranc crash du futur qui vous 
 parle pour vous dire que la deuxième 
 partie de ce cours est malheureusement 
 payante sur j'ai beaucoup beaucoup de 
 contenus gratuits sur ma chaîne là j'ai 
 décidé de faire de cette formation react 
 aka deuxième partie qui était payant de 
 fabien partie du cours plus ensuite 
 beaucoup d'application beaucoup 
 d'exercices pratiques que l'on va que 
 l'on va développer ensemble enfin voyez 
 plutôt il ya plus de plus de 15 heures 
 de cours qui sont qui ont été prévus 
 qu'est ce qu'on va faire pendant ces 
 quinze heures de courbes déjà il y aura 
 la deuxième partie de ce cours là 
 donc ça va comprendre comment faire un 
 creux denrées axa va comprendre comment 
 manipuler le dom de façon extrêmement 
 complexe et de façon extrêmement 
 intéressante surtout très rapide quand 
 on maîtrise des choses ensuite vous 
 allez codé par vous même cette petite 
 application pour mettre en pratique tout 
 ce que vous expliquez donc ça c'est un 
 truc que j'ai déjà fort javascript que 
 je souhaite mes élèves eh bien il va 
 falloir l'adapter il va falloir 
 l'adapter en ré accès d'application à la 
 sueur des recettes ensuite qu'est ce 
 qu'on a on va coder un mail on reconnaît 
 une logique d'un email alors oui vous 
 allez me dire mais c'est très moche ce 
 projet effectivement c'est très moche 
 mais c'est pas ça le but le but c'est 
 d'envoyer un mail et que ça fonctionne 
 regarder lassadi messages envoyés 
 trouver pourquoi mais ça veut dire 
 qu'après une fois qu'on a collé un 
 template d'e-mails on peut l'ajouter à 
 n'importe lequel de nos sites vitrines 
 par exemple ce site vitrine que nous 
 allons coller ensemble nous verrons la 
 façon de coder plein plein plein plein 
 plein plein d'effets en reactor convenu 
 qu elle d'hommes à peu près avec moment 
 toutes sortes d'effets voyez plutôt des 
 transitions entre les pages bien sûr on 
 verra comment faire ça en réalité un 
 site qui ne rechargent jamais un site 
 vitrine parfait j'ai envie de dire à ce 
 titre une très belle très performant que 
 le robot de google adore et là regardez 
 là on peut effectivement la vie des 
 auteurs bloqués l'album ex un peu plus 
 joli et oui et c'est fonctionnel on peut 
 envoyer des emails messages envoyés et 
 voilà c'est parti 
 on ne louera également une application 
 où on va manipuler énormément data donc 
 c'est une application là qui va étudier 
 enfin qu'il va surveiller le marché les 
 crypto monnaie mais bien sûr c'est un 
 prétexte pour manipuler la data pour 
 créer ce type de graphique pour aller se 
 chercher énormément de données qu'on 
 peut trier dans tous les sens on peut se 
 classer les choses etc te ment comme on 
 veut on peut 
 avoir seulement un token soit 
 une infinité fin 250 on va pouvoir bien 
 sûr s'ajouter des favoris avoir une 
 liste avec des favoris voilà pour faire 
 énormément de choses aussi où ils oublié 
 une partie qui était sympa ce type de 
 graphique en survolant comme ça ça c'est 
 géré en react magnifiquement voilà on 
 vers un petit peu ouvert un petit peu 
 comment obtenir toute cette date à et 
 comment faire c'est très intéressant 
 qu'est ce qu'on verra d'autres on verra 
 bien sûr réduction un petit peu de 
 risque de cette partie mais on verra 
 regus il ya un cours de réduc mais le 
 court vous doutez bien que bay ça va 
 être un projet on va co d une sorte de 
 blog comme seul comme celui ci on va 
 pouvoir donner des like un article bien 
 sûr tous les composants qu'ils vont 
 communiquer ensemble je n'ai pas 
 commencé expliqué redux mais voilà qu 
 est-ce qui aura d'autres sur un fire 
 bays il y aura n'exigeait ce 
 voile a beaucoup beaucoup d'éléments 
 beaucoup de librairies fremaa motion 
 axios bien sûr sans plein plein de 
 choses donc voilà si si ça vous dit eh 
 bien écoutez rejoignez moi dans ce court 
 et puis vous montre tout simple allez 
 ciao 
