Maîtriser React Hooks : créer des applications React modernes avec des projets

1. Introduction du cours: Bienvenue dans le cours sur la maîtrise des Hooks React et création d'applications Web à l'aide de React moderne Je m'appelle Faisel, et je serai votre professeur pour ce cours Je serai votre guide tout au long ce voyage complet dans le monde des React Hooks. Maintenant, en tant que développeur, entrepreneur et éducateur passionné , j'ai conçu ce cours pour vous aider à exploiter le véritable potentiel des composants fonctionnels de React grâce ce concept étonnant de React Aujourd'hui, dans le monde technologique trépidant d'aujourd'hui, maîtrise des React Hooks change la donne Ils vous permettent d'écrire du code plus propre et efficace tout en résolvant des problèmes complexes de manière simple. Que vous débutiez avec React, que vous soyez un tabloper de niveau avancé ou que vous soyez une personne de niveau intermédiaire, ce cours a quelque chose à offrir à Maintenant, dans ce cours en particulier, nous commençons par expliquer ce que sont les hooks React, pourquoi les hooks sont importants et pourquoi ce concept de hooks existe en premier lieu. Ensuite, nous parlons de hooks comme nous State Hook et nous comprenons comment nous en servir. Nous parlons de hooks comme useFhok, use effect hook, nous couvrons use De nombreux crochets sont donc abordés dans ce cours en particulier, et à la fin, nous apprenons également comment vous pouvez créer vos propres crochets personnalisés. Aujourd'hui, au cours de ce parcours d'apprentissage et de compréhension des hooks, nous construisons également de nombreux projets. D'accord, nous développons quelques projets qui couvrent l'utilisation de ces hooks. Ainsi, non seulement vous apprenez les concepts, mais vous pouvez également les mettre en œuvre dans de vrais projets. Et c'est ce qui rend ce cours totalement pratique. J'utilise donc un minimum de diapositives et je me concentre essentiellement sur toutes les explications pratiques. C'est donc sur cela que je vais me concentrer. Je m'en tiens essentiellement à l' IDE et je m'assure tout expliquer à l'aide d'exemples contenus dans l'ID lui-même. À la fin de ce cours, je peux vous garantir que vous aurez non seulement une base solide dans le monde avec le concept des React Hooks, mais que vous aurez également la confiance nécessaire pour créer des applications dynamiques et évolutives basées sur React. Ce cours est parfait pour les développeurs qui souhaitent se tenir au courant des tendances actuelles grâce à des pratiques de réaction modernes et développer des projets pratiques en cours de route afin d'approfondir leur compréhension. Je suis très heureuse de vous faire suivre le cours. Êtes-vous prêt à améliorer vos capacités de réaction et à vous plonger dans le monde des React Hooks ? Si c'est le cas, embarquons dans ce voyage, et je vous verrai tous sur le parcours. 2. Bienvenue dans React Hooks : une révolution fonctionnelle: Salut, voilà. Il est maintenant temps de commencer à parler React Hooks et de comprendre ce qu'ils sont. D'accord ? Maintenant, chaque fois que vous créez des applications Web et que vous créez des fonctionnalités, d'accord ? Quel que soit le langage de programmation que vous utilisez, quel que soit le framework que vous utilisez, il y aura toujours des scénarios dans lesquels vous souhaiterez ajouter un comportement dynamique aux éléments de la page Web, n'est-ce pas ? Par exemple, en cliquant sur un bouton ici, par exemple, je souhaiterais que certaines pages ou certaines parties de la page soient mises à jour simplement en cliquant sur ce bouton. R : le truc ici, c'est que seule cette partie est censée être mise à jour et non la page entière. Mais dans le développement Web traditionnel, si vous cliquez sur le bouton, la page entière se si vous cliquez sur le bouton, la page entière recharge juste pour mettre à jour cette partie en particulier C'est le développement Web traditionnel. Mais vous savez qu'avec React, vous pouvez ajouter un comportement dynamique aux composants. rendre interactifs et réactifs sans avoir à recharger complètement la page OK ? Cela est donc possible grâce au concept de crochets. accord ? Désormais, les hooks ne sont des fonctionnalités spéciales qui vous permettent d' ajouter un comportement dynamique au composant. Et il ne s'agit simplement pas de mettre à jour la page sans la recharger complètement, d'accord ? Beaucoup d'autres choses peuvent être possibles avec les React Hooks. Donc, mettre à jour la page sans recharger complètement n'est qu'un exemple que je vous ai donné pour vous aider à comprendre accord ? Par exemple, j'ai cette base de code ici. OK, ça vient de Code Sandbox. Il s'agit d'une base de code accessible au public développée par quelqu'un. Et ici, j'ai vu ce code dans lequel il y a un compteur créé en utilisant React. OK. Donc ici, je peux dire incrément, vous pouvez voir, et ceci est décrément Maintenant, en cliquant sur ces boutons, il s'incrémente et se décrémente sans Et cela est possible à l'aide des React Hooks. OK ? Maintenant, c'est une possibilité. Il existe de nombreuses possibilités. Il existe différents types de hooks disponibles dans React que vous pouvez utiliser pour créer et faire différents types de choses. Et chaque hook existant possède une sorte de spécialité dans laquelle vous pouvez l'utiliser dans votre application. C'est bon. Alors, que sont les crochets ? Hooks vous permet d'ajouter des fonctionnalités interactives à votre application de manière simple, et cela vous aide à rendre votre application plus interactive là où les choses changent au fur et à mesure que vous interagissez plutôt qu'une page Web statique, n'est-ce pas ? C'est donc très utile, vous savez, ce type de fonctionnalité, tout comme ce type de fonctionnalité, est très utile si vous créez une sorte de formulaire, et selon ce que l'utilisateur tape ou le type de manipulation que vous souhaitez effectuer pour la saisie de l'utilisateur, toute sorte de mise à jour des données. Par exemple, l'utilisateur a tapé ici et vous souhaiterez peut-être que quelque chose soit mis à jour à différentes parties de la page Toutes ces mises à jour peuvent être effectuées en douceur, offrant ainsi à vos utilisateurs une meilleure expérience, n'est-ce pas ? Cela rend votre application Web très attrayante et réactive. Maintenant, dans la documentation officielle des hooks React, vous verrez que les hooks vous permettent d'utiliser différentes fonctionnalités de réaction de vos composants, d'accord ? Et comme je l'ai dit, différentes sortes de choses vous pouvez faire différentes sortes de choses avec les React Hooks, et c' est ce que l'on appelle fonctionnalités de réaction ici OK ? Maintenant, en ce qui concerne les hooks, il existe également des hooks intégrés fournis par React, et vous pouvez également les combiner pour créer les vôtres. Vous pouvez donc même créer votre propre crochet personnalisé, non ? Et ici, sur le côté gauche, vous verrez la liste, d'accord ? Utilisez donc Action State, utilisez callback, utilisez Context Ce sont tous des hameçons, non ? Il y en a plusieurs. OK. Nous parlerons des plus importants. Par exemple, certains des crochets les plus utilisés sont use state. Donc, si vous travaillez sur React, vous verrez que l'état est beaucoup utilisé. L'utilisation de la référence est souvent utilisée. L'effet d'utilisation est également un hook toujours utilisé dans la base de code React. Nous allons donc parler hooks qui sont très courants. Et une fois que vous aurez obtenu quelques hooks, il vous sera très facile de créer vos propres applications React qui utilisent ou exploitent la fonctionnalité React directement depuis les composants. C'est bon. Voici donc React Hooks. Il y en a pas mal que nous devons apprendre et comprendre comment nous pouvons les utiliser et pourquoi ils existent, n'est-ce pas ? Chaque React Hook possède une certaine capacité. Et en fonction de vos besoins, vous décidez quel hook vous souhaitez connecter que vous souhaitez implémenter dans votre application. D'accord ? Il s'agit donc de React Hooks. J'espère que cela vous a donné un bon aperçu de ce que sont les hooks et pourquoi ils devraient être utilisés dans React. 3. Présentation de React State : les bases des applications dynamiques: Salut, voilà. Il est donc temps de commencer à parler des états dans React, et il est important que nous comprenions ce concept afin de pouvoir utiliser use state hook dans React, qui est l'un des hooks les plus couramment utilisés dans les applications React, n'est-ce pas ? Alors, qu'est-ce qu'un État ? Désormais, un état est un type d'information que votre application Web peut vouloir stocker. C'est bon. Maintenant, bien sûr, vous pouvez voir cette application ici. OK. Et ici, en haut, vous avez quelques réglages. D'accord ? Maintenant, ce paramètre me permettra passer en mode clair ou en mode sombre, afin que je puisse l'activer, d'accord. Il y a aussi ce bouton. Je pense que c'est pour le mieux. C'est donc pour les traductions, je crois. C'est bon. Mais c'est aussi un paramètre. Si je veux voir le site Web dans une autre langue, je pourrais choisir une autre langue à partir d'ici. Si je ne veux pas le mode sombre, je peux changer de mode à partir d'ici, non ? Donc, ce qui se passe ici, c'est que ce site Web, React point EV, stocke une sorte de paramètre ou de préférence pour moi en tant qu'utilisateur, n'est-ce pas ? Je suis donc un utilisateur. J' interagis avec ce site Web. Je suis en train de configurer la préférence en mode sombre. C'est donc en gardant cette préférence à l'esprit que cet utilisateur souhaite voir ou lire ce site Web en mode sombre, et chaque fois que je le visite, il m'indique cette préférence. Chaque fois que je visite, il me montre le site Web de cette façon particulière, n'est-ce pas ? Il s'agit donc d'une sorte d'information qu' il détient sur son utilisateur. Hein ? Maintenant, considérez cela comme un marque-page que vous utiliseriez pour lire un livre Imaginez donc que vous lisez un roman et que, fur et à mesure que vous progressez dans les chapitres, vous conservez un signet pour vous rappeler où vous vous êtes arrêté, n'est-ce Donc, ce signet, qui change au fur et à mesure que vous avancez ou que vous revenez parfois sur le chapitre précédent, changerait, n' Il représente donc votre position actuelle dans le livre. C'est une information que vous essayez de retenir à propos de votre parcours de lecture, n'est-ce pas ? C'est donc une information, non ? C'est-à-dire que ces informations stockées par n' importe quel type d'application Web dans le monde de React sont connues sous le nom d'état. OK. L'état ressemble donc au signet dont nous parlons ou même à ce paramètre car il mémorise ces informations sur l'utilisateur, n' est-ce pas ? Le signet est également quelque chose dont l'application se souviendra à propos de l'utilisateur pour savoir où il s'est rendu. Quel est le parcours de l'utilisateur, n'est-ce pas ? Donc, pour le dire simplement les états sont un moyen de réagir comme les états dans React. C'est un moyen pour les composants React de conserver certaines informations, qui peuvent changer au fil du temps et dont il faut s'en souvenir. D'accord ? N'oubliez pas cette définition. Les états dans React sont donc un moyen pour composant React de conserver certaines informations, qui peuvent changer au fil du temps et dont il faut s'en souvenir. D'accord ? Maintenant, dans cette définition particulière, deux choses sont importantes. Donc je passerais simplement à la définition ici dans le bloc-notes, d'accord ? Et je pense que c'est une bonne chose parce que vous pouvez également voir la définition. C'est bon. Il y a donc deux choses que je disais, qui sont importantes, d'accord ? Il y a certaines choses, je dirais, d'accord ? La première est que les informations peuvent changer. D'accord ? C'est quelque chose que vous devez garder à l'esprit. Les informations peuvent changer. Et ces informations sont conservées en tant qu'état dans React, d'accord ? Et il faut s'en souvenir. D'accord ? Ici, dans l'exemple que j'ai donné, il faut s'en souvenir, n'est-ce pas ? Tout au long de mon voyage. Maintenant, si je passe à l'onglet d'apprentissage, ce que je veux dire ici , c'est que si je passe à l'onglet d'apprentissage, cela ne passe pas en mode blanc. C'est toujours le mode sombre, non ? On se souvient donc de l'application que cet utilisateur souhaite voir l' ensemble de l'application en mode sombre, n'est-ce pas ? Il en va de même pour le signet. Hein ? L'application se souviendrait que, hé, l'utilisateur a fini de lire jusqu'à présent. Il s'en souviendra donc et continuera à se souvenir. Demain, si vous ouvrez l'application, l'application de lecture ou le livre, ce n'est pas comme si le signet était passé à la première page, n'est-ce Ainsi, lorsque créez des applications interactives pour le personnel, vous vous retrouverez souvent dans une situation où certaines parties de votre interface devraient changer en réponse à l'interaction de l'utilisateur. Par exemple, un clic sur un bouton, comme je l'ai dit, ici, un clic sur un bouton change l'ensemble du site Web, n'est-ce pas ? Et il y aura des scénarios dans lesquels vous souhaiterez peut-être également modifier une partie particulière du site Web, d'accord ? Comme cliquer sur un bouton, soumettre un formulaire ou simplement survoler un élément, d' accord, survoler l'élément avec le pointeur de la souris D'accord ? Donc tout cela pourrait être géré avec l'aide de l'État, d'accord ? J'espère que c'est assez clair. D'accord ? Donc, si vous vous souvenez de cette définition ici, state in react est un moyen pour un composant de réaction. Pour conserver certaines informations qui peuvent changer au fil du temps et dont il faut également s'en souvenir. D'accord ? C'est une définition vraiment bonne et la plus simple que je puisse avoir pour cela. D'accord ? Maintenant, il y aura quelques questions que vous pourriez avoir, d'accord ? Vous allez dire : « Hé, pourquoi ne pas simplement utiliser des variables, d'accord ? Viens par ici. Vous avez dit que l'état dans React est un moyen pour composant React de conserver certaines informations qui peuvent changer au fil du temps. Vous pouvez également le faire avec des variables, non ? Vous pouvez stocker certaines informations dans des variables, et ces informations peuvent également changer, condition qu'elles ne soient pas déclarées comme constantes, n'est-ce pas ? Cela est possible avec des variables. Alors pourquoi adopter ce nouveau concept d' État et introduire une complexité inutile ? Le truc ici, c'est que les états sont différents de ceux des variables. Comment ? Je vais vous donner un aperçu, d'accord, mais vous ne comprendrez une image complète que lorsque vous le verrez en action Mais je vais vous donner un aperçu de leurs différences. Ainsi, l'état dans React, la magie de l'état dans React réside dans le fait que chaque fois qu'il change, React sait qu'il doit automatiquement restituer le composant ou une partie de celui-ci pour refléter ces changements sur l'interface utilisateur. C'est la magie de l'État. D'accord ? Donc les mises à jour, le reflet des mises à jour. Ainsi, chaque fois que vous cliquez dessus , par exemple, ici, si je clique dessus, vous pouvez voir la page Web entière ou cette page en particulier être restituée automatiquement. Ce composant est rendu automatiquement en fonction de ce clic sur le bouton. D'accord ? Demain, il se peut que j'aie un bouton qui pourrait introduire un changement dans certaines parties de l'application. Donc, cliquez sur ce bouton. L'état change et comme l'état change, partie de l' application qui est liée à cet état est restituée. D'accord ? Je ne sais pas si vous êtes capable de comprendre cela, mais la magie réside dans le nouveau rendu, ce qui n'est pas possible avec les variables. D'accord ? Avec les variables, vous devez tout gérer manuellement dans React. Mais avec les états, tout est pris en charge car c'est une fonctionnalité fournie par React. Et vous le verrez bientôt quand je vous en ferai une démonstration, d'accord ? La magie de l'état dans React réside donc dans le fait que chaque fois qu'il change, React sait qu'il doit automatiquement restituer le composant pour refléter les modifications sur l'interface utilisateur. D'accord ? C'est important. Maintenant, une autre question que certains étudiants pourraient se poser est celle-ci. OK, en quoi est-ce différent des accessoires ou des propriétés que nous transmettons au composant OK. Maintenant, je voudrais ajouter ici que les accessoires, également appelés propriétés , sont comme un paramètre ou un attribut que vous transmettez au composant, d'accord ? Ils sont en lecture seule, tout d'abord, vous ne pouvez pas non plus modifier les propriétés, n'est-ce pas ? Et ils ne passaient que dans un seul sens, par exemple du composant parent au composant enfant, n'est-ce pas ? Les accessoires sont donc différents. Le cas d'utilisation est différent. Cela ressemble à des informations, à des paramètres ou à des attributs que vous souhaiterez peut-être transmettre à un composant en particulier. Ils sont différents des États, non ? N'oubliez donc pas qu'un état dans React est un moyen pour un composant de conserver certaines informations. La conservation des informations est donc un élément important de cette définition, et ces informations peuvent changer au fil du temps et doivent être mémorisées. C'est important. D'accord ? En quoi est-ce différent des variables si on vous le demande lors d'un entretien ? Oui, c'est différent car React it fonctionne avec les composants React. Les états fonctionnent avec des composants React. Ils sont liés aux composants React, et React sait comment restituer le composant automatiquement en cas de changement d'état. D'accord ? Ce n'est pas possible avec les variables, n'est-ce pas ? Et elles sont différentes des propriétés, accord, parce qu'elles sont en lecture seule. Les propriétés sont en lecture seule, je veux dire, non ? Et les États sont différents. J'espère donc que c'est assez clair. J'espère avoir pu vous expliquer cela en termes très simples, d'accord ? Vous gagnerez en clarté. Au fur et à mesure que vous commencerez à utiliser des états et que vous verrez votre premier programme utiliser des états de réaction, vous comprendrez à quel point c'est incroyable, n'est-ce pas ? J'espère donc que cela vous a été utile. 4. Maîtriser l'état dans les composants fonctionnels avec React Hooks: Alors maintenant, il est temps de passer à l'action l'État américain et de réagir, d'accord ? Et dans le même but, j'ai créé ce projet en particulier. C'est un projet très simple. OK. Ici, vous pouvez voir que c'est le code que j'ai obtenu en utilisant wheat et react. Et ici, j'ai ce composant d'application. Et ce composant de l'application affiche essentiellement un titre. OK ? Il s'agit juste d'imprimer «   Bonjour » ici. OK ? Et cette application est affichée ici en points moyens, d'accord ? Man point SX. Je veux dire, d'accord ? y a donc littéralement rien dans le composant de l'application, et ce que nous allons faire, c'est apprendre comment vous pouvez utiliser les états dans React à l'aide de hooks, et nous allons le faire avec l'aide en créant un exemple, en fait, et cet l'aide en créant un exemple, exemple sera un contre-exemple célèbre, vous savez Donc, en gros, c'est l'un des meilleurs exemples que je trouve pour en savoir plus sur les états, car vous pouvez mettre à jour la valeur du compteur. Augmentez la décrémentation et jouez avec. D'accord ? Sans parler de la sortie, c'est la sortie que vous voyez de cette application. C'est bon. Donc, ce que je ferais, c'est tout d'abord, puisque nous voulons utiliser Use State Hook, d'accord ? Je vais donc vous dire, tout d'abord, ce qu'est l'état d'utilisation. L'état d'utilisation est donc un hook qui nous est fourni par React, qui nous permet d'ajouter des états au composant fonctionnel. C'est donc un composant fonctionnel, non ? Composant fonctionnel, c'est-à-dire des composants créés à l' aide de fonctions, n'est-ce pas, dans React. Et si vous voulez ajouter un État ici, nous voulons afficher un compteur ici, non ? Le compteur est donc une information que nous voulons afficher. Le compteur, nous devrions pouvoir l' incrémenter et le décrémenter Nous devrions donc avoir deux boutons là-bas, non ? Donc, afin de savoir quel le numéro du compteur, afin de savoir quel est le numéro du compteur, nous avons besoin de l'état. Et comment ajouter un état à un composant fonctionnel ? Nous nous servons de notre État, non ? Il s'agit donc d'un hook qui nous est fourni par React, et il nous facilite la vie lorsque nous utilisons des fonctionnalités telles que l'état dans les composants fonctionnels. C'est bon. Maintenant, je vais venir ici. Comment en faites-vous usage ? OK ? Je vais donc dire import, et je vais dire ici, use state, quelque chose comme ça. OK ? Et vous pouvez le voir remplir automatiquement dans l'état américain à partir de React. C'est bon. Donc, ce que cela fait, c'est que nous importons use state Hook depuis le module React. Maintenant, le module React a ce nom d'exportation, que nous pouvons importer, n'est-ce pas ? Et nous allons nous en servir ici. OK ? Maintenant, ici, dans l'application, je vais définir un état, qui sera appelé count. OK ? Je vais donc dire const, et je vais d'abord vous montrer la syntaxe, puis je vais vous expliquer ce que signifie la syntaxe et ce qui se passe dans les coulisses. C'est bon. Donc je vais dire compter, et je vais avoir défini le décompte ici et je vais utiliser l'état d' utilisation ici. Quelque chose comme ça. Et je vais passer un argument ici, qui est zéro, et je vais le terminer par un point-virgule OK ? Nous avons donc ajouté un état dans notre application. Cet état est appelé comte, n'est-ce pas ? Et c'est une fonction qui nous aide à mettre à jour cet état particulier. OK ? Alors maintenant, nous utilisons l'état d'utilisation ici pour créer un état. Maintenant, ce qui se passe, c'est que chaque fois que vous utilisez use state, il s' agit d'une fonction intégrée qui renvoie un tableau avec deux éléments OK ? Il renvoie un tableau avec deux éléments. Le premier élément est l'État lui-même. Et le deuxième élément est une fonction permettant de mettre à jour cet état particulier. OK ? Il a donc renvoyé deux éléments, et ce que nous avons fait, c'est utiliser la déstructuration ici, déstructuration des tableaux parce que cela revient sous forme de Nous avons donc utilisé la déstructuration des tableaux, et nous avons obtenu le nom de l'état, comme l'état en tant que nombre et la fonction en tant que nombre défini, n'est-ce pas ? C'est ainsi que fonctionne l'État, d'accord ? N'oubliez pas qu'il renvoie l'état et une fonction pour mettre à jour cet état particulier. C'est bon. C'est donc quelque chose que nous avons pour compter. Vous allez me demander, c'est quoi ce zéro ici ? OK ? Donc, zéro n'est rien d'autre que la valeur actuelle ou la valeur de départ avec laquelle vous souhaitez que l'état soit initialisé Ainsi, lorsque ce nombre sera créé, sa valeur initiale sera nulle. OK ? J'espère donc que objectif de cette ligne est clair. OK, pour le dire simplement, nous créons un état ici, et chaque fois que nous créons un état dans React, nous utilisons un hook d' état comme celui-ci, dans lequel vous pouvez transmettre n'importe quelle sorte de valeur par défaut ou initiale que vous voulez avoir, d'accord ? Et use state renvoie un tableau composé de deux éléments. L'un est l'état lui-même, et l'autre est la fonction de mise à jour de cet état. OK ? Nous avons donc obtenu à la fois l'état et la fonction ces deux éléments ici en utilisant le concept de structuration RAD accord ? J'espère que ce que nous faisons est clair. Maintenant, ce que je ferais, c'est ici, au lieu de dire bonjour, je dirais contre-valeur, d'accord ? Je dirais contre-valeur. Et maintenant, cet état ressemble à une variable JavaScript, n'est-ce pas ? Je peux donc utiliser cette syntaxe et afficher le nombre ici. Maintenant, dès que je l'enregistre et si je viens ici, vous verrez que la valeur du compteur est zéro. OK ? Si tu en gagnes cinq ici. Et si je sauvegarde ceci, vous verrez que la valeur du compteur est de cinq. Nous voyons donc la valeur initiale comme zéro et cinq. Je vais donc m'en tenir à zéro. Si vous voulez que le compteur commence à cinq, vous pouvez avoir cinq comme valeur initiale ici. C'est bon. C'est fait. Maintenant, comment mettre à jour l'état ? Vous avez donc cette fonction set count que vous pouvez utiliser pour mettre à jour l'état. C'est bon. Donc, ce que je ferais, c'est que j' aurais un bouton ici. Bien entendu, nous déclencherions les mises à jour à l'aide de ce bouton. OK. Et j'appellerai ce bouton un incrément. Et j'aurai encore un bouton ici et je l' appellerai comme décrément ici, d'accord ? Nous allons d'abord travailler sur l'incrément et nous verrons comment augmenter la valeur d'un compteur OK ? Je vais donc dire qu'il suffit de cliquer ici. C'est en un clic. Et ici, je dois déclencher le décompte des sets, non ? Par conséquent, set count acceptera un paramètre, qui est la valeur de comptage mise à jour. Donc, ce que je ferais, c'est avoir une fonction flèche ici, et je dirais set count, quelque chose comme ça, et je dirais la valeur actuelle de count plus un. OK ? C'est avec ça que je veux l' initialiser, non ? Et je vais venir ici. Vous pouvez voir ces deux boutons, incrémenter, décrémenter, vous pouvez Et vous pouvez voir que nous avons juste augmenté le nombre ici, n'est-ce pas ? Avons-nous fait autre chose ? Nous venons d' incrémenter le nombre, et simplement en incrémentant le nombre, le composant est rendu à nouveau et vous voyez la valeur mise à jour du nombre s'afficher ici rendu à nouveau et vous voyez la valeur mise à jour du nombre s'afficher OK. Faisons de même pour la décrémentation. Donc, si vous cliquez sur décrémenter, rien ne se passera pour le moment. Mais ce que vous pouvez faire, c'est le copier ici et vous pouvez le reconstituer et au lieu de l'incrémenter, je dirais moins un. Et je vais enregistrer ça. Et si vous venez ici, vous pouvez maintenant le décrémenter comme ça, l'incrémenter comme ça, et vous verrez que vous avez un très beau compteur en action Et regardez la quantité de code que vous avez écrite. Vous avez à peine écrit quelques lignes de code, n'est-ce pas ? Il y a une ligne, et ce sont les deux lignes, en gros, trois lignes, non ? C'est ce que tu as fait, non ? Et React fait tellement de choses en interne. OK ? Donc, laissez-moi vous dire que chaque fois que vous mettez à jour le compte ici, React refait le rendu du composant car il sait que la valeur de cet état a changé et cet état est associé à ce composant en particulier. Ce qu'il fait, c'est qu'il déclenche un nouveau rendu et à l'aide du rendu, le composant est rendu à nouveau et vous voyez la valeur mise à jour s'afficher. Cela est beaucoup plus efficace que le rendu de la page entière. OK ? Il s'agit simplement de mettre à jour certaines parties de l'application du point de vue de l' efficacité. C'est bon. C' est donc une très bonne fonctionnalité de React Use State Hook, Okay, que nous utilisons activement en ce moment. OK ? Nous pouvons même le décomposer. OK, donc en ce moment, ce que nous faisons, c'est que nous avons en fait la logique ici à l'aide d'une fonction anonyme. OK. Ce que vous pouvez faire, c'est par souci de simplicité, vous pouvez avoir un nombre d' incréments constant ici , d'accord, quelque chose comme ça C'est donc une fonction que je suis en train de créer. OK. Et ici, d'accord, désolée. Donc, ce que vous pouvez faire, c'est ici, incrémenter Oups. Ce sera donc une fonction flèche, et ce que vous pouvez faire, c'est dire que le nombre défini est égal au nombre plus un. OK ? Et vous pouvez avoir défini le nombre égal à compte plus un, le terminer par un point-virgule et bien le terminer, le terminer également par un point-virgule, n' est-ce Et je vais l'avoir ici. Je dirais le nombre d'incréments. OK. C'est donc ce que nous sommes en train de faire. Nous continuons définir des fonctions distinctes ici. Je peux dire décrémenter, décrémenter, compter ici, et cela peut être négatif Oups, négatif OK ? Et de la même manière, ce sera une décrémentation. Comme ça. OK ? Et vous pouvez incrémenter la valeur, vous pouvez la décrémenter, Et tu peux augmenter ou diminuer comme tu veux, d'accord C'est donc quelque chose qui est possible ici. OK ? Donc oui, j'espère que cela explique clairement comment vous pouvez utiliser use state hook pour ajouter des états dans vos composants React. OK. Ce que nous avons fait ici en guise de récapitulatif, nous avons ajouté un état de comptage pour lequel nous utilisons use state hook, et ce crochet d'état d'utilisation a renvoyé l'état, ainsi que la fonction pour mettre à jour l'état Et nous les avons obtenus en utilisant le concept de structuration RAD, n'est-ce pas ? Ici, nous avons cette valeur initiale définie comme zéro pour l'état, d'accord ? Et nous avons deux boutons. À l'aide duquel nous modifions la valeur de l'état. Et chaque fois que nous modifions la valeur de l'état, ce qui se passe, composant est rendu à nouveau et le nombre est mis à jour automatiquement. OK ? J'espère donc que c'est assez clair et j'espère que vous comprenez bien ce que sont les États et comment vous pouvez utiliser les États pour réagir. OK ? Maintenant, il y a une chose que j'aimerais vous dire, c'est ce truc ici, d'accord ? Il y a cette question que les étudiants se posent habituellement. Pourquoi ne pas utiliser des variables plutôt que des états ? OK ? Je voudrais donc mentionner que la magie de l'état dans React, c'est chaque fois qu'il change, d'accord ? Imaginez donc gérer tout cela à l'aide de variables. Imaginez avoir une variable de comptage et ne pas utiliser State Hook ici. OK ? Vous devrez effectuer un nouveau rendu ou mettre à jour le manuel du composant. OK, ce qui n'est pas bon. Ici, React sait automatiquement que vous devez restituer le composant pour refléter les modifications apportées à l'interface. Et c'est vraiment très bénéfique et utile si votre application prend de l'ampleur, n'est-ce pas ? Si votre application prend de l'ampleur, vous utilisez plusieurs variables d'état, vous gérez beaucoup de choses. Dans ce cas, cela devient vraiment très utile. OK ? Et c'est différent des accessoires car vous ne pouvez pas modifier les accessoires dans les composants enfants Ils sont en lecture seule, et les états sont quelque chose de différent qui vous permet d' avoir un meilleur contrôle et meilleure gestion par rapport aux variables et aux accessoires accord ? J'espère que cela vous a été utile et j'espère que vous avez pu suivre. 5. Gérer sans effort plusieurs variables d'état: Nous avons donc actuellement cette application qui comporte deux boutons, incrément et décrément, et nous utilisons use state hook pour incrémenter, décrémenter et gérer un état pour ce pour incrémenter, décrémenter et gérer un état pour Nous utilisons un composant fonctionnel ici. Maintenant, le truc ici, c' est que nous n'avons qu'un seul État. Désormais, lorsque vous travaillez avec des composants fonctionnels React, grâce au hook use state, vous n'êtes pas limité à une seule variable d'état. Vous pouvez déclarer autant de variables d'état que vous le souhaitez. Désormais, lorsque les valeurs d'état ne sont pas liées, il existe des scénarios dans lesquels vous souhaitez suivre plusieurs informations. Par exemple, ici, nous suivons le décompte, d'accord ? Maintenant, vous souhaiterez peut-être suivre une autre valeur, et lorsque ces valeurs ne sont pas liées, il est judicieux de les conserver dans des variables d'état distinctes. Cela peut vous aider à rendre votre code plus propre en regroupant les données connexes et en séparant les données non liées. D'accord ? Voyons maintenant comment ajouter un autre état dans cet exemple. Donc, ici, nous augmentons simplement le nombre d'un et le décrémentons le nombre d'un et le décrémentons Maintenant, disons que je souhaite avoir une personnalisation Je veux vous donner une personnalisation pour mes utilisateurs dans laquelle l'utilisateur peut me dire si je veux augmenter le nombre d'un ou de n'importe quelle valeur. OK ? Donc, ce que je vais faire, c'est ajouter un autre État ici. J'appellerai cet état étape. OK. Et cette étape définira l'incrément et la décrémentation devraient être de combien OK ? Donc, ce que je vais faire, c'est reproduire cette syntaxe similaire OK ? Nous allons dire use state, d' accord, ici, et oups Et ici, j' appellerai cela une étape, et j'appellerai cela une étape définie, quelque chose comme ça. OK ? Et la valeur par défaut que j'aurai est un, d'accord ? Parce que la valeur d'incrémentation et de décrémentation par défaut que je souhaite avoir ou que je veux donner aux utilisateurs est une OK. Maintenant c'est fait. Maintenant, nous sommes là. Ce que je vais faire, c'est avoir mon mot à dire ici. OK. Disons donc ici. Permettez-moi de revenir en arrière et je vais dire « input ». Je vais donc l'ajouter juste avant l'incrémentation et la décrémentation ici, juste après H OK ? Je vais donc dire input ici, quelque chose comme ça. OK. Et pour la saisie, d' accord, je vais avoir le tag à fermeture automatique. Je n'en ai pas besoin ici. Et ici, je peux dire « tapez ». Le type est ce qu'est un type ici. Nous travaillons donc avec des chiffres. Je vais donc dire un chiffre ici. OK. Et je dirais aussi valeur. Maintenant, quelle est la valeur de cette entrée particulière ? Je dois donc le lier à la variable d'état. Alors je te conseille de venir ici. OK. Je vais passer à la ligne suivante et je vais parler de changement. Donc, en gros, si l'utilisateur modifie quelque chose dans cette zone de saisie en particulier , j'autorise les modifications, n'est-ce pas J'aimerais mettre à jour l'état, n'est-ce pas ? C'est ce que nous allons faire. Je vais donc parler de changement, et ici, je vais avoir une fonction. Je vais dire E, pour utiliser les fonctions des flèches, et je dirais définir un pas ici. D'accord, je vais transmettre la valeur du point cible du point E. Au fait, cette valeur sera transmise sous forme de chaîne, n'est-ce pas ? Je peux donc dire « parse in » ici et je peux résumer tout cela dans le par envoyé OK, donc ce qui se passe, c'est que nous disons une valeur de point cible. Donc, en gros, c' est l'élément, et nous disons que nous obtenons la valeur de cet élément, et nous la transmettons à set step. Qu'est-ce que Set Step Over ici ? Set step est la fonction chargée de mettre à jour cet état, et elle est appelée en cas de modification. Ainsi, toute modification apportée à cette zone de saisie sera reflétée dans l'état. OK ? C'est lié maintenant, non ? Maintenant, pour ce qui est de l'incrémentation et de la décrémentation, je dois utiliser Step Over here C'est l'un des changements que je dois apporter. OK. Maintenant, testons l'apparence de notre application. Vous pouvez voir que la valeur par défaut est un, je peux incrémenter la décrémentation ici. Si la valeur par défaut est dix, et si je commence à incrémenter, vous verrez neuf, 19, 29, 39, et je peux également décrémenter Si je dis cinq ici, je peux vous le voir ici, il est mis à jour en conséquence. Donc, selon la valeur que je change ici, cela reflète le changement. Tu peux voir. Ici, dans cet exemple, nous utilisons deux variables d'état, je dirais que une est le nombre, l' autre est l'étape par étape par laquelle nous voulons augmenter le nombre Hein ? Donc oui, il est tout à fait plusieurs variables d'état dans possible d'avoir plusieurs variables d'état dans un seul composant de réaction. Vous pouvez utiliser plusieurs états pour suivre les informations indépendantes que vous souhaiteriez peut-être suivre au sein d'un composant particulier. OK ? Vous pouvez même l'embellir si vous le souhaitez Donc, ici, cette application n'a pas l'air géniale. Nous ne sommes pas impressionnés, n'est-ce pas ? Donc, ce que vous pouvez faire est ici, vous pouvez venir et je vais ajouter du CSS ici. OK. Donc ici, par exemple, je vais dire pour la zone de saisie, d'accord ? Je vais donner votre avis ici. Pour la saisie, je dirais une largeur de 50 pixels. OK. Et je dirais une association de cinq pixels, d'accord ? Quelque chose comme ça, et je dirais marge ici, marge de dix pixels. OK, bouteille. Nous allons ajouter une bouteille. Je vais dire un pixel solide et j'ajouterai le code couleur comme C et le rayon. D'accord, pour un rayon de quatre pixels, quelque chose comme ça. Voyons à quoi ressemble notre entrée. saisie semble correcte. Tu peux voir. OK. Et nous pouvons également ajouter un peu de CSS aux boutons. Les boutons que nous avons ont l'air plutôt bruts, non ? Jolis boutons de courrier cru. Nous pouvons donc avoir du rembourrage. Je peux voir un rembourrage de cinq pixels ici et de dix pixels ici, d'accord ? Et vous pouvez voir une marge de cinq pixels, désolé. OK. Botel, je peux dire qu'il n'y en a aucun. C'est bon. Et je peux dire Radius. Je peux dire un rayon de quatre pixels, probablement similaire à celui de l'entrée. Et je peux ajouter une couleur de fond, la couleur fond du hachage 007b, FFI a E, un code couleur ici Vous pouvez même ajouter un bleu clair ici si vous le souhaitez, pour simplifier les choses. Donc je vais juste dire bleu clair, ou simplement bleu ici. Bleu, non ? Et vous pouvez voir la couleur comme, bien sûr, le blanc. C'est donc pour le texte. Et puis vous pouvez faire en sorte que Coso Cursor soit un pointeur, d'accord ? Et puis vous pouvez avoir un effet de pointeur de bouton ou de deux-points. OK. Alors, quel en est l' effet de survol ? Comment se passe la mise à jour de la couleur d'arrière-plan en bleu foncé. OK. C'est donc fait voyons si c'est le cas et voyons à quoi cela ressemble. Ok, ça a l'air plutôt correct, je dirais, OK, mieux que la version précédente, vous pouvez le voir, c'est un CSS décent. Vous pouvez en ajouter beaucoup plus ici, accord, si vous le souhaitez. OK. Donc, en haut, j'ai ce conteneur d'applications. J'ai de la marge. Vous pouvez avoir une marge, disons, de 20 pixels. OK. J'ai donc ajouté une marge de 20 pixels, et cela semble correct. OK. Je pense donc que l'application a l'air décente en ce moment, non ? Et vous pouvez encore améliorer le CSS si vous le souhaitez. OK. Mais puisque nous sommes en train d'apprendre, je pense que c'est tout à fait normal. Nous pouvons voir le fonctionnement des fonctionnalités et comment les concepts React prennent vie. C'est bon. J'espère donc que cela vous a été utile et que vous vous êtes bien amusé. 6. La nature asynchrone de React : ce que vous devez savoir: Il est donc temps de parler des mises à jour de l'État. Nous avons maintenant cette application de compteur où nous pouvons incrémenter ou décrémenter le compteur fonction des clics sur le bouton . D'accord ? Désormais, chaque fois que vous effectuez des mises à jour d'état, vous devez vous souvenir de certaines choses. Tout d'abord les mises à jour d' état sont de nature asynchrone, ce qui signifie qu'elles ne sont pas synchronisées Et ce que fait React, c'est qu'il regroupe plusieurs mises à jour d'état OK ? Désormais, chaque fois que vous effectuez plusieurs mises à jour d'état, vous êtes censé utiliser une mise à jour ou une fonction Vous allez maintenant vous demander ce qu' est une fonction updata ? fonction updata est donc une fonction flèche ou une fonction simple qui est transmise pour passer lors de la mise à jour de l'état d' une variable particulière ou d'un composant particulier dans React OK ? Maintenant, permettez-moi de vous donner un exemple à ce sujet. D'accord ? Maintenant, disons que nous avons ce nombre d'incréments, d'accord, je peux l'incrémenter d'un ou de n'importe quel autre pas OK ? Maintenant, ce que je ferais, c'est me laisser ajouter un autre modèle ici, d'accord ? Je vais donc ajouter un autre bouton. OK. Et je vais dire incrémenter ou ajouter plus deux ici. Un truc comme ça. OK. Donc, cela va augmenter deux fois, d'accord ? Et je vais dire incrémenter deux fois ici. C'est bon. Cette fonction n'existe pas. Donc, ce que nous allons faire, c'est venir ici pour augmenter le nombre, et je vais dupliquer cela et je vais dire incrémenter Deux fois, quelque chose comme ça. OK ? Maintenant, ce que je veux faire c'est l' incrémenter deux fois Je l'ai donc incrémenté une fois, et je vais l'incrémenter deux fois ici. OK ? Si je viens ici, tu verras ce bouton. Maintenant, idéalement, en cliquant sur ce bouton, la valeur du compteur doit être incrémentée deux fois. Donc, à partir de cinq, si c'est cinq, ça devrait devenir sept. S'il est égal à zéro, il devrait devenir deux. Pourquoi ? Parce que je mets à jour l'état deux fois, non ? Maintenant, laissez-moi vous montrer un exemple ou laissez-moi vous en montrer une démonstration, d'accord ? J'ai enregistré le fichier et si je le fais plus deux, vous verrez qu'il n'est incrémenté que d'un. OK ? Permettez-moi de faire un rafraîchissement à partir de zéro, ce sera un, deux, trois, etc. OK ? Il ne l' augmente pas de deux Et la raison en est que les mises à jour d'état sont asynchrones, d'accord ? Il regroupe donc plusieurs mises à jour d'état. Maintenant, ce qui se passe, c'est ici, écrivant ce set count ou count plus un. Cela équivaut à avoir zéro plus un ici et zéro plus un ici. C' est équivalent à cela. Pourquoi c'est équivalent à cela parce que la valeur initiale de l'état est zéro. Si la valeur initiale est un, cela équivaut à écrire un plus un et un plus un. La valeur précédente. Donc, en gros, vous mettez à jour le décompte ici à deux, n'est-ce pas ? Cela n'est donc pas pris en compte lors de l'exécution de cette deuxième ligne. L'état initial du décompte est pris en compte. Cela s'explique par le fait qu'il est asynchrone et que les multiples mises à jour sont corrigées ensemble Donc je vais juste contrôler C. D'accord. Donc ça ne marchera pas, n'est-ce pas ? Donc, ce que je vais faire, c'est utiliser une fonction de mise à jour. OK ? Nous devons donc utiliser une mise à jour ou une fonction pour plusieurs mises à jour d'état. Je vais donc juste le commenter , comme ça. OK. Je vais le reconstituer ici. Maintenant, pour utiliser la fonction updata, nous allons utiliser une fonction flèche très simple ici qui va nous aider à effectuer la mise à jour OK ? Donc, ici, je vais dire le décompte ou décompte précédent ici comme ceci, quelque chose comme ça. Et je vais l'avoir ici. Maintenant, avec le décompte précédent ici, cette variable particulière a la valeur de la valeur précédente de count. OK ? Je vais donc prendre ça ici et ça viendra ici, quelque chose comme ça. OK. Et maintenant, voyons le résultat. Maintenant, si j'actualise, si je fais plus deux plus deux plus deux, vous pouvez voir que cela augmente de deux fois Hein ? Cela fonctionne donc bien. Et le changement que nous avons fait, c'est que nous utilisons maintenant cette fonction de flèche ici, d'accord, qui consiste simplement à prendre la valeur précédente de count et à l'incrémenter d'un Maintenant, ce n'est qu'une convention ici où j' ai utilisé cette variable appelée nombre de PIV Normalement, c'est une convention. Normalement, si vous lisez du code en ligne, vous verrez quelle que soit la variable d'état. La première lettre est convertie en majuscule, comme C est majuscule ici, et le PIV est ajouté sous ou avant le nom de l'État ici, ce qui indique qu' il s'agit d'une valeur précédente OK ? Vous pouvez également utiliser C et C ici, C et C. La sortie ne changera pas. OK ? Ce n'est donc qu'une convention. Si je fais un rafraîchissement, et si je le rejoue, vous pouvez voir qu'il s' incrémente deux fois ici Donc, chaque fois que vous souhaitez effectuer plusieurs mises à jour d'état ensemble, d' accord, il est préférable d' utiliser ce type de syntaxe dans lequel nous utilisons une mise à jour ou une fonction. OK ? Ici, ce qui se passe, c'est la valeur précédente de l'état est prise en C, et elle est incrémentée d'un Et puis pour l' appel suivant, la valeur précédente, qui est la mise à jour comme celle après la mise à jour du décompte à partir de ce code particulier ici, est transmise ici, puis elle est incrémentée d'une unité Vous ne poserez donc aucun bogue si vous faites les choses de cette façon. OK ? Il s'agit d'un problème très courant dans lequel les développeurs font les choses de cette façon et se disent  : « Hé, il y a une certaine incohérence dans mon code et je ne vois pas le résultat souhaité. Et la raison en est simple en raison de la nature asynchrone des mises à jour, d'accord ? Mettre à jour une fonction est donc utile dans ce cas particulier. Ici, dans ce cas particulier, si vous écrivez du code de cette façon, mises à jour sont mises en file OK ? Donc, cette première est exécutée, puis la suivante est mise en file d'attente Et puis une fois le premier terminé, celui-ci est exécuté, et en attendant, il est dans la file d'attente. OK ? Voici donc comment vous pouvez effectuer plusieurs mises à jour par lots ou en même temps. N'oubliez pas que les mises à jour d'état dans React for components sont de nature asynchrone et que vous devez utiliser les fonctions updata pour plusieurs mises à jour d' pour plusieurs Maintenant, quelles sont les fonctions updata, comme je l'ai dit, c'est une simple flèche que vous êtes en train de transmettre Vers la fonction de mise à jour ici. C'est donc la fonction qui est utilisée pour mettre à jour l'état. OK ? Et vous passez la fonction de mise à jour ici pour mettre à jour la valeur C'est bon. J'espère donc que cela vous a été utile et j'espère que vous avez pu suivre. 7. Naviguer dans les tableaux et les objets dans React State Management: Salut, voilà. Dans cette vidéo, nous allons créer une application qui va nous aider à gérer plusieurs compteurs, n'est-ce pas ? Donc, quand je dis que cela nous aide à gérer plusieurs compteurs, vous pouvez ajouter des compteurs à la volée sur la page Vous pouvez même incrémenter des compteurs séparés individuellement, Alors laisse-moi te montrer. J'ai ce comptoir ici, d'accord ? Et je peux l'augmenter de un, deux, trois, quatre. C'est le premier contre. D'accord, je peux ajouter un compteur comme je le souhaite. J'ai ajouté cinq compteurs ici. Je peux l'incrémenter en fonction de mon choix. Et vous pouvez voir que chaque compteur a son propre compte ici, d'accord ? Il ne se chevauche en aucun cas et possède son propre bouton qui écoute l'événement Et chaque fois que vous cliquez sur ce bouton en particulier, l'état correspondant à ce compteur en particulier est incrémenté, ou le nombre correspondant à ce compteur en particulier est incrémenté et pas les autres OK ? Et vous pouvez ajouter autant de compteurs que vous le souhaitez en fonction de vos besoins, d' accord, aussi longtemps que vous le souhaitez. C'est bon. Vous pouvez même améliorer cette application pour ajouter un bouton de décrémentation pour ajouter une étape ici, d'accord ? Ainsi, avec l'étape, vous pouvez prendre un nombre, qui décidera s' il doit être incrémenté d' un ou quel nombre il va incrémenter Pi. OK ? Vous pouvez donc le faire, et vous pouvez même ajouter un bouton pour supprimer le compteur. Ainsi, si vous souhaitez supprimer un compteur spécifique, vous pouvez le sélectionner et le supprimer. Voilà donc les améliorations qui peuvent être apportées, d'accord. Mais pour le moment, voici ce que sera l'exemple. Il s'agit d'une liste de plusieurs compteurs assemblés. Avec son propre décompte affiché et son propre modèle d' incrémentation, ce qui peut nous aider à augmenter le nombre du compteur correspondant accord ? Prêt ? Alors allons-y directement. Donc, je suis dans l'application, et j'ai ce fichier app point JSX, dans lequel j'ai quelques importations en haut, et j'ai cette fonction ou un composant fonctionnel créé avec export, et il affiche simplement hello en ce moment, n'est-ce pas Et vous pouvez voir « hello » en sortie ici. OK ? Maintenant, le point que je veux démontrer ici dans cette vidéo est le point dont je vais parler, c'est que vous pouvez stocker tableaux, des objets et des structures de données encore plus complexes dans un état OK ? L'état n'est donc tout simplement pas limité à une variable normale. Ce n'est pas comme si vous pouviez stocker une seule valeur dans un état, mais vous pouvez avoir des éléments complexes tels que des tableaux, des objets, etc. OK ? Et c'est vers cela que cet exemple va être dirigé, d'accord ? Donc, si vous jetez un œil à l'application que nous allons empiler, d' accord, nous avons besoin d'une liste de compteurs, Donc, avec l'application, ce que nous allons faire , c'est créer un État ici. OK. Je vais donc dire const. OK. Et au lieu de compteur, je vais dire des compteurs ici, quelque chose comme ça, et je vais dire des compteurs fixes OK. Et je vais vous conseiller d'utiliser State ici. OK. Et nous avons besoin d'un bloc d' initialisation ici, non ? Je vais donc l'initialiser par défaut et la valeur par défaut sera celle-ci ici. OK ? Je vais donc dire ID, et ID sera un, et je vais dire que la valeur et la valeur sont nulles. OK ? Donc, cette variable ou cet état contient essentiellement la liste de tous les compteurs sous forme de tableau, et chaque compteur ici est une paire clé-valeur Vous pouvez voir qu'il s'agit d'un compteur, d' accord, qui a son propre identifiant et sa propre valeur. OK ? C'est donc le compteur 1, et c'est un objet pour le compteur 1, et vous avez un ensemble de compteurs ici On peut dire qu'il contient un tableau de compteurs et qu'un seul compteur n'est rien d'autre qu'un objet, dont les attributs sont un identifiant et une valeur OK ? C'est ainsi que cela sera maintenu ici. Je vais simplement passer à de nouvelles lignes pour qu' il soit visible sur un seul écran ici. OK ? Donc c'est clair, d'accord, pourquoi nous avons ce genre de choses. OK ? Maintenant, la prochaine chose que je veux ajouter ici est une fonction, d'accord ? Je vais dire const, ajoutez des compteurs ici. OK. Et c'est une fonction qui nous aidera à ajouter de nouveaux compteurs sur l'interface, n'est-ce pas ? C'est donc une fonction flèche, et ici, je vais ajouter un point-virgule, et je vais suivre la logique Maintenant, pour ajouter les compteurs, nous devons faire, d'accord ? Alors laissez-moi prendre ce tableau. Voici donc le tableau. OK. Permettez-moi de prendre cela en une seule ligne. C'est le comptoir, non ? Maintenant, pour ajouter un autre compteur , je dois tout prendre. OK ? Je dois dire une virgule et je dois aussi l'ajouter ici avec l'identifiant. Hein ? C'est ainsi que je vais ajouter un compteur supplémentaire. Si je dois en ajouter une autre, je vais dire une virgule, j'ajouterai la même chose, et je convertirai cela en trois, non C'est ainsi que j' ajoute des compteurs, non ? Maintenant, comment puis-je implémenter cette logique ici, non ? Donc, ce que je dois faire, c'est d'abord la liste de tous les objets actuels qui existent, d'accord ? Et je dois ajouter un autre objet à la fin dont l'identifiant est incrémenté de. Je le répète. Donc, la logique que je dois implémenter ici est d'avoir la liste de tous les objets actuels qui existent pour le compteur, dans le tableau, puis d'ajouter un autre objet à la fin dont l'ID est incrémenté d'un Vous pouvez voir, comment ferions-nous cela ? Je vais donc m'en débarrasser ici. OK, ce truc. Et ce que je dois faire, c'est d'abord appeler Set Counter parce que nous devons le mettre à jour ici, non ? Je vais donc dire trois points. Je vais utiliser cet opérateur de spread. Je dirais des compteurs ici. OK ? Je vais donc répartir la valeur existante des compteurs ici OK ? Je suis désolée, cela doit être inclus c'est un appel de fonction, non ? Par ici. OK. Donc, d'abord, je vais répartir la valeur existante des compteurs, puis je vais dire ID, deux points, je vais dire la longueur du point des compteurs plus un ici Et je dirais valeur zéro. Ce serait donc ma logique d'ajouter de nouveaux compteurs. J'espère que cela a du sens ici. OK ? Nous sommes donc en train de créer une nouvelle fonction de flèche appelée ajouter des compteurs, n'est-ce pas Et nous appelons compteurs fixes. Pourquoi appelle-t-on des compteurs fixes ? Parce que c'est la fonction de mise à jour de l'état des compteurs, n'est-ce pas ? Maintenant, comment mettre à jour l'état ? Quelle valeur ajoutons-nous à sa mise à jour ? Donc, peu importe ce qui existe, nous devons donc ajouter un tableau. OK ? Nous devons ajouter une mise à jour du tableau existant avec un nouveau tableau. OK ? Nous devons mettre à jour le tableau existant qu'il contient. C'est donc le tableau existant, c'est vrai, qui est conservé. C'est avoir un seul objet. Ce que nous devons faire, c'est créer l'opérateur de spread et répartir tous les compteurs ici OK ? Et puis nous devons en ajouter un autre à la fin. Nous devons dire que l'ID est le compteur de la longueur du point plus un et que la valeur est zéro OK. Dès que nous le faisons, il est ajouté à la liste existante, et maintenant les compteurs auront deux compteurs ici, un avec l'identifiant un et l' autre avec l'identifiant Et puis, si vous appelez à nouveau aux guichets, cela se répandra à la fois ici et ajoutera le troisième et ainsi de suite OK ? J'espère donc que cette logique est assez claire. Nous utilisons l'opérateur de spread ici et nous sommes en train de créer un nouveau tableau qui se remplacera par celui existant pour les compteurs Arme ? Cela se fait donc au comptoir. Maintenant, ce que nous devons faire, c'est venir ici. Et je dois ajouter un bouton. Je dois mettre à jour le Y ici. Je vais dire bouton. Je dirais « en un clic ». Que dois-je appeler en cas de clic ? Je vais appeler add count ici, et je dirais que c'est au pluriel, donc je vais dire add count ici OK, comme ça et je dirais au comptoir, quelque chose comme ça. OK. Et je vais fermer ce bouton ici. OK. Et nous devons également afficher le compteur, non ? Comment affichons-nous ? Nous allons donc l'afficher sous forme de liste non ordonnée, une simple liste non ordonnée utilisant ces balises HTML OK ? Et je dirais une carte à points des compteurs Nous utilisons donc la carte ici. OK. Et là, je dois dire « contre ». OK, donc pour chaque élément des compteurs, je dis compteur, c'est-à-dire que je l'accepte comme paramètre et j'ai ceci en gros, j'ai cette fonction flèche ici. OK ? Et ce que je ferais ici, c'est créer une liste ici. OK, quelque chose comme ça. Donc, Ali et moi allons créer une liste. OK. Maintenant, ce que cette liste va avoir, c'est une clé. Bien entendu, nous devons ajouter clé pour optimiser le rendu. Il aura donc un identifiant unique, qui est un identifiant de point de compteur. OK. Et ici, je dois afficher le compteur, et nous pouvons afficher l'identifiant du point du compteur. J'ai besoin d'une interface utilisateur qui dit : OK, donc l'interface utilisateur que je dois afficher est le compteur un, deux points de valeur, puis il y a un bouton ici. OK. Ensuite, il y a un bouton. Oups. Ensuite, il y a un bouton. C'est l'interface utilisateur que je veux avoir, non ? J'ai donc un compteur, et l'un d'eux n'est rien d'autre que l'identifiant, l'identifiant du compteur. Je vais ajouter deux points ici. OK ? Je dirais la valeur du point de comptage. OK. Je souhaite afficher la valeur car zéro est la valeur. Et puis j'ai besoin d'un bouton. OK ? Je vais donc ajouter un bouton. Je vais passer à la nouvelle ligne, et je vais dire bouton. OK. Et au clic, il doit y avoir un événement au clic. C'est bon. Et en un clic. OK, quelque chose comme ça. J'ai besoin de le lier à une fonction. OK ? Il s'agira d'une fonction de compteur d'incréments qui n'existe pas encore. OK, donc je vais juste avoir un truc vide ici. Je vais juste le garder vide. OK ? Et ici, je vais dire incrément. C'est ça. C'est bon. Et je dois me débarrasser de ce texte ici. C'est juste à des fins d' explication. Je vais enregistrer ceci et nous montrer l'interface utilisateur. Pouvons-nous le voir ? Oui Pouvons-nous ajouter le compteur ? Essayons. Tu vas voir ? Génial, non ? L'incrémentation ne fonctionnera pas car nous n'avons pas créé cette fonction. Nous sommes juste en train d'appeler un truc vide de sens ici, non ? Alors, comment cela fonctionne, comment fonctionne l' ajout d'un compteur. Tout d'abord, nous entretenons le compteur de cette façon. OK ? Donc, si ce n'est pas clair, laissez-moi vous l'expliquer de manière plus claire. OK. Je vais faire tout ce qui est mon pouvoir pour m' assurer que tu comprends. OK ? Donc c'est à ce moment-là que le compteur est égal à un, d'accord ? Compteur. Le comte est un. OK. Quand le compteur est de deux, d'accord. Compteur 2. Ce qui se passera, c'est que lorsque vous ajoutez un compteur, celui-ci est également mis à jour. Cela est donc mis à jour en fonction de ce qui précède. OK. C'en est un de plus. C'est l'ID 2. OK ? Quand le compteur passe à trois, il y en a trois, d'accord ? Ou 1 seconde. Disons quand un contre. OK. Je vais juste le copier quand deux comptent et quand trois comptent. Donc c'est deux compteurs, et ça fait trois points. OK ? Maintenant, lorsqu' il y a trois compteurs, vous ajoutez le troisième élément ici C'est le troisième comptoir ici. C'est ainsi que les compteurs sont gérés. OK ? J'espère que cela a du sens. C'est donc le cas lorsqu'il n' y a qu'un seul compteur. OK, donc le compteur est représenté. Le compteur peut donc être représenté par deux choses. L'un est l'identifiant du compteur et l'autre, la valeur. OK ? Donc, au départ, nous avons un compteur avec l' ID un et la valeur zéro. C'est avec cela que nous l'avons initialisé, non ? Et ce que nous faisons, c'est nous le rendons, manière dont nous le saisissons. Donc, si tu fais défiler la page vers le bas, d'accord ? Nous disons que pour chaque compteur, utilisez la méthode map ici parce que nous utilisons la carte ici parce qu'elle est stockée dans un tableau. C'est un ensemble d'objets, non ? Chaque compteur est représenté de cette façon, non ? Le compteur est représenté de cette façon. Et pour représenter plusieurs compteurs, nous créons un tableau, n'est-ce pas ? Il s'agit d'un tableau. Vous pouvez voir que les éléments sont ajoutés. OK ? Lorsque trois compteurs sont ajoutés, vous pouvez voir qu'il y a trois éléments, n' est-ce pas ? Nous parlons donc de cartes à points de compteurs. OK ? Pour chaque compteur, nous devons afficher l'identifiant du compteur. Désolé, nous n' affichons pas l'identifiant du compteur, mais nous l'ajoutons à la clé, et nous affichons l'identifiant du compteur comme suit. OK, nous voyons le compteur 1 et la valeur est affichée. Et au clic, nous devons effectuer l'incrémentation, ce que nous ne faisons pas pour le moment OK ? Et lorsque nous disons « ajouter », lorsque nous cliquons sur ce bouton, ajoutez un compteur ici. Ce qui se passe, c'est que cette fonction est appelée. Cette fonction ajoute un élément à ce tableau. Vous pouvez voir ici qu'il ajoute cet élément dans le tableau, mais il s'assure que l' ID est incrémenté d'un OK ? Alors, comment ajoute-t-on un élément dans le tableau ? Il diffuse les éléments existants. Il s'agit de créer un nouvel élément, nouveau tableau en étalant l'élément existant et en ajoutant un nouvel élément à la fin Alors, comment fabrique-t-on un nouveau tableau ? Il crée un nouveau tableau ici en étalant le tableau existant et en ajoutant un nouvel élément au tableau à la fin et en s' assurant que son identifiant est incrémenté C'est ainsi qu' il procède. OK ? C' est donc chose faite. Je ne vais pas le supprimer. Je l'ai juste sous forme de commentaires. Je pense que c'est une bonne façon de comprendre le but. Si vous êtes toujours confus, alors, regardant cela, tout devrait être clarifié, n'est-ce pas ? Parce que c'est à cela que ressemble un compteur lorsque trois compteurs sont créés Voici à quoi ressemblerait l'État. OK. Maintenant c'est fait. Maintenant, ce que je dois faire, c'est avoir un compteur d'incréments. Tout est fait, non ? Compteur d'incréments. Cela fonctionne donc bien si je rafraîchis. Il est d'abord initialisé à un, et si j'ajoute plusieurs compteurs, vous pouvez voir que l'identifiant est également incrémenté OK ? Je vais donc venir ici. Ce que je ferais, c'est économiser ici la const. OK ? Je vais dire incrément. Compteur. OK, compteur d'incréments, quelque chose comme ça ici OK. Je vais avoir un identifiant ici et une fonction flèche. Oups, des fonctions de flèche, quelque chose comme ça, se terminant par un point-virgule Maintenant, comment pouvons-nous augmenter le compteur ? Nous avons donc l'identifiant du comptoir, non ? Comment obtenir la pièce d'identité ? Nous allons le faire venir ici, et nous devons le transmettre ici. OK ? Comment le faire passer ? Nous pouvons donc dire ici. Il s'agit d'une fonction de flèche, je vais donc simplement la supprimer. Je dirais un compteur d'incréments. Et je dirais Counter Dot ID, quelque chose comme ça. Nous transmettons donc l' identifiant du guichet. Nous savons donc quel compteur est incrémenté. OK ? Maintenant, ce que nous devons faire, c'est rechercher dans ce tableau, et nous devons obtenir le compteur. Celui dont le bouton d'incrémentation est cliqué ou dont l'identifiant correspond, et nous devons incrémenter la valeur et mettre à jour la valeur l'élément incrémenté ici OK, alors comment s'y prendre ? Donc ce que nous devons faire, c'est qu'Ala vienne ici. Je vais d'abord parler de la carte à points des compteurs. OK ? Et je vais faire une recherche ici. Je vais passer en revue toute la gamme ici. Je vais dire comment je vais effectuer une recherche, je vais dire que l' identifiant du compteur est égal à l'identifiant. OK ? Et si c'est égal, alors que devons-nous faire ? Nous incrémentons. OK, je dois ajouter la logique de l'incrémentation, sinon, vous avez juste le compteur ici OK ? Tu n'apportes aucun changement. C'est ainsi que la logique fonctionnerait. OK ? De plus, le résultat devrait être envoyé aux compteurs de configuration, car nous devons mettre à jour l'état, n'est-ce pas ? Je vais donc ajouter le tout pour définir les compteurs. OK ? Maintenant, comment fonctionnera la logique ici ? Alors, quelle serait la logique d'incrémentation ici ? Je dirais que j'ajouterais une paire de bretelles bouclées. OK ? Je dirais de répartir le compteur ici et de mettre à jour sa valeur ici. OK, je dirais la contre-valeur plus un. OK ? Donc, cela va faire étaler le compteur actuel avec son attribut, et cela va remplacer la valeur ici, et cela va incrémenter la valeur d' OK ? Tout d'abord, tous les attributs sont laissés tels quels. Donc, d'abord, il étale le compteur ici, puis il met à jour l'attribut value du compteur avec la nouvelle valeur. OK ? Et c'est ce qui est renvoyé. Et si cela ne correspond pas, cela n'est exécuté que lorsque c'est vrai. S'il ne s'agit pas d'une correspondance, le compteur actuel est renvoyé. OK. J'espère que cela a du sens. Et ensuite, si je viens ici, laissez-nous le tester. Si je suis d'accord, vous pouvez voir que cela fonctionne bien, non ? Vous pouvez voir que l' application entière n'a pas été rechargée même après l'ajout de la fonction, d'accord ? Mais seules les pièces pertinentes ont été rechargées car les compteurs sont toujours là Le rechargement complet, voici à quoi le rechargement complet de l'application ressemble le rechargement complet de l'application. Tout est remis à zéro. Hein ? Cela n'a donc pas été fait même lorsque nous avons ajouté une nouvelle fonction, n'est-ce pas ? C'est donc ce qui fait la beauté de réagir dans les États d'ici. Vous pouvez donc voir que cette application fonctionne comme prévu, d'accord ? J'espère que cela vous donne un bon aperçu de la façon dont vous pouvez avoir des structures de données complexes telles que des tableaux, des objets et des structures de données encore plus complexes en état Et voici comment vous pouvez vous en servir. OK ? C'est un bon exemple ou un bon exemple, je dirais qu'il vous aide à comprendre le pouvoir des États et comment vous pouvez travailler avec les États pour créer des merveilles, je dirais. C'est bon. J'espère donc que vous avez pu suivre, et j'espère que vous le savez. Voici donc un code CSS de base que j'ai mis en place. OK ? Ce n'est pas grand-chose, d'accord ? Mais des éléments super basiques, comme le style des conteneurs, H one, le style de saisie, le style bordures, désolé, le style des boutons et le style du survol J'ai un CSS si simple, qui était déjà lié à ce fichier en particulier. OK ? J'espère donc que cela vous a été utile et j'espère que vous avez pu suivre. 8. Projet sous les yeux : gérer les entrées de formulaires avec ReactState Hook: Salut, voilà. Il est donc temps de parler de la façon dont vous pouvez créer un formulaire l'aide de React et gérer toutes les données à l'aide de state et utiliser State Hook dans les composants. accord ? C'est donc ce que nous allons construire. En fait, j'ai le Temo ici. Et vous pouvez voir qu'il existe différents types d'éléments de formulaire avec lesquels nous allons jouer. Donc, tout d'abord, vous avez une zone de texte normale. OK, et tu as une case à cocher. Vous avez des boutons radio, vous avez une boîte de sélection et vous pouvez voir toutes les données du formulaire mises à jour en direct ici. Laissez-moi vous faire une démonstration. Donc, tout ce que je saisis ici ou ce que je sélectionne sera affiché ici. OK ? Donc voilà, si je dis : « Hé, vous pouvez voir ce texte ici, ici. OK, je peux dire que j'adore réagir, quelque chose comme ça. Et vous pouvez voir toutes sortes de mises à jour que je fais, elles sont également reflétées en temps réel. Je peux sélectionner les boutons radio. Vous pouvez voir l'option 1 s'afficher ici. Si je passe à l'option deux, vous verrez l'option deux ici. Il en va de même pour la case à cocher. Je peux voir coché et non coché ainsi que pour la sélection Vous pouvez voir l'option 1, l'option 2. D'accord. Il s'agit donc d'un formulaire entièrement géré par React à l'aide de U State Hook, et vous pouvez voir comment il est capable de mettre à jour une partie de l'application chaque fois qu'il y a un changement dans une autre partie sans actualiser la page. C'est ce qu'il y a de beau dans React, non ? Vous pouvez donc voir comment cela fonctionne. Vous pouvez même mettre à jour quoi que ce soit à tout moment, vous verrez la mise à jour se refléter sans que la page soit actualisée ou rechargée C'est bon. Nous allons donc le construire sur le terrain, et nous passerons en revue toutes les étapes pour savoir comment vous pouvez le créer. Et ces connaissances seront très utiles si vous envisagez d'utiliser React pour, vous savez, créer des formulaires, formulaires dynamiques avec des validations robustes Nous voici donc dans l'IDE, et voici le code de démarrage que j'ai ici. Il s'agit d'un composant appelé composant d'application. OK ? Le nom est l'application elle-même. réside dans le fichier app point JSX, lié à un CSS appelé app point CSS, et le fichier CSS n'a littéralement rien C'est bon. Nous devons donc travailler sur ce point. Il s'agit simplement d' afficher un en-tête ici ou devrais-je dire, un titre appelé bonjour sur la page Web, d'accord ? Nous allons donc commencer par cette application. Tout d'abord, ce que nous allons faire, c'est utiliser l'état d'utilisation ici, d'accord Assurez-vous d'importer l'état d'utilisation en haut, d'accord ? J'ai déjà un produit importé. Nous allons donc utiliser l'État. Je vais dire constant. Je vais créer un état appelé données de formulaire, et je vais avoir un ensemble de données de formulaire. Fonctionne ici, puis je vais utiliser notre état comme celui-ci, oui, à quoi cela va-t-il être initialisé ? C'est intéressant Il s'agit donc d'un objet qui contiendra l'intégralité des données du formulaire. Nous avons donc un texto ici, non ? Nous avons une case à cocher, et l'initialisation de la case à cocher est fausse ici Nous avons une radio qui est initialisée à quelque chose de vide ou d' absence de données en tant que telle Il est également vide. Ensuite, nous devons sélectionner quelque chose comme ça. OK. Comme ça. Voici donc ce qu'est l'initialisation initiale. Il s'agit d'un objet doté de ces attributs. C'est bon. Maintenant, ce que je vais faire, c'est commencer à créer le formulaire ici. D'accord ? J'ai donc celui-ci en H. Je vais changer cela. Je vais changer le texte pour former un exemple. OK. Je vais voir si c'est le cas. OK. C'est fait. Et ici, alors j'aurai ce nom de classe comme conteneur de formulaires, quelque chose comme ça, conteneur de formulaires. Cela sera utile pour le CSS plus tard. Je vais avoir une balise Fm, qui est la balise HTML Fm. OK. Maintenant, je vais commencer à travailler sur les éléments un par un. Donc, le premier élément que je vais avoir est la saisie de texte, d'accord. Et la prochaine sur laquelle je vais travailler est la case à cocher, quelque chose comme ça OK ? Nous allons donc d'abord aborder ces deux sujets, puis nous passerons au suivant. D'accord ? Donc oui, la zone de texte. Que devons-nous faire pour la zone de texte ou la saisie de texte ? Un droit ? Je dois donc d'abord l' avoir TIF. D'accord ? Je vais appeler ça TIF d'accord. Oups D'accord, j'ai foiré mes clés ici, mais ce serait le nom de la classe, Et je vais appeler cela un champ de formulaire ici. OK. Et cela passera à une nouvelle ligne. Et dans le champ du formulaire, je vais d'abord avoir une étiquette. OK. Donc, l'étiquette est quelle est l'étiquette, ce sera du texte. Nous devons saisir le texte. Vous pouvez ajouter n'importe quelle sorte d' étiquette, comme un nom ou quelque chose comme ça, si vous le souhaitez. OK. Champ de saisie, c'est un champ de saisie. Quels sont tous les attributs que je dois définir pour cela. Je vais donc d'abord voir qu'il s'agit d'un texte de type texte. OK. Alors le nom est du texte ici. D'accord ? Le nom est du texte. OK. 1 seconde, donc je vais juste appuyer sur la touche Tab pour qu'il soit indenté. OK. Le nom est du texte. Quelle est la valeur ? Je dois donc le lier à la valeur, et la valeur est ici, les données du formulaire, le texte total, quelque chose comme ça, d'accord ? Ensuite, je n'ai pas besoin de monnaie ici. OK. En ce qui concerne le changement, que devrait-il se passer ? Nous devrions appeler une fonction appelée handle change. OK. Bien que cette fonction ne soit pas encore définie, d'accord ? Nous devons donc également définir cette fonction. Je vais juste créer une fonction vide ici afin que nous n'arrivions pas par erreur. Donc je vais dire const, gère le changement ici. OK. Et je vais faire en sorte que E soit transmis. OK. Et je vais juste le laisser vide. OK. Aucun problème. Oups. Il s'agit donc d'une erreur de syntaxe. Ouais, ça a l'air bien. accord ? C'est une fonction de flèche, non ? J'ai donc juste ce changement de pseudo, et ici, si vous venez, je le lie au changement de pseudo. accord ? Maintenant, peu importe avec quoi vous l'initialisez, d'accord ? Puisque vous liez cette zone de texte à l'état ici, peu importe avec quoi vous initialisez le texte, si je dis ABC et si je l'enregistre, vous verrez ABC être ici, n'est-ce pas ? Parce que c'est l' initialisation, non ? Je l'ai donc laissé vide pour le moment. D'accord ? Mais c'est le DIV ou c'est le composant, ou je dois dire, c'est l' interface utilisateur pour la saisie de texte. accord ? Passons à la suivante après la saisie de texte, nous avons une case à cocher. Permettez-moi donc de copier le document, tout d'abord. Oups. Je vais apporter le matériel ici. OK. C'est également un champ de formulaire. Il a une étiquette. Au lieu de saisir, je vais me débarrasser de cette entrée. Ici, je peux le dire, au lieu d'étiqueter ici. OK, donc l'étiquette indiquera comment fonctionnera cette case à cocher ici, je vais avoir des informations. OK. Et ici, je dirais que le type est égal à Checkbox. Quelque chose comme ça, d'accord ? Nom, je dirais, case à cocher. Je garderai le nom et le type cochés. OK ? Il s'agit d'une propriété cochée , que je vais associer aux données du formulaire. Je dirais la case à cocher à point de données du formulaire. OK ? C'est fait, et en cas de changement, je dirais de gérer le changement. Il y a donc une seule fonction que nous avons maintenant, accord, pour gérer tous les changements, n'est-ce pas ? Et oui, je vais le fermer. Il s'agit d'une entrée de balise à fermeture automatique ou vous pouvez également la fermer séparément. OK ? Donc c'est fait, étiquette, et ici, après la saisie, vous pouvez probablement avoir 1 seconde. Vous pouvez donc avoir une case à cocher. Quelque chose comme ça. Et vous pouvez voir la case à cocher ici, non ? Donc, la case est cochée, d'accord ? Le formulaire n'est pas joli. Ne vous inquiétez pas pour cela, car nous n'avons pas encore de CSS, n'est-ce pas ? Alors maintenant je vais faire un commentaire. Je dirais des boutons radio. OK ? Comment travaille-t-on sur les boutons radio maintenant ? D'accord ? Il va donc falloir créer un bouton radio, non ? Je vais donc reconstituer ça. OK ? C'est votre structure, et je vais me débarrasser de l'entrée ici. OK. Ou ce que je peux faire, c'est m' en tenir à cette entrée. Nous allons changer les types. C'est une radio ici. D'accord ? Et tapez ici pour « radio is radio ». Copiez cette radio. Le texte, c'est de la radio. OK ? Form Data a enseigné la radio, la quatrième option a été cochée. Donc ça n'y sera pas. Cela sera vérifié ici. D'accord ? Tapez named, et je dois également ajouter de la valeur ici, d'accord, valeur. La valeur est égale à, je dirais, l'option 1. OK, quelque chose comme ça. Et je peux dire que la radio est égale à la première option, d'accord ? Et en cas de changement, il y a un changement de poignée. D'accord ? Et ici, je peux dire après entrée après étiquette. OK. Il s'agit donc de l'étiquette. OK. Win ok, c'est dans les champs de saisie. Donc, si je sauvegarde ceci, d'accord, je vois la radio ici, mais je dois ajouter une autre étiquette, qui l'emballe, n'est-ce pas ? Je vais donc dire étiquette. Et je vais fermer ceci, cette fermeture se fera après la saisie, et nous avons besoin d' une étiquette indiquant l' option 1, quelque chose comme ça. OK ? Vous pouvez donc voir la première option ici. OK ? Je vais reproduire entièrement la même chose. En fait. OK. Et je vais faire défiler la page vers le bas. Ainsi, après la balise de fermeture de l'étiquette, une autre étiquette s'ouvre, radio , et voici l'option deux, et l'option radio ici est deux pour cela, et le texte deux. OK. Donc ça y est. OK ? Je pense que ça se présente bien ici. D'accord ? Il n'y a pas de CSS, donc ne vous inquiétez pas pour ça. OK. Mais ce sont nos boutons radio. Nous avons plusieurs options. D'accord ? Maintenant c'est fait. Nous avons TIF, d'accord ? Et maintenant, il ne nous reste plus qu'une seconde. C'est le DIF ici pour cela. Après ce DIF, j'ajouterai. OK. De quoi avons-nous besoin pour ajouter une liste déroulante ? OK. Maintenant, pour le menu déroulant, j'ai besoin du TIF. OK, donc je vais faire défiler la page vers le haut. Je vais copier cette astuce de saisie de texte . OK. Et ici, je vais le reconstituer. D'accord ? Maintenant, pour le menu déroulant, ce que nous devons faire, c'est voir ici, sélectionner. C'est sélectionné. Et au lieu de saisir. Nous n'avons donc pas besoin de saisir des informations ici, nous allons faire une sélection ici, n'est-ce pas ? Et il y a une étiquette, mais celle-ci sera sélectionnée. Je peux donc dire que nous n'en avons pas besoin. C'est très spécifique aux entrées, non ? Je vais juste m'en débarrasser et nous dirons sélectionner. Quelque chose comme ça. OK. Et pour Select, nous allons avoir plusieurs options dans Select. OK ? C'est donc la première option. Mais pour sélectionner, nous devons définir certaines propriétés. Je dirais donc que le nom de la sélection est égal à. Quel est le nom ? C'est sélectionné. OK. Quelle est la valeur ici ? La valeur provient donc des données enseignées, sélection, quelque chose comme ça. Qu'est-ce qui est en train de changer ? En ce qui concerne le changement, c'est le changement de gestion, non ? Je vais donc vous dire de gérer le changement ici. OK. Passons maintenant aux options, nous avons l'option ici. La valeur de l'option est égale à vide. Aucune option. OK. Et la première option consiste à choisir une option. OK. Nous allons donc l'afficher dans un premier temps. OK, choisissez une option. Quelque chose comme ça. OK, donc tu peux voir, choisir une option, non ? Maintenant, je dois le reproduire , d'accord, de part en part. Je vais donc le copier et y aller à la fin. Vous pouvez le coller une ou deux fois. C'est bon. C'est donc chose faite. OK. Maintenant, la valeur de la suivante est l'option 1. OK. Et ici, vous pouvez avoir la première option. Et la valeur de deux est l'option deux. Et ici. Deuxième option. Deuxième option. C'est bon. C'est donc chose faite. Vous avez l'option 1 et l'option 2 qui s'offrent à vous. C'est bon, c'est fait. Maintenant, nous avons besoin d' ou, je crois, une case à cocher est déjà ajoutée, une liste déroulante, une case à cocher avec un bouton radio C'est donc chose faite. Maintenant, ce que nous devons faire c'est également afficher toutes les données, n'est-ce pas ? Donc, ici, après le dernier ou avant le dernier, si je dois dire. OK, tiens, je vais ajouter un téléviseur. OK. C'est le DF et je vais l'appeler. Je vais ajouter un nom de classe ici. Nom de classe identique à celui des données du formulaire. OK. Et ici, je dirais H trois. Oups, H trois, ça devrait être H trois. Je suis désolée. C'est donc H trois ici. OK. Et je dirais des données de formulaire, quelque chose comme ça. OK. Nous allons maintenant afficher les données du formulaire une par une. D'accord ? Alors, comment allons-nous afficher ? Tout d'abord, nous aurons un tag P. D'accord ? Dans le tag P, nous aurons un tag fort. OK, fort. En caractères forts, nous dirons texte. Nous allons donc tout afficher un par un. Nous allons donc dire texte. OK. Et ici, en dehors de Strong, je dirais Form Thêta Je vais avoir ce script Ja. Je dirais de Thêta. Tita est ici. Texte à points. OK. Et si ce n'est pas le cas, je vais dire entre A et A. D'accord. OK. C'est donc chose faite. C'est ainsi que nous affichons comme fonctionnerait l'affichage. Tu peux voir. OK, texte du point de données FM ou N. Donc, si le texte du point de données FM n'est rien, alors NA est affiché. Et nous devons le faire pour tous, alors nous allons venir ici. Nous allons reproduire cela pour la radio et nous verrons formdata point Radio ici. Sinon, tout ira bien, donc pour la radio, cela ne fonctionnera pas ou cela fonctionnera. Cela ne fonctionnera pas pour les cases à cocher. OK ? Je vais donc ajouter une case à cocher ici. D'accord ? C'est pour vérifier. une boîte par ici. Donc, pour les cases à cocher, nous devons faire particulièrement attention. OK ? Parce que si les données du formulaire ou la case à cocher sont vraies, nous devons afficher les cases cochées et décochées, Je vais donc dire point d'interrogation, sinon, fausses conditions. J'utilise le tonery Operate ici. Je dirais vérifié et non vérifié. Quelque chose comme ça. C'est bon. La radio est terminée. Nous avons sélectionné. OK, donc je vais voir sélectionner quelque chose comme ça. Et ici, je vais voir sélectionner. OK. C'est chose faite. OK. Nous affichons les données, nous avons également la possibilité de les afficher. C'est bon. Maintenant, ce que nous devons faire, c'est implémenter la fonction la plus importante ici, qui consiste à gérer le changement. Je vais donc faire défiler la page vers le haut. D'accord ? Nous allons faire venir E ici, c'est l'événement. Je vais donc dire const, et je dirai que le nom aura une valeur, nous avons le type, et nous aurons vérifié ici OK, c'est donc ce que nous sommes en train de créer et je dirais cible E point par ici. OK. Maintenant, ici, ce que nous devons faire, c'est qu'après l'avoir créé, nous devons définir le formulaire. D'accord ? Je dirais donc définir les données du formulaire. Donc, en gros, ce que j'ai fait ici, c'est dans la première ligne, j'ai déstructuré la cible du point E ici. Je l'ai déstructuré en éléments individuels, et je dis « définir des données sous forme de points ». OK. Je vais fabriquer ce nouvel objet ici, d'accord ? Et je dirais trois fois les données du formulaire, donc je vais utiliser le fait que je fais de la déstructuration ici. OK. Hm data, virgule, et pour le nom, ce que je ferais c'est si le type de nom est égal à la case à cocher, Nous devons donc avoir la valeur vérifiée, n'est-ce pas ? Je vais donc dire valeur deux-points cochée. Comme ça. OK ? C'est fait, et oui, c'est aussi fait. Si je sauvegarde ceci, voyons quelle est la sortie. Vous pouvez donc voir que la chose est en cours de mise à jour, cases à cocher cochées et cochées Option 1, Option 2, et vous pouvez voir l'option 1, l' option 2, être reflétée. Donc ça marche très bien, non ? Nous sommes en mesure d' utiliser le changement de poignée pour mettre à jour les données du formulaire. D'accord ? Nous restructurons donc les données du formulaire ici, quelles que soient les données du formulaire, quelles que soient les données du formulaire qui existent ici. D'accord ? Ensuite, nous mettons à jour les valeurs. L'application fonctionne donc bien. Ce que nous ferions, c'est simplement l'embellir un peu. C'est bon. Il est donc important d' embellir un peu important d' embellir un OK, pour que ça ait l'air un peu plus présentable. Je vais donc commencer par un peu de CSS ici pour le conteneur de formulaires, d'accord, j'aurai une largeur maximale de 400 pixels ici. OK. J'ai une marge ici, que je vais régler sur 50 pixels et automatiquement. Je vais transmettre ces deux points. OK. Je vais prendre du rembourrage ici. Rembourrage, réglons sur 20 pixels. D'accord ? Rayon de bordure. OK. Le rayon de la bordure, je vais le régler sur huit pixels. Probablement. Voyons voir. OK. Et je vais voir la couleur de fond. OK. La couleur Macron peut être, disons, le blanc, en quelque sorte. OK, bien sûr. Abded en était sûr. C'est bon. Vous pouvez choisir comme bon vous semble. OK. Je vais avoir l'ombre de la boîte ici à zéro, zéro, dix pixels Rch PA, et je vais régler la valeur ici à zéro, zéro, OK, zéro, zéro Un. C'est donc ce que je vais régler. C'est bon. Et oui, c'est ça. Je suppose que c'est un week-end en famille de fontes, d'accord ? Si vous avez besoin d'une famille de polices, je dirais sensif, ici. C'est bon. Ce contenant à formulaires, les étiquettes H deux et H trois auront une ligne textile centrale ici et une couleur comme le gris. OK, quelque chose comme ça, probablement. OK, ou couleur foncée. R. Selon votre choix, d'accord, ou vous pouvez simplement le mettre en noir ici. OK. C'est également une bonne chose. OK, H2H3. OK, maintenant c'est fait. Je vais avoir un champ de formulaire. Donc, tous les champs du formulaire. OK. Comment faisons-nous ? Nous aurons donc une marge inférieure ici. Je vais régler la marge inférieure à 20 pixels. OK, sauvegardez-le. Et oui, c'est ça. Permettez-moi d'y revenir plus tard si nécessaire. Étiquette. Je dirais donc affichage du cadenas ici pour les étiquettes. OK, vous pouvez voir, changer dans l'interface utilisateur. Je dirais la taille de police. La taille de police est de 14 pixels. OK. Je vais prendre du poids ici. Le poids du pouls ici, d'accord ? Et puis je dirais, marge inférieure. Marge inférieure de cinq ici. OK. Et de la couleur. Gardons la couleur sous forme de hachage trois ou trois. OK. Oui, c'est fini. Pour l'étiquette, je dirai saisie, et je devrai taper sous forme de texte ici. OK. Le type est donc égal au texte. D'accord ? Quelque chose comme ça. OK. Maintenant, pour le texte, je vais dire une largeur de 100 %. OK, ça y est, tout d'abord. Maintenant, je vais avoir un rembourrage de dix pixels. OK. Je vais également ajouter select au CSS. Sélectionnez. OK. Et puis je dirai frontière. Oups. Ce sera donc une bordure en point-virgule Maintenant, pour la bordure, je dirais un pixel, solide, hastac CCC. OK ? C'est une sorte de code couleur blanc ou gris, ok et radius. Quatre pixels ici. OK. Et une taille de police de 16 pixels. Comme ça. OK ? Ça a l'air d'aller bien. C'est bon. Si vous jetez un œil à l'application, elle semble correcte. Pas mal. OK. Travaillons davantage sur ce point. J'ai donc cette entrée car j'ai le CSS pour le texte. Ajoutons également du CSS pour les cases à cocher. Je vais donc dire case à cocher. OK. Et je dirais marge droite. OK. Marge droite. Ajoutons-y dix pixels. Voyons voir. OK. Et pour la radio également, j'en ajouterai pour la radio. Pour la radio, je vais juste ajouter une marge de cinq pixels. OK, un peu d' alignement ici. OK. Maintenant, alignons les données du formulaire, donc je vais parler des données du formulaire. Les données du formulaire sont de classe D pour les données affichées en bas. OK, donc je vais dire marge inférieure. Marge en haut, je vais commencer par 30 pixels. Nous avons de la place là-bas. Nous avons de la place et du rembourrage. Oups, un rembourrage de dix pixels par ici. OK. Je vais ajouter une couleur de fond. D'accord, la couleur de fond est que nous pouvons conserver la couleur d'arrière-plan comme quelque chose. J'ai un code couleur en fait, d'accord ? C'est E neuf, f7f9, quelque chose comme ça. C'est une sorte de couleur blanche. Vous pouvez le voir et la couleur extérieure n'est pas bonne dans ce sens. Donc, ce que je vais faire, c'est prendre cette couleur et probablement CCC ou si je fais défiler la page vers le haut ici C'est un rivage. Ce n'est pas bon. Je peux donc changer cela en F neuf ou neuf. OK. Alors peut-être que ça a l' air bien, d'accord ? Donc c'est grisâtre, et c'est bleuté OK. Donc oui, c'est le style que j'utilise actuellement. Et la couleur de fond, j'ai aussi une bordure. Bordure d'un pixel, solide. OK. Et hash, j'ai un code couleur A trois, D deux, D six Vous pouvez utiliser le code couleur ou choisir quelque chose qui ressemble, selon vos préférences C'est une sorte de palette de couleurs bleue que j'utilise. OK, SN Blue. J'ajouterai un rayon de bordure de quatre pixels et de dix. OK. Je dirais des données de formulaire, des balises P. OK. Que faisons-nous avec la taxe P ? Je dirais une taille de police de 16 pixels. OK ? Voyons la couleur, je dirais le hash 555 C'est fait ? OK. Fort. Donc, quand vous dites fort, d'accord, je dirais la couleur 333. OK. Je pense que ça a l'air décent. OK ? Ajoutons quelque chose car je pense que c'est fait. OK ? Rien d'autre n'est nécessaire. Je suppose. Ouaip. Je pense que ça a l'air décent. OK ? L'application fonctionne donc bien, vous pouvez le voir. C'est bon. Et le CSS semble également décent. Si vous voulez vous améliorer davantage, improviser davantage, vous pouvez absolument le faire OK. Mais oui, c'est très présentable Et quoi que vous saisissiez, vous pouvez voir comment il est mis à jour. OK ? Donc oui, c'est ainsi que nous pouvons gérer les données du formulaire. Nous utilisons un état ici, d'accord, qui est d'avoir un objet avec tous les attributs. Maintenant, davantage de champs sont ajoutés à ce formulaire, plus d' attributs sont ajoutés, et vous pouvez les gérer de la même manière. C'est bon. J'espère que cela a également été utile, perspicace et utile Oh 9. PROJET : créer un sélecteur de couleurs personnalisé avec React: Salut, voilà. Il est maintenant temps de commencer à créer un projet, qui est une application de capture de couleurs utilisant React Has. Maintenant, cela nous aidera à renforcer de nombreux concepts de React et à beaucoup pratiquer, d'accord ? Cela pourrait également être un excellent projet de portfolio à présenter dans des entretiens et un CV, n'est-ce pas ? Il s'agit de l'application. Vous pouvez voir ici quelques carreaux de couleur que vous pouvez sélectionner. Et dès que vous sélectionnez l'un des carreaux de couleur, vous verrez le changement de couleur de cette façon, n'est-ce pas ? Et en plus, à part cela, si vous voulez ajouter une autre couleur, vous pouvez sélectionner ici et vous pouvez, exemple, changer la couleur, non ? C'est donc complètement dynamique, vous pouvez le constater. Au fur et à mesure que je fais glisser le curseur, vous verrez tout changer, n' est-ce C'est donc très dynamique, d'accord. De cette façon, vous pouvez voir que c'est très dynamique, non ? C'est donc le sélecteur de couleur que nous allons utiliser, d'accord Et cela va nous aider à mettre en pratique de nombreux concepts de React, n'est-ce pas ? Alors, sans plus attendre, passons directement à l' éditeur et commençons. C'est bon. Nous voici donc dans l'éditeur de codage, et pour commencer, j'ai une configuration de base de React Tap avec point d' application GSX renvoyant ce balisage ici que vous voyez, et ici vous voyez le résultat, qui est un sélecteur de couleurs Il n'y a donc littéralement rien dans le projet pour le moment. C' est comme renvoyer H une balise qui à H une balise qui donne la sortie sous forme d'en-tête de sélecteur de couleur, n'est-ce pas ? Nous devons maintenant commencer à créer l'application. Nous allons donc commencer par ces états. C'est bon. Et au début, je pense déjà Stage Hook. C'est bon. Donc, ce que je dois faire, c'est créer un état, et ce que je dois suivre, c'est, bien sûr, vous l' avez déjà deviné, c' est la couleur de fond, non Parce que c'est ce avec quoi nous jouons, n'est-ce pas, dans cette application. D'accord ? Donc, couleur de fond ici. Et je vais dire définir la couleur de fond, d'accord ? Donc, la couleur de fond, quelque chose comme ça. D'accord. Et oui, c'est fait. Et puis j' ai dû m'en servir ici. Je vais donc dire use state, et je vais avoir une couleur par défaut initialisée Donc, la couleur par défaut peut être le blanc, d'accord ? Ensuite, je pourrai économiser. D'accord ? C'est donc chose faite. Nous avons défini l'État. J'ajouterai un point-virgule à la fin. D'accord. Maintenant, ce que je dois faire, c'est ajouter une interface ici pour afficher les carreaux essentiellement de couleur, n'est-ce pas ? Et ce sont les vignettes sur lesquelles l'utilisateur peut cliquer pour changer la couleur d' arrière-plan à la fois, n'est-ce pas ? Donc, ce que je vais faire, c'est ajouter un tableau ici. Je peux voir des couleurs ici, et il peut s'agir d'un tableau vide pour le moment. D'accord. Je vais bientôt ajouter quelques couleurs ici. D'accord. Mais nous devons également afficher le tableau, non ? Donc, quelles que soient les couleurs que nous voyons, nous devons les afficher, et nous avons un tableau. D'accord ? Donc, ce que je vais faire c'est ajouter etev ici. Je vais ajouter nom de classe à cette différence afin de pouvoir ajouter du CSS plus tard, et je l'appellerai palette de couleurs, quelque chose comme ça D'accord. Maintenant, je vais dire Colors Tat map. Je vais utiliser la carte ici, la méthode de la carte, et je vais dire couleur, mon index. D'accord ? Nous allons utiliser ces deux choses. D'accord ? Utilisez les fonctions des flèches, et nous y voilà. D'accord. Ainsi, dans ce cadre, tout ce que vous ajouterez sera implémenté pour chaque élément du tableau. D'accord ? Et ce que nous voulons faire pour chaque élément du tableau, nous voulons l'afficher, n'est-ce pas ? Je vais donc ajouter un TeV ici. Oups. Je vais donc ajouter un TeV comme celui-ci Et pourquoi ne s'est-il pas fermé tout seul ? D'accord. Je vais donc le fermer manuellement. C'est bon. Donc, nous y sommes, nous avons la télévision, d'accord ? Et je vais ajouter une clé, quelque chose comme ça. OK. 1 seconde. Je vais donc dire que la clé est égale à, et je dirais index. D'accord. Et le nom de la classe. Et je dirais boîte. Je vais juste ajouter notre CSS ici. Désolé, le nom de la classe ici pour que je puisse ajouter du CSS plus tard. D'accord ? Et je peux le dire en cliquant ici. Donc, au clic, je dois, bien sûr, donc au clic, il y a eu une interaction, non ? Et je dois ajouter une interaction. L'interaction sera que la couleur d'arrière-plan devrait changer au clic, n'est-ce pas ? Et j'ai besoin d'une fonction pour cela, que nous n'avons pas pour le moment, ce qui est tout à fait normal. Je vais donc laisser ce champ vide. Hein ? Maintenant, c'est fait. D'accord ? Nous avons cette journée. Nous l'avons ici. D'accord ? Et ce que je dois faire, c'est faire défiler la page vers le haut. Nous pouvons ajouter quelques couleurs ici dans le tableau. D'accord ? Maintenant, quelles couleurs devons-nous ajouter ? D'accord, j'ai quelques codes couleurs, donc je vais les taper manuellement. D'accord ? Donc je peux dire FF, zéro, zéro, zéro, zéro, d'accord ? Laissez-moi garder ceci, et nous n'observons aucun changement ici. D'accord. OK, nous ne constatons aucun changement parce que c' est le cas. En fait, je fais juste apparaître le tap ici, nom de la couleur de la touche, et je montre juste le clic ici. Donc je ne vois rien parce que, accord, il n'y a rien dans le développement, mais ce que je vais faire ici, c' est que puisque le nom de classe est color box ici, je vais juste ajouter une largeur de 50, disons, d'accord ? Et je vais ajouter une hauteur de 50 pixels ici. Je vais le garder ici. D'accord. Nous ne voyons donc pas encore le résultat. Ce que nous devons faire, c'est que je vais faire défiler la page ici et me laisser voir. OK, il y a donc une erreur que j'ai commise. Ça ne devrait pas être une pâte frisée ici. D'accord ? Cela devrait être un support rond italien. D'accord. Et je vais juste prendre ce support rond et le remplacer par ce paese frisé D'accord. Donc, tout cela, le truc de division, devrait être entre crochets ici. Et si je sauvegarde ceci, je ne verrai rien pour l'instant, mais un div a été ajouté, d'accord ? Nous devons simplement ajouter une couleur de fond à ce div. Donc je vais dire style, d'accord. Donc style de couleur de fond. Ici, quelque chose comme ça, Colin Color. D'accord. Comme ça. Vous allez maintenant voir le DIF s'afficher ici. OK ? Donc ce qui se passe, je dois vous le dire, c'est la couleur. Il s'agit du code couleur du rouge. D'accord ? Si vous recherchez ceci sur Google, vous saurez quel est ce code couleur. Et ce que je fais, c'est que je prends cette couleur. Ou tous les éléments du tableau, je suis en train de le parcourir, d'accord, en utilisant cette carte de points de couleur OK ? Et j'accepte ces deux paramètres dans cette fonction de flèche, couleur et index, n'est-ce pas ? Maintenant, pour chaque élément du tableau, je reçois la couleur et son index. OK ? Ce que je fais, c'est que je dis de rendre un TiVo dont la clé est index. Je le fais pour l'optimisation, comme un meilleur rendu pour React. J'ai un nom de classe, et en utilisant ce nom de classe, je définis la largeur et hauteur à 50 pixels pour qu' elle soit visible car il n'y a littéralement rien dans le DIV, puis je le style ici selon la valeur de couleur que nous avons ici. C'est donc ce qui sera défini. Et puis j'ai un écouteur d'événements en un clic, que je n'ai pas encore géré, d'accord ? Vous pouvez dire que je n'ai pas de fonction définie pour ça, d'accord ? Donc je l'ai fait, d'accord, et c'est tout. Ce que nous devons faire, c'est prendre quelques codes couleurs que j'ai et je vais les coller ici. Je vais donc le coller ici, et vous pouvez voir que c'est un long tableau. OK ? Vous pouvez ajouter vos propres codes couleurs ou vous référer à celui-ci. Donc, si vous tapez un code couleur sur Google, et que vous pouvez rechercher celui-ci, vous verrez que c'est le code couleur, d'accord ? Et vous pouvez aller sur ce site comme colorhx.com, et vous pouvez obtenir le code couleur que vous voulez, d' Donc des noms de couleurs. Ici, vous pouvez voir le zéro absolu. Vous avez la liste de toutes les couleurs ainsi que leurs codes couleurs. Vous pouvez donc choisir ceux que vous souhaitez afficher ou vous pouvez prendre les miens. OK ? C'est absolument bien. OK. Mais je ne fais que vous montrer comment vous pouvez également obtenir vos propres codes couleurs. OK ? J'ai donc ajouté ceci, et je vais l'enregistrer. Donc, dès que je l'enregistre, vous verrez que tous les codes couleurs s'affichent dessus. Donc, pour l'instant, vous ne voyez que ces boutons. OK ? Il n'y a aucun style. Rien ne se passe si vous cliquez dessus , n'est-ce pas ? C'est juste là. OK. Maintenant, je vais écrire une fonction pour gérer le clic. Donc je vais dire const, je dirais gérer le changement de couleur Maintenant, j'appelle ce manche un changement de couleur pour une bonne raison. Pourquoi ? Parce qu'en cliquant sur ce DIV, la couleur devrait changer pour toute la page, n'est-ce pas ? C'est pourquoi je dis cela. Je vais dire couleur ici. OK. Et ici, ce que je vais faire, c'est définir la couleur de fond. OK, et je vais passer en couleur, quelque chose comme ça. OK. Et je vais te le prêter. D'accord. Et maintenant, ce que je vais faire, c'est venir ici. Et ce que nous devons faire, c'est ici, au lieu d'avoir une flèche vide ici, je vais dire gérer le changement de couleur, et je vais transmettre la couleur. OK ? Donc, ce que fait la fonction, c'est qu'elle changera réellement la couleur d'arrière-plan ou couleur que vous transmettez ici. C'est ce que je fais Si je sélectionne le bleu maintenant. OK, donc ça ne marche pas. Je vais voir quel est le problème. OK, au clic, je dis tout correctement. OK, gère le changement de couleur. Je passe également la couleur. OK, je me rapproche de la division. OK, j'ai compris le problème ici. Ici, nous ne faisons que mettre à jour l'état, non ? C'est une fonction que nous avons appelée pour mettre à jour l'état ici. La couleur d'arrière-plan a donc la valeur mise à jour de la couleur, n'est-ce pas ? Maintenant, ce que vous devez faire, c'est que vous n'êtes pas encore en train de le placer en arrière-plan du TIF ou de la page. Donc ce que tu dois faire ici, c'est que nous viendrons ici, d'accord ? Nom de la classe DV, palette de couleurs. OK, pas celui-ci, nous allons l'ajouter au div parent ici. OK ? Donc ici, ce que je vais faire, c'est dans le DV root, je vais dire style, d'accord ? Et quel est le style ? Le style est la couleur de fond. OK. Nous avons donc ici la couleur de fond. Voyons comment cela fonctionne. Vous pouvez donc voir que la couleur de fond change maintenant, n'est-ce pas ? Tu peux voir. Donc oui, c'est ce que c'est. OK. La fonctionnalité fonctionne bien. OK. Et ce que je vais faire ici, c'est aussi ajouter un nom de classe afin que je puisse l'utiliser plus tard. C'est bon. Je vais dire app. Nous utiliserons cette classe en CSS. OK. Mais pour l'instant, j'espère que vous avez une idée claire du fonctionnement du changement de couleur. OK ? C'est chose faite. Maintenant, que devons-nous faire ensuite ? Que devons-nous faire ensuite ? nous devons également avoir un sélecteur de couleurs personnalisé Donc, si un utilisateur souhaite sélectionner autre couleur que celles disponibles ici, je dois ajouter un sélecteur de couleur personnalisé, donc je dirais TiVo Et ici, je vais dire le nom de la classe. OK, vous allez ajouter un nom de classe. Le nom de classe peut être un sélecteur de couleur personnalisé. Quelque chose comme ça. D'accord. Maintenant, ici, vous allez avoir votre mot à dire. D'accord. Nous accepterons les commentaires ici. Donc je vais dire type. Tapez en tant que couleur. C'est bon. Et puis voilà, la valeur. Quelle en est donc la valeur ? La valeur peut être la couleur d'arrière-plan. OK ? Maintenant, la couleur de fond est un état. N'oubliez pas que nous maintenons l'état de la couleur d'arrière-plan et que nous la mettons à jour à partir de ces conseils, également au clic. OK ? Nous attribuons donc la valeur présente dans la couleur d'arrière-plan à ce sélecteur de couleur OK ? Et ce que nous devons faire, c'est changer les choses. OK, nous avons besoin d'un événement. Si quelque chose change ici, j'accepte E, o et je dirais gérer le changement de couleur, et je transmettrai la valeur cible du point E. Quelque chose comme ça. D'accord. C'est fait, je vais enregistrer ceci, et nous verrons un choix de couleur ici. Vous pouvez voir que ce n'est pas très beau. Ne vous inquiétez pas, mais vous pouvez voir la dynamique ici C'est React, non ? Nous utilisons donc l'État ici, le concept d'État pour apporter une touche dynamique à notre environnement, d'accord ? Et vous pouvez voir comment cela fonctionne. OK, ce n'est pas beau pour le moment, je vais vous le dire. Donc, si vous allez ici, c'est une application pleine page, elle n'est pas belle. C'est vrai, ce n'est pas beau, bien sûr, parce qu'il n'y a pas de CSS, littéralement, non ? Nous devons donc ajouter du CSS pour l'embellir un peu. Mais oui, j'espère que vous avez une idée de ce qui se passe. C'est bon. Maintenant, nous allons ajouter du CSS, d'accord ? Je vais donc commencer par le fichier CSS. Assurez-vous simplement que le fichier CSS est lié ici et qu'il est importé ici. Importez le CSS Dot Slash App Dot. Et assurez-vous d'avoir ce fichier dans le même dossier. S'il ne se trouve pas dans le même dossier, assurez-vous d'avoir le bon chemin. OK ? Il se trouve dans le même dossier, donc je l'appelle point forward slash app point CSS OK ? Maintenant, ce que nous devons faire c'est voir point app Okay. Et je dirais famille de polices. Comme ça. Et je vais dire tout ça. OK ? Et à la fin, il y a eu un point-virgule Je peux dire textine, non ? Et je dirais au centre. Laissez-moi voir si c'est le cas. D'accord ? J'ai donc pu constater des changements, de bons changements. C'est bon. Et maintenant, je peux voir le rembourrage OK ? Rembourrage, on peut ajouter 50 pixels. Ou laissez-moi éviter un rembourrage de zéro pixel. OK, voyons ce qui va se passer. Je dirais une hauteur minimale de 100. OK. Et puis je dirai couleur. OK, alors couleur, ajoutons-le. J'ai un code couleur qui a F 0f0f0, quelque chose comme ça. Cela ressemble à une couleur blanche ou à un texte clair pour le mode sombre, c'est ce que vous pouvez dire. C'est bon. C'est donc chose faite. Nous conserverons le CSS de l'application de cette façon. Je vais en faire une pour H. OK ? Et je dirais couleur. OK. Alors couleur, je vais garder celui-ci pareil. OK. Ça a l'air cool. Je pense que nous allons tous bien. OK ? Maintenant, ajoutons le CSS pour la palette de couleurs. Je vais dire palette de couleurs, quelque chose comme ça. Et ici, je dirais Display Flex. Je vais ajouter un affichage de Flex. Vous pouvez voir comment il est devenu horizontal. D'accord ? Au moment où nous avons ajouté cette propriété. Je dirais de justifier le contenu pour le centrer. Sauvegardez ceci. OK. Et je dirais un écart de dix ou dix pixels. Ainsi, chaque élément sera espacé de dix pixels. Je n'ai pas enregistré cette modification. Mais ici, si vous voyez, il n'y a pas d' espacement entre les deux, n'est-ce Cela fonctionne bien, mais il n'y a aucun espacement entre les deux. Je veux donc ajouter de l'espace. J'ai donc ajouté cet écart de dix pixels. Le fichier n'est pas encore enregistré. Dès que j'économiserai, vous verrez à quel point cela a changé, non ? Et si vous regardez ici, vous pouvez voir dix pixels, non ? Cela fonctionne bien. OK. Voici donc un écart de dix pixels, et maintenant je vais dire marge, marge du haut ici. Dites zéro pixel. OK, dix pixels. Désolée Pas zéro. Ça va. C'est bon. Et boîte de couleur, nous avons 50 pixels, 50 pixels. Je dirais pointeur de curseur. Coso conservera deux pointeurs, et je dirais une bordure OK, bordure de deux pixels, solide, et je dirais hash FF OK. Donc ça y est et voyons si c'est le cas. D'accord. Nous avons donc une bouteille et nous avons cet effet de survol, qui semble correct, je dirais C'est bon. Maintenant, nous devons également styliser la couleur d'entrée pika Ça n'a pas l'air très beau, non ? Donc je vais dire tot, et je vais dire Pica couleur personnalisée. OK. Encore une fois, est-ce un cours que nous avons ? Laissez-moi faire défiler la page vers le bas. D'accord, oui. C'est un cours dont je me souviens. C'est un sélecteur de couleur personnalisé. Et nous avons notre mot à dire, n'est-ce pas ? Je vais donc dire sélecteur de couleurs personnalisé ici. OK. Et à cela, nous devons ajouter, disons, une marge. Donc, pour le moment, il n'y a littéralement aucune marge entre ces boutons et le sélecteur de couleur Je vais donc dire, ajoutons une marge de 20 pixels comme celle-ci. OK, il y a un écart maintenant. Maintenant, ce que je peux faire, c'est copier ça. Ici, nous ajouterons également le CSS pour la saisie. OK ? Donc je vais dire que pour ça, débarrasse-toi de ça. Nous n'avons pas besoin de marge en haut, donc je vais dire pointeur de curseur. OK, c'est fait. Je dirais « frontière » pour rien. OK. Nous n'avons besoin d' aucune sorte de bouteilles, donc vous pouvez voir que ça a l'air cool. Le rembourrage, c'est pas cool, il faut ajouter un peu de rembourrage de dix pixels, Et nous allons ajouter le rayon de puissance et le rayon. Ajoutons un rayon de puissance de cinq pixels. OK. Et nous pouvons ajouter de la couleur ici. Gauche. D'accord ? C'est chose faite. Je pense que c'est ça, et nous devons ajouter un effet de survol. Je vais donc dire sélecteur de couleur personnalisé, saisie, pointage en deux points. OK ? Maintenant, qu'est-ce que le survol, je dirais une couleur de fond de 55. Comme ça. OK ? Jusqu'ici, tout va bien. OK. Maintenant, si vous venez ici, agit d'une application pleine page, vous verrez comment elle affiche la couleur et ici aussi, vous pouvez changer cela, n'est-ce pas ? Maintenant, si pour une raison ou une autre, vous n'aimez pas ces taches blanches à côté l'ensemble du div où vous le rendez ala pica Tout cela est affiché dans l'ala pico et il y a cette tache blanche Ce patch blanc, nous ne l'avons pas ajouté. Ce que vous pouvez faire est ici Si vous souhaitez réinitialiser les styles par défaut, vous pouvez ajouter une étoile ici. Vous pouvez dire marge, marge zéro, et je dirais zéro de rembourrage OK, sauvegardons ça et voyons voir. OK, tu peux voir que c' est parti, non ? Donc oui, cela fonctionne très bien. Si vous le souhaitez, vous pouvez ajouter une sorte de casquette ici, en haut du sélecteur de couleurs Vous pouvez donc accéder à la base de code ici et ici, si vous voyez, nous avons cette application ici, n'est-ce pas ? Donc, cette application, ce que vous pouvez faire, c'est dans cette application, nous avons un sélecteur C. Donc, si vous venez avec une application, vous pouvez y ajouter un rembourrage de 40 pixels comme celui-ci Et si vous enregistrez le fichier, vous aurez un rembourrage décent en haut, et vous pourrez jouer avec cela OK ? Donc ça a l'air décent et plutôt bon. Vous pouvez jouer avec le sélecteur de couleurs ici comme ça. D'accord, vous pouvez voir comment cela change de couleur, non ? Donc oui, il s'agit du sélecteur de couleur, et ce sélecteur de couleur nous a aidés à renforcer le concept d'états et la façon dont les états peuvent jouer un rôle vital dans les composants de réaction Et vous pouvez voir comment cela change essentiellement la couleur de fond. Cela change l'UY sans même que vous actualisiez la page. Donc c'est vraiment très bien, et c'est la raison pour laquelle j'adore React. accord ? J'espère que vous avez pu me suivre, et j'espère que cela vous a été utile. 10. Débuter avec useEffect: Salut, voilà. Il est donc temps de commencer à parler du hook use effect dans React. Maintenant, qu'est-ce que Use Effect Hook ? OK ? Voici donc un nouveau projet React avec du code commenté, qui va nous aider à comprendre ce concept, puis nous ferons également des efforts pratiques pour le comprendre encore mieux. Donc, pour le dire simplement, utiliser le hook d'effet dans React vous permet d'exécuter du code automatiquement lorsque quelque chose change ou lorsqu'un composant se charge. OK ? Maintenant, quand je parle de chargement des composants, cela signifie que le composant s'affiche pour la première fois ou qu'il est monté, d'accord ? Il peut donc y avoir plusieurs types de choses que vous voulez faire ou que vous pouvez exécuter ou vous pouvez vouloir faire quelque chose lorsque quelque chose change dans l'application ou lorsqu'un composant se charge, d'accord ? C'est donc comme configurer une tâche pour qu'elle se produise après les mises à jour de l'écran ou lorsqu' un certain type de données est prêt, d'accord ? Maintenant, si vous effectuez une recherche en ligne sur l'effet d'utilisation, une définition courante que vous trouverez est que l'utilisation d'un crochet d'effet dans React vous permet d'effectuer des effets secondaires dans des composants fonctionnels. OK ? Vous verrez ce terme « effets secondaires ». Cela signifie qu' il s' exécute après le rendu du composant et qu'il peut être utilisé pour des tâches telles que la récupération de données, la mise à jour du dôme ou la configuration tout type d'abonnement si vous le souhaitez OK ? Maintenant, ces tâches sont importantes, mais elles ne sont pas directement liées au rendu, d'accord ? C'est ce qu'on appelle des effets secondaires, d'accord ? Et c'est aussi ce dont je parle ici. Utiliser Effect Hook dans React vous permet d'exécuter du code automatiquement lorsque quelque chose change ou lorsqu'un composant se charge. OK ? Maintenant, une fois le composant chargé, vous voudrez peut-être récupérer des données de l'API, n'est-ce pas ? Ou vous voudrez peut-être récupérer les données de l' API lorsque quelque chose change dans l' application, n'est-ce pas ? Par exemple, un état est mis à jour, n'est-ce pas ? Il se peut donc que vous souhaitiez récupérer les nouvelles données sur le serveur. Donc, dans ce cas, vous pouvez utiliser le crochet d'effet Use. Et cette récupération de données est également connue sous le nom d' effet secondaire, n'est-ce pas ? C'est donc essentiellement une tâche que vous devez effectuer après votre tâche principale, n'est-ce pas ? C'est donc à cela que sert Effect Hook Hook pour le dire vraiment simplement. OK. Et voici une syntaxe ici. OK ? C'est la syntaxe, vous pouvez le voir. J'ai donc un effet d'usage, d'accord ? Et entre ces crochets, d'accord ? Donc 1 seconde. Je vais juste le couper ici. J'utilise l'effet d' usage de cette façon. Je dois l'importer en haut chaque fois que je l'utilise, et si je le colle ici, j'ai cette fonction à l'intérieur. Il s'agit donc d'une fonction que vous pouvez voir, la pièce sélectionnée. Et il s'agit essentiellement du code que vous souhaitez exécuter comme effet secondaire, n'est-ce pas, ou de l'action que vous souhaitez effectuer, il est transmis sous forme fonction flèche, comme vous pouvez le voir ici. OK. Maintenant, ce code peut être quelque chose comme passer un appel à l'EPA, comme je l'ai dit, ou mettre à jour tout type d' abonnement ou tout ce que vous voulez faire, n'est-ce pas ? Et ici, vous avez un tableau pour les dépendances. OK ? Maintenant, cela signifie que c'est la dépendance, d'accord ? C'est-à-dire que c'est essentiellement surveillé, d'accord ? Et chaque fois qu'il y a un changement dans cette dépendance, ce code est exécuté. C'est comme ça que ça marche, non ? Donc, si vous voyez la définition suivante : Utiliser un hook d'effet dans React vous permet d'exécuter automatiquement le code somme, c' est-à-dire ce code, c'est ce code que vous avez mentionné ici, n'est-ce pas ? s'agit donc de ce code de somme, qu'il vous permet d' exécuter automatiquement lorsque quelque chose change ou lorsqu'un composant se charge. OK ? Quand quelque chose change, alors qu'est-ce que c'est ici ? C'est donc de cette dépendance que nous parlons. OK ? Ainsi, lorsque cette dépendance change, si vous avez spécifié une dépendance, cela est bien sûr facultatif. Si vous avez spécifié une dépendance, ce code s'exécutera chaque fois qu'il y aura un changement de dépendance. Et ici, vous pouvez le voir, ce sont différentes variantes du crochet d'effet d' utilisation dans lesquelles il peut être utilisé. C'est le premier. OK. Maintenant, ici, il n'y a pas de tableau de dépendances. Vous pouvez voir qu'il n'y a aucun tableau de dépendances. Si je veux spécifier, je peux spécifier le tableau de dépendances comme celui-ci, mais il n'y a pas de tableau de dépendances ici. Ainsi, sans le tableau de dépendances ou sans spécifier aucune sorte de dépendance, cela s'exécuterait à chaque rendu. Ainsi, chaque fois qu'un rendu est effectué, code que vous spécifiez dans cette fonction de flèche s'exécute. OK. Et c'est une autre variante où vous avez un tableau de dépendances. OK ? Vous pouvez spécifier des valeurs séparées par des virgules ici. Désolé, ce n'est pas celui avec le tableau de dépendances. C'est celui avec le tableau de dépendances vide. OK. J'ai donc le troisième avec la dépendance ajoutée. OK. Que se passe-t-il si vous avez un tableau de dépendances vide ? Il ne s'exécute donc qu'après le rendu initial. Ainsi, lorsque le composant monté ou s'affiche pour la première fois, c'est le seul moment où il s'exécute OK. Et il s'agit d'une troisième variante que nous avons ici, dans laquelle nous avons le compte. OK ? Maintenant, le nombre est la dépendance sur la base laquelle ce code sera exécuté. Donc, s'il y a une sorte de mise à jour ici dans le décompte, d'accord, elle sera exécutée, n'est-ce pas ? C'est ce que cela signifie, d'accord ? Et il fonctionne également lors du rendu initial, et lorsque le nombre change, c'est ce que cela signifie. OK ? J'espère donc que c'est assez clair du point de vue théorique, n'est-ce pas, pour le dire simplement utiliser l'effet Hk. D'accord, c'est la définition la plus simple que je puisse avoir avec effect hook et react, vous permet d'exécuter du code automatiquement lorsque quelque chose change ou lorsqu' un composant se charge. accord ? C'est donc utiliser Effect Hook pour vous. Maintenant, avant d' utiliser le crochet d'effet d'utilisation, je vais faire défiler la page vers le bas, et ici, prenons un exemple sans utiliser le crochet d' effet au et ici, prenons préalable. OK ? Donc, dans cette application en particulier, j'ai juste cet en-tête normal que je renvoie et vous pouvez voir cette sortie à l'écran ici, effet hook, d'accord ? Ce que je vais faire, c'est créer un compte ici, bien sûr, je vais utiliser Use State Hook ici. OK ? Et je vais dire count ici et je vais dire set count, qui est la mer, et je vais dire use state ici et je vais l' initialiser à zéro OK ? Maintenant, ce que je vais faire ensuite, c'est compter les incréments, d'accord Et ici, je vais dire qu'il s'agit d'une fonction flèche. Par ici. OK. Et ce que je vais faire, c'est que lorsque cette fonction sera appelée, je mettrai à jour le décompte ici, d'accord ? Donc je vais dire compter plus un, quelque chose comme ça. OK. Je vais également mettre à jour le titre, d'accord ? Donc, documentez. Le titre est égal à, et je vais avoir les littéraux du modèle ici. Je vais dire compter. Donc, à l'intérieur des backticks, j'ai le compte, et je dirais le plus grand, et je dirais le compte plus un, quelque chose comme ça OK ? Nous n'utilisons pas encore cette fonction. OK ? Nous devons en faire usage . Alors voilà, je vais entrer, et ici, je vais ajouter un bouton. OK ? Il s'agit donc d'un simple bouton. OK ? Et ce qu'il fait, c'est qu'il est écrit « augmentation » ici OK. Et ici, sur le côté, il suffit de cliquer sur quelque chose comme ça, et je dirais le nombre d'incréments. Je vais enregistrer ça. OK ? C'est donc un bouton que j'ai, d'accord, et vous pouvez le voir ici. Le titre dit « What plus React », non ? Je peux donc dire incrément et cela met à jour le titre, non ? Vous pouvez voir que le décompte est en cours de mise à jour, n'est-ce pas ? Dans le titre, vous pouvez voir. C'est vrai. Voici donc un exemple sans utiliser de crochet d'effet. Et chaque fois que vous cliquez sur le bouton, la fonction d'incrémentation met directement à jour le titre du document Cela fonctionne, mais ce n'est pas idéal car c'est difficile à gérer et à maintenir, en particulier lorsque l'application grandit. C'est un crochet à effet sans usage, non ? Nous pouvons maintenant transformer cet exemple en hook d'effet use et comment ferions-nous cela ? Donc ce que je ferais, c'est dire : Oh, laisse-moi l'avoir ici, d'accord ? Et je vais faire défiler la page vers le haut, d'accord. Et ici, je vais dire effet d'usage. Au moment où je dis « utiliser un tel effet », d'accord ? Et si j'appuie sur Entrée, faisons défiler la page vers le haut pour voir si l'entrée a été ajoutée. L'entrée a donc été ajoutée, vous pouvez la voir ici en haut, ainsi que l'état d'utilisation. Et si vous faites défiler l'écran vers le bas, choisissez un effet, je dois utiliser la syntaxe T pour pouvoir même la copier. Je veux donc utiliser celui avec la dépendance, non ? Donc je vais juste emmener celui-ci ici. OK. Et ce que je ferais, c'est ici, je peux avoir le code, ou dedans. Donc l'effet secondaire ici est ce code, non ? Je vais donc simplement le supprimer et le déplacer vers cette fonction particulière ici. OK. J'ai donc séparé le nombre d'incréments, et c'est un hook d'effet d'utilisation qui est exécuté, d'accord ? Oups. Alors cette fenêtre contextuelle entre en ligne de compte. OK. Donc, ce hook d'effet d'utilisation est exécuté, d'accord ? Lorsque le décompte est mis à jour, toute modification du nombre déclenchera l'exécution de ce code, n'est-ce pas ? Et que fait ce code ? Cela met à jour le titre du document. OK ? Quelle est la tâche principale ? La tâche principale était simplement de mettre à jour le décompte avec cette fonction. Et après avoir mis à jour le décompte, nous avons un hook d'effet d'utilisation, qui s'assure d'exécuter du code supplémentaire une fois que les modifications ont été apportées au comptage. C'est bon. J'espère que cela a du sens. Je vais donc enregistrer ceci ici, et je vais le rafraîchir. OK. Maintenant, vous pouvez voir ici que vous voyez le comte Colin One, n'est-ce pas ? Nous n'avons même pas encore cliqué sur le bouton. Il est dit « Comte Colin One ». C'est bon. Alors que dans l'exemple précédent, je vais simplement couper ceci, je vais ou je vais simplement le copier, d'accord ? Je vais juste commenter cela, et je vais simplement revenir à l'exemple précédent. Voici donc notre exemple précédent. Dans l'exemple précédent, lorsque nous n'avons pas appuyé sur le bouton, nous avions Wt plus react, qui est le titre par défaut ici. Nous ne voyons pas le nombre plus un ici parce que le titre est défini, bien sûr, lorsque vous cliquez sur le bouton, n'est-ce pas ? Donc, lorsque je clique sur le bouton, il est mis à jour pour compter un, deux, etc., n'est-ce pas ? Mais dans ce cas, par ici, d'accord ? Laisse-moi juste contrôler. Donc. Dans ce cas , ici, d'accord ? Je vais donc faire le décompte ici, le décompte plus un. OK. Donc, dans ce cas, ici, je vois le compte zéro. Hein ? Pourquoi est-ce zéro ? Pourquoi est-ce que je le vois mis à jour dans le titre ? Parce que si vous le voyez ici, il fonctionnera. Si vous utilisez des dépendances ici, s' exécutent lors du rendu initial et lorsque le nombre change. Il est donc déjà en cours d'exécution lors du rendu initial. Mais cela n'a pas été le cas. Donc, ce truc quand c' était dans la fonction et que cela a été commenté, ou n'existait pas. À ce moment-là, il n'était pas en cours d'exécution lors du rendu initial. Vous pouvez voir qu'il ne fonctionne pas lors du rendu initial. Et chaque fois que vous cliquiez, la mise à jour s' affichait ici, non ? Donc oui, c'est le truc ici en ce moment. Cela explique donc que cela fonctionne au premier hasard, n'est-ce pas ? Donc, si je sauvegarde ce point F zéro, et que je peux l'incrémenter, d'accord, autant de fois que je le souhaite, et vous verrez la mise à jour du titre se produire Et c'est essentiellement lié au décompte. Toute modification du décompte déclenchera ce code ici, d'accord ? Ce code que j'ai écrit. OK. Ce code sera déclenché, non ? Et oui, tout cela est dû au tableau de dépendances. tableau de dépendances garantit donc que cela n'est déclenché que lorsque le nombre est mis à jour et à tout autre moment. C'est bon. J'espère donc que use effect hook est assez clair pour vous tous quant à ce que c'est et comment il fonctionne. Donc, pour le dire simplement, Use effect hook and react vous permet d'exécuter du code automatiquement lorsque quelque chose change ou lorsqu'un composant se charge, n'est-ce pas ? C'est comme configurer une tâche pour qu'elle s'exécute après les mises à jour de l'écran ou lorsqu'un certain type de données est prêt, n'est-ce pas ? Cela signifie que lorsque certains types de données sont prêts, vous êtes peut-être en train certains types de données sont prêts, d'effectuer un traitement, n'est-ce pas ? Et vous êtes peut-être en train d'attribuer ces données de processus à un état. Vous pouvez avoir un crochet d'effet d'utilisation lié à cet état. Et chaque fois que les données sont prêtes et qu'elles sont attribuées à cette variable d'état, l'effet d'utilisation est strict, n'est-ce pas ? C'est donc ce que cela signifie lorsque vous dites quand certaines données sont prêtes, n'est-ce pas ? Et ici, vous avez ces différentes variations d'effet d'utilisation, et voici la syntaxe, la syntaxe principale. C'est bon. J'espère que cela vous a été utile et j' espère que vous avez pu suivre. 11. Démystifier les tableaux de dépendances : contrôler le comportement d'utilisationEffect: Salut, voilà. Bienvenue. Et nous allons examiner l' importance du tableau de dépendances dans le hook d' effet d'utilisation, n'est-ce pas ? Jetons donc un coup d' œil à cet exemple. Donc, dans cet exemple, j'ai un projet réactif très simple, et dans l'application JSX, j'ai ce composant d'application dans lequel je renvoie simplement un dif avec un en-tête et un clic sur un bouton En cliquant sur un bouton, l'état est mis à jour. Bien entendu, nous avons ici un état appelé count à l'aide de use state, et nous utilisons le hook use effect , lequel s'il y a un changement dans le nombre, nous mettons à jour le titre du document. C'est bon. Voici donc ce qu' est le code. C'est assez simple, et je rends ce composant ici dans le point principal GSX, comme vous pouvez le voir, d'accord ? Donc, ce que je ferais, c' est passer à app point JSX, et notre objectif est de comprendre l'importance du tableau de dépendances que nous avons Voici donc le tableau de dépendances que nous avons. D'accord ? Maintenant, maintenant, la première chose, d'accord, ce que je ferais, c'est que ce tableau de dépendances est directement lié à la façon dont le hook use effect est exécuté ou au nombre de fois où il est exécuté et quand est-il exécuté. Donc, pour suivre cela, je vais dire Console point Log over here, ok. Et je vais simplement avoir un message ici. Je dirais effet d'usage. Déclenché, quelque chose comme ça. C'est bon. Et je peux m'en débarrasser. Je ne souhaite pas mettre à jour le titre. OK ? Je vais juste m'en tenir au verrouillage de la console ici. OK ? Je vais le sauvegarder et nous pourrons voir les serrures ici en cours d'inspection. OK ? Je vais donc aller inspecter, je vais aller sur la console et vous verrez que l'effet de U a été déclenché. accord ? Si j' actualise, vous verrez, d'accord, cela se déclenche deux fois ici. OK ? Il doit être largement déclenché une fois. OK. Maintenant, je vais vous dire ce qui se passe. Ainsi, le hook d'effet Jos avec un tableau de dépendances est déclenché une fois lorsque le composant est monté et lorsqu'il y a un changement dans le tableau de dépendances. OK ? Donc, en ce moment, il est déclenché lorsque le composant est monté. OK ? n'y a aucun changement dans la valeur du tableau de dépendances ici. Nous ne sommes donc pas en train de mettre à jour le nombre de rafraîchissements, n'est-ce pas ? Donc, c'est rendu pour une seule fois, mais nous voyons les points de la console s' enregistrer deux fois ici, d'accord ? Et c'est parce que nous sommes en mode développement. Et lorsque vous êtes en mode développement ici, nous exécutons en fait cette application de réaction en mode strict ici, si vous le voyez. Donc, si vous passez au point principal JSX du projet, je l'exécute en fait dans le strict OK Maintenant, si vous ne voulez pas le voir deux fois, d'accord, vous pouvez simplement débarrasser de ce mode strict ici. Le mode strict est toutefois recommandé lorsque vous êtes en mode développement, car il permet de détecter les problèmes potentiels et toute sorte de pratiques de code dangereuses lorsque vous êtes en développement. OK ? Mais nous avons vu le message deux fois parce que la réaction s' exécutait en mode strict. Et une fois que je m'en serai débarrassé, si je l'enregistre, vous verrez que je ne le vois qu'une seule fois. OK ? Vous pouvez donc voir hook d'effet d'utilisation est déclenché une fois, n'est-ce pas ? Maintenant, ce que nous pouvons faire, c'est jouer avec un animal de compagnie avec l'effet d'usage. D'accord ? Maintenant, si je dis incrément, vous verrez qu'il est déclenché chaque fois que je clique sur incrémenter. Et pourquoi cela se produit-il ? OK ? Cela se produit parce que cet effet est lié à compter ici. Et chaque fois qu'il y a un quelconque changement dans le décompte, qu'il s'agisse d'incrémentation, de décrémentation, que j'apporte une quelconque modification au décompte, ce code se déclenche, n'est-ce Et c'est ce que nous disons ici. D'accord ? Maintenant, ce que nous pouvons faire, c'est nous en débarrasser. OK. Que va-t-il se passer maintenant ? OK ? Donc je vais l'actualiser, et je vais vider la console, d'accord ? Je vais donc le rafraîchir. Il se déclenche pour la première fois lorsque le composant est monté, bien sûr, n'est-ce pas ? Pas d'incrément du clic droit, il sera déclenché à chaque fois. OK ? Mais maintenant, vous verrez que la sortie est sm pour avoir un tableau de dépendances et sans dépendance a Alors, quelle est la différence, d'accord ? La différence ici est que sans tableau de dépendances, il sera déclenché lors de tout type de modification ou de rendu sur le composant, n' est-ce pas, ou de toute sorte de nouveau rendu sur le composant. Mais avec le tableau de dépendances, il ne sera déclenché que lorsque le nombre sera mis à jour. C'est bon. Alors laisse-moi te montrer ça. OK ? Et pour le démontrer, je vais introduire une autre variable d' état. Je vais appeler ça une autre valeur ici, d'accord ? Et je dirais de définir une autre valeur comme celle-ci. OK. Et je vais dire utiliser l'état ici, et cela peut être, disons, ou je vais juste le régler sur dix, d' accord ? Voyons ce qui va se passer. C'est bon. Et voilà, je vais descendre. Je vais dupliquer ce bouton ici en bas. OK ? Et ce que je vais faire, c'est appeler cela une autre valeur. Quelque chose comme ça. OK. Nous avons donc encore un bouton. Mais au lieu de mettre à jour le décompte, je vais mettre à jour une autre valeur ici. C'est bon. Et je dirais une autre valeur plus un, non ? C'est donc fait, d'accord. C'est ce que nous sommes en train de faire. C'est bon. Voyons maintenant l'importance du tableau de dépendances. D'accord ? Je l'ai enregistré. OK. Permettez-moi de me rafraîchir. Vous pouvez donc voir que le crochet d'effet Use est déclenché, ou lorsque le composant s'affiche pour la première fois ou que le composant est monté Maintenant, si je dis incrément, cela se déclenchera à chaque fois que je clique sur l'incrément C'est bien sûr, non ? Mais si je clique sur une autre valeur, elle ne se déclenchera pas. Pourquoi ? Pourquoi ? La réponse est donc que cela est lié au changement de valeur dans l'état de comptage, c' est vrai, et non dans une autre valeur. Et c'est pourquoi il n'est pas déclenché. OK ? Maintenant, si je me débarrasse du compte ici, d'accord. Maintenant, si j'actualise, vous verrez qu'il est déclenché une fois lors du chargement du composant. Si je dis incrémentation, elle est déclenchée. Si je dis une autre valeur, elle est à nouveau déclenchée. OK ? Tu peux voir. Il est donc rendu pour toute sorte de modification du composant. Et c'est parce qu'il n'y a pas de tableau de dépendances, non ? Il n'existe aucun tableau de dépendances. OK ? Maintenant, disons si j'ajoute un tableau de dépendances vide. Permettez-moi donc d'ajouter un tableau de dépendances vide. Alors, que se passerait-il ? Si j'actualise, cela se déclenche pour la première fois ici, vous pouvez voir, maintenant, toute sorte de changement, il ne sera pas déclenché car un tableau de dépendances vide garantit que le composant est rendu ou que l' effet d'utilisation est déclenché. Je suis désolé, l' effet d'utilisation n'est déclenché que pour la première fois lorsque le composant est monté. OK ? J'espère donc que vous avez une bonne idée, d'accord ? Et j'espère que vous pouvez voir quoi ce tableau de dépendances fait une grande différence, d'accord ? Donc, si vous effectuez une quelconque opération ici, c'est un peu lourd, d'accord ? Y a-t-il un point-virgule ici. Je viens de l'ajouter. Donc, si vous effectuez des opérations un peu lourdes et fastidieuses ici dans le cadre de ce hook d'effet d'utilisation, alors ce tableau de dépendances peut décider des performances. OK ? Vous devez donc vous assurer que ce hook d'effet d'utilisation n' est exécuté qu' au bon moment lorsque vous en avez réellement besoin. OK. Si, pour une raison ou une autre, vous avez une tâche longue ici, disons, une tâche de traitement exigeante, et si vous manquez le tableau de dépendances, cela vous donnera très mauvaises performances, d'accord ? Mais disons que si vous avez une variable, accord, et que vous voulez surveiller les changements dans cette variable, et si vous voulez effectuer cette action particulière uniquement lorsqu'il y a un changement dans cette variable particulière, dans ce cas, vous devez l'inclure ou la lier à cette variable en particulier, et vous devez ajouter cette variable, variable état, quelle qu'elle soit, ici dans le tableau des dépendances. Et chaque fois qu'il y aura un changement, le hook d'effet d'utilisation ne sera déclenché que dix fois. Il y aura maintenant des scénarios dans lesquels vous voudrez peut-être effectuer une sorte de ménage lorsque le composant est chargé pour la première fois, n'est-ce pas Vous pouvez donc utiliser un hook d'effet dans ce cas avec un tableau de dépendances vide, car vous souhaitez effectuer cette tâche de nettoyage juste au moment où le composant est chargé et non après Vous pouvez donc avoir une zone de dépendance vide pour cela. Il sera donc rendu comme vous l'avez vu. heure actuelle, nous avons une zone de dépendance vide, elle sera donc rendue ou exécutée une seule fois lors du rendu du composant et pas après cela. J'espère donc que cet exemple vous donnera une idée claire du fonctionnement de use Effect Hook et importance de ce tableau de dépendances existant, n'est-ce pas ? J'espère donc que vous avez une idée claire des différents scénarios relatifs à la façon dont cela est exécuté et géré, n'est-ce pas ? Donc, si le tableau de dépendances mentionné, comme toute sorte de valeur, alors cette fonction que vous spécifiez ne sera exécutée qu' est mentionné, comme toute sorte de valeur, alors cette fonction que vous spécifiez ne sera exécutée qu'en cas de modification ou mise à jour de cette valeur particulière, n'est-ce pas ? Et bien sûr, il sera également exécuté lors du premier rendu. Hein ? Si vous souhaitez qu'il soit exécuté uniquement lors du premier rendu, vous devez spécifier un tableau de dépendances vide. Si vous souhaitez exécuter quelque chose lors d' une modification de l'interface utilisateur ou d'un quelconque type de rendu, d' accord, vous ignorez simplement le tableau de dépendances. OK. Mais n'oubliez pas qu'il sera déclenché à chaque fois qu'il y aura un nouveau rendu. C'est bon. Gardez donc la performance à l'esprit. C'est bon. J'espère que cela vous a été utile, d'accord. Et oui, nous désactivons le mode strict ici. Vous pouvez simplement conserver ou vous en tenir au mode strict. Parce que le mode strict est recommandé en mode développement. Je viens donc de le modifier parce que je ne voulais pas exécuter use Effect hook deux fois sur le rendu du composant pour la première fois, n'est-ce pas ? Je l'avais donc retiré. Mais oui, c'est ainsi que les choses fonctionneraient, et j'espère que c'est clair pour vous tous. 12. Projet pratique : créer un tracker de souris en temps réel avec useEffect: Bienvenue dans cette vidéo où nous allons créer notre propre traceur de souris, et nous allons utiliser Use Effect Hook pour le faire . OK ? Ici, sur mon écran, vous pouvez voir cette application où elle m'indique la position de la souris lorsque je la déplace. OK ? C'est donc tout à fait en temps réel, et nous utilisons le hook d'effet use ici pour cette application particulière. C'est bon. Cela nous aidera donc à mettre en pratique certains concepts de React et à intégrer un projet à notre portefeuille. C'est bon. C'est donc un projet très simple, non ? Et allons-y directement. Je suis donc sur le code VS, code Visual Studio, et mon navigateur est ouvert côte à côte. J'ai créé un projet VA très simple à l'aide de VT, et vous pouvez voir que je suis ici dans app point GSX, qui est rendu par le biais du point moyen GSX accord ? J'ai un fichier CSS deux. Ici avec du CSS très basique. C'est un CSS standard que je peux appeler ça. OK ? Vous avez une famille de téléphones, texte est aligné au centre, rembourrage et la marge sont réglés à zéro, d'accord ? Oups, le haut du rembourrage mesure 40 pixels et sa hauteur minimale est de 40 pixels. C'est bon. Donc, ce que nous allons faire, c'est créer notre propre traceur de souris. Tout d'abord, ce dont nous avons besoin, c'est d' avoir un État ici. Je vais appeler cet état la position de la souris. OK. Et cela va nous aider à suivre la position de la souris. Cela aura donc la dernière position de la souris, et elle doit également être mise à jour chaque fois que la position de la souris change. Et je vais utiliser l'état d'utilisation ici. Au moment où je nous ajouterai, vous verrez cette entrée ajoutée en haut, d'accord ? Et cela permettra essentiellement maintenir la position sous forme de paires clé-valeur. Je vais donc avoir X, deux points zéro. Il s'agit donc de la position de X, et voici la position de Y. Donc oui. C'est fait. C'est bon. Maintenant, ce que nous devons faire, c'est avoir besoin d'un nous devons changer l'interface. D'accord, nous avons besoin d'un titre, donc je dirais la position de la souris. OK, et nous allons afficher la position de la souris ici. OK. Je vais donc dire P tag et je vais dire X, deux points et je vais dire point X de position de la souris ici. OK. Et j'ai aussi la position Y. OK ? Je vais dire deux points Y et j'afficherai la position Y sous forme de point Y de position de la souris, quelque chose comme ça. C'est bon. Ainsi, vous pouvez voir la position de la souris s'afficher. Il est actuellement 00 car c'est pour cela que nous l'avons initialisé . C'est bon. Maintenant, ce que nous devons faire est là, je vais utiliser l'effet d'utilisation et grâce à l'effet d'utilisation ici, nous avons l'écouteur et tout est géré OK ? Donc, ici, use effect, ok et dans use effect, j'ai cette fonction flèche ici, quelque chose comme ça, et j' ai un tableau de dépendances. accord ? Voici à quoi ressemblera le crochet, non ? Lorsque l'effet d'utilisation est ajouté, notez que cette entrée a été ajoutée automatiquement en haut. D'accord ? Maintenant, ici, ce que je vais faire, c'est avoir ce tableau de dépendances vide, o et dans celui-ci, je vais ajouter une fonction. OK. Je vais donc dire poignée, souris, déplacez-vous ici. OK ? Et va accepter l'événement, et voici une fonction flèche créée. OK ? Voici donc ce que je suis en train de créer et ici, je vais dire définir la position de la souris. OK ? les sièges en appelant cela, de définir la position de la souris, et je vais dire X Clineventt client X. Il s'agit donc de mettre à jour les sièges en appelant cela, de définir la position de la souris, et je vais dire X Clineventt client X. D'accord. Et je vais dire y, Colin, event, point, client, Y, quelque chose comme ça. OK ? Donc oui, c' est fait ici. Ensuite, je vais ajouter un écouteur à Windows Je vais dire Window point, ajouter un écouteur d'événements, quelque chose comme ça, et je vais ajouter un écouteur de mouvement de souris. OK ? Je vais donc dire « mouvement de la souris », celui-ci. Je veux que cela soit déclenché par n'importe quel mouvement de souris, est-ce pas, afin que je puisse le suivre en temps réel, n'est-ce pas ? Et je dirais « manipulez le mouvement de la souris ». OK. J'espère que cela a du sens. Ce que nous faisons, c'est simplement ajouter un écouteur à la fenêtre OK ? C'est une fenêtre. Nous ajoutons un écouteur là-bas, nous voyons la souris déplacer l'écouteur Il suivra donc chaque mouvement de la souris, et il exécutera essentiellement ce mouvement de souris avec poignée. OK ? Je vais donc enregistrer ça. Et si vous venez ici, vous verrez que cela fonctionne bien. Vous pouvez voir la position en temps réel, non ? Donc oui, il s'agit du traceur de souris à l'aide d' un crochet à effet. Et j'espère que vous avez une bonne idée de la façon dont vous pouvez utiliser Use Effect Hook pour suivre les bonnes pratiques. 13. Nettoyer comme un pro : maîtriser les fonctions de nettoyage en usageEffet: Il est donc temps de parler un peu plus l' application de suivi de souris que nous utilisons. Donc, ici, nous attachons un écouteur d'événements à la fenêtre, d'accord ? Maintenant, il y a un petit problème, d'accord ? Il n'y a aucun nettoyage que nous sommes en train de faire, n'est-ce pas ? L'écouteur d'événements que nous ajoutons reste actif même lorsque le composant est démonté OK, et cela peut entraîner des fuites de mémoire et surcharge de performance inutile pendant que l'écouteur continue de fonctionner D'accord ? Ce n'est donc pas une bonne chose, et nous devons gérer cela avec effet d'usage. L'effet d'utilisation peut donc nous permettre d'inclure une fonction de nettoyage pour supprimer l'écouteur d'événements lorsque le composant est démonté ce qui garantit que , ce qui garantit que les ressources sont correctement libérées et empêche également les fuites de mémoire potentielles. D'accord ? Alors, qu'est-ce que la fonction de nettoyage ? La fonction de nettoyage est une sorte de fonction qui nous est fournie avec un effet d'utilisation où vous pouvez faire du nettoyage, Vous pouvez donc effectuer des tâches de nettoyage, comme supprimer des écouteurs d'événements ou si vous avez des minuteries en cours d'exécution, et si le composant se démonte, vous pouvez annuler ces minuteries et tout ce genre de choses, n'est-ce supprimer des écouteurs d'événements ou si vous avez des minuteries en cours d'exécution, et si le composant se démonte, vous pouvez annuler ces minuteries et tout ce genre et si le composant se démonte, vous pouvez annuler ces minuteries de Cela permet à votre application de rester efficace et exempte de bogues. D'accord ? Comment ajouter un écouteur d'événements Donc, une fois que l'auditeur sera ajouté ici, je vais lui dire de revenir, d'accord ? Et je vais avoir une fonction flèche ici. Un truc comme ça. Comme ça. OK. Et ici, je vais simplement dire que je vais avoir le code pour nettoyer dans cette fonction de nettoyage Il s'agit donc d'une fonction de nettoyage ici. Je vais dire Window Dot Remove Event Listener. Tu peux voir. Quel est l'écouteur d'événements que nous avons ajouté ? C'était donc un mouvement de souris. C'était un auditeur d'événements, et j'ai aussi l' auditeur J'ai une poignée de souris qui se déplace ici. D'accord ? Je l'ai donc supprimé, et ici, vous pouvez créer un journal de console si vous le souhaitez, d'accord ? Vous pouvez créer un journal de console si vous le souhaitez. Mais pour le moment, nous ne verrons aucune sorte de sortie car elle est déclenchée lorsque le composant est démonté, n'est-ce Donc, au lieu d'ajouter un journal de console ici, nous allons d'abord déclencher un démontage manuel. D' accord, nous allons ajouter un bouton qui nous permettra de monter et de démonter le composant afin que nous puissions voir comment fonctionne cet écouteur, n'est-ce pas ? d'ajouter un journal de console ici, nous allons d'abord déclencher un démontage manuel. D' accord, nous allons ajouter un bouton qui nous permettra de monter et de démonter le composant afin que nous puissions voir comment fonctionne cet écouteur, n' Donc, ce que je ferais, c'est déplacer tout ce code en fait, d'accord ? , je vais déplacer tout ce code En fait, je vais déplacer tout ce code vers un autre composant. Et dans ce composant d'application, je vais ajouter un composant parent. D'accord ? Nous aurons donc un composant parent qui chargera ce traceur de souris et il aura également un bouton pour le décharger. D'accord ? Alors laissez-moi vous montrer de quoi je parle. Ici, je vais créer un nouveau fichier. Je dirais souris, point traceur JSX, quelque chose comme ça. Je vais le coller ici. Et au lieu d'exporter l'application ici, je dirais simplement souris, traceur. D'accord ? Il s'agit d'une fonction. C'est le nom d'un composant, non ? Voici donc le nom du composant en ce moment. Et ici, dans app point JSX, nous devons nous en débarrasser Nous allons effectuer une sorte de nettoyage, et nous allons simplement ajouter le composant parent ici OK. Je vais donc simplement me débarrasser de tout ce code ici. OK. Et oui, cela reste une application, et nous devons afficher le composant parent ici. D'accord ? Nous allons nous en débarrasser. C'est bon. Ici, nous recevons une erreur car nous ne sommes en train de rien afficher, mais je vais juste garder la télévision pour le moment afin qu'aucune erreur ne se produise. Je vais introduire un autre composant appelé composant parent. OK. Et je vais séparer les composants parents. Je dirais le composant parent point SX. Nous avons donc ajouté deux composants ici. C'est bon. Et ce que je ferais, c'est dire fonction. OK, fonction, composant parent, quelque chose comme ça, et je vais ajouter une exportation ici. Je dirais export default, composant parent, comme Okay. Et ici, je vais ajouter un État. Nous allons donc maintenir un état que vous souhaitiez afficher un composant ou non. D'accord ? Je vais donc dire show component, et je dirai set show component. Quelque chose comme ça, je vais ajouter use state hook ici. OK. Maintenant, l'état d'utilisation est vrai. Donc, par défaut, nous montrons que c'est booléen. Cet état a une valeur booléenne, et je peux avoir un composant de bascule constant, et je vais avoir une fonction flèche ici Et dans ce cadre, je peux dire définir, afficher le composant. Et ici, je vais dire la valeur précédente. D'accord ? Il suffit donc d'inverser la valeur précédente. C'est ce que nous disons ici. OK. Donc oui, c'est fait. Et ce que je dois faire maintenant, c'est retourner ici. Il indiquera donc retour, et j'ajouterai un relevé de retour. OK, quelque chose comme ça. Gagnez, je vais avoir un TF comme celui-ci. OK, et je vais avoir un bouton. OK. Maintenant, à quoi sert ce bouton ? Donc, bouton sur clic. OK. Au clic, il activera le composant Ls. OK. Et ici, je peux utiliser un opérateur ternaire Donc, si le composant show est vrai, alors que faisons-nous ? Nous avons la valeur de Unmount Tracker, d'accord ? Comme si le texte était affiché sous forme de tracker de démontage. D'accord ? Je vais donc dire démonter Et Mount Tracker. Et si la valeur est force, nous dirons Mount Tracker. Donc, ce texte bascule également, non ? En gros, c' est ce que cela signifie. D'accord ? J'ai donc terminé ce bouton. D'accord ? Maintenant, ce que je peux faire c'est avoir ce script Ja ici. S'il s'agit d'un composant show, d'accord, alors ce que nous devons faire est de rendre Mouse Tracker, quelque chose comme ça. Comme. OK. Nous effectuons donc le rendu conditionnel du tracker de souris ici. D'accord ? Ce qui se passe, c'est que nous disons show component. Je montre que le composant est vrai, alors nous voyons Render Mouse Tracker, n'est-ce pas ? C'est donc fait, et ici, nous devons ajouter un composant parent au lieu de tf, comme ça. Vous pouvez voir que l'application est ici, non ? Vous pouvez donc voir que cela arrive. Je peux rendre et annuler le rendu. Tu peux voir. OK, je peux monter. Et démontez Le composant est donc en cours de montage et de démontage. D'accord ? Comment est-ce que cela fonctionne ? OK, nous avons juste fait un peu de refactorisation. Nous avons ajouté un composant parent. D'accord ? Nous avons d'abord créé deux fichiers. L'un est constitué de deux fichiers, ou devrais-je dire de deux composants dans des fichiers séparés. Il s'agit donc du composant parent. D'accord ? Nous avons un composant de suivi de la souris. Le composant Mouse Tracker est donc simple. OK. Nous avons juste ce traceur de souris avec crochet à effet d' utilisation nous indique la position de la souris, n'est-ce pas ? Et nous avons ajouté une fonction de nettoyage ici. Ensuite, nous avons un composant parent qui a cet état de composant d'affichage, qui est le pollen, et il y a un bouton qui fait passer cette valeur de composant, cette valeur de composant d' affichage, à vrai ou à faux, Et puis nous rendons le composant show de cette façon. D'accord ? C'est donc réglé. Et puis dans l'app point JSX, nous ne présentons que le composant parent, Parce que dans le composant parent, nous rendons en fait le composant de suivi de la souris, et c'est un rendu conditionnel à l'aide de l'opérateur. C'est bon. C'est donc fait, et maintenant ce que nous pouvons faire, c'est voir comment fonctionne cette fonction, n'est-ce pas ? Donc, ce que je vais faire, c'est que nous devons ajouter, je dirais, nous devons ajouter le journal des points de la console ici. D'accord ? Et nous devons suivre la façon dont l'écouteur est ajouté et comment il est supprimé. Donc ici, je vais dire Log, d'accord ? Et ici, on peut dire souris, déplacer, écouteur ajouté, quelque chose comme ça D'accord ? Je vais le supprimer. OK. Je vais le copier et ici, dans l'instruction return, dans la fonction de retour, je vais voir l' écouteur Mouse Move supprimé D'accord ? Quelque chose comme ça. Voyons maintenant la console. Je vais venir ici. Je vais venir chez Console. OK. Tu peux voir. OK, tout d'abord, je vais faire un rafraîchissement ici. OK, actualisez, et vous pouvez voir le suivi des mouvements de la souris ajouter, suivi des mouvements de la souris, l'ajouter. J'aimerais déplacer ma souris ici, et vous avez ajouté le tracker Mousemove, Désolé, l' écouteur Mouse Move a été ajouté. Et maintenant, démontez, d'accord, vous verrez que l' écouteur Mouse Move est supprimé D'accord ? Ce ne sera pas le cas si vous ne disposez pas de cette fonction de nettoyage Donc, si vous ne disposez pas de cette fonction de nettoyage, l'écouteur n'est jamais supprimé. D'accord ? C'est là le problème. Donc, si vous actualisez, vous pouvez voir que l'écouteur est ajouté. Vous pouvez voir que l' écouteur Mouse Move a été ajouté, n'est-ce pas ? Si je démonte le tracker, que je démonte l'écouteur, que je monte le composant, je dois dire que vous pouvez voir qu' aucun écouteur n'est retiré, d'accord ? L'auditeur est donc toujours là, ce qui peut entraîner des effets secondaires ou créer des parcs D'accord, parce que vous avez un auditeur, non ? Cela n'est pas utilisé. D'accord ? Vous pouvez donc voir et imaginer comment cela fonctionne bien, d'accord ? Donc, montage, montage. Vous pouvez voir qu'il est en train d'être ajouté, n'est-ce pas ? Voilà ce qu'est une fonction de nettoyage, d'accord ? J'espère que cela vous donne une idée de l' importance de cette question. L'objectif de cette fonction de nettoyage est, bien sûr, comme son nom l'indique, qu'elle soit utilisée pour nettoyer, n'est-ce pas ? Ainsi, toute tâche de nettoyage que vous souhaitez effectuer, vous pouvez le faire de cette façon D'accord ? Voici la syntaxe ici. OK. Dans ces bretelles bouclées, vous pouvez effectuer toutes sortes de tâches de nettoyage, et vous pouvez voir comment elles se déclenchent lors du démontage du composant ici. Hein ? J'espère donc que cela vous sera utile et j'espère que vous avez pu suivre, et j'espère que vous savez maintenant comment utiliser Huge effect Hook. 14. PROJET : défi créatif en créant une horloge numérique fonctionnelle avec React: Salut, voilà. Dans cette vidéo en particulier, nous allons créer cette horloge numérique que vous voyez à l'écran. C'est donc une horloge numérique très simple, d'accord ? Nous allons y afficher l'heure ici. Et vous pouvez voir comment il met à jour l'interface utilisateur. Vous pouvez voir qu'il y a des secondes, des minutes, des heures, et que l'heure complète est affichée, en gros. C'est ce que nous allons construire, et nous allons utiliser les concepts de React et les utiliser de manière pratique. OK ? Il s'agit donc d'un projet pratique qui peut vous aider à renforcer l'apprentissage que vous avez acquis avec React jusqu'à présent. D'accord ? Alors oui, sans plus attendre, passons directement au code de Visual Studio. D'accord, donc pour commencer, j'ai une configuration de projet React Chase très simple ici, d'accord ? J'utilise T ici, et c'est un projet React Chase que j'ai. J'ai un point d'application JSix qui est rendu en point moyen JSX, Et dans app point JSX, j'ai saisi ces deux entrées en haut Une définition de composant très basique, vrai, et j'exporte ce composant bien sûr. Et dans App point CSS, j'ai un style très basique que vous pouvez voir ici, juste pour, euh, comme si ce n'était pas grand-chose, accord, mais un style assez simple que j'ai mis en place. Nous allons donc construire cette horloge numérique partir de zéro, d'accord. Maintenant, tout d'abord, ce que je vais faire , c'est que j'ai le bon STIF, et je dois mettre à jour l'interface utilisateur ici, bien sûr Mais avant de mettre à jour l'interface utilisateur, nous devons avoir le temps et nous devons stocker le temps sous forme d'état, n'est-ce pas ? Donc je vais dire constante, je vais dire heure. Oups, j'ai raté ça. Je vais donc dire heure ici et heure fixe. Maintenant, bien sûr, ici, je vais dire use state, ok. Et je vais l'initialiser à une nouvelle date OK ? Quelque chose comme ça. OK. Donc, quelle que soit la nouvelle date renvoyée, c'est avec cela qu'elle est initialisée. C'est bon. Maintenant c'est fait. OK ? Maintenant, ici, je vais utiliser l'effet d'utilisation ici. Maintenant, dans le cadre de l'utilisation d'EfectHok, nous allons faire une mise à jour cette fois, cette fois par seconde, n' est-ce cette fois par seconde Et en gros, c'est ce que nous ferions parce que cela doit être fait à l'heure actuelle, n'est-ce pas ? Et le temps change à chaque seconde. Nous devons donc mettre à jour cette variable de rue toutes les secondes. OK ? Nous allons également faire des nettoyages , alors laissez-nous le faire Nous allons donc parler d' effet d'utilisation ici. OK. Je vais avoir une fonction flèche. OK, quelque chose comme ça. OK. C'est une fonction flèche, et ici, je vais avoir un tableau de dépendances. OK. Donc oui, c'est fait. Et ce que nous devons faire, c'est ici, je vais ajouter du code. Donc ici, je vais dire contre Timer ID. OK. Je vais donc obtenir un identifiant de minuterie ou laissez-nous l'ajouter plus tard. OK ? Donc, ce que nous allons faire en premier, c'est définir l'intervalle. OK. J'utilise l'intervalle défini ici. OK. Maintenant, dans l'intervalle défini, je vais avoir cette fonction de flèche, donc je ne veux pas, d'accord ? Je ne veux pas cette fonction de flèche. Je vais vous dire de fixer l'heure ici. OK, réglez l'heure. J'ai donc la fonction flèche. En fait, j'ai dit que je ne voulais pas de fonction flèche. J'ai la fonction flèche, mais je supprime simplement les brises frisées, pour que ça paraisse un peu plus propre OK, je peux aussi faire écrire le code ici. Je peux donc vous dire de fixer l'heure ici. Je mets donc à jour l' état en utilisant l'heure définie. Je parle d'une nouvelle date, d'accord, quelque chose comme ça, et je peux en ajouter des milliers ici. Ok, donc ici, je peux dire mille, quelque chose comme ça. OK. Oups, j'ai raté un crochet, je suppose, réglé l'heure, Nutt, quelque chose comme ça D'accord, ou 1 seconde. OK, donc ça n'arrivera pas ici. C'est l'intervalle. OK ? C'est donc l'intervalle. Je vais venir ici. D'accord ? C'est donc chose faite. OK. Voilà donc ce que c'est. Maintenant, laissez-moi vous expliquer ce que je viens de dire, d' accord, juste au cas où vous vous demanderiez ce qui s'est passé. OK ? Donc, ici, j'ai utilisé la fonction set interval. Maintenant, qu'est-ce que l' intervalle défini ? Je vais juste taper à nouveau set interval. Définir l'intervalle est essentiellement une fonction JavaScript, d'accord ? Il s'agit d'une fonction essentiellement répétitive qui exécutera le bloc de code qu'elle contient à plusieurs reprises après un intervalle de temps défini. OK ? Et quel est l' intervalle que nous fixons ? Vous pouvez donc définir n'importe quel intervalle ici, qui sera exprimé en millisecondes Donc, si je saisis 1 000 ici, cela signifie 1 seconde. OK. Alors, qu'est-ce que tu es prête à faire ? Quel est l'objectif ici ? Nous voulons mettre à jour l'heure chaque seconde, n'est-ce pas ? Nous voulons mettre à jour l'heure chaque seconde, n'est-ce pas ? L'heure devrait être mise à jour chaque seconde, car le temps change chaque seconde, et je suis en train de créer une horloge dynamique, n'est-ce pas ? J'utilise donc la fonction set interval ici, set interval. Vous pouvez voir si je passe la souris dessus, je reçois probablement la documentation Planifie l'exécution répétée du rappel toutes les millisecondes de retard Voici donc le rappel que nous avons. Je peux le simplifier en une seule ligne. Je peux me débarrasser des bretelles frisées car il n'y a qu' une seule ligne de code Donc je vais juste m'en débarrasser. C'est assez simple. OK. J'espère que c' est assez clair quant à ce qui se passe, définissez l'intervalle, d'accord. Alors ce que nous faisons, c'est inciter à un intervalle défini. Nous mettons à jour l' heure définie ici, et nous le faisons toutes les mille millisecondes Ensuite, ce que nous devons faire, c'est obtenir l'identifiant du chronomètre ici, car nous ajouterons également une fonction de nettoyage Je vais donc dire const timer, ID, quelque chose comme ça OK. C'est donc l'identifiant du chronomètre que nous avons, d'accord ? Ensuite, j'aurai une fonction plus propre comme celle-ci. OK. J'ajouterai une fonction flèche, et je dirai un intervalle clair. Oups. Je dirais un intervalle clair. OK, et je vais dire l'heure ou la pièce d'identité. J'efface donc l'intervalle. En gros, c'est un nettoyage que je suis en train de faire. C'est bon. C'est donc le code pour mettre à jour l'heure pratiquement toutes les secondes. C'est ce que nous avons écrit ici. OK ? C'est ce qu'il fait. Maintenant, ici, ce que nous pouvons faire, c'est ici, si vous venez ici, nous pouvons afficher l'heure. Voyons ce que nous considérons comme le résultat. OK, le résultat ne sera pas bon. Ce ne sera pas convivial, mais je veux quand même vous le montrer. Donc, si je garde ça, oups. Il n'y a donc littéralement aucune sortie ici. Donc, il n'affiche rien parce que nous essayons d'afficher la date ici et nous recevons une erreur, d'accord ? Vous devez donc convertir cette date en chaîne. Je dirais donc que nous avons une fonction ici pour la chaîne d'heure locale. OK. Et je peux enregistrer ceci et vous pouvez voir l'heure affichée ici, non ? Donc ça se met à jour à chaque seconde, non ? Maintenant, ce que nous devons faire, c'est le formater correctement. Je dirais donc que c'est normal, mais je dois mieux contrôler le type de formatage que je souhaite avoir pour mon application, n'est-ce pas ? Donc, ce que je vais faire ici c'est avoir une réception. Je vais dire formatez-le, heure et ici. Donc, en fait, c'est faire un travail. OK ? Ce n'est pas une fonction, mais elle permet de formater l'heure au bon format. OK ? Nous pouvons donc le faire sans fonction. Je vais donc dire deux points temporels locaux, deux chaînes d'heure locales ici. OK. Et nous pouvons transmettre le format local et le format, d'accord ? Donc, je vais passer le local en anglais aux États-Unis, d'accord ? Et ici, je vais spécifier le formatage, à droite. Donc ici, je peux dire R, o Colon, je dirais deux chiffres, quelque chose comme ça. Nous pouvons suivre ce format. R, deux points pour le trouver ici. Ce format doit donc une paire de bretelles bouclées, C'est donc quelque chose que j'ai raté ici. OK, de R à un chiffre. Je vais venir ici. Cela prend une minute à un chiffre, quelque chose comme ça, et il faudra quelques secondes pour l'abandonner. OK. Oups, quelque chose comme ça Au moment où vous l'enregistrez, vous ne verrez aucune modification car nous affichons l'heure. Vous devez afficher l'heure formatée. Vous devez donc venir ici et vous débarrasser de tout cela et vous pourrez afficher le format à la fois. OK ? Oups. La seconde n'est donc pas affichée car nous devrions probablement ajouter une virgule ici Et laisse-moi voir. OK, donc c'est une seconde et non une seconde. OK. C'est juste S qui a fait la différence, non ? Vous pouvez voir maintenant que c'est dans le format. 08. Donc, plus tôt, ce n'était pas 08. Il était 21 h 80 à 21 h 06. J'ai donc maintenant un meilleur contrôle sur le formatage, Donc oui, c'est ainsi que fonctionne l' application, d'accord ? Et je vais juste vous donner un aperçu de ce qui se passe ici , d'accord ? Donc, tout d'abord, comment fonctionne cette application, nous avons un composant. En haut, nous créons un état qui maintient l'état initial de l'heure jusqu'à la date et à l'heure actuelles, d' accord, en utilisant cette nouvelle date. OK ? Et nous avons cette fonction d' état temporel et de réglage de l'heure pour mettre à jour l'état chaque fois qu'il change. Nous avons un énorme impact ici, d'accord. Et dans use effect hook, use effect hook exécute essentiellement le code qu'il contient une fois le composant rendu, d'accord ? Et dans ce cas, il est chargé de démarrer le chronomètre qui met à jour l' horloge toutes les secondes, d'accord ? Nous avons donc une dépendance vide ici, je me souviens, et elle s'exécute immédiatement après le rendu du composant, d'accord ? Maintenant, ce qui se passe ici, c'est que nous utilisons la fonction d' intervalle défini. Maintenant, que fait set interval ? Set interval est une fonction qui nous permet d' exécuter du code à plusieurs reprises après un intervalle de temps défini. OK ? Et ici, l' intervalle de temps qui nous est fixé est de 1 000 millisecondes, soit OK ? Et nous avons une fonction de nettoyage qui efface l'intervalle à l'aide de l'identifiant du chronomètre que nous avons, et nous formatons la date Désolé, nous formatons l'heure selon format souhaité, et j'affiche l'heure du format. Donc, ce qui se passe, c'est que chaque fois que le composant est rendu à nouveau, d'accord ? Ainsi, la fonction de réglage de l'heure à chaque heure est mise à jour ici. L'état est mis à jour, le composant est rendu à nouveau, d'accord. Et chaque fois que cette heure définie est appelée, heure est mise à jour, et chaque fois que l'heure est appelée, heure formatée est mise à jour Et chaque fois que l' heure formatée est mise à jour, vous voyez la valeur mise à jour ici OK. C'est ainsi que tout fonctionne. Chaque fois que l'état de l'heure change, le composant s'affiche à nouveau et l'heure nouvellement formatée s' OK ? Et cet élément récurrent est défini par la fonction d'intervalle défini, car c'est ce que cette fonction elle-même met à jour l' état temporel chaque seconde. OK ? Et chaque fois que l'état de l' heure change, le composant est rendu à nouveau et l'heure formatée est affichée, et le processus se répète, sorte que l'heure est constamment mise à jour en temps réel C'est bon. J' espère donc que c'est une bonne chose. Et maintenant, nous devons faire un peu d' embellissement, je dirais, ici, non Donc, ce que nous pouvons faire, c'est améliorer le CSS afin que je puisse me débarrasser de cet accueil au sommet. OK. Et je peux ajouter un TIF. Je l'appellerai class name, et je l'appellerai clock container. Donc c'est exclusivement pour le stylisme ici, d'accord ? Vous pouvez ajouter un autre tif ici. Je peux voir TIF. OK. Et je peux déplacer ça, ça à l'intérieur, ici. OK, quelque chose comme ça. OK. Et ici, dans le conteneur d'horloge, je vais dire le nom de la classe comme horloge, quelque chose comme ça. OK. Maintenant, nous devons ajouter du CSS. Je vais passer au CSS app point. J'ai du CSS de base ici. OK, dont je vais me débarrasser. OK. Je vais m'en débarrasser. Et je dirais Clock Container. Quelque chose comme ça, et je dirais une exposition de drapeaux ici. OK, justifiez le contenu en tant que centre et alignez les éléments en tant que centre. OK, je peux régler la hauteur. OK. Et nous aurons la couleur de fond. OK, donc couleur de fond, j' ai un code couleur pour ça. OK, donc je vais dire hash et 2a2c3, quatre. OK ? Vous pouvez choisir la couleur de votre choix. OK. Maintenant, après avoir mis à jour la couleur, l'horloge est à peine visible. C'est tout à fait normal. Très bien, nous allons également mettre à jour l'horloge. Je dirais horloge ici. OK. Je vais définir une taille de police ici. OK. Taille de police de, euh, quatre ERM. Ok, euh, et oui, l' horloge est plus grande maintenant. OK, famille, famille de polices de Je vais ajouter une famille ici. Ça peut être la bonne, et je dirais la couleur. OK. Nous pouvons donc avoir une couleur. Et pour cela, j' ai un code couleur. Donc je vais dire 61, DAF P. D'accord ? Vous pouvez ajouter la couleur de votre choix. C'est tout à fait normal. Et couleur de fond. Je vais définir la couleur de fond sur hachage. Oups. Donc c'est le hash 202, trois, 202, trois, deux A. D'accord. Comme ça. Donc, c'est à vous de décider comment vous voulez le gérer. OK ? Et je vais installer le rembourrage ici. Rembourrage de 20 pixels et 40 pixels. OK. Quelque chose comme ça. OK. Je vais donc faire un petit zoom arrière pour que tout semble correct. Je suis ultra zoomé. OK. Ça a l'air cool. Il y a des bordures blanches. En plus je vais me débarrasser de ces portails blancs, donc j'aurai une étoile ici, avec une marge de euh oups Donc, une marge de zéro pixel, comme ça, et vous pouvez voir que les portails blancs ont disparu. OK ? C'est donc chose faite. Rembourrage, je peux ajouter un rayon de bordure, accord, un rayon de poudre de dix pixels, d'accord ? Et oui, c'est ça. Je crois que c'est ça, non ? Voici donc notre horloge en mode plein écran, comme vous pouvez le voir ici, d'accord ? J'espère que vous avez apprécié ce tutoriel, et j'espère que vous avez beaucoup appris, d'accord ? J'espère que cela vous a été utile et à la prochaine. 15. Se plonger dans l'usageRéf : le gardien silencieux d'État: Salut, voilà. Il est maintenant temps de commencer à parler du hook use ref. Maintenant, le hook Uf est également fourni par React pour fonctionner avec un composant fonctionnel et il est différent du hook use state que nous avons. Le hook Uf est utilisé pour stocker des valeurs, mais il est un peu différent de la façon dont us state le gère. Uf vous permettra de conserver les valeurs entre les rendus. C'est différent de l'état américain, où l'état, si vous mettez à jour la valeur, vous permettra de provoquer un nouveau rendu, n'est-ce pas ? Une autre chose à propos de useref est qu'il ne provoque pas le nouveau rendu du composant Donc, comme je viens de le dire, use state déclencherait le rendu. D'accord ? Sref, en revanche, n'entraîne pas le nouveau rendu du composant lorsque la valeur change D'accord ? Donc, pour le mettre en contexte ou pour le dire simplement, utiliser le hook ref dans React est utilisé pour conserver la valeur dans tous les rendus sans que le composant rendu à nouveau lorsque la valeur change D'accord ? Donc, revenons-en, il est utilisé pour conserver les valeurs dans les rendus sans que le composant rendu à nouveau lorsque la valeur change Et l'une des principales raisons pour lesquelles le SRF est utilisé ou l' endroit où le SRF est utilisé est de stocker la référence Dom, d' Cela vous permet donc de stocker directement la référence à un élément Dom et d'interagir avec celui-ci. Par exemple, vous pouvez mettre l'accent sur un événement dans ce champ de saisie, d'accord ? Vous pouvez faire défiler la page et ainsi de suite. C'est donc l'un des cas d'utilisation de l'uRF et c'est l'un des principaux cas d'utilisation où il est couramment utilisé, d'accord ? Il peut être utilisé pour stocker des valeurs qui n'ont pas besoin ou n'ont pas besoin de provoquer un nouveau rendu lors de la mise à jour. D'accord ? C'est conforme à la définition, d'accord ? Par exemple, vous souhaiterez peut-être stocker un identifiant de temporisation, une valeur précédente ou toute autre valeur qui doit être conservée dans tous les rendus, mais qui ne déclenche pas la mise à être conservée dans tous les rendus, jour de l'interface utilisateur D'accord ? C'est donc le crochet US Ref pour vous, et laissez-nous l'essayer en action ou laissez-nous voir comment il fonctionne sur le terrain. Donc ce que je vais faire ici est là, j'ai un projet React, d'accord ? C'est un projet créé avec du blé, et j'ai un composant fonctionnel ici, app point JSX, qui est rendu ici dans main point JSX, d' ici dans main point JSX, Sur l' élément racine. C'est bon. Je vais donc m'en servir pour taper du code. Il contient juste un simple JSX qu'il renvoie. À l'heure actuelle, il possède un TIV avec une étiquette H. Apprenez à réagir comme vous le voyez sur le côté droit, n'est-ce pas ? Donc, ce que je ferais ici, c'est utiliser Rf ici, d'accord ? Je vais donc dire const. Dites mon Rf ici, et je dirais d'utiliser ref. Et vous pouvez voir que cette chose est suggérée plutôt que d'utiliser ref. Au moment où je sélectionne cette option, vous verrez une entrée être ajoutée en haut. D'accord ? Vous pouvez voir que c'est l'entrée. Et il est importé comme n'importe quel autre hook de réaction que vous nous demandez d'indiquer, d'utiliser Effact et tout D'accord ? Si vous passez la souris dessus, vous pouvez voir que use ref renvoie un objet à références multiples. Dont la propriété actuelle est initialisée à l'ancien argument, qui est la valeur initiale, et l'objet renvoyé persistera pendant toute la durée de vie du composant C'est ce dont nous avons parlé. Nous n'avons pas encore parlé de l'objet ici, l'objet de référence dont il parle, d'accord ? Cela signifie qu'il possède une propriété actuelle. Je vais vous le montrer dans un instant. D'accord ? Mais il dit que l'objet renvoyé persistera pendant toute la durée de vie du composant, et comme je l'ai dit, il persiste dans tous les rendus, d'accord ? Il est plus utile que l'attribut f. C'est pratique pour conserver n'importe quelle valeur mutable de la même manière que vous aimeriez utiliser les champs d' instance dans les classes. C'est bon. Voyons donc comment vous pouvez l'utiliser. J'ai donc UrF et je vais transmettre une valeur ici. OK, je vais te dire bonjour. Et je vais dire « Wold over here », quelque chose comme ça, et j'ajouterai un point-virgule C'est bon. Donc c'est fait, oui, nous avons créé la référence E. D'accord ? C'est donc la valeur initiale que je transmets, et c'est ce que MyRF détient en ce moment D'accord ? Maintenant, ce que nous allons faire, c'est imprimer ceci sur la console et nous verrons ce que contient ce mRF en ce moment, d'accord ? Je vais donc juste faire imprimer ma référence. D'accord. Et je vais enregistrer ça. D'accord. Et voilà, je vais passer à la console. OK, et je vais suivre cette voie. C'est bon. Voyons ce qu'il a. Donc d'accord, elle l'imprime deux fois, et c'est juste à cause du mode strict min point Jx que notre application est rendue deux fois, d'accord ? Mais si vous le supprimez, d'accord, vous le verrez être imprimé une fois. D'accord ? Donc, si vous développez cet objet, vous verrez qu'il a du courant ici. D'accord. Et vous pouvez voir qu'il est actuel, et permettez-moi de faire un petit zoom arrière pour que nous le voyions clairement. D'accord. Donc oui, vous pouvez voir qu'il est actuel et quelle que soit la valeur que nous avons transmise, bonjour tout le monde, c'est ce que vous voyez ici. D'accord ? Donc, pour le moment, laissez-moi imprimer ici, d'accord ? Il y a quelque chose comme ça. C'est un objet comme celui-ci, contient une propriété actuelle, et la valeur de current est hello world, quelque chose comme ça. C'est donc ce que détient MrF en ce moment. C'est l'objet qu' il tient en ce moment, et c'est ce qu'il imprime ici sur la console. Vous pouvez voir que c'est un objet type. Hein ? Et si vous voulez jouer avec la valeur de use ref, vous devez travailler avec la propriété actuelle, d'accord ? Donc, pour le moment, la propriété actuelle contient hello world Y parce que je l'initialise sur hello world over here. D'accord. Ainsi, chaque fois que vous imprimez un objet serf, vous verrez un objet avec une seule propriété actuelle, et la propriété actuelle stocke la valeur de ce que vous avez attribué, comme un élément dom, une valeur ou une valeur initiale D'accord ? Vous pouvez accéder à la valeur stockée dans la référence d'utilisation en utilisant le courant ici. D'accord ? Donc oui, il s'agit d'utiliser la référence. Donc, ce que je ferais, c'est me retrouver dans le pétrin. Voilà ce que c'est. Et je vais vous montrer comment vous en servir à la TSX Donc, disons, si je veux imprimer Hello World, afin de pouvoir utiliser ces deux bretelles bouclées, je peux donner ma référence Et comment accèderiez-vous à cette valeur ? Vous allez dire point current ? D'accord. Si vous l'enregistrez, vous verrez Learn React, Hello World, n'est-ce pas ? Donc, quelle que soit la valeur que vous transmettez ici, accord, que ce soit zéro, un, Hello World ou quoi que ce soit d'autre, vous pouvez vous y référer en utilisant current. J'espère que cela a du sens. Maintenant, ce que je ferais, c'est de m' appuyer sur cet exemple, oh, et je vais juste clarifier les choses ici. D'accord. Permettez-moi de m' appuyer sur cet exemple. Et pour l'instant, j' ai mon arbitre, d'accord. Je vais donc le renommer en nombre de références, d'accord ? C'est donc ref et ici, au lieu d'utiliser ref et j'ai une chaîne en cours de transmission, je vais passer zéro. D'accord. Je vais m'en débarrasser ici, console point log, et ça aussi. D'accord ? Maintenant, ce que nous allons faire ici, c'est avoir un nombre de références, Rf ici, d'accord ? Et je vais également ajouter un ensemble. OK, donc je vais dire Const ici, et je vais voir Stet Count. D'accord. J'ai donc le nombre de références. J'ai le compte de Steed, et j'ai réglé le compte de Steed ici. Et je vais dire use state, et je vais initialiser ces deux valeurs également à zéro D'accord. C'est donc également fait. D'accord ? Nous avons donc use ref et use State, qui sont initialisés à zéro. C'est bon. Maintenant, ce que je vais faire, c'est dans l'interface ici. D'accord. Je vais me débarrasser de ce H, d' accord, et j'ajouterai P ici. D'accord. Je vais voir State Count ici. D'accord. Et je dirais State Count. Quelque chose comme ça. D'accord. Vous verrez le nombre d'états ici sur l' interface de droite. Et ici, je vais ajouter le bouton E, quelque chose comme ça. Comme ça. Et pour le bouton, je dirais incrément, nombre d'états. Comme ça. D'accord. Voici ce bouton. D'accord. Et ce que je ferais c'est que lorsque l'utilisateur clique sur incrémenter le nombre d'états, j'augmente la valeur de l' état d'un C'est bon. Donc, ce que je peux faire, c'est dire const, j'aurai une fonction parce que j'aurai besoin d'une fonction pour gérer cet état d'incrémentation, Nombre d'États plus un ici. D'accord. Et je vais enregistrer ça. D'accord ? Nous avons donc un nombre d'états incrémentiel ici et en cliquant dessus, je dirais en cliquant dessus Je vais ajouter Oups. Je vais ajouter le nombre d'états par incrémentation. Oh, il faut donc l'ajouter. D'accord ? Donc oui, je vais l'incrémenter et vous pouvez voir que le nombre d'états est incrémenté de cette façon. C'est bon. Maintenant, je vais également ajouter un décompte approximatif, ou de la même manière, et je vais simplement le copier. Je vais le coller ici. D'accord. Et ce que je ferais, c'est compter entre les États, je dirais si je compte ici D'accord. Et ça compte. Comment afficher le nombre de références ? R compte les points actuels, non ? Parce que le courant est ce qui contient la valeur. Le nombre de références est le fait d'avoir un objet avec le courant comme propriété. C'est bon. Et je dirais augmenter le nombre de références. Cette fonction n'existe pas encore. Nous devons le créer et je vais le sauvegarder. OK, donc la sortie a disparu car cette fonction n'existe pas, ce qui est tout à fait normal. Je vais reproduire cela ici et ici, au lieu d'incrémenter l'état, le nombre, je dirais le nombre de références incrémentielles ici . D'accord. Et oui, tout arrive en une seule ligne. D'accord. Je peux donc le déplacer vers une nouvelle ligne simplement en ajoutant PR. Je vais juste m' en débarrasser ici. Ou je peux probablement, je suis désolée, ce n'est pas une bonne idée. Je vais plutôt me débarrasser de BR ici. Je vais passer au CSS ici. J'ai Display Flex. OK, ce sont des cas basiques que j'ai. D'accord. Pour DIV, j'ai l'affichage du flex, et je vais également définir la direction, la direction de flexion de la colonne. OK, et cela règle tout verticalement. Je pense que c'est la meilleure solution ici. C'est bon. Et oui, j'ai le nombre d'incréments ici et le nombre de références incrémentielles pour le nombre de références incrémentielles, je dois dire ici, le nombre de f, Toto, je dois effacer cela Donc f count, Tt est courant et nous devons dire plus égal à un. D'accord. Donc oui, c'est une façon abrégée de faire C'est bon. Et je vais enregistrer ça. D'accord. Et voyons comment cela fonctionne. Vous pouvez donc voir l'État augmenter, d'accord ? L'état étant augmenté, le nombre brut augmente forcément car il ne provoque pas de nouveau rendu D'accord ? Mais si vous dites console point log ici, et si j'imprime la valeur ici, si je dis 1 seconde. Donc, si je dis un décompte approximatif, c'est vrai. Et je vais dire ici. OK, compte en dollars à l'heure actuelle, quelque chose comme ça avec un point-virgule. Je vais enregistrer ça. D'accord. Et cela provoque un nouveau rendu, vous pouvez donc voir comment le nombre a été mis à jour en gros. Mais si vous venez ici pour inspecter, non, et si vous l'ouvrez , allez sur Oups Accédez à la console, quelque chose comme ça. C'est bon. Je vois que nombre de références n'est pas défini, d'accord. Il s'agissait d'une erreur au début. Ça ne devrait pas arriver maintenant, d'accord ? Vous pouvez donc voir le nombre d'états s' incrémenter et le nombre de références être imprimé sur la console D'accord. Maintenant, si pour une raison quelconque le rendu est causé, vous pouvez voir le nombre de références être mis à jour ici, n'est-ce pas ? Sinon, il continue simplement incrémenter et à l' imprimer sur la console Cela ne se reflète pas dans l'interface utilisateur parce qu'il n'est pas rendu à nouveau, n'est-ce pas ? Au moment où je mets à jour l'état ici, rendu se produit pour le composant et le nombre de références est mis à jour. J'espère que cela a du sens quant à la façon dont cela fonctionne. Et c'est un bon exemple pour nous aider à comprendre la différence entre état d'utilisation et l'utilisation Rf, d'accord ? Vous pouvez donc voir ici que l'utilisation persistante Rf est utilisée pour conserver les valeurs dans tous les rendus, et cela ne provoque pas le nouveau rendu du composant lorsque la valeur change Et c'est ce que nous voyons clairement ici, d'accord ? Et si vous voulez tester ou si vous voulez avoir une sorte de code qui s'exécute sur le rendu, vous pouvez utiliser l'effet d'utilisation pour voir si le composant est rendu ici. Je dirais l'effet d'utilisation ici. D'accord. Et oui, quelle est la syntaxe de l'effet d'utilisation ? Nous avons donc une fonction flèche comme premier paramètre. D'accord. Et puis j'ai une dépendance comme celle-ci. OK ? Voilà donc ce qu'est la fonction. Maintenant, ce que je vais faire, c'est voir ou exécuter cet effet à chaque rendu. Je vais donc me débarrasser de la dépendance et ici, dans la fonction, je vais dire « verrouillez ici ». Oh, oups, alors enregistrez celui-ci. Je vais me connecter à la console. Qu'est-ce que nous connectons à la console ? Je vais juste dire component re render. Rendu des composants, quelque chose comme ça. Sauvegardez ceci. Vous pouvez voir qu'il est rendu deux fois au départ. D'accord. Permettez-moi de me rafraîchir. Il est rendu deux fois au départ à cause du mode strict que nous avons dans JSix principal, ce qui est tout à fait normal Si vous le souhaitez, vous pouvez vous débarrasser du mode strict, juste pour cet exemple. D'accord. C'est ce que je vais faire Si je le sauvegarde, vous pouvez maintenant voir qu'il n'est rendu qu'une seule fois, n'est-ce pas ? Si vous arrivez à app.j6, d' accord, il n'est rendu qu' Je vais tout de même faire une mise à jour. Vous ne pouvez voir le rendu qu'une seule fois. Maintenant, vous pouvez augmenter le nombre de rues. Vous pouvez voir que le composant est rendu à nouveau, rendu à nouveau. Le nombre de fois que vous cliquez, que vous cliquez sur l'incrémentation du nombre de rues, vous verrez le composant être rendu à nouveau, n'est-ce pas ? Si vous dites incrémenter le nombre de références, vous verrez le nombre de références être mis à jour, mais vous ne verrez pas le composant être rendu à nouveau, n'est-ce Et si vous augmentez le nombre d'états. Donc, ici, avant d'incrémenter le nombre d'états, jetez simplement un œil au nombre de références dans l'interface C'est zéro, non ? Mais sur la console, le nombre de références est de 15, mais cela ne se reflète pas ici dans l'interface utilisateur car le composant n' est pas encore rendu. Donc, si vous dites incrémenter le nombre d'états, le composant sera rendu à nouveau et le nombre de références sera mis à jour. Alors laissez-moi cliquer dessus et vous verrez que le nombre de références est mis à jour. Hein ? Donc oui, et vous pouvez même voir le journal en cours d'impression être rendu, n'est-ce pas ? Donc, utilisez effect hook logs le composant rendu à chaque fois que le composant est rendu, et cela nous aide à observer quand le composant est réellement rendu à quel événement, n'est-ce pas rendu à quel événement, n'est-ce Donc oui, pour résumer, lorsque vous cliquez sur le bouton de décompte des états d'incrémentation, le composant est rendu à nouveau et vous voyez le journal qu'il affiche dans la console Lorsque vous cliquez sur le bouton Incrémenter le nombre de références, le nombre de références est incrémenté, mais le composant n'est pas rendu à nouveau. Vous ne verrez donc pas le verrouillage de l'effet d' utilisation dans la console ici lorsque vous cliquez sur Incrémenter le nombre de références, n'est-ce pas J'espère que cette démonstration sera vraiment utile pour comprendre la différence entre use ref et use state. C'est une confusion chez les étudiants. Cela crée beaucoup de confusion quant à savoir, d'accord, donc je suis prêt à stocker la valeur d'usage, dois-je utiliser use state ou utiliser Rf, d'accord. Ils ont tous deux leurs propres avantages, et j'espère que la différence est assez claire pour vous tous, n'est-ce pas ? J'espère donc que vous avez pu me suivre, et j'espère que cela vous a été utile. 16. Donner vie à l'utilisationRef : gérer facilement des éléments HTML: Alors maintenant, il est temps de voir comment utiliser Rf avec des éléments HTML ? Donc, dans cette vidéo en particulier, nous allons avoir un exemple où nous utilisons notre référence pour mettre l'accent sur un élément de saisie lorsque vous cliquez sur un bouton. accord ? Donc, pour commencer, puisque nous utilisons user, qu'allons-nous faire ? Nous allons créer une référence d'entrée. OK ? Je vais donc dire entrée constante Rf. D'accord, je vais utiliser use ref pour créer le hook ici, et je vais l'initialiser à null pour le moment, n'est-ce pas Et ce que je vais faire ici, c'est ici, je vais avoir un élément d'entrée. OK, donc je vais avoir mon mot à dire. Quelque chose comme ça. Et je vais avoir le type, le type de texte. OK. Et je vais avoir un espace réservé. Le placeholder est focus me. OK, c'est un espace réservé que j'ai. OK, vous pouvez voir cet espace réservé. OK, donc le focus devrait se faire comme ça en cliquant sur un bouton. Nous avons donc également besoin du bouton. OK, je vais donc ajouter un bouton ici. OK. Je vais donc dire bouton. OK. Et en cliquant ici, je vais le lier à une fonction, mais la fonction n'existe pas, donc je laisse ce champ vide pour le moment et je vais dire focus. Oups, concentrez-vous, quelque chose comme ça. OK. Et oui, en cliquant sur ce bouton, nous devons appeler cette fonction focus input. Appelons cela le focus input. Je vais venir ici et je vais définir cette entrée de focus. OK ? Je vais donc dire const, focus input. OK. Et je dirais que je vais avoir une fonction flèche ici. Et oui, cette fonction ne fait rien. Mais cliquez dessus, l'accent devrait être mis ici. C'est bon. Donc, ce que nous allons faire maintenant, c'est dire input ref input ref current dot focus. OK. Donc je m'en sers en ce moment, d'accord ? Et qu'est-ce que la référence d'entrée ? La référence d'entrée est actuellement initialisée à null. Il est nul pour le moment. OK ? Alors, comment pointez-vous référence d'entrée vers ce champ de saisie ici ? OK ? Donc, ce que vous feriez ici, c'est que vous diriez réf. Vous allez utiliser la propriété ref ici et je dirai input ref. C'est ça. OK. Maintenant, dès que tu fais ça ici, d'accord ? La référence d'entrée va avoir la référence à cette entrée particulière ici. OK ? Tu peux y jeter un œil. Donc, ce que je vais faire, c'est dire Console point log. C'est la meilleure façon de voir ce que contient un élément en particulier, n'est-ce pas ? Je vais dire input ref. J' imprime la référence d'entrée. OK ? Laissez-nous commenter cela pendant un moment, d'accord ? Et passons à la console. Passons à la console. OK ? Donc, vous voyez, d'accord, 1 seconde. Voici donc un résultat que je vois. OK. Donc pour le moment, je ne vois rien sur la console. Au moment où je dis focus, vous verrez que le courant a l'élément d'entrée. Vous pouvez voir que c'est l'élément d'entrée. Et si je développe l'élément d'entrée, vous pouvez voir qu'il possède toutes les propriétés ou les attributs de l' entrée ici. OK. C'est donc l'ensemble de l'élément d'entrée que vous voyez, n'est-ce pas ? Donc oui, c'est ça que nous allons jouer, d'accord ? Cela fait donc référence à cet élément d'entrée, n'est-ce pas ? Je vais donc simplement le commenter ici. Et au lieu de cela, je vais l'activer. OK, je vais enregistrer ceci et nous laisser faire une mise à jour ici. OK ? Si je dis focus, vous verrez le focus se concentrer sur la zone de texte, ou plutôt sur la zone de saisie OK ? Je retire le focus. Si je dis concentration, vous verrez la concentration ressortir ici. Maintenant tu peux faire beaucoup plus, d'accord ? Plutôt que de simplement vous concentrer, vous pouvez même mettre à jour la couleur ici. Je peux donc ajouter ici un focus et un surlignage. OK ? C'est bon. Et ici, après le focus, ce que je peux dire, c'est que la référence d'entrée, point, le style de point actuel, point, la couleur de fond sont égaux à. Je peux ajouter n'importe quelle couleur, gris, quelle que soit la couleur que vous voulez. Et je vais enregistrer ça. Maintenant, si je dis focus et halight, vous verrez le résultat passer au gris Je peux le garder ici, le gris semble trop bizarre. C'est bon. Je peux donc dire concentrez-vous et mettez en valeur, vous pouvez voir que cela fonctionne bien, non ? Et vous pouvez également avoir plusieurs références dans un programme. Donc, si vous avez plusieurs zones de saisie vers lesquelles vous souhaitez déplacer le focus, vous pouvez avoir plusieurs f. D'accord. Permettez-moi donc également de vous en donner un exemple. OK ? Je peux donc appeler cela une référence d' entrée et je peux avoir une référence d'entrée ici, une référence d'entrée juste ici. OK. Je vais donc appeler ça ensuite. OK. Et ce que je peux faire, c'est choisir de le dupliquer ici. OK. Dupliquez ceci et je pourrai dire la référence d'entrée ensuite ici. OK. Concentrez-moi, concentrez-vous sur la hauteur et au lieu de vous concentrer sur la saisie suivante, quelque chose comme ça OK ? J'ai donc mis à jour la référence et la fonction onclick. C'est bon. Et ici, nous avons également besoin de cette fonction. Je vais donc simplement le dupliquer ici. OK, concentrez-vous sur la saisie ensuite, et je vais me débarrasser de ce commentaire ici. OK. Et au lieu de la référence d'entrée ici, je vais avoir la référence d'entrée suivante, quelque chose comme ça. Vous pouvez voir le focus et ça, le focus et tout. Vous pouvez voir que les deux fonctionnent de la même manière. Tu peux voir, non ? Vous pouvez même avoir un bouton pour réinitialiser la mise au point, réinitialisera la mise au point et le style de chacun d'entre eux. Donc je vais juste le faire et vous le montrer. OK, donc je vais prendre ça. Je vais ajouter un autre bouton. Je dirais réinitialisation. OK. C'est un bouton de réinitialisation. OK. Et remettons le focus à zéro. OK. Donc, au clic, je le lie à une fonction de réinitialisation de la mise au point. Maintenant, Reset focus n'existe pas, je vais donc simplement le dupliquer. OK, et je vais appeler cela « reset focus », quelque chose comme ça ici. OK. Et puis ce que je ferais, c'est que je dirais input ref current style point Background. OK. Je vais dire Input ref , arrière-plan du style actuel, je dirais blanc ici, et ce sera aussi blanc, le suivant, non ? OK. Et oui, donc je peux me concentrer là-dessus, concentrer dessus. Permettez-moi de me rafraîchir. Concentrez donc la lumière, concentrez-vous dessus, puis je peux voir la réinitialisation. Vous pouvez voir que lors de la réinitialisation, l'accent disparaît, n'est-ce pas ? Oups, c'est du repos. J'ai donc fait une faute de frappe C'est réinitialisé, en fait, d'accord. C'est bon. Ça a l'air cool. Concentrez-vous dessus, concentrez-vous dessus, puis il est réinitialisé. Tu peux voir, non ? C'est donc l'un des cas d'utilisation, et c'est l'un des cas d'utilisation courants où le crochet serf est utilisé Le crochet Serf est donc fréquemment utilisé. Si vous lisez le code en ligne, n'importe quel type de code de réaction, vous verrez qu'il est principalement utilisé avec des éléments HTML euh, pour mieux contrôler le modèle d'objet du document accord ? Comme nous le faisons ici, nous contrôlons mieux ce que nous faisons avec les éléments d'entrée ici, n'est-ce pas ? Donc oui, il s' agit de la référence utilisateur. Enfin, encore une chose, lorsque vous mettez à jour le focus et tout cela ici, cela ne provoque pas le rendu du composant. D'accord, parce que c'est l'une des choses à propos de l'utilisation de Rf. Hein ? Donc, chaque fois que vous faites cela, chaque fois que vous le modifiez, vous pouvez simplement avoir un effet d' utilisation ici, utiliser un crochet d'effet ici. OK. Et je peux simplement avoir une fonction flèche ici sans aucun tableau de dépendances. OK ? Je peux simplement faire un journal des points sur la console ici et je vais voir le loueur de composants. OK ? Je vais juste avoir ce message. Je vais juste enregistrer ça. Si vous allez inspecter, d'accord. Vous verrez le composant rendu. Bien sûr, il arrive deux fois, et c'est parce que je l'ai en mode strict. OK. Si je dis mise au point et réinitialisation alliée, mise au point et réinitialisation alliée, vous verrez que le composant rendu n' est pas imprimé, ce qui signifie que le rendu n'a pas lieu, n'est-ce pas ? Et c'est l'une des meilleures choses à propos de l'utilisation de Rf. Cela vous permet d'ajouter de la dynamicité à la page Web ou à votre composant sans provoquer de nouveaux rendus, n' J'espère donc que cela vous a été utile et j'espère que vous avez pu suivre cet exemple simple. 17. Comprendre le forage de matériel : le bon, le mauvais et le laid: Il est donc temps de commencer à parler ce concept de forage d'hélices J'ai donc un projet React, et voici ce fichier appelé app point CSX, avec app point CSS, d'accord ? Et j'ai ce GSX de base que je renvoie ainsi que quelques CSS simples que j'ai déjà ajoutés Maintenant, qu'est-ce que le forage d'hélices ? Le forage d'accessoires est donc une situation dans React dans laquelle vous devez transmettre des données d' composant de niveau supérieur à travers les différentes couches de composants intermédiaires à un composant enfant qui en a réellement besoin D'accord ? Vous aurez donc un scénario dans lequel vous aurez beaucoup de composants imbriqués, d'accord ? Vous avez donc le premier composant, d'accord ? Oups. Et puis vous avez le composant 1 à l'intérieur, vous avez le C deux, d'accord ? Et puis à l'intérieur de C deux, disons que vous avez C trois. D'accord ? C'est une hiérarchie que vous suivez, d'accord ? Il y en a peut-être plus dans la hiérarchie, mais je ne vous en donne qu' un exemple de trois. Supposons que C 3 ait besoin d'accéder à certaines données. D'accord ? Donc C un transmettra ces données à C deux et C deux transmettra ces données à C trois. Maintenant, s'il y a dix niveaux comme celui-ci, d'accord, les données doivent passer par dix niveaux. C'est ce que cela signifie essentiellement. Et c'est ce qu'est le forage d'accessoires, car ici vous transmettez les données à l'aide d'accessoires, Pour en revenir à la définition, forage d' accessoires est une situation dans React dans laquelle vous devez transmettre des données d'un composant de niveau supérieur à travers les différentes couches de composants intermédiaires à un composant enfant qui en a réellement besoin D'accord ? Maintenant, C deux ici, dans ce cas, est un composant intermédiaire. S'il y a dix autres composants entre les deux, seront tous des composants intermédiaires. D'accord ? Et c'est ce que l' on appelle le forage d'hélices D'accord ? Cela se produit souvent lorsqu' un composant nécessitant les données est profondément imbriqué. C 3 ici est donc profondément imbriqué dans l'arbre des composants Et les données doivent passer par chaque couche de composants, même si ces composants intermédiaires ont eux-mêmes besoin des données pour leur propre usage, n'est-ce pas ? Il se peut donc que C bidirectionnel n'ait pas besoin des données. Mais puisque C trois a besoin des données et que C un les a transmises à C deux, C deux doit également les transmettre à C trois. D'accord ? Ainsi, C two aura également accès aux données. Même s'il n'en a pas besoin. D'accord ? Permettez-moi donc d'essayer ou de voir cela à l'aide d'un exemple. Donc, ce que nous allons faire, c'est créer ce type de hiérarchie de composants, d'accord. Nous aurons quelques composants tels que les composants A, B, puis nous aurons un composant à la fin, qui aura réellement besoin des données. D'accord ? Et nous enverrons les données du composant supérieur au composant inférieur, d'accord ? Ou celui qui est profondément imbriqué. C'est bon. C'est donc ce que nous allons faire, d'accord ? Et pour commencer, ce que je vais faire ici c'est dans l'application, d' accord, je vais d'abord commencer par créer une variable. D'accord. Je vais donc dire «   const » ici. OK, ce sont donc des données que nous devons transmettre. Je vais dire valeur du thème, et je dirais Tako. Disons que nous avons ces données, certaines données dans une variable, et que c'est le thème que nous voulons avoir, accord. Et nous devons transmettre ces données au dernier composant de la hiérarchie. C'est bon. Et nous voici en train de renvoyer ce JSX, d'accord. Mais ce que nous allons faire ici, c'est, disons que j'ai encore un composant, d'accord ? Nous allons donc créer quelques composants, donc je vais m' en débarrasser ici. D'accord. Et je vais découper le JSX ici. D'accord ? Disons que j'ai un autre composant, accord, j'ai une fonction. D'accord. Et voici le composant A ici. Disons, d'accord ? Et ici, je fais usage de la déstructuration et je vais parler du thème ici D'accord. Et je vais revenir ici. Qu'est-ce que je vais retourner ? Je renvoie le composant B. D'accord. Qu'est-ce que le composant B ? Nous devons définir cela. D'accord ? Et je vous le transmets comme accessoire, ce thème que j'ai reçu du composant supérieur D'accord ? C'est ce que je suis en train de faire. D'accord. Maintenant, j' ai le composant B en bas, d'accord ? Je vais donc dire fonction. OK, composant B, et je vais procéder à la déstructuration Je vais parler du thème ici. D'accord. Et ici, je dirais retourner le composant sur le thème, d'accord ? D'accord. C'est notre composant qui a réellement besoin des données, et je les transmets au composant à l'aide d'accessoires D'accord, je vais avoir un dernier composant, qui est un composant thématique. D'accord. Je les accepterai ici. OK, quelque chose comme ça. Et ici, je vais dire « retournez, div », d'accord ? Je dirais que le thème actuel est, OK, et la valeur du thème, quelque chose comme ça. Hein ? C'est chose faite. OK, donc ce que nous faisons, c'est que nous avons un composant dans un composant, et ici en haut, d'accord, je dois ajouter le composant A, n'est-ce pas ? Donc, ici, je vais dire composant A. OK, composant A , et je vais transmettre le thêta Je vais dire thème, thème ici. D'accord. Et je vais parler de la clôture ici. D'accord ? C'est donc fait, et vous pouvez voir que le thème actuel est sombre ici. Maintenant, comment est-ce organisé ? Nous avons le composant A, d'accord ? Ou nous avons une application ici en haut, non ? L'appli est ici. D'accord. Ensuite, nous avons le composant A, donc je vais ajouter le composant A ici, nous allons comprendre la hiérarchie, gros. Nous avons le composant B. D'accord, c'est le composant B. Je vais descendre, je vais ajouter un commentaire. D'accord. Et c'est le composant C. Alors, y a-t-il un composant C 1 seconde ? Donc, au lieu de cela, nous avons un composant thématique. C'est bon. Nous ajoutons ensuite C ici. D'accord, voici à quoi ressemble la hiérarchie. Vous avez le composant d'application en haut, le composant A, le composant B et le composant sont des composants thématiques. Maintenant, ce composant du thème a besoin des données, d'accord ? Il a besoin d'un thème ici. Il a donc besoin d'accéder au thème pour n'importe quel type de traitement, d'accord ? Et les données existent ici, d'accord ? Ce sont les données où vous les avez. App, non ? Vous pouvez donc voir l'application ici a la valeur d'un thème. Hein ? Et il peut l'obtenir auprès de l'utilisateur ou de n'importe où. D'accord. Mais pour le moment, les données sont simplement créées par affectation par défaut à l'aide d'une variable. D'accord. Et nous avons besoin que les composants aient accès à ces données. Il transmettra donc ces données à travers les couches ou les composants à l' aide d'accessoires situés ici Comme vous pouvez le voir, je suis en train d'emballer. J'ai ce composant A ici, et je passe le thème au composant A, puis au composant B. Le composant A l'accepte et le transmet au composant B. Ensuite, le composant B l'accepte et le transmet à C, et le composant C le transmet ou désolé, composant B leur passe le composant, pas le composant C, et le composant du thème est en l'acceptant et en l'affichant. D'accord ? Donc, il affiche qu'il peut effectuer tout type de traitement dont vous avez besoin, d'accord ? Et vous pouvez voir que les données sont transmises de la bonne manière. D'accord ? Je peux même ajouter une sorte de CSS, accord, pour que vous puissiez voir comment cette superposition est réellement effectuée ici D'accord ? Maintenant, ici, je vais ajouter TIF ici. D'accord. Et je vais juste envelopper le tout dans sac rigide, quelque chose comme ça. D'accord. Et ici, je vais parler de style. D'accord. Et nous pouvons avoir un style de bordure. Je vais donc dire bordure, refroidir en deux pixels par ici. OK, deux pixels, uni et noir, quelque chose comme ça. Et je vais prendre du rembourrage ici. Et le rembourrage est de 20 pixels. Hein. Quelque chose comme ça, oups Il y a donc un problème. D'accord ? J'ai donc ajouté des styles. Il y a donc un problème ici. D'accord. Je vais voir quel est le problème. OK, donc ça dit qu'il n'y a pas de balise de fermeture pour Dev. Je ferais donc mieux d'ajouter une balise de fermeture et de l'enregistrer. Vous pouvez voir que c'est le composant dont nous parlons, n'est-ce pas ? Donc, si je développe un peu les choses, vous verrez que l' équipe actuelle est noire ici. D'accord. Ce que je ferais, c'est que j'ajouterais également une autre chose ici. D'accord ? Nous pouvons ajouter du h2h2 ici. Oups. Oh, je vais juste en ajouter un nouveau H deux, ok et quelque chose comme ça. D'accord ? Je vais donc dire app compoont app ou je peux dire parent ici D'accord. Cela nous indique donc qu'il s'agit d'un parent. D'accord ? Vous pouvez voir comment cela s'affiche. D'accord. Maintenant, ce que nous pouvons faire ici c'est que je vais copier ces choses ici. D'accord. Je vais les ajouter pendant 1 seconde. Permettez-moi de tout copier, et ce sera facile. Et je vais ajouter le tout ici ou me laisser obtenir le retour également. D'accord. Je vais donc me procurer le tout. D'accord. Nous sommes donc en train de rendre le composant B. Souvenez-vous de cela. Ici, je vais le remplacer par le composant B. D'accord. Et ce n'est pas une application maintenant, c'est le composant A. D'accord, le composant A, et je vais m'en débarrasser. Ou tu peux dire « enfant » ici. D'accord, vous pouvez voir qu'un parent a le composant A, qui est l'enfant, n'est-ce pas ? Et je peux vraiment le copier ici. Je peux venir ici pour le composant thématique et je peux remplacer la totalité du retour ici. D'accord. Et ici, je vais dire composant thématique, ou désolé, composant à B. D'accord, et ici je peux avoir un composant thématique, quelque chose comme ça. Je vais enregistrer ça. Vous pouvez voir le composant B du composant A de l'application, puis vous avez le dernier composant, qui affiche en fait le thème ici. D'accord. Donc pour cela, ce que je ferais, c'est que je retournerais. J' ajouterais ce retour ici. D'accord ? Ceci est ajouté. Et ce que je vais faire, c'est faire découper cette plongée ici. D'accord. Et nous n'ajoutons aucune sorte de composant ici, donc je vais simplement ajouter celui-ci et je vais me débarrasser de ce retour ici. D'accord ? Et c'est chose faite. Je pense que c'est un composant thématique, non ? Je vais donc ajouter ceci ici. D'accord. Donc c'est génial, je dirais petit-enfant ici, non ? Et puis voilà, celui-ci est sur une seconde. Je vais copier ce petit-fils. C'est mon petit-fils, d'accord ? Et voici le parent et l'enfant. Tu peux voir ? D'accord. Voilà comment cela se passe, d' accord, et mieux encore, laissez-moi passer à une vue en plein écran ici. OK, vous pouvez donc voir la vue en plein écran ici. accord, vous avez un composant d' application, puis vous avez un composant enfant. Vous avez le composant B et dans le composant B, vous avez le composant thématique, qui est l'arrière petit-fils, n'est-ce pas ? Et c'est le thème qui est affiché. Maintenant, ce truc ici est connu sous forage d' hélices ici, n'est-ce pas ? Ce que nous faisons ici, c'est transmettre des données à travers différents composants, d'accord, au composant enfant ici, au composant petit-enfant ici, qui est profondément imbriqué dans l'arborescence des composants, et les données sont transmises par chaque couche de composants Il est donc transmis par le composant A, le composant B. Désormais, le composant A et le composant B n'ont plus besoin de ces données. OK, ils doivent quand même accéder à ces données et les transmettre ultérieurement, sinon cela brisera la chaîne, d'accord ? Maintenant, ce procédé est connu sous le nom de perçage d'hélices, et l'une des choses à propos du forage d'hélices est, bien sûr, c'est faisable, mais cela rend votre code plus difficile à gérer et à maintenir, autant plus que l'application devient L'application est donc simple en ce moment, donc cela peut sembler facile. Mais lorsque l'application devient de plus en plus complexe, cela peut devenir très difficile, oui, ce n'est pas recommandé. C'est recommandé jusqu' à un certain niveau, mais pas au-delà, non ? Donc oui, il s' agit du forage d'hélices, et j'espère que vous savez bien ce qu'est le forage d'hélices 18. Maîtriser l'utilisationContexte : simplifier le partage d'état comme un pro: C'est bon. Donc, ce que nous sommes en train de faire en ce moment, c'est que j'ai déjà configuré une application qui comporte plusieurs composants imbriqués, et nous avons cette valeur ou certaines données que nous sommes en train de parcourir à l'aide du forage d'hélices OK, donc nous le passons au composant A, d'accord ? Il s'agit du composant intégré à l'application. Ensuite, ce composant le transmet dans l'arbre et le composant, qui est un composant thématique, qui est profondément imbriqué dans l' arbre affiche la valeur du thème ici D'accord ? Maintenant, il fait sombre ici. Si je change ce foncé en clair, quelque chose comme ça, la valeur sera mise à jour en clair. D'accord ? Donc c'est du forage par sonde ici. Maintenant, le concept de perçage par sondage devient problématique lorsque vous devez transmettre des données à travers de nombreuses couches de composants, d'accord ? Et en ce moment, ce qui se passe ici, c' est si je fais défiler la page vers le haut, d'accord. Vous pouvez donc voir ici quoi ressemble la hiérarchie, n'est-ce pas ? composant thématique a besoin d'un thème ici, et le composant d'application contient les données ce composant de thème a besoin. D'accord ? Je vais donc simplement l' ajouter ici. Je dirais qu'il a un thème. D'accord ? Maintenant, ce qui se passe ici, c'est les composants A et B ne font que transmettre les données, n'est-ce pas ? Maintenant, il y a pas mal de problèmes ici, d'accord ? La première est que vous transmettez les données à travers des couches inutiles, d'accord ? exemple, vous avez les composants A et B qui n'ont pas besoin des données, mais ils font simplement le travail Par exemple, vous avez les composants A et B qui n'ont pas besoin des données, mais ils font simplement le travail de transmission, n'est-ce pas ? Charge de maintenance. Donc demain si la hiérarchie de vos composants change, disons que vous insérez un nouveau composant entre les deux ou que vous supprimez un composant intermédiaire, d'accord ? Donc, pour tout type de changement, vous devez vous assurer que le nouveau composant transmet également le processus au composant d'équipe, d'accord ? Pour que la hiérarchie ne soit pas rompue et que le transfert de données ne soit pas interrompu. Sinon, le composant d'équipe ne pourra pas afficher les données qu' il affiche actuellement, et cela bloquerait l'application. D'accord ? Donc, si un autre développeur travaille et qu'il ne sait pas que ces données sont transmises, cela peut entraîner des erreurs, n'est-ce pas Et il y a une complexité inutile en ce moment : plus nous avons de couches, plus je dois dire que la chaîne d'accessoires devient foirée , n'est-ce pas ? Et cela rend un code plus difficile à comprendre et à maintenir, n'est-ce pas ? Et c'est là qu' intervient le concept d' utilisation du context hook. D'accord ? Alors, qu'est-ce que Use Context Hook ? Il s'agit du contexte d'utilisation. D'accord ? Il s'agit donc d'un hook à l'aide duquel vous pouvez configurer le contexte du thème, et vous pouvez y accéder directement depuis le composant du thème sans avoir à le faire passer par les le composant du thème sans avoir composants A et B. Cela simplifie le composant T, réduit les frais de maintenance, et euh, les frais de maintenance sont réduits à cause composants intermédiaires que nous avons A et B, ils n'ont pas besoin de réussir ou de connaître cet accessoire thématique dont ils n'ont pas besoin, n'est-ce heure actuelle, ils en sont conscients, d'accord, car cela doit être transmis au composant thématique, via le forage d'accessoires. D'accord ? C'est donc là qu' intervient le contexte d'utilisation, d'accord ? Maintenant, comment fonctionne Use Context ? Il y a donc quelques parties ici. OK. Tout d'abord, vous créez un contexte. D'accord ? Maintenant, le contexte crée essentiellement un objet de contexte, et il s'agit d'une syntaxe ici. C'est donc un objet contextuel que nous créons, nous disons const, mon contexte, d'accord ? Et nous utilisons Create context, et nous transmettons une valeur par défaut ici. D'accord ? Maintenant, cette valeur par défaut est facultative ici. Ce n'est ni nécessaire, ni obligatoire. Mais si vous souhaitez passer, si vous souhaitez avoir une valeur par défaut, vous pouvez la transmettre ici. Une fois cet objet créé, le contexte créé est consommé, d'accord ? Donc, n'importe où ou quel composant souhaite utiliser ce contexte, vous pouvez l'utiliser dans n'importe quel composant, d'accord ? Et en gros, cela peut être utilisé là-bas. D'accord ? Maintenant, il existe également un concept de fournisseur, d'accord, dans lequel vous pouvez encapsuler le composant qui a besoin d' accéder à la valeur du contexte, d'accord ? Et le composant de cet arbre, n'importe quel arbre de composants, peut accéder à la valeur de contexte qui s'y trouve. D'accord ? Mais le fournisseur est quelque chose que nous garons pour le moment. Nous allons simplement comprendre comment vous pouvez créer le contexte et comment vous pouvez l'utiliser. OK, nous allons garder les choses simples. Donc, ce que nous allons faire, c'est copier la syntaxe ici. D'accord ? Je vais suivre la syntaxe ici. Et ce que je vais faire, c'est faire défiler la page vers le bas. Euh, ce que nous avons en ce moment, c'est que nous avons un thème, non ? Ce que je vais faire, c'est me débarrasser de ce thème, et je vais dire mon contexte, ou je peux dire le contexte du thème ici. D'accord ? Je dirais créer un contexte, et je n'aurai aucune sorte de valeur par défaut ici. D'accord ? C'est donc ce que je suis en train de faire. J'ai créé un contexte maintenant, d'accord ? Maintenant, si je fais défiler la page vers le bas, je vais m'en débarrasser ici, le thème que je suis en train de transmettre. D'accord ? Ce n'est pas non plus nécessaire ici, d'accord ? Puisque nous ne transmettons pas le thème, cela n'est pas non plus nécessaire. Donc je suis en train de me débarrasser de tous les accessoires que je passe ici et je simplifie les choses, non ? passe ici et je simplifie les choses, non ? Maintenant, c'est fait. Ceci est également supprimé, et oui, c'est fait. D'accord. Nous affichons maintenant le thème ici. Bien sûr, l'équipe ne fonctionnera pas car l'équipe n'existe pas. Donc, au moment où je l'enregistre, je ne vois aucune sortie car il y a une erreur sur la console. D'accord ? Cela est entendu. Maintenant, nous devons afficher le thème ici. D'accord ? Alors, comment affichons-nous ? Nous devons prendre en compte le contexte, n'est-ce pas ? Nous devons donc utiliser le contexte dans le composant. D'accord ? Je vais donc venir ici pour parler de leur composant. OK. Et ici, quelque part, je vais m'en servir ici. Je dirais que le thème est égal à use context, et le nom du contexte que nous avons est theme. D'accord, ce n'est pas un composant de l'équipe, mais c'est leur contexte ici. OK. Ensuite, je vais enregistrer ça. OK. Et je ne vois pas encore le résultat. D'accord ? Donc, en vérifiant l'erreur, j'ai appris que le contexte de création n'est pas défini, donc il y a un problème avec les entrées, d'accord ? Donc, si vous faites défiler la page vers le haut. D'accord ? Il n'y a littéralement aucune entrée pour importer, créer du contexte et utiliser le contexte. Je vais dire Control et Shift Control et espace ici et vous allez comprendre ça par suggestion, d'accord ? Je vais donc sélectionner ceci et cela sera probablement importé en haut. S'il n'est pas imputé, ajoutez-le simplement si cela ne se produit pas automatiquement pour vous. D'accord ? Et je vais faire défiler la page vers le bas. Le contexte d'utilisation est également censé être importé, donc je vais dire contrôle et espace ici à la fin de l'utilisation du contexte, et je vais le sélectionner. Si vous faites défiler l'écran vers le haut, vous pouvez voir le contexte d' utilisation a également été ajouté. Je sauvegarde ça, d'accord ? Quelle est l'erreur que nous recevons maintenant ? D'accord ? Ainsi, une erreur non détectée dans le contexte du thème de référence n'est pas définie au niveau du composant du thème OK, donc ça veut dire que ce n'est pas défini parce que cela se trouve dans cette application de composants, n'est-ce pas ? Nous devons donc le déplacer à l'extérieur, non ? Donc, ce que je vais faire, c'est venir ici et je vais le créer ici. Et vous pouvez voir le résultat maintenant, d'accord ? Donc oui, cela devrait bien fonctionner maintenant. C'est bon. Donc, ce qui se passait, c'est que j'ai créé le contexte dans le composant de l'application et que j'essayais d' y accéder depuis un autre composant. Cela n'a donc pas fonctionné, bien sûr. OK. J'ai donc créé le contexte, non ? Il est créé, mais vous pouvez voir qu'il n'y a aucune valeur ici, je peux donc fournir une valeur par défaut ici. Je peux dire lumière, par exemple, je peux enregistrer ceci et vous pouvez voir le thème actuel est léger ici. C'est bon. C'est donc ce qu'est le contexte d'utilisation. Il montre essentiellement la valeur par défaut que nous avons ici. Il crée un contexte, et ce contexte est utilisé dans le composant thématique. D'accord ? C'est ainsi que vous pouvez, au lieu d'utiliser le trolling d'accessoires, d'accord, vous pouvez utiliser le contexte ici et vous pouvez utiliser les données de l'ensemble des composants C'est bon. J'espère donc que cela a du sens, et j'espère que vous avez été en mesure de suivre. 19. Créer et mettre en œuvre un fournisseur de contexte React: Maintenant, use Context a ce concept de fournisseurs, d'accord, qui est utilisé pour fournir un contexte A. Maintenant, ici, vous devez utiliser Context, d'accord ? C'est avec cette hiérarchie que nous allons travailler, d'accord ? Nous avons le composant A de l'application, composant B, et le composant est imbriqué. Ce composant d'équipe a besoin d'une équipe et l'application a le thème. D'accord ? Maintenant, ici, nous devons utiliser le fournisseur, non ? Il s'agit donc d'une syntaxe pour utiliser le fournisseur. Vous pouvez donc dire mon contexte, qui est le fournisseur de points du nom du contexte et transmettre la valeur, et cela doit être enroulé autour du composant, comme vous pouvez le voir, où vous souhaitez fournir le contexte. OK ? Maintenant, pourquoi souhaitez-vous fournir le contexte ? OK ? Ici, nous avons créé le contexte, et nous consommons le contexte dans le composant de thème ici. OK ? Il s'agit d'un composant différent. Maintenant, si ces composants sont tous dans le même fichier, si ces composants sont décomposés en fichiers individuels, cela ne fonctionnera pas, car vous devrez alors exporter le contexte du thème d'un fichier et dans l'autre fichier pour que cela fonctionne, Et aussi, un problème ici est que le contexte du thème a actuellement une valeur par défaut qui est utilisée par le composant du thème. Donc demain, si vous voulez transmettre le même contexte à autre composant avec une valeur différente, vous ne pouvez pas le faire. Et pour cela, vous avez besoin d'un fournisseur, d'accord ? Alors, qu'est-ce que le fournisseur ? fournisseur enveloppe essentiellement le composant qui a besoin d'accéder au contexte ou à la valeur, d'accord ? Et la valeur qui est fournie. Donc, cette valeur est la valeur fournie pour le contexte ici, d'accord ? Ce contexte sera donc alors disponible avec cette valeur pour ce composant. Cela est en cours d'encapsulation, ainsi que tous les composants imbriqués qui seront encapsulés dans ce composant particulier OK ? Alors laissez-moi vous le démontrer. C'est bon. Donc, ce que nous allons faire, c'est utiliser l' offre ici. Je vais donc copier la syntaxe ici. OK. Passons au composant A ici, et après H deux, ou disons en haut, d'accord, avant TIF, je vais ajouter ceci, et la fermeture automatique sera ajoutée ici. Je vais juste couper ça, d'accord, et je vais juste le prendre ici. OK. Pour le moment, c' est encapsulé et je dois ajouter la valeur d'une certaine valeur ici, d'accord ? Et ce que je vais faire, c'est dire Dark ici. OK ? Supposons donc que je passe dans le même contexte avec la valeur de dark. Et si je l'enregistre, d'accord, j'ai une erreur. Je vais voir quelle est l'erreur. OK, l'erreur est évidente. Mon contexte n'est pas défini, d'accord ? J'ai donc fait une petite erreur ici. J'utilise mon contexte. Il doit s'agir du nom du contexte, qui est le contexte du thème. Je vais juste le remplacer ici. Donc, fournisseur de points de contexte du thème, la valeur est égale à dark. Et si je sauvegarde ceci, vous verrez que le thème actuel est sombre ici. OK ? Voici donc comment vous pouvez utiliser les fournisseurs dans le code, d' accord, ou avec Context. Maintenant, c'est très utile car quel que soit le contexte que vous fournissez ici avec l' aide des fournisseurs, il est disponible dans l' ensemble de l'arborescence des composants, d'accord. Et en gros, vous pouvez également y accéder depuis le composant imbriqué, n'est-ce pas ? Maintenant, l'avantage ici est que même si le composant à l'avenir, vous le séparerez en fichiers individuels, le contexte sera disponible pour composant de thème car il est transmis via un fournisseur. OK. Si vous n' utilisez pas le fournisseur, vous devez exporter et importer le contexte. Ce n'est pas bon, et vous avez également la valeur par défaut et non la valeur modifiée. OK ? Donc demain, si vous souhaitez réutiliser le contexte pour d'autres composants, vous savez, vous pouvez modifier cette valeur par défaut et la transmettre comme nous le faisons ici, d'accord ? Nous ne faisons donc que modifier la valeur par défaut. La valeur par défaut est claire, et nous passons dans le noir ici parce que nous voulons du noir, et nous voyons le résultat ici. OK ? Donc oui, j'espère que vous savez clairement ce que sont les fournisseurs, leur importance et comment vous pouvez les utiliser. 20. Mettre à jour les valeurs de contexte de manière dynamique: Voyons maintenant comment mettre à jour la valeur du contexte, d'accord ? Et ce que nous allons faire, c'est ici, nous avons ce contexte particulier appelé contexte thématique. D'accord ? Cela nous donne la valeur du thème, qu'il soit clair ou foncé. Et nous sommes en train de passer dans le noir par le biais du fournisseur de thèmes, d'accord ? Fournisseur de contexte de thème, je dois dire, d'accord, ou fournisseur de contexte. Et puis nous accédons à ce contexte ici dans le composant imbriqué, d'accord ? Et nous l' affichons comme étant sombre. OK, tu peux le voir ici. D'accord. Maintenant, ce que je ferais, c'est avoir un schéma ici, d'accord ? Cela indiquera basculer le thème, et cela fera basculer le thème dans l'application accord ? C'est ce que nous allons mettre en œuvre. Ce faisant, nous apprenons comment vous pouvez mettre à jour la valeur du contexte de manière dynamique, lors d'un événement. D'accord ? Donc, ce que je vais faire en premier lieu, c'est introduire un état dans le composant. D'accord ? Donc, ici, je vais dire const o, et je vais appeler cela un thème ici. D'accord ? Et je dirais que définissez-les, c' est This is use state. Nous allons utiliser Use State Hook ici. Je vais dire use state, et je vais transmettre la valeur par défaut sous forme de lumière. D'accord. Maintenant, lorsque je donne de la valeur au contexte, je vais m'en débarrasser et je vais parler du thème ici. D'accord. Donc, quelle que soit la valeur de cette équipe, elle est transmise au fournisseur d'ici ou au fournisseur de contexte, d'accord ? Ou dans le contexte, par l'intermédiaire du fournisseur, devrais-je dire. accord ? Maintenant, ce que je dois faire, c'est introduire un bouton. Ainsi, en cliquant sur le bouton, une fonction se déclenchera et mettra à jour la valeur du thème pour qu' elle s'allume. Donc, s'il fait clair, il le convertira en noir et s'il fait sombre, il le changera en clair, quelque chose comme ça. Je vais donc dire « Const Toggle Theme ». C'est ainsi que j'appellerai cette fonction et je vais utiliser les fonctions de flèche en JavaScript ici. Et ici, je vais dire : définir le thème, OK. Donc, définir le thème est essentiellement l'ensemble des fonctions pour cet état, d'accord ? Définissez le thème, je dirais l'équipe précédente. D'accord. Et je dirais l'équipe précédente. Donc, si l'équipe précédente est à la hauteur de la lumière ici. Si l'équipe précédente est égale à la lumière, j'utilise un opérateur ternaire ici Je dirais que si l'équipe précédente est claire, puis je lui attribue du noir, sinon je lui attribue de la lumière. Donc si ce n'est pas léger, cela le gardera léger, d'accord ? Quelque chose comme ça. D'accord ? Donc Ti est le code complet ici. D'accord. Donc je vais juste me changer. Je vais juste prendre ces deux lignes précédentes. Et je vais enregistrer ça. D'accord ? Maintenant, c'est fait. D'accord. Je vais l'aligner avec un point-virgule ici J'utilise simplement un opérateur ternaire pour faire basculer le thème ici, sur la base D'accord ? Et je vais prendre ce thème à bascule, et ce que je vais faire, c'est ici, dans ce composant en particulier, ajouter un clic sur un bouton D'accord ? Donc, juste avant l'ajout du composant, je vais dire bouton ici, quelque chose comme ça, et je vais dire changer de thème ici. D'accord. Et je dirais « en un clic ». Oups, pas sur Peut jouer en cliquant ici, je dirais Toggle Theme, et je vais enregistrer ceci Donc, vous pouvez voir, j'ai ce bouton ici, d'accord ? Le thème actuel est clair ici. D'accord ? Je peux activer cette option pour parler et allumer. Tu peux voir. Le contexte, la valeur contenue dans le contexte, est donc mis à jour. Comment est-il mis à jour ? Il est mis à jour à l'aide de la variable d'état ici. Nous avons donc lié cette variable d'état à la valeur du contexte. Donc, quelle que soit la variable d'état, d'accord ? C'est ce qui va être affiché et transmis aux composants. Maintenant, une dernière chose que je voudrais mentionner si vous utilisez ce contexte sur plusieurs composants. Donc, ici, je le transmets cette arborescence de composants, je veux dire que je transmets ce contexte particulier à cette arborescence de composants. Via ce fournisseur d'équipe ou le fournisseur de contexte, n'est-ce pas ? Maintenant, si j'ai un autre composant, trois, et que je passe également dans le même contexte à cet arbre de composants. D'accord ? Ensuite, si vous modifiez la valeur ici, quelles que soient les modifications que vous apportez ici à l'aide de ce bouton. Cette arborescence de composants ne sera donc affectée car elle est complètement séparée. Et même si tu passes dans le même contexte, d'accord ? Mais vous faites appel à des fournisseurs, juste ici. Ces deux arbres sont donc séparés. Cet arbre est donc séparé. Et si vous créez un arbre de plus en passant le même contexte là-bas, d'accord ? Les modifications apportées ici dans ce contexte particulier n'auront pas impact sur celles apportées là-bas, car vous transmettez les valeurs par l'intermédiaire d'un fournisseur. D'accord ? J'espère que cela a du sens ici. OK, donc la réutilisabilité peut être effectuée ou le contexte peut être réutilisable, d'accord ? Et vous devez utiliser le fournisseur pour envelopper l'arbre dans un fournisseur. D'accord ? Donc oui, j' espère que cela a du sens quant à la façon dont cela fonctionne. Très bien, je vais également vous le montrer en plein écran ici. OK, vous pouvez donc voir le thème du Togo, Light tak. Vous pouvez ajouter une sorte de marge ou de rembourrage au bouton ici Donc, dans le CSS app point, je peux dire bouton ici. Bouton, et je dirais rembourrage ou marge, et je dirais cinq pixels OK, quelque chose comme ça. Voyons ce qui va se passer. D'accord. Il y a un certain écart maintenant, et cela fonctionne très bien. OK, tu peux voir, non ? Voici donc ce que vous pouvez faire. Voici comment vous pouvez utiliser les états avec contexte, et vous pouvez obtenir la valeur mise à jour dans un contexte en fonction de la valeur du changement d'état. D'accord ? J'espère que vous avez pu me suivre, et j'espère que cela vous sera utile. 21. Le champ d'application compte : explorer les comportements contextuels au sein et en dehors des fournisseurs: Maintenant, permettez-moi de vous dire une chose importante à propos des fournisseurs de contexte, n'est-ce pas ? Un fournisseur de contexte est donc utilisé pour fournir une valeur modifiée au composant dans son arborescence, d'accord ? Maintenant, ce qu'il modifie, c'est la valeur de contexte par défaut. Nous avons donc ici la lumière, par exemple, nous créons le contexte avec la valeur par défaut de lumière, mais lorsque nous la transmettons au fournisseur, nous pouvons modifier la valeur en sombre et la transmettre, d'accord ? Le fournisseur de contexte est donc utilisé pour fournir la valeur modifiée aux composants de son arborescence. D'accord ? Désormais, cette valeur n'est accessible qu'aux composants encapsulés par le fournisseur et non en dehors de celui-ci. OK ? Ainsi, si vous modifiez une valeur à l'aide d'un fournisseur et que vous la transmettez à l'arborescence des composants comme nous le faisons ici dans notre cas, cette valeur modifiée n'est pas automatiquement disponible globalement ou en dehors de l'arborescence dans laquelle le fournisseur est utilisé. Les composants situés en dehors de l' arborescence utiliseront soit la valeur de contexte différée, soit valeur de fournisseur différente s'ils sont encapsulés par un autre fournisseur. OK ? Laisse-moi te montrer ça. C'est bon. Donc, ce que je vais faire ici, c'est démontrer que ce fournisseur de contexte est utilisé pour transmettre la valeur dans cet arbre de composants et non en dehors de celui-ci. Ce que nous allons faire, c'est avoir un autre composant, d'accord ? Et je vais créer un composant, on l'appellera un composant global. Je vais donc aller au bas de la page. Permettez-moi de dupliquer ce truc ici. Et en bas, je vais ajouter un autre composant. J'appellerai cela un composant global. Quelque chose comme ça. Composant global, d'accord. Tout le reste est pareil, d'accord ? C'est juste un composant différent, un composant global, et je l'appelle un composant global. Et ici, je dirais fournisseur externe. OK. À côté, fournissez, quelque chose comme ça. OK ? C'est donc ce que je suis en train de faire. Non, je vais ajouter une autre eau ici, violette, par exemple, et je vais voir ça. OK ? Il s'agit donc d'un composant global qui a été créé. Maintenant, je vais faire défiler la page vers le haut. OK ? Et ce que je vais faire, c'est ajouter ce rendu global des composants ici, lors du rendu du GSX ici OK ? Donc, ce que je ferais, c'est ici juste avant le fournisseur de contexte du thème. Je vais d'abord m'assurer d' intégrer le tout dans un div, parce que la racine doit être là, il doit y avoir une seule racine, n'est-ce pas ? Je vais tout inclure dans cette pièce. OK ? Maintenant, dans cette division, je vais avoir un composant global, quelque chose comme ça. Composant global, je vais avoir une balise à fermeture automatique. Je vais voir si c'est le cas. OK. Vous pouvez voir ce composant global ici. OK ? Maintenant, si vous voyez si je change de thème, vous pouvez voir que le thème actuel du composant global est clair OK. Et dans l'application ici ou dans la hiérarchie des applications hiérarchie des composants de l'application), il y a aussi de la lumière, o Mais le composant global est en dehors de la hiérarchie. Vous pouvez voir que c'est en dehors du fournisseur ici. OK ? Il n'est donc pas impacté par le fournisseur. Maintenant, si je change, si je change de thème, voyons voir, vous pouvez voir que la valeur actuelle du thème est mise à jour uniquement dans le composant du thème ou dans cet arbre, c'est ce que je dois dire, ok cet arbre que nous avons, mais pas à l'extérieur Même s'il utilise le même contexte, la valeur n'est pas mise à jour. C'est ce que je veux dire. OK ? Maintenant, demain, je peux réutiliser ce composant, le composant global, et en dehors de ce fournisseur, au final, je peux le transmettre à nouveau et cette fois, je peux l'intégrer dans un fournisseur distinct ici. Ce que je vais faire, c'est faire un peu d'emballage ici, et je vais supprimer ce composant global. Je vais le déplacer dans une autre offre ici. C'est un autre fournisseur maintenant, présentateur. OK. C'est un autre fournisseur maintenant, et ici, la valeur que je fournis est obscure. Disons, par exemple. OK. Je vais dire Dak ici. Je vais enregistrer ça. Vous pouvez voir que ce fournisseur est différent. Il a une autre valeur. OK ? J'ai donc voulu modifier la valeur par défaut. Donc ce que j'ai fait, c'est que j'ai ajouté provide ici et j'ai modifié la valeur par défaut en DAC OK ? Celui-ci utilise la valeur par défaut. OK ? Celui en haut utilise la valeur par défaut. Il n'y a aucun fournisseur intégré, et celui-ci est relié à une rue. Donc ce truc ici est lié à une rue. OK. Comme vous pouvez le voir, il y a donc trois utilisations du contexte, d'accord ? Maintenant, si vous basculez entre le thème ici, vous verrez qu'il est uniquement basculé dans la hiérarchie et non en dehors de la hiérarchie OK ? C'est le point que je tiens à souligner ici. OK ? Et c'est vraiment très important si vous voulez faire appel aux prestataires, comprendre comment fonctionnent les prestataires ou quelle est l'importance d' avoir un fournisseur, d'accord ? Ainsi, à l'intérieur du fournisseur, la valeur de contexte est contrôlée et peut être modifiée. OK ? Donc, ici, vous pouvez voir qu'il s'agit d'avoir un fournisseur. C'est contrôlé, non, et il peut être modifié, non ? La valeur du contexte peut être modifiée. Et en dehors du fournisseur, en dehors de ce fournisseur ici, par exemple, celui-ci, d'accord, le contexte revient à la valeur par défaut ou à la valeur d' un autre fournisseur, encapsulant dans l'arborescence des composants. OK ? Donc, par défaut, il est situé en dehors de ce fournisseur, il prendra par défaut la valeur par défaut ici, comme vous pouvez le voir, les valeurs actuelles sont claires et la valeur par défaut est claire ici, n'est-ce pas ? Donc, valeur par défaut ou si vous ne voulez pas de valeur par défaut, vous créez un autre fournisseur et transmettez la valeur que vous souhaitez avoir. Hein ? C'est ainsi que cela fonctionne. Et le basculement au sein ce fournisseur n'est pas affecté car le composant global ici ne fait pas partie de ce composant et n'est pas non plus intégré à ce fournisseur OK ? J'espère être en mesure de faire valoir un point ici et j'espère que vous comprenez bien ce qui se passe. OK ? Donc, si vous modifiez une valeur l'aide du fournisseur et que vous la transmettez au composant, cette valeur modifiée n'est pas automatiquement disponible globalement ou en dehors de l'arborescence laquelle le fournisseur est utilisé, d'accord ? Les composants situés en dehors de l' arborescence utiliseront soit la valeur de contexte par défaut, comme nous l'utilisons ici, le composant global, soit une valeur de fournisseur différente s'ils encapsulent l'utilisons ici, le composant global, soit une valeur de fournisseur différente s'ils encapsulent pi sous le fournisseur, comme nous le faisons ici. OK ? Mais la valeur à l'intérieur cet arbre n'est pas disponible à l'extérieur, n'est-ce pas ? J'espère que cela est clair et que vous êtes en mesure de comprendre ce point. 22. Crochets personnalisés 101 : créer une logique réutilisable dans React: Salut, voilà. Il est donc temps de commencer à parler de hooks personnalisés dans React. Maintenant, qu'est-ce qu'un crochet personnalisé ? hooks personnalisés dans React sont donc des fonctions qui vous permettent de réutiliser la logique sur plusieurs composants. C'est bon. Maintenant, lorsque vous créez des applications avec React, il y a des composants, n'est-ce pas ? Nous avons donc ici un composant, d'accord ? Il s'agit donc d'un composant très simple qui renvoie des crochets personnalisés dans l'en-tête ou utilise la balise H one, n'est-ce pas ? Il s'agit maintenant d'un seul composant, mais dans une application réelle, il se peut que vous ayez plusieurs composants et que vous utilisiez une grande partie de la logique entre les différents composants. Maintenant, s'il existe une sorte de logique commune à travers votre composant, vous pouvez la convertir ou encapsuler cette logique dans un hook personnalisé, et vous pouvez réutiliser ce hook entre les composants de votre application React OK ? Maintenant, vous avez aussi des crochets intégrés, non ? Et ici, j'ai quelques instructions d'entrée en haut, use context, use state, use effect, d'accord ? Ce sont tous les crochets intégrés que vous avez, d'accord ? Et ceux-ci sont conçus pour fournir des composants fonctionnels. Les composants fonctionnels sont donc les composants que nous définissons à l'aide de fonctions, d'accord ? Ils sont donc définis pour donner aux composants fonctionnels l' accès à des fonctionnalités telles que les événements du cycle de vie des états dans leur contexte, n'est-ce pas ? Et ils sont standardisés, définis par React, et optimisés pour un ensemble de tâches courantes, n'est-ce pas ? Ils sont donc intégrés que vous importez et réutilisez dans vos composants, d'accord ? Mais demain, si vous souhaitez réutiliser une sorte de logique, vous pourrez même créer votre propre crochet personnalisé, ce qui signifie qu'il s'agit d'un crochet défini par l'utilisateur, d'accord ? Et chaque fois que vous définissez, la syntaxe est essentiellement la suivante : cela devrait commencer par cette utilisation ici. OK, il faut commencer par l'utilisation. Il peut donc être utilisé en tant que composant ou en utilisant EPI ou quelque chose comme ça, quel que soit le nom que vous voulez OK, compteur d'utilisation OK, donc ça devrait démarrer la convention normale commence essentiellement par l'utilisation. OK ? Alors, que sont les crochets personnalisés ? Ce sont des fonctions que vous créez vous-même pour réutiliser la logique entre les composants, d'accord ? Et c'est ce que c'est. Vous pouvez le considérer comme une recette, d'accord, qui n'est rien d'autre qu'un ensemble de tâches courantes ou un ensemble d'opérations spécifiques que vous souhaitez effectuer. Et comme vous ne voulez pas répéter le code sur plusieurs composants, il vous suffit de le définir une seule fois et de le réutiliser partout. OK ? Pourquoi sont-ils nécessaires ? Donc, bien sûr, l'une des principales raisons que vous pourriez tirer de cette définition est la réutilisabilité OK ? Cela vous permet donc de réutiliser une grande partie de la logique. Cela vous permet de supprimer beaucoup de répétitions et vous aide à mieux organiser votre code. OK ? Il existe également de nombreux crochets intégrés que nous connaissons déjà Vous devez savoir si vous construisez avec React. Ce sont donc tous les crochets intégrés. Par exemple, certains des crochets que j'ai ajoutés en haut créent des contextes, utilisent le contexte, utilisent l'état. OK ? Ce sont donc des crochets intégrés, et les crochets personnalisés sont les crochets définis par l'utilisateur OK ? Maintenant, il y a une question à laquelle tu te poses peut-être maintenant, non ? Donc, en regardant cette définition, en quoi sont-elles différentes des fonctions Ja Script normales ? Les fonctions sont également des blocs que vous pouvez définir une seule fois et réutiliser dans votre application. Pourquoi ne pas simplement créer des fonctions au lieu de crochets ? Pourquoi ce concept de crochets existe-t-il en premier lieu ? Les hooks sont différents lorsque vous les comparez aux fonctions d'ici. Maintenant, en quoi sont-ils différents ? Désormais, les hooks personnalisés peuvent utiliser les fonctionnalités de réaction. Maintenant, quand je dis que les fonctionnalités de réaction signifient hooks personnalisés peuvent utiliser la gestion d'état, comme utiliser le crochet d'état pour gérer l'état des composants, ce que les fonctions JS normales ne peuvent pas faire. OK ? Les hooks personnalisés ont également un contrôle du cycle de vie, ils peuvent donc utiliser use effect hook pour gérer les effets secondaires tels que la récupération de données, pas le cas des fonctions JS normales OK ? Il y a aussi beaucoup de réutilisabilité là-dedans. Oui, les hooks personnalisés suivent essentiellement les règles de réaction pour les hooks et garantissent un comportement cohérent. C'est pourquoi ce concept de crochets est différent. Tout comme ce concept de hooks personnalisés, il est essentiellement différent de celui des fonctions Jascript normales Les fonctions de Ja Script sont limitées, d'accord ? Mais lorsque vous souhaitez disposer d'un ensemble de réutilisabilité spécifique à React , vous optez pour des hooks personnalisés. C'est bon. J'espère donc que cela a du sens. Maintenant, ce que je ferais, c'est me débarrasser de ces entrées en haut. OK ? Ils ne sont pas réellement nécessaires à ce stade. Maintenant, ce que nous allons faire, c'est nous atteler un peu à la tâche et créer nos propres hooks personnalisés. OK ? Donc, ce que nous allons faire, c'est abord créer un composant de compteur. Il s'agit d'un composant qui nous aidera à afficher en compteur normal avec deux boutons d'incrémentation et de décrémentation. Vous pouvez décrémenter la valeur du compteur ainsi que OK ? C'est donc le composant que nous allons créer très simple, puis nous allons extraire la logique du compteur dans un crochet personnalisé, ce qui nous permettra de réutiliser le compteur sur plusieurs composants à plusieurs endroits. C'est donc quelque chose que nous allons explorer. Commençons donc par ceci. C'est ici que j'ai un simple projet React, un projet Wheat React, je dirais. Comme vous pouvez le voir, j'ai main.j6 qui est une application de rendu ici Et voilà, si vous venez, c'est app point JSX OK. Maintenant, ce que je vais faire ici, c'est commencer par le contraire, je vais avoir un État ici. Donc, tout d'abord, je vais compter ici, définir le nombre, quelque chose comme ça, et je dirais d'utiliser State Okay. Et je vais ajouter zéro ici. OK. C'est donc notre État ici. Je vais ajouter deux fonctions. Je dirais incrément. Il s'agit d'une fonction. C'est une fonction de flèche que je suis en train de créer ici. Et en fait, je n'ai pas besoin d' ajouter d'accolades, car il n'y a qu'une seule ligne de code. OK ? Et je dirais compter plus un. OK, comptez plus un, quelque chose comme ça. OK. Et j'aurai aussi une fonction de décrémentation, une fonction de décrémentation C'est donc de l'incrémentation, de la décrémentation. OK. Et au lieu de l' incrémenter ici, je vais simplement le décrémenter Oups, pas dedans, c'est négatif. C'est bon. C'est donc chose faite. Et maintenant, je suis en entête. Ici, je vais juste dire compter, et je vais afficher le nombre selon quelque chose comme ça. OK. Et en quelque sorte H un, je vais le garder comme H deux. Et je vais voir si vous pouvez voir le nombre de zéro, et ici, j'ai deux boutons. OK. Donc, le tag du bouton, je dois ajouter un bouton. Je dirais que c'est un bouton d'incrémentation. OK, et au clic, je vais dire incrémenter ici, comme ça OK, c'est un bouton. Je vais ajouter un autre bouton ici. Donc ça y est, et je vais dire décrémentation OK. Decrement, quelque chose comme ça Donc oui, c'est le compteur que nous avons maintenant. Si vous augmentez le compteur, vous le verrez augmenter, vous pouvez également le diminuer. Ça va aussi devenir négatif. OK ? Nous avons créé un compteur très simple. OK ? Maintenant, nous allons extraire une logique de compteur dans un crochet personnalisé et utiliser le crochet personnalisé dans notre application. OK ? Alors faisons-le. Donc, tout d'abord, je vais l'extraire dans un fichier séparé. OK. Je vais donc avoir un fichier ici sous SRC Je vais appeler ce fichier comme nous pouvons l'appeler use counter point JSX, quelque chose comme ça OK. Et ici, je vais simplement reproduire une grande partie du code que nous avons déjà Je vais donc simplement copier l'intégralité de cette fonction ici. OK. Ça et je vais le coller ici. OK. Maintenant, nous allons le réduire. D'accord, je dois ajouter une importation, qui est l'état d'utilisation en haut. OK, l'état d'utilisation a été importé. Et ici, au lieu de fonction, c'est use counter, et je dois exporter use counter, donc je dirai export, default, use counter. C'est fait. OK. Et ce que nous devons faire, c'est utiliser l'État ici. Nous utilisons l'incrément, et lors du retour, nous n'avons pas besoin de renvoyer le JSX, ce JSX Ce n'est pas quelque chose que nous allons rendre, mais nous allons renvoyer le décompte. OK, nous allons donc retourner le décompte. Nous allons renvoyer l'incrément, et nous allons renvoyer le décrément, quelque chose comme ceci Et ce ne sera pas un support rond. Ce sera également entre parenthèses. Donc oui, c'est fait. OK, donc je pense que nous sommes tous d'accord. OK, nous sommes en train de créer un État. Nous créons une incrémentation, une décrémentation, nous comptons et nous exportons un compteur d'utilisation Il s'agit donc d'un hook personnalisé que nous avons créé dans lequel nous avons en fait une certaine logique, et nous utilisons des fonctionnalités liées à React, vous pouvez le voir. Nous utilisons les États et tout le reste, n'est-ce pas ? Et c'est quelque chose que nous revenons également. Maintenant, ici, si vous arrivez à app point Jx, ce que nous devons faire, c'est utiliser le hook que nous avons créé OK ? Parce que utilisez le compteur, si vous regardez, c'est notre crochet personnalisé qui gère la logique du comptage. Il gère l'état et renvoie le décompte actuel ainsi que les fonctions d'incrémentation et de décrémentation ici. OK ? Nous devons donc mettre à jour le composant de compteur que nous avons dans l'application. Le nom du composant est app. Et cela représente un contre. Nous devons donc le mettre à jour pour utiliser un crochet personnalisé. Donc, ce que nous allons faire, c'est me débarrasser de tout ça. Nous n'en avons pas besoin. Il s'agit de passer au crochet personnalisé, et je vais plutôt dire const, je dirais count Je vais dire incrémentation, je vais dire décrémenter, quelque chose comme ça Je dirais égal à, je dirais utiliser un compteur. Comme ça. OK. Et oui, c'est ça. Nous utilisons un contre-crochet. Je n'ai pas besoin d'utiliser State now dans mon application. Vous pouvez donc voir qu'au moment où j'ai dit utiliser le compteur ici, accord, l'instruction d'entrée a été ajoutée en haut ici. Vous pouvez voir cette instruction d'entrée. OK. Vous pouvez donc voir à quel point ce code est devenu beaucoup plus facile à gérer. OK ? Je peux enregistrer ce fichier. Je peux l'actualiser, et vous ne verrez rien changer dans le résultat. Cela fonctionne parfaitement bien. OK ? Nous avons donc remplacé la gestion interne des paramètres du composant de compteur par notre crochet de compteur d'utilisation Et cela rend notre contre-composant plus propre. Et réutilisable pour toute sorte de logique liée au comptage. OK ? Demain, disons si vous souhaitez utiliser ce composant sur plusieurs composants ou demain si vous souhaitez utiliser cette fonctionnalité de compteur sur plusieurs composants. Ce que vous pouvez faire, c'est créer un compteur comme celui-ci. OK, il y a un crochet qui gère le comptage des choses, non ? Et vous pouvez l'importer à plusieurs endroits et l'utiliser sur différents composants. Demain, si vous devez mettre à jour cette logique de comptage, vous n'aurez pas à déterminer, oh, quels composants l'utilisent, laissez-moi vérifier. Il suffit de le mettre à jour immédiatement dans ce fichier en particulier. Dès que vous le mettez à jour dans un seul fichier, les modifications sont répercutées partout. C'est donc la magie de la réutilisabilité, comme vous pouvez l'imaginer. OK ? Alors, que sont les crochets personnalisés ? hooks personnalisés dans React sont des fonctions qui vous permettent d'utiliser la logique sur plusieurs composants, et ils commencent par une utilisation ici. C'est une convention. D'accord ? J'espère que cela vous a été utile et j' espère que vous avez pu suivre. 23. Améliorer les fonctionnalités : mettre à jour et refactoriser les crochets personnalisés: Salut, voilà. Alors maintenant, ce que nous allons faire, c'est avoir ce hook personnalisé que nous utilisons ici et que nous avons créé. Il s'agit d'un crochet de compteur d'utilisation, qui nous aide à gérer le nombre et les fonctionnalités du compteur. Et nous nous en servons pour l' afficher ici, n'est-ce pas ? Et vous pouvez le réutiliser dans autant de composants que vous le souhaitez, en utilisant un contre-crochet. Ce que je vais vous montrer, c'est comment vous pouvez mettre à jour votre hook personnalisé pour ajouter plus de fonctionnalités et comment cela se reflète dans l'ensemble. C'est bon. Donc, ici, dans ce compteur, nous allons ajouter un bouton supplémentaire, qui sera le bouton de réinitialisation qui remettra le compte à une valeur initiale. C'est bon. Donc, ici, ce que je vais faire, c'est que nous aurons une valeur initiale. Donc, ici, dans ce hook en particulier, j'accepterai la valeur initiale. D'accord ? Je vais donc dire valeur initiale et oups, valeur initiale, et il y aura ce zéro comme valeur par défaut ici, et ici, je vais réinitialiser D'accord ? Donc je vais dire const, je vais dire reset, OK. Et j'aurai une fonction flèche. OK, nous n'avons pas besoin de bretelles bouclées, donc je dirais de définir le nombre ici et je vais le remettre à la valeur initiale, d' accord, peu importe ce que c'est OK. Et au lieu d'initialiser l'état ici à zéro, je vais l'initialiser à la valeur initiale car nous obtenons maintenant la valeur initiale comme paramètre. D'accord ? Et d'accord, il se peut que je reste sur un pied d'égalité ici. C'est bon. C'est une réinitialisation, et ce que nous ferions également c'est renvoyer cette réinitialisation ici. Donc je vais juste dire « réinitialiser » ici, quelque chose comme ça. OK. C'est chose faite. Maintenant, la fonction de réinitialisation a été ajoutée ici dans le retour, et ce que vous pouvez faire ici, c'est ajouter un bouton. OK, je vais donc ajouter un bouton. Et ce bouton sera un bouton de réinitialisation, et j'aurai une fonction de réinitialisation. Mais le problème est que la fonction de réinitialisation n'est pas déclarée ici, donc je vais dire réinitialisation, quelque chose comme ça. D'accord ? Alors oui, ça y est. Nous sommes tous prêts et nous allons également transmettre une valeur initiale puisqu'il accepte désormais la valeur initiale. La valeur initiale sera donc nulle pour le moment. Je vais enregistrer ceci, et vous pouvez voir que le bouton de réinitialisation a été ajouté, d'accord ? Maintenant, je peux incrémenter, je peux décrémenter, et je peux voir D'accord ? Vous pouvez donc voir comment la fonctionnalité fonctionne correctement. D'accord ? Maintenant, quelle que soit la valeur initiale que vous définissez, le compteur partira de cette valeur initiale. Donc, si je fixe la valeur initiale à dix, le compteur commencera à dix. Vous pouvez voir que le décompte est de dix. OK. Et vous pouvez l'incrémenter, vous pouvez le décrémenter, et il sera remis à la valeur initiale que vous avez transmise C'est vrai. C'est ainsi que vous pouvez mettre à jour le hook essentiellement pour ajouter plus de fonctionnalités, et les mises à jour que vous apportez se répercutent se répercutent endroit où ce hook est utilisé. D'accord ? C'est donc la beauté de l'utilisation de crochets personnalisés. J'espère que c'est clair et j'espère que vous avez pu suivre. 24. Conclusion du cours: C'est la fin de ce voyage passionnant dans le monde des React Hooks. Nous avons exploré comment les hooks ont révolutionné le développement de React, nous permettant d'écrire code beaucoup plus propre et fonctionnel Ainsi, qu'il s'agisse de maîtriser les bases de l'état d'utilisation et de l'effet d'utilisation ou d' aborder des sujets avancés tels que le contexte d' utilisation, l'utilisation de références et les hooks personnalisés, nous avons jeté des bases solides pour le développement moderne de React En cours de route, nous avons également créé projets concrets tels qu'un sélecteur de couleurs, un traceur de souris et une horloge numérique Et ces projets nous ont aidés à montrer comment ces concepts prennent vie dans des applications pratiques. Mais n'oubliez pas que ce n'est que le début. La puissance des React Hooks réside dans leur polyvalence et leur adaptabilité Je vous encourage à continuer d' explorer, d'expérimenter et de créer de nouveaux projets avec les connaissances que vous avez acquises dans ce cours Cela vous aidera donc à explorer une manière innovante d'utiliser les React Hooks dans vos futurs projets et applications. J'ai hâte de voir comment vous allez appliquer ces compétences pour créer des applications dynamiques et réactives. N'oubliez pas que l'apprentissage est un processus continu et que réagir offre des opportunités infinies de croissance et de créativité. N'oubliez pas de terminer les projets de cours que vous recevez avec cette classe en particulier et de les partager avec l'ensemble de la classe dans la section des projets. Vos projets consolideront non seulement votre apprentissage et votre compréhension, mais inspireront également les autres notre communauté d'apprentissage à faire mieux Merci d'être un groupe d'apprenants si engagés et enthousiastes J'espère que ce cours a non seulement amélioré vos connaissances, mais qu'il vous a également incité à repousser les limites de ce que vous pouvez accomplir avec React. Bon codage, et je vous souhaite bonne chance dans votre parcours de développement de React.