Créer une liste de tout complète dans React Js

1. Guide complet de React Js : des bases aux applications dynamiques: Bonjour, futurs développeurs web. Je suis Man et Conny, votre sympathique instructeur et guide dans cette passionnante aventure avec React Gas Dans ce cours court et doux, nous allons construire quelque chose d'incroyable ensemble. Mais avant de nous plonger dans le projet, laissez-moi vous dire ce qui vous attend. Nous allons commencer par les principes fondamentaux, en veillant à ce que vous disposiez d'une base solide et que vous réagissiez au gaz. Ensuite, nous passerons au codage où vous créerez le projet du monde réel à partir de zéro. À la fin de ce cours, vous aurez les compétences et la confiance nécessaires pour créer vos propres applications reac GAS et impressionner vos employés ou clients potentiels C'est le projet que nous allons construire ensemble. Il s'agit d'une application de suivi des tâches où les utilisateurs peuvent créer de nouvelles tâches à l'aide de ce formulaire. Lorsqu'ils créent des tâches, celles-ci apparaissent dans ce conteneur. Je vais donc vous montrer comment nous pouvons le faire. Supposons que nous voulions créer une tâche. Je peux appuyer sur Entrée sur le clavier ou appuyer sur ce bouton ici. Nous allons donc apprendre à écouter les événements du clavier et à écouter les événements des boutons HTML. Je vais maintenant appuyer sur la touche Entrée de mon clavier. Et voilà. L'élément de la tâche 1 a été rendu dynamiquement ou est apparu dans ce conteneur. Les utilisateurs peuvent désormais cocher cet élément s'ils ont terminé la tâche. Lorsqu'ils cochent cette case, elle passe au vert, indiquant que cet élément de tâche est terminé Ils peuvent ajouter plusieurs éléments de tâche, comme la tâche deux, la tâche trois Maintenant, vous pouvez remarquer que nous avons ici un comptage qui compte le nombre d'éléments de tâche dans la liste. Chaque fois que vous ajoutez un nouvel élément de tâche, ce nombre augmente dynamiquement, indiquant le nombre d'éléments de tâche en temps réel. Nous pouvons maintenant filtrer entre les tâches terminées et en attente. Si je passe à Terminé, nous ne verrons que les tâches terminées , et dans notre cas, un seul élément de la tâche. Si nous passons aux éléments en attente, nous verrons tous les éléments de tâche en attente dans ce conteneur. Vous pouvez supprimer des éléments à partir d'ici, et si vous passez à tout, vous remarquerez que l'élément de la tâche 2 a été supprimé. Nous allons donc apprendre à supprimer des éléments et à afficher le résultat de manière dynamique aux utilisateurs. Vous pouvez vérifier plusieurs éléments si vous le souhaitez. Désormais, cette application comporte également deux pages, la page d'accueil et la page À propos. Nous pouvons naviguer entre ces pages l'aide des boutons de navigation d'en-tête. Si je passe à la page À propos, nous obtiendrons cette page simple à propos de Pate. Vous remarquerez que le chemin RO est devenu slash about. Laissez-moi le refaire. Comme vous pouvez le constater, l' UO a changé. Cette page contient une petite description de la raison d'être de cette application. Comme vous pouvez le voir ici, cette application n'est qu'une simple application de suivi pour vous aider à rester organisé et à gérer efficacement votre tâche. C'est une application simple, mais elle contient de nombreuses fonctionnalités. Par exemple, nous avons ici un étranglement de programmation. Nous allons récupérer cette blague depuis une API externe. Chaque fois que nous passons de la page d'accueil à la page ci-dessus, nous allons chercher une nouvelle blague Nous allons apprendre à récupérer des données depuis une API externe et à les afficher dynamiquement dans notre application Cela se produira chaque fois que vous passerez d'une page ou que vous actualiserez cette page. Si vous l'actualisez, vous obtiendrez un nouveau starter. Vous remarquerez peut-être que nous avons un lien en bas de page disant « Rencontrez l'équipe ». Si vous cliquez dessus, une liste de noms apparaîtra. Ces noms font référence aux développeurs qui ont travaillé sur cette application de suivi des tâches. Maintenant, vous remarquerez également que le chemin de l'URL a changé, et nous avons ici l'équipe de barres obliques à la fin Permettez-moi de le refaire et de garder un œil sur l'URL. Comme vous pouvez le voir, nous avons un nouveau starter pour le récupérer, et maintenant cliquons sur ce lien, et l' URL a été mise à jour pour environ quatre membres de l'équipe Slash C'est ce que nous appelons et réagissons une route imbriquée. Les itinéraires imbriqués vous aident à créer des mises en page imbriquées sans actualiser la Comme vous pouvez le constater, cette application regorge de fonctionnalités et il y a beaucoup de choses à apprendre ici. Il contient donc tout ce dont vous avez besoin pour créer une application Web interactive. Nous avons des formulaires, des boutons, nous pouvons interagir avec le clavier. Nous pouvons filtrer les éléments des tâches, oui. Nous pouvons passer d'une page l'autre et les articles ne disparaîtront pas du conteneur. Nous allons donc également apprendre cela. Vous pouvez avoir un rendu dynamique. C'est également une fonctionnalité très utile dans une application Web moderne. Nous pouvons passer d'une page à l'autre, récupérer des données à partir d'une API externe et avoir des mises en page et des itinéraires imbriqués Comme vous pouvez le constater, elle peut apparaître comme une simple application, mais elle a beaucoup de choses à offrir. En fait, c'est tout ce dont vous avez besoin pour commencer à créer des applications Web à partir de zéro. Ainsi, après avoir terminé ce cours, votre progression ne dépendra que votre imagination et simplement de vos compétences en CSS. Grâce à cela, ce cours vous permettra de comprendre ce qu'est React GS, ce qu'est GSX, comment React GS fonctionne dans les coulisses, et vous apprendrez également à créer ces fonctionnalités étonnantes dans une application Web Vous vous demandez peut-être pourquoi ce cours est si court, puisqu' il ne dure que 2 heures environ Eh bien, c'est une excellente question. Vous voyez, ce cours est conçu en tenant compte de votre temps et de votre apprentissage. Je crois qu'il est important de vous mettre au courant rapidement et efficacement. Je déforme les connaissances essentielles dont vous avez besoin pour maîtriser le SI et créer une application de suivi des tâches Pas de peluches, pas de remplissage, juste les bonnes choses. Je sais que votre temps est précieux, et je le respecte. En gardant le contenu du cours, vous gagnerez du temps tout en acquérant les compétences nécessaires pour créer vos propres projets RGS sans vous sentir dépassé Donc, si vous souhaitez créer cette application avec moi, inscrivez-vous simplement à ce cours et commençons le voyage 2. Aperçu des attentes et des prérequis: Bonjour, leurs futurs développeurs de React. Bienvenue dans notre cours sur le guide complet de React GAS des principes fondamentaux aux applications dynamiques. Au cours de ce voyage passionnant, nous aborderons les concepts fondamentaux de React et explorerons comment celui-ci fonctionne de pair avec Java Script pour créer des interfaces utilisateur époustouflantes. Commençons donc. Première chose, troisième. Voyons ce qu'est React et pourquoi il a acquis une immense popularité au saxophone dans le monde du développement React est une puissante bibliothèque de scripts Dava qui nous permet créer facilement des interfaces utilisateur captivantes Mais voici le point fort. React ne fonctionne pas de manière isolée. Il est étroitement intégré au script Dava. React exploite la magie de JavaScript pour donner vie à nos interfaces utilisateur Cela signifie qu' une solide compréhension des concepts de JavaScript sera extrêmement utile tout au long de ce cours. Maintenant, avant d'entrer dans le vif du sujet, abordons rapidement certains prérequis et outils dont vous aurez besoin pour tirer le meilleur parti de ces outils Si vous connaissez déjà le HTML, CSS et le JavaScript, vous êtes bien parti. Ces langages fondamentaux nous seront utiles lorsque nous explorerons les fonctionnalités d' Act. En ce qui concerne les outils, nous utiliserons le code Visual Studio pour nos aventures de codage et aucune DS pour exécuter nos applications. Vous n'avez pas besoin d'avoir d'expérience avec NGS. La seule chose requise est de bloquer NOGS depuis son site officiel Maintenant, ne vous inquiétez pas si vous débutez avec ces outils, vous guideront à chaque étape. Maintenant, je suis sûr que vous êtes curieux de savoir pourquoi ACT est si largement utilisé dans le monde réel. Permettez-moi de vous donner un exemple rapide pour renforcer votre motivation. Imaginez que vous naviguez sur un site Web dynamique avec une pléthore éléments interactifs, de boutons, de forums Ces éléments doivent répondre rapidement et en douceur à vos actions. C'est là que React sonne. Son processus de rendu efficace et son utilisation intelligente du dom virtuel garantissent une expérience utilisateur époustouflante, faisant de React un choix idéal pour créer des duplications engageantes et réactives . Alors voilà, un aperçu Watson Store pour vous lors de ce voyage avec votre ex. Préparez-vous à percer les mystères de l'action, plonger dans le monde du JavaScript et à créer des interfaces utilisateur impressionnantes qui auront un impact durable Je suis ravi de vous guider à chaque étape. 3. Créer votre première application ReactJs étape par étape: Commencez par créer un dossier et ouvrez-le dans VSCO. Vous pouvez nommer le dossier comme bon vous semble. J'ai nommé Mine Task Tracker apsince, c'est ce que nous allons construire La première chose à faire est d'ouvrir le terminal. Pour ce faire, vous pouvez soit cliquer sur l'icône du terminal ici. Vous pouvez également accéder au menu et sélectionner le terminal. Cliquez ensuite sur Nouveau terminal. Une fois la fenêtre du terminal ouverte, assurez-vous que GS n'est pas installé. Vous pouvez le faire en exécutant la commande suivante pour vérifier sa version. Si la version est affichée, cela signifie qu' aucun GS n'est installé. Sinon, vous devrez le désactiver sur le site officiel Ensuite, nous allons exécuter une commande pour créer notre première application React GS. Cela peut être fait en utilisant PM, PMPM ou Yn. Dans ce cas, nous utiliserons la commande Create React app, qui est un outil qui configure un nouveau projet React GS avec une structure et des dépendances préconfigurées Si Yarn n'est pas installé, vous devez utiliser l'application APX create React et ajouter un nom d'application personnalisé Vous pouvez également utiliser un point pour indiquer que vous souhaitez créer l' application Reacts dans le dossier Coan J'utiliserai Yarn car il est plus stable que le PMPM ou le MPM Appuyez sur Entrée et laissez la magie opérer. La commande a créé avec succès une application à quatre GS prête à être utilisée. Plutôt cool, non ? Voici la structure du projet. Le dossier SRC contient le code source de l'application. Le dossier public contient des actifs statiques et le fichier HTML à points d'index constitue le point d'entrée de votre application. Bien qu'AGS n'utilise qu'un seul fichier HTML, cela ne signifie pas que nous sommes limités à une page. Nous pouvons créer plusieurs pages ou itinéraires à l'aide de JavaScript. Chaque itinéraire utilisera JavaScript pour afficher un code HTML spécifique en fonction du chemin de l'URL. Chaque morceau de code AML que nous écrivons sera rendu dans l' élément TF avec l'ID root Maintenant, dans le dossier SRC, nous trouvons divers fichiers dont le plus crucial est l'index DGS Ce fichier est important car il utilise le script Dava pour afficher tout le code de notre projet dans l' élément DV avec l'ID root Pour faire simple, React est comme le plan d'une maison Pendant que React, Dom fait office d'équipe de construction qui transforme ce plan en bâtiment réel C'est l'outil qui prend vos composants React et les met en valeur sur le Web, donnant ainsi vie à votre site Web Le fichier Index D GS, nous pouvons supprimer cette ligne ici. Le rapport Web Vitals est un outil React utilisé pour mesurer et rendre compte des performances d'un site Web Cependant, nous n'en avons pas besoin pour le moment. N'hésitez pas à le supprimer ainsi que sa déclaration d'importation. Supprimons également ce fichier dans le dossier SRC car nous n'avons pas besoin de faire de tests Nous nous concentrons sur Reac TS lui-même. Passons au fichier Abdo GS, nous avons trouvé une fonction qui renvoie la syntaxe GSX Dans React, nous ne l'appelons pas La syntaxe HTML est appelée GSX, qui signifie Javascript XML GSX combine le HTML et le JavaScript, ce qui vous permet d' écrire un code d'interface utilisateur à la fois facile à lire et alimenté par JavaScript La fonction Abdo GS est un composant. Désormais, dans React, un composant est une fonction agissant comme un élément constitutif de votre interface utilisateur. Pensez-y comme si vous assembliez un ensemble de Lego. Chaque support Lego est analogue à un composant. Ces composants sont des blocs de construction réutilisables qui encapsulent l'intelligence artificielle et les fonctionnalités, rendant ainsi votre code modulaire et maintenable Maintenant, après cette brève introduction aux fichiers et structures de reac GS, lançons l'application et voyons à quoi elle ressemble dans le navigateur Dans le terminal, exécutez la commande PM start. Cela exécute le script défini dans votre fichier package do JSON et/ou la section du script avec la touche start Ce script utilise généralement des outils tels que le pack Web ou le bundle Bolt et transpire votre code Cette commande lance ensuite un serveur de développement et recharge automatiquement l'application chaque fois que vous apportez Si le fichier Package D JM est nouveau pour vous, considérez-le comme un centre de contrôle pour les dépendances de vos projets. Il répertorie les outils et bibliothèques externes dont votre application a besoin. Ces dépendances sont gérées à l'aide de l'APM, qui ressemble à un entrepôt numérique pour le code En examinant le fichier Package DSO, les utilisateurs peuvent comprendre configuration de votre application et garantir la cohérence Une fois que vous avez exécuté la commande, un onglet de navigateur s'ouvre avec l'URL Local host 3,000. Un serveur local accessible uniquement pour votre machine. Vous verrez le logo GS tourner avec du texte et des styles. Revenons maintenant ici et supprimons la déclaration d'importation pour le logo Rags. Supprimez tout le code GSX contenu dans la fonction du composant de l'application, en ne laissant que l'instruction return Supprimez également le fichier SVG du logo du dossier SRC, car il n'est plus nécessaire Dans le fichier Apo GS, notez que le composant de l'application est une fonction. Chaque fonction de composant dans AGS doit commencer par une lettre majuscule pour distinguer des autres fonctions JavaScript Désormais, chaque composant React doit toujours renvoyer du code GSX Vous pouvez renvoyer directement un GSX tel qu' un élément Dev ou le mettre entre parenthèses Maintenant, si vous êtes familier avec le HTML et avez une certaine connaissance des fonctions de groupe de Java, le reste des ACTG sera simple Maintenant, dans ce Dv, ajoutons un texte disant bonjour VGS. Enregistrez le fichier. rendu sera automatiquement rétabli puisque la commande MPM start est toujours en cours d'exécution et surveille les modifications Lorsque vous enregistrez vos modifications en appuyant sur la touche S, les mises à jour apparaissent sur la page. Tous les éléments HTML ont été remplacés par ce fichier tiff. 4. Ajouter des styles à votre projet React: Nous avons expliqué comment rendre le code SSML à l'aide de la syntaxe GSX dans le composant ReAGS Mais qu'en est-il des styles ? Dans le fichier Abdo gS, vous remarquerez que nous importons un fichier CSS nommé Abdo CSS situé dans le dossier SRC Ce fichier contient du code CSS normal. Bien que nous n' importions pas explicitement le code CSS dans le fichier apto GS, nous informons ReAGS que lorsqu'il affiche le composant AbDogs sur le signe du client, il doit également récupérer le fichier CSS et l' utiliser comme feuille de style Cependant, dans le cadre de ce cours, nous n'utiliserons pas le code CSS spécifique. N'hésitez pas à le supprimer complètement. Passons au fichier d'index DGS, nous importons également un autre fichier CSS nommé index CSS Lorsque vous créez un composant dans IGS, il est recommandé de nommer le fichier CSS correspondant avec le même nom que le nom du fichier des composants. Dans le fichier Index DSS, vous trouverez des styles pour le corps et d'autres éléments similaires à ceux utilisés précédemment Nous n'aurons pas non plus besoin de ce code. Allez-y, effacez ce fichier. Maintenant, revenons au fichier Abdo GS, nous allons introduire quelques éléments GSX ici, mais nous n'allons pas entrer dans les détails CSS de manière approfondie Après tout, il s'agit d'un cours AGS, pas d'un cours CSS. Pour rationaliser ce processus, j'ai préparé un fichier CSS Abdo et un fichier CSS à points d'index que vous pouvez télécharger et utiliser Vous pouvez les trouver dans la section des ressources de cette conférence vidéo. Une fois que vous avez téléchargé les nouveaux fichiers CSS, copiez le code du fichier CSS supprimé et collez-le ici Le code inclut des classes telles que conteneur de suivi des tâches et d'autres, ainsi que des requêtes multimédia pour garantir la réactivité de nos applications sur différents écrans Répétez la même chose pour l'index du fichier CSS. Collez également le code que j'ai fourni dans ce fichier. J'ai appliqué un style au corps et à l'élément racine, qui existent dans le fichier HTML du point d' index. N'oubliez pas que c'est ici que tout notre code sera rendu. J'ai configuré l' élément racine pour qu'il s'affiche sous forme de grille de 12 colonnes et 12 lignes. Vers le bas, vers le bas, vous trouverez le chronométrage de la barre de défilement de notre application Web 5. Comprendre la portée des CSS dans ReactJs: Avant de poursuivre la construction de ce projet, nous devons parler du concept très important de React GS. scoping GSS, qui donne chaque composant son propre terrain de jeu de style privé Il s'agit d'un mécanisme qui garantit que les styles que vous définissez pour un composant veulent et affectent intentionnellement un autre composant. Lorsque vous écrivez du CSS pour un composant spécifique, ces vignettes sont limitées aux limites de ce composant Cela signifie que les vignettes que vous appliquez à une classe dans le fichier CSS du composant ne s'appliqueront qu' aux éléments de la sortie rendue par ce composant. Nous atteignons cette portée en utilisant une technique appelée modules CSS ou CSS dans les bibliothèques GS Dans notre cas, nous travaillons avec des modules CSS. Tous ces fichiers CSS sont appelés modules CSS. Lorsque vous importez le fichier CSS dans un composant, les noms de classe contenus dans ce fichier CSS sont transformés de manière à devenir uniques à ce composant. Cela empêche les classes de noms de classes et garantit que votre style ne s'immiscera pas dans d'autres parties de votre application Imaginez que vous disposiez de pièces séparées pour différentes activités dans votre maison. Chaque chambre possède son propre ensemble de meubles et de décorations. De même, son composant React possède son propre ensemble de styles qui n'interfèrent pas avec les styles des autres composants. Cette approche rend votre base de code plus modulaire, plus facile à gérer et plus sujette aux conflits de style Nous pouvons styliser vos composants en sachant que leurs styles sont isolés et qu'ils n'auront aucun impact accidentel sur d'autres parties de votre application. Désormais, lorsque vous réunissez des composants à l'aide d'un index vers un fichier DS, React perpétue la magie du style. Même si vous avez une règle de style générale dans Index to TSS et une règle de style spécifique dans Abduct React sait comment les gérer. Le style le plus spécifique prend généralement les devants. Pensez-y comme si vous aviez un plan directeur pour votre maison. Les détails de chaque pièce n'entrent pas en conflit avec le design général. Alors que vous plongez dans React, n'oubliez pas que chaque composant est un élément de base doté de sa propre personnalité. Il est livré avec son propre fichier JavaScript et son propre fichier CSS. Et devinez quoi, réagissez, assurez-vous que vos styles se comportent bien au sein de son composant, créant ainsi une application Web harmonieuse et organisée. 6. Comprendre les règles CSS dans ReactJs: Voyons plus en détail React, et sa magie stylistique. Mage, tu es en train de décorer une pièce. Vous commencez par un style de base. Mais ensuite, vous ajoutez une touche personnelle. React fonctionne de la même manière avec son CSS. Supposons que vous ayez une règle dans l'index dos SS qui met la marge du corps à zéro. Mais attendez. Il existe également une règle dans abdosi SS qui fixe la marge corporelle à trois Qui gagne maintenant ? C'est comme une compétition amicale entre les deux. Dans cette démonstration, React suit certaines règles. Si deux règles ont le même pouvoir, on parle de spécificité. La règle qui vient plus tard gagne. C'est comme décider qui aura la dernière part de pizza. Si le point d'index CSS crie, marge zéro, et qu'Abdo CSS dit calmement, marge trois, c'est cette dernière qui est mise en avant React s'assure que les détails de son composant CSS ont la priorité sur les styles globaux vous créez votre application React, gardez à l'esprit que son composant apporte ses propres règles de style et que React garde le cap en décidant quelles règles doivent prévaloir en cas de conflit. Mais pour une expérience de développement fluide, vous devez éviter d'ajouter des styles aux éléments HTML directement à l'aide d'un sélecteur d'éléments, mais plutôt utiliser des classes 7. Écrire du code JSX pour l'application de piste et appliquer des classes CSS: Abdu TS, remplaçons ce div par un autre. Déplacez-vous également au milieu du nouveau div, puis renvoyez une nouvelle ligne. Ce nouveau div servira conteneur principal pour notre application de traçage. Nous devons lui appliquer une classe CSS spécifique à partir du fichier CSS Abdo appelé conteneur de traceur de tâches Copiez le nom de la classe et, dans la balise d'ouverture du div à l'intérieur du composant Abdo gs, appliquez la classe CSS à l'aide de l'attribut class name En HTML normal, cet attribut est simplement nommé class. Mais dans Ragas, c'est le nom de la classe, et n'oubliez pas d'utiliser l'étui Camel Après le signe égal, deux fois à l'intérieur de la classe de conteneur Task Tracker. Cela revient à écrire du HTML normal, mais faites attention au nom de l' attribut et utilisez toujours le cas Camel pour les attributs tels que le nom de classe Si vous l'enregistrez, assurez-vous de démarrer l'application en exécutant NPM start dans le terminal Ouvrez ensuite le navigateur et vous verrez un joli contenant bleu au milieu de la page. Ce conteneur contiendra l'application de suivi ainsi que ses principales fonctionnalités, et vous remarquerez également la barre de défilement de style sur la droite. Veuillez noter que j'ai légèrement augmenté la taille de l'élément conteneur à l'écran à l'aide de l'outil de zoom chromé. Maintenant, pour revenir au code, nous insérons un élément de tâche dans ce conteneur. Ajoutez le code GSS suivant dans ce div. Le premier div est un conteneur d'éléments de suivi de tâches, et le div interne est l'élément de suivi de tâches réel. Cela affichera la tâche 1 dans le conteneur bleu. Au fur et à mesure que nous progressons dans le projet, vous aurez une liste d'éléments de tâche tels que la tâche 1 suivie de la tâche 2. Cependant, nous voulons écrire manuellement chaque élément. Sinon, nous utiliserons tender A, steml, Javascript et CSS. Au lieu de cela, nous utiliserons React pour afficher dynamiquement la liste pour nous. Nous expliquerons comment procéder dans les prochaines leçons. Concentrons-nous maintenant sur la mise en forme de la structure principale de notre outil de suivi des tâches a. terminer, chaque fois que nous enregistrons le fichier de l'application, point d' index S s'exécute à nouveau, Pour terminer, chaque fois que nous enregistrons le fichier de l'application, le point d' index S s'exécute à nouveau, provoquant le rendu du composant de l'application. Le résultat final sera affiché dans l'élément racine du fichier HTML à points d' index. Ce fichier sera servi au client lorsqu'il accèdera à notre serveur Web, qui dans notre cas est l'hôte local 3 000. 8. Maîtriser la structure et les commentaires JSX pour des composants clairs et organisés: L'application de suivi des tâches nécessite désormais un formulaire avec un champ de saisie. Ce formulaire nous permettra d'ajouter dynamiquement des éléments de tâches à la liste des tâches à l'aide de Reacts. rester dans le composant de l'application incorporera les entrées provenant du conteneur de suivi des tâches. Pour ce faire, ajoutez un nouveau DF et attribuez à son nom de classe un conteneur de tâches. À l'intérieur du PDF, placez le champ de saisie dans un bouton pour ajouter de nouveaux éléments à la liste. Cependant, je préfère séparer le formulaire de saisie proprement dit du conteneur de suivi des tâches et garder le conteneur dédié uniquement à la liste des éléments. Pour ce faire, je vais faire cette plongée et le positionner au-dessus du conteneur comme suit. Désormais, lorsqu'un problème survient dans un composant React, il est essentiel de s'assurer que tous les éléments GSX sont inclus dans un seul élément wrapper. Cette pratique permet à React maintenir une structure organisée. Pensez-y comme si vous faisiez vos valises pour un voyage. Vous ne voudriez pas transporter de nombreux objets en vrac. Vous placeriez le tout dans un sac ou une valise pour les garder ensemble. De même, dans le domaine de la réaction, nous appliquons un concept similaire. Vous pouvez envelopper votre code GSS dans un élément HTML tel qu'un div ou une section Ou même un tag vide comme celui-ci. Cet élément d'emballage n'a pas besoin de faire grand-chose. Son objectif est de répondre aux exigences de réaction. Par exemple, si votre composant inclut plusieurs éléments tels que des en-têtes, des paragraphes et des boutons, et qu'il les tous dans un seul élément t ou section Cela respecte la directive sur un élément d' emballage, qui permet à React de comprendre efficacement la structure de vos composants Considérez-le comme offrant à React un conteneur pour héberger vos éléments GSX, lui permettant de comprendre l'arrangement Supposons maintenant que nous souhaitions insérer des commentaires pour clarifier le but de son développement. Lorsque vous manipulez avec GSX, vous remarquerez une technique intéressante La double barre oblique normale pour les communs sur une seule ligne ou sur plusieurs lignes ne fonctionnera pas Nous utilisons plutôt une méthode à levier, qui consiste à placer votre commentaire entre deux accolades et à utiliser la syntaxe des commentaires multilignes Fait remarquable, ces bretelles peuvent également contenir du code JavaScript, indiquant ainsi l'ajout de contenu dynamique dans votre application Par contenu dynamique, j'entends la modification du code GSX en fonction conditions spécifiques sans recharger l'application Nous verrons comment y parvenir dans les prochaines leçons Dans cette section, voyez un commentaire à transmettre pour indiquer que le plongeon ci-dessous est une tâche. Copiez ce commentaire et collez-le au-dessus du conteneur de tâches, modifiez le nom en conteneur de tâches. Enfin, ajoutez un autre commentaire au conteneur d'éléments de tâches, nommez-le élément de tâches. De cette façon, la révision de notre code permettra comprendre la structure et les objectifs de l'application. N'hésitez pas à suivre ces ajustements pour améliorer la clarté de votre structure de code. Si vous avez des questions ou avez tous besoin d'une assistance supplémentaire, n'hésitez pas à les demander. 9. Composer des éléments d'interface utilisateur: Continuons à développer notre formulaire de tâches. Pour commencer, ajoutez un élément d'entrée avec une balise à fermeture automatique. Définissez l'attribut type sur du texte, fournissez un espace réservé indiquant une tâche et attribuez l'attribut de nom de classe Veillez à ne pas utiliser de taxes dans les noms d'attributs, car attributs reac gs n' incluent pas les taxes ou les sous-scores Le nom de classe de l' élément d'entrée sera une entrée de tâche. Sous le champ de saisie, nous ajouterons une annonce intitulée Patton avec le nom de classe a task Bt N. Abréviation de button Après l'avoir enregistré et vérifié que votre application est en cours d'exécution, ouvrez le navigateur. Vous verrez le formulaire, mais sans aucun style. Mais ne vous inquiétez pas, nous allons régler ce problème immédiatement. J'aimerais aborder un point important. Dans le monde de React, l'organisation est essentielle. Pensez-y comme à la construction d'un puzzle complexe. Sa pièce a besoin de son emplacement conçu pour créer une image complète. De même, dans React, nous décomposons notre code en unités plus petites appelées composants. Ces composants sont similaires à des sections distinctes de votre application, telles qu'un en-tête, une barre latérale ou un pied En organisant notre code de cette façon, nous établissons une structure facile à comprendre, gérer et même à utiliser dans différentes parties de notre application N'oubliez donc pas que dans React, divisez votre code en composants et regardez votre application s' assembler à merveille. Dans le code coréen, nous pouvons séparer le formulaire de tâche du reste et le transformer en un composant de réaction autonome. Commencez par créer une nouvelle porte pliante dans le répertoire SRC, en la nommant components La convention consiste à utiliser les composants du nom tels qu'ils sont descriptifs, mais n'hésitez pas à choisir un autre nom si vous préférez. À l'intérieur des composants, pliez la porte, créez une tâche de nom de fichier créée pour GSX Notez que vous pouvez utiliser les extensions GSX ou GS. Mais j'utilise GSX ici pour indiquer clairement les utilisations de la syntaxe GSX Lors de la création d'un composant React, il est essentiel d'importer la bibliothèque React au début du fichier du composant. Même si vous n' utilisez pas directement la réaction de chaque composant, cela est nécessaire car GSX est transpilé en code Java scrat avec des références Maintenant, déclarez la fonction component task f. La meilleure pratique consiste à commencer les noms des composants par une lettre apocase Cette pratique distingue les composants personnalisés de la création d' éléments HTML et améliore la lisibilité du code Définissez la fonction à l' aide de la syntaxe des flèches. Cela représente un composant fonctionnel, une manière plus accessible de créer des composants par rapport à l'ancienne approche basée sur les classes À présent, exportez le composant fonctionnel pour le rendre accessible pour une utilisation dans d'autres composants et fichiers. Ce composant renverra le code GSX du formulaire de tâche que nous avons initialement écrit dans le composant Abdo GS. Et c'est tout. Enregistrez maintenant tout et utilisez le composant de formulaire de tâches dans le composant d'application initialement importé depuis le dossier des composants. Sélection du fichier de formulaire de tâches. Incorporez ensuite le composant dans le code GSX comme n'importe quel autre élément avec la balise à fermeture automatique En enregistrant le fichier Abdo GS, vous remarquerez que rien ne change dans le navigateur Cela indique que nous avons correctement encapsulé le code GSX du formulaire de tâche dans un composant autonome Appliquons maintenant le siling au composant du formulaire de tâches. Créez un fichier CSS nommé task form point CSS, que vous trouverez dans la section des ressources vidéo. Téléchargez-le et incluez le code CSS de ce fichier ici. Dans le CSS du formulaire de tâches, nous définissons un conteneur de tâches avec la couleur de fond bleu et des requêtes multimédia pour plus de réactivité. Pour garantir que ces vignettes affectent le code GSS dans le composant du formulaire de tâches Nous devons y porter le fichier CSS. Maintenant, il est recommandé de faire ce port le premier élément du fichier. Comme nous nommons le fichier CSS la même manière que le composant du formulaire de tâche, n' oubliez pas d'inclure l'extension CSS point, afin qu'AGS sache quel fichier déporter Une fois enregistré, le formulaire de tâche apparaîtra magnifiquement dans le navigateur. Passons maintenant à la création de l'élément de tâche en tant que composant à part entière. Créez un nouveau fichier appelé task item point CSX. Comme toujours, commencez par une lettre ocase pour le nom du fichier. Dans ce fichier, commencez par importer le package React depuis React, puis déclarez un élément de tâche portant le nom d'une fonction en utilisant la syntaxe des flèches. N'oubliez pas d'exporter la fonction en bas de page, soit en tant qu'exportation par défaut à soit en tant qu'exportation par défaut l'aide du mot clé par défaut, soit en tant qu' objet contenant le composant de l'élément de tâche en tant que propriété. Dans ce cas, lorsque nous importons un composant qui a été exporté en tant qu'objet, nous devons utiliser la syntaxe de déstructuration de l'objet Ensuite, copiez le code GSX de l'élément de tâche à partir du composant Abdo GS et renvoyez-le sous forme de code GSX pour le composant de l'élément de tâche Comme chaque composant doit avoir son propre module CSS, créez un nouveau fichier nommé task item point CSS. Dans le fichier CSS, collez le code de la section des ressources de cette vidéo. Insérez ensuite le fichier CSS à points de l'élément de tâche dans le composant. En haut du fichier ABDogs, remplacez le code GSX existant par le l'élément de tâche Vous pouvez utiliser l'assistance des codes VS pour l'importer ou ajouter le port manuellement Enfin, faites-en un composant à fermeture automatique et enregistrez le fichier ABDogs Dans le navigateur, vous verrez l'élément de tâche fond blanc et un effet de survol qui transforme la couleur d'arrière-plan en gris clair En utilisant le concept de composants dans IGS, vous améliorerez le processus de développement et créerez un projet plus organisé et plus puissant. Par exemple, nous avons besoin d'un bouton de suppression, d' un élément de bouton dont le texte est l'abréviation del pour supprimer et du nom de classe de l'élément Del du Task Tracker. Après l'avoir enregistré, le bas apparaîtra avec un arrière-plan. Lorsque vous augmentez le composant de l'élément de tâche, il sera rendu à nouveau, ce qui entraînera également le nouveau rendu du composant. Le résultat final sera affiché dans l'élément racine du fichier HTML à points d'index du dossier public. 10. Premiers pas avec la gestion d'états : explorer le crochet useState dans React: Avant de créer la fonctionnalité de suppression des éléments de tâche, nous devons gérer la création des éléments de tâche à l'aide du formulaire de tâche. Cela implique de transmettre le contenu de la tâche depuis le champ de saisie et l' ajouter à l'élément de la liste des tâches en appuyant sur le bouton Ajouter, le faisant apparaître dynamiquement dans la liste. Pour implémenter cette fonctionnalité, nous allons développer une fonction dans le composant du formulaire de tâches. N'oubliez pas que dans React GS, un composant est essentiellement une fonction dans laquelle nous pouvons intégrer la logique de l'application avant l'instruction return Cette logique peut impliquer de récupérer des données depuis une API ou d'effectuer certaines tâches, après quoi nous renvoyons le code GSX Nommons la fonction un élément de tâche et utilisons la syntaxe de la fonction flèche. Dans la fonction, nous devons extraire la valeur d'entrée, représentant le contenu de la tâche, et la stocker dans une variable qui peut être partagée dans l' ensemble de l'application. Dans React pour suivre et indiquer le dernier état du champ de saisie, nous utilisons un hook de réaction. Les hooks sont des fonctions fournies par React qui vous permettent d' interagir avec divers aspects de l'état et du cycle de vie des composants. Considérez-les comme un moyen de dire à React, je veux faire quelque chose de spécifique lorsque cette partie de mon composant change. Par exemple, si vous souhaitez suivre les données d'entrée qui peuvent changer au fil du temps, vous devez utiliser le crochet à état U. C'est comme placer un marqueur sur une pièce de puzzle qui bouge. Chaque fois que cet élément change, React vous demande de mettre à jour la vue Importez le hook use state depuis le package React, et maintenant ce hook renvoie un tableau avec deux éléments. Le premier élément représente l'état le plus récent des données suivies. Dans notre cas, la valeur d'entrée. Le deuxième élément est une fonction utilisée pour mettre à jour l'état des données. Nous l'appelons valeur d'entrée définie, et elle doit toujours commencer par set. Par exemple, si vous effectuez le suivi d'une variable de nom d'utilisateur, vous devez nommer cette fonction set username. Pour mettre à jour la valeur d' entrée chaque fois que la valeur du champ de saisie change, utilisez l'attribut change. Réglez-le comme une extrémité ouverte fermant C Brass pour écrire du code gescpt dans le code GSS Cette fonction prend un argument d'événement, que nous avons utilisé pour mettre à jour l'état de la valeur d' entrée à l'aide de la fonction de définition de la valeur d'entrée. Renommez l'argument en événement pour plus de clarté. À partir de l'événement, accédez à la propriété cible qui contient la valeur d'entrée. L'attribut change met à jour la valeur d'entrée chaque fois qu'un caractère est ajouté au champ de saisie. Lorsque la valeur d'entrée définie est appelée, le composant du formulaire de tâche s'affiche à nouveau. Cela montre pourquoi le crochet U State est précieux. Il déclenche le nouveau rendu des composants chaque fois que l'état change. Ensuite, nous exécuterons la fonction d'élément de tâche pour enregistrer la valeur d'entrée et l' ajouter à la liste des éléments. Pour l'instant, la console enregistrera la valeur d'entrée. Cette fonction s'exécute lorsque vous cliquez sur le bouton d'annonce. Nous devons écouter l'événement de clic à l'aide de l'attribut on click. Placez le nom de la fonction entre accolades et ne l'appelez pas ici et ne l'appelez pas Fournissez plutôt une référence au nom de la fonction. Lorsque vous cliquez sur le bas, la fonction est appelée Vous pouvez utiliser la référence directe ou définir une fonction de flèche pour appeler la fonction et le côté de l'élément de tâche. Quelle que soit l'approche, le concept reste le même. Pour un code plus propre, utilisez la référence directe, comme suit. Après avoir enregistré les modifications, ouvrez le navigateur, lancez la fenêtre de l'inspecteur puis accédez à l'onglet de la console Organisons l' onglet de la console pour une meilleure visibilité. Maintenant, dans l'application, tâche de saisie du formulaire et cliquez sur le modèle at. Bien que rien ne se passe dans la liste des éléments, nous verrons la valeur d'entrée imprimée dans la console. Cela se produit parce qu' un élément de tâche est exécuté chaque fois que l'on clique sur l' apuem 11. Comprendre la communication avec les composants : maîtriser l'utilisation des accessoires dans React: Nous devons maintenant enregistrer chaque nouvel élément de tâche dans un tableau dans un autre état d'utilisation. Nous allons définir cet état d'utilisation dans le composant de l'application car nous devons utiliser le tableau d'éléments pour afficher dynamiquement la liste des éléments dans le navigateur. Tout d'abord. Ajoutons l'état d'utilisation ici et appelons-le. Nous devons également importer le package React et utiliser la syntaxe de déstructuration d' objets pour importer le hook d'état Ue depuis React Cet État américain renverra un tableau. Le premier élément de ce tableau représente le tableau d'éléments. Nous pouvons les nommer des éléments de tâche. La seconde est la fonction de réglage. Sera responsable de la mise à jour du tableau d'éléments. Maintenant, le plus délicat est que nous devons appeler les éléments de tâche définis dans le formulaire de tâche chaque fois que la fonction d'élément de tâche est exécutée et enregistrer l'élément de tâche nouvellement créé dans le tableau d'éléments. Mais comment allons-nous accéder à la fonction de définition des éléments de tâche alors que nous l'avons déjà définie dans le composant de l'application ? Encore une fois, React propose une solution époustouflante. Nous pouvons utiliser quelque chose dans React appelé props, qui est simplement un argument de fonction C'est ainsi qu'une fonction peut normalement accéder à une autre fonction ou variable en la passant en argument. Les arguments des fonctions ne sont pas nouveaux pour nous, sauf si vous ne connaissez pas le script Java. Ce qui est nouveau pour nous, c'est la façon dont React transmet les accessoires à la fonction du composant Si vous souhaitez transmettre les éléments de tâches définis au composant de formulaire de tâches, nous devons ajouter un attribut, le nommer éléments de tâches et le définir même manière que la fonction d' ensemble d'éléments de tâche réelle. De cette façon, nous y aurons accès dans le composant du formulaire de tâche via l'argument de l' objet props N'oubliez pas que sa propriété à l'intérieur de l'objet accessoire s'appelle un accessoire et qu'il ne s'agit que d'une référence à sa définition réelle Lorsque nous appelons la fonction définir les éléments de tâche, nous appelons en fait les éléments de tâche définis depuis le composant de l'application. Cela n'a rien à voir avec React. C'est ainsi que fonctionne Javascript. Nous n'allons pas enregistrer la valeur d'entrée, qui est un simple texte envoyé aux éléments de tâche, car nous voulons que les éléments de tâche soient un tableau. Nous allons le faire en insérant cette valeur d'entrée en tant que nouvel élément dans le tableau des éléments de tâche. Mais d'abord, nous devons avoir accès au tableau des éléments de tâche. Nous allons le faire passer pour un accessoire. Ajoutez un nouveau nom d'attribut aux éléments de tâche. D'ailleurs, vous pouvez nommer l'accessoire comme vous le souhaitez, mais assurez-vous de le nommer de manière logique et de le définir la bonne variable ou fonction Maintenant, dans le composant du formulaire de tâche, nous allons utiliser l'objet prop pour accéder au tableau des éléments de tâche Ensuite, nous pouvons utiliser la méthode JavaScript appelée push pour ajouter l' élément nouvellement créé au tableau. Je préfère utiliser une autre approche, qui consiste à transmettre un tableau, puis à ajouter trois points sans espaces, suivis de l'accessoire de tableau des éléments de tâche C'est ce qu'on appelle l'opérateur de propagation, qui répartit tous les éléments du tableau à l'intérieur du nouveau tableau. Ensuite, nous pouvons ajouter un nouvel élément en ajoutant une virgule et en transmettant l'état de la valeur d'entrée. Lorsque nous cliquons sur ce bouton, cette fonction est exécutée, qui entraîne la mise à jour des éléments de tâche définis avec un nouveau tableau contenant tous les éléments de tâche ainsi que celui nouvellement créé. Lorsque l'application démarre pour la première fois, le tableau des éléments de tâche sera nul. En Javascript, nous ne pouvons pas diffuser ou effectuer d'opérations de tableau sur une valeur nulle. Nous pouvons éviter ce scénario en définissant la valeur initiale de l' état sur un tableau vide. Le composant p s'affiche à nouveau chaque fois l'état défini des éléments de tâche est appelé depuis le composant du formulaire de tâche. peux observer cela en enregistrant par console le tableau des éléments de tâche dans le composant de l'application, puis en enregistrant et en ouvrant le navigateur. Permettez-moi d'effacer la console et le formulaire des tâches à la première tâche et d'appuyer sur le bouton en bas. Vous verrez que le tableau des éléments de tâche est imprimé sur la console. Lorsque vous enregistrez un état dans un composant React sur la console, il peut se déclencher deux fois de suite lorsque l'état passe au mécanisme de correction Reacts Il peut regrouper plusieurs mises à jour d'état, ce qui entraîne le déclenchement du journal pour ses chemins. Il s'agit d'un comportement normal pour optimiser le rendu et les mises à jour. Il est important de noter que le nombre exact de journaux n'est pas garanti et peut varier en fonction des processus internes de Reacts. 12. Rendu dynamique : créer des interfaces réactives dans React: C'est bon. Ne nous contentons pas d' imprimer le tableau des éléments de tâche sur la console. Nous voulons plutôt prendre chaque élément du tableau, l' afficher dans la piste des tâches ou le conteneur, et mettre à jour simultanément la liste des éléments du navigateur pour qu'elle et mettre à jour simultanément la liste des éléments du navigateur corresponde à l'état du tableau des éléments de tâche. Chaque fois que l'état change, la liste et le code GSS doivent également être mis à jour en conséquence Pour ce faire, nous enveloppons le composant de l'élément de tâche dans des bretelles à double boucle Cela parce que nous allons utiliser le code de script Dava entre ces accolades Nous utiliserons la méthode map, une fonction Hand Gray en JavaScript. Avec la carte, nous pouvons parcourir le tableau des éléments des tâches et interagir avec chaque élément individuellement. Dans la fonction de rappel des cartes, nous avons accès à chaque élément de tâche Cela nous permet de créer une instance de composant d'élément de tâche avec des données spécifiques. Cette stratégie de rendu dynamique nous fournit un tas de composants. Cela représente une tâche unique du tableau. La fonction mathématique produit un tableau d'éléments g Sx, chacun correspondant à un élément du tableau de données d'origine. Si nous l'enregistrons et que nous jetons un coup d'œil au navigateur, nous verrons que deux éléments de tâche ont été affichés dans la liste C'est parce que notre gamme ne contient que deux éléments. Maintenant, si nous ajoutons un autre élément via le formulaire de tâches, un nouvel élément apparaîtra dynamiquement en bas de la liste. Cependant, le contenu de ces éléments n'est pas encore dynamique. Pour les rendre dynamiques, nous allons utiliser des accessoires et transmettre l'élément de tâche au composant de tâche Nous allons l'échanger avec l'accessoire de tâche. Si je l'écris comme ça, il apparaîtra sous forme de texte brut. Mais si je l'enferme dans une boîte en laiton à double relation, elle sera traitée comme une variable javascript et remplacée par sa valeur réelle Chaque fois qu'un nouvel élément est créé, il rejoint la liste avec sa valeur distincte. Tout cela grâce à la fonction map, qui génère un ensemble d' éléments constitutifs des tâches. Chaque fois que le tableau des éléments de tâche change, le composant est réexécuté Déclenchement de la fonction de carte pour réexécuter et générer le tableau d'éléments. Chaque élément de la liste est appelé enfant. Maintenant, si nous effaçons la liste des tâches en rechargeant la page et en essayant d'ajouter un nouvel élément, vous remarquerez peut-être qu'un ou dans la console vous indique que chaque enfant analyste a besoin d'un accessoire clé unique Voici comment nous pouvons y remédier. Nous pouvons ajouter l'accessoire clé au composant de l'élément de tâche en tant qu'attribut Il doit s'agir d'une clé unique, qu'il s'agisse d'un chiffre ou d'une chaîne. Peut utiliser le paramètre index de la fonction de carte, qui donnera à chaque élément une clé différente des autres. Dans React, lorsque vous affichez dynamiquement une liste de composants à l'aide de la fonction map ou de toute autre méthode, chaque composant a besoin d'un tificateur unique C'est là qu'intervient l'accessoire clé. L'accessoire clé est un attribut spécial que vous associez à chaque composant rendu dynamique Il s'agit d'aider React à distinguer chaque composant de manière unique et efficace. Cela est particulièrement utile lorsque des modifications sont apportées à la liste, telles que l'ajout, la suppression ou la réorganisation d'éléments Lorsque vous modifiez la liste des éléments, React s'appuie sur l'accessoire clé pour déterminer quels composants ont changé, doivent être ajoutés ou doivent être supprimés Cette approche intelligente réduit les mises à jour inutiles et rend l'ensemble du processus plus fluide et plus rapide. 13. Gérer les tâches et les interactions dynamiques dans l'application Web React: Après avoir rendu les éléments dans la liste des conteneurs du suivi des tâches, il est temps de travailler sur le composant des éléments de tâche et de rendre possible la suppression d'un élément de la liste à l'aide de ce bouton. Maintenant, ce bouton supprimera un élément du tableau des éléments de tâche, puisque nous utilisons ce tableau pour afficher imbriques des éléments de tâche dans le composant de l'application Nous devons définir la fonction qui gérera la suppression de l' élément dans le composant de l'application. À l'intérieur, nommez la fonction, supprimez l'élément par ID. Utilisez une fonction out of, qui prendra un argument ID. À l'intérieur, nous mettrons à jour le tableau des éléments de tâche, état en utilisant la méthode set task items. Préparons d'abord la nouvelle version du tableau. Déclarons une constante, nommons les nouveaux éléments de tâche et définissons-la de la même manière que le tableau des éléments de tâche. Nous utiliserons la méthode du filtre pour parcourir les éléments du tableau et ne renvoyer que les éléments dont l' identifiant n'est pas égal à l'identifiant de l' élément que nous voulons supprimer La fonction de filtre renverra un nouveau tableau qui ne contient pas l'élément de suppression. Nous transmettrons le nouveau tableau d'éléments de tâche comme nouvel état du tableau d'éléments de tâche. Nous devons maintenant exécuter la fonction de suppression lorsque nous cliquons sur ce bouton de suppression dans le composant de l'élément de tâche. Nous passerons la fonction de suppression de l'élément par D en tant qu'accessoire. Ensuite, ici, nous allons écouter l'événement de clic sur ce bouton et exécuter l' élément de suppression à l'aide d'une fonction D. Maintenant, au lieu de chaque fois que nous voulons accéder à un accessoire spécifique, nous devons écrire des accessoires point Je préfère utiliser la déstructuration d' objets pour extraire les accessoires de l'objet accessoire Ce faisant, il devient clair ce que ce composant acceptera comme accessoires, et il est ainsi mieux organisé Maintenant, si nous l'enregistrons et essayons de supprimer un article, rien ne se passera car nous n'avons pas transmis l'identifiant de l'article à la fonction de suppression élément par identifiant. Comme vous le savez, nous ne pouvons pas appeler la fonction directement de cette façon car nous devons transmettre une référence à la fonction sans la coniser Sinon, il sera appelé à chaque fois que le composant sera rendu. Il existe deux manières de transmettre l'identifiant. Tout d'abord, nous pouvons utiliser la fonction band, qui accepte ce contexte. Maintenant que ce mot clé dans le script Java fait référence à l'objet auquel appartient la fonction ou la méthode correspondante Il représente le contexte dans lequel la fonction est appelée et vous permet d'accéder aux propriétés et aux méthodes de cet objet. Le deuxième argument sera l'argument réel de la fonction, qui dans notre cas n'est que l'élément de tâche. C'est une façon très compliquée de faire quelque chose de simple. Je préfère ajouter une fonction RO comme celle-ci et comme nous l'avons fait auparavant, et appeler la fonction de suppression d'élément par ID et transmettre l'ID de tâche. À l'heure actuelle, nous n' avons pas d'identifiant dans l' accessoire de tâche, car nous enregistrons son élément de tâche sous forme de texte brut Nous devons le mettre à jour avant continuer en le remplaçant par un objet contenant une propriété ID définie sur une valeur dynamique. Cette valeur dynamique sera une opération simple, qui correspond à la longueur du tableau des éléments de tâche plus un. Ensuite, nous pouvons nommer le deuxième texte de propriété et définir sa valeur sur la valeur d'entrée. De cette façon, nous pouvons supprimer éléments de tâche du tableau à l'aide de leurs identifiants. Le contenu de l'élément de tâche se trouve désormais dans la propriété de texte. Assurez-vous de le mettre à jour . Maintenant, enregistrons ceci et dans le navigateur. Nous devons recharger car nous avons mis à jour la forme des éléments de tâche Ajoutons maintenant la première tâche, puis la tâche deux. Avant de supprimer les éléments, revenons au code contenu dans le composant de l'application et enregistrons l'identifiant de l'élément sur la console , juste pour avoir un aperçu de plus près de ce qui se passe dans les coulisses. Supprimons la tâche numéro un. Vous remarquerez que le numéro un a été imprimé sur la console. Si nous supprimons la tâche numéro deux, le numéro deux sera imprimé dans la console. Cela vous montre comment Ya peut être flexible et dynamique, ce qui permet aux développeurs de créer des applications Web passionnantes et interactives. Maintenant, dans le formulaire de tâche, extrayons les accessoires de l'argument props en déstructurant l' objet et mettons à jour Maintenant, je voudrais souligner quelque chose d'important ici. Si nous essayons d'ajouter un élément à la tâche, cela fonctionnera correctement. Mais si nous laissons le champ vide « reste annonce », l'article sera ajouté à la liste des articles. Nous devons empêcher que cela ne se produise. Pour ce faire, vous devez ajouter un bloc à cocher dans la fonction des éléments de tâche des annonces avant de mettre à jour l'état de l'enquête sur les éléments de tâche. Si la valeur d'entrée est égale à une chaîne vide, cela bloquera simplement l'exécution du code en utilisant l' instruction return comme suit. Maintenant, cela fonctionnera correctement lorsque nous passerons une chaîne vide. Mais lorsque nous ajoutons l'espace en tant que valeur et que nous appuyons sur le bouton at, l'élément sera créé Nous pouvons également simplement empêcher cela en utilisant la fonction de découpage, qui supprime tous les espaces d'une chaîne. Si la valeur d'entrée ne contient qu'un espace, la valeur de découpage renverra une chaîne vide. Cela remplira cette condition de l'instruction if, ce qui bloquera l'exécution du code et empêchera l'exécution du code et la création d'éléments de tâche vides. Désormais, dans la plupart des applications Web modernes comme Google, par exemple, nous n'avons pas besoin de cliquer sur le bouton Rechercher pour exécuter la recherche. Nous pouvons simplement appuyer sur Entrée, et cela fera le même travail. Dans notre application, nous pouvons faire la même chose en écoutant l'événement du mot clé. Lorsque la touche Entrée est enfoncée, nous exécutons la fonction d'élément de tâche A. Nous pouvons écouter cet événement sur l'élément conteneur en utilisant l'attribut on key down. Vous pouvez écouter l' événement sur n'importe quel élément GSX, mais il est toujours préférable de le placer sur l'élément parent Cet attribut nécessite un rappel qui acceptera un événement Nous pouvons utiliser cet événement pour vérifier le nom de la touche sur laquelle l'utilisateur a appuyé. S'il est égal à dix en utilisant l'opérateur final javascypogical, nous pouvons exécuter Maintenant, disons ceci et testons-le dans le navigateur. À la tâche numéro trois, appuyez sur Entrée sur votre clavier. Voilà. C'est tellement plus facile comme ça. Nous voulons maintenant ajouter une autre amélioration à notre composant de formulaire de tâches. Je souhaite effacer le champ de saisie chaque fois que nous ajoutons un nouvel élément en appuyant sur le bouton at ou en appuyant sur le bouton Entrée du clavier. Celui-ci est également très facile. Il suffit de venir ici après avoir mis à jour le tableau des éléments de tâche, puis de mettre à jour la valeur d'entrée à l'aide de la fonction set input value et de la définir sur une chaîne vide. Si nous le testons dans le navigateur, cela ne fonctionnera pas. Mais si nous enregistrons par contre l'état de la valeur de vente ici et que dans le navigateur, nous commençons à taper, vous verrez l'état de la valeur de vente changer à chaque fois que nous taperons quelque chose. Faites attention lorsque j'appuie sur la touche erkey, nous verrons que le dernier état de la valeur d'entrée est vide. Cela fonctionne réellement, mais cela n'a aucun effet sur le champ de saisie car nous n'avons pas connecté l'état de la valeur d'entrée à la valeur réelle de l'entrée. Pour ce faire, nous devons définir la valeur d'attribut de l'élément d'entrée de manière à ce qu'elle soit égale à l'état de la valeur d'entrée. Maintenant, si nous essayons de créer une nouvelle tâche puis que nous appuyons sur Entrée ou sur le bouton, le champ de saisie sera effacé 14. Créer une case à cocher dynamique avec des indications visuelles dans React: En haut de la suppression d'éléments de tâche. Nous devons créer un bouton qui fonctionne comme une case à cocher pour marquer un élément de tâche spécifique comme terminé. Pour cela, nous allons ajouter un élément span qui servira de bouton. Oui, nous pouvons y parvenir car dans React et dans le script Java en général, nous pouvons écouter l'événement de clic de n'importe quel élément afin de transformer cet élément en bouton fonctionnel. Maintenant, incluons le mot finish. Pour le nom de la classe, utilisez la classe à cocher. En cliquant sur cet élément span, l'état de cet élément de tâche sera défini comme étant vérifié. Pour ce faire, nous utilisons le State Hook. Assurez-vous de le porter en haut de ce fichier. Ensuite, nous nommerons cet état est vérifié, et le deuxième argument sera nommé Sets checked function. Nous allons écouter l' événement de clic sur l'élément span et exécuter une fonction appelée handle check box change. Cette fonction n'existe pas encore, nous devons donc la définir. De plus, nous pouvons mettre à jour l' état use checked pour qu'il soit vrai et définir l'état initial sur force. Dans ce cas, l'utilisateur peut marquer l'élément de tâche comme terminé. Toutefois, s'ils changent d'avis, ils ne peuvent pas mettre à jour l'état de vérification simplifiée. Comme chaque fois que cette fonction s'exécute, elle définit l'état Ease Checked sur true. Nous ne voulons pas que cela se produise. Nous voulons donc que notre bouton terminé fonctionne comme un commutateur, comme une case à cocher normale où vous pouvez cocher ou le cocher en appuyant sur le même bouton Pour ce faire, nous pouvons mettre à jour la valeur de l'état en ajoutant un point d'exclamation et en transmettant la constante Ease Checked Cette opération slosique renverra toujours la valeur opposée à celle de l'État coréen Si elle est vraie, elle deviendra fausse, de sorte que si elle est cochée, elle ne sera plus cochée Si nous essayons de tester le puissant fini maintenant, cela fonctionnera, mais nous ne remarquerons rien visuellement. Remplaçons d'abord finish par k et appliquons-le à l'intérieur d'une plage avec le nom de la classe d'icônes. nom de la classe d'icônes n' aura aucun effet pour le moment, mais ce n'est pas grave, car nous le remplacerons par une véritable icône dans les prochaines leçons. Maintenant, comment ajouter des repères visuels pour représenter l'état de l'élément de case à cocher Eh bien, avec RacGas, nous pouvons obtenir un swing dynamique en utilisant l'attribut style Cet attribut est utilisé pour ajouter une chaîne de caractères en ligne. Placer deux bretelles bouclées et fournir un objet ? Cet objet peut contenir n'importe quelle propriété CSS. Normalement, en HTML, nous attribuons à cet attribut une chaîne de caractères. Cependant, dans reagas, il doit s'agir d'un objet dont la propriété CSS est une propriété de l' Dans notre cas, nous utiliserons la propriété de couleur d'arrière-plan et rendrons sa valeur dynamique en utilisant l'état variable facile à vérifier dans un opérateur ternaire t. Lorsque c'est vrai, nous définirons la couleur d'arrière-plan sur le code couleur suivant, et si c'est faux, nous la définirons sur blanc. Sauvegardez-le et dans le navigateur, cliquez sur le bouton k. Vous remarquerez qu'il changera sa couleur de fond en vert. En cliquant à nouveau, nous allons le remettre en blanc. Vous remarquerez une transition fluide entre les deux couleurs grâce à la propriété de transition de la classe CSS check mark. Cette propriété mettra 0,3 seconde pour passer d'une couleur d' arrière-plan à l'autre. 15. Améliorer la finalité des tâches et la gestion des états dans votre application React: Dans le composant de l'élément de tâche, nous avons créé l'état de vérification simplifiée et nous utilisons uniquement pour mettre à jour la couleur d'arrière-plan de l'élément de case à cocher. Cependant, nous n'avons pas encore développé la fonctionnalité principale, qui consiste à marquer l'élément de tâche comme terminé et à mettre à jour l'état de l'élément de tâche. Pour obtenir cette fonctionnalité, nous devons définir une fonction d' achèvement des tâches dans le composant. Cette fonction prendra deux arguments, identifiant de la tâche, et est complète, un argument d'intimidation. Nous allons transmettre cette fonction en tant qu' accessoire au composant de l' élément de tâche Dans la fonction de modification de la case à cocher handle, nous exécuterons cette fonction de fin de tâche en transmettant l'ID de la tâche Pour l'argument est complet, nous allons utiliser l' état vérifié ese et ajouter un point d' exclamation Maintenant, pour revenir ici, lorsque nous devons mettre à jour un élément de tâche spécifique, nous devons mettre à jour l'ensemble du tableau. Au lieu de mettre à jour le tableau en dehors de la fonction définie des éléments de tâche, comme indiqué ici, nous pouvons procéder différemment. Nous pouvons transmettre un coback fourni par le tableau d'éléments de tâche précédent Ce rappel doit renvoyer le nouvel état, qui dans notre cas est un tableau Ensuite, nous allons parcourir le tableau d'éléments de tâche précédent à l'aide de la fonction map Pour chaque élément de tâche, nous vérifions si son ID correspond à l'argument ID de tâche. Si c'est le cas, nous retournerons un objet et diffuserons les anciennes propriétés de la tâche à l'aide de l'opérateur de propagation, qui fonctionne également pour les objets. Mais assurez-vous simplement de répartir les objets en objets et les tableaux en tableaux Nous ajouterons ensuite une nouvelle propriété appelée completed et lui donnerons la valeur true. Lors de la création initiale de l'élément de tâche, nous devons définir la propriété completed sur force, afin garantir que tous les éléments de tâche commencent par être chargés et terminés. Revenons maintenant ici et ajoutons l'accessoire d'achèvement des tâches au composant de l'élément de tâche En résumé, lorsque nous cliquons sur l'élément de case à cocher, nous déclenchons la fonction de changement de case à cocher, mettant à jour l'état de vérification automatique et en modifiant la couleur d'arrière-plan de la case à cocher Ensuite, la fonction d' achèvement de tâche est appelée avec l'ID de tâche et ses arguments sont complétés. Cette fonction exécute la fonction de définition des éléments de tâche. Mettre à jour l'état des éléments de tâche et marquer l' élément cible comme terminé. D'ailleurs, si l' ID des éléments de tâche ne correspond pas à l'ID des éléments ciblés, il est renvoyé au tableau sans modification. En ce qui concerne la propriété terminée, au lieu de la définir sur true comme ceci, elle doit être définie sur la valeur de l'argument is complete. De cette façon, nous pouvons basculer entre les états coché et non coché en appuyant simplement sur un bouton Journalisons le tableau des éléments des tâches pour mieux comprendre ce qui se passe. Ouvrez maintenant le navigateur, assurez-vous d'abord que le serveur est en cours d'exécution, puis ajoutez une tâche d'élément. Dans la console, vous verrez le tableau des éléments de tâche contenant l'élément de tâche 1 dont la propriété terminée est définie sur falls. Cliquez sur le bouton k pour attribuer à la propriété terminée la valeur true. La présence de deux tableaux imprimés ici est due à la nature des réactions, qui sont parfois restituées plusieurs fois en fonction de l'état du composant S'il s'affiche deux fois, c'est normal, mais plus de deux ou trois fois peut indiquer un problème Maintenant, j'aimerais aborder un problème dans l'application qui pourrait être un point de départ. Lorsque vous ajoutez quelques éléments, supprimez et cochez un élément, en ajoutez un autre sans tâche, puis que vous vérifiez cet élément, puis que vous le vérifiez, puis que vous essayez de supprimer la tâche numéro deux, les deux tâches sont supprimées. Ce comportement étrange est dû au fait que nous ne devons pas transmettre l'accessoire du tableau d'éléments du composant du formulaire de tâches pour l' utiliser dans la fonction d'état des éléments de tâche définie Cette manipulation de l'état entraîne des conséquences imprévues, notamment la suppression simultanée de plusieurs tâches Maintenant, pour y remédier, nous avons besoin d' une approche plus contrôlée de la gestion de l'État. Nous pouvons couper ce code et ajouter un coback à la fonction set state, en utilisant l'argument prev contenant les dernières données d'état Nous allons ensuite retourner et coller le tableau à cet endroit. Au lieu d'utiliser l'accessoire des éléments de tâche, nous utiliserons l'argument Prev Cela garantit que nous travaillons toujours avec l'état le plus récent. Maintenant, essayez-le dans le navigateur. Effacez la console à la tâche 1, à la tâche 2, puis cochez ou cochez des éléments Lorsque vous supprimez un élément spécifique, seul cet élément sera supprimé. 16. Se familiariser avec le crochet useEffect : ajouter des filtres et un style dynamique: Notre application React est en train de prendre sa forme finale. Nous pouvons créer de nouveaux éléments, les marquer comme terminés et les supprimer. Maintenant, je veux ajouter un élément dans le conteneur de l'application Striker et faire en sorte que les tâches coréennes comptent pour l'utilisateur. Cela améliorera l'expérience utilisateur. Dans le composant de l'application et dans le conteneur div du suivi des tâches, nous ajouterons un élément de barre d'informations. abord, ajoutez un di et définissez le nom de la classe dans la barre d'informations du suivi des tâches. À l'intérieur de ce dif, vous ajouterez l'élément span et affichera la longueur des éléments de tâche Maintenant, dans le navigateur, si nous avons un moyen vide, nous n'obtiendrons aucun élément. Chaque fois que nous ajoutons un autre élément, le nombre augmente et il nous indique le nombre d'éléments que nous avons dans la liste. Maintenant, dans la barre d'information, je souhaite avoir des boutons pour filtrer les éléments de tâche en fonction de leur état, afin que nous puissions filtrer les tâches terminées et les afficher seules dans la liste ou filtrer les tâches en attente et les afficher seules dans la liste. À l'intérieur, ajoutons d'abord l'élément span et ajoutons le texte en entier. Cela sera utilisé pour supprimer le filtre et afficher tous les éléments de la liste. Le deuxième élément cliquable sera chargé d'afficher uniquement les tâches terminées, et le dernier concerne les tâches en attente, les tâches qui ne sont pas marquées comme terminées Nous allons maintenant gérer chaque type de filtre en utilisant un état Ue. Nous aurons un état du type de filtre et la fonction de réglage correspondante. Dans la fonction d'état U elle-même, nous allons définir la valeur initiale du type de filtre sur all. Si aucun filtre n'est appliqué, nous effectuerons le rendu de tous les éléments de la tâche. Lorsque nous filtrons les éléments de tâche, nous devons enregistrer le résultat filtré dans un autre état d'utilisation. Sinon, si nous modifions plutôt l'état de l'élément de tâche, les données d'origine seront perdues. Nommez cette nouvelle tâche filtrée par état. Commençons par gérer l'état du type de filtre. Nous allons ajouter un écouteur d' événements onclick à l'élément all, exécuter la fonction de définition du type de filtre et définir l'état sur Ensuite, copiez-le et collez-le sur le bouton terminé, puis changez l' état pour terminer. Procédez de la même manière ici et définissez l' état du type de filtre sur En attente. Lorsque nous mettons à jour le type de filtre en cliquant sur l'un de ces boutons, nous filtrons le tableau des éléments de tâches et enregistrons le résultat dans le tableau des tâches filtrées. Ainsi, au lieu de rendre les éléments de tâche de la manière suivante, nous devons afficher le tableau des tâches filtrées. Et lorsque nous cliquons sur le bouton O, nous mettons à jour le tableau des tâches du filtre avec le tableau des éléments des tâches, qui contient tous les éléments créés. L'état des éléments de tâche fonctionnera comme un espace de stockage. Maintenant, comment allons-nous mettre à jour le tableau de tâches filtré lorsque le type de filtre change ? Eh bien, dans React, nous pouvons utiliser un autre effet d'utilisation, qui est un puissant outil de Reacts pour gérer les tâches supplémentaires qui doivent se produire lorsque quelque chose change dans votre application ? Nous avons une liste de tâches que nous voulons filtrer en fonction de différents critères. Lorsque vous utilisez l'effet d'utilisation, vous pouvez automatiquement mettre à jour cette liste chaque fois que le filtre change. C'est comme avoir tendance à réagir pour garder un œil sur certains changements, puis prendre des mesures spécifiques en réponse. Dans notre cas, nous utilisons l'effet d'utilisation pour surveiller les modifications du type de filtre et mettre à jour l' enquête sur les tâches de filtrage en conséquence. Cela permet à votre application de rester réactive et synchronisée avec les choix des utilisateurs. Désormais, le hook d'effet utilisateur accepte deux arguments. Le premier est un coback qui contiendra tout le code que nous voulons exécuter Le second est le tableau des dépendances, qui ressemble à une liste de surveillance des modifications. Vous y insérez des variables que vous souhaitez surveiller en cas de réaction. Lorsque l'une de ces variables change, le code contenu dans use effect s'exécute à nouveau ou, en d'autres termes, le coback de l'effet utilisateur est exécuté C'est une façon de dire : « Hé, réagis, si ces choses changent, fais-le ». Si vous laissez le tableau vide, l'effet ne s'exécute qu'une seule fois au démarrage du composant. Si vous supprimez complètement le tableau, l'effet s'exécute chaque fois que le composant est mis à jour. Dans notre cas, nous voulons surveiller état du type de filtre et le tableau des éléments de tâche, sorte que chaque fois que nous avons un nouvel élément dans le tableau, nous réexécutions la fonctionnalité de filtre. Maintenant, dans ce rappel, nous allons vérifier si le type de filtre est égal à terminé Ensuite, nous mettrons à jour le tableau des tâches de filtrage en utilisant l'argument précédent et la méthode de filtrage. Ensuite, renvoyez uniquement les éléments dont la propriété terminée est égale à true. Sinon, nous réinitialiserons le tableau de tâches de filtrage sur le tableau d'origine. Cela doit être défini, filtrer les tâches et transmettre le tableau des éléments de tâches, qui contient tous les éléments de tâche. Maintenant, sauvegardons ceci et testons-le depuis le navigateur. Oups, nous avons un ordre, et c'est parce que j'ai défini l'état initial du tableau de tâches de filtrage sur une chaîne, mais il doit s'agir d'un tableau vide. Je le copie depuis cette ligne et je ne l'ai pas mis à jour. Maintenant, sauvegardons et accédons au navigateur. La commande a disparu, et maintenant ajoutons un nouvel élément de tâche. Ajoutez ensuite la deuxième tâche. Marquons la première tâche comme terminée, et lorsque nous cliquons sur le modèle terminé, vous verrez que la liste est filtrée et qu'elle ne conservera que les tâches terminées. Si vous cliquez sur le O Paton, tous les objets seront Eh bien, cela ferait la même chose lorsque vous cliquerez sur le filtre correspondant, car nous ne l'avons toujours pas codé. Ajoutons le code pour filtrer en fonction des tâches. Ajoutez ici une instruction LF. Nous devons vérifier si le type de filtre est égal à en attente. Si tel est le cas, nous mettrons à jour l'état du tableau de tâches de filtrage et ferons la même chose qu'ici. Copiez ce code, collez-le et ne renvoyez que les éléments dont les propriétés complètes sont définies sur false. Mais maintenant, en utilisant le tableau de tâches de filtrage précédent, nous allons filtrer un tableau déjà filtré. Cela entraînera un comportement étrange et le filtre en attente ne fonctionnera pas. En plus de cela, les choses vont commencer à s'effondrer. Ce que nous devons faire ici, c'est filtrer le tableau des éléments de tâche lui-même, car comme je l'ai dit à plusieurs reprises, cet état de tableau contiendra toujours tous les éléments de tâche. Copions le rappel du filtre à partir d'ici et mettons à jour le tableau des tâches du filtre avec le nouveau tableau des éléments de tâches Copiez l'intégralité de ce code, et faisons la même chose dans cette instruction if 2 et changeons simplement la propriété terminée en false. Maintenant, dans le navigateur, assurez-vous de recharger le collage pour tout réinitialiser Ajoutez ensuite la tâche 1, la tâche 2 et la tâche 3. Voyons la première tâche. Si nous filtrons les tâches terminées, nous n'obtiendrons que la tâche numéro un, ce qui signifie qu'elle fonctionne. Si nous cliquons sur En attente, nous obtiendrons les tâches correspondantes. Mais la tâche numéro deux est maintenant cochée. Mais lorsque nous supprimons le filtre en cliquant sur, la coche disparaît. s'agit simplement d'un problème de rendu, ce qui signifie que lorsque nous jouons avec les filtres, le composant de l'élément de tâche n'est pas rendu correctement. Nous pouvons y remédier en accédant au composant de l'élément de tâche et en ajoutant un crochet d'effet d'utilisation. Assurez-vous de l' importer depuis le package I. Ce crochet d'effet d'utilisation surveillera si le point de la tâche est terminé et si les variables sont cochées. Et lorsque l'un d'entre eux changera, nous mettrons à jour l'état d'utilisation vérifié. Enregistrez tout et retournez dans le navigateur. Désormais, si vous basculez entre les filtres terminés et les filtres en attente, vous remarquerez que les composants des éléments de tâche sont correctement affichés. Pour éviter de telles erreurs à l'avenir, assurez-vous simplement d'utiliser le crochet d'effet use si vous avez des éléments GSX dont le rendu est basé sur une condition Maintenant, avant de terminer cette vidéo, je voudrais ajouter quelque chose. Actuellement, lorsque nous passons d'un filtre à l'autre, nous ne pouvons pas connaître le type de filtre actuel en consultant simplement l'interface utilisateur. Ce que je veux faire ici, c'est mettre en évidence le type de filtre actif. Nous pouvons le faire ici en autorisant l' attribut style pour ajouter un style dynamique Nous mettrons à jour la couleur d'arrière-plan en fonction du type de filtre. S'il est égal à terminé, nous utiliserons l'opérateur final et renverrons ce fond gris. Tout cela ne devrait pas être terminé. Copiez cet attribut de style et placez-le dans l'élément de volet suivant, qui représente le filtre terminé et modifiez tout ici par terminé. Ajoutez un autre signe égal ici afin d'en faire une opération logique. Enfin, faisons la même chose pour le modèle de filtre de flexion. Si le type de filtre est égal à la flexion , nous changerons la couleur d'arrière-plan en gris. Si vous l'enregistrez et jetez un œil au navigateur, nous pouvons voir quel type de filtre est activé. 17. Premiers pas avec les icônes React : améliorer votre interface utilisateur: Le composant de l'élément de tâche. Je souhaite remplacer le contenu de l'élément de case à cocher et du bouton de suppression par de belles icônes Dans React GS, nous pouvons bloquer et utiliser un package appelé React Icones. Au lieu de créer ces icônes à partir de zéro et de rechercher des images. Le package React Icones vous offre un large éventail d'icônes à portée de main. Vous pouvez utiliser PM install ou Yarn ad pour bloquer le package React Icones, puis entrer et attendre que l'installation soit terminée. Vous pouvez accéder au site officiel des icônes React à l'aide de l'URL C. Vous y trouverez des instructions sur la façon d'installer le package et de l'utiliser. Sur le côté gauche de cette page, vous verrez une liste de différentes bibliothèques d'icônes, telles que Font Awesome Material Design, etc., tout dans un seul package. Dans cette barre de recherche, vous pouvez rechercher une icône spécifique. Dans notre cas, nous voulons une icône de suppression. Je vais taper Supprimer. Cela me donnera une liste d'icônes de suppression parmi lesquelles choisir. Tu peux choisir qui tu veux. Pour moi, je vais choisir celui-ci. Lorsque vous cliquez dessus, le nom de l'icône sera copié pour vous. Vous pouvez maintenant revenir au projet haut du composant de l' élément de tâche, à droite et sur le tableau, ouvrir deux accolades, puis y coller le nom de l'icône Nous allons importer cette icône depuis le package a icons et depuis le dossier AI. Vous pouvez voir que nous avons beaucoup de dossiers ici, mais vous pouvez savoir dans lequel se trouve votre icône grâce aux deux premières lettres du nom de l'icône. Ensuite, nous avons besoin d'une autre icône pour le bouton de vérification. Je vais chercher un chèque, et je vais choisir ces deux icônes. Dans le projet, je passerai de l'un à l'autre en fonction de l'état vérifié Est. Si l'élément de tâche est coché, je vais afficher l'icône remplie, et s'il n'est pas coché, je vais afficher l'élément de case à cocher vide Revenons au projet et au composant de l' élément de tâche et plaçons les deux icônes dans instructions de port distinctes, comme celle-ci. Commençons maintenant par le bouton de suppression. Supprimez ce texte et ajoutez l'icône de suppression du plan AI, comme pour un composant React. Maintenant, si nous l'enregistrons et que nous l' enregistrons dans le navigateur, nous verrons que l'icône y a été rendue. Mais il a besoin d'un peu de style pour l'agrandir. Retournez ici et ajoutez un nom de classe, une icône, que vous pouvez trouver dans le fichier CSS de l'élément de tâche si vous voulez y jeter un œil. Maintenant, cette classe fera apparaître l'icône de suppression plus grande. Revenons au bouton de vérification et supprimons cet élément panoramique. Au lieu de cela, nous allons afficher l'icône carrée BS check. Il doit également avoir l'icône du nom de classe pour l' agrandir comme ça. Maintenant, si je clique, vous verrez que la couleur d'arrière-plan passe au vert, mais il s'agit en fait de l'arrière-plan du conteneur d'icônes, pas de l'icône elle-même. Je souhaite passer de cette icône à celle remplie. Dans le projet, je souhaite donc basculer entre cette icône et celle remplie. Ajoutons-le ici, puis saisissons-les tous les deux entre deux accolades, car nous devons ajouter un code de script Java Nous allons vérifier si l'état de la variable est vérifié, ce n'est pas vrai. Ce qui signifie que l'article n' est pas coché. Ensuite, nous allons afficher cette icône. Dans le cas contraire, nous allons afficher l'icône remplie. Maintenant, dans le navigateur, si je clique sur l'icône de case à cocher, elle sera remplacée par l'icône de case à cocher remplie, mais nous ne voulons pas qu'elle soit remplie de couleur noire Nous pouvons modifier la couleur de remplissage à l'aide de l'attribut fill et la définir comme étant égale à ce code couleur, qui est une couleur vert clair. Mais maintenant, dans le navigateur, on dirait qu'il a disparu. Mais ce n'est pas parce que le fond de l'élément est également vert. De cette façon, nous pouvons le voir. Pour résoudre ce problème, supprimons cet attribut de style d' ici. Cette fois, vous pouvez y voir la case à cocher de remplissage, et cela fonctionne comme par magie Maintenant, je souhaite également changer l'icône de suppression par celle remplie. Cherchons la suppression et choisissons celle-ci. Comme il commence par les lettres AI, nous pouvons également l'importer d'ici. Ensuite, faites défiler la page vers le bas et remplaçons-la par cette icône ici et définissons l'attribut de remplissage la couleur rouge, car il s'agit d'un bouton de suppression. Enfin, supprimons l'ancienne icône d'ici et vérifions le navigateur. C'est bon. On ne voit rien car encore une fois, la couleur de fond est également rouge. Nous devons changer cela au sein de cette classe. Ouvrez l'élément de tâche dans un fichier CSS. Et supprimez la propriété de couleur d'arrière-plan. Nous pouvons maintenant voir l'icône de suppression. Comme vous pouvez le constater, l'utilisation d'icônes a rendu notre application plus belle et plus amusante à utiliser. 18. Ajouter une navigation sur plusieurs pages : implémenter le routeur React DOM: La fonctionnalité de suivi des tâches est terminée. Nous allons maintenant nous concentrer sur l' ajout de plusieurs pages, ou en d'autres termes, de plusieurs itinéraires. Pour ce faire, nous allons d'abord ajouter un en-tête en haut de cette page, puis y ajouter des liens de navigation. Dans le dossier des composants, nous allons ajouter un nouveau composant et le nommer header g SX. abord, le port react from react, puis définissez la fonction du composant d'en-tête et exportez-la en bas À l'intérieur de ce composant, nous retournerons un élément d'en-tête et lui donnerons un nom de classe d'en-tête. À l'intérieur, nous aurons deux liens de navigation, l'un pour l'accueil et l' autre pour une page à propos. Ces deux éléments auront l'élément d'en-tête du nom de classe. Nous n'avons toujours pas ces cours. Nous allons créer un nouveau fichier CSS pour le composant d'en-tête. Vous trouverez ce fichier dans la section ressources de cette vidéo. Il suffit de l'ajouter à votre projet. Il propose des styles pour l'élément d'en-tête et pour les éléments d'en-tête. Maintenant, le composant d'en-tête va être ajouté dans le fichier d'index CS car nous voulons que l'en-tête soit présent sur toutes les pages. À l'intérieur, ajoutez un en-tête et assurez-vous de l'importer depuis le dossier des composants. Si nous testons cela dans le navigateur, nous pouvons voir que le Hader est là en haut de la page, mais sans aucun style C'est parce que j'ai oublié de décompresser le fichier hydro Dot *** dans le composant d'en-tête Maintenant, si nous vérifions à nouveau, nous verrons l'en-tête avec boutons d' accueil et à propos de la navigation, et un effet ho équivalent. Dans notre cas, la page d'accueil est le composant ab DGS. Ce qui nous manque ici, c'est la page « at ». Nous allons créer un composant pour ce composant et le nommer en référence à DGS X. Encore une fois, adaptez React à partir de React, puis définissez la fonction du composant, nommez-la about page et exportez-la en bas de Pour l'instant, retournons simplement un plongeon avec un texte disant à propos de. Maintenant, dans le fichier Index DoZis, continuez et utilisez le composant de page comme suit Dans le navigateur, vous verrez qu' un texte y a été affiché, provenant du composant de page à propos. Nous ne voulons pas que la page à propos soit affichée en même temps que la page d'accueil . Nous voulons que chaque page soit rendue dans un itinéraire distinct. Par exemple, si nous accédons à Local house 3,000 slash a, nous ne devrions obtenir que la page « À propos Maintenant, lorsqu'il s'agit de créer applications Web avec React, vous avez peut-être remarqué que par défaut, React prend en charge une approche d'application d'une seule page ou, en bref, une approche SPA. Dans les SPA, tout se charge initialement sur une seule page HTML. Au fur et à mesure que les utilisateurs interagissent avec l'application, React met à jour une partie de cette page de manière dynamique, donnant l'illusion de naviguer différentes pages sans actualiser la page entière. Cependant, il existe des scénarios dans lesquels vous souhaitez des pages distinctes avec des URL distinctes, comme la page ci-dessus C'est là que la magie du package React Router Doom entre en jeu Désormais, ce package vous permet de simuler le comportement de plusieurs pages dans une seule application. Avec le package React Router Doom, vous pouvez définir des itinéraires pour différentes pages de votre application Il achemine les composants vers une URL spécifique. Par exemple, vous pouvez configurer un itinéraire pour la page à propos comme vous le feriez pour la page d'accueil. Une fois que vous aurez démarré le routeur React Dom, nous allons importer quelques éléments pour celui-ci. Tout d'abord, le routeur du navigateur, qui est un élément essentiel du package de vidage de React Router et de React. Il aide votre application à gérer les différentes URL et affiche les composants appropriés en fonction de ces Considérez-le comme le navigateur qui garantit que lorsque les utilisateurs accèdent à une URL spécifique, le contenu correct apparaît sur cet écran Utilisons maintenant le S QR pour changer son nom en routeur uniquement. Nous utiliserons ce composant pour encapsuler tous les composants de notre application. Ensuite, nous allons importer le composant routes et le composant itinéraire. Le composant routes contiendra toutes nos pages, et pour passer d'une page à l'autre en utilisant un U, nous utiliserons le composant route. Ce composant peut désormais accepter un attribut de chemin. Pour la page d'accueil, nous allons ajouter une barre oblique représentant l'itinéraire racine Ensuite, pour afficher le composant de l'application, nous utiliserons l'attribut component et transmettrons le nom du composant. Nous ferons de même pour la page à propos. Mais cette fois, nous voulons que la voie soit tracée. Vous pouvez supprimer la barre oblique si vous le souhaitez. Maintenant, le composant qui sera affiché sur ce chemin est le composant à propos de la page. L'en-tête n'est pas inclus dans le composant routes car nous voulons le rendre sur chaque itinéraire. Maintenant, dans le navigateur, accédez à l'URL Local hose 3,000 about, et le tour est joué. Le composant de page À propos est le seul qui a été rendu. Ajoutons maintenant du style à la page « À propos ». Créez un fichier CSS à propos des points, dans lequel vous créerez une classe de conteneur et y ajouterez ces propriétés. Cela fera simplement passer le texte à propos au centre de la page. Si nous revenons à l'itinéraire racine, nous retrouverons le traceur. 19. Améliorer la navigation : maîtriser le composant NavLink dans ReactJS: Nous voulons naviguer entre les pages à l'aide des boutons de navigation d'en-tête. Cependant, pour le moment, il ne s' agit que d'éléments panoramiques. Nous devons les remplacer par des éléments d'hyperliens. Nous allons définir l'attribut H ref de la page d'accueil sur la route racine comme suit. De même, nous allons faire la même chose pour le lien à propos et définir la référence H sur a. Grâce à ces modifications, nous pouvons naviguer entre les dix pages d'accueil à l'aide de ces boutons. Concentrons-nous maintenant sur la mise en évidence du lien de navigation actif avec une couleur et un style différents. Lorsque nous sommes sur la page d'accueil, le lien de navigation doit être mis en évidence. Mais le problème, c'est que nous ne voulons pas que la page soit rechargée Chaque fois que la page se recharge, notre application perd son état et toutes les données sont supprimées. Pour éviter que cela ne se produise, le package reacro dom fournit un composant utile appelé Navnk Le composant noveling de React Router Dom est comme un lien de navigation amélioré pour les applications React Elle est similaire à la balise ACML A, mais au lieu d'utiliser l'attribut H t, nous en utilisons une autre appelée deux Le composant novelin applique automatiquement un style aux liens actifs Lorsque les utilisateurs cliquent sur le roman, la page coréenne est mise en évidence visuellement, ce crée une expérience de navigation plus fluide et plus intuitive. Pour ce faire, créons une nouvelle classe dans le fichier CSS à points d'en-tête pour l'état actif des en-têtes Je trouve que cette classe est déjà définie dans le fichier. Si vous ne le trouvez pas, suivez-le. Dans cette classe, nous allons ajuster la couleur à l'aide de ce code, qui représente une couleur bleue. Faisons en sorte qu'il soit légèrement plus foncé. Revenez maintenant au fichier HoDogs x et, dans le premier lien de navigation contenu dans l'attribut class name, entourez-le d'une base bouclée Transmettre une fonction qui accepte un objet contenant deux propriétés, est active et qui est en attente. La propriété es active sera définie sur true si le chemin de l'URL dans le navigateur correspond au chemin URL contenu dans les deux attributs. La propriété es pending quant à elle, est utilisée pour gérer la navigation en cas d'attente de données ou d'opérations ACN. Maintenant, dans ce rappel, nous devons renvoyer un nom de classe Nous renverrons conditionnellement la classe d'élément d'en-tête. Avec la classe active de l'élément d'en-tête, si la propriété e active est vraie. N'hésitez pas à ajouter plus d'un cours si nécessaire. Si elle n'est pas active, vérifions la propriété Es pending. Si c'est vrai, renvoyez la classe d'élément hydroélectrique ainsi que la classe d' élément hydroélectrique en attente. Définissons maintenant la classe en attente d'un élément hydraulique dans le fichier hydrod SS. Eh bien, passons simplement de la couleur au bleu clair. Revenez au composant hydroélectrique ici. Lorsque la propriété en attente est également fausse, appliquez la classe d'élément hydroélectrique Copions maintenant tout cela collé dans le deuxième composant N link Lorsque vous testez cela dans le navigateur, les modifications peuvent ne pas être immédiatement apparentes. Cependant, si nous zoomons, nous remarquerons la couleur bleu foncé. Rendons-le simplement plus distinct en changeant la couleur en vert et en augmentant le poids de police à 800. Essayons d'ajouter une propriété de décoration de texte définie pour souligner. Maintenant, si nous testons ces modifications dans le navigateur, il est désormais plus clair quelle sauvegarde est active et sur quelle page nous nous trouvons actuellement. 20. Maîtriser le composant lien et créer une page 404 personnalisée: Réapplication avec plusieurs itinéraires, nous devons gérer le scénario où l'utilisateur demande un itinéraire qui n' existe pas dans notre liste d'itinéraires Cela signifie que nous devons gérer l'erreur « page introuvable ». Nous pouvons facilement le faire dans le fichier d'index DGS en ajoutant un nouveau composant de route à la fin de la liste des itinéraires Cette fois, nous utiliserons l'attribut element, qui peut contenir n'importe quel code GSX, même un composant comme celui-ci Cependant, nous n'afficherons qu'un div avec un message indiquant que le nœud de page a été trouvé, et nous ajouterons un lien pour revenir à la page d'accueil. Nous ne voulons pas recharger la page lorsque nous cliquons sur ce lien Nous voulons que notre application fonctionne comme une application mobile et soit rapide. Dans une application mobile, lorsque vous passez section ou d'une page à l'autre, l'application mobile ne s'actualise pas. Dans React, nous pouvons utiliser le composant de la barre NAV, comme nous l'avons fait dans l'en-tête. Mais n'oubliez pas que la barre de navigation ne doit être utilisée que pour les liens de navigation. C'est pourquoi le package dom de react router fournit un autre composant pour les liens normaux. Ce composant s'appelle Link. Assurez-vous de l' importer en haut. Vous pouvez désormais utiliser le composant lien comme vous utilisez un élément d' hyperlien normal Utilisez des balises d'ouverture et de fermeture, et entre elles, vous pouvez ajouter du texte, comme retourner à la page d'accueil. Pour le lien, utilisez les deux attributs comme celui-ci. Maintenant, la partie la plus importante ici est le chemin de cet itinéraire. Il doit être réglé sur le symbole d'une étoile. De cette façon, lorsque le chemin de l'URL change, React Router dom vérifie la liste des routes disponibles et l' ordre dans lequel elles ont été définies. Je vais commencer par comparer le premier itinéraire, qui est l'itinéraire racine. Si les chemins ne correspondent pas, il passera au suivant dans l'ordre. S'il atteint un itinéraire marqué d'une étoile, il s'arrête et sélectionne cet itinéraire. C'est pourquoi j'ai mentionné que vous devez placer l'itinéraire à la fin de la liste des itinéraires. Dans le cas contraire, aucun itinéraire que vous indiquerez en dessous cet itinéraire général ne sera jamais atteint. C'est bon. Vérifie le navigateur. Comme vous pouvez le constater, si le chemin de l' itinéraire n'existe pas, nous allons afficher ce message. Lorsque nous cliquons sur ce lien, nous revenons à la page d' accueil sans recharger 21. Gestion d'état persistante dans React : maintenir les données sur les routes: En ajoutant des itinéraires à notre application, nous sommes confrontés à un autre défi. Lorsque nous ajoutons un élément à la liste, puis que nous accédons à la page à propos et que nous revenons à la page d'accueil, cet élément n'y figure pas. Cela est simplement dû au fait que le composant de l'application est rendu à chaque fois que l'itinéraire change, et lorsque cela se produit, tous ces états retrouveront leurs valeurs initiales. Ici, le tableau de tâches filtré reviendra à un tableau vide et toutes nos données seront perdues. Nous pouvons résoudre ce problème en supprimant la route d'origine de la liste des routes et en affichant le composant de l'application directement à l'extérieur du composant routes et à l'intérieur du composant routeur. Cela est dû au fait que le composant Inside de l' application définira un itinéraire d'origine en encapsulant tout le code GSX dans le composant routes Le composant de route ne peut pas être utilisé en dehors du composant de routeur. C'est pourquoi nous avons ajouté le composant app à l'intérieur du composant routeur dans l'index du fichier GS. Je vais prendre tout ce code et créer un itinéraire en utilisant le composant de route qui fait référence au chemin de route. Ensuite, dans l'attribut element, ajoutez une balise d'ouverture et de fermeture comme celle-ci, et collez le code que nous avons coupé précédemment. Si nous testons cela dans le navigateur, vous remarquerez que la page de la note trouvée a été affichée à côté de la page d'accueil. Nous allons régler ce problème dans un instant. Mais maintenant, au moins lorsque nous ajoutons un élément à la liste et que nous passons d'un itinéraire à l'autre, l'élément sera là. Cela signifie que le composant de l'application n'a pas été rendu à nouveau. Maintenant, c'est simplement parce que le composant de route le restituera toujours chaque fois que le chemin change. Ce que nous avons fait ici, c'est que nous avons créé uniquement le code GSX, la partie qui est restituée afin que tous les états ne soient pas touchés Maintenant, la raison pour laquelle la page introuvable est affichée sur la page d'accueil est que nous devons placer tous nos itinéraires au même endroit. La première chose que je vais faire est de prendre tout le code GSX de la page d' accueil Coupez-le, puis dans le dossier des composants. Je vais créer un nouveau composant de page et le nommer home. Soutenons React from React. Définissez le composant de la fonction d'accueil. Et renvoyez tout le code GSX que nous avons extrait du composant de l'application, et n'oubliez pas d'exporter le composant d'accueil en bas Nous devons maintenant transmettre tous ces états et variables du composant d' application au composant d' accueil en tant qu'accessoires Ouvrez ici un objet et copiez toutes ces propriétés dans votre code. Assurez-vous également d'importer tout autre composant utilisé dans ce fichier. Maintenant, dans le composant de l'application, nous allons utiliser le composant d'accueil ici. Et assurez-vous de le porter en haut. Supprimons les ports dont nous n'avons plus besoin. Enfin, nous devons fournir tous les accessoires nécessaires. Vous pouvez copier et coller la liste des accessoires ici et attribuer à chaque accessoire la variable correspondante Après cela, nous devons supprimer toutes les routes du fichier d' index DGS et les placer dans le composant de l'application N'oubliez pas que nous faisons tout cela pour nous assurer que le composant routes ne restituera pas l'intégralité du composant de l'application, ce qui lui ferait perdre l'état de l'application. Maintenant, ici, nous pouvons supprimer la barre oblique arrière et la laisser comme ça Si nous voulons définir un itinéraire spécifique comme index de notre application, comme la page d'accueil ici, nous pouvons ajouter l'index d'attribut sans lui attribuer de valeur Par défaut, il sera défini sur true. Dans l'index du fichier GS, nous devons supprimer le composant routes car dans l' ensemble de l'application, nous ne devrions avoir qu' un seul composant routes. Supprimons également tous les ports utilisés. C'est vrai. Maintenant, dans le navigateur, ajoutons un élément de tâche. Lorsque nous passons d'un itinéraire à l'autre, l'élément de tâche n'est pas supprimé. 22. Maîtriser la récupération de données dans React : créer une page à propos avec l'intégration d'API: Créons maintenant une page «   Better About ». Supprimons cela et ajoutons un élément de profondeur avec le nom de classe a container. Vous trouverez le fichier CSS dans la section des ressources. Maintenant, à l'intérieur, nous aurons un élément d'outil H qui parlera de nos services. Derrière, un élément de paragraphe où nous pouvons décrire en quoi consiste notre application. Nous pouvons écrire. Nous sommes là pour vous fournir une application simple de suivi des tâches pour vous aider à rester organisé et à gérer vos tâches efficacement. Enregistrez ceci et dans le navigateur, vous verrez les modifications sur la page ci-dessus. Ensuite, en dessous de ce paragraphe, nous aurons une autre section di où nous allons récupérer quelques blagues de programmation à partir d'une API Donnez ce dif à la section blague du nom de la classe. À l'intérieur, nous aurons un texte en H à trois largeurs qui dit blague sur la programmation. Et en dessous, un élément span où nous allons afficher le contenu de la blague. En gros, nous allons chercher une blague à chaque page rendue. Ajoutons un état U et nommons-le blague pour enregistrer la blague et définir sa valeur initiale sur un objet dont propriété de contenu est définie sur null. Maintenant, dans Reac Gas pour récupérer des données depuis un IBI externe, nous devons utiliser le fat hook de l' utilisateur En l'utilisant, nous pouvons attendre la fin de l'opération de récupération À la fin, nous restituerons la page avec les données récupérées Gardons les dépendances vides pour le moment. Ensuite, dans le rappel de l' effet d'utilisation, nous définirons une fonction et la nommerons fetch jokes Cette fonction sera asynchrone car nous voulons attendre l'opération de récupération À l'intérieur, nous utiliserons un bloc tri catch pour détecter erreurs potentielles et les imprimer la console en utilisant la méthode d'erreur par points de console. Dans le blog tri, déclarez une réponse nommée constante et utilisez le mot clé await pour arrêter l'exécution du code jusqu'à ce que nous ayons fini récupérer la blague à l'aide de la fonction fetch Cette fonction acceptera l'URL AP comme premier argument Allez-y et copiez également l'URL. Il s'agit d'une API gratuite qui renvoie une blague sur la programmation pour chaque requête. Déclarez ensuite une constante de données, puis utilisez à nouveau le mot clé await et appelez la méthode JSM sur la réponse Maintenant, cette méthode transmet spécifiquement le corps de la réponse en tant que JSM JCN est simplement une notation d'objet JavaScript, la convertit en objet Javascript Lorsque nous avons les données sous forme d'objet Javascript, nous pouvons définir l'état de la blague et mettre à jour la propriété du contenu avec data point joke. Il ne nous reste plus qu'à appeler la fonction fetched jokes en bas du rappel de l'effet d' utilisation En gardant le tableau de dépendances vide, le hook use effect ne s'exécutera qu'une seule fois après le montage du composant. Et par montage, je veux dire lorsque le composant s'affiche pour la première fois dans le navigateur. Si nous l'enregistrons et le testons dans le navigateur, lorsque nous changeons d'itinéraire, l'effet d'utilisation sera déclenché et nous y verrons la blague. Mais il y a quelque chose que nous devons corriger. Actuellement, si vous le remarquez, la blague peut parfois être indéfinie Donc, si nous ajoutons un journal de console ici et que nous retournons le navigateur et que nous basculons entre les routes pour exécuter l'opération de récupération, et la console, nous remarquerons que parfois la blague n'est pas définie Pour résoudre ce problème, nous pouvons utiliser une instruction if ici et vérifier si la blague n'est Si c'est le cas, nous exécuterons à nouveau la fonction Ft Joke. Oui, nous pouvons le faire car en JavaScript, appel d'une fonction en elle-même est appelé récursivité Il s'agit d'une technique qui permet de résoudre des problèmes en les divisant en instances plus petites à l'aide de la même fonction. Ajoutez une instruction S pour gérer le cas où nous avons une blague. Dans ce cas, nous pouvons mettre à jour le contenu de la blague. Maintenant, si nous testons cela depuis le navigateur, assurez-vous d'effacer la console. Ensuite, allez à l'accueil et revenez à la page à propos. Vous remarquerez que nous avons compris la blague. Mais dans la console, nous pouvons voir que nous y trouvons deux blagues, ce qui signifie que l'effet d'utilisation a été déclenché deux fois, ce qui correspond à l'état interne du composant à propos de la page Réglons ce problème étape par étape. Ajoutons d'abord un nouvel état et le nom qu'il est en train de récupérer. Cet état sera utilisé pour indiquer clairement dans le navigateur que nous récupérons des données Définissez sa valeur initiale sur true car nous allons récupérer les données directement lors du montage du composant Ensuite, arrivons ici lorsque la récupération des données s'est arrêtée, et avant de sauvegarder les données, définissons l'état is fetching sur false et faisons la même chose lorsque nous obtenons un bloc interne au catch Maintenant, dans le code GSX, nous voulons informer l'utilisateur que nous sommes en train de récupérer, afin qu'il ne pense pas que notre application est cassée ou Placez donc cet élément d'envergure dans une paire d' accolades et vérifiez si l'extraction est vraie. Ensuite, nous renvoyons un texte disant d' aller chercher avec trois points. Nous pouvons le tester dans le navigateur. Comme vous pouvez le constater, le message de récupération est là, mais il disparaît très rapidement Nous pouvons le ralentir en ouvrant la fenêtre des outils de développement et en accédant à l'onglet réseau, sur le côté ici, recherchant ce menu et trois G. Cela imitera l' expérience de navigation sur Internet à l'aide d' une connexion réseau mobile lente et limitée, ce qui ralentira l'extraction du starter depuis Cela imitera l' expérience de navigation sur Internet à l'aide d' Internet à l'aide une connexion réseau mobile lente et limitée, en le remplaçant par trois G. Cela imitera l' expérience de navigation sur Internet à l'aide d' une connexion réseau mobile lente et limitée, ce qui ralentira l'extraction du starter depuis le Joke SAPi Cela nous aidera à voir les messages récupérés dans le navigateur. Ce faisant, nous pouvons découvrir un nouveau problème dans les fonctionnalités de nos applications. Dans la console, vous pouvez noter que le hook d'effet d'utilisation est déclenché de nombreuses fois. À chaque fois, les données ne sont pas définies, et enfin, nous obtenons les données de l'API Mais même dans ce cas, l'effet d'utilisation est déclenché une fois de plus, ce qui entraîne l'extraction de deux blagues dans l'API Les utilisateurs ne le remarqueront peut-être pas. Notre travail en tant que développeurs est de découvrir ces petites erreurs et de les corriger. Tout d'abord, nous allons ajouter une propriété récupérée à l'état de l'objet Joke et définir sa valeur initiale sur true Nous viendrons ensuite ici avant la fonction fetch joke et vérifierons si joke point fetch est réglé sur true ou non Si ce n'est pas le cas, nous arrêterons l'exécution du code avec une instruction return et nous ne récupérerons pas les données Mais si c'est vrai, nous récupérerons les données Et lorsque nous aurons terminé, nous définirons la propriété récupérée sur force afin de ne pas récupérer les données Cette fois, comme l'effet d'utilisation dépend de la valeur de la propriété récupérée, il doit être ajouté dans le tableau des dépendances C'est bon. Maintenant, dans le navigateur, si nous testons à nouveau la page à propos, nous remarquerons que le problème s'aggrave. Maintenant, nous récupérons les données plusieurs fois. Même lorsque nous avons des données sur les blagues. Mais ne vous inquiétez pas, ce problème peut être résolu à l'aide d'une fonction d'effet d'utilisation appelée nettoyage des effets secondaires. Cela se fait en renvoyant une fonction de rappel à la fin du hook d'effet d'utilisation, où nous pouvons nettoyer certaines variables Dans notre cas, nous voulons définir la propriété effect joke sur force. Nous devons maintenant ajouter l' objet blague aux dépendances de cette manière. score back est exécuté lorsque le composant est démonté ou lorsque les dépendances et la dépendance y changent. Il est couramment utilisé pour des tâches telles que le conseil, les abonnements, suppression des auditeurs d'événements ou, dans notre cas, réinitialisation des états à leurs valeurs initiales lorsque l'effet n'est plus nécessaire Cela permet d'éviter les fuites de mémoire ou les comportements inattendus. Maintenant, si nous testons cela sur le navigateur, tout fonctionnera normalement sans aucun problème. Maintenant, nous devons nous occuper d' une dernière chose. Imaginez si l'API Joke est en panne, ce qui signifie qu'elle ne sera pas résolue. Les données seront donc toujours indéfinies. Dans ce cas, cette déclaration sera toujours véridique et nous finirons par exécuter la fonction fetch joke Pour éviter que cela ne se produise, nous pouvons déclarer une variable let en dehors la fonction fetch joke et la nommer Fetch count Définissez sa valeur initiale à zéro. Ensuite, à l'intérieur du bloc tri situé à la fin, nous augmenterons le nombre de récupérations en utilisant l'opérateur plus plus Ce javascript s'appelle l'opérateur de post-incrément. Il est utilisé pour incrémenter la valeur d'une variable numérique d'une Dans cette instruction, nous exigerons que le nombre d'extractions soit inférieur ou égal à deux Sinon, nous n'exécuterons pas nouveau la fonction fetch joke C'est bon. Maintenant, je veux améliorer un peu le code ici. Il est toujours recommandé de réduire le nombre de fonctions d'état d'utilisation dans votre code. Pour faciliter l'extraction, nous pouvons le supprimer de ce composant et le remplacer dans l'état Joke en tant que propriété Nous pouvons maintenant tout mettre à jour dans une seule fonction d'état. Outre le blocage, si nous rencontrons des erreurs, nous pouvons définir le contenu de la blague sur no joke, puis nous leur demanderons recharger afin qu'ils puissent récupérer les données à nouveau et définir la propriété fetch forcer et faire de même pour la propriété de facilité Ici, n'oubliez pas de mettre à jour le code et d'utiliser l'objet Joke pour accéder à l'état de récupération facile Rien ne changera dans le navigateur, mais il gardera les choses en ordre et nous pouvons empêcher tout comportement étrange. N'oubliez pas de réinitialiser le réseau throlling pour qu'il ne soit pas throlling Passons à la leçon suivante. 23. Maîtriser des itinéraires imbriqués dans React.js : naviguer dans des structures d'applications complexes: Parfois, nous souhaiterons peut-être ajouter des itinéraires imbriqués à notre application Par routes imbriquées, j'entends l'affichage d'une page spécifique dans une autre en fonction du chemin uro Envisageons d'ajouter un itinéraire instantané dans la page à propos. Dans ce cas, nous devons ajouter une balise de fermeture, puis ajouter un autre composant de route à l'intérieur de celle-ci. D'ailleurs, je préfère utiliser la balise element plutôt que la balise component, mais n'hésitez pas à la conserver telle quelle. Maintenant, ce composant de route se fermera automatiquement et nous avons défini l' attribut path pour les développeurs. Essentiellement, nous ajoutons une page qui affichera liste des développeurs ayant contribué à la création de cette application. Maintenant, définissons l' attribut element sur un ti avec le texte dvted by ou vous savez quoi ? Nous pouvons plutôt renommer la base imbriquée en équipe. À l'intérieur de l'attribut element, nous affichons un composant nommé team. Maintenant, allez dans le dossier des composants, créez un nouveau fichier nommé team TSX Tout d'abord, le port réagit à partir de React, puis définissez la fonction. Puis exporté. Dans ce composant, nous allons renvoyer une liste de développeurs. Avant cela, copiez le tableau suivant qui contient de faux noms. Nous allons utiliser ce tableau pour afficher la liste des développeurs. Maintenant, renvoyez un di et ajoutez-y un élément H deux avec les développeurs de texte qui ont travaillé sur l'application de suivi des tâches. En dessous, ajoutez un élément de liste ordonné. À l'intérieur, nous utiliserons la fonction map pour parcourir son nom et son index Nous allons renvoyer un élément de nom de liste, en attribuant la valeur clé à l'argument index et en plaçant l'argument nom entre accolades Maintenant, enregistrez tout et dans le composant ap, remplacez ce d par le composant team. Maintenant, si nous enregistrons et accédons au chemin de l'URL concernant slash team dans le navigateur, la liste des développeurs devrait apparaître en bas de page Cependant, cela ne se produit pas. La raison en est que nous devons accéder au at page dans le composant dev at the outlet, qui peut être importé depuis le package dom de React Router. Ce faisant, nous nous assurons que le composant d'équipe est affiché lorsque le chemin du routeur est égal à environ slash team Le composant de sortie agit désormais comme un espace réservé, affichant le contenu en fonction de la route coréenne C'est comme un emplacement dans lequel le contenu de l' itinéraire est inséré. Cela est particulièrement utile pour créer des mises en page imbriquées ou pour modifier différentes parties du rythme en fonction de l'itinéraire Il permet d' organiser votre code et passer facilement d'une section à l' autre de votre application. Très bien, sachez que nous pouvons ajouter encore plus de routes imbriquées si vous le souhaitez. Par exemple, ajoutons une route faisant référence à la route d'index, qui sera rendue lorsque le chemin du routeur est égal à a. Nous sommes à l'intérieur du routeur, ce qui signifie que la route d'index fait référence à la route à propos Cet itinéraire affichera un composant de lien indiquant « Rencontrez l'équipe », référence à l'itinéraire d'équipe ci-dessus. J'ajoute ce lien en tant qu'itinéraire imbriqué parce que je veux qu'il apparaisse en fonction du chemin de l'ural C'est le moyen le plus simple d'y parvenir. Maintenant, dans le navigateur, si nous naviguons de l'accueil à la page ci-dessus, nous notons le lien « Rencontrez l' équipe » en bas. Cliquez dessus pour modifier le chemin de l'URL, ce qui entraîne la disparition du lien et le rendu du composant de l'équipe. Vous remarquerez que le passage d'un itinéraire imbriqué à un autre déclenche le composant parent, qui est la page d'adresse à afficher à nouveau. 24. Se familiariser avec useRef : supercharger votre projet React: Certaines applications Web modernes. Lorsque le client récupère la page, le champ de saisie devient automatiquement Fox it, de sorte que dans notre cas, l'utilisateur peut commencer à ajouter des éléments de tâche immédiatement. Nous pouvons y parvenir très facilement dans le composant du formulaire de tâche en utilisant un nouveau hook de réaction appelé use RAF, qui est comme une étiquette de nom pour les éléments de votre code. Il vous permet de faire référence à un élément spécifique du dôme, afin que vous puissiez interagir avec celui-ci à l'aide de JavaScript. Pas seulement pour les saisies de formulaires. Vous pouvez l'utiliser pour n'importe quel élément dont vous souhaitez suivre l'évolution. C'est comme mettre une note autocollante sur quelque chose pour pouvoir le retrouver facilement plus tard. Lorsque vous appelez le hook use raf, vous obtenez un objet appelé F. Nous pouvons le nommer input ref. RF est comme un conteneur contenant une référence à un élément dom ou à une valeur. Ensuite, à l'intérieur de l'élément d'entrée, nous allons ajouter un attribut RF et le définir égal à l'entrée F. De cette façon, nous pouvons accéder à l'élément d'entrée. Considérez-le comme un sélecteur d'éléments de script Java. Il y a une condition pour utiliser ce soutien-gorge. Il ne doit être accessible que lorsque l'élément d'entrée est affiché dans le navigateur. Nous devons l'utiliser dans un hook d'effet d'utilisation ajouter les dépendances et le laisser vide, afin qu'il ne s'exécute qu'une seule fois lors du montage du composant. Dans le cadre de cette utilisation de fact hook, nous pouvons utiliser la référence d'entrée pour accéder à la valeur koan de la référence à partir de la propriété coréenne Cette propriété coréenne fait référence à l'élément d'entrée. Afin de nous concentrer dans le champ de saisie, c' est-à-dire d'y ajouter la barre de texte, nous pouvons appeler la méthode de mise au point comme suit. Nous définissons généralement la valeur initiale de la référence sur null, ce qui évite de prendre un état initial et évite les effets imprévus Maintenant, assurez-vous d' enregistrer toutes les modifications. Actualisez ensuite la page Web dans votre navigateur. Ce faisant, vous remarquerez que le champ de saisie se focalise automatiquement. Par conséquent, les utilisateurs peuvent rapidement commencer à interagir avec l'application en saisissant contenu sans qu'aucune autre action ne soit requise. Si vous voulez consulter la référence d'entrée, vous pouvez l' enregistrer sur la console et vous obtiendrez l'élément d'entrée HTML dans la console. Maintenant, si nous ne faisons que consoler le rap d'entrée, alors dans l'outil Deep, vous obtiendrez un objet avec une propriété nommée Coan D'ailleurs, nous avons ici un r qui indique qu' un composant modifie une entrée non contrôlée à contrôler Il parle d' une valeur de composant qui passe de non définie à définie Il s'agit de l'élément de saisie dans le composant du formulaire de tâche. Où nous définissons sa valeur à l'état d'entrée. Le problème ici est que la valeur d'état initiale ne doit pas être indéfinie Nous pouvons changer cela facilement en ajoutant une chaîne vide au hook use state comme valeur initiale. Maintenant, si nous actualisons le collage, l'URL ne sera plus imprimée.