FOR https://www.youtube.com/watch?v=K3D2rjAUQ3o 
  bonjour à tous et bienvenue aujourd'hui 
 on se retrouve les amis pour faire durer 
 acte est dur et actes de zéro c'est à 
 dire que je vais expliquer tous les 
 principes fondamentaux de la 
 bibliothèque magique de javascript créés 
 par nos amis de facebook 
 donc qu'est-ce qu'on va faire dans ce 
 projet parce que bon si vous connaissez 
 un peu mes vidéos ça dès que l'on va 
 apprendre en développant quelque chose 
 de concret même s'il y aura des petites 
 parties des petites parties théoriques 
 et ouais j'ai investi il y aura des 
 petits slider qui passeront à je peux 
 vous dire qu'il ya du budget dans cette 
 vidéo 
 donc au delà de ça on va développer ce 
 petit tout petit projet donc on fera 
 quoi ben on verra comment faire des 
 composants react qu'on peut réutiliser 
 sur toutes les pages là comme ceux comme 
 ce logo par exemple on verra comment 
 naviguer entre les pages regarder sans 
 aucun chargement de page puisque c'est 
 ce que permettent les bibliothèques et 
 les frais man ray script c'est d'avoir 
 une navigation extrêmement dynamique et 
 donc on verra comment faire ça ensuite 
 on travaillera avec une api une api qui 
 vous fournira des informations sur des 
 pays sur les pays du monde 
 donc avec cette api donc on verra 
 comment faire un appel et les pays en 
 réacteur verra quel point c'est facile 
 et c'est génial 
 et bien sûr on verra on utilisera un 
 petit peu l'interface ont fait en créant 
 une interface avec javascript une 
 interface dynamique voyez on peut 
 classer des pays 
 par continent si on veut en mettre plus 
 bien en plein air plus regardées voilà 
 europe on peut mettre je crois qu'il ya 
 deux cent cinquante pays 
 si on venus et la recherche là on clique 
 sur annuler sa annuler et on voit que 
 voilà il peut y avoir au maximum de 150 
 pays au de cela ils ont zéro habitants 
 quand même c'est pas énorme 
 voilà lui la 30 habitants sympa ce pays 
 vous pourriez être président là bas 
 enfin bref je m'égare 
 et donc d'un autre petit projet on va 
 donc aller chercher avec une api et 
 d'information on va les traiter 
 voir comment les afficher en faisant 
 quoi que en créant une petit carton 
 reste faire une seule fois le code de 
 une seule petite carte de pays et avec 
 ce code l'accord à coder une seule fois 
 on va pouvoir donner le comportement là 
 à toutes ces choses là donc faire un 
 rendu dynamique qui a rendu ou pages 
 extrêmement dynamique 
 voilà pour la présentation les annie 
 j'espère que ça vous a plu et puisque 
 maintenant on va enchaîner et on va 
 passer à l'installation bien on va 
 passer à l'installation de réacteurs je 
 vous ai fait une petite fiche donc si ça 
 vous intéresse fait un screen fait une 
 capture d'écran ça montre juste les 
 éléments à faire pour installer react de 
 façon simple il ya plein de façons un 
 scélérat que nous devons avoir c'est 
 vraiment pour les débutants de façon 
 simple c'est comment l'installer donc on 
 va vérifier déjà sur la note sur notre 
 machine on va vérifier son âne pm 
 logique martiaux node sait qu'on a une 
 bm puisque les deux sont liés ensuite on 
 va faire une p x km et actes ap 
 avec le nom du projet derrière on ira 
 dans le projet donc c'est extrêmement 
 simple donc fait une capture d'écran si 
 vous avez peur d'oublier 
 et puis j'ai mis des petites commandes 
 aussi con qu'on verra au fil du projet 
 celles ci sont pas très importantes et 
 en bas et les bibliothèques utile c'est 
 ce qu'on va télécharger derrière en 
 suivant pour pouvoir démarrer des 
 projets correctement un phare à celle au 
 routeur le routeur d'hommes et on va 
 s'installer ça c'est pour le style voilà 
 ce qu'on va devoir faire 
 donc sans plus attendre on va on va se 
 mettre dans google et tapez node.js 
 download donc si vous n'avez pas 
 d'autres jsc bien je vous invite les 
 amis à le télécharger 
 voilà la dernière version de node.js y 
 écrit includes npr donc voilà on sait 
 qu'ils les donnent ensemble 
 moi j'ai déjà et donc pour l'invité de 
 commande ce que tout ça bien sûr cd 
 commande qu'on va donner sur sur une 
 invite de commande 
 moi j'utilise commandeur comme d'heure 
 je sais pas comment on dit voilà ça 
 s'appelle comme ça qu'a d'ailleurs cndr 
 et c'est plutôt très pratique 
 voilà voilà ça se trouve ici donc une 
 fois que ceci est dit et bien y'a plus 
 qu'à mettre en place tout ce que j'ai 
 dit dans le petit dans le petit slide 
 donc d'abord on va se placer sur le 
 bureau on peut se placer ou amoureux et 
 c'est mieux que ce que c'est sur le 
 bureau en l'occurrence et on va tester 
 la version de notes moi c'est ce que 
 j'essaie la 12 points 18 points 3 
 npm ti rêvée pour tester voilà on voit 
 qu'on a une pme la version 6 je crois 
 que c'est la dernière des six points 14 
 en tout cas au moment où je ris la vidéo 
 est donc maintenant on va s'installer 
 react et donc nos amis de facebook 
 qu'ils ont créé une sorte de bunker 
 automatique donc je vais pas rentrer 
 trop dans les détails c'est vraiment un 
 tuto pour les débutants et après au fur 
 et à mesure que vous continuez à 
 d'apprendre et actes vous verrez ce qui 
 est un bonheur comment organiser les 
 choses etc 
 mais toujours est il que si on fait mpx 
 quite react à peu nous criait tractable 
 c'est un seul bonne lors c'est ce qui va 
 nous permettre de passer de notre projet 
 et voir comment ça marche et derrière on 
 donne le titre et on n'a qu'à dire moi 
 je vais l'appeler cours react voilà vous 
 l'appelez que vous voulez voilà et donc 
 le ca va s'installer tout seul et 
 pendant l'installation 
 eh bien je vais meublé alors pendant que 
 ça installe je voulais vous montrer un 
 petit cider pour vous montrer la page 
 principale de notre de notre projet 
 qu'on va développer et pour vous dire 
 quoi mais pour vous présenter des jarres 
 est acté le principe fondamental le 
 principe de base de réac 
 c'est que tout est un composant en 
 anglais on dit qu'on peut maintenant que 
 vous entendrez souvent dire sûrement 
 composantes mais sachez que ceux des 
 composants 
 donc qu'est-ce qui est un composant 
 eh bien on va avoir une page sommes 
 point j ai donc la page d'accueil eh 
 bien ça va être un composant il va 
 renfermé quoi il va refermer plusieurs 
 composants est vraiment femme et une 
 navigation point j s et ce composant 
 qu'on voit ce qu des navigations point 
 vieillesse eh bien on aura pas leur côté 
 une seconde fois quand on va sur la page 
 about sur la page à propos on aura juste 
 a appelé une seule fois d'autres 
 composants navigation projet ce pari 
 pour le logo quand on va le réutiliser 
 et bien on aura juste à l'appeler ce 
 logo on ne va pas le côté deux fois donc 
 ce sont des composants qui sont 
 réutilisables partout et là en 
 l'occurrence là ces deux petits 
 composants qui ne renferme quasiment que 
 du que de l'html en quelque sorte ce qui 
 en reste et j ai six ça renferme que du 
 visuel mais ensuite on peut faire aussi 
 des composants qui renferme une grosse 
 logique illogique de de fonction etc 
 comme par exemple en proposant card 
 dans lequel on va pouvoir trier on aura 
 une poutre anges on aura des radios des 
 inputs radio qui vont nous permettre de 
 trier et donc ce nom c'est d'ailleurs ce 
 n'est pas le composant card c'est le 
 composant country point j s et dans ce 
 composant country ce point j s il y a 
 aussi un composant donc en réalité tout 
 s'imbriquent les uns dans les autres 
 vous allez voir là c'est vraiment je 
 dégrossi un petit peu je vous explique 
 de loin et vous verrez que encodant ça 
 prendra un petit peu plus de relief et 
 je peux aussi tiens vous proposer la 
 structure des fichiers donc ça on y 
 reviendra quand on aura d'autres 
 criaient tracts à plat quand il aura 
 tout installer en revanche les 
 composants l'eau le composant basique à 
 quoi ça ressemble un composant henry 
 actes et bien sachez que tous les 
 composants se ressemblent je vais pas 
 rentrer les détails puisqu'il ya 
 plusieurs types de composants mais là on 
 va faire du réacteur moderne dans cette 
 vidéo donc je vais même pas parler de 
 l'ancien réaxer les choses que vous 
 verrez après éventuellement en 
 approfondissant moi je vous demande 
 juste comment codé en react du réacteur 
 fonctionnel direct moderne donc leurs 
 actes moderne ça se présente comme ça ça 
 se présente avec un apport la 
 bibliothèque un apport de toutes nos 
 bibliothèques on va dire ensuite 
 derrière on a le composant il faut 
 savoir qu'un composant retenez bien ça 
 c'est une fonction voilà ça a déjà si 
 vous avez retenu saveurs obtenu une 
 grosse partie des actes un composant 
 égale une fonction donc comment on 
 prenait une fonction javascript fonction 
 fléchier javascript moderne construit 
 card est égal en paramètre donc l'âge 
 mais propre on verra ce que c'est plus 
 tard bien plus tard fonction fléché donc 
 la petite flèche et derrière en déclame 
 une fonction une fonction qui se 
 présente comment d'abord on dit no 
 variable 
 après avoir déclaré nos variable on 
 déclare éventuellement de la logique 
 du javascript quoi des fonctions est 
 ainsi une fois qu'on a fait savoir que 
 tous les composants se partagent comme 
 ça donc on met d'abord des fonctions 
 pour éventuellement des variables des 
 fonctions et ensuite on fait un return 
 d'autres fonctions qu'est ce qu'un 
 renvoi elf elle renvoie toujours quelque 
 chose de fonction et elle renvoie 
 toujours quelque chose qui ressemble au 
 voyage de l'html eh bien ce n'est pas de 
 l'html les amis ça s'appelle du g6 mais 
 bon pour faire simple imaginez que celle 
 html ça marche aussi 
 donc voilà comment se présentent les 
 composants en react donc là vous voyez 
 qu'on fait un rang du conditionnel ça 
 sera notre composants card composent 
 qu'on encadre à la faim et à la fin bien 
 sûr on exporte mais vous inquiétez pas 
 que toute la structure de chaque 
 composant ce n'est pas vraiment la 
 connaître par coeur ce qu'à force de le 
 faire à les retenir 
 mais en plus il ya des raccourcis 
 d'emblée ce code qui nous permettent de 
 les faire plus rapidement si on revient 
 sur commandeur voilà on voit que c'est 
 terminé ça ne m'est api hacking donc 
 amusez vous bien les amis voilà donc là 
 on est sur notre bureau des stops 
 d'accord regardez si je me décale on 
 voit que là il n'a installé mon petit 
 fichier cours react donc si on a ce 
 fichier cours et actes comment on peut y 
 accéder plein de consoles et bien on 
 peut faire c'est des cours par exemple à 
 prêcher la tabulation il va me proposer 
 immédiatement un homme j'ai vu moi j'ai 
 plusieurs dossiers course au monde sur 
 mon son bureau par contre si tu es cours 
 tirèrent tabulation il me propose 
 correct 
 entré à présent se trouve dans notre 
 dossier cours react d'accord et bien là 
 on va faire code sommes tout simplement 
 on va pas plus téléchargée de choses 
 depuis commandeur maintenant ça va se 
 passer dans vs code donc en faisant code 
 point code espace points eh bien on 
 ouvre notre on ouvre notre vs code là 
 comme ceci ok c'est super donc si on 
 fait contrôler pu faire contrôler 
 pourcentage l'oeil et le cerveau le 
 pourcentage entre cammas ma machine ça 
 ouvre le terminal donc bon après je vais 
 pas trop m'étendre sur des choses 
 basiques comme ça parce que j'estime que 
 si vous commencez avec sait déjà que 
 c'est un bon niveau en javascript et 
 d'ailleurs ce n'est pas un bon niveau en 
 javascript je vous ai mis mon cours sur 
 javascript juste en dessous 
 vidéo et vous avez également ma playlist 
 javascript mais en tout cas sachez que 
 moi quand j'ai quand j'ai commencé à 
 prendre direct j'étais pas très bons en 
 javascript et j'ai un peu payé c'est à 
 dire que je connais pas grand chose donc 
 je vous invite vraiment à être bon en 
 javascript et vous verrez qu'après ça va 
 être ça va être hyper fluide quand vous 
 quand vous commencerez actes donc voilà 
 bon toujours est il que là on s'est 
 ouverte ça et on va en rester les 
 charger nos petites bibliothèques utiles 
 dont coiffeur npn est pourri stoll 
 thierry hesse port said aimerait prendre 
 react d'hommes cela celles là sont 
 obligatoires je sais pas où j'ai 
 commencé un projet rate quasiment react 
 d'hommes et react routeur d'hommes vous 
 les prenez toujours et ensuite pour le 
 style on va se prendre note tirer sas 
 donc attention et le n qui est là 
 attendez je peux pas dormir un peu si 
 vous voulez me voir 
 voilà notre sas et on va prendre une 
 version précise parce que la version 5 
 alors aujourd'hui cette vidéo elle 
 déconne régulièrement donc on va faire 
 notre ca ce machin hâte 
 @ 4 points 14 points voilà moi je prends 
 cette version précise puisque la version 
 de notes de note 6,5 déconne un peu on 
 fait rentrer et là ça va ça va à nouveau 
 prendre un petit peu de temps pour 
 télécharger mais c'est pas très grave 
 puisque je vais pouvoir vous montrer un 
 petit peu tout ce qui se cache la danse 
 est dans ses petits dossiers 
 donc quand on fait un cri être réac tap 
 voilà ce que l'on a face à nous donc le 
 jeu rapidement est là-dessus dit-il nord 
 on s'en occupe même pas c'est juste pour 
 pas importer notre module compte enfin 
 comité et c'est le paquet du point-g 
 sonorement vous connaissez le package 
 points de wilson dont celle à qui un peu 
 tous les scripts un canton va faire npn 
 start par exemple pour démarrer le 
 projet est bien s'alliera juste le 
 script start qui correspond aux frais de 
 démarrage de projets contrefaire lpm ron 
 beal construire le projet pour ensuite 
 en faire une version qu'on pourra le 
 plot des facs on pourra mettre sur 
 internet en tout cas donc voilà je vais 
 pas m'étendre là dessus on va juste on 
 verra jusque quand 
 ce que j'ai mis là ça sera installé 
 voyez là on a déjà react d'hommes qui 
 s'est installé après coup trois hommes 
 qui varlet a pris à notre sas donc 
 toutes les dépendances de notre projet 
 sont ici d'accord je reviens dans un 
 petit peu là dessus après quand on va 
 pour vérifier que tout est bien installé 
 leur ennemi c'est là que vous mettez à 
 vos adjoints qui vous partagez le 
 progebe les informations importantes sur 
 ce projet voyez que de base qui les 
 traquent tapie nous fournit quelque 
 chose on s'en fiche un peu voire pas 
 s'en occuper dur et demi en tout cas pas 
 pour un projet de débutants et le garde 
 de ce concert ça concerne regardez moi 
 je m'en sors pas trop de yard 
 donc voilà alors maintenant ce qui est 
 vraiment important dans la configuration 
 des fichiers cc3 la nonne module public 
 et src 
 alors notre module séquano bulls et 
 l'ensemble des bibliothèques notre 
 projet donc réac et une bibliothèque 
 toutes les bibliothèques ou instituts 
 les ont utilisés saas etc tout est 
 stocké là dedans ça c'est une grande 
 librairie à laquelle on fera appel 
 régulièrement on ira chercher des 
 fonctions des objets qui sont à 
 l'intérieur 
 d'accord retenez juste que bon c'est là 
 qu'on va stocker toutes nos librairies 
 de devenir a pas de d'envoi les deux 
 autres fichiers par contre oui on va 
 aller dedans il ya d'abord le public 
 d'accord qui se compose en fait qui va 
 se décomposer en fait de stocker du 
 stockage de nos images en gros il ya du 
 robot peau texte du manifeste point-g 
 sonne j'ai même pas envie d'ouvrir ce 
 que c'est si vous savez pas c'est pas 
 très grave on va fermer c'est pas le 
 sujet de la vidéo à faire mais je veux 
 dire j'ai été supprimée en revanche 
 qu'est ce qui peut intéresser c'est un 
 logo am et jamie un logo projet mais 
 n'en fait fouillis nadja qui est fourni 
 donc attendez sillage le supprime ok 
 donc normand il nous reste le favicon 
 éventuellement voilà c'est un petit logo 
 très hâte et il nous reste le logo en 
 version 190 par 192 
 on va se garder ces deux là et on reste 
 les met dans un petit fichier qui va 
 s'appeler img pour image moi j'aime bien 
 quand les choix sont mieux ranger et la 
 voilà là sont un petit peu mieux ranger 
 nos choses donc là le public c'est tout 
 les choses statique donc c'est là qu'on 
 pourra éventuellement stocker des images 
 mettre éventuellement du javascript qui 
 ne correspond pas vraiment à 
 l'application etc et on a là dedans un 
 index point htm et donc ses lacets ce 
 fichier là qui en quelque sorte lui 
 d'accord à quoi ça ressemble un expert 
 html mais écoutez moi je vais juste pour 
 la visibilité d'une explication je vais 
 supprimer déjà les commentaires comme ça 
 où on y verra déjà un petit peu plus 
 clair voilà les cris noscript machin 
 chouette samson 
 donc comment ça se présente l'index pour 
 html mais tout simplement comme ça comme 
 vous et seront l'habitude de voir des 
 pages index fra.html donc là dedans vous 
 mettez tout vote mais tu as tout un truc 
 pour le sc you voyez là ça c'est pour le 
 siao les choses comme ça tout la méthode 
 qui vous intéressent vous relier tout ce 
 que vous voulez si vous avez des cdn 
 part d'entre d'eux des icônes et même 
 des trucs comme ça à m vous pouvez 
 mettre là mais vous avez surtout un body 
 et au milieu il ya un édit route et 
 c'est en fait c'est là dedans 
 là dedans la entre ses deux balises que 
 sera contenue toute notre application 
 react d'accord faut juste que vous 
 sachiez ça il faut que vous sachiez que 
 là dedans à se mettre toute notre 
 application react et donc après je vous 
 montrais dans src parce que c'est la 
 teneur en vrai qu'on va vraiment à coder 
 tout notre application 
 je veux montrer comment ça se passe mais 
 en attendant la le manifeste points 
 jason vu que j'ai supprimé fichiers 
 autant sur le supprimer aussi ça on 
 n'aura pas besoin 
 qu'est-ce qu'on peut avoir aussi dutil a 
 le nikon machin chouette je sais pas 
 trop ce qu'elle fait celle-ci bon tout 
 cela n'en a pas vraiment besoin 
 l'injuste changé au maintien react 
 worlds comment ça parle de ça parle de 
 pays etc 
 on peut se mettre une petite icône aussi 
 mais je crois que j'ai supprimé 
 l'économie regardez on va faire une 
 icône comme ça on va faire un link alors 
 comment on fait une icône en html est 
 emmené juste shortcut iphone et la href 
 est bien là je rêve c'est le sait le 
 chemin de ski à côté leur offre en a 
 fabriqué un point ici alors ça ça me 
 fera juste une petite icône nana page à 
 page web vrai que c'est très long à 
 télécharger ça c'est pour ça que c'est 
 bien que je puisse vous montrer tout ça 
 est donc notre page là en gros elle est 
 bonne on peut même changer la langue sur 
 ce qu'on veut être un peu tatillon aux 
 transports français et là bon en vrai ça 
 c'est les usa c'est le contenu qu'on 
 trouve dans google 
 donc on va dire voyez juste m courrent 
 réac loi sans vous mettre que son 
 remplaçant cours en ligne sur un vrai 
 site 
 donc voilà sachez que l' index e.html 
 séduit que m qui est lui en premier et 
 c'est lui qui détient toute la logique 
 de notre application hockey est donc 
 maintenant si on va dans src ce qui nous 
 intéresse un peu plus on a toute une 
 série de fichiers on a notamment du css 
 vous lis d'avancé c'est 100 ans le 
 retirer on va pas s'embêter avec puisque 
 nous on va travailler en saas je 
 montrerai l'organisation du sas 
 un peu plus tard ensuite les tests on 
 peut faire des tests unitaires 
 évidemment pour une application robuste 
 l'application qui marche c'est des 
 choses bien sûr qu'on va pas voir là 
 d'un dieu du rock pour débutants donc je 
 supprime aussi le fichier test on a un 
 logo point svg 
 ça dégage et leurs portes web vital ça 
 dégage c'est pas utile et même sud en 
 dessous là le set-up test c'est pour 
 mettre les tests en place on s'en fiche 
 voilà là on y voit beaucoup plus clair 
 dans notre esprit il n'y a que deux 
 fichiers ok donc qu'est ce que sont ces 
 deux fichiers et bien on à l'index point 
 js le app.ps qu'est-ce qui contient d'un 
 exploit jsk ont dû se retirer le rapport 
 trop vite a vu que supprimer fichiers je 
 pense que ça peut faire buggé voilà je 
 supprime sa là je supprime l'import de 
 web vital ce et on va supprimer le css 
 qui est là parce que je les supprimer 
 moi aussi mon côté paf qu on enregistre 
 et donc là les amis on à l'index point j 
 ai ce qui est le fichier par lequel on a 
 accès à l'application en quelque sorte 
 puisque ce fichier là donc c'est le 
 fichier au plus le plus haut qu'on 
 puisse trouver dans notre application 
 l'index point g s il a quoi il a un 
 document getelementbyid aux routes 
 donc en fait ça vous dit quoi se dit que 
 là c'est à dire oh tu es bien tout 
 l'index projet de quelque part tout 
 notre application 
 c'est là qu'on lapointe ont la pointe 
 comme ça et on appelle le composant ap 
 ici on dit donc on va faire un rect 
 d'hommes point renders donc là tu me 
 fais un rendu donc on se marre strictes 
 au monde 
 éventuellement ça nous permet d'avoir un 
 peu moins de bugs on va dire quand on 
 code on peut rester strictement n'y a 
 pas de souci et au milieu de salade dans 
 là on a tout notre application qui va se 
 dérouler donc dans le app - js le 
 fichier dans lequel par exemple nous 
 notre routeur et ensuite ça découlera 
 sur des pages on va coller ensuite en 
 suivant donc tout part de cet index 
 point j s et tout à l'heure quand on 
 relira le sait le sas on le mettra ici 
 parce qu'il faut le mettre le plus haut 
 possible notre application 
 donc c'est là le plus haut possible 
 donc ok on a un index là il fait 
 référence là il appelle c'est comme ça 
 qu'on appelle denrées acte-là comme ceux 
 ci il appelle le composant à regarder ce 
 qu'on à la paf la en arabe est donc là 
 d'envoyer un petit composant qui a été 
 fait donc blogo points s2j va pas le 
 trouver 
 hop on le supprime l'envol au logo du 
 label vous dirai ça en poste 
 on peut vraiment se remplacer on va 
 juste se faire 1 h 1 et on va dire elle 
 l'eau react voilà est d'ailleurs là le 
 appoint css aussi on peut s'en passer 
 ok j'enregistre est logiquement là 
 est-ce qu'on ait téléchargé 
 tout a été téléchargée logiquement voilà 
 si on veut vérifier que tout a bien été 
 téléchargée on peut aussi aller dans 
 notre pays kate hudson et là on voit 
 qu'on a un réacteur à la version 17.0 
 propre enfance comme on enregistre 
 réacteurs des appareils 
 réac routeur d'hommes y installer réac 
 script et web vital samhain notes 
 faciles et là il était au dessus c'est 
 par ordre alphabétique que c'est rangé 
 tout simplement 
 donc on a la version 4 points 14.1 le 
 petit chapeau la sonic c'est pas la 
 dénervation qui a été prise je crois que 
 c'est ça je crois que c'est accessible 
 je suis même pas sûr mais il me semble 
 donc voilà ok on est bon on est bon sur 
 ça donc on a toutes nos dépendances en 
 tout cas pour commencer à travailler 
 on a mis elle l'aurait actes dans ce 
 fichier 
 on a codé un petit un pharmaco des n'ont 
 pas grand chose de juste mis un titre et 
 un petit à petit logo notre page allons 
 voir à quoi ça ressemble les amis on se 
 mets la dans la console est en fait npm 
 start 
 ça veut dire tu me démarre tu me démarre 
 le fichier donc voilà starting 
 développement et l'envoyer ça ouvre sur 
 le côté en localhost 3000 en général y 
 sommes et s'y est déjà quelque chose sur 
 le local aux 3000 au delà il vous 
 propose éventuellement d'aller sur le 
 3001 quand on devrait mettre un peu sur 
 le côté histoire qu'on est un petit peu 
 d'une vision des dopage même si on veut 
 qu'elle va rester assez large pour 
 pouvoir codé proprement et voilà les 
 amis on a écrit elle l'aurait actes 
 pourquoi même simplement si on fait clic 
 droit inspectés regardez on a trahi des 
 routes 
 et à l'intérieur c'est à dire où ton ami 
 quoi on a div class 
 ap h1 est lauréate tous se retrouvent 
 derrière voiliers class classe naïm ap 
 hop comme ça tout seul mais comme ça 
 donc là vous avez remarqué déjà que les 
 classes ça se dit que la fnaim donc il 
 ya plein de petites choses comme ça mais 
 c'est pas ce pas extrêmement longs à 
 maîtriser tout ça vous inquiétez pas 
 en l'occurrence pour les classes faut 
 dire que la semaine il ya plein de 
 petites choses comme ça sur lesquelles 
 on va revenir au fur à mesure qu'on va 
 codé en tout cas les amis on est prêt à 
 démarrer 
 alors pour d'autres projets 
 l'arborescence des composants va se 
 présenter comme suit c'est à dire qu'on 
 a le à point g est ça vous l'avez vu 
 donc on va en faire en sorte que ils 
 servent de navigation et pour naviguer 
 entre nos deux pages donc la page hommes 
 pointent js et la page about point j s 
 on voit que ces pages l on est même des 
 composants donc à l'intérieur pour 
 savoir qu'à chaque fois qu'il y a un nom 
 de fichier point j ai ce qui commence 
 par une majuscule c'est un composant 
 donc le premier composant notre 
 application c'est le à point g est donc 
 après on va se créer deux composants de 
 pages tout d'abord et à l'inter ces 
 composants on va se créer un composant 
 un complot nantes navigation par exemple 
 eh bien on l'utilisera pour les deux 
 logos on l'utilisera pour les deux 
 ensuite en sommes on fera un composant 
 countries donc les pays au pluriel donc 
 ça servira d'affichage des pays et de la 
 recherche 
 et ensuite pour afficher chacun de ces 
 pays individuellement il y aura encore 
 un composant qui héritera en quelque 
 sorte de country c'est à dire qu on lui 
 passera des informations donc ça vous 
 verrez ce sera en toute fin en fin de 
 projet qu'on verra une grosse partie de 
 réac c'est à dire passer des données 
 entre composants via des props mais 
 avant toute chose on va déjà n'est plus 
 tant que j'en parlais bien on va se 
 coder des composants et on va commencer 
 par les pages alors les pages mois se 
 met la dent src nouveau dossier 
 ce dossier on l'appelle page 100 p 
 majuscule par contre à l'intérieur du 
 cno pages sont des composants et bien on 
 va seul m une lettre majuscule dans quoi 
 faire par exemple hommes pointent js 
 donc mjs on veut dire quoi ils portent 
 react from react alors il se trouve 
 qu'en plus depuis la mise à jour pour la 
 plupart des composants n'est même plus 
 obligé de dire un portrait actes parce 
 que là 
 par exemple la réac n'a pas été importés 
 né en quelque sorte sous-entendu il sait 
 déjà qu'on traite avec la bibliothèque 
 créat donc en réalité on va s'en passer 
 ce soit rien que je vous confesse vu que 
 maintenant ça se fait moins bon vous 
 avez sûrement retrouvé beaucoup de codes 
 de ré acte où on fait un peu importe la 
 bibliothèque real 
 bon là on va dire qu'on n'a pas besoin 
 de le faire donc et bien directement 
 déclame notre fonction const homme avec 
 un h majuscule fonction fléché donc 
 c'est un composant qui se présente comme 
 une fonction et à la toute fin bien sûr 
 on n'oublie pas de faire quoi et bien de 
 l'exporter exporte default homme comme 
 ça en faisant cette export plus tard 
 notre composants o'neal sera 
 réutilisable partout et regarder si par 
 exemple on se disait que notre 
 composants là il avait juste un retour 
 il rendait en quelque sorte juste de 
 l'acheter ml qui rend en l'occurrence 
 s'appelle du g6 on va lui dire return et 
 tout ce qui est compris dans les 
 parenthèses 
 eh bien c'est ce qui lui c'est ce que ce 
 composant il est censé rendant donc on 
 va lui dire tiens tu va nous mettre une 
 classe pomme 
 ouais j'ai fait point homme comme on 
 fait soin d'enlever ce code et sami 
 directement klein et donc à l'intérieur 
 de ça on peut se mettre à peu près tout 
 ce qu'on veut pourquoi parce qu'il faut 
 savoir que dans react chaque composant 
 roth est bien sage chaque composant doit 
 avoir une balise supérieur par exemple 
 on peut pas faire la une partie hommes 
 tiens on va écrire par exemple accueille 
 et bien si derrière on avait voulu 
 écrire un duel avec avec des nids par 
 exemple ça marche pas à me regarder mois 
 déjà il souligne tout peuple la voilà 
 enfin comme ça par exemple ça marche pas 
 pourquoi parce que là il ya deux il ya 2 
 bat nice qui sont au même niveau le 
 composant non c'est pas ça le composent 
 envoyées aux personnes se dit où on 
 verra après pour le pôle express mais 
 paf n'a si j'enlève ça me saoule in plus 
 rien pourquoi parce qu'il ya un 
 il ya une balise supérieure à toutes les 
 autres il faut même savoir quand react 
 vous avez peut-être trouvé des fois pour 
 faire une balise supérieure à toutes les 
 autres cas des gens qui font ça ça 
 s'appelle un fragment c'est tout à fait 
 ça se fait tout à fait bien en react 
 donc ne soyez pas choqué si vous voyez 
 ça un jour mais moi je le fais 
 régulièrement 
 donc voilà là on a un composant qui 
 s'appelle accueil super 
 on est content donc qu'est-ce qu'on va 
 vouloir faire 
 eh bien on va vouloir éventuellement se 
 l'affiché dans notre notre page dans 
 notre application app ou plus beaux de 
 l'application donc ouais là est donc là 
 si on voulait appeler d'autres 
 composants qui on peut se mettre ici on 
 ouvre et laon mais j'ai lu m accueil 
 normes et sommes en appelle aux mais 
 voyez que là il me propose et ça je 
 crois que c'est vesco d'un qui propose 
 automatiquement les autres rapports en 
 tout cas je crois pas avoir installé le 
 plugin pour le faire je suis pas sûr bon 
 au pire si ça vous n'importe pas 
 automatiquement vous devrez le faire à 
 la main mais regardez si je clique 
 dessus regarder au dessus ça fait une 
 porte 
 or from machin chouette machin donc 
 saisir quoi mais là il est parti 
 chercher le chemin il est parti dans 
 pages chercher le composantes homme est 
 donc là on est ici j'ai ouvert eh bien 
 on fêta qu on referme regardez 
 j'enregistre et la regarde ce que savent 
 afficher grande surprise il écrit qu'on 
 peeling en bas et voyez elle l'aurait 
 acte accueille donc là on vient de 
 prendre un bout de code qui était dans 
 pages ça c'est juste un code visuel 
 c'est juste n'y a pas de logique 
 javascript d'ailleurs ça en quelque 
 sorte sylvie du visuel on se le prend et 
 donc par tous va écrire accueille dans 
 notre cible c'est un exemple pas très 
 pertinent en ce moment avec faire un 
 chien accueille les vagues ont offert un 
 composant pour ça mais admettons est 
 bien partout dans notre site 
 on reprend juste hommes et regardez on 
 peut multiplier vous allez voir ce que 
 ça va faire on peut l'écrire autant de 
 fois qu'on voit dans la page 
 il ya aucun souci bon alors c'est écrit 
 accueille 1 h et 1 h 1 re oui ch et ses 
 écrits accueillent partout et vous voyez 
 en bas la salle a écrit partout voilà la 
 puissance la force de réactifs voilà ce 
 que ça fait bien sûr vous en doutez ça 
 va quand même pas se faire des 
 composants aussi basique 
 non ce qu'on se trouve à se faire c'est 
 des composants un peu plus complexe et 
 avant toute chose lui chara penser au 
 plugin il ya un plugin notamment qu'il 
 faut prendre qui va nous permettre de 
 taper les composants beaucoup plus 
 rapidement il s'appelle alors joue le 
 sort je vous le donne en mille react js 
 code snippets voilà tu l'avais bien il y 
 en a un autre que j'aime bien aussi 
 simpl react snippets donc ça c'est des 
 petites choses 
 qui vont nous aider à aller un peu plus 
 vite donc je vous invite à les prendre 
 c'est dollars moment prendre d'autres 
 envois je vous invite à laisser pour ça 
 c'est du rac native ça rien à voir c'est 
 pour mobiles mais je vous invite après 
 vous même essayer des plugins et des 
 plus téléchargées là vous avez le nombre 
 de téléchargements vous avez 
 l'appréciation oui c'est à vous de de 
 paramétrer en vie dans votre 
 environnement de développement comme ça 
 vous arrange comme vous aimez le faire 
 bloc pour apprendre c'est pas hyper 
 important d'être super rapide 1 voyez 
 vous si vous voulez mettre à la mince 
 affaire les imports à la main il n'y a 
 pas de souci si vous voulez vous taper 
 tout le si vous tapez le code de du 
 composantes entièrement aussi y'a pas de 
 soucis mais là vous allez voir que je 
 veux montrer comment avec un raccourci 
 on peut se taper ça plus rapidement donc 
 là on a notre note ap 
 mais moi ce bout de code il m'intéresse 
 pas beaucoup donc on va tous supprimés 
 et on va faire rsc et en faisant rsc il 
 propose un style tu laisses composantes 
 pourquoi state laisse dire qu'il n'a pas 
 d'état en quelque sorte parce qu'avant 
 pour où on faisait beaucoup d'éclat ce 
 qu'on peut donner c'est à dire je m'aime 
 pas je n'aime pas mais tombe dessus 
 sachez juste qu'avant on faisait les 
 classes composantes et si vous avez 
 plein air act un jour vous tomberez sur 
 du vieux code qui utilisent des classes 
 composantes 
 c'était beaucoup plus verbeux c'était 
 beaucoup plus chiant maintenant on 
 n'utilise que des states comprenant 
 trois oui j'ai fait entrer est vrai que 
 c'est un portrait acteurs que c'est pas 
 vraiment obligatoire mais salah comme 
 importés dans le bon on peut laisser 
 c'est pas grave ça dérange pas par 
 contre mais ça nous a créé 
 automatiquement tout le composantes avec 
 un export default une balise qui englobe 
 tout est donc ça bon c'est un détail un 
 mur au moins ça permet d'aller un peu 
 plus vite donc faut juste à prs effarant 
 très bon ok ça c'est fait maintenant 
 qu'est-ce qu'on va se faire 
 eh bien on va se faire une navigation 
 monde pour faire une navigation à la 
 fois un peu plus de pages landing pages 
 hommes 
 eh bien on va se rajouter une page about 
 donc ce sera la page à propos mais comme 
 d'habitude on sommes tous en anglais on 
 fait tout maximum en anglais sauf après 
 le rendu si on s'adresse à des français 
 et bien sûr le rendu fonctions en 
 français mais en général le nom des 
 pages etc 
 c'est un anglais donc la page about 
 il faudrait que je me rappelle à quoi 
 ressemble donc on regarde et on fait rs 
 c'est ok donc là on sait importe tout ça 
 et ensuite dans cette page on va se 
 mettre à un champ de bataille 
 d'ailleurs je peux l'écrire en français 
 jusque là du coup ça en français à 
 propos donc pour faire le a majuscule 
 voilà comme ça donc il faut faire halte 
 contrôle plus la touchette et derrière 
 majuscule toucha voilà c'est un peu 
 technique si vous voulez faire comme moi 
 à propos on va se mettre un break dont 
 ceux cette page on va là-bas clé parce 
 que les pas importants c'est juste pour 
 habiller un peu le projet on va se 
 mettre alors m 60 rue break et ensuite 
 on fait un peu et on va se mettre un 
 lors m 140 un peu importe 
 aucun enregistre et là les amis main 
 comprenant ce qui en est fait on exporte 
 ici donc ici on pourrait l'appeler 
 partout dans le projet et il a tout de 
 suite logique se compose en bourse au 
 froid là en l'occurrence une page pour 
 ça qu'on a mis dans les pages 
 après on verra confier un dossier 
 composantes pour m justement que net des 
 petites parties qui rentreront après 
 plus tard dans les pages 
 donc là on a eu beaucoup ton ap on a un 
 homme et qu'est ce qui va nous manquer 
 van roekeghem une page au kazoo on 
 trouve rien une page que s'appeler not 
 found 
 donc on va faire notre fan point le js 
 on faire et c'est un complot noda qui 
 s'exporte tout seul et on va dire erreur 
 erreur 404 voix la pop 
 ok donc là on a une arborescence on a 
 des pages maintenant il va falloir faire 
 une petite navigation donc je ne sais 
 pas j'ai bien compris le principe du 
 composant voilà on exporte à partir de 
 là et là on pourra utiliser partout 
 maintenant vous allez voir comment faire 
 de navigation ça s'est passé des choses 
 qui s'invente pas vous avez dans la doc 
 il ya tout mais je vais vous montrer moi 
 donc pour faire une navigation aura 
 besoin d'un certain nombre d'éléments de 
 la bibliothèque réacteurs hauteur 
 d'homme donc ce qu'on à télécharger tout 
 à l'heure on va avoir besoin de brother 
 routeur donc soit là on appelle des 
 appels des compos nantes on voir besoin 
 de switch et on aura besoin de routes 
 d'accord donc le fait qu'on mette en 
 crochet c'est dire qu'on appelle 
 brothers routeur spécifiquement si on 
 met pas en crochet l'on appelle touré à 
 ton appel toute la biotech les actes là 
 on appelle brozat routeur on appelle 
 switch on m'appelle route from quoi from 
 react et là il propose réacteurs hauteur 
 d'homme ok 
 donc ces trois choses qu'on sait 
 importer vous allez voir que ce qu'on va 
 faire avec on va en faire une navigation 
 en plus haut point son vote ap 
 eh bien écoutez vous en ai parlé tout à 
 l'heure on va mettre des fragments parce 
 qu'il faut toujours un truc super du 
 doigt leur nombre à penser on va pas les 
 mettre et franchement je les ai mis dans 
 mon modèle mais pas pertinent retour sur 
 ce que l'avenir on va plutôt se mettre 
 le browser auteur donc il faut que 
 brother auteurs il englobe toute notre 
 application 
 donc c'est le cas là vu que le apps est 
 l'élément le plus haut 
 comme je voulais montrer là dans 
 l'arborescence et bien lui ont valu 
 mettre un browser hauteur et donc c'est 
 lui qui va s'occuper de route et un peu 
 tout les choses le browser routeur on 
 lui met un switch vous allez voir 
 pourquoi savent que ça d'ailleurs qu'il 
 va tester toutes les routes et si toutes 
 les routes sont pas bonnes et à la fin 
 nous amènera sur l'erreur 404 
 c'est pour ça qu'on est un switch est 
 donc là on va appeler août nous voyons 
 les appels ont appris aux routeurs 
 switchs route ces éléments de rett 
 routarde sommes simplement 
 donc quand on me dira pas comme le 
 chemin est là ton chemin ce sera se 
 lâche 
 il faut donc on va lui dire que ça 
 correspond au complot danois qui 
 s'appelle hommes et là vous voyez j'ai 
 un autre nous propose un autre rapport 
 aux vainqueurs tapant h 
 j'espère que chez vous c'est pareil moi 
 je crois que c'est d'escaudain qui me 
 fait ça sinon je vous invite à voir dans 
 sur cette couleur fluo à chercher après 
 c'est bien quand vous débutez aussi de 
 vous faire vous même les imports pour 
 comprendre un petit peu l'arborescence 
 etc toujours est il que la jeu on vient 
 de faire part c'est un slash et on a dit 
 qu'on prenantes hommes on enregistre et 
 l'a logiquement devrait déjà être sur la 
 page hommes 
 voilà là on voit écrit accueil pourquoi 
 parce que ça on est sûr cela cela c'est 
 qu'il bosse et qui voient ça a bien sûr 
 donc là on est sûr ce lâche donc il nous 
 amène le compo nantes qui correspond à 
 un homme auquel vous comprenez soissons 
 après vous verrez qu'à chaque fois vous 
 êtes fan d'éducation rac ce sera l'autre 
 au point ces éléments rien de plus 
 toujours est il que celles auxquelles 
 nous pose un problème que regarder si je 
 tape n'importe quoi voilà 
 eh bien ça nous amène aussi à homme et 
 là on n'est pas d'accord c'est à dire 
 quoi ça veut dire qu'en fait pour pour 
 lui vu qui a écrit slash est assez bon 
 on est sur la bonne page secondes et un 
 slash je reconnais eh bien non c'est pas 
 bon il faut lui précise et exacte on 
 veut que le paf le chemin ils soient 
 exempts 
 actuellement le sachet pas plus donc là 
 voyage à n'importe quoi effectivement il 
 n'y a pas écrit accueille donc c'est bon 
 regardons je peux même vous montrer dès 
 maintenant qu'est ce qu'on ferait si 
 jamais on trouve une route que lui ne 
 connaît pas et bien à la fin du switch 
 on unijus compo note égale et on appelle 
 la page not found et regarder ce qui va 
 se passer 
 donc là j'ai faim de tout un port là où 
 il faut penser à chaque fois directe 
 importe et à sang si vous y pensez 
 paraît actes il est très bien pour ça 
 d'examen bug ou quoi il y pensera pour 
 vous il va vous le dire il va vous dire 
 là il ya un problème là y'a un problème 
 sans éléments j'ai sûrement faire des 
 erreurs en cause dans le projet et vous 
 verrez donc comment réactif un même 
 moule ce sont vous le verrez donc 
 regarder les notes ford genre lise 
 camping donc là erreur 404 parce qu'on 
 est sur n'importe quoi voilà tout 
 simplement là je regardais up erreur 404 
 hockey et là par contre c'est page 
 d'accueil on est bien à l'accueil ou à 
 vous et que vous savez faire 
 d'allégations matin donc pour la page 
 about 
 je vous laisse faire de notre côté et 
 j'aime le faire en même temps que vous 
 eh bien on reprend donc la ligue duo là 
 on va dire slash le bas donc on va dire 
 le chemin faut que ce soit slash about 
 supporte pas les sens à propos et le 
 composantes qu'on attali ça peut être 
 bahout d'ailleurs seront peut être à 
 propos le chemin on peut mettre ça comme 
 ça on va écrire à propos de fois j'ai 
 pas en lien c'est bizarre ce cas mieux 
 en france est de mettre les liens en 
 français pour pour l'utilisateur et donc 
 on va plus le composantes about là ils 
 le proposent hop voilà et là ça fait un 
 autre rapport 
 donc voilà tout est importé oms a porté 
 toute petite chose et là on a un routeur 
 qui nous amène sur chacune de nos pages 
 regardez genre juste contrôler scène et 
 on va pouvoir les contrôler le à propos 
 si il fonctionne bien 
 en plus j'ai on a fait une belle de fait 
 une belle page avec des bots paragraphe 
 donc regarder on tape à pro 6 mai à 
 propres erreurs 404 c'est bon par contre 
 si on met à propos et bien voilà les 
 amis nous avons passé un peu moche 
 n'inquiétait pas qu'on mettra un peu 
 style un peu plus tard mais toujours est 
 il que là je vous montre vraiment le 
 les choses importantes je trouve que la 
 page de l'ère une beaucoup trop grande 
 comment ça se fait bon c'est pas très 
 grave 
 et voilà vous avez vu la navigation donc 
 là vous voyez qu'on doit faire à la main 
 enfin d'ailleurs danse pavon la 
 navigation enfin c'est plutôt où le 
 routage vous là faut tout faire à la 
 main dans l'url ou tech c'est pas ça 
 qu'on va vouloir faire on va plutôt 
 vouloir créer des liens sur lesquels on 
 clique pour aller de page en page 
 alors pour aller de page en page et bien 
 on va tout simplement se crée une 
 navigation et pour se créer une 
 navigation et bien falloir qu'on fasse 
 un compound navigation réutilisables 
 partout donc pour faire ça et bien 
 remettre sur air forcé et en faire un 
 nouveau dossier et ce dossier s'appelle 
 component il faut savoir qu'il ya 
 souvent trois dossiers majeurs quand 
 vous travaillez dans la src donc il ya 
 ap un d'aix qui sont toujours en dehors 
 ça y'a pas de soucis et les trois 
 dossiers majeurs c components page et 
 style ce sont les trois choses au regard 
 sur lesquels vous agissez petit à petit 
 au fur et à mesure de votre projet 
 avance-t-il on verra plus tard 
 là on est sûr qu'on connaît et on va 
 mettre na vi gassion point g s est bon 
 la haine majuscule ça veut dire quoi 
 cela construit un nouveau conte 
 connaître réutilisables comme d'habitude 
 j'ai fait est resté entrées et donc 
 quelle va être la logique de cette 
 navigation 
 déjà on va lui mettre un classe n'est 
 une classe naïm aux allumettes 
 navigation ce sera prêt pour le style 
 envers un peu un peu plus tard comment 
 on fait pour pour cloisonner le style 
 lorsqu'on sait que c'est important de 
 donner des classes lime à chaque à 
 chaque début en fait de complots nat 
 comme ça on est sûr que en disant point 
 navigation après plus tard dans notre 
 style à prendre pour agir que sur ce 
 qu'il ya un terreau du comportement je 
 reviendrai plus tard là dessus en train 
 de s'égarer 
 qu'est ce qui va nous falloir la fois 
 qu'on avait cherché encore un petit truc 
 un petit comprenant direct hauteur 
 d'homme 
 il s'appelle commun ils s'appellent nav 
 link donc on va lui dire à peine 9 link 
 from donc réacteurs hauteur d'homme 
 erenav link en fait c'est lui qui va 
 nous permettre en cliquant dessus 
 d'aller de page en page 
 donc regarder encore une fois là je vous 
 montre une fois comment on fait puis 
 après vous allez le savoir jusqu'à la 
 fin de votre vie c'est à dire que bon 
 mais c'est comme le routeur c'est des 
 choses qui qui ne s'invente pas mais qui 
 sont ils sont hyper facile après à 
 mettre en place pour chaque nouveau 
 projet donc on dit nav link exacte tout 
 donc on l'a tous et l'eurl coordonnées 
 donc par exemple la page d'accueil on 
 veut juste lui dire se lâche 
 hop on se met comme ça et on met 
 accueille donc ça veut dire que quand on 
 clique rassure cela vix et lui navigue 
 en réalité c'est un as et une ancre 
 savez une encre ans en html quoi donc 
 sauf que c'est un complot nantes 
 spéciale de ré actes et donc il va nous 
 permettre bien d'aller sur l'accueil du 
 cliquant dessus au caire sans faire un 
 deuxième dame dink et ça va être pour 
 aller sur la page about up 
 donc on va lui dire exacte tout tout à 
 propos donc on avait mis en urss en fait 
 comme ceux-ci lahonce écrit à propos 
 pour notre navigation et voilà 
 là on a déjà une toute petite navigation 
 alors là j'ai mis un exemple avec deux 
 pages mais si vous mettez cinq pages 
 c'est la même chose 
 je pense que des compris le principe ce 
 week-end assez rapide à mettre en place 
 hélas ce qui est intéressant ce qui est 
 intéressant donc là dedans 
 et bien c'est que ce maître que par 
 cette navigation par exemple dans pages 
 on va dans about about a besoin d'une 
 navigation donc au dessus avant le à 
 propos la relire tient là tu vas nous 
 appeler le compo nantes navigation il 
 est là paf auto encore là haut on se le 
 referme donc là on l'a dans about hockey 
 j'enregistre et va nous falloir dans 
 sommes donc même principe dans sommes 
 d'ailleurs le chat ne sert pas vraiment 
 à grand chose bon on peut sauvegarder 
 pour l'instant pour savoir quand et sur 
 l'accueil et là on dit navigation paf 
 paf on enregistre donc là notre 
 composante navigation vient de l'appeler 
 à deux endroits différents rites le code 
 on au code une seule fois et ensuite on 
 seul appel à deux endroits différents ça 
 c'est quand même cool et donc regardez 
 là là haut on a accueille à propos d'un 
 plat si on va sera cueille pouvoir y a 
 qu'à lire ça 
 il ya pas de chargement au tout est déjà 
 prêt charge est préchargé tout le 
 navigateur déjà toutes les informations 
 d' avance il n'y a rien eu besoin de 
 demander après un serveur pour les 
 entrailles en local mais vous comprenez 
 le principe et voyez peuvent pas on peut 
 on peut naviguer donc là vous créer 
 autant de pages que vous le faites ce 
 que vous voulez là venait déjà de de 
 comprendre les principes de base s'ils 
 voulaient faire des sites vitry denrées 
 actes ce qui se fait très bien et bien 
 ça c'est les principes de base une 
 navigation puis des composants qu'on 
 réutilise voilà tout simplement 
 bon bien sûr vous ne tournez en douter 
 c'est un peu plus complexe que ça arrête 
 avec ton peu beaucoup plus le pousser 
 mais en tout cas là on a déjà une partie 
 on a des choses intéressantes à savoir 
 mais il ya un petit truc que j'aimerais 
 faire que j'aimerais te remplacer doit 
 nous emmener un petit peu sur le style 
 il ya un petit truc que j'aimerais 
 mettre en place c'est comment est ce 
 qu'on fait pour savoir sur quel sort 
 qu'elle voit là j'arrive pas à trouver 
 les mots comment on fait pour savoir sur 
 quelle page on navigue là parce que 
 lorient ne vois pas du tout est bien en 
 réalité react il permet d'identifier ça 
 de façon extrêmement facile 
 et là ça c'est encore une force de 
 réacteurs garde et on retourne la 
 navigation on se met là et on a un truc 
 qui s'appelle active classe name et hop 
 on va l'appeler denave active donc pour 
 l'instant il n'y a pas de style à notre 
 application 
 d'accord je récupère la up non je le 
 mets là comme ça donc ça veut dire quoi 
 pourquoi il est parti et l'aïd 
 voilà comme ça un accord avec ce que 
 j'ai ok donc on se met actifs classe 
 name en rajoute ça et on lui dit ta 
 classe times as he and have active 
 joaillière quoi s'avère que dans le css 
 maintenant dans le sas plus tôt quand on 
 va énoncer la classe d'âge actives 
 ça va donner un style particulier à la 
 page sur laquelle on est donc soit on 
 est soit le slash soit on est sûr ça et 
 on y verra un style particulier mais ça 
 nous amène donc hostile et donc les amis 
 un support juste en dessous la vidéo 
 pour le style ce qu'on n'a pas le codem 
 est vieux gamin j'ai quand même pas mal 
 de sud on va pas le quad et bien sûr 
 pour pas perdre trop de temps que je 
 pense que demain comme un petit niveau 
 en css n'y a pas grand chose de 
 compliqué dans ce style 
 et donc mais ce qui est important c'est 
 game de comprendre comment il s'organise 
 ce style c'est ça qui est très important 
 dans quoi ce mec se ressourcent nouveau 
 dossier et on va s'appeler style même 
 style épuré l'autonomie components page 
 et c'est mieux de mettre ds partout où 
 je pense est donc dans ce style donc 
 vous avez le support juste en dessous de 
 la vidéo et vous avez déjà un certain 
 nombre d'éléments dans ce support vous 
 avez des images qui vont nous être utile 
 bon celle du logo je crois pas qu'à nous 
 sera utile finalement parce que j'ai 
 appris la dent public on appris on a 
 pris ce logo 192 donc il suffit se 
 suffit très bien je crois en revanche 
 seuls à être utile pour la navigation 
 cette image me remettre à plus tard 
 là il ya tout le style de notre projet 
 mais moi je vais aller je vais vous 
 montrer un peu comme il s'organise ce 
 sens en tout copié comme ça sauvagement 
 jeu plutôt le faire petit tout petit à 
 petit et donc là en l'occurrence on va 
 se mettre en place le style pour pour la 
 navigation 
 donc ce qu'on va faire c'est que déjà ce 
 qu'il faut savoir pour le pour le sas 
 c'est qu'on n'a pas besoin de faire un 
 index points et css et 7,7 feuilles là 
 en fait on n'a pas besoin de la 
 convertir ce que j'ai l'habitude de sas 
 dans d'habitude 
 enfin en dehors de framework ou de 
 bibliothèques il faut mettre une sorte 
 de fichier point map qui convertit le 
 sas en fichiers css l'aérien besoin de 
 ferias vers vos besoins il n'y a aucun 
 besoin de filles de créer un fichier css 
 ou quoi on va juste aller dans un index 
 ici on va faire une porte tak tak et là 
 on va s'implanter dans ce texte le index 
 point css et donc tout ce qu'il ya dans 
 l'index princesse ce sera lula au plus 
 haut point notre application tout 
 simplement c'est pour ça qu'on se mette 
 à l'index 
 là il me dit kent kent resolve parce que 
 j'ai mis style parce que j'ai mis index 
 tout court ses index point scss voilà 
 quand c'est tjs en cas de vol la voyez 
 s'est passé on n'a pas besoin de le 
 mettre le point js par contre terminé en 
 poids csa soit qu'à mieux précisé donc 
 voilà là normalement il devrait le 
 connaître 
 vous voyez quand tu es une erreur fell 
 to compile et il nous met précisément ce 
 qui marche pas c'est à dire là il ne 4 
 isole il n'arrive pas 
 résoudre ce chemin là tout simplement là 
 vous voyez la gare ucial résoudre ce que 
 le fichier existe tout simplement 
 donc pour revenir sur le style ce qu'on 
 va se faire c'est qu'on reste faire un 
 fichier settings alors j'espère que vous 
 connaissez un petit peu ça sinon c'est 
 pas grave ce que vous avez quel très 
 bien comprendre mais vous allez voir un 
 petit peu l' avantage de sas dans une 
 structure comme comme réactif plein de 
 composantes 
 donc on va se mettre au vert fichiers ou 
 ma niveau que le stylo remettre un 
 setting point scss donc le fait de 
 m'être and under score là c'est une 
 bonne pratique c'est pour montrer que 
 c'est pas lui le fichier mettre le 
 fichier mettre celui-ci index - cs s et 
 tous les autres fichiers leur mettra à 
 l'honneur score mais en vrai quand on va 
 l'appeler ce fichier setting da par 
 exemple on va lui faire ici on veut 
 faire ym porte tac tac on veut il dire 
 tu m'importe setting tout simplement 
 comme ça hop 
 j'enregistre mon post rien dans cette 
 valeur doit mettre des petites choses 
 dans settings petit à petit on va même 
 tout mettre un lieu pas très grand 
 fichier de fichiers setting tac comme ça 
 et donc là déjà en voir la police qui va 
 changer un certain nombre de choses qui 
 vont changer 
 donc j'ai lancé mon mac world band the 
 setting c'est bizarre on dirait que ça a 
 bien marché 
 alors des fois quand il est un peu 
 capricieux on peut actualiser 
 quelquefois le loto enfin quand on 
 sauvegarde automatiquement sa actualise 
 mais des fois ça ne prend pas en compte 
 par exemple chasse comme le style ou pas 
 toujours donc n'hésitez pas à actualiser 
 quelquefois donc là vous voyez que la 
 police a pris le fond aussi n'est pas 
 tout à fait blanc donc on est bien donc 
 on a des réglages de base juste pour 
 rire sur settings setting en fait c'est 
 là qu'en mettre toutes nos variable 
 toutes nos couleurs donc et comme ça 
 partout dans le projet on aura juste à 
 appeler couleurs 1 et on sait que c'est 
 cette couleur dans notre projet voyez ce 
 que je veux dire donc ça c'est des 
 choses qui sont ici assez utile oui là 
 on appelle la fonte un la couleur est 
 partout dans le projet de tournoi besoin 
 de couleurs est bien vrai nos couleurs 
 elles sont là et si on a plusieurs fonte 
 c'est là qu'on est mais bon là pour 
 l'exemple moi j'ai fait un petit projet 
 donc donc voilà donc bon voilà dans 
 settings c'est vraiment des gros 
 réglages de base pour le body pour tous 
 les lits du projet pour tous les as du 
 projet pour tous les avis 
 id voilà c'était juste des gros réglages 
 de base un setting et donc au fait 
 comment ça marche on le met le plus haut 
 possible de nos importe ce qu'en fait un 
 exploit c est ce point est celle ci 
 doivent servir qu'à importer des 
 fichiers à la suite 
 sauf que lui l'anneau index il va se 
 balader comme ça doit faire tac tac tac 
 et live avoir importe machin chouette 
 donc là il va partir il valait ici et il 
 va lire il va lire 7,6 donc qu'il va 
 dire lui d'abord et ensuite tous les 
 fichiers en suivant qui vont suivre 
 il va aller lire et saufs qui connaîtra 
 il sera qui est color un parce qu'il 
 aura déjà lu setting ici donc en fait le 
 à l'index progressé saint-just a 
 regroupé tous les fichiers du projet et 
 voilà les mettre ensemble et c'est comme 
 ça qu'on va réussir à s'organiser 
 jusque là par exemple on va créer un 
 dossier comprenant donc là tout le style 
 de nos compos nws 
 on va le mettre ici donc là on met 
 navigation donc ça a beau être un 
 composantes en saas en mais pas de 
 majuscule au début et voyez je mets 
 toujours un interscope records dans ce 
 fichier c'est pas lui qui coule un tout 
 sauf que là quand on en compte en fait 
 l'un pour ici on a un besoin de rappeler 
 leurs scores regardez on fait une porte 
 donc là il faut aller dans components et 
 navigation hop on enregistre et donc là 
 la navigation qu'on va se dérouler si on 
 sait à quoi je vous l'accordé moi pas 
 tout copié en permanence regardez on 
 commence par point navigation pourquoi 
 point navigation ce que c'est à dire que 
 maintenant toutes les choses que je vais 
 appeler à l'intérieur ça se permet ça en 
 fait tout va être englobée dans ces 
 accolades 
 ce qui fait que maintenant je peux a 
 plaidé à delhi et d'yves et ça nous ne 
 le sommes 
 donnera son style kouao div qui sont 
 dans navigation ça c'est l'une des 
 forces incroyable de ça c'est tellement 
 dommage que css va pas en face pas 
 encore ça peut-être qu'un jour le font 
 donc la regarde et on va se stylisé un 
 peu notre compagnie 
 tant qu'à faire en même temps on va se 
 regarder sur le côté comme ça vous allez 
 voir son évolution 
 voilà je composais enregistrera au fur 
 et à mesure 
 donc regarder comment on va se le faire 
 on va se mettre une margin en haut et en 
 bas 20 pixels on va lui mettre un 
 display flex ok t'as que j'enregistre 
 voilà ça prend un petit peu plus un 
 petit peu plus de place dans le fisea le 
 lissp échec ce n'est pas forcément 
 obligatoire j'ai l'impression qu'on sait 
 pas très bien on va pas s'attarder sur 
 le style là on remettre une margin 
 partout de 10 pixels elles vont se 
 détacher un peu les uns des autres 
 un padding 2 10 pixels aussi hockey et 
 une position relative 
 pourquoi une position relative tant que 
 j'enregistre ok donc là on a notre 
 navigation des jeunes un peu plus de 
 gueule mais on voit toujours pas sur 
 quelle page on est enfin au niveau de la 
 navigation quoi j'ai pas si vous voulez 
 vous voyez où je veux en venir c'est que 
 là on a mis un risque et les notre 
 navigation maritime le fichier gelé 
 perdu le fichier d'allégations et là 
 vous voyez à apprendre rapidement 
 beaucoup beaucoup de fichiers d'hoover 
 quand on fait du jour est donc faut être 
 fort être organisé on a actifs classe 
 name nav active donc c'est à dire que 
 quand on est sur cette url c'est cette 
 classe s'applique cette classe ça vient 
 se mettre regardez là si je fais 
 inspectés 
 si on fait inspecter tac comme ça lors 
 de navigation regarder accueilli la nav 
 active et cycliques sera propos d'un 
 convoi plus je retourne leur accueil 
 accueil 
 il a plu l'invectivé c'est à propos qui 
 est active donc cette classe en fait 
 elle se balade entre eux entre les deux 
 fois où elle est donc comment ça 
 concrètement comment ça se matérialise 
 eh bien on se met là on lui dit points 
 navx active et là on donne tout le style 
 qu'on veut un autre mâle active alors 
 moi il se trouve que j'ai fait un truc 
 un petit peu plus farfelues c'est dire 
 que pour matérialiser la page sur la 
 cornée j'ai souligné en quelque sorte 
 j'ai mis un très en dessous en dessous 
 de chaque élément pour faire ça j'ai 
 fait un after avec sasson fait et after 
 comme ça dans tous sens pas encore sûr 
 ça donc je vais pas non plus trop 
 m'étendre là dessus mais ça veut juste 
 dire qu'on fait point avec ti vct 2.2.1 
 after l'alleud et est donc là quand on 
 fait un after il faut d'abord un after 
 before d'ailleurs il faut d'abord 
 allez un contact bien sûr il faut lui 
 mettre une louis dasseux à cet élément 
 on va dire que c'était 85% de son 
 élément parents united 2 5 px donc pour 
 l'instant on ne voit toujours pas ce 
 truc là pourquoi parce qu'il faut une 
 background une background color 
 on va lui dire qu alors un d'accord 
 c'est la couleur dorée acte c'est un 
 bleu react milliards en quelques sortes 
 l'agent réduite on ne voit toujours pas 
 pourquoi parce que quand on fait un 
 after before il faut si vous avez bien 
 suivi vos cours de css il faut bien sûr 
 m 2 absolut et voilà là on la voit elle 
 est là la barre elle est censée être en 
 bas donc elle n'est pas encore tout à 
 fait placer pas de souci si on va la 
 placer enfin bottom un pixel left 50% et 
 si enfin l'âge de 50 % vous savez ce 
 qu'il faut faire il faut faire un 
 transforme 37 pour leurs maîtres pour le 
 remettre complètement centre et on veut 
 dire donc en 35 pts sur l'ex dx de -50% 
 voilà là on est pas mal voilà là on sait 
 qu'on est sûr à propos et si on clique 
 on est sûr accueil 
 voilà vous comprenez le principe bon 
 c'est à ce faux je vais codé indue du 
 style de son épouse de voir s'il ya pas 
 grand chose un style je copie au fur et 
 à mesure mais en tout cas vous avez 
 compris le principe les amis donc voilà 
 très important de partitionner son style 
 vous commencer immédiatement par le nom 
 de la classe 1 le nom du composantes 
 dans lequel idées et après tout ce qui 
 va découler 
 eh bien ça concernera uniquement s'il ya 
 dans la composante est par contre si 
 vous voulez donner un style à tous vos 
 atouts un style à tout vomi et bien vous 
 les mettez dans settings ce sera des 
 réglages globale des réglages pour tous 
 les composantes du projet donc voilà 
 pour cette partie style et qu'est ce qui 
 va nous attendre les amis heures suivant 
 j'ai l'impression qu'on va on va rentrer 
 dans le dur 
 ah oui là on va commencer recommencer à 
 travailler avec la pays alors en réalité 
 une ouest le logo à faire ça nous permet 
 de voir comment on traite les images 
 denrées acte est aussi je voulais vous 
 dire donc lorsque la châtre indre 
 démarrer mon projet donc pour démarrer 
 un projet c'est pareil on fait toujours 
 à mpm start 
 en revanche si vous récupérez un projet 
 parce que vous récupérez vos fichiers 
 terminer en dessous de la vidéo il faut 
 que 
 que vous fassiez que vous installiez en 
 fait la bibliothèque notre module parce 
 qu'en réalité là on voit que dans du tig 
 nord quand moi je commence mon travail 
 lennon modules ne sont pas importés 
 gittinger c'est à dire qu'est ce que tu 
 ignores comme fichiers quand tu quand tu 
 fais un quand tu vas sur button eh bien 
 on y va chaque fois on ignore on ignore 
 nos modules forcément c'est hyper 
 volumineux donc ce qu'on fait c'est que 
 on ne n'importe pas donc la personne qui 
 récupère le fichier doit se réinstaller 
 dans des fichiers et modules et pour 
 faire ça faut juste faire 
 npm ihu npm install mais le hisser le 
 raccourci de install donc si vous faites 
 npm y est bien en réalité hop ça va npm 
 va aller dans des pans d'annecy comme 
 ceux ci et il va parcourir tout ça et il 
 va lire tac tac tac tac et il va prendre 
 exactement cette version-là cette 
 version-là cette version là il va tout 
 réinstaller dans des modules et là le 
 fichier vous pouvez faire une p and 
 start 
 et il pourra démarrer donc voilà c'est 
 une petite parenthèse pour vous 
 présenter ça donc ok le fichier de les 
 redémarrer il est là nous vous a dit 
 qu'avant de se lancer à l'aventuré de 
 sueur sur le pays 
 on va d'abord faire un complot nantes 
 lobo donc on se met là on fait logo 
 point j s ok on fait rsc hop on va 
 enlever ça on va faire point logo donc 
 toujours une classe comme ça pour 
 déterminer que l'on est dans ce 
 composant là et on va lui dire quoi on 
 va lui dire qu'il nous faut une image le 
 logo 
 donc on va dire src tu vas nous chercher 
 img slash l'umq lines est pas du tout à 
 taper vs code en général et il faut 
 mettre une alternative on va dire logo 
 et on se met 1 h 3 où on écrit react 
 world hockey j'enregistre donc la nôtre 
 comprenant d'autres composants a été 
 importé nulle part 
 toujours est il que là vous voyez que 
 j'ai fait images et j'ai été directement 
 à la racine comme si en fait on se 
 situer en fait quand vous importez une 
 image depuis le gie et cycles depuis en 
 quelque sorte html eh bien il faut aller 
 l'a puisée c'est comme si on partait de 
 la racine du public 
 c'est comme si on était dans public donc 
 là on fait taktak tac tac tac 
 par contre il ya une nuance c'est que si 
 jamais on veut utiliser cette image 
 depuis le css pour la meilleure 
 performance si on faire une image de 
 fond par exemple en css là c'est un peu 
 différent donc j'enregistre ok là j'ai 
 enregistré on l'a toujours pas notre 
 machin donc on va dans about 
 on va dire que là on vint logo il faut 
 se faire loto un port voilà donc là on a 
 on aura nos petits logos dans le bail 
 outs allons allons vérifier 
 voilà on est là donc là il a écrit e lo 
 ré at world's donc déjà il n'a pas 
 réussi à nous d'afficher notre image 
 pourquoi pourquoi est-ce qu'il a pas 
 réussi d'un fichier image il s'appelle 
 pas logo png je crois que je l'avais 
 appelé différemment à ces logos 192 tac 
 vérifiant donc là il va puiser 
 donc quand on quand on fait depuis au 
 logis sx il va puiser dans le statique 
 alors dans ce qui est fait dans public 
 on parle de cette racine la voilà il est 
 là le logo avec écrit react to world 
 class n'y a pas de style c'est pas très 
 grave on va se le mettre et il faut 
 juste penser à le mettre dans sommes 
 aussi up 
 ici ce sont après c'est le logo et en 
 absolut 
 il tord ou en absolu de centrer vous 
 allez voir comment on fait ça et donc là 
 si on veut accéder au style on va dans 
 composantes et on se crée un enders core 
 logo points et css là je vais récupérer 
 ce que j'avais écrit et c'est comme ça 
 que j'ai pour vous expliquer aussi donc 
 on commence toujours par point logo pour 
 dire qu'on est dans le conte ponente 
 logo et à partir de là quand on appelle 
 là je crois c'est que le h3 qui est dans 
 dans logo donc on impact pas les autres 
 comme le mg donc voilà ce qu'il faut 
 savoir tourner j'enregistre c'est que la 
 wei qui a un background et on va 
 chercher une image donc l'image j'ai pas 
 encore apporté mais donc pour les images 
 qu'on importe depuis le sas il faut pas 
 les mettre 
 il faut pas aller chercher comme si on 
 était dans le public il faut aller les 
 chercher comme si on partait du fichier 
 sas donc on sort du fichier on sort la 
 ans on sort deux composantes 
 on sort de ce style et là il a écrit à 
 cette semaine donc pour l'instant on n'a 
 pas créé donc on va se faire un dossier 
 à 7 et donc danser dans ce dossier à 7 
 on va les skopje l'image à mince penser 
 que la vella d'image du support non 
 c'est pas très grave de les récupérer et 
 d'autre part la voilà donc vous vous 
 l'avez en dessous de la vidéo dans supor 
 voilà elle est là et donc les images 
 qu'on va aller chercher deux puis le css 
 il faut les stocker dans source 
 vous les mettez vous voulez moi j'aime 
 effet jamais un truc à 7 c à vous pouvez 
 mettre un truc un dossier ing et ça 
 marche aussi chacun organise comme il 
 veut mais enfin tant que tant que ces 
 cons principe par les autres infos tout 
 faut toujours penser pouvoir avoir la 
 vision de des personnes qui passeront 
 après vous attendez je commence à fermer 
 un peu des choses là on s'embête pas 
 trop voilà on se met comme ça et donc la 
 bombe et retenez juste que vous partez 2 
 ce fichier sas donc on sort deux fois et 
 on va chercher l'image d'accor donc 
 c'est pas du tout la même démarche que 
 pour aller que quand on l'a ici langis 
 sx ou là on quand on a du g6 on est 
 directement sur la partie on va dire 
 frontale on est sur le le statique et on 
 part de public voilà c'est les deux 
 petites nuances et donc logiquement 
 notre logo le style n'a pas pris 
 pourquoi est-ce que ce qui n'a pas pris 
 s'il est bien suivi mais on a créé notre 
 fichier là mais l'index ne le connais 
 pas qu'il faut bien sûr à chaque fois 
 penser à leur ajouter ici 
 donc là on est sûr logo est logiquement 
 voilà on a notre logo qui est bien fait 
 parce que manger je les connais un petit 
 peu quand même 
 julien petit style et donc voyons une 
 image de fond on a un logo qui importe 
 est ici ep 
 et on l'a sur les deux composants 
 donc là on va l'été on a peut-être pu 
 faire un composant et d'heure on va dire 
 qu'il aurait regroupé la navigation plus 
 le logo mais bon sujet pour vous montrer 
 des exemples bien distincts voilà des 
 choses comme ça là où vous comprenez 
 bien qu'on est sur un exemple jamais on 
 n'a rarement décident qu'ils sont qui 
 sont si peu fournie quoi donc voilà je 
 vous expliquais ça et maintenant on 
 passe réellement à l'apei et op et à 
 l'affichage des pays alors inscrit un 
 composant un compound countries au 
 pluriel donc c'est les pays point js ce 
 sera un peu notre gros composants de ce 
 projet on se fait comme d'habitude un 
 petit air et c'est ok on a queen size 
 alors pour être sûr qu'il marche avant 
 avant de faire quoi que ce soit on écrit 
 jusqu'aux prises à l'intérieur et non 
 vol vouloir d'un homme countries donc la 
 place de accueil par exemple ici on se 
 met countries voilà il faut penser 
 toujours à l'importer là-haut évidemment 
 up contre le s est logiquement voilà 
 l'aï écrit country c'est à dire que ok 
 on est bien apporter notre élément il 
 fonctionne super donc qu'est-ce qu'on va 
 qu'est ce qu'on va vouloir voir vous 
 montrer d'abord comment on stocke des 
 données d'un real comme on utilise le 
 state via les cook lehouck de réac donc 
 ils sont nus qui sont arrivés il ya un 
 an et demi deux ans je crois non non 
 rien qui sont maintenant enfin ma tante 
 ou montrer plus qu'avec ça puisque c'est 
 extrêmement pratique et je peux le 
 prouver 
 donc je vous montre immédiatement 
 comment ça se présente un look déjà on 
 le sent un peu comme une variable sauf 
 que le cette variable on lui donne un 
 nom et on lui donne au moulin va 
 l'appeler data pour des données et on va 
 lui donner après la virgule 
 un deuxième élément c'est on va 
 l'appeler cette date a donc c'est 
 toujours une bonne pratique de l'appeler 
 7 donc mettre en place et le nom de de 
 la variable qu'on a déclaré ça veut dire 
 quoi c'est à dire qu'en fait data c'est 
 là qu'on va être donné et cette date à 
 c'est l'élément par lequel on passera 
 pour actualiser cette donnée vous allez 
 voir c'est un peu c'est un peu flou au 
 début je peux vous comprendre c'est pour 
 ça que je vais essayer de vous montrer 
 assez rapidement après comment est-ce 
 qu'on peut utiliser cette date 
 par exemple bon on va juste se pour 
 l'exemple on va juste use the state of 
 the string à l'intérieur et on stocke 
 lots d'accord donc se dire quoi se dire 
 que dans data on stocke des strings l 
 eau bien regarder si là dedans 
 hop on affiche et data comme ceux ci est 
 rien et ça c'est du réalisme ont misé 
 juste une accolade data donc à notre 
 return le j'enregistre et regardez ce 
 que ça va renvoyer 
 eh bien ça renvoie l eau ça renvoie la 
 valeur stockée dans cette variable alors 
 prendre les valeurs stockées dans dans 
 le state 
 enfin dans tout cas n'a parlé ou qu il 
 ya un petit plugin qui s'appelle react 
 développeurs tout ce plugin c'est un 
 plugin chrome qui est magnifique 
 vous voyez on va s'agrandir un peu 
 ajouté hop on se la joue tu ajoutes et 
 l'extension là ils vérifient tak tak 
 merci s'est ajouté 
 donc on retourne sur notre projet on va 
 dans la console ont fait inspecter et il 
 est pas là peut-être aller ce que je 
 cherchais le developer tools 
 où est ce qu'ils peuvent 
 je pense que je pense qu'il faut 
 actualiser la page pour que pour qu'il 
 prenne en compte les plus geeks ont 
 installé à voilà voyez un plugin 
 composants et un profilers non étudiées 
 que le compo net on peut se rapprocher 
 un peloton en plus le maître par là donc 
 le camp pénal se regardent et regarder 
 comment ça se présente 
 voilà on à l'arborescence tout 
 simplement de tout notre projet react 
 weeks et sans briller à chaque fois donc 
 là d'abord le browser routeurs qui 
 organise tout ça tac tac tac on descend 
 on descend ensuite on a le coude en 
 sommes donc qui contient le logo qui 
 contient tout voyez là tout ce qui 
 contient de complaintes sommes donc en 
 suite on passait à la navigation dans 
 une bonne petite navigation voyez tout 
 ce qu'elle a donc en fait ils absolument 
 tous les composants là dedans il ya le 
 link encore là qu'ils appellent ça comme 
 ça classe nav active 
 donc il ya plein d'éléments hélas que 
 l'intéressé c'est dans kung choisissent 
 donc on ressent tout en bas on a le 
 comprenant tout cas une chose est 
 regardée queen choisi écrit ou qs state 
 lots donc dans son état ce composantes 
 il stocke la valeur de lots et cette 
 valeur donc on peut l'utiliser après 
 comme on veut sur notre page de façon 
 dynamique la wake en fait on peut la 
 faire évoluer et derrière la n évoluera 
 de façon dynamique 
 par exemple on va faire une fonction ou 
 ailleurs const say goodbye est égal à et 
 on va lui dire quoi cette date a et on 
 va lui dire good bye ça veut dire quoi 
 ça veut dire que là le cette date a en 
 fait on ne peut faire et voulait que 
 cette date que cette date à louis que 
 ces données faire que cette variable on 
 peut les faire évoluer qu'en utilisant 
 cette date a bien regardé lâche créer 
 une fonction pour lui dire cette date a 
 tu fais ça et donc tu cries goodbye bien 
 regarder on va se mettre un peu plus bas 
 et on va faire recevoir par exemple un 
 bouton bon c'est un peu mal organisés 
 mais dès que j'ai enregistrés çà va se 
 mettre bien en reste faire un bouton on 
 va dire dire au revoir et regardez là on 
 va dire on clique et on va dire quoi un 
 clic tu me déclenché say goodbye 
 et là qu'est ce que ça veut dire ça veut 
 dire que 
 à l'événement c'est comme un animal 
 listener en quelque sorte en juillet ce 
 classique quand on va te cliquez dessus 
 le bouton tu me tues tu me tues me 
 déclenché sa série good bye fait quoi il 
 va faire cette date avec la good bye 
 notamment la datar de hockey 
 j'enregistre regardons ça c'est vraiment 
 ça ça vraiment valeur d'exemple on va 
 papa y écrire ça après notre truc voyez 
 là on a l eau dire au revoir je clique 
 goodbye et le state goodbye 
 ok ça c'est une notion importante de 
 react vous allez voir que bon on va pas 
 mettre le faire donc voilà pensée de 
 petites parties vous en doutez on va pas 
 on va pas faire une fonction say goodbye 
 on va faire un truc un peu plus complexe 
 quand même faire un truc un peu plus 
 complexe que ça c'est à dire que cette 
 date à y avoir quelle lequel nous stock 
 tout tout notre appel à la base de 
 données donc là au lieu de dire l eau on 
 va juste je retiens qu'on attend un doré 
 qu'on attend un tableau de courbet 
 décrocher c'est pas obligatoire qu'on va 
 être qu'on peut changer en fait ça peut 
 être ça peut très bien être un homme 
 beurs voor 25 et on peut changer en lots 
 donc ya pas vraiment de de typage après 
 la fonderie cuisez ce texte avec scripts 
 le monde a joué je m'égare un peu donc 
 on va s'en tenir à ça 
 et on va aller travailler que la pays 
 sans plus attendre 
 on va les faire un fait ch donc on se 
 met là je récupère le lien que vous avez 
 vous éventuellement un projet fini si 
 vous voulez pas vous le récupériez ou 
 pas vous tout à palau donc s'appelle 
 reste countries point nos os lacherest 
 cela je vais de slash hall est en fait 
 il faudrait s'en tenir à salalah pays 
 voyez si on fait ce lâche paul on a tous 
 on a toute une série d'éléments donc là 
 moi ça se met en forme parce que j'ai un 
 plugin qui s'appelle dissone view voyez 
 c'est joli c'est en forme 
 si vous n'êtes pas de ghislaine view 
 vous voir et pas ça comme ça voilà allez 
 dans google si vous voulez donc voilà là 
 on a tout ça par contre il ya trop 
 d'informations est bon plus on va 
 chercher l'information et plus on est 
 lent à faire une roquette même si bon là 
 c'est que des données ça va quand même 
 assez vite on aime bien en termes de 
 performances sur des choses précises 
 donc on rajoute point d'interrogation 
 fields et on veut que naît une 
 population région-capitale flight 
 regarder la pala pays voilà on n'a que 
 des pays avec le nem capital région 
 région c'est là le continent et la 
 population donc voilà pour tester 
 d'abord si on appelle un tapis est 
 susceptible de manger copier vous 
 d'abord le lien dans l'url voir ce 
 qu'ils renvoient d'accord lier envoie 
 les données on est bien maintenant il va 
 falloir que bien qu'on ait se cherchent 
 et se donner avec react comment va s'y 
 prendre les amiraux s'ouvre à la console 
 est à faire mpm epour install tirer et 
 ce port said 
 axios là on va s'installer la 
 bibliothèque axios axios ça va nous 
 permettre de faire un fait en quelque 
 sorte du cours d'une aktion c'est 
 extrêmement rapide performant et il ya 
 un besoin de convertir angie sonne comme 
 on le fait avec un fait habituel 
 donc vous allez voir ce sont tout à fait 
 ça quand on utiliserait actes même vu 
 ses actions ce qui faut il que vous 
 allez voir ok là on l'a écrit faune de 
 0,8 abilities augurait pourtant on se 
 met là on va dire une porte 
 axios from axios ok on enregistre allons 
 voir si déjà on actionne ce qu'elle par 
 sécurité voilà 
 axios 0,21 1 c'est cette version là 
 qu'on a dû axios ok donc maintenant il 
 va falloir aller se chercher tout ça hop 
 on se met là on va lui dire axios points 
 gates est inquiète 
 on veut faire on veut récupérer des 
 données entre guillemets paf on se 
 reprend le lien mars 
 du coup j'ai pu tout le lien puisque je 
 vous ai montré qu'il fallait a fini un 
 peu pop on se récupère tout ça qu'est-ce 
 qu'on fait derrière la promesse ne m'a 
 pas un seul transformer en ji sun on dit 
 juste zen 
 donc qu'est-ce qu'on tue qu'on tient le 
 résultat affiche le nom résultats en 
 passant dé tu es mon amie on va dire log 
 deux res ok regardant ce qui s'est passé 
 donc on enregistre hop on va dans le 
 console ogg et regarder quand il ya des 
 log en fait un réac il faut savoir que 
 que souvent s'afficher en double c'est 
 pas très grave 
 d'accord et donc enfin ce n'est pas 
 grave du tout et donc là on a 
 effectivement réussi à aller chercher 
 deux cent cinquante pays on les a on les 
 a ils sont dans notre rêve par contre il 
 va falloir faire l'étape en plus il va 
 faire faire un point data pour aller 
 juste dans ce data de notre requête 
 voilà et là on a réellement tous les 
 pays ok super donc maintenant qu'est-ce 
 qu'on va vouloir faire 
 eh bien on va vouloir stockés dans 
 battle d'atteindre le bassin de résident 
 et bien voulu le dire mais stoke moiré 
 ce point d'accord va très bien on a vu 
 comment ils comment on pouvait faire on 
 fait comme ceux ci ont fait cette date à 
 je n'y a que comme ça qu'on peut faire 
 évoluer notre état là de data on lui dit 
 cette date a mis en place la datar mon 
 ami es tu me passes ray ce point data et 
 voilà et derrière on va faire quoi après 
 notre notre action eh bien on n'a qu'à 
 se loguer data et on va tout faire péter 
 je vous le dis d'avancement la paf on va 
 se loguer data pour à ce que ça contient 
 hop là il va se mettre à jour attendue 
 au ski les nôtres compile inglin srec 
 est un petit peu long quand j'ai relu ce 
 nom mais le rythme s'est mis à jour 
 oui mais voilà il s'est mis à jour à 
 l'année ce qui se passe en dessous 
 puisqu'en fait il y est affiché et là il 
 est en train de nous faire un console 
 log à l'infini parce qu'en fait le con 
 ponente là y'a rien qui est qui et 
 cloisonnée en a rien a mis dans des 
 fonctions on n'a rien mis dans ce que je 
 vais vous montrer après c'est à dire 
 dans un news effect c'est à dire que là 
 il y à l'infini il lance le console ou 
 consoloc ont sur leur sol 
 donc c'est pas du tout une bonne 
 pratique de laisser en quelque sorte des 
 fonctionnalités comme ça à l'air libre 
 il faut jamais faire ça dans un 
 composant ce sont vous devrez rapidement 
 en termes de performances ce que ça ce 
 que ça engendre tout au long terme de 
 network 
 là on voit que là il est en train de 
 faire un 
 une requête à l'apei en permanence 
 quasiment plusieurs par seconde et on 
 est déjà dit mille eric ouest depuis que 
 j'ai enregistré donc là en terme de 
 performances des amis devinez quoi 
 c'est catastrophique voilà complètement 
 catastrophique donc il ne faut jamais 
 faire ça il faut grâce aux houches 
 avant il y avait une méthode qui 
 s'appelait haendel mount crois je sais 
 même plus comment s'appelait saison 5 je 
 vous le dis devant vous allez sûrement 
 trouvé s'assure du bon code aux 
 composantes wilmotte & company en moins 
 de femmes bien plus il y avait plein de 
 trucs comme ça c'était un bordel 
 maintenant si on veut cloisonné un petit 
 peu tout ça si on veut faire en sorte 
 que la performance soit bonne eh bien il 
 faut mettre tout ça dans un news effect 
 tout simplement 
 retenez juste ça regardez on va faire un 
 news effect donc c'est encore un look 
 c'est encore dur et actes moderne et on 
 va se mettre tous à l'intérieur peuvent 
 peuvent pas on se met en sommeil là 
 dedans oui y avait fait qu'il ne connaît 
 pas donc là haut pareil on lui dit je 
 veux que tu me que tu m'appelles de cook 
 muse effect donc tout comme la honda 
 beyou state virgule news effect 2 réac 
 de la bibliothèque reste 
 ok ça veut dire quoi sert que là on 
 contient tout ça là dedans un youssef 
 secte 
 alors pour l'instant s'il enregistre 
 savent rien faire de très différent 
 parce qu'en réalité en train de faire du 
 conflit new york la page avait 
 complètement buggé on a fait dix mille 
 roquettes 
 je me demande si on va la faire exploser 
 maintenant et la regarder en termes de 
 performances eh bien on continue on 
 continue de faire des requêtes 
 sherbrooke c'est quand même moins rapide 
 avec lui est fait 
 bon le rocket continuer de monter à bord 
 deux façons de façon exponentielle 
 bon c'est n'importe quoi pourquoi parce 
 que le musée fait qu'en fait il est pas 
 complet il faut savoir que lui avait 
 faite à la fin la fin des crochets il 
 faut mettre une virgule d'accord et on 
 met des crochets voilà à la fin de la 
 cola et en faisant ça en faisant ça est 
 bien le lieu des faits qui se joue 
 qu'une seule fois ça ça veut dire en 
 fait tu quand ton composante est mis en 
 place tu dis tout ce qui est à 
 l'intérieur 
 et tu le joues éventuellement et 
 derrière tu terme est urgent ou 
 uniquement ce truc là 
 soyouz est factuel le rejoue uniquement 
 que si là dedans il y à un événement qui 
 a bougé 
 si par exemple là dedans on mettait data 
 faut dire qu'à chaque fois que la date a 
 semé à jour tu mourras joue ça donc là 
 on sera encore d'une boucle infinie 
 on va pas lui dire comme ça mais 
 toujours quelques la regarde et 
 j'enregistre et là c'est à dire qu'il va 
 jouer ça une fois il valait fait-il 
 a-data une fois il va mettre en place le 
 7 date à et à prix va s'arrêter parce 
 que il aura rien dans le colback ce 
 qu'on appelle là le colback n'y aura 
 aucune raison pour lui de revenir sur sa 
 bombe pour l'instant vous c'est un peu 
 le bordel vous inquiétez pas on va 
 organiser à plumes et autres codes c'est 
 pour essayer de vous expliquer donc 
 atteint déjà utilisé la page si elle le 
 veut bien 
 dans le bain jeu manceau n'a pas tout 
 fait péter le proxy alors j'ai dû 
 recharger la page parce que tout avait 
 pété donc rage recharges pas de souci on 
 à rogers ont fait une page et là on voit 
 bien que les yeux effect avec un call 
 back la rue mais rien d'un call back se 
 dire qu'il ne saurons jamais pourquoi 
 c'est important parce que là on le voit 
 on voit que ça c'est notre notre 
 consoloc de coach luigi s14 donc c'est 
 lui là il a trouvé un aurait 2 0 et 
 pourquoi il a fait ça mais parce que le 
 lieu des faits qui s'élançait les 
 parties fait chez la data 
 jusque là il a attendu la promesse etc 
 mais il a continué de pendant que est 
 allé chercher ça pendant qu'ils 
 mettaient en place le reste point 
 d'atteindre dans data est bien là aussi 
 il a aussi lu ça et donc la data n'a pas 
 eu le temps de se mettre à l'intérieur 
 que lui il avait déjà lu le console 
 logue qui est donc affiché ici comme un 
 noeud ravey depuis ce comme l'indiquent 
 là c'était un vrai vide voilà tout 
 simplement 
 en revanche il n'a pas eu le temps le 
 consoloc de nous afficher sa mais la 
 data a bien été mise 
 on peut aller voir dans components si on 
 va tout en bas d'un quiz voilà on voit 
 là le states will hayes un tableau eh 
 bien il ya sûrement les deux cent 
 cinquante pays qui nous attendent 
 voilà on a donc tout notre data qui est 
 stocké d'un data alors on peut pas 
 l'afficher visuellement on pas 
 s'afficher en or est comme ça 
 visuellement que vous montrerai comme 
 l'a fait à l'heure avec la variable 
 entre crochets par exemple la science et 
 ça je suis même pas sûr que sa fille sur 
 un truc non ça fait tout péter on ne 
 peut pas vraiment pas s'afficher 
 l'aurait ce qu'on pourrait faire pour 
 s'afficher en or et en javascript java 
 script de classiques je pense que vous 
 le savez ce serait éventuellement de 
 faire 1 1 ap 
 pourquoi pas donc ce qu'on va se faire 
 d'abord c'est que là non on va se mettre 
 l'enlever des parentés noël ses 
 meilleures pratiques ont pris comme ça 
 on va lui dire points kung fu et donc ça 
 c'est important pour le css comme ça 
 tous comme à l'intérieur 
 c'est l'élément supérieur c'est lui qui 
 englobe qui englobe tout eh bien on va 
 lui dire map mois data donc comment 
 est-ce qu'on s'y prendrait on dirait qu 
 elle on va l'appeler countries nist 
 sexuelle et à l'intérieur pour mapei 
 comment est-ce qu'on s'y prend bien 
 regarder on peut faire du javascript à 
 même à même le js x sert que l'interdît 
 avec 6 qu'on lui data point map donc map 
 moi tout ce que tu as dans cet euro 
 chaque élément de cette heure et devient 
 un quiz un country fin country au au 
 singulier 
 donc voilà si vous connaissez vous si 
 vous connaissez pas les marocaines je 
 vous invite à réviser votre java ce qui 
 est assez important et on n'a qu'à dire 
 affichez new country point name tant 
 qu'à faire il est pas d'accord avec quoi 
 oui ce que la gemmi il faut jamais 
 mettre d'accolades après la flèche quand 
 on ferme appelez moi je serai que j'ai 
 tendance à le faire assez souvent cette 
 erreur paf 
 voilà on fait comme ça il me saoule un 
 country 
 il me saoule pourquoi il me sourit 
 [Musique] 
 contrit points ne me connaît pas à mon 
 avis ce qui est pas d'élément supérieur 
 donc on va faire des lits donc on va 
 lister donc tous nos éléments de la base 
 au sommet que j'ai un petit bout et 
 mettre des balises hop hop comme ceci la 
 voilà c'est pas souligner c'est bien on 
 est mieux donc on va faire un match ou 
 simplement de notre heureux de donc 
 chaque élément sera country point m et 
 voilà on vient de s'afficher les amis 
 tous les éléments tous les pays les deux 
 cent cinquante pays tout simplement 
 voilà la méthode simple pour faire un 
 petit une petite rockette un appétit on 
 peut selon le res consoglobe il sert pas 
 à grand chose 
 on se fait notre petite roquette ont la 
 stocke dans notre state 
 on fait donc notre data est derrière 
 monsieur isla fisher et actes c'est pas 
 magnifique y regarder on peut 
 directement incluant moyennant des 
 accolades là on peut inclure du 
 javascript directement là comme ça à 
 l'intérieur et ça vous allez voir que 
 c'est hyper utile ex hyper pratique on 
 va le faire quand même pas mal de fois 
 là jusqu'à la fin du projet et c'est 
 quelque chose de deux génial alors 
 maintenant ce qu'on va vouloir faire 
 c'est au lieu de se donner le 
 comportement de nos cartes dans 
 sous-composantes countries ce qu'on va 
 faire c'est qu'on va se créer un conte 
 ponote donc card qui va nous afficher le 
 comportement qu'on vaut donc le nom du 
 pays sa capitale sa population donc 
 comme je vous l'avais montré ici là sur 
 ce petit cette petite image on account 
 louise et derrière il ya encore un 
 composantes en dessous qui sera card et 
 donc carte vous voyez bien avec la 
 flèche là ça montre qu'on peut passer 
 les données de haute en bas 
 le compo nantes le plus haut peut donner 
 c'est donner aux comptes entre le plus 
 bas à la verse card ne pourra pas donner 
 c'est donner à countries donc il faut 
 bien que le fait ch il se fasse au 
 niveau de countries donc on va voir ça 
 de suite et on va se créer ce composant 
 card 
 donc on met garde point js ont semé 1er 
 essai on va dire là on va dire card 
 voilà ce qu'on peut d'ailleurs on voit 
 il renvoie card et donc qu'est ce qu'on 
 va faire au niveau de country ce pur 
 pour cela plaît bien là pour le dire 
 qu'on envoie l'image un chouette je suis 
 dire on a pour chaque élément pour 
 chaque élément que l'on map 
 tu va m'appeler le composant card hop on 
 fait comme ceux-ci mince jacoby le tout 
 un port décidément hop il est là voilà 
 faut toujours bien sûr qu'il soit appelé 
 là haut up on enregistre et là qu'est ce 
 qui va se passer 
 eh bien il le map simplement exécuter ce 
 qu'on lui dit de faire c'est-à-dire 
 d'afficher le composantes card qu'est-ce 
 qui contient se comprend dans le carnet 
 contient tout bêtement le mot card 
 donc il va nous afficher 250 x card ou 
 et vous voyez quand même qu'on peut 
 après derrière ça lui donnait le 
 comportement que l'on veut mais nous on 
 veut pas qu'ils jouent car nous on veut 
 qu'ils qui respecte une certaine logique 
 c'est à dire qu'ils nous affiche qui 
 nous affiche de les données qu'on va lui 
 passer donc comment est-ce qu'on s'y 
 prend pour lui passer des données en 
 react pour passer des données un groupe 
 aux notes bien tout simplement on va lui 
 dire on va lui dire à carnon va lui 
 passer son appel une box donc la prop 
 c'est quoi on va l'appeler country et ça 
 contient country donc le pays map est au 
 singulier qui est là et bien il répond 
 au nom de country dans le composantes 
 car dans le lit ça c'est selon l' onu 
 transmet la valeur toujours en 
 javascript la valeur à droite transmet 
 sa valeur à gauche donc là ce qu'on 
 vient de faire c'est qu'on vient de 
 créer une propriétaire convient 
 d'envoyer les données de country on 
 vient de les envoyer à la casse 
 regardez on va j'enregistre on va dans 
 card est donc là comment est-ce qu'on 
 pourrait vérifier ce qui a été passée 
 bien regarder on l'appelle props c'est 
 comme ça qu'on fait en ré actes on a 
 aussi pu l'appeler juste pour info pour 
 vous dire que ça marche on aurait pu 
 l'appeler country comme ceci mais moi je 
 vais vous montrer un truc général c'est 
 propre donc là si on fait country les 
 dates à son passé et si on fait 
 également props et bien qu est ce que ça 
 contient bien vérifié on va faire props 
 on va faire log de props alors qu'est ce 
 que c'est les props et donc là j'ai 
 enregistré l'envoi dans console log oui 
 il nous dit un autre truc intéressant là 
 c est celle d'une liste sud avionique 
 kiprop 
 donc ça veut dire que chaque élément 
 chaque élément de combat aps en réactifs 
 aux lui donner une clé donc voyez là il 
 nous est dit nous dit là vous voyez il 
 ya un problème il faut vous mettiez une 
 clé unique et à chaque élément qu'on m'a 
 pas de souci on retourne ici et là on 
 lui dit qu' un plat qui est égal à 
 country point neil comme ça ils auront 
 chacun une plaie unique 
 donc c'est pas compliqué au final 
 réactive vous dis à chaque fois quand il 
 manque des trucs qui vous dit quoi faire 
 donc ok je l'enregistré logiquement 
 devrait pleuvoir ce message d'erreur il 
 a une en train de sortir on va recharger 
 la page voilà et la voyez ce qui s'est 
 passé on a donc on a lobé lac dans la 
 carte 
 les données qui sont passés en propre 
 donc on a toujours 250 cartes qui ont 
 été créés puisqu'on à 2 150 pays donc on 
 a deux cent cinquante log ici puisque 
 chaque carte est longue et une fois et 
 là on regarde on clique dessus et on 
 voit que le premier savent gagner ce 
 temps et qu'ensuite laon log quoi on la 
 grenade ont log 
 voilà des pays comme ça india donc on a 
 réussi par contre il faut entrer dans 
 country pour voir la valeur qu'il faut 
 faire un point country et donc ça me 
 permettre d'introduire une valeur femme 
 une notion plutôt notion de javascript 
 mais surtout utilisé dans react c'est à 
 dire le des structures et donc comment 
 ça marche des structures ring eh bien en 
 fait au lieu de dire qu'on va vouloir 
 props point country à chaque fois 
 partout 
 contrit point m props point country 
 point flag propres soins country pas 
 machin on va éviter d'écrire propre ça 
 c'est juste des petits raccourcis on va 
 se créer une variable on va faire 
 constante raccrocher country c'est égal 
 approche ça ça s'appelle les amis du des 
 structures inc on a des structures et 
 donc ça veut dire quoi 
 en gros les crochets signifie juste que 
 l'on fait ça mais voilà je vous le dis 
 parce que c'est une formation qui est le 
 bouc retrouver donc en gros propre ce 
 point country c'est gala country non pas 
 après on leur a juste à dire contre i.am 
 country point capital 
 voilà où que des choses comme ça donc je 
 reviens quand même sur le des structures 
 in voilà on met des crochets comme ça et 
 ça veut dire qu'on fait props points ce 
 qui est entre crochets comme ça donc 
 matin autres variables country est bien 
 le bon là voilà comme ceux ci et vous 
 allez voir que la magie d'internet fait 
 que la voilà on est directement sur 
 chaque pays on est dans la capitale 
 astana kazakhstan machin chouette 
 voilà on a réussi à se passer 
 les données de chaque carte 
 individuellement et bien donc maintenant 
 on a juste à faire du rendu juste entre 
 guillemets mais bon c'est une question 
 d'habitude après c'est assez facile à 
 faire 
 c'est à dire en se baladant le return et 
 on dit qu'on fait des lits avec la 
 classe card donc en premier on va se 
 mettre une image c'est l'image du 
 drapeau 
 donc comment on fait pour importer une 
 image depuis notre nos données ont fait 
 country point flag non classés 
 conscience est propre ce point country 
 poi poi flag sauf que l'orne a 
 déstructuré avant donc maintenant on a 
 juste à écrire country on n'a plus 
 besoin de rappeler l'âpre obs anhalt 
 on le voit quelle jusqu'à dire que c'est 
 flag ça c'est pour rien en voyant ou si 
 jamais elles s'affichent pas l'image 
 ensuite on va mettre data containers 
 donc qu'est ce que ça contient la date a 
 donc au début il ya un drapeau et 
 apprécie enfin over il ya éventuellement 
 des données sur le pays donc que moi 
 j'ai listé d'endémie ont fait country 
 points mais on a tout d'abord le nom du 
 pays hop là je vais multiplier comme ça 
 ensuite on a la capitale et ensuite on à 
 la population paf 
 voilà hélas à tous nous lis tu es là 
 visuellement ça va de liste et chaque 
 truc voit la mort des drapeaux sont très 
 heureux au phare mais du steel wheels on 
 allègue l'afghanistan paf paf cagoule la 
 population la voyez que la population 
 n'est pas lé pas mes gars bien présente 
 et donc s'en va seul arrangé d'ailleurs 
 au début j'avais écrit dans mon exemple 
 j'avais mis pop points et après le 
 chiffre de la population alors on peut 
 faire comme ça on peut tout à fait 
 concat aînés c'est à dire on écrit ce 
 qu'on veut puis derrière une valeur 
 dynamique entre crochets ça c'est dur et 
 actes voyez la présentation un peu notre 
 carte là elle est finie et c'est 
 magnifique monts du forez on qu'on 
 s'occupe du du séparateur de milliers ça 
 ça va être tranquille on va le faire 
 tranquillement fin va tranquillement 
 facilement plus tôt et donc là ce que 
 j'aimerais faire déjà c'est mettre un 
 petit style histoire que nos cartes et 
 ressemble à quelque chose parce que moi 
 ce que je veux c'est que ces 
 informations là en fait elle soit sur le 
 drapeau donc en fait on va y mettre un 
 absolu et on va les mettre sur le 
 drapeau en opacité 0 et quand on va sur 
 volet clover et bien le repas cité maman 
 témoin peut-être que c'est un peu flou 
 la nouvelle je vous montrais quand 
 comment on va procéder 
 on se met dans composantes fort niveau 
 du style on va dire card point css là le 
 jeu koh phi lippe tout ce qui est soit 
 mon support je vous invite à faire de 
 même 
 donc juste pour savoir pour vous 
 expliquer y'a pas grand chose au niveau 
 du style qui est qui est compliqué 
 vraiment à comprendre c'est comment j'ai 
 mis des effets de over des effets de 
 skate canton quand on survole la carte 
 elle joue un peu avec un index pour 
 passer devant tout le monde et il ya un 
 effet d'apparition également voilà sur 
 le scale y ait en fait ça se sache se 
 déploie un petit peu moins ça c'est 
 vraiment du css je vais pas m'attarder 
 dessus 
 donc voilà on se met là et le 
 composantes il s'appelle au flop il 
 s'appelle card 
 j'enregistre la nôtre ça fait voilà là 
 on a tous les pays vont ils sont 
 représentés bizarrement on va arranger 
 ça émouvant j'ai ça en suivant tous cas 
 sinon c'est trop moche 
 et là vous voyez bon déjà qu'on a un 
 début c'est à dire que les deux éléments 
 sont l'un sur l'autre 
 l'autre ils en ont pas citer 0 quand on 
 survole hop il apparaît afghanistan 
 kaboul ap un type antarctique à bahreïn 
 et voilà donc voilà on a réussi à ses 
 fichiers tous les pays bon j'avoue que 
 le style il est absolument dégueulasse 
 donc on va enchaîner et on va faire le 
 style de countries donc tirer countries 
 points sss et donc contre il paraît que 
 je copie alors les éléments peuple voilà 
 comment être comme ça qu'est ce qui est 
 intéressant 
 qu'est ce qui est intéressant là dedans 
 il est intéressant lala countries liste 
 donc c'est là qu'on fait notre notre lit 
 j'ai moi j'ai juste mis display flex et 
 flex wrap wrap cirque les drapeaux en 
 fait ils vont ils vont s'organiser les 
 barjots enregistré leur montrer ce que 
 ça fait en fait le flex drap si vous 
 connaissez pas hop ans mais là on vous 
 prend et on importe on importe countries 
 ok donc la mort lente ou le style est 
 terminée le style notre projet en tout 
 cas il est comme ci comme ça et voilà on 
 a tous nos drapeaux ils sont un peu 
 mieux présenter et oui le flex frappe ça 
 fait que si un petit peu de place hop 
 il va venir se mettre si un peu de place 
 il vient se mettre les voiles ainsi de 
 suite jusqu'à moi que voilà il ya une 
 horrible largeur maximale de 3200 et 
 quelques 
 donc voilà ça fait comme ça ok donc nos 
 pays sont bien représentées on les a 
 tous qui c'était et vous voyez donc 
 voilà j'espère que ça conclut le 
 principe puisque puisqu'on va dire que 
 ça c'est vraiment des choses les plus 
 importantes de ré accélèrent de de 
 refaire des composants dans des 
 composants pour ensuite structuré pour 
 mettre vraiment des pleins de petits 
 faons découper le code en plein de 
 petites parties pour avoir un code 
 lisible un col facile à maintenir ce que 
 par exemple maintenant ce qu'on va 
 vouloir faire c'est ajouter une fonction 
 pour faire un séparateur de milliers 
 mais la fonction pour séparateur de 
 millions n'avaient pas de rencontre ils 
 ont lavé dans card est donc tout ce qui 
 concernera notre carte 
 ça sera connaît ici toute la logique 
 javascript si on remonte beaucoup ce 
 sera ici donc tout tout sera mieux 
 partitionner en quelque sorte voyez on 
 se récupère les données et après lens 
 mais toute la logique est comme ça ça 
 fait des composants moins volumineuse 
 que ça au final n'aurait plus 
 humainement countries 
 serait rendu le composant le plus gros 
 moins lisible oui c'est pour ça qu'on 
 fait ça donc maintenant séparateur de 
 big n 
 alors eh bien d'abord on déclare les 
 variables éventuellement les boucles et 
 new state chose comme ça ensuite on 
 déclare les fonctions et après on 
 déclare le gie et 6 donc maintenant on 
 va se faire une fonction qui va 
 s'appeler number format thing je propose 
 uniformatic de leurs formes at c'est 
 mieux s'aimer forme at on lui passe en 
 paramètre le x d'accord x à être le 
 nombre qui va recevoir et bien il va 
 faire un séparateur d'humilier et là je 
 vais copier la formule vous l'avez donc 
 d'un projet je terminais en bas de la 
 vidéo si vous voulez parce que ils 
 trouvent que c'est une règle ex et voilà 
 j'ai peur de faire des erreurs en 
 confiance a forcément dû commettre a dit 
 quoi sony x le nombre x qu'on va te 
 passer donc country population c'est ça 
 le clic ce tu vas nous le mettre en tout 
 string d'abord ce no string et après on 
 fait un replay 10 et c'est à dire que la 
 banque procède cette règle ex ça veut 
 dire que tous les trois tous les trois 
 caractères je nous mets quoi tu nous 
 mets un espace vide et par sanctionner 
 milliard gül et bien il aurait mis des 
 virgules 
 tous les trois caractères donc voilà 
 c'est ce que ça veut dire la rague ex je 
 les trouvais sur sa cover flow 
 moi je ne suis pas très bon en rayons x 
 moi je sais mon pas les faire par contre 
 à chaque fois que vous cherchez quelque 
 chose vous trouver sur internet des 
 bonnes formules des gens qui ont passé 
 des heures ou au moins en quelques 
 minutes donc vous pouvez prendre leur 
 travail et les remercier voilà c'est ce 
 que je vais donc hop ans mais là et 
 regardez là on préfère des javascript 
 comme on veut et bien là on va lui dire 
 qu'on regarde sur j'appelle la fonction 
 number formate et number formaté prend 
 un paramètre elle prend un chiffre en 
 paramètre est bien d'apprendre country 
 population à part à m j'enregistre et 
 regarder magnifique d'autres composantes 
 là il est très très beau je trouve et 
 qu'est-ce qui se passe voilà on a un 
 séparateur de miel vous possédez vous 
 mettez virgule ne pas mettre des points 
 entre les milliers ça marche aussi 
 donc voilà on a réussi déjà le plus gros 
 du projet en tout cas le plus essentiel 
 les choses qu'on peut retrouver sur 
 plein de projets réac qu'on fait est 
 qu'on refait donc bon c'est pas facile 
 au début c'est vraiment la toute 
 première fois hier et actes je comprends 
 que soit pas facile 
 mais après quelques semaines c'est 
 facile donc voilà qu'est ce qu'il vous 
 reste à faire il reste à faire du triage 
 un petit peu là affiché plus ou moins 
 deux pays 
 faire des radios et trier les pays par 
 ordre de population c'est comme ça que 
 j'ai écrit à la basse et du plus peuplé 
 au moins peuplées parce que là c'est pas 
 trés peut-être pas très pertinent comme 
 thriller oui on a des pays avec treize 
 mille habitants ouais très bien je ne 
 méprise pas du tout mais c'est qu'à 
 mieux d'avoir tous les plus grands pays 
 donc voilà on va faire ça après bien on 
 va d'abord se trier les pays par ordre 
 de population alors comment on va faire 
 pour trait des pays part de population 
 est bien inscrit une nouvelle variable 
 donc là on a tout notre data et bien au 
 rescrit une variable pour dire qu'on 
 aura tout notre data trier donc on va 
 l'appeler la sortie data donc on va 
 trier de du plus peuplé au moins 
 peuplées et donc on va mettre sept 
 sorties d'attaqué que c'est comme ça qu 
 enfin général donc pour agir dessus il 
 faudra faire cette sortie de là tu as 
 donc cette date a on va faire news state 
 et de base de ce sera 2 heures et 1 
 heure évident pour l'instant donc là on 
 va se récupérer là on a un respect de 
 l'ata qui est mis en place ici 
 ok donc en dessous on va faire quoi 
 mauresca une fonction qu'on storti de 
 country donc on va se trier les pays 
 opte est donc cette fonction donc dans 
 le lieu effect qui sera relancé 
 quand on aura la datar éventuellement eh 
 bien il va falloir tout d'abord prendre 
 cet heureux et pour faire produire la 
 fonction sortant javascript il faut tout 
 d'abord transformé notre leur et data en 
 objet donc on va faire constat comment 
 on va l'appeler objets country hodge 
 voilà country objets et c'est égal à 
 quoi ce qu'elle a object point qu'ils 
 donc de data donc on se récupère la 
 taille derrière ans yeux map en y 
 et data de i comme ceux ci on écrit 
 hélas convient de faire en fait c'est 
 quand même transformé notre heureux en 
 d'objets à la même chose à l'intérieur 
 mais maintenant on va pouvoir y 
 appliquer les méthodes sorte sinon on 
 peut pas faire en sorte ce directement 
 sur sa faim croyez moi j'ai déjà essayé 
 c'est pour ça que vous dis donc ok on 
 part sur ça maintenant on va dire qu'on 
 est donc sortie d' e rey qui sortit doré 
 dans ses bons jours je lis ça 
 correspondait avec lui rien donc 
 construit devrez et là on va appliquer 
 notre sortent donc on va faire en sorte 
 qu'on stockera le résultat dans cette 
 variable là d'accord donc ça va être 
 quoi ça va être construit object on va 
 lui dire quoi pour quand on fait un 
 sorte la plage oublié on va lui dire 
 sorte à b en paramètres et nous ce qu'on 
 veut leur faire c'est un tri sur la 
 population et regarder comment ça se 
 fait avec les méthodes modernes pas 
 javascript on dit juste return b point 
 population - à point population ça veut 
 dire que par rapport à la population 
 enfin tri des croissants c'est du plus 
 grand au plus petit ce que sinon ça ne 
 fait apte pour population - bons plans 
 population serait fait un tri croissant 
 est donc là les amis notre sortie des 
 heureux logiquement il contient il 
 contient les éléments ranger vérifions 
 vérifiant ou pas faut pas aller plus 
 loin si jamais ça ne marche pas déjà 
 vous voyez donc il va quand même falloir 
 qu'on se joue la fonction se mettre là 
 on va faire sortir heureux prof 
 bref hockey essayons gfr recharger la 
 page un petit peu il me dit quoi sortie 
 de reais note define dans ses sorties de 
 country par dans la fonction c'est pour 
 ça que je suis un peu embrouillé clés 
 non la norme allemande voit un petit peu 
 mais s'en sortir res ayons donc voyons 
 voir ce qui nous a mis donc notre log 
 ligne 20 21 il n'y a rien pourquoi y'a 
 rien parce qu'on lui dit de javascript 
 house alex et asynchrone donc lui 
 paf il ans à milan ça il fait son zen 
 mais elle n'a pas le temps de mettre la 
 date à la ici l'apple temps de la ranger 
 dans data que nous le demande 
 de trier la date à la honte du monde 
 déjà on prend date un an la tri donc ça 
 va pas du tout il appelant à faire donc 
 ce qu'il faut faire c'est que là on veut 
 utiliser ce call back 
 si on met lui décroché vite il a plus 
 d'effet que se joue qu'une seule fois en 
 revanche sénateur a décroché évident on 
 y met ce qu'on veut par exemple on y met 
 le terme data ça signifie quoi 
 ça signifie qu'à chaque fois que data va 
 évoluer et bien le milieu effect sera 
 rejouée grâce aux call back ici voilà 
 voilà la force du call back j'enregistre 
 est donc maintenant il va certes joué 
 d'abord son or est vide mais ensuite 
 voilà là il est plus vide alors là on a 
 un gros problème voyez ça rejoue à 
 l'infini pourquoi est-ce que ça rejoint 
 à l'infini mais parce que à chaque fois 
 date a évolué ok on relance une muse 
 effect et à chaque fois que l'on relance 
 news effect paf ont fait évoluer data 
 ont relâché les effects paf ont fait 
 évoluer d'état donc là on a un souci 
 le souci c'est que faut pas se relancer 
 le fait en permanence mais une fois 
 qu'on a là des données les pays ça 
 change pas à la seconde 
 donc il ya plus de 20 après d'aller 
 rechercher en permanence cette date à la 
 d'accord or comment est ce qu'on peut 
 faire pour pour pour ne jouer qu'une 
 seule fois ce truc là 
 et bien tout simplement on va interroger 
 onze inscrits en fait une sorte de ifs 
 enfin même complètement un if on va dire 
 si tu n'as pas encore joué cette 
 fonction joue là et après à la fin on la 
 passera sur falls et donc ensuite quand 
 on relancera avant d'aller voir c'est 
 vrai que j'explique trop ça sera 
 beaucoup plus parlant en images regardez 
 on va faire construire once et cette 
 plaie once d'or se dire joue une seule 
 fois on va mettre news state et de 
 bacilly sur true d'accord on met 
 toujours la valeur de base la côte aux 
 familles aux states of quand on a des 
 origines m'ont effectivement c'est 
 évident cercle ans vient de créer un 
 boulet un qui est sur true games et bien 
 qu'est ce qu'on va faire maintenant on 
 va se mettre à ce niveau là on lit à vif 
 pelé watts donc est-ce que si pelé watts 
 c'est vrai oui eh bien tu me joue tu vas 
 me chercher 
 toute la data et tu lèves tu me fais un 
 cette date ait eu ma thune à stoke 
 là-dedans d'accord sauf qu'une fois que 
 tu l'as fait ça une fois tu as plus à le 
 refaire donc regarder hop on met des 
 accolades on pourra mettre plusieurs 
 lignes plutôt comme ça je crois voilà et 
 là on lui dit cette plaie once falls et 
 de cette façon là il va la jouer une 
 fois tac tac tac tac des rats chercher 
 la data et la toque ici et après c'est 
 fini on arrête les appels intempestifs à 
 l'apei des appels en permanence alors 
 des jeux recharge la page 
 la voilà comme je dis ça bloque toujours 
 deux fois 
 jf donc le premier il fait il n'a rien 
 dans leur et la data n'est pas encore 
 arrivé par contre une fois que la la 
 data elle est arrivée 
 et bien ici là on relance le venue 
 effect est donc en relançant lieu effect 
 on se relance cette fonction est là la 
 fonction elle peut avoir lieu 
 on log et regarder comment ils sont 
 rangés les pays 
 ils sont rangés china india united 
 states indonesia du plus peuplé au moins 
 peuplé donc on a réussi à faire ça 
 maintenant on peut de notre sortie de 
 dirt et éventuellement déjà le passé le 
 passé ici la sortie de data ça serait 
 déjà un bon début 
 donc on se met comme ça et on dit cette 
 sortie d' data et on lui dit tu prends 
 la valeur de sortie aurait encore besoin 
 ça notre sortie de data là ce sera les 
 pays ranger dans le bon ordre 
 maintenant on peut même avoir lu on peut 
 lui demander de remettre qu' un certain 
 nombre on n'a qu'à dire de base de 
 bastien va faire sortir heureux problème 
 et de base tu vas me remettre 30 
 voilà comme ça on va pas non plus se 
 recharger la page au début et après on 
 va mettre éventuellement une poutre en 
 jeu pour mettre le nom de corne 
 ok on enregistre sa 
 hop là allons vérifier 
 ah oui du coup j'ai enlevé mon joueur de 
 mon blog mais on n'a pas besoin de faire 
 de log enfin de là je voudrais faire 
 l'homme mais regardez certaines 
 composantes 
 si on va dans composantes et qu'on se 
 balade un peu éventuellement nos 
 countries on voit qu'il ya deux steaks 
 country le deuxième c'est celui qui est 
 trié regardez on à beijing et new delhi 
 en c 2 secondes pour la capitale et on 
 n'a que trente pays donc ça commence à 
 zéro donc là il ya 29 ça fait trente 
 voyez on a les 30 pays les plus peuplés 
 du monde uniquement 
 donc vous voyez que ça a marché déjà par 
 contre c'est pas affiché à l'écran 
 pourquoi c'est pas affiché à l'écran est 
 bien parce que je lâche entrevoir que ça 
 c'est souligner parce qu'il est appelé 
 one choqués ont valeur ajoutée planes 
 même si c'est pas hyper utile on y va 
 pas nous embêter hockey est donc là ce 
 qui nous intéresse c'est que là en fait 
 on map la data 
 nous non on va pas faire ça on va map 
 est sortie d' data et c'est comme ça 
 qu'on n'aura que les 30 pays hop 
 j'enregistre et voilà les amis on a les 
 30 pays les plus peuplés du monde en 
 temps comme ça et voilà leur population 
 et c'est ok ça c'est bien mais bon si on 
 veut faire des tris ils ont étrillé par 
 continent si on veut en mettre plus 
 - eh bien c'est pas très dynamique tout 
 ça donc maintenant qu'est ce qu'on va 
 faire 
 eh bien on va se rajouter un petit peu 
 de recherche 
 alors pour mettre un nombre de pays 
 dynamique dans affiché à l'écran basquin 
 arrange le risque est surtout une valeur 
 qui sera stocké donc on va dire qu'on se 
 range value et cette rage value voilà on 
 va faire comme ceci est illégal 
 yooz state un câble de base dans le de 
 base ont affiché 40 pays voilà comme ça 
 donc ok on à rentrer value qui vaut 40 
 donc si on voulait déjà affiché notre 
 tableau et qu'il est toujours la valeur 
 de 
 d'où cette affiche au drapeau là est 
 bien ici ou d'avoir 30 des gens munis de 
 leurs dynamiques ont mes fringues value 
 déjà de base il a nous afficher 30 toute 
 logique 
 voilà une d'avoir tranquille je sais pas 
 on n'est pas compté mais bon ça doit 
 être bon attendez j'ai mis 30 ou 40 ans 
 car en toi j'ai mis 40 tout à l'heure à 
 30 ça s'arrêtait à l'espagne donc on est 
 bien on est bien on est bon il ya dix 
 pays qui se sont rajoutés donc voilà 
 c'est cool on a on a donc la valeur 
 qu'il peut évoluer dynamiquement en 
 faisant cette rente value cette 
 vaillance adverline volera donc ça fera 
 évoluer le nombre de pays affiché est 
 donc à chaque fois que rand value va 
 évoluer 
 il faudra qu'on se relance au musée fait 
 acter bien comment on fait on lui dit là 
 on lui dit rendre value à chaque fois 
 qu'il évolue lui tu me la suis effect 
 tout comme data voyait on le paye ne 
 mise que si nous y souligne voyez là si 
 on ne met pas et souligne pour ok allez 
 on va pas le vexer parce 
 qu'effectivement ça pas grand chose de 
 relance et louise effect seaplane sipa / 
 falls mais bon au moins comme ça c'est 
 fait donc maintenant on va se créer 
 cette input le fameux c'est une poutre 
 ranch qui va nous permettre de faire ça 
 donc on se met là et on veut dire sorte 
 tirer containers donc ça c'est le 
 conteneur on va mettre les choses on va 
 se créer un impôt de type rente gens 
 qu'on fait input de poing rendent je 
 voyais ça craint du boudin qui prend 
 automatiquement le nez mais l'idée on 
 s'en fout faut juste lui dire orange en 
 valeur minh tu peux faire un un pays en 
 valeur max tu vas d'affiché 250 
 ok il peut aller de lalart regardez ce 
 que ça regardez comme quoi ça ressemble 
 comme deep ou trois ans si vous n'êtes 
 pas familier 
 voilà ça fait ça la championne barque 
 l'alleud la marge a pas très bien pris 
 bon je verrai ça après donc la voyons en 
 ligne putsch qui peut évoluer entre 0 et 
 250 mots là il se trouve qu'il n'est lié 
 à rien du tout c'est une poutre anges 
 donc comment est-ce qu'on pourrait lier 
 à quelque chose à des gens peu le maître 
 une valeur sa valeur de base ça value 
 c'est quoi et bien c'est rendre value 
 donc là de base on part sur 40 
 donc lui de base il affiche 40 mais 
 c'est pas ça qui va nous permettre de le 
 faire évoluer en même temps que la 
 veille le lin 9h40 haut débit de base 
 c'est pas ça qui va nous permettre de le 
 faire évoluer la semaine juste comme ça 
 pendant un petit moment plus voilà bon 
 c'est pas beaucoup mieux faire comme ça 
 voilà c'est pas ça qui va le faire 
 évoluer 
 enfin qui va nous faire évoluer la 
 recherche des plans plus live est bloqué 
 donc qu'est-ce qu'il faut qu'on fasse il 
 faut qu'on prenne en charge à chaque 
 fois qu'il fait un changement est bien 
 quand le ranch value il évolue nous faut 
 qu'on récupère la valeur du range en 
 fait regardez comment on fait ça dans 
 les actes on va lui dire unchanged donc 
 quand tu quand tu changes comme un rival 
 qui se noie on va dire en quelque sorte 
 en javascript classique on suit une 
 fonction fléchir en récupère die welt 
 pourquoi est-ce qu'on se récupère les 
 vannetais mais pour pouvoir avoir le hip 
 hop internet point value donc la valeur 
 que le ranger ans ferme et donc on va 
 faire cette rando value donc met en 
 place la valeur du ranch avec quoi avec 
 10 points target point value donc ça 
 veut dire quoi se dire que si on se met 
 sur 200 lui il va faire un cette frange 
 manu sur 200 et donc ici ron van où il 
 va passer à 200 et vu qu'à chaque fois 
 qu'on veut lui évolué on relance le tri 
 lui il va nous afficher 200 pays et 
 c'est donc là j'enregistre et on va 
 vérifier sans plus attendre 
 c'est bon j'ai enregistré leur charge au 
 casot regarder on réduit et ça réduit 
 voilà ça va très très vite ce que tous 
 les pays sont déjà pré chargés on 
 relance pas un fait chaque fois 
 voyez donc si on veut on peut se mettre 
 250 et voyez que là on a les pays les 
 moins peuplés du monde plutôt vers le 
 bas 
 french house and territories 140 
 habitants la magnifique jeu je peux me 
 tromper je me dois pour aux français 
 très bien monté et bien voilà on apprend 
 plein de choses en plus en regardant ce 
 truc là la réunion aussi considère que 
 c'est un pays très bien première 
 nouvelle donc fait donc voilà on apprend 
 que beaucoup de choses c'est bien on est 
 content 
 donc on a réussi à se faire b à faire 
 évoluer notre votre input maintenant 
 qu'est-ce qu'on va vouloir faire eh bien 
 on va vouloir faire selon les continents 
 alors pour créer le tri avec des inputs 
 radio je sais bien qu'on va pas ce kode5 
 input avec cinq labels 
 radio on va pas faire ça on va plutôt se 
 maps et rex créer une logique une fois 
 et puis cela ma paie donc regarder à 
 quoi ça va ressembler on va procéder 
 comme cela c'est à dire que là on va 
 dire en se faire d'abord ayew state pour 
 sélective de radio ça ce sera la radio 
 qui aurait été sélectionné 
 donc cette selected radio donc pas 
 simple le continent afrique à asia et 
 c'est bon ça en anglais 1 on est là pour 
 l'exemple vous inquiétez pas c'est que 
 sinon il aurait été plus pertinent de 
 médecins en français mais là c'est pas 
 très grave donc pour l'instant à dire 
 ses strings vide y'a rien qui est 
 sélectionné dans le radio ya aucune 
 radio qui sait quel de base d'accords et 
 maintenant on va dire qu'on est radio 
 dans toutes nos radios c'est quoi on 
 peut créer une variable à un mode 
 javascript un vraiment un classique on 
 est obligés de faire du youth texte à 
 chaque fois ça marche aussi 
 alors on veut juste énuméré un tableau 
 avec les cinq continents 
 les principaux on va dire donc africa 
 america asia europe et le dernier 
 océaniens ok donc nous maintenant on va 
 ma pcc différents noms pour en créer des 
 inputs vous allez voir à quoi ça 
 ressemble on va se placer après cet 
 hymne coutelas donc on va se mettre 
 comme ça à ce niveau là on va faire des 
 ul avec la classe même radio 
 venant d'ailleurs n'y a pas besoin de le 
 déclasser 88 chiens non je crois pas 
 qu'ils aient besoin de casting et on va 
 dire quoi mais regardez on va faire du 
 javascript on va dire radio point map 
 on va se battre et quaresma paix des 
 radios au singulier et donc là il faut 
 faire un return de notre de notre maps 
 et on va se faire un lit 
 vu qu'on fait un map avec réacteurs sont 
 une seigneurie dans les erreurs 
 on lui met une clé unique donc la clé au 
 mixer sera le nom de la radio 
 et voilà et on se crée et anime foot 
 donc deux types radio et il va quand 
 même falloir qu'il est né l'enfant s'en 
 fiche il falloir qu'ils aient une value 
 et de sa value ces radios donc regarder 
 déjà je pense que là on a un premier 
 visuel qui va pouvoir apparaître non 
 d'ailleurs y'a pas de bon là on a cinq 
 boutons radio qui sont apparus d'accord 
 school je les ai mis en flex en ce pays 
 se rendent donc ils se sont bien séparés 
 les uns des autres 
 par contre ils ont aucun label or 
 comment on fait pour projet de label 
 donc il faut un idée 
 notre radio c'est comme ça que ça marche 
 on lui met un idée est en dessous on se 
 fait un label et html fort donc c'est 
 pour ces pour l'idée on lui mais on dit 
 on une idée ces radios donc africa 
 america etc et donc qu'est ce qu'on 
 écrit dans la belle et bien écrit la 
 valeur de radio tension c'est hyper 
 simple on ajuste maps et on ajuste maps 
 et un tableau hyper simpliste inde avec 
 le terme donc on peut mettre que ça en 
 fait radio c c africamerica europe et c 
 est encore deux ans à en reliant les 
 labels l'a11 en sorte que l'aïd et lady 
 et html force sur les mêmes c'est à dire 
 qu'ils sont liés 
 donc même en cliquant sur le label 
 s'appliquera sur la case regarder 
 j'enregistre et la voilà la magie 
 d'internet on à africa america on peut 
 tous les cochers pour l'instant n'y a 
 pas vraiment de logique qui ont été mis 
 en prison peut pas voir les décrocher 
 les radios donc ça c'est un truc qu'on 
 va corriger mais en tout cas vous voyez 
 le principe on vient de ce côté on vient 
 juste de se bat p ça c'est du javascript 
 1 on a fait on a peu en html classique 
 vous auriez dû faire faire comme ça quoi 
 voyez enfin oui bon là ça part mal 
 présentés mais en faire cinq différents 
 là on n'a pas besoin de leur économie du 
 code qr en faisant ça on m'appelait les 
 éléments et c'est bon donc on lorgne une 
 value 
 on leur a mis la d'idées et il faut 
 éventuellement savoir dans quelles 
 circonstances 
 notre radio et checker ou pas donc on va 
 lui dire checked tué checker 
 si jamais radio il est égal à selected 
 radio d'accord pour l'instant c'est 
 l'équipe de radio il est vide d'accord 
 c'est ce paramètre qu'on a mis là il est 
 vide 
 donc pour l'instant rien et cochet donc 
 qu'est-ce qu'on va qu'est ce qu'on va 
 simplement se contenter de faire eh bien 
 on va changer selected radio au fur à 
 mesure que l'input est cochée tout 
 simplement 
 donc on veut dire quoi on your own 
 challenge si jamais on clique sur cette 
 input on se récupère l'événement et ont 
 fait un set 
 selected radio donc met en place le sait 
 qui de radio avec le hip - target moins 
 value donc on récupère soit afrique à 
 sion clique dessus en récupère soit 
 europe si on clique dessus et donc ça va 
 créer quoi ça va faire en sorte que ces 
 liquides radio een et africa par exemple 
 et si jamais c'est l'équipe de radio il 
 à africa alors cette condition est 
 remplie 
 alors il devient checker regarder on 
 peut on peut le vérifier 
 ok vérifions voilà là il n'a plus qu'un 
 seul qui ait sélectionné parmi tous 
 désignent pour nous c'est comme ça qu'on 
 fait en réalité pas besoin la procédure 
 orale faire broder scott et ça marche 
 très bien 
 donc juste pour vous montrer puisque 
 l'on est sûr qu on trees et qu'on a 
 regardé le state là ces oceania regarder 
 le state 
 là on est sur asia je clique europe 
 voyez là c'est comment ça évolue voilà 
 c'est comme ça qu'on fait évoluer le 
 state et d'ailleurs si on bouge ça voyez 
 que là aussi ça a évolué donc voilà 
 c'est comme ça qu'on puisse contrôler 
 aussi vous allez sur votre composantes 
 et vous regardez comment évoluent les 
 state avec les state à chaque fois et là 
 vous voyez prenez vraiment sur des 
 évolutions dynamique 
 donc ok c'est bien on arrive à stocker 
 la valeur qui est cochée par d'autres 
 utilisateurs 
 mais pour autant il ya pas de tri qui 
 s'effectue donc c'est à quel niveau à 
 votre avis comment faire le tri 
 bon et bien sûr j'attends une réponse 
 mais pas savoir répondre et à quel 
 niveau on va faire le tri bien c'est au 
 niveau du map tout simplement là avant 
 deux maps et qu'est-ce qu'on applique 
 pour faire un tri s'il reste un petit 
 peu javascript ce que je recommande 
 quand même du début qu'est-ce qu'on fait 
 avant deux maps et en faire un filtre on 
 va dire méthode filter 
 donc tu ne filtre annuellement chaque 
 country on dit country pour un région ça 
 c'est le coup triple région c'est le 
 continent si jamais ils includes 
 selected radio donc le bon on a vu ce 
 qu'il y avait dans ses lectures de radio 
 alors tu me lemay et et derrière on se 
 lance un map 
 voilà ça c'est un petit peu plus 
 complexe le bois je pense que c'est 
 quelque chose qui sont maîtrisées en 
 général donc hop normalement en faisant 
 ça 
 regardons ce qui se passe si on fait 
 america on a plus que des pays 
 américains 
 hop hop europe on peut en rajouter 
 on peut éventuellement en enlever voilà 
 on a ça je crois qu'il ya même pas en 
 océanie il faudra rajouter un peu sur de 
 l'océanie est quand même tout ça en 
 océanie ne s'acceptent pas très peuplée 
 donc voilà et donc là on peut absolument 
 trier tout ce qu'on veut avec la 
 vivacité le vivacité d'un d'une 
 bibliothèque javascript c'est à dire que 
 on ne demande rien aux serveurs on a 
 fait notre on a fait notre fait une 
 seule fois et après on se démerde c'est 
 nous qui quittent riom les données 
 qu'ils en tout selon ce que 
 l'utilisateur veut et donc on est sur un 
 site très très dynamique 
 49 des beats en algérie très bien je 
 suis très curieux donc je regarde 
 ok donc voilà on a réussi on a réussi à 
 se faire sa part contre white les radios 
 un petit défaut c'est que si jamais 
 l'utilisateur ne veut plus de radio il 
 me revenir à tous et bien il peut pas ne 
 peut pas parce qu'en radio on peut pas 
 quand on fait une chute boxe on peut 
 tout ou décocher mais là on peut pas 
 dans ce qu'on va faire c'est qu'on va 
 créer un bouton et vous allez voir avec 
 réac ce qu'on peut faire ça facilement 
 on va créer un bouton tout simplement 
 pour annuler 
 regardez on se place donc à la fin de 
 notre radio la tac tac tac ici à ce 
 niveau là 
 on veut faire une classe name dancehall 
 pour annuler et là on va dire quoi 
 on va tout simplement secret h5 où on va 
 dire à nu les recherches alors dans 
 quelqu'un est ce qu on veut qu'ils 
 apparaissent chaque la regarde et 
 j'enregistre l'agent registre il est 
 déjà là la salle d'accord est ce qu'on a 
 envie qu'ils apparaissent là non enfin 
 tant défaut je recharge la page voilà là 
 y'a rien qui est cochée elle en est sûre 
 le truc de mode est ce qu'on a envie 
 d'avoir un lieu recherché alors que si 
 je clique de suisse passe rien dont on a 
 envie que la numéro cherche il se 
 déclenche uniquement quand il existe une 
 série qui de radio et regarder mes amis 
 en direct comment ça marche on fait 
 selected radio donc la honte est si la 
 valeur et roux s'il ya quelque chose de 
 sexy de radio il faut savoir que il faut 
 savoir que des strings vide là c'est 
 qu'ils voient rien au niveau du trou 
 c'est puissant c'est qu'il faut pas trop 
 en tout cas et donc regarder on dit 
 selected radio et hop referme ici ça 
 veut dire quoi ça veut dire si jamais 
 celle écrite radio et sur true le et il 
 veut dire il inclut forcément tu 
 affiches 
 ça regarde et j'enregistre ça c'est des 
 choses qui après son hyper pratique 
 quand on le connaît des pages rapidement 
 et tout ça permet vraiment de faire une 
 super interface donc voir des jeux clic 
 et voilà il est passé sur true selected 
 radio puisqu'il contient asia là il 
 contient américains d'accor s'est tout 
 simplement comme ça que ça marche 
 et donc là si on veut 
 à lui la recherche comment on fait 
 comment on fait les amis et bien on se 
 met au niveau du h5n1 petit peu logique 
 on va dire si jamais on peut cliquer 
 dessus 
 mon ami le h5 qu'est ce que tu fais 
 fonction fléché paf paf on va dire cette 
 sélective radio et on se passe sur 
 guillemets du coup cette valeur là elle 
 ne sera partout pas trou donc ce hashtag 
 disparaîtra j'enregistre et en plus bon 
 ça en plus a nommé tracé l'équipe radio 
 sans lèvres à tous que tous les toutes 
 les radios accessoirement on refait on 
 est sûr africamerica hop on revient à 0 
 et voilà les amis nous avons réussi ce 
 projet bien il est temps de conclure 
 j'espère que vous avez réussi ce projet 
 n'est ce pas que c'était pas trop 
 compliqué pour vous alors comme je le 
 répéte et des dizaines et centaines de 
 fois peut-être dans cette vidéo ce qui 
 est important c'est d'être bon en 
 javascript en fait parce que plus vous 
 avez de bons javascript et plus 
 réactives va vous paraître facile voyez 
 faire des choses comme ça ou même créer 
 des fonctions comme celles ci ça si vous 
 êtes bon javascript et aucun souci donc 
 il faut savoir que en plus eu les 
 devants javascript vous arriverez vous à 
 une courbe de progression très rapide se 
 rend lui la survie js donc faut quand 
 même ne pas oublier que la base de la 
 base avant d'être spécialisé dans 
 quelque chose dans un framework ou quoi 
 avant et spécialisés la base de la basse 
 et de maîtriser c'est le vraiment 
 maîtriser javascript en tout cas si vous 
 êtes un développeur front tu es en 
 l'occurrence pouvait même être full 
 stack en javascript j'ai fait des vidéos 
 sur ça mais si vous voulez en tout cas 
 déjà être un développeur fronte qui 
 bosse avec des technologies modernes qui 
 fait des pages dynamiques comme celle ci 
 est bien il faut que vous ayez un bon 
 niveau en javascript et ensuite que vous 
 perfectionner sa en étant bon en react 
 alors vous ai montré beaucoup de choses 
 de réac mais vraiment pas tous vraiment 
 vraiment pas tous là on va dire que il 
 ya entre 20 % ce qu'on peut faire en 
 réalité peut-être 30% 
 il ya énormément de choses en règle 
 notamment un truc que j'adore mois qui 
 s'appelle redux mais bon ça vient 
 beaucoup plus tard on va pas se mentir 
 il faut déjà que vous comptiez vous un 
 deux trois projets vous voyez les 
 limites de react pour comprendre 
 pourquoi redux c'est extraordinaire 
 enfin extraordinaire j'exagérais 
 beaucoup gens qui aiment pas réduction 
 et moi j'adore ça 
 mais voilà en tout cas je vous ai 
 expliqué react avec des mots simples 
 avec par exemple il ya beaucoup 
 d'exemples on va dire que s'ils 
 voulaient reprendre des projets faire 
 des tris voilà faire des radios faire du 
 range afficher des données d'une api 
 avec axios faire des navigations vous 
 avez déjà tous ici j'ai déjà tout dans 
 ce projet faisait juste à picorer dedans 
 vous venez picorer certaines choses et 
 même si vous voulez faire du tri ça va 
 faire du tri c'est hyper important et 
 retenez juste cette méthode là et vous 
 permettra de trier n'importe quel 
 tableau en fait voilà j'ai trié 
 population mais j'aurais pu trier région 
 par d'infâmes éthique où j'aurais pu 
 trier autre chose dans qui avait dans 
 nos données donc voilà retenez bien tout 
 ça enfin rené non sachez que ça existe 
 et puis le jour où vous avez besoin 
 aller picorer dans des bouts de codes 
 parce que on peut partout retenir par 
 cas ça sert à rien tout retard parker 
 sachant que tout le contenu est 
 disponible sur internet vous avez pas 
 besoin de tout retenir 
 j'ai besoin de savoir quand aller 
 chercher le contenu au bon moment donc 
 voilà je voulais également vous orienter 
 éventuellement sur ma playlist react 
 alors pas surtout voyez qu'en fait j'ai 
 refait un projet réac parce que mon tout 
 premier projet rac il parle des bases et 
 tout mais il parle un petit peu de vieux 
 réac ce projet j'ai tourné il ya un an 
 et serait que ça va très très vite la 
 technologie est depuis restée beaucoup 
 évolué mais moi j'ai beaucoup évolué at 
 home 2 niveaux donc j'ai trouvé plus 
 partir de refaire une vidéo au propre 
 bureau elles servent aussi 
 accessoirement à mes étudiants à mes 
 étudiants dans la vraie vie donc 
 donc voilà qu'est ce qui est bien dans 
 ma playlist passa passa dans le golf ça 
 peut être pas mal ces choses là mais bon 
 je les recommande pas spécialement 
 enfin fait leur deuil c'est assez 
 intéressant 
 non ce que je recommande la csu sur 
 lequel je suis là c'est là le site 
 vitrine en react c'est à dire après 
 cette explication je vous ai fait là 
 je trouve que c'est ça peut être sympa 
 ça peut être sympa de faire ce site 
 vitrine c'est dur 2h43 mais il ya 
 énormément style energy s et on apprend 
 je trouve on apprend plein de choses le 
 projet est assez assez stylé on ne voit 
 pas très bien 
 enfin bon voilà il ya des effets entre 
 chaque page et tournoi plein de choses 
 en fait et c'est assez intéressant 
 et puis le jour vous serez très bon 
 react très très très très bon en direct 
 n'ont peut-être pas très bons non plus 
 mais bon il ya cette vidéo de deezer bon 
 je sais pas qui la regarde cette vidéo 
 enfin bon tout cas je la regarderai pas 
 vu d'autre 10h faut être fou pour faire 
 ça enfin bref c'est une vidéo de dix 
 heures où j'explique comment faire un 
 projet en react hyper hyper complet et 
 puis éventuellement après un projet sur 
 next js qui est un framework de réac qui 
 lui même est une bibliothèque javascript 
 là je vous dis qu'on passe on commence à 
 placer dans des niveaux un petit peu 
 plus poussée et la vidéo sont next en 
 plus tu m'en allais pas vrai les pas si 
 compliqué mais elle vous simplifie 
 énormément la façon de faire des sites 
 vitrines notamment c'est très très 
 pratique pour faire des sites vitrines 
 des pièces il n'y a pas besoin de faire 
 de navigation comme non la codéine 
 faille est plein de choses qui se font 
 automatiquement que j'explique dans la 
 vidéo dure une heure dix neuf donc mon 
 sens un peu de temps pour vous la faire 
 un peu plus tard donc voilà je vous 
 invite à sa faire ça et puis si vous 
 n'êtes pas bon javascript aussi bossé au 
 jazz inscrits 
 et puis surtout si vous voulez 
 progresser la meilleure solution pour 
 progresser ça reste de vous mêmes codes 
 et les choses c'est bien de regarder 
 comment les gens font 
 c'est même recommandé au début et après 
 c'est à vous de développer de buter sur 
 des choses parce que c'est la nouvelle 
 et avoir une courbe de progression 
 extraordinaire 
 en tout cas moi ça s'est passé comme ça 
 pour moi donc voilà les amis je vous 
 souhaite bon code vous avez le fichier 
 terminer en dessous la vidéo 
 je crois que j'ai déjà dit plusieurs 
 fois donc voilà je vous souhaite bon 
 code et je vous dis à bientôt 
 allez ciao 
