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