0:00 salut et bienvenue dans cette nouvelle vidéo aujourd'hui je vous propose de découvrir ensemble réact native à travers un petit exemple concret pour cet exemple on va créer une petite application qui va permettre de lister des Pokémon donc c'est une application qui aura deux panneaux un premier panneau qui nous permettra de voir la liste des Pokémon cette liste on pourra la scroller pour automatiquement charger des Pokémon supplémentaires on aura en haut un système de filtre et un système d'organisation qui permettra de sélectionner comment on souhaite organiser nos Pokémon si on clique sur un Pokémon on sera amené sur une page qui nous permettra d'avoir un petit peu plus de détails on pourra cliquer dessus pour avoir le cri alors c'est absolument abominable mais bon c'est comme ça et on aura aussi la possibilité d'aller au Pokémon suivant ou précédent en utilisant le swipe alors pour cette application j'ai tout simplement repris
0:46 une maquette qui est disponible sur le figma community qui est le Pokédex donc vous pourrez utiliser cette maquette aussi lorsque vous alleer travailler pour la partie API on va utiliser poket API qui est une API ouverte sur laquelle on peut demander des informations et récupérer justement les données qui vont nous intéresser alors je tiens à le préciser cette vidéo risque d'être un petit peu longue donc ce que je vais faire c'est que je vais vous mettre des chapitres donc S a des moments vous sentez qu'il y a des choses qui ne vous servent pas n'hésitez pas à passer à l'élément suivant ne vous forcez pas forcément à tout regarder je ne le prendrai pas mal alors avant de commencer un petit point sur ce qu'est Ract native donc on a déjà vu dans la formation react ce qui est react c'est un outil qui permet de générer du virtual DOM et ensuite on a react Dom qui va faire en sorte que ce virtual Dom
1:31 soit synchronisé avec notre page dans le cadre de react native ça va créer une application mobile qui va avoir un moteur JavaScript ce moteur JavaScript va être capable de faire interpréter notre code react sauf que une fois qu'on a ce virtual Dom on va pas le monter sur du DOM réel mais là on va avoir une surcouche qui va venir créer des composants natifs et propres au téléphone donc react native c'est react que l'on connaît avec tout ce qui est hook contexte et tout ça sauf que là on va travailler avec des comp an qui vont être montés sur une véritable application donc ce qu'il faut comprendre c'est que dans le cadre de réact native l'interface utilisateur ça sera une interface qui est native et propre au téléphone alors pour commencer à l'utiliser on va se rendre sur la documentation sur la partie get started si on descend un petit peu on va nous donner une petite commande qui nous
2:17 permet de d'initialiser le projet et on va voir ici que on mentionne expo expo c'est un framework qui va vous permettre de travailler avec Ract native plus simplement ça intègre pas mal de choses un outil notamment pour tester directement sur votre téléphone euh des systèmes de routeur plein plein de trucs qui vont nous permettre de travailler avec aujourd'hui si on fait du réact native on va systématiquement utiliser expo donc je vais prendre cette commande là et la taper sur mon système il nous demande si on veut installer les paquets nous on va répondre oui on il nous demande le nom de notre application donc nous on va l'appeler Poké native ensuite il va installer les différentes dépendances et une fois que c'est fait il va nous donner les instructions pour faire fonctionner le projet donc on va se rendre dans le dossier que l'on vient de créer et en ensuite on peut faire un NPM run Android iOS ou web en fonction
3:03 de la cible que l'on souhaite utiliser alors nous ici on compte développer pour Android donc on va faire un NPM run Android donc cette commande elle va lancer la commande expo start avec le drapeau Android ça va Bundler votre projet et tout de suite je vais avoir une erreur parce que je n'ai aucun périphérique qui est connecté effectivement sur mon système je n'ai pas actuellement d'émulateur pour Android donc j'ai cette erreur là mais il faut savoir que vous n'êtes pas forcément obligé d'utiliser un émulateur si vous avez un téléphone àorté demain vous pouvez vous contenter de lancer la commande NPM run start dans ce cas-là ça va Bundler votre projet ça va démarrer le serveur métro et ça va vous donner un QR code ce QR code vous allez pouvoir le scanner avec une application qui s'appelle expogo qui est disponible à la fois sur iOS et Android et cette
3:48 application elle va vous permettre de lancer à distance le projet en fait pour comprendre ce que fait expo c'est que c'est déjà une application react native et expogo va être capable de charger le code de votre application que vous avez en local sur votre ordinateur et exécuter l'application à distance donc c'est très bien parce que vous allez pouvoir tester votre application sans forcément avoir grand chose à installer sur votre téléphone cependant nous histoire que vous ayez aussi un retour visuel on va installer un simulateur alors pour cela je vais vous montrer le processus dans le cadre d'Android si vous êtes sur iOS il vous faudra installer Xcode qui intègre le simulateur là je vais vous montrer la procédure sur Android parce que je suis sur windows donc on va télécharger la dernière version d'Android studio qui qui est un outil qui nous permet de travailler sur des applications Android et qui intègre aussi tous les outils qui
4:34 permettent notamment de lancer des simulateurs et de débugger une fois le téléchargement terminé je vais lancer l'exécutable je vais cliquer sur suivant on va utiliser les Android virtual device ça c'est très important parce qu'on veut justement utiliser le simulateur et après pour le reste je vais laisser les options par défaut et on va laisser l'installation se faire une fois que c'est fini je vais demander au système de démarrer Android studio et on va tout de suite être guidé par un système qui va nous permettre d'installer le Android SDK donc on va choisir les options standard par défaut et on va cliquer sur finir une fois que le téléchargement a fini je vais cliquer sur finir donc Android studio est normalement un éditeur qui permet de créer des projets Android mais nous on va cliquer ICI sur plus d'actions et on va aller sur le Virtual device manager par défaut j'ai ici un périphérique qui est déjà enregistré alors je vais le supprimer parce que je souhaite pas forcément tester sur un téléphone pliant
5:20 et on va faire delete comme ça je vous montre aussi la procédure pour créer un nouveau euh périphérique virtuel donc on clique sur Create virtual device là on va avoir le choix du type de périphérique que l'on veut utiliser donc moi je vais prendre ici un pixel 7 voilà je clique ensuite sur Suivant et on me propose les APU à utiliser donc normalement il a préinstallé une API sur votre système mais sinon vous pouvez cliquer sur ce petit bouton téléchargement pour installer une nouvelle API globalement ça vous permet de choisir la version d'Android que vous voulez préinstaller sur ce téléphone là et je clique ensuite sur Suivant je peux choisir un nom différent choisir dans quel mode il va arriver donc je vais cliquer ICI sur fin finir le périphérique est démarré et je vais pouvoir cliquer sur le petit bouton Lecture ce qui va permettre de lancer l'émulateur je vais me retrouver avec
6:07 une fenêtre qui ressemble à ça elle simule le téléphone et notre téléphone devrait démarrer pendant ce temps on va revenir sur notre terminal qui été toujours lancé parce qu'on avait fait la commande NPM run Start et si vous voulez démarrer Android vous n'êtes pas obligé de couper cette commande là vous pouvez appuyer sur la touche A comme on vous l'explique et ça va ouvrir sur Android donc je j'attends juste que l'émulateur a fini de se lancer et j'appuie sur Android automatiquement il détecte ici mon périphérique virtuel il va télécharger l'application expogo donc c'est l'application justement qui permet de lancer bah directement notre application react native sur le téléphone et une fois qu'il est installé il va automatiquement ouvrir notre application côté terminal c'est en train de réagir c'est en train de Bundler en fait les différents fichiers Javascript pour les envoyer au téléphone qui va les exécuter
6:54 et qui va rendre notre application Ract native donc par défaut lorsque l'on crée une application avec expo c'est une petite application qui a déjà quelques petites vues de précréé et c'est ce que l'on voit ici on a une petite page d'accueil qui nous explique un petit peu ben ce que l'on a dans notre application et on voit qu'on a un système d'onglet qui permet de passer d'un élément à l'autre et à chaque fois on a un petit peu de détail sur les éléments que l'on peut regarder alors maintenant on va regarder le code source de cette application donc comme on le voit par défaut c'est une application bah finalement qui ressemble à une application JavaScript standard la petite particularité c'est que expo utilise un système de routeur qui est basé sur des fichiers c'est ce que l'on va retrouver dans le dossier app donc là on voit qu'on a un dossier tabs et dedans on va avoir deux onglets un onglet index qui est la page d'accueil sur laquelle on arrive et en Anglet explore qui est cette partie-là si on
7:41 regarde à l'intérieur ben on remarque que c'est du code react classique si ce n'est une petite particularité par rapport à ce que l'on peut connaître lorsqu'on travaille avec le DOM c'est qu'on ne va pas utiliser des éléments HTML on va utiliser des éléments qui vont être spécifiques au développement mobile ensuite on va retrouver un dossier components qui contient des composants qui vont être utilisés un peu partout on a un dossier asset c'est pour les ressources qui vont être utilisées dans l'application et enfin on a un fichier app.gson qui va contenir toutes les informations sur notre application c'est là notamment qu'on va gérer l'écran d'accueil qu'on va gérer les icônes et ça ça va être très important notamment sur la phase de publication alors maintenant nous dans notre cas on souhaite repartir de rien donc au niveau de mon terminal je vais pouvoir taper la commande NPM run reset- project cette commande ce qu'elle va faire c'est qu'elle va déplacer le contenu du dossier app dans un dossier
8:26 app example et elle va recréer un code source de base qui est le plus minimal possible ce que je vais faire aussi c'est que je vais déplacer le dossier component constant et hook à l'intérieur de ce dossier app example voilà l'idée c'est de repartir d'absolument rien maintenant notre application va ressembler à ça et on va en profiter pour commencer à parler des éléments qui vont composer une application react native alors il y a deux éléments qui vont être les blocs de construction de base dans le cadre des applications réact natives c'est le bloc View et le bloc texte le blog view vous pouvez le voir un petit peu comme une div c'est ce qui va permettre d'englober des éléments et dès que l'on aura besoin de mettre du texte il faudra utiliser le composant texte au passage il n'est pas possible de mettre du texte en dehors de cette
9:12 balise là si vous faites ça vous allez obtenir une petite erreur où on vous dira que il faut nécessairement ce composant là ensuite pour donner une apparence à ces élémentsl on va pouvoir passer au niveau de view mais aussi au niveau de texte un objet au niveau de la propriété style cet objet il va ressembler à ce que l'on connaît en CSS mais il faut faire attention ce n'est pas du CSS pour autant c'est un style qui va être spécifique aux plateformes mobiles par exemple si je souhaite changer la couleur de fond de mon élément je peux utiliser une propriété background color et venir mettre une valeur hexadécimale pour la couleur de la même manière je peux préciser par exemple un padding et contrairement au CSS on na pas la possibilité de faire des choses comme ça par exemple on peut pas dire je veux un padding en haut de 24 pixels un aut de 12 et ainsi de suite ainsi de suite ça ça ne va pas fonctionner le padding on
9:59 le mettra directement sous forme de nombre et vous pouvez comme ça piloter le style à la fois des vues mais aussi du texte ce que l'on fera en général c'est que en dehors de notre composant on va se créer un objet qui va contenir les styles et on créera un objet qui contiendra des propriétés correspondant aux différents éléments par exemple ici je vais avoir une propriété container et c'est à l'intérieur de cette propriétélà que je vais mettre ce style- làà comme ça ensuite au niveau de ma partie euh composant j'ai moins de code à écrire et en tout cas ça rend le truc un petit peu moins brouillon il y a aussi une petite méthode que l'on peut utiliser qui permet d'avoir surtout l'autocomplession c'est l'objet styles sheet que vous allez retrouver dans react native et il a une méthode Create et il attendra en paramètre la même chose c'est-à-dire un
10:44 objet qui contiendra en clé bah les différents noms que vous souhaitez utiliser et en valeur du style l'avantage de cette méthode c'est que si jamais vous tapez quelque chose qui n'existe pas vu qu'il y a le typage ça vous dira que cette propriété n'existe pas donc ça permet d'avoir un petit guide à ce niveau-là alors maintenant on va parler de la structure des fichiers on voit que dans notre dossier app on a aussi un fichier layout ce fichier il va automatiquement englober l'ensemble des éléments qui sont au même niveau ou un niveau inférieur sachant qu'on peut ensuite avoir aussi des layout dans des sous-dossiers alors si on regarde le code de ce fichier layout.sx on voit que c'est une stack ça ça permet d'indiiquer le type de navigation qui va être utilisé si on regarde dans notre fichier d'exemple et que l'on regarde le fichier layout on descend un petit peu on avait effectivement une stack au premier
11:30 niveau avec euh un écran qui était euh le système d'onglet et dans le système d'onglet on avait aussi un layout qui permettait d'indiquer qu'on avait une navigation sous forme de tabs donc on peut comme ça imbriquer différents systèmes de navigation alors nous dans le cadre de notre application ben le simple système de stack suffira on remarque aussi que il a un sous-composant qui s'appelle écran alors ça ça permet de spécifier des particularités pour chaque écran donc là on pourrait rajouter des options supplémentaires pour dire que cet écran se comporterait différemment des autres nous dans notre cas on va pas forcément avoir besoin de faire ça donc on peut se contenter ici de simplement avoir une stack on utilisera les mêmes options pour tous les écrans maintenant qu'est-ce qui se passe si je veux plusieurs écrans imaginons je vais créer un nouveau fichier et je vais
12:16 l'appeler about.tsx à l'intérieur il faudra exporter par défaut un composant donc nous ça va être une fonction que l'on va appeler about et qui va retourner une vue et dans cette vue on mettra juste un texte et en mettra à propos si je souhaite passer d'une vue à une autre je vais pouvoir utiliser des liens pour cela au niveau de mon composant principal on va juste en dessous de notre partie texte utiliser le composant link il se comporte comme un roueter link on va l'importer d'ailleurs depuis expo router et on aura un href dans ce href on mettra le lien vers une page particulière donc nous ça sera aboutout comme je vous l'ai dit c'est une navigation qui va fonctionner par fichier donc à chaque fois que vous créez un fichier ça crée une route qui correspond ondra et à l'intérieur on
13:01 peut directement mettre du texte parce que cet élément-l se comporte comme un composant texte maintenant on voit bien notre lien à propos et si je clique dessus ça va me mener à une autre vue et ça va utiliser le système de stack c'est-à-dire qu'à chaque fois que l'on va naviguer sur une nouvelle page ça va rajouter ce nouvel écran au niveau de notre pile et ensuite on aura la possibilité de revenir en arrière pour dépiler les chosees et on peut avoir une pile qui a une profondeur quasi infinie alors le problème n on aura c'est que dans notre cas on veut pouvoir afficher des Pokémon avec des ID particuliers par exemple afficher le Pokémon numéro 4 puis le Pokémon numéro 5 si on ve des routes avec des paramètres je peux ici créer un nouveau dossier que je vais appeler Pokémon et dedans je peux créer un fichier qui va s'appeler entrecrochet
13:46 id.sx donc ce fichier là il va recevoir en paramètre l'idé de mon pokémon ensuite ici je vais exporter une fonction par défaut qui va s'appeler Pokémon ça sera un composant et on va reprendre un peu ce qu'on a fait pour le B sauf que là ce que j'aimerais bien faire c'est être capable d'afficher l'ID du Pokémon pour cela on va pouvoir utiliser un H qui va s'appeler use local search params et dans cet objet là on va retrouver l'ensemble des paramètres donc par exemple si je souhaite voir l' du Pokémon je pourrais lui dire ici params.id si je reviens maintenant au niveau de mon index et que je souhaite naviguer vers un Pokémon en particulier au niveau du href
14:33 je ne suis pas obligé de mettre une chaîne de caractère mais je peux mettre un objet qui va me permettre de décrire mon lien dans cet objet on va avoir une première propriété path name qui va représenter notre chemin donc nous ça sera/pkémon/id ensuite on aura un paramètre params qui va permettre de préciser les paramètres et je vais lui dire ici il faut que tu remplaces l'ID par 3 et ça me permettra d'aller au Pokémon numéro 3 donc là je mets Pokémon 3 et je n'oublie pas ici de fermer mon acccolade si je clique à ce niveau-là hop on voit bien que l'ID a été récupéré et il est affiché ici alors nous dans notre situation au niveau de ma maquette je n'ai pas vraiment de barre de titre
15:18 comme je pourrais le voir au niveau de mon système ici donc ça j'aimerais bien m'en débarrasser parce qu'on ne pourra pas le styliser comme sur la maquette donc ça ça va se gérer au niveau du layout au niveau de la stack on peut rajouter des options qui sont dans la propriété screen options et une option qui nous intéresse c'est header shown et on va mettre ça à false ça permet de masquer le header al ça fonctionne bien mais ça vient rajouter un petit problème les textes que l'on a écrit vont apparaître en dessous des éléments qui sont visibles par le téléphone alors au niveau de notre vue on va prendre le index.tsx on a la possibilité d'utiliser une vue particulière qui est une vue qui s'appelle la safe area view celle-là on va l'importer depuis react native safe
16:05 area context cette vue-là elle va automatiquement en fait rajouter des paddings donc là on va retirer cela qui correspondent aux éléments qui sont visibles à l'écran donc ça va permettre d'avoir une vue qui automatiquement placera correctement les éléments maintenant l'autre problème que l'on voit c'est qu'on aimerait bien que par exemple cette vue qui est en rouge prenne l'entièreté de l'écran alors il faut comprendre que les vues dans le cadre de de réact native fonctionne un peu comme des éléments en display Flex et une propriété que vous allez devoir utiliser très souvent c'est la propriété Flex donc au niveau de mon container ici je vais rajouter une propriété Flex et je vais lui dire 1 dans ce cas-là ça veut dire que l'élément al j'ai retiré le background ce qui était pas très malin mais ça veut dire que l'élément devra prendre 100 % de l'espace qui est
16:51 alloué si je mettais par exemple 1/ demi ça prendrait la moitié de l'écran lorsque des éléments sont empilés ils prennent automatiquement le minimum d'espace qui est possible d'utiliser si on voulait que le texte et les liens prennent 50 % de l'écran on pourrait les mettre tous en Flex 1 et automatiquement il disposerit les éléments convenablement ne vous inquiétez pas on aura l'occasion de reparler du positionnement lorsqu'on va commencer à placer certains éléments donc maintenant ce que je vous propose c'est d'attaquer la traduction de la maquette et on va pas forcément commencer tout de suite par créer les écrans on va commencer par traduire le design système donc dans le cadre de cette maquette il a défini tout un tas d'éléments que l'on va pouvoir utiliser et on a une partie style guide dans cette partie-là ce qui va commencer à nous intéresser c'est la partie typographie lorsque il va styliser des
17:38 textes il va utiliser une de ces typographies là donc plutôt que d'avoir à répéter le CSS partout on va avoir besoin de ces styles-là on va se créer un composant dédié donc au niveau de notre dossier racine je vais aller créer un nouveau dossier que je vais appeler components et on va aller créer un nouveau fichier que je vais appeler thedtext.tsx à l'intérieur on va exporter donc une fonction qui va s'appeler thème de texte cette fonction elle prendra des propriétés pour l'instant je sais pas trop à quoi ça va ressembler et on va définir le type en amont moi ce que j'aimerais bien faire lorsque je définis du texte c'est définir à la fois sa couleur mais aussi la variante qui est utilisée parmi les variantes qui sont proposées à ce niveau-là donc au niveau de mes props je vais avoir une propriété variante qui
18:25 sera ben pour l'instant une chaîne de caractère et pour la couleur ça sera aussi une chaîne de caractère on précisera que ces propriétés sont optionnelles parce que par défaut on mettra une valeur de base à l'intérieur de ce thème de texte je vais aussi avoir besoin de toutes les propriétés que peut recevoir le composant texte de base donc à ce niveau-là je vais lui dire qu'au niveau des props je vais aussi recevoir n'importe quel props qui serait normalement accepté par le composant texte à ce niveau-là je vais retourner donc mon texte donc la balise de react native et je vais lui passer ensemble des propriétés sauf qu'on va extraire la variante et la couleur et toutes les autres propriétés seront dans une variable que l'on va appeler reste maintenant ce composant texte il va
19:10 recevoir toutes les propriétés qui serai passé et nous on va pouvoir faire un petit peu de traitement notamment avec la couleur ou la variante d'abord on va commencer par la notion de variante donc ce que je vais faire c'est que je vais créer des styles qui correspondent à ces différents noms de variantes de de typographie pour cela je vais créer une constante style et je vais faire stylesheet.cate et on va avoir une première variante body 3 dedans je vais mettre le fond de size que j'ai pris de la maquette 10 et un line E8 de 16 et je vais faire ça pour l'ensemble des styles que l'on retrouve dans la maquette maintenant l'avantage c'est que je vais pouvoir utiliser les clés de cet objet là au niveau de la propriété variante donc ce que je vais devoir faire c'est inverser un petit peu mon code je vais mettre le style avant le type c'est pas
19:56 ultra pratique mais ça me permet ensuite de pouvoir lui dire à ce niveaau-là le type de variante c'est le key of du type of de style ok ce qui veut dire que au niveau de mon thème de texte je vais pouvoir appliquer un style en fonction de la propriété que je reçois donc je vais lui dire utilise style et entre crochet je veux récupérer la valeur de variante si cette valeur n'existe pas par défaut je veux que tu mettes body 3 ça sera le style de base pour notre texte maintenant si je reviens au niveau de ma partie index au niveau de la maquette si je repars sur la partie écran ce que l'on avait à ce niveau-là c'est un texte qui a le style headline donc plutôt que de m'embêter ben je peux directement à ce niveau-là lui dire hop on va avoir un thème de
20:41 texte et la variante ça sera headline et ensuite à l'intérieur je mettrai pokédex si je regarde au niveau de mon émulateur ça va me donner le bon style alors maintenant on va attaquer la partie couleur pour les couleurs ça peut être un petit peu plus compliqué parce que dans le cas cadre des téléphones ils ont la possibilité d'avoir un mode light ou un mode dark on pourrait faire en sorte que notre application ne s'adapte pas mais je préfère vous montrer directement les bonnes pratiques donc ce que je vais faire c'est que je vais aller créer un nouveau dossier à la racine que je vais appeler constant qui va contenir les constantes qui peuvent être utiles à différents endroits et on va créer un fichier colors.ts l'idée à l'intérieur de ce fichier c'est de créer hop une grosse constante qui va contenir les couleurs et dans cet objet là on va mettre deux
21:27 clés une clé dark qui sera pour le Dark mode et une clé light pour le Light mode et l'idée c'est de mettre les mêmes couleurs enfin en tout cas les mêmes nom de couleurs mais avec des valeurs différentes en fonction du Dark ou du light mode si votre application ne supporte pas de light ou de Dark mode ben vous pouvez mettre les mêmes valeurs à ce niveau-là pour le coup je vais aller regarder sur la maquette donc on va revenir dans la partie style guide et je vais prendre les couleurs que je retrouve ici et la couleur primaire alors j'ai déjà un petit peu généré cet objet là et ça ressemble à ça donc j'ai créé une propriété est tint pour la couleur principale et ensuite pour les différents gris Gry dark médium light et ainsi de suite ainsi de suite et on va faire la même chose pour le Dark mode cette maquette là ne présente pas de Dark mode du coup on va laisser ça enfin dans le cadre de cette application je vais rajouter une autre clé alors qui
22:14 est vraiment spécifique ici qui s'appelle type et je vais mettre les couleurs des différents types de Pokémon ça me servira notamment pour les petites puces donc voilà pour cet objet là maintenant lorsque j'ai besoin d'une couleur il va me falloir justement automatiquement prendre la couleur light ou dark donc je vais me créer un hook pour ça donc on n pas encore de dossier hook donc on va aller le créer je crée un fichier hook/ US tem colors.ts on va exporter ce hook là et en fait son simple rôle c'est de nous renvoyer les couleurs mais qui correspondent au thème qui a été choisi par l'utilisateur pour cela on va créer une variable thème et on va faire un use color Shem ça va nous donner une valeur qui sera soit light soit dark si on a aucune valeur on va dire que notre app va se comporter en light par défaut et
23:01 enfin on va pouvoir retourner notre constante colors et on va prendre la clé qui correspondra au thème donc soit light soit dark si je reviens au niveau maintenant de mon index.tsx j'aimerais bien que la couleur ici ça soit la couleur white donc je pourrais mettre color égal et Grey white une couleur qui correspond à ce que j'ai dans ma partie colors donc il va falloir gérer ça au niveau de mon thème de texte au niveau de mon thème de texte je vais récupérer les couleurs en faisant un colors ég use th colors le hook que je viens de créer là j'ai suis un petit peu embêté parce que j'aimerais bien utiliser à la fois le style que l'on a là mais aussi la couleur que l'on a ici alors on a deux manières de faire les choses soit vous pouvez créer un tout nouvel objet en
23:47 utilisant h le spread opérator et vous rajoutez la propriété color qui vous intéresse soit et c'est une meilleure solution vous allez utiliser un tableau vous mettez un tableau vous vous avez ici ce style là qui est un style statique qui est généré en dehors du composant et on va ensuite avoir un dans ce tableau là alors là attention au crochet je pense qu'il a fait un petit peu n'importe quoi voilà ici on va rajouter un objet et on va dire que la couleur ça sera colors de ce qui est reçu ici en paramètre color pour cette propriété color on voit qu' Râ parce que là il me dit tu as une chaîne de caractères donc moi je vais lui dire que color c'est un key of du type off de Color s donc là je l'importe depuis mes constantes et on va prendre
24:32 la le thème light et pour pas qu'il Râ on mettra une valeur par défaut ici en Dark gré dark voilà donc si je reviens au niveau de mon index.tsx j'ai mis gr white ici on voit que ça fonctionne correctement et si je regarde au niveau de mon émulateur mon texte est en blanc et là j'ai maintenant un petit composant qui va me permettre de facilement créer un un texte dans la couleur que je souhaite avec la variante qui correspond à la maquette juste peut-être pour mai safe à view je vais venir récupérer les couleurs ici en faisant un use th colors et à ce niveau là je vais lui dire utilise le style du container et en plus je veux que tu rajoutes un background color et que tu utilises la couleur de teinte et au niveau de mon container ici la seule propriété que je vais rajouter c'est un
25:18 flex A1 et on a bien maintenant quelque chose qui ressemble un petit peu plus à la maquette alors un autre composant que je vais avoir besoin de créer en amont c'est le composant card qui va me permettre de gérer les cartes que l'on a à différents niveaux dans les écrans on a ici une carte en blanc puis une carte aussi pour les Pokémon donc je vais créer aussi ce composant là et après on pourra attaquer notre premier écran donc ce composant je vais aller le créer dans le dossier components on va créer un nouveau fichier card.tsx on va exporter une fonction qui va s'appeler card et pour l'instant on ne recevra rien en paramètres dans la partie index.test 6 histoire de tester les choses on va ici se créer hop notre composant card et en enfant on va lui
26:04 donner le thème de texte sauf qu'on va le mettre en gréarc maintenant au niveau de mon composant card je vais lui dire que au niveau des props hop pour l'instant ça sera les props qui sont des view props les mêmes props qu'une vue react native et pour l'instant on lui passera props ici donc à ce niveau-là je vais lui dire de retourner donc une vue et je vais lui passer l'ensemble des propriétés sauf que je vais rajouter un style par défaut pour ajouter ce style par défaut je vais devoir utiliser le spread opérator donc j'extrais le style que je recevrai en paramètre et je vais ensuite récupérer le reste des informations et c'est ce reste-là que j'utilise au niveau du style je vais
26:50 utiliser le style qui serait reçu en paramètre s'il y en a un et aussi ben le style que je décide de créer en dessous donc là je vais créer euh une propriété style et je vais pas créer un objet avec des clés des valeurs je pense pas que ça soit utile pour l'instant et dans cette partie style je vais simplement rajouter un background color et je vais lui dire du blanc un petit border Adus à8 au passage si vous voulez la validation des propriétés si par exemple vous faites une erreur ici vous pouvez lui dire ici que ça ça satisfait normalement c'est view style voilà et là dans ce cas-là il dit que le bord de radius ne fonctionne pas donc maintenant que j'ai ce style global je peux le rajouter au style à ce niveau-là maintenant on a envie de gérer l'ombre portée et c'est là que les choses malheureusement se complique si
27:37 on regarde dans réacte native et qu'on cherche shadow on va avoir des propriétés qui permettent de mettre une ombre portée sauf que on a des petites bulles ici qui sont noires ces bulles indiquent que on a des propriétés qui ne sont supportées que par usos concrètement il n'est pas possible de spécifier l'ombre portée avec ces propriétés là côté Android côté Android on on aura une propriété qui est différente qui s'appelle élévation en fait dans Android on gère un niveau d'élévation et c'est automatiquement le système qui va choisir l'ombre portée à appliquer donc là il va falloir faire un code qui va fonctionner à la fois sur Android et à la fois sur iOS donc on va combiner un petit peu les choses comme pour la partie couleur je vais aller me créer de nouvelles constantes qui vont permettre de gérer les ombres et je vais appeler ça
28:23 shadows.ts et je vais exporter une constante que je vais appeler shadows au niveau des nomes que je vais choisir pour ces ombres portées je vais m'inspirer de ce qu'il y a dans le style guide hop si je descends un petit peu on a ces différents types d'ombres concrètement dans la maquette j'ai trouvé que la 2dp en inner celle-là je sais pas vraiment où elle est utilisée et ici on va donc mettre un objet qui va contenir le nom de l'ombre tel qu'elle est dans le design et après on va traduire ce que l'on a au niveau du de figma donc on va mettre une opacité à 20 %. un Shadow color avec du noir donc l'ppareil c'est quelque chose que l'on pourrait piloter et faire varier en fonction du thème de couleur mais moi je choisis de ici de n'avoir qu'une valeur unique quel que soit le thème qui est utilisé l'offset on va dire que il est
29:08 nul sur le l'axe X et il descend un peu sur l'axe Y et ensuite on va mettre un Shadow radius donc ça c'est le Blur de 3 donc ça ça va fonctionner pour iOS et dans le cadre de Android on va rajouter une propriété élévation et on va donner une élévation de 2 pour trouver cette valeur là j'ai simplement fait des tests pour trouver une élévation qui ressemblait à peu près à la maquette ça sera pas fidèle mais c'est pas grave l'idée c'est de réutiliser les éléments qui sont natifs et là je vais juste préciser que cet objet-là il satisfait un record de chaîne de caractère et de view style voilà comme ça au moins ça m'évite de faire des petites erreurs et j'importe ce type là ok donc si je reviens au niveau de mon composant card je vais pouvoir lui dire que au niveau de son style je veux que tu utilises en plus donc le composant
29:55 Shadow et l'ombre portée de type DP2 si je reviens au niveau de mon émulateur hop on va avoir une légère ambre portée donc là il me reste juste une dernière petite chose à faire c'est enlever ce background color et utiliser le thème donc je vais le retirer ici je vais récupérer mes colors en faisant mon use th colors et à ce niveau-là je rajoute encore un nouvel objet avec un background color et je précise que c'est un Grey light en white plutôt peut-être une dernière petite chose c'est dans la partie thème de texte je vais faire comme ce que j'ai fait pour la carde je vais extraire ici des propriétés le style comme ça si jamais on passe un style au thème de texte on pourra l'utiliser à ce niveau-là donc dans les styles j'utilise le style de la variante je rajoute la couleur et je rajoute
30:41 enfin le style qui serait passé en propriété et là on a terminé avec les composants de base qui vont me permettre de respecter le design système qui a été créé par le designer donc maintenant on va pouvoir attaquer la partie écran et composer notre premier écran le listing Poké pour cet écran là je le précise on ne va pour l'instant pas s'intéresser à la partie qui est en haut c'est-à-dire on va pas faire la partie recherche et filtre on s'intéresse juste à essayer de faire cette partie en tête et la partie où on a la liste des Pokémon donc on est parti donc d'abord on a cette petite pokéall que l'on doit afficher donc là on va avoir besoin d'Asset graphique pour cela ben je vais prendre ma pokéall et je vais venir l'exporter en PNG ce PNG on va le placer
31:27 dans dans le dossier assets puis dans le dossier imag et on va le le laisser appeler pokéball.png ce que l'on peut faire aussi tant qu'on y est c'est dans la partie components vous pouvez exporter ces différentes images qui vont nous servir dans le reste de l'application mais nous on le fera un petit peu plus au fur à mesure donc pour ma partie en tête il va falloir que je crée une vue qui contient la pokéall puis notre texte donc pour cela je vais retirer la partie card je vais ici créer une vue donc comme je l'ai dit c'est l'équivalent d'une div on va avoir notre thème de texte qui sera l' en tête et ensuite à côté une image pour les images on a un composant image qui aura une propriété source quand une source est locale c'est-à-dire c'est un fichier qui va être inclus dans le code de notre application on peut ici mettre au niveau de la source un require et on
32:18 mettra/ashassets/image/ notre image donc pokéball.png et ensuite on ferme cette balise là euh dans le cadre des images ben ça fonctionne un peu comme pour le web mieux vaut préciser une largeur et une hauteur voilà ça permet de placer correctement les éléments donc là c'est une largeur et une hauteur de 24 donc je vais rajouter un hop là un wid 24 et un eight 24 l'inconvénient c'est que mes deux éléments sont empilés donc je vais avoir besoin de rajouter un peu de style ici donc au niveau du style je vais utiliser une propriété que je vais appeler header et à ce niveau-là je vais pouvoir préciser que dans le cadre de notre notre header on veut pas que les éléments soient empilés on veut qu'ils soi l'un à côté de l'autre dans ce cas-là on peut utiliser une propriété Flex direction et on va mettre ça en r
33:06 ce qui permet de mettre les deux éléments l'un à côté de l'autre on va rajouter un Aline items Center ce qui va permettre de placer les éléments au centre l'un par rapport à l'autre on va pouvoir aussi rajouter un gap donc là on voit qu'on a un gap de 16 donc on va on va mettre ici gap 2.16 et on va rajouter que pour notre texte on veut un Grey light dans le cadre de cette entête là elle est un petit peu espacée par rapport au au reste donc on voit qu'on a en haut et sur les côtés un petit padding de 12 donc au niveau ici je vais rajouter hop padding 12 au passage toute notre vue elle est un petit peu espacée sur le côté on a 4 pixels de padding donc ça je vais le mettre directement au niveau de ma de ma
33:53 partie safe arrêt à view donc dans le container je vais rajouter un padding de 4 et là ça commence à prendre forme maintenant on va passer sur la partie listing la partie listing elle va être en dessous et ça va être une grosse carde cette carde on veut qu'elle prenne l'ensemble de l'espace qui est disponible en dessous donc on va rajouter un style supplémentaire et on va rajouter dans l'estyle on va l'appeler body bon vous pouvez l'appeler un peu comme vous voulez hein là je suis pas très inspiré et lui on va lui dire de Flex sur 1 de prendre l'entièreté de l'espace qui reste disponible et on voit que ça donne bien le bon résultat dans le cadre de la maquê on a une ombre portée vers l'intérieur malheureusement dans le cadre des styles de d'Android on sera pas en mesure de le reproduire donc pour l'instant on va se contenter de faire ça alors il y a des solutions alternatives des packages et tout mais
34:39 je préfère ne pas forcément aller sur des trucs très spécifiques et très complexes pour créer une liste on va pas faire les choses manuellement on a des composants qui sont dédiés et on a un composant qui s'appelle le flat List qui permet de représenter une liste d'éléments et l'avantage c'est que c'est géré par le système d'exploitation et donc c'est très performant en terme de de scroll et et tout ce genre de choses et ça supporte plein de fonctionnalités qui vont être très utiles dans notre situation alors ce qu'on va faire c'est qu'on va se créer un objet qui va contenir des faux Pokémon donc je vais créer un objet Pokémon et je vais faire unay from on va s'imagineer que je crée 35 Pokémon et ça prendra en paramètre une fonction qui prendra l'index et ensuite on va créer nos Pokémon pour l'instant on va leur donner un nom donc
35:25 là on mettra Pokémon name ensuite on va leur donner un ID donc l'ID ça sera l'index auquel on rajoute un parce que notre premier Pokémon ça sera le Pokémon numéro 1 et c'est tout pour les images on verra ça juste après maintenant à ce niveau-là je vais pouvoir créer une flat list je l'importe depuis react native et elle prend deux paramètres principaux le premier c'est data qui sont les données qui vont permettre de représenter notre liste nous dans notre cas c'est notre objet Pokémon ensuite on a render item donc ça c'est une fonction qui prendra en paramètre chaque item alors c'est un objet qui contient item et qui devra rendre chaque élément donc pour l'instant nous on va rendre une vue hop et dans cette vue on va mettre bah le nom du Pokémon
36:12 item.name et attention pour pouvoir faire ça il faut utiliser une balise texte ici je ne précise pas de clé mais je peux rajouter une propriété qui extractor qui est une fonction qui va prendre chaque item et qui va renvoyer l'élément qui sert de clé donc moi je vais lui dire dans mon cas la clé c'est l'ID du Pokémon alors là il accepte pas trop parce que c'est c'est un nombre et lui s'attend avoir une chaîne de caractère donc j'utilise la méthode to string et si je fais ça j'obtiens bien ma liste de Pokémon alors petite particularité dans notre cas nous on a envie d'avoir une liste où on a trois éléments par colonne donc vous avez une propriété sur flat List qui s'appelle num columns et je vais mettre trois colonnes al cette propriété elle peut pas être changée dynamiquement donc si vous faites le changement comme je l'ai
36:58 fait vous allez avoir une petite erreur donc au niveau de mon terminal je vais appuyer sur la touche R pour recharger mon application et là on voit bien qu'on a nos éléments qui sont empilés alors peut-être la petite précision qu'il faudra faire c'est pour que chaque élément prenne la bonne la bonne taille si je mets des cardes par exemple hop ben je peux rajouter un style et on va rajouter un flex et on va mettre un/3 comme ça chaque carde prendra un/ers de l'espace qui est à loué au niveau de la maquette on a aussi un gap entre les éléments à la fois horizontal et vertical donc vous avez la possibilité de rajouter du style sur la flat list alors c'est pas directement via la propriété style mais vous avez un columne wrapper style et un content container style alors le colonne vrapper
37:43 style il vous permet de rajouter un style au niveau des colonnes donc moi par exemple ici je vais rajouter une propriété Gap ou on va l'appeler GD gap hop et on va dire que ça rajoute un gap de 8 maintenant au niveau de mon colomne vrapper style je lui dis d'utiliser le style point grid Gap et ça va me permettre d'espacer les éléments sur les côtés pour l'espacement vertical ben on va utiliser le Content container style et on va lui dire d'utiliser style. gridgap et ça nous permet d'espacer les éléments comme ça je vais juste rajouter en plus hop un style point list et je vais rajouter des styles à ce niveaau-à donc dans le cadre de notre liste on a du padding donc si on regarde
38:30 la maquette je suis pas forcément fan du padding en haut qui est supérieur aux autres mais on va mettre 12 et 12 partout donc là padding [Musique] 2.12 et j'ai maintenant ma liste qui affiche bien les Pokémon convenablement je vais peut-être rajouter un tout petit peu de style pour ma carde pour vous montrer aussi le côté scroll donc dans ma cararde je vais rajouter ici une hauteur et on va mettre 200 je pense que ça devrait être suffisant donc là on voit que ça dépasse et si je scroll ça scrolle convenablement et voilà comment on peut faire notre simple système de de listing alors maintenant nous évidemment on n pas envie de simplement utiliser une card on a envie d'avoir vraiment notre carte pokémon donc je vais créer un nouveau composant pour ça parce que
39:16 on peut s'imaginer que c'est un composant que j'aurais besoin de réutiliser ailleurs par exemple pour afficher les évolutions ce genre de choses donc on va aller créer un nouveau dossier qu'on va appeler Pokémon ça sera tous les composants qui ont un au Pokémon et on va créer un fichier pokémoncard.tsx à l'intérieur on va exporter une fonction euh qui va s'appeler Pokémon card cette fonction là je m'imagine qu'elle va pouvoir recevoir potentiellement du style donc on va avoir une propriété style dans le cadre des Pokémon on va être intéressé aussi par l'ID et le nom du Pokémon donc là en haut je vais typer ça donc on va faire un type props euh on va lui dire que le style c'est un view style on va lui dire ensuite que l'ID c'est un number et
40:03 enfin que le name c'est une chaîne de caractère on précisera peut-être que le style est optionnel à l'intérieur je vais retourner donc une un composant de type card dans ce composant là on va prendre au niveau du style ce qui est reçu en paramètres ensuite on va avoir un premier élément qui va permettre de gérer la partie numéro de Pokémon donc là on va utiliser un thème de texte et on mettra l'ID alors c'est l'ID sous forme de chaîne de caractère et on veut rajouter des zéos initiaux donc on va en rajouter on veut que ça fasse trois caractères et on rajoutera des zéos et juste avant ici on mettra un diè maintenant pour les couleur hop c'est quelque chose qui est de type caption en Gray médium donc l'avantage c'est que
40:49 c'est très facile à faire j'ai juste à mettre variante caption et ensuite color Gray médium vous voyez l'intérêt d'avoir un design systè c'est que ça nous simplifie pas mal la tâche ensuite en dessous on va avir l'image d'un Pokémon alors dans notre cas on va utiliser l'API Pok API cette API elle dispose donc des informations sur les Pokémon donc nous on va faire Slash api/v2/pkémon et on va regarder un des Pokémon en particulier si on cherche artwork on va avoir cette url là alors nous dans notre cas on va pas forcément la récupérer depuis laap mais on voit que le l'URL ici elle prend le numéro du Pokémon donc ce qu'on va faire c'est qu'on va prendre simplement cette URL là et on remplacera l'ID là où ça nous
41:37 intéresse donc pour avoir une image par contre qui est distante on ne va pas mettre un require parce que là l'image doit être chargée depuis une ressource on mettra plutôt un objet qui contiendra une propriété URI et on mettra l'URL que l'on souhaite avoir et dans ce cas-là nous on remplacera ici par l'ID alors cette image là quelle taille elle fait dans la maquette si je reviens ici elle est censé faire 72 X72 donc là hop je fais ça on est bon donc là wi é= 72 et une hauteur de 72 enfin on a le nom du Pokémon donc le nom du Pokémon c'est quelque chose qui est un body 3 et un gré d'Arc donc c'est cool parce que c'est les valeurs que l'on a mis par défaut dans ce cas-là
42:23 thème de texte et on mettra le nom du Pokémon j'ai ici fini ma carde ou en tout cas je pense avoir fait le le tour de ce que j'avais à faire et dans mon index au lieu d'utiliser le composant card à ce niveau-là je vais utiliser mon composant Pokémon card je lui donne l'ID du Pokémon c'est item.id je lui donne le nom du Pokémon c'est item. nameame je laisse le style à ce niveau-là le flex 1/3 parce que il est spécifique à ma grille potentiellement je pourrais avoir envie à un autre endroit d'avoir une grille de quatre éléments donc j'ai préféré laisser ce style à ce niveau-là plutôt que de le gérer au niau niveau de de notre composant Pokémon card et après ben je peux directement fermer mon élément parce que c'est un élément qui n'attend pas d'enfant on va revoir ce que ça donne au niveau de notre émulateur et ça
43:09 fonctionne presque bien le petit inconvénient que l'on a c'est que les éléments sont aligné par rapport à la gauche donc dans ce cas-là il va falloir changer la propriété al items donc ici je vais faire un une constante style et je vais faire un style sheetcate et on va l'appeler card tout simplement et à ce niveau-là je vais mettre un aligne items et on va mettre Center ce style je vais venir l'appliquer en plus du style qui serait reçu en paramètrre et nos éléments au niveau de ma carte sont bien centrés alors l'inconvénient c'est que le texte lui doit être à droite donc ce texte là je vais aussi lui donner un style donc c'est pour ça que c'était intéressant que le thème de texte puisse recevoir du style et on va utiliser
43:56 styles.id donc l'ID ici ça sera quelque chose qui sera en ligne self Flex end donc si vous êtes déjà habitué à utiliser les flexbx au niveau du web ben vous allez voir que il y a beaucoup de notions qui peuvent être traduites dans réact native et c'est très pratique ce qu'il nous faudra changer c'est ici l'espacement on a un petit espacement carrément au niveau de la carde de 4 pixels mais globalement c'est tout ce qu'on a changer donc là au niveau de ma carte je vais rajouter un padding de 4 un petit détail aussi c'est qu'on a ce petit effet d'ombrage donc cet effet d'ombrage on va le créer avec une simple vue avec un petit border radus je vais juste peut-être avoir besoin des couleur donc là on fait un cons colors ég use colors parce que ça utilise la
44:43 couleur gr background donc cet élément là pour le créer je peux utiliser le système de position absolute et relative concrètement je peux mettre ma care ici en position relative et ensuite créer une vue alors qui pour le coup sera vide je vais lui donner le style on va l'appeler Shadow alors ça sera STS Shadow voilà alors cet élément là il a une hauteur je sais pas si c'est précisé de 44 et après un bord de radius de 7 c'est un peu bizarre normalement c'est 8 un peu partout mais là ils ont mis 7 ok donc on va reproduire cet élément là donc le shadow on va le mettre en position absolute ensuite on va lui dire il faut
45:30 que tu sois en bas donc on mettra bottom 0 left 0 right euh Z0 et on rajoutera ici sa couleur de fond dynamiquement donc ça sera euh background color et on utilisera colors.gy background on lui donnera la hauteur de 44 pixels donc ça c'est ce qui est très important pour voir l'élément et enfin on avait dit euh le le bord radius CT7 al voyons à quoi ça ressemble donc l'élément est placé correctement mais le problème c'est qu'il est placé au-dessus de mes autres éléments si je viens mettre cet élément là h en amont ça le place en dessous pour le
46:15 coup ça fonctionne comme pour le Web les éléments qui sont placés en dernier vont apparaître au-dessus même si ici il n'y a pas de notion de position relative pour les autres éléments ils se mettent bien au-dessus si jamais vous vous souhaitez quand même laisser cette vue en dernier élément vous pouvez jouer alors sur les Z index par exemple ici je pourrais rajouter un Z index et mettre -1 et dans ce cas-là l'élément apparaîtrait sous les autres éléments donc là c'est à vous de voir ce que vous voulez faire à ce niveau-là et on a quelque chose Ben qui ressemble bien à la maquette à ce niveau-là on pourrait peut-être juste rajouter que sur les cardes euh hop là c'est vraiment pour une sécurité supplémentaire on veut un overflow à hidden pour que ça cut ce qui serait en dehors de notre carte et là on a notre listing de Pokémon mais ce que
47:01 l'on aimerait bien faire c'est rendre ce listing dynamique parce que là avoir les choses qui sont générées un petit peu à la main c'est pas idéal notamment le nom du Pokémon n'est pas bon donc pour récupérer les informations on va pouvoir simplement utiliser la fonction fetch mais histoire de de simplifier le travail et d'avoir la gestion du cash et tout ça on va utiliser une librairie qui est une librairie Ract qu'on a déjà évoqué sur cette chaîne qui est react query donc react query c'est quelque chose qui va nous permettre de travailler un petit peu plus simplement avec fetch et autrre donc on va installer cette librairie là donc pour l'installer alors je suis pas sur la bonne version de la documentation aujourd'hui on est sur la V5 donc on l'importe en important tanstack react query donc au niveau de mon terminal je vais venir taper cette commande là donc NPM install tanstack
47:50 react query et je vais me créer un hook qui va me permettre de récupérer facilement des résultats pour la partie listing de Pokémon au niveau de la partie pokapi on va venir taper la le point d'entrée Pokémon et on va rajouter un paramètre limite pour ne récupérer que 21 Pokémon à la fois pourquoi je mets cette limite parce que c'est 3 x 7 et ça permet de toujours avoir un multiple de 3 donc on est parti je vais aller me créer un hook qui me permettra de ne pas directement utiliser use query dans mes composants et on va créer ce h use fetch query on va exporter cette fonction là et l'objectif de cette fonction ça serait de recevoir en paramètre l'URL que l'on souhaite contacter ce queelle va faire
48:36 cette fonction c'est qu'elle va faire un return et elle fera un use query donc ça c'est ce qui provient de tanstack react query au niveau de tanstack il attend un premier paramètre qui sera le query key qui permettra de mettre en cache notre requête donc nous on utilisera l'URL en query key et ensuite une query function qui permettra d'expliquer comment on récupère les résultats cette fonction nous on va la définir en asynchrone et ce qu'elle va faire c'est qu'elle va commencer par attendre une seconde l'idée c'est de simuler un petit loader pour Ben voir ce que ça peut donner dans le cadre où on aura une connexion lente donc je vais créer une fonction qui va me permettre d'attendre pendant une durée donc là c'est spécifique c'est juste pendant la phase de débug pour tester les choses et ça c'est une fonction moi je sais même pas si j'ai
49:22 besoin de mettre le type de retour ça va renvoyer une nouvelle promesse qui va se résoudre au bout d'un timer qui aura la durée qui est indiquée et cette durée on va la multiplier par 1000 comme ça la durée sera en secondes ok donc là je commence par attendre une seconde ensuite je vais pouvoir faire un return fetch je vais contacter l'URL alors je me dis que ce qui serait cool ça serait que l'URL ne contienne que le chemin euh par exemple ça serait slash Pokémon et toute la partie endpo donc tout ce qui est domaine et tout ça soit dans une constante donc moi ici je vais créer une constante endpo alors c'est intéressant si jamais vous ne contactez qu'une seule et unique API ce qui est mon cas ici
50:09 donc je vais mettre ça dans une constante voilà et là ça fait que lorsque je contacte notre serveur je vais lui donner le endpoint plus l'URL donc l'URL ça sera pas vraiment l'URL ça sera le chemin ok une fois que j'ai résultat je l'ai converti depuis logison et ensuite ben je vais renvoyer le résultat au niveau de notre query function ok donc si je reviens maintenant au niveau de ma partie index je vais pouvoir lui dire que la liste des Pokémon ben on va pas la générer comme ça on va faire un const on va extraire les datas et on fera un use fetch query et on lui passera le chemin/pkémon point d'interrogation
50:55 limite é= 21 une fois que l'on a ces datas on va obtenir quelque chose qui ressemble à ça donc ce qui nous intéresse c'est results donc là on lui dira const pokémons = DATAR results alors le problème c'est que Ben pendant l'état de chargement on n' pas forcément encore les données donc je vais lui dire que dans le cas où on n pas les données je veux simplement un tableau vide alors le petit inconvénient c'est que dans le cadre de cet API là on n pas les ID on voit qu'on a des URL mais on pas les ID c'est un petit peu embêtant donc on va se créer une fonction qui permet à partir de l'URL d'un Pokémon de récupérer l'id donc ça je vais le créer dans un dossier que je vais appeler functions c'est un dossier que j'ai en général sur tous mes projets et ici je vais créer un fichier
51:40 pokémon.ts pour toutes les fonctions qui ont in trit au Pokémon donc là on va l'appeler get Pokémon ID ça prendra l'URL qui sera une chaîne de caractère et ça nous renverra un number à l'intérieur je vais faire un return de par int en base 10 et on va prendre notre URL on va split par rapport bah au Slash et on va prendre l'élément qui est à l'index 2 parce que les URL finissent par un slash à ce niveau-là il va raller donc je vais lui dire dans message je sais vraiment que ça existe il y a pas de souci maintenant dans ma partie index à ce niveau-là pour avoir l'ID du Pokémon ben je fais un get Pokémon ID et je lui passe item.url pour la partie extractor je
52:25 vais prendre l'URL du Pokémon comme clé et normalement on devrait être bon alors on va réessayer pour l'instant il rale parce que ben il arrive pas à importer t stack query donc je vais redémarrer mon application donc au niveau de mon terminal j'appuie sur la touche R et ça va relancer les choses si vous continuez à avoir des erreurs hop carrément vous faites un contrôle C et vous relancez lorsque vous installez de nouvelles librairies c'est vrai que vous avez parfois besoin de faire ça à ce niau là je vais appuyer sur ce bouton là et complètement quitter mon application histoire qu'il la relance tout seul VO si jamais vous avez vraiment des plantages comme ça ce que vous pouvez faire c'est aller à l'accueil ou déjà
53:11 quitter votre application réouvrir expo Go et cliqueer sur Pok native pour relancer votre votre application de zéro et normalement ça devrait résoudre les problème donc on obtient toujours une erreur mais c'est une erreur que l'on attendait ici il me dit que il y a un problème il n'y a pas de query client provider c'est nécessaire dans le cadre de react query donc pour le provider moi où est-ce qu'on va le placer on va le placer directement dans notre partie layout parce que c'est le composant qui va entourer les autres composants donc là je vais pouvoir créer un nouveau query client donc je fais query client é= new query client que j'importe depuis tanstack react query et ensuite autour de ma stack je vais pouvoir utiliser un query client
53:56 provider je vais lui passer le client que j'ai défini en dehors et enfin je mets ma stack à l'intérieur donc au passage si vous voulez paramétrer des choses au niveau de react query ben ça se gère ici et là mon application se remet à fonctionner et on voit qu'on a bien les différents Pokémon qui sont affichés donc voilà comment vous pouvez récupérer des données alors peut-être un teste que l'on va faire c'est le test ben lorsqu'on n' pas de données par défaut cette liste va arriver complètement vide c'est un petit peu dommage donc on a besoin d'indiquer à l'utilisateur que quelque chose est en train de se charger alors pour cela une bonne solution c'est d'utiliser une autre propriété que l'on a ici qui est la propriété list foo component qui permet de créer un composant qui va être en fin de liste et
54:42 on va lui dire ici ben si on est en train de charger des données j'ai envie que tu affiches un petit loader donc je vais avoir besoin de connaître l'état de chargement et ici je vais lui dire si on est en train de Fetcher je vais utiliser un composant qui est offert par react native qui est l'active indicateor c'est un composant qui affiche un petit spinner qui a un style différent en fonction du système d'exploitation sur lequel on est il prend paramètre une couleur donc nous on va utiliser colors.tint notre couleur rouge et ensuite on va lui dire si on avait pas en train de charger des données dans ce cas-là on met nul donc je sauvegarde et on voit qu'on a un petit loadeur le temps que les données arrivent voilà c'est une petite astuce mais ça permet d'avoir un un rendu sympa maintenant nous on a envie d'améliorer encore ce système en faisant en sorte que que lorsque je scroll tout en bas ben je continue à charger de
55:29 nouveaux Pokémon donc dans ce cas-là on va rajouter une fonction dans use fetch query et on va utiliser le use infinite fetch query donc on va créer une nouvelle fonction h use infinite fetch query donc ça va toujours prendre en paramètre une chaîne de caractère qui sera le chemin et on va retourner cette fois-ci un use infinite query cette fonction va attendre un peu les mêmes paramètres que use query donc on commence par la query key et ça sera le chemin ensuite en revanche on aura un premier paramètre qui s'appelle initial page param qui nous permettra de connaître le numéro de page initial alors dans le cadre de Pok API on n' pas cette notion de numéro de page on voit que la page suivante nous est donné directement sous forme d'URL donc je me
56:15 dis que le plus simple ça sera que dans initial page param on est directement l'URL que l'on souhaite contaacter donc nous initialement ça sera le point d'entrée plus le chemin ensuite on va avoir donc notre query function qui sera notre fonction permettant de récupérer des résultats je vais aussi la définir as synchrone ce qui me permettra de rajouter le await qui me permettra d'attendre une seconde cette fonction elle prendra un paramètre le page param donc qui sera finalement l'URL que l'on souhaite contacter et à ce niveau-là on peut faire un return fetch et on va lui donner l'URL ensuite on va lui donner des options donc ça c'est vrai que je l'ai pas fait mais normalement si on fait ça correctement on devrait rajouter ici qu'on en accepte du JSON qu'on s'attend à recevoir du JSON là c'est une API qui communique qu'en JSON donc ça
57:01 fonctionne mais voilà si on avait des API qui fonctionnerit dans d'autres langage si on précise pas ça il pourrait nous renvoyer de l'HTML ce qui serait un petit peu bizarre et ensuite on récupère donc notre JSON ok là on est bon sauf que il nous faut aussi une fonction qui s'appelle get next page param donc ça c'est une fonction qui prendra la dernière page qui a été chargée donc la le dernier et qui devra retourner la nouvelle page moi je vais lui dire ici si on a next qui est dans parce que c'est possibleon l' pas il me semble dans ce cas je retourne P dans le contraire je nul pour indiquer
57:48 que on n pas forcément de P suiv ok maintenant si je reviens au niveau de ma partie index je peux lui dire je ne veux plus utiliser mon use fetch query classique mais mon use infinite fetch query par contre le petit détail c'est que ça ne va pas nous renvoyer directement les datas mais ça va nous renvoyer dans data une variable pages qui va contenir l'ensemble des pages que l'on aura chargé moi j'aimerais bien avoir les résultats à plat de tous les Pokémon je m'en fiche d'avoir les différentes pages donc à ce niveau là je peux lui dire je veux faire un flat map et je vais prendre pour chaque page le page pointr results ce qui me permettra d'obtenir une liste à plat et après ben ça
58:34 continuera à fonctionner et on obtient toujours notre liste de Pokémon maintenant si je scroll il faut que je sois capable de continuer à charger de nouveaux Pokémon l'avantage c'est qu'ici le système est déjà
…
