Lerne zu reagieren indem du ein Spiel machst (Ausgabe 2024)

1. Bande-annonce du cours: Bonjour à tous, et bienvenue sur Discourse. L'objectif de ce cours Reactjs est de vous présenter les outils et les concepts nécessaires pour commencer à créer de véritables applications Web Je suis Daniel et je serai votre instructeur. Je fais du développement Web depuis plus de 18 ans, dans de grandes et petites organisations, et j'aime toujours ça. Vous pouvez en savoir plus sur moi sur mon site web, GSCRAFTO. J'ai commencé à apprendre à coder en essayant de créer mes propres jeux vidéo. C'est la raison pour laquelle je pense qu' apprendre doit être amusant et avoir la même sensation que lorsque vous étiez enfant lorsque vous jouiez et découvriez de nouvelles choses. À la fin de ce cours, nous développerons le jeu suivant en utilisant VGS. Ce sera un jeu de ciseaux à papier pour chaque joueur, le jeu choisira un signe aléatoire et décidera également du gagnant. Lors de la création de ce jeu, nous passerons en revue diverses photos des meilleures pratiques en matière de réaction et expliquerons comment éviter les pièges courants Le cours est également accompagné ce joli manuel imprimable que vous pourrez utiliser ultérieurement pour vous y référer facilement En suivant le contenu des vidéos ici, il y a plus de 35 pages complètes avec du code, exemples, des ressources ou des diagrammes, afin que vous puissiez obtenir une meilleure représentation visuelle de ce qui se passe. J'ai beaucoup travaillé sur celui-ci, j'espère qu'il sera utile. Commençons à suivre les cours. 2. Introduction du cours: Avant de commencer à coder, nous aimerions exposer quelques points. Tout d'abord, comment utiliser ce cours. Les informations contenues dans le discours sont assez denses pour obtenir les meilleurs résultats. Je vous conseille de suivre ce cours deux fois. La première fois, obtenez un aperçu général du cours, et la deuxième fois, faites l'exercice proprement dit. Chaque chapitre est accompagné d'un fichier de début et de fin qui facilitera le suivi du contenu. Je vous recommande de coder manuellement car cela facilitera la mémorisation. Dans ce cours, j' utiliserai VS Code et Google Chrome car ce sont mes principaux outils de prédilection, mais vous pouvez utiliser n'importe quel autre identifiant ou navigateur avec lequel vous êtes à l'aise. De plus, nous avons une configuration très minimale. Aucun travail de configuration n'est nécessaire, aucun module NPM. En fait, vous pouvez simplement consulter la source et vous obtiendrez le code qui s'exécute dans le navigateur, les connaissances requises. D'un point de vue réel, il s'agit d'un cours adapté aux débutants. Mais si vous ne savez rien à propos de React, il peut être judicieux de suivre mon autre cours pour débutants sur React que j'ai ici. Vous êtes censé en savoir un peu plus sur des sujets tels que le composant ou le fonctionnement d'une variable d'état de réaction. Considérez-le comme un cours qui vous fournit un modèle de réflexion sur la façon de créer de vraies applications. Nous verrons les meilleures pratiques, nous créerons des bogues et nous verrons également comment les corriger. Extraits de code. Personnellement, je n' aime pas les longs cours. Je crois que je n'ai jamais terminé un cours de plus de 2 heures. Afin de réduire le temps de ce cours, j'ai défini de nombreux extraits de code tels que celui-ci Vous pouvez tous les voir ici dans le dossier VS code où j' ai tous les extraits de code que j'utilise pendant le cours La raison pour laquelle je définis tous ces extraits de code est qu' il m'est assez difficile de parler dans une langue étrangère et d'écrire du code en même temps Mais je veux aussi vous faire gagner du temps lorsque vous ne faites que me regarder, comment je tape des choses dans l'éditeur de code. Ceci étant dit, passons à notre première leçon où nous utiliserons react, render et react to root pour créer l'échafaudage 3. Rendre l'application avec ReactDom createRoot: Jetons un coup d'œil à ce que nous avons dans le modèle de discours de départ. Il existe ces importations simples. Ici, nous importons simplement Reactome et Babel comme nous l'avons fait par le passé en janvier Ici, nous avons également un bloc de script qui est en texte. Babble n'est pas Javascript, c'est du texte Babble Et la raison en est que nous aurons besoin de babble et de cette importation pour pouvoir écrire X dans notre code A. J'ai créé cette configuration dans l'idée de ne pas trop compliquer les choses, ne pas commencer par des modules MPM, des serveurs Web, des outils ou des choses Pour l'instant, nous n'avons que ce simple fichier HTML d' index simple. Écrivons maintenant notre premier composant de réaction. Ce composant de réaction s'appellera app. En général, l'application est le point d'entrée de toute application React. Je vais écrire ici une application constante. Cette application est une fonction simple qui renverra quelque chose comme «   bonjour » depuis l'application React. Au fait, ce que vous voyez ici est x. Cela sera interprété par Babble et sera traduit en Javascript simple À ce stade, si je sauvegarde et actualise la page, rien ne se passera. D'ailleurs, nous avons créé ce div avec l'idée de root, celui-ci servira conteneur principal pour notre React Ap. Maintenant, étant donné que nous voulons insérer le React Ap dans cette plongée, la première chose que je dois faire est de venir ici et d'écrire une nouvelle variable nommée container. Ce conteneur sera égal à l' élément document get by ID root. Je vais cibler ce dé. Ensuite, je vais devoir créer une nouvelle racine. Pour cela, j'écrirai const root. Celui-ci est égal à React Create Root. Je vais lui donner en paramètre le conteneur que je viens de créer dans la ligne précédente. Enfin, j'ajouterai une nouvelle ligne où je dirai route Render App Render à l'intérieur de cette route, cette application à partir d'ici. Si je dois enregistrer et rafraîchir la page, nous verrons que nous avons maintenant ce gentil bonjour de la part de Reactapp Le contenu qui se trouvait auparavant dans la route ID a maintenant été remplacé par le contenu de notre React, parlant de ce rendu root. Cela a déjà été introduit dans les nouvelles versions de React. C'était une autre syntaxe, mais celle-ci s'accompagne de quelques améliorations de performances. J'ajouterai dans le manuel de ce cours le lien vers un article qui indique certaines des mises à jour introduites dans le rendu root. Cool. Nous avons fait de notre premier un composant. Ensuite, nous verrons comment créer les composants nécessaires pour créer le jeu lui-même. 4. Échafaudage des principaux composants: Maintenant que nous avons créé notre application Act principale, examinons de nouveau l'architecture de nos composants. Voici à quoi ressemblera le jeu à la fin. Comme nous pouvons le voir ici, nous avons trois types de composants. Tout d'abord, il y a le volet joueur. Ce composant comporte deux instances, l'une pour le joueur rouge et l' autre pour le joueur bleu. Il y a aussi ce tableau de résultats qui indiquera qui a gagné la partie. Enfin, il y a le composant du jeu qui inclura tout cela. Allons maintenant fabriquer l' échafaudage pour tous ces composants Je vais revenir à l'index HTML. La première chose que je vais faire est de venir ici et de créer un composant de jeu. Pour cela, je vais écrire Constant Game. C'est une fonction, une fonction de base. Comme le composant de l'application, il comportera le contenu suivant. Je vais écrire ici un dip qui ne fera que renvoyer pour le moment ce simple texte. Maintenant, dans l'application, au lieu de renvoyer ce H, je vais renvoyer une nouvelle instance du composant de jeu. Si nous voulons actualiser, nous verrons maintenant que ce que nous avons ici est le contenu que nous avons déclaré dans le composant du jeu. Mais cela ne suffit pas. Si je dois revenir ici, nous verrons qu'à l'intérieur du composant du jeu, il y a des joueurs et aussi ce plateau Resu Allons-y et créons ces deux-là également. Ensuite, je vais créer le composant joueur. Celui-ci sera nommé joueur. Ce sera une fonction qui renverra quelque chose comme ça, juste un texte simple. Enfin, il y a aussi le composant du tableau de résultats qui sera également une fonction. À l'intérieur de cette fonction, je dirai qu'il n'y a pas encore de résultats. Parce que dans le tableau des résultats, nous devrons montrer qui a gagné la partie. Passons au composant du jeu ici, créons toute cette arche de composants. Tout d'abord, j'aurai besoin deux instances du type player. Ce que je vais faire ici, c'est créer une instance et la seconde pour l'autre joueur. Ensuite, j'ajouterai également ce tableau de résultats que nous avons créé. Si nous jetons un dernier coup d'œil ici, nous verrons que nous avons également besoin de ce bouton de démarrage du jeu. Je vais revenir ici. Ici, je vais juste écrire un simple bouton HTML. Celui-ci n'est pas un composant, c'est juste un simple élément HTML. Je vais économiser. Et maintenant, si nous allons actualiser, nous voyons que nous avons deux composants pour joueurs, le bouton et enfin le mot résultat. Mais pour l'instant, les composants de nos joueurs sont exactement les mêmes, ils contiennent juste ce texte standard. Dans la leçon suivante, nous verrons comment personnaliser ces composants à l'aide d'accessoires. Et aussi comment nous apprendrons à nos composants à choisir un élément aléatoire entre de la pierre, du papier ou des ciseaux. 5. Ajouter des accessoires: Maintenant que l'échafaudage des composants est prêt, examinons notre Encore une fois, vous verrez qu' un composant du joueur est rouge et l'autre est bleu. Et des symboles Ramble leur sont également attribués. Dans notre état actuel, les deux composants ont exactement la même apparence. Il s'agit simplement d'un div avec un texte standard. Ce que je veux faire avec vous dans les deux prochaines leçons, c'est d'abord attribuer des paramètres à ces composants pour savoir que celui-ci est rouge et l'autre est bleu. Dans la leçon suivante, nous verrons également comment commencer par dessiner des éléments aléatoires pour ces composants. Commençons par les paramètres des composants. La première chose à faire est de venir ici dans la déclaration des composants et de leur attribuer une couleur. Ici, je dirais que je veux une couleur bleue pour ce joueur. Ensuite, je dirai que je veux une couleur rouge. C'est ainsi que nous envoyons un paramètre cette valeur au composant lui-même. Pour les lire, je vais devoir ajouter ici un nouveau paramètre props Il s'agit d'un paramètre par défaut que chaque composant de fonction peut recevoir ici. Ce que nous pouvons faire, c'est simplement lire la valeur du paramètre que nous envoyons. Nous pouvons donc voir ici des accessoires de cette couleur, disons que lorsque nous actualiserons, nous verrons ici que nous avons composante de couleur bleue et l'autre est rouge Mais nous pouvons faire un pas en avant. Nous pouvons tirer parti des instructions de structuration Javaskip. Ce que je peux faire ici, c'est venir ajouter la déclaration de restructuration du Colo. Au lieu d'avoir ici des accessoires de cette couleur, je peux simplement dire que maintenant je veux la couleur et que les choses fonctionneront exactement comme avant Mais on peut même faire un pas en avant et faire toute la déstructuration directement dans la déclaration de la fonction Ce que je veux dire ici, c'est que nous allons obtenir un objet en paramètre et faire une structuration directe directement à partir d'ici Si nous enregistrons et actualisons, vous verrez que tout est comme avant. Mais maintenant, le code est un peu plus clair. Voyons dans la leçon suivante comment nous pouvons tirer des éléments aléatoires pour cette carte de joueur. 6. Signes aléatoires: Nous avons maintenant les paramètres de couleur envoyés aux composants. C'est plutôt cool car nous pouvons utiliser ces couleurs pour rendre un composant du joueur rouge et l'autre bleu. Mais ce que nous n'avons pas encore abordé , ce sont ces éléments aléatoires. À la fin de la leçon, ce que je veux faire, c'est être capable d'extraire des éléments aléatoires. Pour l'instant, il n'y aura que des chaînes et les affichera dans les composants comme nous le faisons ici. Revenons à notre exemple ici. Je vais d'abord ajouter le commentaire pour savoir ce que nous faisons ici. Et je définirai une nouvelle constante, les principaux signes. Cette constante ne sera qu'un simple tableau contenant des chaînes de caractères. Chaque chaîne représentera une valeur possible pour les signes, pierre, le papier ou les ciseaux de ce tableau. Maintenant, je peux revenir dans le composant joueur. Je vais ajouter un autre commentaire, disant que nous générons un index aléatoire pour choisir un signe aléatoire. Il s'agira d'une nouvelle constante nommée random index. Cet indice aléatoire sera une fonction mathématique. Il renverra des valeurs aléatoires 0 à 2 Avec cet indice aléatoire créé, nous pouvons maintenant créer une autre constante nommée signe aléatoire L aléatoire Donnons-lui un nom. Ce signe aléatoire sera le signe d'un indice aléatoire. Maintenant que j'ai ce signe aléatoire, je peux venir ici et remplacer tout le nom, tout le contenu de la carte du joueur par ce tableau. Cela signifie que ce qui provient des couleurs choisit et c'est ce que nous avons généré ici. En fait, je l'ai renommé Random Sign. OK, maintenant, si nous actualisons, vous verrez que le joueur bleu choisit le papier tandis que le joueur rouge choisit la pierre. Ensuite, je vais actualiser à nouveau, actualiser à nouveau, et ainsi de suite. Vous verrez qu'à chaque actualisation, un nouveau signe aléatoire est sélectionné pour un joueur donné. 7. Styles CSS dans React: Dans l'état actuel des choses, notre application semble assez ennuyeuse. Venons-y ajouter quelques styles CSS. Pour cela, je vais devoir créer un nouveau fichier. Ce fichier sera nommé Styles that CSS. Ici, je vais coller les styles CSS nécessaires. Eh bien, ce n'est pas un cours sur le CSS. Vous pouvez jeter un œil à ces déclarations et vous verrez que beaucoup d'entre elles sont assez explicites, comme définir un Carlo en arrière-plan, aligner le texte, etc. Maintenant que nous avons créé ce fichier CSS, lions-le à notre fichier de réaction principal ici. Le fait que je souhaite importer une nouvelle feuille de style, et celle-ci provient de styles CSS. Maintenant, si nous actualisons, nous verrons que nous avons déjà commencé à avoir des styles de base dans notre application. Nous avons l'arrière-plan, la couleur du texte est différente, l'alignement, etc. Mais aucun style n'est encore appliqué ici, par exemple aux composants du lecteur. Pour cela, je vais devoir faire le lien, par exemple, la classe player et la classe container avec ces dips que nous avons dans notre application React Je vais devoir ajouter un nom de classe ici. Je dirais que je veux un nom de classe pour le joueur. Et ici, dans l'autre, lorsque nous aurons le conteneur principal pour le joueur x, j'ajouterai le nom de classe du conteneur. Dans des conditions normales, il s'agira simplement d'une classe égale à un conteneur ou d'une classe à un joueur. Mais étant donné que la classe fonctionne déjà, la réserve fonctionne en Javascript, nous devons ajouter ce nom de classe à celui-ci. Revenons et donnons du frais. Nous allons voir maintenant que nous avons ces deux éléments à l' écran et qu'ils sont plutôt jolis. Je vais revenir à 100 % du navigateur, mais il y a une chose qui manque. Allons jeter un autre coup d'œil au dernier exemple. Je vais ouvrir notre design final. Vous verrez ici que le panneau s'est inversé. Celui-ci pointe vers la droite et celui-ci vers la gauche. Ce que nous pouvons faire ici, c'est entrer dans le CSS et ajouter une autre règle. Je dirais que je veux le deuxième enfant du type joueur soit transformé. Au fait, ce que j'ai fait ici est une imbrication CSS native. J'ajouterai dans le manuel de ce cours un lien où vous pourrez en savoir plus à ce sujet. Mais ce qui est bien ici, c'est qu' après avoir ajouté cette règle, vous verrez maintenant que ce texte est maintenant essentiellement inversé Laissez-moi ouvrir un autre dossier. Cette règle que nous avons ajoutée ici, cette transformation de Scalix moins un de retourner la deuxième carte du joueur Lorsque j'y ajouterai un vrai panneau, il pointera vers l'autre côté. 8. Définition de styles en ligne: Nous avons mis en place quelques styles de base, mais il reste encore de la place. Par exemple, nous n' avons pas de couleur d'arrière-plan pour ces objets et nous n'avons pas non plus d'image pour les panneaux tels que de la pierre, du papier ou des ciseaux. C'est ce que nous voulons faire dans cette leçon. Commençons par la couleur de fond. Si nous regardons à quoi ressemblent les choses en ce moment, nous avons ce paramètre de couleur qui entre dans le composant. Ce paramètre de couleur peut être utilisé comme couleur de fond, car ici nous aurons du rouge ou du bleu. C'est exactement ce que nous voulons mettre comme toile de fond ici. Pour cela, je vais utiliser le style en ligne afin de définir ce style en ligne Ici, style equal celui-ci reçoit en paramètre un objet script Java complet. Je voudrais dire que le colog d'arrière-plan doit être exactement la valeur du paramètre que nous recevons ici Ce sera la couleur de fond et elle sera égale à un coloque Rafraîchissons maintenant. Nous voyons que nous avons les cartes du joueur avec la couleur de fond voulue. Cet objet intégré deviendra, avec le temps, de plus en plus complexe Une bonne idée est de venir ici et de l'extraire en tant qu'objet distinct ici, notre bon style en ligne, ce style en ligne sera exactement ce que nous avons Je transmettrai cet objet directement au style intégré. Les choses ressembleront exactement à ce qu'elles étaient avant, mais nous avons ce bel objet isolé auquel nous pouvons ajouter d'autres valeurs plus tard. Parlons maintenant un peu des images qui seront placées à l'intérieur des cartes du joueur. Au lieu d'avoir ici une pierre ou des ciseaux. Nous aurons des images réelles pour cela. J'ai déjà préparé quelques ressources et je vais les partager avec vous. Maintenant, je viens de mettre les PNG sur mon site web. Je vais ouvrir ces images, vous verrez qu'elles sont exactement pour le rocher, une pour le papier et l' autre pour les ciseaux. Étant donné que nous utilisons des fichiers PNG, nous pouvons également avoir des arrière-plans transparents Et si nous examinons de plus près le format de l'URL, ce que nous avons là, c'est quelque chose comme ça. D'accord ? C'est l'adresse du site Web. Mais ici, nous pouvons remplacer ce modèle par ce signe aléatoire. Grâce à ce signe aléatoire, nous aurons les valeurs de la pierre, du papier ou des ciseaux. Allons-y et faisons-le. Je vais venir créer une nouvelle constante. Et cette constante sera égale à cette URL complète. Et après ce signe aléatoire, ce PNG, c'est plutôt sympa parce que je peux venir ici maintenant et pour le style en ligne, ajouter cette image de fond Revenons en arrière et actualisons-nous. Nous allons voir maintenant que ces images sont placées dans nos composants, et qu'il nous reste effectivement un peu de texte. Je peux donc maintenant venir le supprimer car nous n'en avons plus besoin. Voyons le dernier exemple en action. Ça a l'air plutôt sympa. Par exemple, chaque fois que je vais actualiser, vous verrez que de nouveaux signes sont dessinés pour chaque joueur. Enfin, n' oubliez pas que nous avons tout cela dans les styles présentés ici pour les cartes de joueur . Nous avons la répétition de l'arrière-plan, la taille de l' arrière-plan, l'origine de l'arrière-plan, etc. Et en fait, ce sont les règles CSS qui nous permettent donner à ces images une belle apparence à l'intérieur de la carte de joueur. C'est ça. Passons à la leçon suivante. Nous verrons comment ajouter cette jolie animation lorsque nous appuierons sur le bouton de démarrage du jeu. 9. Le crochet useState(): Maintenant que les styles intégrés sont configurés, examinons de nouveau la version finale de notre exemple Notre jeu part d' un état vide. Vous pouvez voir maintenant que chaque joueur a un état vide. Aucun signe n'a encore été dessiné pour un joueur. n'est que lorsque j'appuie sur ce bouton de jeu de style que l' animation de shuffling démarre et que chaque joueur obtient un signe aléatoire À l' heure actuelle, nos joueurs, chacun d'entre eux, commence déjà avec un signe donné. Et la raison en est que lorsque nous commençons avec un style intégré, nous définirons cette image d'arrière-plan fonction du signe aléatoire généré dès la sortie de la boîte C'est quelque chose que nous voulons changer. Mais plus encore, ce que nous voulons changer ici, c'est le fait que je veux que le jeu démarre lorsque j' appuie sur ce bouton. Si nous examinons le diagramme de flux de données, ce que nous voulons faire à partir de là , ce sont les deux parties. Lorsque nous appuyons sur le bouton Start Gate pour envoyer un événement à chaque composant joueur. Voyons comment nous pouvons le faire. Tout d'abord, ce que nous devons faire, c'est changer la façon dont les choses se passent ici. Au lieu de générer ce signe aléatoire à chaque fois que le composant est rendu, nous voulons extraire le design dans une variable d'état. Nous voulons donc utiliser un crochet à état U. Dans des conditions normales, vous importerez un état U, vous direz donc importer l'état U depuis React. Mais étant donné que nous n'utilisons pas de serveur Web, nous avons cette configuration très minimale. Nous devrons apporter une légère modification ici. Et j'importerai l'état U comme so const et j' appliquerai l' instruction de déstructuration en Javascript à la réaction Mais gardez à l'esprit que si vous utilisez une application de recréation, vous devrez l'importer telle qu'elle est ici. Maintenant que l'état U correctement importé, je vais venir ici. Dans le composant player, je vais définir la nouvelle variable d'état créée à l'aide de cet état U et ce sera sin et set sign. C'est normal de commencer par une variable Neal, car nous voulons ici démarrer les composants du lecteur sans avoir sélectionné quelque chose Cette variable d'état définie remplacera ce signe aléatoire que nous avons ici. De plus, nous pouvons extraire tout ce qui se trouve ici, toute la génération aléatoire Nous voulons l' extraire dans une fonction. Nous devrions pouvoir appeler cette fonction. Lorsque nous appuierons sur le bouton, je remplacerai tout ce que nous avons ici par cette fonction. Si vous jetez un œil, cette fonction pick random sin contient exactement les mêmes lignes qu'auparavant. Seulement, à la fin, nous avons défini le signe aléatoire dans cette variable d'état de signe défini et tout est enveloppé dans une fonction agréable. Maintenant, une chose que nous devons comprendre est de savoir comment faire pour que cette fonction de sélection de signes aléatoires soit liée au bouton. Comment pouvons-nous faire en sorte que lorsque nous appuyons sur ce bouton Démarrer le jeu, cette fonction soit appelée. Je vous laisse le soin de faire vos devoirs. Essayez de le faire avant de commencer la vidéo suivante. Je pense qu'il existe plusieurs façons de le faire, mais si vous le souhaitez comme conseil, vous devriez essayer d'utiliser le hook user fa. 10. Événements déclencheurs dans le wip sur les composants pour enfants: Comment avez-vous pu trouver une solution à ce problème ? Lorsque nous appuyons sur le bouton Démarrer le jeu pour envoyer des événements à ces composants A afin que de nouveaux signes aléatoires soient sélectionnés. Il existe plusieurs moyens de résoudre ce problème. Voyons un plan pour ce que nous voulons faire. abord, depuis le composant jeu, nous allons transmettre un nouveau paramètre nommé heure de début au composant joueur. À l'intérieur du composant joueur, nous surveillerons l'heure de début via le crochet d'effet d'utilisation. Lorsque cette heure de début sera modifiée , nous appellerons la méthode pick random sign. Enfin, dans le composant jeu, nous mettrons à jour l'heure de début lorsque le bouton est enfoncé. Voyons tout cela en action. Tout d'abord, je vais entrer dans le volet jeu. Ici, je vais créer une nouvelle variable d'état. Comme nous l'avons dit, celle-ci s'appellera heure de début. Il dispose également de cette fonction de réglage de l'heure de début. Il partira de la valeur nulle, étant donné que vous ne voulez pas aucun signe aléatoire soit détecté au début. Maintenant que cette heure de début est atteinte, je vais passer ici dans les deux composants du joueur. Je vais envoyer le paramètre de l' heure de début. Je l'enverrai pour le premier composant, puis je l'enverrai également au composant suivant. Ce paramètre d'heure de début doit être mis à jour à un moment donné. Pour cela, je vais créer une nouvelle fonction. Cette fonction sera une constante nommée start game. Ce jeu ressemblera à cela, il fixera donc l'heure de début à la date. Nous allons maintenant choisir la date et l'heure actuelles du navigateur, et nous le mettrons à jour chaque fois que quelqu'un appuiera sur le bouton de démarrage du jeu. Enfin, nous utiliserons la fonction onclick. Lorsque quelqu'un appuie sur le bouton, nous lançons le jeu. Maintenant que nous savons que les composants du joueur auront ce nouveau paramètre d'heure de début, je vais le déclarer ici et laisser entrer dans les paramètres du composant. Nous devrons regarder quand cette heure de début sera modifiée. Pour cela, nous devons importer le hook use effect. Je vais revenir ici et j' appellerai également l'effet. N'oubliez pas que si nous avions un webs normal, vous devrez l' importer d'ici Importez-le directement depuis React. Étant donné que cela est maintenant créé, ajoutons le hook d' effet d'utilisation à l'intérieur du composant player à l'intérieur de celui-ci. Nous allons faire ce qui suit. Nous allons vérifier s'il y a une heure de début. N'oubliez pas qu'au départ, cette heure de début est nulle. Si nous modifiions l'heure de début, nous appellerons le signe « pick random ». N'oubliez pas comment fonctionne l'effet d'utilisation. L'effet obtient, sous forme de paramètre, un tableau de valeurs. Chaque fois que ces valeurs sont modifiées, la fonction incluse dans l'effet d'utilisation est déclenchée. Voyons voir, maintenant c'est en action. Je vais actualiser maintenant. Au départ, nous n'aurons aucune valeur dans les composants du joueur, mais si nous appuyons sur le bouton de démarrage du jeu, nous aurons d'abord des éléments aléatoires tirés au sort par la suite. Plus et ainsi de suite. En gros, nous avons trouvé un moyen de démarrer le jeu lorsque nous appuyons sur ce bouton. Plutôt cool. Dans le chapitre suivant, j' ajouterai également cette animation de brassage lorsque vous appuyez sur ce bouton 11. Animations et setInterval: Regardons encore une fois le dernier exemple. Lorsque nous appuyons sur le bouton, vous verrez que cette animation s' exécute chaque fois qu' un signe aléatoire est dessiné. Comment pouvons-nous implémenter cela dans notre exemple ? Parce que pour le moment, il suffit d'appuyer sur le jeu des étoiles et nous avons directement les éléments dessinés, mais aucune animation. Encore une fois, ici, il existe plusieurs façons de le faire. Il existe également une solution purement CSS que nous pouvons appliquer. Mais encore une fois, nous serons la solution qui nous permettra de jouer avec certains mécanismes ou de réagir et voir comment éviter certains bugs. Essayons-le. Ce que nous allons faire ici, c'est utiliser cette fonction d'intervalle défini. Il s'agit d'une fonction Javaski, qui ne dépend pas de React En gros, cette fonction fait, c'est que je l'appellerai transmettre une fonction qui sera exécutée pour chaque retard. En gros, disons que je veux exécuter du code chaque seconde, je vais en mettre 1 000 car cela fait 1 million de secondes. Et puis ce code sera exécuté chaque seconde lorsque le cycle sera terminé, lorsque je n'aurai plus besoin de ce code pour être exécuté, je devrai appeler cette fonction intégrale claire. Voyons donc comment implémenter cela dans notre exemple. Tout d'abord, nous devons savoir combien de fois l'animation a été exécutée. Jetons un autre coup d'œil quand nous verrons que cela dure un certain temps et qu'après cela, cela s'arrête. Cela est dû au fait que nous avons fixé une durée de 20 animations. Je vais devoir venir ici et créer une nouvelle variable d'état nommée Animation Counter. Ce compteur d' animations partira de zéro. Celui-ci indiquera combien de fois notre animation a été diffusée. Et dans le signe de sélection aléatoire, j'ajouterai la fonction set inteval Nous voulons que du code s'exécute à 100 millisecondes, dix fois par Ce code est exactement celui-ci qui trouvait auparavant directement à la racine de la fonction. Maintenant, il sera déplacé dans la fonction intégrale définie, nous voulons choisir un nouveau signe aléatoire à 100 millisecondes Mais ce que nous voulons faire, aussi que cette animation cesse de fonctionner à un moment donné . Je vais venir ici, je vais vérifier si le compteur d'animations est supérieur à 20. Nous devons effacer l' intégrale pour arrêter l'animation. Et ce que j'ai ensuite transmis dans la fonction intégrale claire est exactement celle-ci, les références que j'ai faites ici. Une dernière chose que nous devons faire. C'est aussi pour incrémenter à un moment donné, ce cotter d'animation Chaque fois que cette intégrale s'exécute, je dirai animation conta ici Nous devrions l'augmenter d'un. Ne soyez pas tenté de faire quelque chose comme ça , car si nous le faisons ainsi, nous nous retrouverons avec quelques bugs. N'oubliez pas que l'état défini, lorsqu'il s'exécute sur des valeurs précédentes, nous devons l'appeler ainsi. Il sera appelé via une fonction qui aura accès à la valeur précédente et nous incrémenterons cette valeur plus un OK, Dock, maintenant nous allons l'exécuter. Appuyons sur le bouton de démarrage du jeu. Vous verrez que l' animation est opérationnelle, ce qui est plutôt cool. Je vais recharger la page pour le moment. Si vous jouez avec cet exemple, vous verrez qu'il y a deux bogues pour la leçon suivante avant de commencer. Tout d'abord, essayez de trouver quels sont les bogues, les deux cas, et essayez-le. Essaie de les réparer. On se voit dans la prochaine leçon alors. 12. Ajouter useRef() et useEffect(nettoyage: Nous avons terminé la dernière leçon avec quelques bogues dans notre code. Je vous ai laissé comme devoir, l'idée d'essayer de trouver ces bugs et de les corriger. Tout d'abord, voyons ce qu'ils sont. Il y a deux bogues principaux dans notre code, et j'ai créé cette image pour qu'ils puissent les montrer. Tout d'abord, lorsque nous démarrons l'animation, vous verrez qu'elle s'exécute indéfiniment. Cela ne s'arrête pas après 20 descentes, même si nous avons ici une condition très claire selon laquelle si une rencontre est supérieure à 20, nous devons nous arrêter. C'est le premier bogue et peut-être aussi le plus important si nous démarrons l'animation. Ensuite, j'avance rapidement, j'appuie sur ce bouton, vous verrez que l'animation commence à devenir étrange. Ça va trop vite, ça devrait aussi être le cas, ça ne s'arrête pas. Enfin, il existe également un troisième bogue qui est le plus facile à corriger. Vous verrez que si nous allons maintenant dans l'image contenue dans le fichier, vous verrez que nous avons cette valeur nulle, ce fichier PNG, le fait que notre fichier essaie de récupérer cette valeur nulle, ce fichier PNG. Commençons par ce fruit facile à portée de main. Essayons d'abord de corriger cette erreur qui apparaît dans la console. La raison en est en fait cette ligne, l'image de fond. Ce que nous faisons ici, c'est que nous essayons de récupérer l'image sur le site merdique de JS, et nous avons ici le panneau Au départ, vous pouvez voir que ce signe commence par une valeur nulle. C'est la raison pour laquelle nous obtenons cette erreur, car ici, nous essayons de récupérer les actifs, peu importe. Après cela, ce PNG, une solution assez simple à celui-ci sera de tester si le signe existe. Si le signe existe, essayez de récupérer l'image Sinon, ne faites rien, récupérez simplement ici une chaîne vide. Actualisons-le et vous verrez maintenant que l'erreur n'est pas présente dans la console. Il s'agit du premier bogue. Passons maintenant à la plus complexe. Le fait que lorsque nous démarrons l'animation, nous n'obtenons aucune erreur, mais l'animation s'exécute indéfiniment, même si cette condition est présente ici. Cela se produit parce que cette partie est comme si l'état défini dans React n'était pas synchrone. Lorsque nous essaierons d' exécuter cette condition, ne sera pas encore mise à jour. Par exemple, si je joue une rencontre sur console , que je rafraîchis et que je démarre le jeu, vous verrez que c'est zéro pour toujours Et la raison en est qu'il n'a pas eu l'occasion de faire la mise à jour complète. Une façon de résoudre ce problème consiste à tout encapsuler dans la fonction de compteur setanym et utiliser cette valeur précédente comme référence. Par exemple, j' ai créé cet exemple dans le manuel du cours . Ce que nous pouvons faire, c'est mettre ici un gros emballage et mettre tout le code à l'intérieur du comptoir. Et nous saurons maintenant avec certitude que la valeur de l'état est mise à jour et qu' elle possède la bonne valeur. Mais ce n'est pas génial car il existe en fait l'intégrale de la fonction pick rand, un état défini, c'est un peu trop. Une autre chose que nous pouvons essayer de faire est d'utiliser des références. Il est agréable de travailler avec les références en plus de les utiliser dans React. Les formulaires sont également parfaits pour stocker valeurs qui sont conservées entre les rendus mais qui n' ont pas besoin d'être affichées sur l'UY lui-même. Ce que je dois faire ici, c'est remplacer ce compteur, n'importe quel compteur par n'importe quelle contre-référence. Étant donné que nous voulons utiliser ce travail, étant donné que F est en fait une référence, je devrai l'importer à partir de la valeur réelle de la référence enregistrée dans le champ actuel de la référence. Ce que nous devons faire ici, c'est lorsque nous démarrons l'animation, c'est prendre ce compteur et dire que le courant est égal à zéro. Après cela, au lieu d'utiliser la variable d'état définie, je le ferai. Revenez à la référence et dites que je veux l' augmenter d'une unité. Enfin, ici, je peux simplement utiliser celle-ci au lieu de l' ancienne variable d'état. Voyons comment ça se passe. Je reviendrai me rafraîchir après cela. Si nous appuyons sur Démarrer le jeu. L'animation s'arrête maintenant après 20 itérations. Actualisons à nouveau et redémarrons le jeu. Et l'animation est maintenant arrêtée après 20 sorties , ce qui est génial. Nous avons corrigé un autre bogue. Enfin, résolvons le dernier bogue. Je vais maintenant revenir à l'exemple, je vais commencer à appuyer très vite sur le bouton de démarrage du jeu. Vous verrez que l'animation va bien trop vite, qu'elle devrait le faire, il y a deux manières en fait. Il existe plusieurs moyens, mais deux principaux moyens de résoudre ce problème. Une façon de le faire est d'utiliser une autre variable d'état et de désactiver ce bouton pendant que l'animation s'exécute, ce qui est normal. Mais passons à un autre sujet, nous réagissons et il s'agit de la fonction use effect clean up. En gros, ce qui se passe lorsque nous appuyons très vite sur ce bouton, le paramètre de l'heure de début est modifié. Nous appelons cette fonction de signe aléatoire plusieurs fois. En fait, nous faisons plusieurs intervalles qui s'exécutent et changent de signe très rapidement. C'est la raison pour laquelle l' animation agit ainsi. Une chose que nous pouvons faire est d' utiliser la fonction de nettoyage de l'effet. L'effet a une fonction dont nous avons juste besoin pour renvoyer une fonction donnée, comme. Donc, cette fonction, que j'ai ici, sera appelée chaque fois qu' un nouvel effet d'utilisation sera exécuté. C'est ainsi que nous veillons à éliminer tous les effets d'une précédente course. En fait, ce que nous voulons faire ici, c'est effacer cette intégrale. En gros, nous voulons également appeler cela ici. Nous devrions avoir quelque chose comme ça. Mais vous voyez que l'intégrale réelle est créée dans cette fonction et nous en avons besoin ici. Une autre chose que nous pouvons faire est de créer une deuxième référence, celle-ci, je vais simplement copier cette fonction ici, et je vais dire que l' intégrale O est ici. Au lieu de créer simplement une variable locale qui ne sera pas exposée à la portée de l'effet d' utilisation, je peux venir chercher cette référence. Je dirais que celui-ci est égal à une intégrale définie. Je vais me débrouiller ici. Mais maintenant, je peux aussi éclaircir ce point. En fait, étant donné qu' il ne s'agit que d'une fonction d'une ligne, je peux tout remplacer par celle-ci pour la rendre un peu plus belle. Maintenant, réexécutons l'exemple. Vous verrez qu'à chaque fois j'appuie très vite sur le bouton, l'animation fonctionne toujours comme il se doit. Chaque fois que j'appuie à nouveau sur le bouton, celui-ci est exécuté et l'intervalle actuel est effacé. C'est ainsi que nous avons pu réparer tous nos aboiements. Dans la leçon suivante, nous verrons comment utiliser l'API de contexte A pour communiquer des valeurs d' un composant à un autre. 13. Fournisseurs de conseils dans React: Maintenant que notre application est de nouveau gratuite, passons peut-être à la dernière étape avant de décider du gagnant du jeu et de terminer l'application. Cette partie concerne la manière dont nous communiquons entre les composants. Jetons un coup d'œil à notre dernier exemple. Nous avons ces deux cartes de joueur à l'intérieur. Certains signes sont tirés au hasard. l'autre côté, il y a le composant Resualboard, celui que nous avons ici qui devrait savoir ce chaque joueur a sélectionné afin de décider qui a gagné la Nous pouvons le faire en transmettant les accessoires d'un composant à l'autre, mais dans ce cas, ce sera un peu plus délicat Nous pouvons le faire, mais ce sera plus difficile. Un autre inconvénient de cette approche est le fait que nous finissons par trop forer les accessoires C'est ainsi que l'on appelle les choses lorsque nous transmettons trop de composants d' un composant à un autre. Une autre façon de résoudre ce problème et de jouer avec certaines fonctionnalités de React consiste à utiliser le contexte. Voyons à quoi cela ressemble. Ce que nous voulons faire, c'est mettre en place un contexte de réaction. Une fois que chaque joueur a choisi un signe aléatoire, il communiquera au contexte quel signe a été choisi. Ensuite, notre composant du tableau de résultats captera les deux signes du contexte Il décidera qui a gagné la partie. Vous pouvez considérer React Context comme un magasin de données général pour l'application. Je vais inclure dans le manuel de ce cours une vidéo que j'ai réalisée il y a quelque temps expliquant plus en détail le fonctionnement du contexte des actes. Mais en gros, vous pouvez l'imaginer ainsi comme un endroit général où nous pouvons placer des données auxquelles chaque composant peut accéder à partir d'une application donnée. À la fin des deux leçons, cette leçon et la suivante, nous voulons obtenir un élément du tableau de résultats qui ressemble il sache ce que le joueur rouge a choisi et ce que le joueur bleu a choisi. Voyons comment traduire tout ce discours en code. La première chose que je dois faire est de créer un contexte pour notre jeu. Celui-ci sera nommé exactement de la même manière que le contexte du jeu, le contexte du jeu est égal à celui de création du contexte. Ce contexte de création est une fonction issue de React. Si nous créons simplement un contexte, nous ne pouvons pas en faire trop car nous devons également créer un fournisseur de contexte ici. Je vais créer un fournisseur de contexte de jeu basé sur le contexte que nous avons créé ici. Nous pouvons prendre ce fournisseur que nous venons de créer, le transmettre à notre application et intégrer tout le jeu dans le fournisseur de contexte de jeu. Nous pouvons lire dans chacun de ses sous-composants ce que nous situons dans le contexte du jeu à ce stade Si je dois enregistrer le fichier et l'actualiser, vous verrez que nous avons quelques problèmes avec ce qui s'est passé ici. La raison pour laquelle le LUI a disparu est que nous sommes en train de rendre le fournisseur de contexte de jeu. Et en effet, nous nous transmettons en tant qu'enfants. Nous sommes en train de transmettre le jeu, mais ici, chez le fournisseur actuel, nous ne divulguons pas ces enfants. Il va donc falloir venir ajouter un nouveau nom de propriété. Enfants. En fait, il s'agit d'une propriété par défaut pour tout composant React. Rafraîchissons-le et vous verrez que maintenant les choses sont comme avant. Seulement, notre jeu est désormais intégré à ce fournisseur. Une chose intéressante que nous pouvons faire est de venir ajouter un état pour le fournisseur. Et cet état sera transmis à toutes les composantes de ces fournisseurs. Voyons comment nous pouvons le faire. Je vais venir ici et ajouter fournisseurs de jeux ce que nous devons contenir dans notre État. Si on y pense, ce seront les signes du joueur, qu'est-ce que le joueur rouge a sélectionné. De plus, qu'est-ce que le joueur bleu a sélectionné ? Avec cela, je peux maintenant venir ici et transmettre ces valeurs que le joueur fait pivoter et la fonction Seta Je vais le transmettre au fournisseur. À ce stade, les choses seront comme avant, il n' y aura aucune erreur dans la console, mais nous pourrons simplement lire ces valeurs dans n'importe quel sous-composant du fournisseur de contexte Nous verrons dans la leçon suivante comment mettre à jour ces valeurs et comment les lire. 14. Le crochet use, concu: À la fin de la leçon précédente, nous avons réussi à créer et à configurer ce contexte de jeu. Nous avons intégré notre jeu à ce fournisseur de contexte de jeu. Pour rappel, permettez-moi vous montrer ce que nous essayons de faire ici. Nous essayons de lire les signes détectés par ces deux cartes de joueur et de les replacer ces deux cartes de joueur dans leur contexte réel. Ensuite, nous pouvons utiliser dans le composant du tableau des résultats, les signes, afin de pouvoir décider qui a gagné la partie. Le but de cette leçon est de lire ces éléments et de les définir lorsqu'ils sont sélectionnés. Commençons par lire le contexte du jeu dans un composant. Je vais entrer dans le volet joueur. Ici, j'écrirai le contexte, le contexte, le contexte du jeu suivants. Cela signifie que nous utilisons un autre crochet. Nous devrons l'importer d'ici. Ce hook permet d'accéder à un contexte donné, dans notre cas, c'est le seul contexte dont nous disposons, le contexte du jeu. Pour rappel, nous avons défini ces deux variables d'états en fonction du contexte, les valeurs rouge et bleue pour chaque joueur. Laissez-moi enregistrer celui-ci. Je vais enregistrer le contexte. Voyons si nous avons effectivement ces deux éléments présents lors de l'utilisation de la console. Et vous pouvez voir ici ce que nous obtenons de cet objet de consologie et de ce qu'il renvoie, tout d'abord, les signes du joueur que nous avons configuré et également la fonction de définition pour cette variable d'état C'est plutôt cool car nous pouvons utiliser la fonction de sélection de signes aléatoires et définir ces deux valeurs, le rouge et le bleu. Mais avant d'y aller, nous pouvons améliorer un peu cette ligne. Au lieu de n'écrire que cela, je peux utiliser l'instruction structurante En plus du contexte du jeu, je peux dire que je souhaite récupérer la fonction définie et les signes du joueur. Étant donné que nous avons maintenant cette méthode de définition des signes des joueurs, je devrais venir ici, l' appeler et je dirais, d' accord, définissez les signes des joueurs. Mais maintenant je l'ai écrit ici dans le if, lorsque le dernier élément est dessiné. Maintenant, la question est : que dois-je écrire ici ? Et gardez à l'esprit que nous essayons ici de mettre à jour un élément. Ce que nous essayons de faire ici , c'est de mettre à jour un objet dans un état de réaction. Parce que revenons-y, retour dans le fournisseur, vous verrez que celui-ci est un objet réel. La façon de le faire est d' utiliser également une valeur précédente. Ce que nous allons faire ici, c'est répartir tous les éléments que nous avons déjà dans l'objet et simplement remplacer ce dont nous avons besoin, dans notre cas, remplacer la couleur du joueur et le signe aléatoire sélectionné Dans cet esprit, revenons maintenant au tableau de Zulus et voyons ce que nous avons dans le contexte Je vais aller ici, je vais ajouter ces deux lignes. Tout d'abord, j'extrais signes du joueur à partir du contexte Ensuite, j'ajoute un autre niveau de structuration, et celui-ci extrait exactement les valeurs bleues et rouges Laisse-moi enregistrer les deux. Je vais dire bleu. Rafraîchissons-le et commençons maintenant le jeu. Vous verrez que nous sommes partis de valeurs nulles et que nous avons fini par obtenir le papier et la pierre exactement comme nous en avons ici. C'est plutôt cool car nous pouvons maintenant compléter ce composant de boîte résolue en montrant ce que chaque joueur a dessiné En gros, cette partie vient d'ici. Je vais supprimer la console car nous n'en avons pas besoin. Tout d'abord, nous devons vérifier si les deux éléments sont définis Dans le cas où l'un de ces éléments bleu ou rouge n'est pas défini, nous ne devrions pas encore renvoyer de résultat exactement comme nous l'avons fait en ce moment. Après cela, si les deux éléments sont définis, nous pouvons écrire cette ligne. Permettez-moi de me rafraîchir. Je vais commencer le jeu dans un premier temps, il n'y a aucun résultat. Ensuite, il me dira, d'accord, ce joueur bleu a sélectionné le rock, ce joueur rouge a sélectionné le rock. Et c'est exactement ce que nous avons également ici. Nous avons décrit ici un exemple de la façon dont nous pouvons utiliser le contexte A afin envoyer facilement des valeurs d'un composant à un autre sans avoir à transmettre trop de propriétés. Passons à la dernière pièce manquante du puzzle et voyons comment nous allons désigner le gagnant. Alors, comment pouvons-nous écrire quelque chose comme ça ? Le gagnant est le joueur bleu ou le joueur rouge. 15. Décider du gagnant: La dernière pièce du puzzle sera de déterminer qui a gagné le jeu et de montrer le gagnant. D'ailleurs, dans cette leçon, nous n'allons pas introduire de nouveaux éléments de réaction, c'est juste du Java pur Nous déterminerons le gagnant dans le tableau des résultats. Pour cela, je vais créer une nouvelle fonction. Celui-ci s'appellera Win. Il nous donnera les paramètres, les valeurs rouge et bleue pour les joueurs. Après avoir créé cette fonction, nous devrons également l'appeler A dans le x renvoyé du composant. Nous allons utiliser l'algorithme suivant. Non. Pour déterminer le gagnant, nous allons vérifier s'il y a un match nul, si les symboles sont égaux. Ensuite, nous vérifierons si le rouge gagne. S'il n'y a pas de match nul et que le rouge n'a pas gagné, on peut supposer que le joueur bleu gagne. Commençons par vérifier la chose la plus simple. Pour vérifier si nous avons un match nul, il suffit de vérifier si le rouge est égal au bleu. Si nous voulons, cette chaîne vérifiant si nous sommes le joueur rouge, c'est un peu plus délicat, on dirait. Nous avons donc listé ici les trois principales conditions dans lesquelles le rouge va gagner. Ce sont les combinaisons possibles qui feront du joueur rouge un gagnant. Si l'une de ces conditions est présente, nous retournerons cette chaîne. Enfin, le plus simple où nous n'aurons même pas besoin de ne rien cocher car nous avons déjà vérifié si nous en avons un rouge est celui-ci. Le joueur bleu renverra simplement la chaîne si ce n'est pas vrai ou si ce n'est pas vrai. Voyons maintenant tout cela en action. Je vais rafraîchir. Je vais commencer le jeu, enfin, à la fin, il me montrera qui a gagné la partie et qui a effectivement raison, parce que le papier bat le rock. Passons à un autre tour. Ici, c'est pareil. Ciseaux Rock Beats. Oui, c'est ça. C'est ainsi que nous écrivons une fonction pour vérifier s'il y a un gagnant. D'ailleurs, si vous pensez que c'est un peu trop, j'ai également ajouté dans le manuel une refactorisation des dysfonctionnements. À mon avis, il semble que c'est un peu plus compact, qu'il contient moins Mais je pense que c'est un peu plus difficile à lire. Je ne sais pas, peu importe ce qui fonctionne, tu peux choisir et tout ira bien. 16. Projet de classe: Maintenant que nous avons appris toutes ces nouvelles choses, il est temps de les mettre en pratique. Nous voulons ajouter quelques nouvelles fonctionnalités à notre jeu. Tout d'abord, nous voulons avoir un panneau de suivi des scores ici. Et chaque joueur doit également avoir son propre nom. Et ces noms sont modifiables. Voyons la version finale de Home Work en action. J'appuierai sur le bouton Star Game une fois qu'une partie sera terminée, vous verrez que nous avons maintenant un compteur ici. Le bleu a une victoire et le rouge n'en a aucun. Et nous pouvons également remettre le score à zéro. Et comme nous avons ajouté ces noms, je peux maintenant aussi venir les modifier et dire, d' accord, je veux que mon nouveau nom soit Daniel et cela sera mis à jour ici. Et au lieu du processeur, je veux jouer, disons contre l'IA et le nom y sera mis à jour. En règle générale, essayez d'abord de tout faire vous-même, et si cela ne fonctionne pas, regardez la prochaine session de cette vidéo. Je vais partager avec vous quelques conseils sur la façon de créer ces nouvelles fonctionnalités à la fin si vous le souhaitez, vous pouvez également consulter la section des devoirs où vous pouvez voir le code qui nous permet de créer tout cela. À partir de maintenant, je vais partager avec vous quelques conseils pour créer ces nouvelles fonctionnalités. Gardez donc à l'esprit qu'à partir de maintenant, nous avons quelques spoilers ici Il suffit de consulter cette section uniquement si vous avez initialement essayé de jouer vous-même. Tout d'abord, je vais commencer par cette fonctionnalité en ajoutant des noms aux joueurs. Je pense que celui-ci est un peu plus facile à mettre en œuvre. Presque toutes les modifications doivent être effectuées ici, dans le composant lecteur. La première chose que je vais faire ici est d'ajouter un paramètre de joueur. Ce paramètre sera directement issu du jeu. Ensuite, avec ce paramètre de joueur, je vais créer une variable d'état du nom du joueur. Lorsque nous cliquons sur ce nom, j'utilise cette fenêtre. L'invite de fenêtre est une fonctionnalité de Javaski, et non une réaction, qui nous permet de créer des fenêtres comme celle-ci, où vous pouvez saisir le nouveau nom, que vous avez vu ici Après avoir lu la nouvelle valeur dans l'invite de fenêtre, nous devons mettre à jour l'état. Et avec cela, nous devrions compléter la nouvelle fonctionnalité. D'ailleurs, il y a aussi un bonus où nous pouvons essayer extraire tout cela dans un composant du nom du joueur, en incluant simplement le joueur, ce composant du nom du joueur. Passons maintenant à la deuxième fonctionnalité, la partie du tableau de bord. Cette partie est ici. Tout devrait figurer ici sur ce forum. C'est ici que devrait figurer le tableau de bord. Nous devrions ajouter en tant que mise en page un bouton. Cela peut être un titre ou quelque chose comme ça, mais aussi un paragraphe avec ce texte. En ajoutant celui-ci, nous allons compliquer un peu l'état du composant Resulusborg Ce que nous devrons faire ici, c'est ajouter plusieurs valeurs d'état pour le score bredé, score bleu, et aussi un gagnant actuel ou nous pouvons également ajouter un objet centralisé, nous regroupons l'état en un seul objet. Une autre chose que nous devrons faire est d'utiliser le hook use effect pour remplacer celui-ci. Nous avons ici le gagnant, étant donné que lorsque nous choisirons le gagnant, nous mettrons également à jour le score et le score, il s'agit également d'une variable d'état. Nous nous retrouverons dans une boucle infinie de rendu Re. En gros, nous devrons supprimer celui-ci d'ici et le placer dans un crochet d'effet d'utilisation qui surveillera apparition de nouvelles valeurs pour le bleu et le rouge. OK, une dernière chose que vous devez garder à l'esprit est que lorsque vous mettez à jour le score, vous devez toujours le mettre à jour en fonction de la valeur précédente. Nous devrions avoir quelque chose comme ça dans l'état précédent et précédent plus un. Enfin, vous pouvez extraire tout ce que nous avons ici dans un composant de tableau de bord après avoir essayé vous-même de créer ces fonctionnalités, vérifier la solution et voir comment elle s'est déroulée, comparer les unes aux autres Et ne vous contentez pas non plus de vous attarder uniquement sur ces fonctionnalités. Laissez libre cours à votre imagination et essayez d'ajouter toutes sortes de fonctionnalités ici. Mais il est très important de profiter du processus. Amusez-vous bien et bon codage. 17. Conclusion: nous a permis de réaliser beaucoup Notre exemple nous a permis de réaliser beaucoup de choses en partant de zéro. Nous avons créé un mini-jeu React entièrement fonctionnel. Pendant ce temps, nous avons également vu des choses telles que comment démarrer un projet React à partir de zéro Mais aussi comment nous pouvons définir les composants et les accessoires. Nous avons également vu comment utiliser l'état, l'état de réaction pour mettre à jour les composants UY. Mais il est également très important de savoir comment mettre à jour un état en fonction de la valeur précédente de l'état. l'avenir, nous avons vu comment utiliser les deux styles CSS de base, mais aussi comment utiliser des styles intégrés afin de donner une belle apparence à nos applications Nous avons également vu comment utiliser le hook use effect afin de surveiller les valeurs et de déclencher des mises à jour. est également très important de savoir comment utiliser la fonction de nettoyage de l'effet d'utilisation afin d'éviter les bogues complément des variables d'état. Nous avons vu comment utiliser le F pour conserver des valeurs persistantes entre les rendus Re et comment configurer des éléments tels que fournisseurs de contexte afin partager des données entre les composants et bien plus encore J'espère que ce cours vous a été utile et que vous avez appris de nouvelles choses. Félicitations pour avoir terminé le cours et merci pour le temps que vous nous avez accordé. N'oubliez pas que vous pouvez également consulter le manuel principal de ce cours. Et si vous avez des questions, n'hésitez pas à m' écrire un e-mail à Daniel Gongcraft pour aller N'oubliez pas que vous pouvez également consulter mon site Web où je publie régulièrement de nouveaux articles afin d'améliorer votre art du codage Web Je vous souhaite bonne chance et continuez à coder, amis. Au revoir.