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