React. js Academy pour les débutants avec Firebase

1. Bienvenue dans le cours: Bienvenue à la React Academy pour débutants. Dans ce cours, vous apprendrez tout ce que vous devez savoir pour aller de l'avant avec réagir, pour construire des interfaces utilisateur. Toutes nos constructions dans un vrai projet, mettez vos nouvelles compétences en pratique. Tout au long de ce cours, vous allez construire huit autres applications inspirées, qui vous montre vraiment ce que vous pouvez faire avec réagir. Nous construisons des chutes pour regrouper vos idées et les organiser avec des listes et des cartes, tout en faisant des nouvelles des composants réactifs. Ceux-ci sont également modifiables, vous pouvez cliquer sur eux pour changer les noms et aussi les voitures ont un modèle pop-up où nous pouvons changer le contenu et également ajouter ou supprimer des étiquettes. Cette application nous donne la chance de comprendre des concepts de réaction tels que le transfert de données avec des accessoires, travail avec l'état, les formulaires, le routage, types de composants et les cycles de vie, les méthodes personnalisées, et bien plus encore. Ce cours est convivial pour les débutants, donc si vous êtes nouveau pour réagir, nous allons passer en revue toutes les bases dont vous avez besoin pour commencer, puis remonter tout au long du cours pour vous donner une meilleure compréhension de la réaction. Bien que nous devrions déjà avoir une familiarité avec HTML, CSS et JavaScript de base pour tirer le meilleur parti de ce cours, nous ne serons pas seulement construire le front-end de l'application non plus. Nous utiliserons également Firebase pour créer un back-end pour notre projet. Cela nous donnera une base de données en temps réel pour stocker toutes nos données. Il persistera après le retour d'un utilisateur et aussi toutes les modifications que nous effectuons, telles que le complément, la suppression ou la mise à jour dans. Nous mettrons à jour notre application en temps réel, ce qui signifie que les modifications prendront effet immédiatement sans avoir besoin de recharger la page. Nous permettons également aux utilisateurs de s'inscrire et de se connecter à notre graphique. Cela permet aux utilisateurs d'avoir leurs propres tableaux personnels, qu'ils seuls peuvent voir ou modifier. En plus d'apprendre sur des choses telles que le rendu conditionnel, les documents, les instantanés, l'authentification, le salage et le filtrage, écoute des modifications, ainsi que l'API des contacts React. Nous terminons le cours en apprenant comment construire votre application pour la production et enfin déployer pour le reste du monde pour voir si vous étiez intéressé à apprendre React et que vous voulez construire un projet étranger en cours de route, inscrivez-vous au cours, et je vous verrai dans la classe. 2. Ce que nous allons construire: Ce cours est entièrement basé sur des projets, signifie que nous allons construire cette application inspirée de Trello dès le début du cours jusqu'à la fin. Nous allons ajouter à cette étape par étape, car nous en apprenons plus sur React et Firebase pendant le cours. Nous allons mettre en pratique tout ce que nous apprendrons sur React directement dans ce projet afin que vous puissiez le voir en pratique. Le projet qui s'appuiera tout au long du cours sera inspiré par Trello. Si vous n'avez pas utilisé Trello auparavant, c'est essentiellement une application qui nous permettra d'organiser les choses en créant des tableaux, qui est un tableau pour un certain sujet où nous pouvons ajouter des listes et des cartes, nous pouvons énumérer des idées, nous peut créer des étiquettes, et bien plus encore. Dans cette application, nous allons commencer sur l'écran d'accueil en permettant aux utilisateurs de se connecter avec un e-mail et un mot de passe. L' authentification sera gérée sur le back-end à l'aide de Firebase. Cela nous donnera une connexion sécurisée et une installation d'inscription, où les utilisateurs peuvent ensuite s'inscrire. Ils peuvent ensuite créer des planches. Par exemple, nous pouvons mettre en place nos idées pour l'été. Nous pouvons créer ce tableau, nous pouvons lui donner une couleur de fond différente, allons-y pour le vert. Nous pouvons créer ce tableau. Ceci est maintenant enregistré dans la base de données back-end, qui est fournie par Firebase. Nous pouvons ensuite entrer dans notre tableau, nous pouvons créer de nouvelles listes pour la section de notre contenu. Par exemple, nous pouvons dire des lieux à visiter et aussi créer une nouvelle liste, des choses à faire. Chacune de ces listes peut avoir des cartes individuelles, et nous pouvons ajouter autant de ces cartes que nous le souhaitons. Disons que j'ai visité Paris. Nous pouvons ensuite cliquer sur ces modifications. Nous pouvons éditer le texte, nous pouvons ajouter des étiquettes, nous pouvons les supprimer en cliquant sur eux une fois de plus, nous pouvons alors enregistrer nos modifications et cela est ensuite affiché à l'intérieur de chaque carte. Nous pouvons ajouter coulée sur la liste, comme la maison de peinture. Il est également possible de cliquer sur ce bouton et de le modifier. Nous pouvons ajouter diverses étiquettes, enregistrer nos modifications, et tous ces changements sont immédiatement envoyés à Firebase puis mis à jour en temps réel dans notre application. Cela signifie que nous n'avons pas besoin de rafraîchir notre application pour récupérer les données de notre back-end. Tout ceci est immédiatement mis à jour, comme vous le voyez ici. Nous pouvons également supprimer nos cartes, nos listes, et aussi nos tableaux, et ceux-ci sont tous reliés ensemble. Par exemple, lorsque nous créons un nouveau tableau, une liste ou une carte, ceux-ci sont tous créés par un certain utilisateur. L' ID utilisateur est stocké dans chacun d'eux, ce qui signifie par exemple, si nous allons dans l'un de ces tableaux et ensuite nous supprimons cela, cela supprimera également les listes et les cartes correspondantes qui sont liées à chaque tableau. Nous pouvons également nous connecter avec plusieurs utilisateurs, et chaque utilisateur n'aura accès qu'à leurs propres tableaux que vous avez créés, et vous pouvez le voir si nous nous déconnectons puis nous connectons en tant qu'utilisateur différent. Cliquez sur le bouton de connexion. Ensuite, nous sommes redirigés vers la vue de notre tableau où nous avons un ensemble différent de tableaux créés par cet utilisateur. Ajoutons une liste d'exemples à l'intérieur ici, et aussi des planches. Ceux-ci sont complètement indépendants de cet utilisateur. Ce sera l'application que nous allons construire au cours de ce cours. Ce projet nous permettra de démontrer tout ce que vous devez savoir sur React pour construire des applications, nous en apprendrons aussi beaucoup sur Firebase, y compris la base de données en temps réel, l' authentification, l'obtention de mises à jour dans en temps réel, et enfin, à la fin du cours, nous mettrons notre site en direct, où nous allons pousser cela à la production pour le reste du monde à voir. J' espère que vous êtes aussi excité que moi de commencer avec ce cours. Dans la prochaine vidéo, nous allons parcourir quelques choses qui sont nécessaires pour ce cours avant de passer à la section suivante où nous commençons à travailler sur ce projet. 3. Ce dont vous aurez besoin pour ce cours: Pour y aller, il n'y a que quelques choses dont vous aurez besoin et le fait que vous suivez un cours de technologie signifie probablement que vous avez déjà certaines de ces choses de toute façon. Tout d'abord, j'utiliserai Chrome comme navigateur web, mais vous êtes libre d'utiliser tout ce que vous préférez. Cependant, je recommande soit Chrome ou Firefox, puisque les outils de développement React, que nous allons utiliser est seulement actuellement disponible pour ces deux navigateurs. Pour obtenir les outils de développement, faites une recherche d'outils réactifs et comme vous pouvez le voir ici, nous avons les options pour ajouter dans Chrome ou aussi ajouter à Firefox que vous pouvez trouver à partir de ce lien ici. Je vous recommande d'aller de l'avant et de télécharger ces pour Chrome ou Firefox, et cela va vraiment aider tout au long de ce cours. Ensuite, nous avons le téléchargement de noeud JS, qui est disponible à partir de nodejs.org. Nous n'utiliserons pas node comme serveur back-end ou Web, mais il est nécessaire pour beaucoup de l'outil dans lequel nous utilisons lors du développement local. Allez de l'avant et téléchargez la dernière conversion chromée pour votre système d'exploitation, puis cliquez sur « Suivant » à travers l'installation. Nous avons également besoin d'un outil d'éditeur de texte, et j'utiliserai Visual Studio Code, que vous pouvez télécharger à partir de Code.VisualStudio.com. Vous pouvez en utiliser d'autres si vous préférez. Mais c'est un que j'aime vraiment et je vais utiliser tout au long du cours. Il dispose également d'un terminal intégré, qui fonctionne bien et nous en profiterons lors de la construction de nos projets. Encore une fois, n'importe quel terminal est également bien à utiliser si vous voulez utiliser quelque chose de différent. Mais pour ce cours, j'utiliserai celui intégré au s-code. Si vous souhaitez utiliser cela, je vous recommande de télécharger pour votre machine, puis de passer par le processus d'installation habituel pour votre ordinateur et ensuite c'est à peu près tout ce dont nous avons besoin pour aller de l'avant. Tout ce que nous avons besoin d'utiliser, comme tous les paquets de MPM, nous allons télécharger au fur et à mesure que nous allons suivre le cours. Passons maintenant à tout savoir sur React dans la section suivante. 4. Créer une application React: Dans React jours précédents, la création d'un nouveau projet impliquait beaucoup de travail d'installation. Nous avons dû installer et configurer des outils tels que Bubble et Webb Park et le temps d'installation pouvait différer beaucoup de débutants. Maintenant, nous avons un excellent outil appelé Create React app, qui est un moyen vraiment rapide et simple de commencer avec réagir sans être pris en charge dans toute la configuration initiale et la configuration et il est également officiellement pris en charge aussi. Nous utilisons l'application Create React à partir du terminal, mais ce ne sont que quelques commandes, alors ne vous inquiétez pas, si vous n'êtes pas un utilisateur de terminal régulier. En fait, nous pouvons même utiliser celui fourni dans Visual Studio Code. Ouvrons Visual Studio Code. Si nous allons au terminal et au nouveau terminal, si vous avez également un terminal séparé que vous aimeriez utiliser aussi, c'est complètement correct et ce n'est pas un problème à le faire. Par défaut, il s'ouvrira dans le répertoire personnel. Nous pouvons utiliser la commande CD juste pour nous en assurer, donc tapez CD puis Entrée, puis nous allons l'emmener dans votre répertoire d'utilisateurs racines. Nous pouvons ensuite taper LS. Cela nous donnera ensuite une liste de fichiers et de dossiers pour l'utilisateur. Remarquez le bureau ici et c'est là que je vais ajouter mes projets. Je vais sur CD dans le bureau et appuyez sur Entrée. Vous pouvez créer ce projet n'importe où sur votre machine que vous préférez. Je veux garder cela sur le bureau pour un accès facile. Ensuite, nous voulons exécuter la commande NPX, créer l'application React, séparés par des traits d'union. Ensuite, le nom de notre projet, que je vais appeler réagit Trello et puis appuyez sur Entrée. Cela peut prendre un peu de temps à s'exécuter car il doit extraire tous ces scripts, dépendances et modules pour réagir à l'exécution. Notez la commande NPX au début plutôt que NPM. NPX est un outil conçu pour installer et gérer facilement les packages CLI. Il nous permet essentiellement d'utiliser Create React app, juste cette fois sans avoir besoin de l'installer sur notre système. Donnez-nous quelques minutes pour terminer, puis arrêtez la vidéo et je vous verrai quand cela sera terminé. Ok, donc une fois que tout est installé, nous devons changer dans notre répertoire de projet. Nous pouvons le faire soit en tapant dans CD réagir Trello, comme il est dit dans le terminal, ou nous pouvons glisser sur le projet à partir de notre bureau. Prenez le dossier du projet, faites-le glisser dessus, puis ouvrez ceci pour le faire glisser dans le code Visual Studio. Vous verrez que cela ouvre automatiquement le terminal à l'emplacement de notre projet. Vous pouvez maintenant démarrer le serveur de développement. Nous le faisons avec une commande appelée NMP stars. Tapez ceci et appuyez sur « Entrée ». Cela va ensuite configurer le serveur de développement sur localhost 3000. Cela s'ouvrira automatiquement dans le navigateur ou peut naviguer vers localhost 3000, juste comme ça, appuyez sur « Entrée » et maintenant avoir une application React de base en cours d'exécution dans le navigateur. C' est pourquoi nous devons aller voir notre projet à l'avenir. Sauf si vous exécutez sur un port différent. Si vous voulez apporter des modifications, tout ce que vous devez faire est d'aller dans l'éditeur de texte, puis dans le répertoire source et le app.js. Ne vous inquiétez pas de tout ce code pour le moment, allons juste ici dans les éléments p et dire, « J'apprends à réagir » sauver ceci. enregistrement de ce fichier entraînera automatiquement le rechargement et la mise à jour du navigateur avec nos modifications, que nous venons d'ajouter. Nous n'avons pas besoin de nous soucier de rafraîchir le navigateur après chaque changement. C' est tout maintenant pour la configuration de notre projet. Ensuite, nous allons voir ce que tous ces fichiers et dossiers sont qui ont été créés pour nous en utilisant Create React app. 5. Fichiers de projet et dossiers: Juste avant d'aller plus loin, je veux vous donner un aperçu rapide de ce que sont les fichiers et dossiers en ligne dans notre projet, puisqu'ils ont été générés pour nous à l'aide de l'application Create React. Je ne veux pas supposer qu'on sait ce qui se passe ici sans aller plus loin. Tout d'abord, tout en haut, nous avons le dossier des modules de noeud. C' est là que tous nos projets, modules ou paquets sont stockés. Ce répertoire n'est pas spécifique à réagir. Ceci est typique de tous les projets de nœuds. Cela nécessite beaucoup ici si nous l'ouvrons, et cet emplacement est également où tous les paquets que nous installons seront également sauvegardés. Plus tard dans le cours, nous allons télécharger des paquets tels que Firebase et React routeur en utilisant NPM. On les verra sauvés ici. C' est aussi là que notre paquet réel reacts est enregistré. Si nous faisons défiler vers le bas, il y a beaucoup de choses dont nous avons besoin pour réagir, réagir Dom, et aussi les scripts React, nous allons jeter un oeil dans un instant quand nous arriverons au paquet JSON. Ensuite, nous avons donc le dossier public. Le dossier public contient nos fichiers statiques, tels que toutes les images que nous voulons utiliser, ainsi que tout HTML. React a ce fichier index.html. Si vous l'ouvrez, faites défiler vers le bas, ce n'est pas beaucoup de contenu à l'intérieur ici. Si nous passons à notre projet à l'intérieur du navigateur, puis aller à afficher la source de la page. C' est la page que vous voyez ici. Il ne montre aucun contenu HTML réel ici. Même si nous voyons quelque chose dans le navigateur. C' est à cause de la balise de script tout en bas, qui est celle-ci ici. Rappelez-vous plus tôt, nous avons dit que Create React app, enlève les photos de configuration, afin que nous puissions nous concentrer sur la création de notre application React. Eh bien, c'est l'une des choses qu'il fait. Il utilisera web pack pour regrouper tous les fichiers et les actifs que nous avons dans nos projets. Créez ensuite un fichier bundle en sortie. Ce fichier est ensuite injecté dans les projets en utilisant le script en bas. Il les injecte dans n'importe quel élément DOM que nous choisissons. Actuellement, il sera sorti juste au-dessus de la div avec l'id des racines. C' est un juste ici. Nous pouvons cliquer sur ce lien de bundle, qui est le dernier lien juste ici, et l'ouvrir dans un nouvel onglet. C' est tout le contenu de notre bundle. Ne vous inquiétez pas de tout ce qui est à l'intérieur ici en ce moment, tout est juste du code généré pour le développement. Si nous faisons une recherche, afin de parcourir la recherche de commande ou de contrôle F, nous pouvons rechercher le texte que nous avons ajouté, et nous cherchons, « J'apprends réagit ». Nous voyons que ce texte est ici. Ce fichier HTML peut également être utilisé pour ajouter des scripts ou des téléphones aussi. Mais cela peut également être souvent ajouté en tant que modules de noeud. Le prochain dossier que nous avons est la source et c'est là que nous allons passer la plupart du temps pendant ce cours. C' est là que nous allons ajouter notre code brut, tous nos fichiers JavaScript sur les composants. Tous ces éléments seront inclus dans notre bundle, que nous venons d'examiner. C' est ainsi qu'ils en font dans notre application finale. n'y a pas de structure stricte sur la façon dont nous pouvons le faire. Nous sommes assez libres d'organiser tous les fichiers et dossiers comme nous l'aimons. Bien qu'il soit courant d'inclure un dossier de composants dans le répertoire source, nous le ferons bientôt. Nous obtiendrons beaucoup de composants d'écriture pratique aussi. Un composant est fondamentalement un bloc de code, que nous examinerons plus en détail très bientôt. Ensuite, nous avons le app.css. Il s'agit d'un fichier CSS principal qui contient un style par défaut. Dans React, il est assez fréquent de voir une structure comme celle-ci, où nous avons un fichier CSS par composant, et dans le cas voici le app.js. Ce app.js est l'un où nous avons fait nos changements dans la dernière vidéo. Encore une fois, React est assez flexible avec les choses. Mais cela est souvent utilisé comme un composant principal de niveau supérieur, ou un wrapper pour le reste de notre projet, nous allons utiliser ce fichier pour afficher notre en-tête car ce sera sur toutes les pages, puis ci-dessous où nous utilisons un routeur pour basculer entre différents composants en fonction de la page que nous affichons. Après cela, nous avons le app.test.js. agit d'un fichier si vous voulez tester notre projet React, bien que nous ne couvrirons pas les tests dans ce cours. Ensuite, nous avons le index.css. Il s'agit d'un deuxième fichier CSS contenant ces styles le concernant à notre index.js. Encore une fois, c'est juste pour la séparation et l'organisation. Je vais supprimer ce fichier pour garder tous les styles joliment ensemble dans un seul fichier. C' est un tube, je vais supprimer cela, puis ouvrir le index.js, parce que nous avons supprimé ce fichier, nous devons également supprimer cette importation du index.css, et enregistrer ce fichier. Il s'agit d'un fichier JavaScript principal qui va être responsable du rendu de notre application, le navigateur. En haut, nous importons à la fois React et ReactDom à partir de notre dossier de modules de nœuds. Dans React premiers jours, utilisé pour être dans un grand paquet de réaction. Mais puisqu'il peut maintenant être utilisé pour créer des applications mobiles avec React natives ou même des applications VR. Toutes les fonctionnalités de base sont maintenant stockées dans ce module de réaction et toutes les fonctionnalités liées aux applications web, est maintenant dans son importation séparée appelée ReactDom. ReactDom a une méthode aléatoire, que nous disons juste ici, qui est responsable du rendu du contenu au DOM. Cette méthode aléatoire prend deux choses. abord, nous avons le contenu que vous souhaitez afficher, actuellement nos principaux composants de l'application. Ce sont les principaux composants de la route, comme nous l'avons mentionné précédemment. Il est souvent utilisé comme wrapper de projet. Lorsque vous utilisez cela dans un fichier, nous devons également l'importer sur le dessus, comme nous le voyons ici. Ensuite, deuxièmement, l'emplacement où nous voulons que cette application monte deux. J' ai vu cela sur une nouvelle ligne, qui est actuellement définie sur un élément avec l'ID des racines. qui est ce que nous avons regardé plus tôt dans le index.html principal, le index.html public. C' est le div avec la racine d'ID, que nous avons vu auparavant à l'intérieur du navigateur. Donc, cela signifie essentiellement, « Prenez mon application React et placez-la ici où nous spécifions dans la page d'index. » La raison pour laquelle nous le faisons est que nous n'utilisons pas toujours React pour notre application complète. Nous avons peut-être déjà un projet existant, où nous voulons seulement utiliser réagir dans une certaine partie. Dans ce cas, notre page HTML peut avoir beaucoup de contenu existant et nous pouvons simplement ajouter un nouvel élément à monter réagir. Vous pouvez changer ça pour être tout ce que vous voulez. Nous pouvons ajouter du code js X. Ajout d'un titre de niveau deux, un titre de React Treble. Alors fermez ça. Nous allons examiner ce code js X plus en détail bientôt. Mais c'est essentiellement une syntaxe que nous utilisons généralement dans React, pour mélanger à la fois HTML et JavaScript ensemble. Si nous enregistrons ce fichier et que nous allons ensuite dans le navigateur, nous voyons maintenant que notre titre de niveau 2 a été monté sur le DOM. Si nous rechargeons la source de vue, nous voyons toujours que nous n'avons pas le contenu. Tout ce que nous avons à nouveau est cette div avec la racine d'ID où notre application React a été montée sur. Revenons tout simplement, à nos composants d'application. Ensuite, nous avons le logo.svg, qui est fourni pour les données de l'application Create React, puis aussi un fichier de service worker. Il s'agit d'un fichier facultatif permettant d'enregistrer un service worker. Nous ne couvrirons pas les techniciens de service dans ce cours, mais ils avaient l'habitude de faire fonctionner votre application hors ligne, souvent pour activer des éléments tels que les notifications push. Si vous utilisez GitHub, nous avons également un point gitignore fichier déjà configuré. Ceci est utilisé pour exclure tous les fichiers que vous ne voulez pas envoyer à GitHub, tels que les informations sensibles, contenant des mots de passe, ou les fichiers volumineux ou inutiles tels que les modules de noeud. Ci-dessous, nous avons aussi le package.json. Ce fichier n'est pas spécifique à React. C' est quelque chose que vous verrez sur un régulier pas de projets. Il contient des informations sur notre application, telles que le nom de l'application, l'auteur, ainsi que les dépendances dont nous aurons besoin pour les projets. A l'intérieur des dépendances, nous avons le réact-dom listé, nous avons réagi et nous avons aussi les scripts réact-script. React-scripts est une bibliothèque utilisée par Create React app, et comprend tous les scripts et la configuration dont nous avons besoin pour exécuter réaction dans le navigateur. Il convertit les dépendances dont nous avons besoin, les choses au hasard, les bulles et le web park dans les coulisses, puis les regroupe toutes dans une seule bibliothèque. Cela rend également la maintenance de tous ces paquets beaucoup plus facile, car nous avons juste une bibliothèque à craindre lors de la mise à niveau. Ces dépendances dans un projet no seraient ajoutées à notre dossier de modules de noeud, après l'exécution d'une commande d'installation MPM. Tout cela est également être placard pour nous lorsque nous mettons en place le projet, dessous de nos dépendances, nous avons aussi quelques scripts. Nous utilisons déjà le script de démarrage avec MPM start start start start start de notre projet au début. Il y a aussi une commande pour construire nos projets pour la production, un pour les tests. Ensuite, nous pouvons également éjecter des scripts React. Nous avons parlé un peu jusqu'à présent de l'influence de la configuration dans les coulisses. Cependant, nous pouvons utiliser ces scripts d'éjection pour passer en revue toutes ces magies cachées, puis placer des copies de notre configuration et de nos dépendances, telles que web pack et bulle, puis les placer directement dans notre projet afin que nous puissions éditer ces nous-mêmes. Il y a aussi quelques informations à ce sujet dans le fichier readme aussi, enfin avoir un fichier yarn.lock, nous n'avons pas besoin de trop vous inquiéter à ce sujet car a est auto-généré, et contient une liste de nos dépendances et de la version exacte que nous utilisons. Ceci est pour notre structure de fichiers et de dossiers. Nous allons nous familiariser beaucoup plus avec cela au fur et à mesure que nous construisons notre application React. Ensuite, nous allons examiner de plus près l'utilisation des composants. 6. Un regard plus proche des composants: Dans la dernière vidéo, nous avons mentionné le composant de mot plusieurs fois. Si vous n'êtes toujours pas sûr de ce qu'est un composant, nous allons maintenant examiner ce qu'il est. Un composant est une petite partie typique de votre site Web, que vous pouvez regrouper et y placer dans son propre fichier. Il peut également être réutilisable. Si nous avions un blog, par exemple, composant pourrait être un billet de blog. Ce blog composants serait alors réutilisé pour chaque post que nous avons. Même s'ils sont réutilisables, nous pouvons toujours y alimenter des données pour les rendre dynamiques. Nous pourrions alimenter des composants de blog, un titre de blog, un texte de blog, et aussi une image. Pour voir un exemple du monde réel, c'est le projet que vous allez construire dans ce cours. En utilisant quelque chose comme le HTML statique, nous allons finir avec beaucoup de code en double. Chaque liste, qui est les sections libres de jardin, chambre et cuisine, ainsi que chacune des cartes individuelles sur la liste aurait besoin de son propre balisage HTML. Cela signifierait beaucoup de code HTML en double. Cependant, la façon React est de diviser les choses en morceaux plus petits appelés composants. En haut, un en-tête est un composant, et nous allons le stocker dans un fichier de point d'en-tête js. Ces composants peuvent également être rendus sur chaque page, évitant les coordonnées dans chaque page, comme nous le ferions avec le HTML normal. Sous l'en-tête de cette page, nous avons également des composants de carte dans un fichier appelé Board dot js acheté. Un utilisateur peut avoir plusieurs cartes, sorte que ces composants peuvent également être réutilisés. Il est transmis dans des données appelées accessoires pour permettre à des choses telles que le titre du tableau de changer pour chaque vue. Dans ce cas, le titre est maison. Imbriqué à l'intérieur de cette carte, nous avons une liste de composants. Encore une fois, nous avons un composant rendu pour chaque liste dans notre base de données. C' est une autre bonne utilisation pour un composant, car nous pouvons à nouveau le réutiliser, puis transmettre des données ou des accessoires à chacun, tels que le titre et la fonctionnalité pour ajouter une nouvelle carte. Ensuite, comme vous l'aurez deviné, chaque carte est aussi un composant, recevant des accessoires tels que le texte et aussi les étiquettes. Chaque fois qu'une nouvelle liste ou carte est ajoutée, le composant est de nouveau réutilisé. Tout ce que nous voyons ici est un enfant des principaux composants App dot js, que nous avons examiné plus tôt. Voici comment les composants sont utilisés dans React. n'y a pas de règle difficile et rapide quant au moment où certaines choses doivent être transformées en composants. C' est quelque chose que vous devez généralement comprendre par vous-même lorsque vous créez un projet. Comme un guide très général, nous devrions utiliser des composants si quelque chose sera réutilisé ou pour regrouper les fonctionnalités associées. Il y a aussi des occasions où un fichier devient trop volumineux. Cela peut également être un cas pour diviser les choses en composants plus petits, aussi. Maintenant, nous avons un aperçu de l'apparence de nos composants. Commençons à les créer dans nos projets. 7. Composants en action: Revenons à notre projet, je vais créer un dossier de composants dans le répertoire source. Dans la barre latérale, créons un nouveau dossier appelé composants. Ce dossier est purement pour l'organisation et n'est pas une exigence lors de l'utilisation de réaction. Nous pouvons également diviser cela en sous-dossiers deux, et nous le ferons plus tard dans le cours. Par exemple, vous pouvez avoir un dossier d'en-tête à l'intérieur contenant tous les composants d'en-tête, etc. Si nous le voulions, juste pour garder nos dossiers plus organisés. Ensuite, nos trois composants, que nous avons recherchés à partir des diapositives sont le tableau, la carte et la liste. Dans le répertoire Components, créez un nouveau fichier. Le premier sera Board.js, en majuscules B. Encore une fois dans le dossier components, le Card.js avec le capital C. Le troisième est pour List.js avec une majuscule L. C'est une convention de dénomination commune pour commencer un composant React avec une lettre majuscule. Tout d'abord, passons au Board.js. Pour chaque composant dans lequel nous utilisons réaction, nous devons d'abord importer le paquet React à partir du dossier Node Modules. Nous pouvons le faire avec l'importation React de React. Réagissez ici en étant le nom du module Node. Alors celui-ci est un alias que nous allons utiliser dans ce fichier. Même si nous exigeons React chaque fichier que nous utilisons, il n'est inclus qu'une seule fois dans la construction finale. Nous n'avons pas besoin de nous soucier de plusieurs copies dans notre projet. En outre, si nous ajoutons simplement le nom du module, tout comme réagir, plutôt que d'utiliser un chemin de fichier, il sera supposé que cela est stocké dans le dossier Node Modules. Ensuite, nous devons créer une classe qui ressemble à ceci. Le nom de classe de Board étend React dot Components. Puis ouvrez les accolades. Il s'agit d'un composant standard basé sur la classe React. Plus tard, nous examinerons également un autre type de composant. Mais pour l'instant, nous allons utiliser un composant basé sur la classe car il a quelques fonctionnalités supplémentaires dans lesquelles nous allons entrer. Ensuite, en bas après ces accolades, export par défaut, un autre nom de notre classe qui est Conseil, export dans ces composants permettra alors d'être importé et réutilisé dans d'autres fichiers. Ci-dessus, nous étendons ou héritons toutes les propriétés de React dot Components. React dot Components nous donnera accès à diverses méthodes optionnelles, telles que les méthodes de cycle de vie, que nous aborderons bientôt. Mais celui qui est requis est la méthode de rendu. La méthode de rendu, comme cela semble, est celle dont nous avons besoin pour rendre certains JSX au navigateur. Ajoutons la méthode aléatoire à l'intérieur ici, qui va retourner quelques données. Les données que nous allons retourner vont être un simple code JSX. Ajoutons quelques éléments HTMLP avec le texte des composants de carte. Si nous sauvegardons ce fichier et passons ensuite dans le navigateur, et nous ne voyons aucun des composants de la carte sur l'écran. Pour être en mesure de voir cela, nous devons dire à React où nous voulons que cela soit placé. Allons pour le app.js du parent, puisque nous avons exporté ces composants de carte tout en bas, nous pouvons maintenant l'importer dans le fichier où nous voulons l'utiliser. Nous allons le faire dans le app.js, besoin d'importer nos composants de carte. Comme il ne s'agit pas d'un module de nœud, nous devons également spécifier le chemin d'accès du fichier. Ceci est à l'intérieur du dossier des composants et le nom était Board. Nous n'avons pas besoin de l'extension dot js puisque cela est supposé. Nous pouvons alors placer les composants de la carte exactement là où nous voulons qu'elle s'affiche. Allons-y et place du texte que nous avons ajouté plus tôt. Slash supprimer ceci, puis le nom de notre composant qui était Conseil. C' est un élément auto-fermant. Ce qui signifie ajouter la barre oblique à la fin. C' est ainsi que nous pouvons placer un composant dans notre code en utilisant React. Il ressemble simplement à une balise HTML à fermeture automatique, telle qu'une image. Comme une note de côté rapide, vous avez peut-être remarqué que ce fichier app.js n'a pas de méthode de rendu. C' est parce qu'il est appelé un composant fonctionnel, et nous allons les examiner plus tard. Sauvegardons ce fichier et revenons au navigateur. Nous pouvons maintenant voir que notre composant de conseil est en train de jouer à la place de notre texte. Vous pouvez également faire la même chose pour le composant de liste. Retour à la barre latérale, allez dans le List.js. Tout comme avant, nous devons d'abord importer React de réaction. Cela va également être un composant basé sur une classe qui va être appelé List. Cela étendra également les composants React dot. Nous pouvons ensuite utiliser toutes les méthodes fournies par React. À l'intérieur, nous allons également ajouter la méthode de rendu pour afficher notre JSX à l'écran. Nous allons ensuite retourner quelques JSX à l'intérieur ici. Tout comme avant un texte simple fera pour juste lister le composant. Ensuite, tout de suite à la fin, nous avons également besoin d'exporter par défaut, le nom de notre composant, qui va être Liste. Cela sera imbriqué à l'intérieur des composants de la carte. Vous pouvez l'importer à l'intérieur du fichier Board.js, enregistrer ce fichier et vous diriger vers le conseil d'administration. Tout en haut, nous allons également ajouter une importation pour notre liste. Encore une fois, puisque ce n'est pas dans le dossier Node Modules, nous devons également ajouter le chemin d'accès du fichier. Ce composant de liste est à côté de la carte, donc nous allons simplement ajouter une barre oblique, puis le nom de la liste. La dernière étape pour que cela s'affiche est d'aller dans notre méthode de rendu, puis nous pouvons l'ajouter comme un élément auto-fermant. Liste, comme nous le savons déjà, les composants sont réutilisables, ce qui signifie que nous pouvons l'ajouter autant de fois que vous le souhaitez. Dupliquons ceci, et sauvegardons ceci et passons au navigateur. Je vois une erreur à l'intérieur du navigateur. Généralement, en ce qui concerne les messages d'erreur, React est assez bon pour nous faire savoir où se trouve le problème, et nous donner un indice sur la façon de résoudre les choses. Le message d'erreur indique : « Les éléments JSX adjacents doivent être enveloppés dans une balise enfermant. Vous vouliez un fragment JSX ? » Nous allons bientôt regarder ce fragment JSX. Mais cette erreur est essentiellement causée par un composant n' ayant pas de wrapper dans le Board.js. Dans notre méthode de rendu, nous retournons trois éléments différents. Tous ces trois éléments sont effectivement côte à côte. Lors de l'utilisation de React cependant, un composant doit avoir un élément parent en tant que wrapper. Il peut être n'importe quel élément que nous choisissons, mais un div ici serait bien. Ajoutons un div, l'ouverture de la balise en haut. Nous pouvons déplacer la balise de fermeture vers le bas, puis nicher à l'intérieur de nos trois éléments. Si nous enregistrons maintenant ceci et revenons au navigateur, nous voyons une erreur. Cela devrait être étendu avec un S à la fin. Donc à notre liste. On y va. Enregistrez ceci, puis sur le navigateur. Maintenant, nous allons voir nos composants de carte, puis imbriqués à l'intérieur, nous avons nos deux composants de listes puisque nous avons ajouté ceci dans notre méthode de rendu deux fois. Nous pouvons maintenant passer aux composants de la carte, qui suivront également un modèle similaire à celui de la carte et de la liste. Nous importons d'abord React en haut à partir du dossier Node Modules. Ensuite, nous pouvons créer un composant basé sur une classe. Class Card étend React dot Component, nous accolades accolades, puis nous pouvons ajouter notre méthode de rendu requise, qui va retourner quelques JSX. Tout comme avant, nous allons également ajouter les éléments p, en sortant simplement les composants de la carte. Alors n'oubliez pas, en bas, nous devons exporter ce fichier pour pouvoir l'utiliser dans d'autres composants. Exporter par défaut, le nom de notre classe, qui est Carte. Ces cartes sont imbriquées à l'intérieur du composant list , nous allons donc l'importer dans le fichier List.js. On peut importer ça. Maintenant, en haut du dossier. Ceci est également à côté de la liste, donc nous avons juste besoin de la barre oblique de point, puis le nom du fichier, qui est Card. Maintenant, dans la méthode de rendu, nous mettons dans l'élément p qui vient de découper cela, et ensuite nous pouvons ajouter un div environnant afin que nous n'obtenions aucun message d'erreur dans la console. Nous pouvons coller cela à nouveau et ajouter à l'intérieur autant de composants de la carte que nous le souhaitons. Je vais copier et coller ceci en trois fois, puis sur le navigateur. Maintenant, nous verrons notre sortie de composant de carte une fois. Nous avons ensuite nos deux composants de listes, qui est celui-ci et aussi celui-ci parce que nous avons sorti la liste deux fois ici. Chaque composant List a alors trois cartes imbriquées à l'intérieur, c'est pourquoi nous voyons tant de composants à l'écran. Si nous passons aux outils de développement, nous ferons un clic droit, puis inspecterons. À l'intérieur de l'onglet Elements si nous regardons la structure HTML, nous avons un div environnant avec un composant de carte imbriqué à l'intérieur. Ensuite, nous avons un div complet, qui est pour notre liste, qui contient les trois composants de carte à l'intérieur. Après cela, nous avons un deuxième div, qui est pour nos deuxième composants de liste. Encore une fois, cela a également nos trois composants de carte à l'intérieur. Aussi dans la console, nous verrons que nous avons quelques messages d'erreur. Si nous allons vers le haut, nous voyons un élément p ne peut pas apparaître comme un descendant de p. C'est à cause de la façon dont nous avons structuré nos composants. Si nous allons à l'enveloppe principale, qui est app.js, nous avons les composants de carte externes imbriqués à l'intérieur de ces éléments p. On peut juste déplacer ça dehors. Enregistrez ce fichier afin qu'il apparaisse le long des éléments et maintenant nous n'avons plus de zones à l'intérieur de la console. Maintenant, nous allons avoir notre premier regard sur le fonctionnement des composants. Maintenant, nous allons augmenter les choses dans la section suivante, où nous allons commencer à travailler avec les données et aussi les transmettre aux composants. 8. Premier regard sur l'état et JSX: React est une bibliothèque de vues front-end, donc nous avons besoin de certaines données pour travailler. Plus tard, nous nous concentrerons sur l'utilisation de Firebase comme moteur pour sauvegarder les données non récupérées. Les deux en ce moment, je vais utiliser des exemples de données pour travailler avec. J' ai fourni quelques exemples de données, que vous pouvez télécharger et utiliser pour ce cours, que j'ai ici enregistré dans le tableau de bord. Commençons par créer un nouveau fichier dans notre projet. Installez cet exemple de données, nous voulons l'ajouter dans la source. Créez un nouveau fichier. Je ne veux pas appeler cela le sampledata.js. Si nous ouvrons cet exemple de données, nous pouvons alors copier le contenu en sélectionnant tous. Ensuite, copiez et collez ceci dans notre exemple de fichier de données. s'agit simplement de quelques données, sorte que nous pouvons travailler avec des composants. Nous avons un tableau de tableau, qui est simplement trois planches différentes que vous pouvez vivre. Ci-dessous, nous avons aussi quelques listes. Ceux-ci sont liés à la carte par l'ID de la carte. Ils ont également un ID et un titre, puis il imbriqué à l'intérieur aura quelques comptes individuels. Cela nous donnera maintenant quelques données de base avec lesquelles travailler dans nos composants. Lors de l'utilisation de réaction, les données actuelles qui n'ont pas de composants, sont appelées état. State est un objet sur un composant qui contient des données qui peuvent changer. Par exemple, utilisera l'état dans le composant liste pour stocker toutes les voitures Coran dans cette liste. L' État est l'indépendance de chaque composante deux. On avait des listes gratuites, comme on l'a fait ici. L' état sera différent pour chacun. Puisque toutes les données de voiture sont différentes, l'état de la liste de jardin serait un tableau de cartes appelées nouveaux ventilateurs de table non fixes. Les composants de la liste pour la chambre une aurait un tableau d'état de nouveaux meubles, murs de peinture, et ainsi de suite. Une autre partie utile de l'état est qu'il est dynamique. Ce qui signifie que si l'état change, par exemple lorsqu'un utilisateur supprime une carte, il mettra à jour tous les composants qui utilisent des données. L' état peut également être quelque chose de tel que si l'utilisation est actuellement connectée, si un modal pop-up est actuellement ouvert, ou le nombre de likes qu'un post a. Pour jeter un premier coup d'oeil à l'état. Passons au app.js et nous reviendrons pour ajouter nos objets d'état. Juste après la ligne de fonction vers le haut. Nous pouvons créer notre objet d'état. Ensuite, à l'intérieur, nous pouvons ajouter n'importe quel état que nous voulons. Commençons par ajouter un titre en gras et définissons cela comme une chaîne d'idées maison. Cet état peut contenir tous les noms et valeurs des données que nous voulons. Mais rappelez-vous, ce n'est que les états initiaux et il peut changer ou être mis à jour à tout moment. Si nous sauvegardons ce fichier et revenons au navigateur, retournez dans notre projet. Nous voyons dans le message d'erreur de l'état n'est pas défini. Cela se produit parce que les états ne peuvent être utilisés que sur un composant de classe. N' oubliez pas que lorsque nous avons créé la carte répertoriant les composants de la voiture, nous avons créé cela comme une classe. Alors que si nous allons au app.js, qui est automatiquement généré pour nous, nous avons un composant de base de fonction. Ce composant de fonction est idéal pour une fonction simple qui prend juste toutes les données comme un accessoire. Nous regarderons les accessoires très bientôt. Ensuite, il rend du contenu au navigateur. Permettez-lui juste de vous confondre encore plus avec la version 16.8 de réaction, ils ont introduit quelque chose appelé Hooke, ce qui nous permet de faire plus avec les composants de fonction, ce que nous ne pouvions pas faire auparavant. Mais ce n'est pas quelque chose dont nous devons nous inquiéter pour l'instant. Donc, pour ajouter l'état, ce que nous devons faire est de convertir cela en composants basés sur la classe. Ce n'est que quelques étapes simples. La première chose que je vais faire est de nettoyer cette déclaration de retour et de supprimer tout le code inutile. Sortons l'en-tête et aussi le nom de classe de App. Donnez-nous une sauvegarde, maintenant nous allons juste avoir un div vide à l'intérieur de notre déclaration de retour. Maintenant, nous devons remplacer cette première ligne de fonction App par une classe comme nous l'avons fait dans le tableau. Nous devons donc étendre les composants de réaction. Retirez ceci. Ceci est un composant basé sur la classe qui est appelé App. Cela ira dans les extensions, réagira tous les composants, veillant à ce que nous ayons toujours les accolades entourant tout ce code. Ensuite, comme nous l'avons mentionné précédemment, un composant de classe doit avoir une méthode aléatoire. Nous devons entourer la déclaration de retour avec ceci. Si nous pouvions simplement retourner l'instruction, nous pouvons ensuite ajouter la méthode aléatoire à l'intérieur des accolades placées dans l'instruction return, enregistrer en tant que fichier, maintenant ne devrait voir aucune erreur dans le navigateur. Retour à notre état dans le app.js. Nous pouvons accéder à notre état en utilisant les accolades à l'intérieur de la div. Ajoutons des éléments IP pour produire nos états. Les accolades. Nous pouvons accéder à l'état avec cet état point. Ensuite, le nom de notre état appelé tous les titres, nous donne une sauvegarde, puis sur le navigateur. Maintenant, comment le titre du conseil d'administration des idées de maison. Tout d'abord, c'est ce qu'on appelle le code JSX, qui nous permet de mélanger JavaScript dans nos éléments HTML. Ces accolades qui entourent les états sont utilisées lorsque nous voulons sauter dans JavaScript, puis exécuter le code à l'intérieur. Nous pouvons ajouter n'importe quel JavaScript que nous voulons dans ces accolades. Donc, nous pouvons faire quelques JavaScript simple comme 5 plus 10. Ensuite, nous voyons la valeur de 15. Tout ce que nous pouvons faire, c'est quelque chose comme un journal de console. Ajoutons juste une chaîne de bonjour. Enregistrez ceci, et puis nous voyons la valeur de bonjour dans la console. Maintenant, retirons notre journal de console et le 5 plus 10. Maintenant, nous allons mettre à jour notre état avec la valeur de nos échantillons de données. Eh bien, comment pourrions-nous mettre à jour ou définir l'état ? Eh bien, nous pouvons le faire avec une méthode appelée set state. Tout d'abord, importons nos échantillons de données. Nous pouvons l'utiliser dans le fichier. Importez des données à partir d'une valeur de chaîne de barre oblique de point, puis échantillonnez des données. Ensuite, nous pouvons configurer notre état initial de carte pour être un tableau vide. Changons le titre du tableau pour être BoardT. Enregistrez ceci comme un tableau vide. Nous pouvons l'obtenir avec une méthode personnalisée en dehors de la fonction de rendu. Mais rendre, nous pouvons créer une méthode personnalisée appelée état de mise à jour. On appellera ça dans un instant à partir d'un bouton. Mais ce sera une fonction de flèche ES6, où nous allons mettre à jour l'état avec la méthode set state. Nous pouvons le faire avec cet état de jeu de points. Ces points pointent vers notre instance de composant actuelle. L' état qui vit sur l'état de ce composant est un objet, quand il passe les accolades. L' état que nous voulons mettre à jour est ce tableau ici. Aux conseils, et je vais définir cela égal aux données. Bien que les conseils, data.boards est notre échantillon de données qui étaient importantes. L' étape suivante consiste à créer un bouton dans notre méthode aléatoire pour ensuite définir les états. Donc à l'intérieur du parent. Créons un bouton. À l'intérieur, nous pouvons ajouter un écouteur de clic. Nous cliquerions sur et définirions cela égal à cet état de mise à jour de point, qui est le nom de notre méthode. On-click est un moyen de gérer l'événement très similaire à un gestionnaire d'événements JavaScript régulier. Il suffit d'un clic, d'un changement ou d'un clic sur la souris. Avec JavaScript régulier, ce sont tous des noms en minuscules. Cependant, lors de l'utilisation de JSX, je dois être un cas de chameau, juste comme ceci. Chaque mot après le premier commence par un capital. Lorsque vous cliquez sur ce bouton, nous appelons ensuite notre méthode d'état de mise à jour personnalisée dans les accolades, que nous allons poursuivre et exécuter le code à l'intérieur ici. Après cela, nous pouvons ensuite faire un journal de console pour vérifier la valeur de l'état a été mis à jour. C'est JavaScript. Cela se passe entre les accolades et en fait, nous allons faire une console. C' est par un formaté. Nous pouvons ensuite sortir cet état point, points boards. Maintenant, vérifions cela dans le navigateur. Nous avons une erreur de mise à jour des états doit être un deux-points. Plutôt que d'égal satisfaire les deux-points. Ensuite, rechargez, cliquez sur notre bouton, et voyez maintenant un tableau avec les trois éléments d'information de nos échantillons de données. Nous avons les titres de cours gratuits, avons l'arrière-plan, l'ID et le numéro d'index. C' est ainsi que nous pouvons mettre à jour notre objet d'état en utilisant les états définis. Nous ne devrions pas être tentés, cependant, de le définir d'une autre manière, comme ceci.. state, .boards est égal à une certaine valeur. Nous avons utilisé cette méthode d'état d'ensemble pour diverses raisons. Définir this.state, .boards comme ceci, ne déclenchera pas un composant de dates si l'état change. Il peut aussi être moins performant. Depuis plusieurs appels d'état définis peuvent être regroupés en une seule mise à jour. Slash, enlève ça. Nous obtiendrons beaucoup plus d'état de mise à jour pratique pendant ce cours. Ensuite, nous allons examiner comment nous pouvons faire une boucle à travers ces données, et comment définir l'état initial lorsqu'un composant se charge pour la première fois. 9. Cycle de vie de la pièce: Avoir un bouton comme nous avons ici pour charger notre état initial n'est pas quelque chose qui est très pratique pour cette utilisation. Nous avons besoin d'un moyen de définir l'état dès que le composant se charge, et nous pouvons le faire en utilisant une méthode de cycle de vie appelée ComponentDidMount. Lorsque nous avons créé nos composants de classe, nous avons dit que la seule et seule méthode requise dont nous avons besoin est la méthode aléatoire. Il y a aussi quelques méthodes optionnelles, et une que nous allons maintenant examiner est appelée ComponentDidMount. Comme son nom l'indique, il exécutera n'importe quel code que nous ajoutons après que le composant a été monté sur le DOM. Un bon exemple d'un que nous pouvons utiliser ceci, il va être de charger les échantillons de données dans notre état. Nous allons ajouter celui-ci dans le app.js juste en dessous de nos objets d'état. Ajoutons le composant DidMount. C' est la méthode, alors ajoutez les crochets et les accolades. J' ajoute souvent mon état en haut, suivi de toutes les méthodes de cycle de vie telles que celle-ci, puis de toutes les méthodes personnalisées, puis suivi du rendu. C' est tout à fait facultatif et c'est à vous de choisir comment vous aimeriez les exposer. Mais c'est juste quelque chose que j'ai eu des habitudes de faire. ComponentDidMount doit mettre à jour l'état alors copions cette ligne d'avant, collez notre méthode d'état de jeu ici. Nous pouvons également supprimer cette méthode d'état de mise à jour, enregistrer ce fichier. Si nous allons maintenant sur le navigateur et actualiser, nous voyons maintenant notre état a été mis à jour avec la console.table sans cliquer sur un bouton. Il existe également d'autres méthodes de cycle de vie disponibles, telles que ComponentDidUpdates, qui exécutera du code après qu'une modification a provoqué la mise à jour du composant, telles que la modification des états. Nous avons également des composants équivaudront à effectuer toutes les actions que nous devons faire après qu'un composant a été monté à partir du DOM. Cela nous laisse maintenant avec les trois tableaux de nos échantillons de données. Définir les états et généralement ce que nous voudrions maintenant faire, est de parcourir ces états, puis d'afficher les données dans le navigateur. Puisque nos données sont dans un format de tableau, nous pouvons utiliser la méthode de tableau JavaScript appelée Map. C' est juste du JavaScript régulier et rien de spécifique à réagir. Si nous allons au app.js, nous pouvons descendre à la méthode aléatoire et nous allons remplacer tout le contenu par notre carte. Retirez les trois éléments à l'intérieur de notre enveloppe div. Puis à l'intérieur d'ici, puisque nous utilisons JavaScript, nous pouvons utiliser les accolades. Nous pouvons accéder à l'état comme avant, avec le début de l'état. Rappelez-vous, cela pointe vers notre instance de composant. Donc, nous pouvons accéder à l'état avec cet état point, puis le nom des planches, mais je n'ai pas appelé la méthode maquette de points. À l'intérieur, nous pouvons passer un nom variable de tableau pour chaque élément qu'il trouve dans le tableau, puis créer une fonction de flèche. Cela va être responsable de l'affichage dans chacun de nos tableaux, alors ajoutons un div qui va entourer chacun des tableaux libres dans nos données d'échantillon. Ensuite, nous allons produire trois éléments. Un pour l'ID, un pour le titre, puis un pour l'arrière-plan. Tout d'abord, créons un élément span, qui va afficher l'ID de la carte. Nous pouvons accéder à chaque carte avec cette variable de carte, puis passer l'ID. Prochain arrêt, un titre de niveau 3 qui va afficher à nouveau le titre de la planche dans les accolades. Ensuite, troisième et enfin, nous pouvons ajouter un élément p, qui va afficher les arrière-plans de la carte. Maintenant, nous pouvons voir cela et ensuite passer à notre projet dans le navigateur. Si nous rafraîchissons, nous voyons nos tableaux gratuits sur l'écran. Nous avons les idées de jardin, nous avons les idées de maison, et aussi les idées de cours en haut avec notre titre de conseil, notre carte d'identité et la couleur de fond. Cependant, à l'intérieur du navigateur, nous voyons que la console a un message d'erreur de chaque enfant dans une liste devrait avoir un accessoire de clé unique. Lors du rendu d'une liste d'éléments comme celui-ci, nous devons également ajouter une clé unique pour chaque élément. Cela permet à React d'identifier les éléments qui ont été ajoutés, mis à jour ou supprimés. Maintenant, nous pouvons utiliser l'ID de carte comme clé, mais plus tard, nous utiliserons l'ID unique Firebase pour nos articles. Retour au app.js, nous pouvons aller à l'enveloppe, qui est cette div. Nous pouvons ensuite ajouter une clé qui sera égale au Board.id. Ensuite, revenez sur le navigateur, je vais maintenant voir notre message d'erreur a maintenant disparu. Ces clés doivent être uniques, donc si nous avions plus d'une carte avec la même clé, cela provoquera une erreur dans la console aussi. Dans la vidéo suivante, nous allons remplacer ces éléments rendus un composant réel et découvrir comment nous pouvons transmettre des données à l'aide d'accessoires. 10. Passer des données comme accessoires: Dans la dernière vidéo, nous avons affiché chaque élément du tableau en sautant à travers et je vais mettre dans les éléments HTML. Maintenant, nous allons remplacer ces trois éléments, qui était l'ID de la carte, la carte [inaudible] et la couleur de fond par un des composants de la carte. Si nous passons au app.js, nous avons déjà les composants de la carte importés en haut du fichier. Donc maintenant, nous pouvons utiliser cela à côté de la méthode de carte à la place de tout le code existant. Plutôt que ce DIV surround, nous pouvons remplacer cela. Ensuite, à l'intérieur de la méthode de la carte, nous allons simplement sortir la carte. Si je sauvegarde maintenant cela et passe au navigateur, il y a beaucoup de choses qui se passent ici. Ainsi, nous pouvons nettoyer les composants de la carte pour simplifier les choses. Alors passons au board.js, actuellement je vais mettre dans le titre. Ensuite, deux composants de liste à votre place est juste avec le titre des composants de carte. Si nous sauvegardons cela, les choses deviennent beaucoup plus claires puisque nous sommes maintenant sortis dans nos trois tableaux. Un pour chaque élément de notre échantillon de données. Dans le app.js, juste parce que nous avons ces composants de carte imbriqués à l'intérieur, cela ne signifie pas qu'il hérite de toutes les données dont il a besoin. Nous devons transmettre toutes les données à la carte en utilisant des accessoires, les accessoires sont un moyen que nous transmettons des données aux composants enfants, c'est-à-dire que les accessoires sont toujours transmis dans l'arbre des composants. C' est l'une des règles d'or de réagir. Nous avons transmis des données en tant qu'accessoire, avec l'état nous les soulevons toujours, ce qui signifie que si nous avions un état qui est partagé par deux composants, nous élevons toujours l'état à un composant parent. Ainsi, les deux composants peuvent alors y avoir accès. Nous avons transmis des accessoires comme un attribut HTML, puis lui avons donné un nom et une valeur. Ainsi, par exemple, nous voulons transmettre nos accessoires de cette information de carte à ces composants de carte. Nous pouvons ajouter les attributs et nous allons définir ce nom d'accessoire à la carte. Les données que nous voulons transmettre seront dans les accolades et ce sera les données de notre carte. Ajoutons le tableau ici, donnez ceci une sauvegarde. Nous pouvons ensuite accéder à l'hélice de la carte à l'intérieur des composants de la carte. Alors dirigez-vous vers le board.js. La façon dont nous y accédons est très similaire à ce que nous avons fait avec états plutôt que [inaudible] à l'intérieur des accolades, nous accédons aux accessoires avec ce top accessoires. Le nom de l'accessoire que vous transmettez était le tableau. Donc, ce top accessoires à bord. Ensuite, nous avons accès au titre du plateau, comme nous l'avons fait auparavant dans la dernière vidéo. Avec le navigateur, nous voyons maintenant nos trois titres de plateau, bien sûr, maison, et idées de jardin. Nous pouvons également transmettre des accessoires vers le bas plus d'un composant niveau 2. On va couvrir ça très bientôt. Maintenant, je veux mettre cela en pratique un peu plus en créant la page d'accueil, qui affichera un aperçu des composants du tableau. Jetez un oeil au projet final. C' est ce que nous allons créer. Il y aura un aperçu de la carte des composants pour chacune des cartes sur l'écran. Ensuite, si nous cliquons dessus, il sera pris à la vue de la pension complète. Créons cela à l'intérieur d'un nouveau dossier de composant, ouvrez la barre latérale. Nous pouvons organiser les composants en créant un dossier Pages à l'intérieur ici. Comme dans ce dossier Pages n'a aucune différence sur nos composants. Le seul changement que nous devons faire est le chemin du fichier lors de l'importation. À l'intérieur de ce dossier de pages, je vais créer notre fichier, la vue [inaudible] scène et appeler ce home.js. Accueil est aussi un composant mais comme cela va être une vue de page, je l'ai ajouté au dossier Pages pour garder les choses plus organisées. Maintenant, nous pouvons aller de l'avant et créer nos composants en important réaction de 'react'. Cela va également être un composant de classe, qui va étendre React.Components. Les accolades, cela nécessite la méthode de rendu, qui va retourner la somme JSX. Tout ce que je vais ajouter pour l'instant est un titre de niveau 1 avec un titre de maison. La dernière chose à faire en bas du fichier est d'exporter également cela avec les valeurs par défaut d'exportation. Le nom de notre classe, qui est Home. Cette maison composants. Si nous jetons un oeil à la vue d'arrivée, va être wrapper pour tous ces aperçus du conseil. Il va ensuite transmettre les accessoires pour le titre du plateau et aussi la couleur de fond. Donc, nous devons d'abord créer les composants d'aperçu de la carte, qui seront utilisés pour chacun de ces éléments. Créons un nouveau fichier dans la barre latérale. Ce n'est pas dans les pages, c'est juste dans les composants. Maintenant, cela va être le BoardPreview.js. Il s'agit également d'un composant basé sur une classe. Donc, nous allons importer Reacts de 'réagir', crée notre classe. Celui-ci s'appelle BoardPreview. Donc étend React.Components, passez dans la méthode de rendu. Ensuite, retournez notre code SIG X, qui pour l'instant va être un simple élément P de l'aperçu du conseil. Ensuite, en bas, n'oublions pas d'exporter par défaut, notre nom de classe d'aperçu du tableau. Ensuite, une fois que vous avez terminé, donnez à ce fichier un coffre-fort. Nous avons donc maintenant une situation où nous devons passer nos accessoires à deux niveaux. Notre état est stocké dans le app.js. Nous allons alors il transmet les données vers le bas aux composants de la maison, qui est ce wrapper. Ensuite, depuis le composant d'accueil jusqu'à chacun de ces aperçus de balle. Heureusement, ce n'est pas trop difficile à faire. La première étape consiste à afficher réellement les composants de la maison. Si vous allez dans le app.js, nous pouvons d'abord importer le composant personnel que nous avons créé à partir de notre chemin de fichier, qui est. /composants. Rappelez-vous que cela se trouve également dans le dossier Pages et le nom de la maison vers le bas dans la section retour de notre méthode de rendu. Nous pouvons également remplacer tout cela par les composants de la maison. Comme nous le vérifions, cela s'affiche dans nos projets. Alors maintenant, nous voyons les composants de la maison. L' étape suivante est le passage de cette maison composants, ces états de cartes, sorte que nous pouvons le faire via des accessoires. Le conseil sera égal à this.state.boards. Donc c'est nos accessoires passent maintenant un niveau. Passons au home.js, où nous pouvons maintenant accéder à ces accessoires. L' étape suivante est le passage de ses composants à la maison à l'aperçu du plateau. La première chose que nous devons faire est d'importer réellement l'aperçu du tableau. Cela vit juste à l'intérieur du dossier des composants. Nous pouvons y accéder avec une barre oblique de point puis un aperçu de balle. Dans l'effort aléatoire, nous pourrions simplement sortir l'aperçu du tableau. Mais rappelez-vous que nous avons plusieurs planches. Dans notre cas, nous avons trois étoiles dans les états. Par conséquent, nous devons cartographier ces données , puis sortir un composant d'aperçu de balle pour chacun d'eux. Comme avant, nous utilisons ce top accessoires, les planches. Comme il y en a trois, nous allons appeler la méthode JavaScript map. Pour chacun, nous allons obtenir une clé que nous utilisons dans un instant. Mais d'abord, sortons l'aperçu de la carte. Chaque élément est stocké à l'intérieur de cette variable clé, nous pouvons maintenant utiliser comme clé et imposer chaque planche individuelle comme accessoire. Comme nous le savons auparavant, nous devons également passer ces clés comme un attribut et définir cela égal à notre variable de clé. Ensuite, nous devons transmettre le lien individuel à cet aperçu du tableau qui est à ceci sur une ligne séparée afin qu'il soit plus lisible. Nous pouvons passer le tableau individuel et nous pouvons accéder est avec ce point accessoires, points boards. Ceci est d'accéder à toutes les planches que nous avons reçues via des accessoires. Nous pouvons ensuite passer une clé pour obtenir la carte individuelle à partir du tableau de cartes. N' oubliez pas que cette clé est chaque élément individuel. La première fois que nous avons vécu à travers les cartes, il sortira ensuite un composant de carte ou un aperçu de carte, puis passera la carte individuelle. Il vivra ensuite à travers le second, également un deuxième aperçu du conseil, puis passera également la deuxième planche en tant qu'accessoire. Il va entrer ceci pour chaque élément de notre tableau. Maintenant, si nous disons ceci, nous pouvons maintenant aller à l'aperçu de la planche et utiliser cet accessoire de planche. Le [inaudible] à l'intérieur, retournons des déclarations. Nous pouvons supprimer l'aperçu du tableau codé en dur. Nous pouvons alors accéder à ce point accessoires, l'accessoire du conseil et ensuite nous pouvons accéder au titre du conseil. Sauvegardons cela et actualisons avant d'aller plus loin et nous verrons dans la console que nous avons une erreur. Nous n'avons pas de jeton inattendu dans le point de la maison js. Retournez à la maison. C' est parce que dans notre section de retour, nous mettons en deux composants adjacents. Légèrement enlever cela et entouré dans un div. Mais rappelez-vous, réacts ne nous permettra d'avoir qu'un seul élément parent en tant que rappeur. À la fin de la section des résultats, nous pouvons fermer ceci, recharger. Cela nous donne maintenant un message d'erreur « Impossible de lire le titre de propriété de undefined ». Pourquoi ne pas lire le titre à l'intérieur de nos composants ? L' aperçu du tableau. C' est cette ligne de code juste ici. Eh bien, la raison pour laquelle cela se produit est que bien que toutes les cartes de ces données d'échantillon soient stockées en tant que tableau, chaque carte individuelle est stockée en tant qu'objet, donc nous avons dans l'état un tableau d'objets. Si nous allons aux composants de la maison à l'intérieur ici, nous utilisons la méthode .map. Map est une méthode de tableau. Ce que nous essayons de l'utiliser ici sur une planche, des objets. Pour les réparer, nous pouvons envelopper ça. props.boards qui est un objet de la méthode object.keys. Coupons ceci .props, .boards et ensuite nous pouvons utiliser objects.keys. Ensuite, à l'intérieur des crochets, nous pouvons coller ce retour dans. Object.keys est une méthode d'objet qui va extraire tous les noms de propriétés de l'objet, puis retourner un tableau. Ici, nous convertissons fondamentalement ces données d'objet en étant tableau. Par conséquent, nous pouvons utiliser la méthode .map et tout ce que vous devriez maintenant travailler comme prévu. Cette object.keys est une méthode JavaScript régulière. Encore une fois, rien de spécifique à réagir. Maintenant, si nous sauvegardons ce fichier et revenons au navigateur, cette erreur disparaît maintenant, bonnes et choses et fonctionnent correctement. Nous avons passé l'état du tableau à deux niveaux, puis je mettrai le titre dans l'aperçu du tableau. Nous demandons maintenant une étape où nous avons des composants imbriqués. Peu souvent, tout ce que nous pouvons voir est le texte brut dans le navigateur. Sans avoir un routeur en place, un basculement entre nos pages ou nos composants. Il peut devenir difficile de visualiser exactement ce qui se passe avec nos composants. Pour vous aider, nous pouvons utiliser les outils de développement React, qui est disponible pour Chrome et Firefox. Si vous les avez installés tôt dans le cours lors de la configuration des choses, génial. Si ce n'est pas le cas, allez chercher les outils réactifs et ajoutez l'extension pour Chrome ou Firefox. Une fois cela fait, vous serez en mesure de faire un clic droit, puis inspecter et maintenant nous devrions voir les outils de développement réagir disponibles pour sélectionner, alors cliquez sur cela. Les outils de développement React sont quelque chose que nous utiliserons beaucoup pour ce cours. On va avoir beaucoup plus d'entraînement. Nous pouvons voir actuellement dans l'arborescence des composants, nous avons le wrapper principal de l'application. Nous pouvons ouvrir cela et puis à l'intérieur nous avons un div environnant qui contiendra nos composants maison. C' est exactement ce que nous voyons dans le app.js. Nous avons nos composants, nous avons notre div et ensuite nous avons notre composant domestique imbriqué à l'intérieur, qui passe les planches comme accessoires. Nous pouvons également voir les accessoires à l'intérieur des outils de développement. Si nous cliquons sur les composants de la maison, nous voyons que nous passons les cartes comme accessoires, qui est un tableau avec trois éléments. Nous pouvons inspecter cela et voir toutes les informations pour chaque article. Nous voyons que beaucoup, ces planches sont un tableau. Ces éléments individuels sont un objet, c'est pourquoi nous devions convertir chaque élément avec object.keys. Si nous ouvrons l'emballage de la maison, nous voyons ensuite à l'intérieur de chacun des aperçus du tableau. Ils ont également la clé pour permettre de réagir pour mettre à jour correctement chaque élément de liste. Nous pouvons les sélectionner et nous voyons aussi les accessoires qui sont transmis. Ceci est un objet avec le tableau individuel où nous pouvons accéder à l'arrière-plan, l'ID et le titre. Il dit titre, que nous avons utilisé pour sortir le navigateur, ainsi que les accessoires. Si vous allez aux composants principaux de l'application, nous voyons également l'état qui est le composant détient et ce sont les informations que vous extrayez à partir des données d'échantillon et ensuite transmettre via les accessoires. Ces outils de développement sont vraiment utiles et nous les utiliserons au fur et à mesure que nous suivrons le cours. Ensuite, nous allons rester avec les accessoires subjectifs et jeter un oeil à la façon dont nous pouvons passer les méthodes entre les composants. 11. Passer des méthodes comme accessoires: Ce ne sont pas seulement des données que nous pouvons transmettre aux composants. Nous pouvons également transmettre une méthode deux. La méthode que nous allons ajouter prochainement est de créer un nouveau tableau, qui obtiendra l'état de la carte dans le app.js. Maintenant, puisque nous mettons à jour l'état stocké dans app.js, nous ajoutons également. nous créons une nouvelle méthode de conseil ici aussi. Allons plus et créer est maintenant dans le app.js, je vais aller à ce fichier. Ensuite, il juste sous notre composant va monter. Nous pouvons créer une méthode personnalisée appelée « CreateNewBoard », ce qui va être une fonction de flèche ES6, qui va prendre dans un tableau, qui va lui passer bientôt. Donc, ici, nous allons mettre à jour l'état un peu différemment. Jetons un coup d'oeil à la façon dont nous allons utiliser cet état dot set. À l'intérieur, nous allons toujours passer un objet et mettre à jour nos tableaux. Mais cette fois, nous allons créer un tableau. Donc, ici, lors de la mise à jour de l'état, lors de l'utilisation de React, nous ne voulons généralement pas muter l'état directement. Il est préférable d'abord, prenez une copie de l'état existant. Nous pouvons le faire avec l'opérateur de propagation, qui est un trois points. Nous pouvons prendre une copie des états existants en utilisant « this.state.boards ». Ensuite, après cela séparé par une virgule, nous pouvons fusionner nos nouvelles données, qui va être cette variable de tableau, que vous passez par notre méthode. Donc, quand nous appelons cela va passer les données sur le nouveau conseil, va ensuite mettre à jour l'état, va ensuite prendre une copie des états existants, puis fusionner dans son nouveau conseil. Si nous jetons un oeil à la version finie juste ici, ce sont les composants de la maison. A l'intérieur, c'est là que nous allons « Créer un nouveau tableau ». Par conséquent, en déclenchant cette méthode. Cette méthode doit être déclenchée à partir des composants de la maison, qui signifie quand elle passe une référence à cette méthode et comment passer des données aux composants enfants ? Nous le faisons via des accessoires. Donc, dans app.js, passons à l'endroit où nous rendons nos composants domestiques. Nous pouvons ensuite passer une référence à notre méthode. Donc, « Créer un nouveau tableau ». En fait, nous pouvons ajouter cela sur commutateur en ligne. Ensuite, nous pouvons définir cela égal à cela. Ensuite, notre nom de méthode appelé « createnewboard ». Plus dans les composants de la maison, qui est le home.js, nous pouvons créer un bouton pour créer notre nouvelle carte. Donc, à l'intérieur de notre « div », Créons ceci maintenant. A l'intérieur d'un ici, nous pouvons créer un gestionnaire de clics. Donc « onClick », nous allons alors créer une nouvelle méthode appelée « This.NewBoard » et ses actes de newboard à l'intérieur ici. Donc, cette nouvelle méthode de conseil, que nous appelons ici, n' a rien à voir avec celle que nous avons transmise par les États. On appellera ça dans un instant. Allons monter et créer cela maintenant en dehors de la méthode aléatoire, nous pouvons maintenant créer cette.Donc, créons notre « NewBoard ». Setup, une fonction de flèche ES6. Donc à l'intérieur, nous voulons faire deux choses. Tout d'abord, nous voulons saisir toutes les données du conseil de notre formulaire, puis nous allons appeler la méthode de création de nouvelles cartes, qui sont transmises à partir de app.js. Pour le moment, nous n'avons pas ce formulaire pour saisir ses données. Donc, je vais juste devoir coder certaines données pour l'instant. Créons nos objets de tableau. donc « const board » va être égal à un nouvel objet. Cela a besoin d'un titre appelé ceci tout ce que vous voulez. Je veux dire, « Voyages à prendre cette année », séparés par une virgule. Nous avons également besoin d'un contexte pour ce conseil. Je vais définir son « arrière-plan » pour être une valeur de chaîne, » 80ffaa ». Ensuite, je vais ajouter la propriété « CreateDat ». Ça va être une « nouvelle date ». Donc un nouveau script date. Nous allons être stockés dans la date de la nouvelle carte et aussi la nouvelle liste et les nouvelles cartes. Cela nous permettra plus tard de retourner toutes ces informations dans l' ordre à partir du moment où elles ont été créées. Donc c'est notre nouveau tableau maintenant codé en dur. Nous pouvons alors appeler la méthode create new board, qui sera transmise via des accessoires et envoyée cette nouvelle obligation comme argument. Donc, juste après nos objets « This.props.CreateNewboard ». Fixation de cette planche qui a illustré. Donc maintenant cette partie, nous allons passer avec la méthode CreateNewBoard. Il l'appellera dans le app.js. Cette méthode recevra ensuite le tableau, puis le fusionnera en états. Alors sauvegardons ceci et passons ensuite à notre projet. On peut essayer ça. Allons à notre application. On a le nouveau bouton de balle. Cliquons sur ceci. Ensuite, nous obtenons une mise à jour sur l'incident des voyages à prendre cette année. Le plus grand signifie que nous avons maintenant ce nouveau mode dans un état. C' est ce que nous avons mentionné précédemment lorsque nous avons dit que chaque fois que l'état est mis à jour, React mettra alors à jour tous les composants qui ont besoin de cette information particulière. Nous pouvons également voir dans le app.js, si nous descendons à l'état, nous avons maintenant notre planche supplémentaire ajouté à l'intérieur ici. C' est celui qui a produit codé en dur, puis passé comme arguments avec cette méthode. Si nous actualisons cependant, cet élément disparaîtra puisque nous n'avons pas encore de base de données permanente. Mais c'est quelque chose qui ajoutera plus tard dans le cours. Passons maintenant à la liste. Si nous regardons cette vue finale de la carte, puis cliquez sur l'un des aperçus de balle à l'intérieur, pris aux composants de la carte. Ce composant de carte aura besoin d'accéder à toutes les listes actuellement chargées. Dans notre cas, nous avons juste ces gratuits. J' aurais également besoin d'ajouter une nouvelle entrée de liste en bas. Actuellement dans notre sortie ne voit pas cette vue de balle. Si nous allons sur tous secrètement chargé est composants de la maison, puis ensuite à l'intérieur de nos aperçus du conseil. Nous pouvons commencer à travailler avec ces composants de carte. Nous pouvons aller sur le app.js et ajouter le temporairement. Ce sera jusqu'à ce que nous introduisions le routage dans une section ultérieure. Donc, tout d'abord, dans le app.js vous fait nous avons encore les informations du conseil d'administration d'avant. Ensuite, faites défiler vers le bas jusqu'à notre méthode aléatoire. Nous pouvons également ajouter les composants de la carte à l'intérieur de notre emballage. Donc, je vais fermer ceci maintenant et passer à ce board.js. Nous pouvons ajouter les listes dans l'état. Ainsi, chaque composant individuel peut également avoir ses propres états locaux. Créons nos objets d'état. Je veux charger la liste actuelle, et définir ceci à une valeur initiale d'un tableau vide. J' ai appelé cet état, les listes actuelles parce que plus tard, nous allons également filtrer les listes pour ne montrer que celles d'un tableau particulier. Nous pouvons ensuite récupérer nos listes à partir des données d'échantillon. Tout d'abord, en important en haut du fichier. Je vais importer nos données à partir du chemin d'accès du fichier, qui est des exemples de slash dot dot. Mais une fois de plus, nous pouvons utiliser ComponentDidMount pour les charger dans l'état. C' est une méthode que nous devrions appeler ce point setState. Nous allons définir nos objets, qui va récupérer les listes actuelles et définir ceci égal à nos exemples de données, qui sont des listes de points de données. Les données étant une variable que nous avons à partir de nos données d'échantillon, puis la liste est les données de liste que vous avez juste ici. Maintenant, nous avons ces listes actuelles. Que voulons-nous en faire ? Eh bien, nous voulons afficher un composant de liste pour chacun, tout comme le libre que vous voyez ici. Nous le faisons comme plus tôt lorsque nous vivons à travers les données, et maintenant mettre un composant de liste pour chacun d'eux. Commençons dans le board.js. Allons à notre méthode aléatoire et nous pouvons commencer à travailler à l'intérieur ici. Tout d'abord, dans la div environnante, ajoutons un nom de classe qui va être égal à list-wrapper. C' est pour CSS. Remarquez ici comment nous utilisons le nom de la classe plutôt que simplement la classe, comme le ferait dans le HTML normal. Eh bien, lors de l'utilisation de act, le mot de classe est un mot-clé réservé. Par conséquent, lors de l'ajout de classes CSS, nous devons utiliser ces attributs de nom de classe à sa place. À l'intérieur, on pourrait déplacer notre titre de quatre. Ensuite, à l'intérieur des accolades, nous allons cartographier les listes actuelles. Donc, comme avant, nous allons utiliser ces listes .state.current. Comme avant, cette liste .state.current est un objet plutôt qu'un tableau. Pour résoudre cela, je vais découper cela, et encore une fois, utiliser objects.keys, puis à l'intérieur des crochets, nous pouvons coller cela à nouveau. Tout comme précédemment, cela convertira ceci en un tableau, donc nous pouvons utiliser la méthode de la carte de points. Nous allons également passer dans la clé, réglé la fonction flèche. Pour chaque liste dans les états, nous allons ensuite exécuter les composants de liste. Cette liste doit également prendre une clé. Cette clé sera égale à ces listes .state.current. Nous ne passerons pas dans la liste individuelle avec cette clé, puis nous saisirons l'ID. Assurez-vous que nous avons toujours les composants de liste importés en haut du fichier à partir d'une date antérieure. Donnez une sauvegarde à ce fichier. Ensuite, nous pouvons aller sur le navigateur et vérifier ceci. Maintenant, nous verrons nos composants rendus à l'écran. Il se passe beaucoup de choses ici. Nettoyons les composants de la liste. Allons dans le list.js. Alors, plutôt que de sortir nos cartes gratuites, nous allons supprimer ça. Cela devrait paraître beaucoup plus clair maintenant, si nous mettons à jour ceci. C' est notre liste de composants gratuits. Il est probablement un peu difficile de voir ce qui se passe ici, alors ouvrons les outils développés de réaction. Regardez de plus près. À partir du niveau supérieur, nous avons le app.js avec nos conseils qui sont en état. A l'intérieur d'ici, nous avons un div environnant, qui sortira ensuite les composants de la maison, affichant la cause, les idées de maison et de jardin. Après cela, nous avons temporairement ajouté dans le composant de carte. Nous avons pu voir cela et les composants de la carte rend des éléments de liste gratuits. Chaque élément de liste est simplement opportun le texte du composant de liste, qui est juste ici. Nous allons également bientôt sortir un titre de liste et aussi les dénombrements. Avec ces listes maintenant affichées sur le tableau, nous pouvons faire une chose similaire au début de cette vidéo et ajouter également une nouvelle liste. Plus dans le board.js. Nous pouvons le faire en créant une nouvelle méthode. Juste sous le composant dans le montage. Créons une nouvelle méthode appelée créer une nouvelle liste. Ils servent de fonction de flèche. Ici, nous allons construire notre nouvelle liste. Cela va juste être échantillonné des données pour l'instant. Nous devons d'abord ajouter un ID à cette liste. Plus tard, nous allons utiliser Firebase pour récupérer cet identifiant. Mais pour l'instant, nous pouvons utiliser math.dot aléatoire pour générer un nouvel ID en utilisant JavaScript. Le titre, appelons ça ma liste incroyable. Cela doit également être lié à un conseil d'administration. Nous pouvons choisir une pièce d'identité. Allons-y pour 300. Nous pouvons également ajouter la propriété CreateDAT et définir ceci comme une nouvelle date en utilisant JavaScripts. Maintenant, nous avons créé notre nouvelle liste. La prochaine chose à faire est maintenant de pousser ceci à notre état actuel. Maintenant, nous pouvons le faire avec this.state. Ajoutez nos objets. L' état que nous voulons obtenir est les listes actuelles. Tout comme avant, la liste actuelle est un tableau afin que nous puissions le transmettre. Nous allons, tout d'abord, fusionner dans les listes actuelles, avec les trois points. This.State.Current listes séparées par une virgule. Nous allons ensuite fusionner dans notre état actuel. La liste qui a été créée, juste au-dessus. C' est tout ce que nous devons faire maintenant pour cette méthode, l'étape suivante consiste à créer un bouton pour déclencher cette méthode suit. Nous faisons cela dans la méthode aléatoire. Allons juste sous le wrapper de liste. Créons un bouton. Nous pouvons ajouter un gestionnaire d'événements sur clic, qui va déclencher notre méthode, qui est appelée this.create new lists. Puis un nom de la nouvelle liste pour notre bouton. Une fois cela fait, donnez ce fichier enregistrer et nous pouvons passer au navigateur. Essayons de cliquer sur notre nouveau bouton de liste. Ensuite, nous allons obtenir un nouveau composant de liste rendu en vert. Si nous allons dans notre application, puis dans notre tableau. À l'intérieur, on peut vérifier l'état actuel de tout le conseil. Nous avons maintenant nos quatre éléments de liste. Si nous passons à notre dernier, qui est celui que vous venez d'ajouter, nous voyons le titre de ma liste incroyable. Tout d'abord, encore une fois, comme avant, si nous rechargeons le navigateur, cela disparaîtra. Puisque vous ne disposez pas actuellement d'un stockage permanent. Pour arrondir les choses, plutôt que de sortir le texte des composants de liste, nous pouvons accéder aux invites à la place. Tout d'abord, dans le board.js. Nous pouvons transmettre ces accessoires à chaque liste. On a déjà la clé. C'est très bien. Ensuite, après cela, nous pouvons également passer notre liste. Nous pouvons saisir les données avec this.state. Nos listes actuelles, en passant la clé, enregistrez ce fichier, puis nous pouvons modifier nos composants de liste afin que je vais mettre le titre du list.js. Tout d'abord, ajoutons un nom de classe à l'enveloppe. Le nom de la classe va être égal à la liste ou à notre CSS. Ce titre va également être dans un div environnant, qui va avoir un nom de classe d'en-tête de liste. Alors fermez ça. Nous pouvons maintenant déplacer nos éléments p à l'intérieur de cette section d'en-tête, et remplacer le texte des moindres composants par nos accessoires. A l'intérieur des accolades, ce top props.list, et puis nous pouvons accéder au titre de la liste. Si tout fonctionne bien, nous devrions maintenant aller sur le navigateur et voir maintenant le titre de nos listes gratuites. Nous pouvons également cliquer sur une nouvelle liste, et nous verrons le titre de celle-ci aussi. Bien. Si tout fonctionne maintenant pour vous, nous allons passer à la prochaine vidéo. Nous allons rechercher la validation du type d'accessoire. 12. Validation de caractères de Prop: lors du passage de données entre les composants, il est conseillé de fournir une certaine validation. Le composant Jacquet obtient exactement les données dont il a besoin. Par exemple, si un composant attend un objet mais obtient un tableau, il pourrait nous briser. Et c'est exactement ce que nous avons vu avant, quand nous devions convertir un objet en utilisant des objets noirs. Cela utilisera les types appropriés, qui est une bibliothèque fournie par Facebook pour effectuer ces vérifications. Il est simple d'obtenir des mots ouverts improvise avec des erreurs pendant le développement. Les propriétaires. Si notre prototype échoue, installons cela dans le terminal. Nous pouvons fermer ou terminal avec commande ou contrôle, voir pas d'argent pour installer cela à partir de MPM avec le MP M I, puis le nom du paquet, qui est des types de prop. C' est la réponse et donnez-nous quelques instants pour installer à l'intérieur de votre projet, puis revenir une fois que cela est fait. Bon, bienvenue. Une fois cela installé, nous devons l'importer dans chaque fichier qui reçoit les accessoires. Commençons par le sommet de l'arbre, qui est le jusqu'à Js. C' est le niveau le plus élevé, donc il ne reçoit aucune invite de composants. Mais au lieu de cela, il passe les accessoires à la maison et aussi les planches plus tard. Dans le cours les composants de la maison reçoit les planches sur le type des planches est en Ray et aussi créer une nouvelle carte est une fonction. Alors commençons dans ce composant à la maison. Comment pourrait commencer un problème de travail ? Validation. Tout d'abord, en haut du fichier, nous pouvons importer les prototypes de paquets. Confortable. P Tante pourrait donner cela du module des temps appropriés. Ok, alors je vais installer ces types d'accessoires tout de suite. Le dossier. Je veux le faire juste au-dessus de nos valeurs par défaut d'exportation. Nous pouvons le faire avec le nom de tous les composants, qui est à la maison. Jamais parti. Définissez les types appropriés. Si peu de cas P. Dans ce cas, sur les immigrants, c'est égal à un objet qui contiendra le prototype pour chaque propre, qui est transmis. Le 1er 1 est pour les planches. Ensuite, nous pouvons définir les types appropriés, qui est le capital P anti, qui est celui que nous avons importé en haut. Et puis après ce concert, quel type de données nous attendons à recevoir si nous avons pensé temps. Nous pouvons voir certaines de ces suggestions ici quand nous le voulons. Dans ce cas est un tableau. Vous pouvez également définir ce champ comme étant obligatoire, séparé par une virgule. Nous pouvons également faire la même chose pour notre deuxième prop, qui est de créer une nouvelle planche. Grande nouvelle balle Cette fois est une fonction et nous pouvons déclarer que nous voulons un type de fonction avec couchette. Ceci est également requis. Donc aussi change à la fin. La prochaine chose à faire est de redémarrer notre serveur avec les étoiles MPM. Une fois que cela est fait en regardant les testicules, les allées dans le navigateur, nous ne voyons aucun problème pour le moment. Mais si nous changeons l'un des types appropriés, disons du tableau pour être un type d'objet. Disons ça. Je veux dire, je verrai un type d'accessoire échoué qui a ainsi rappelé et changera pour être un tableau une fois de plus sous , puis sauvegardez cette finale. Allons dans la barre latérale. Le suivant vers le bas est le point du conseil Js point du conseil Js ne reçoit pas actuellement un accessoires a déplacé vers le bas à l'aperçu de la balle. Nous reviendrons à ce conseil plus tard dans le cours, comme avant. La première chose à faire est d'importer les types appropriés et ensuite, après cette semaine encore une fois, descendre tout en bas, juste au-dessus de notre valeur par défaut d'exportation, le nom du composant, aperçu hors bord et puis définissez le temps approprié avec une minuscule, soit que c'est à être égal à l'objet. Le seul et seul bon que l'aperçu de la balle est peut est de la maison. Et si nous montons quand nous sommes en interne aperçu du conseil envoyait l'accessoire du conseil. Il s'agit d'un type d'objet. Paramétons les types d'accessoires Capital P et A Capital T. Ceci est un type d'objets sur cela. Ceci est également nécessaire pour les composants suivants vers le bas dans la barre latérale va être la carte. Cliquons sur ceci. Nous y reviendrons bientôt, puisque nous n'utilisons pas encore ces composants de carte dans notre projet. Donc, enfin, nous avons la liste des composants du médecin. Cela prend dans une liste, donc a également besoin d'un type approprié. Faisons nos importations sur le top dans les prototypes complets des types de prop défiler vers le bas. Nous pouvons les mettre en place en bas avec moins de types d'accessoires de porte, donc je vais objecter le type d'hélice unique. Quelle réception est la liste sur laquelle le prototype est un objet. Cela est également nécessaire à Nous allons, bien sûr, sur d'aujourd'hui. Comme nous avons passé plus d'accessoires sur créer également plus de composants, ils ne peuvent pas les médecins. composant pour lequel nous avons mentionné n'est pas utilisé actuellement, mais nous allons l'utiliser maintenant en l'incluant pour chaque carte dans nos échantillons de données. Comme nous le voyons ici, le composant de carte est imbriqué à l'intérieur de chaque liste, qui signifie quand il est sur ce sur dans la liste. Docteur, en tant que composants, passons à la liste. bras du Dr A. On peut le faire maintenant. Donc à l'intérieur, il descend la balle latérale. Nous allons louer des composants de voiture pour chaque carte dans une liste. Rappelez-vous les données d'échantillon comme un tableau de cartes sur une carte, un taux par liste. Alors passons par la liste et nous pouvons le faire maintenant par mon épingle à travers tous les accessoires sous le titre. Sous la liste. Plus dur. Ouvrons les accolades cette fois est un objet. Nous avons donc également besoin d'exécuter des jockeys d'objet pour transformer nos accessoires en un tableau. Les accessoires se transforment une fois. Ce n'est pas des accessoires ? La liste Cartes Note. Quoi ? Je vais balayer les résultats. Chaque élément donnera le nom de cette variable clé. Et puis à l'intérieur de ces fusées, nous ne pouvons pas mettre une carte par objet trouvé dans la boucle. Et assurez-vous que cela doit fermer et fusées, et puis à l'intérieur ici, nous pouvons tous mettre sur des composants de carte, vous faire ceci est toujours importé sur le haut du fichier, qui est que nous ne pouvons pas une clé, mais vous allez être égal à toutes les clés. valeur. Nous pouvons transmettre les données comme accessoires. Ça va être ça. Pas d'accessoires. Ne listez pas le point com, puis à l'intérieur des crochets passerait dans la clé. Fermez ceci avec une barre oblique sur les facteurs à ce sujet sur son en ligne. On y va. Ok, donc maintenant nous rendons une carte sur le passage des accessoires. Allons à la carte, Docteur. Oui, nous pouvons tous gérer ces données qui lui sont transmises. Pour le moment, nous avons juste un div qui va louer le texte. Donc, les premières choses d'abord nous pourrions aller au sommet sur l'importation de nos prototypes et à partir du paquet temps approprié. Ensuite, à droite tout en bas au-dessus de notre valeur par défaut d'exportation. Nom du composant des cartes. Aucun temps de prob n'a configuré un objet. Le nom propre est des données sur le type de prop est un objet, qui est également requis. Donc, avant d'aller plus loin, disons que ces composants de carte et ensuite aller sur le navigateur et nous avons un jamais dans la ligne de liste 15. Allons-y maintenant, ligne 15. Nous avons les données. Cette liste de démarrage de prop top. Andi devrait être des cartes à la fin. Essayons ça maintenant. Bien. Alors maintenant, voyons un titre de liste et aussi les cartes assignées à chacun. C' est un peu difficile de voir ce qui se passe. Non, parce que le style manque, vous savez, des composants. Donc nous avons des haricots, ajoutant, c'est, hum, des cours comme nous allons le long. Tels que La liste avait aussi une sur cette liste, et ils ont également fourni quelques CSS pour aller avec son cours pour faire regarder un peu mieux. Vous pouvez trouver ce fichier CSS au fur et à mesure qu'ils sont téléchargés avec le cours. Alors allez-y et prenez le CSS en tant que seigneur. Et puis une fois que vous ne savez pas, nous pouvons coller cela à l'intérieur de l'application point CSS. Donc, je vais supprimer tous les styles existants, puis coller dans tous les styles qui ont été fournis. Donc maintenant, si nous donnons cette sauvegarde finale et allons au navigateur Donc maintenant nous pouvons voir plus clairement notre liste gratuite dans les données d'échantillon, nous avons nos titres de liste et ensuite nous avons deux cartes à l'intérieur de chaque liste. Donc, il y a encore un peu de travail à faire, mais peut maintenant voir la liste dans les voitures plus clairement. Donc c'est maintenant pour nos types d'accessoires. Je réponds à ce que nous partons pour le reste du cours. 13. Composants contrôlés: Si nous avions plus de deux numéros d'URL tels que 1,2,3, puis barre oblique avant. Cette vue est rendue par les composants d'origine. Cela contient un nouveau bouton de carte. Si nous cliquons, cela ajoutera des données codées en dur à nos états de carte. Ce nouveau bouton de carte est large dans le home.js. C' est un bouton et il déclenchera une méthode appelée newboard. Toutes ces données sont actuellement codées en dur, mais nous voulons que l'utilisateur ajoute le nom de la carte et sélectionne également la couleur. Comme pour n'importe quel site web, nous pouvons le faire avec un formulaire. Mettons ça dans la barre latérale. Nous allons aller dans les composants, puis créer un nouveau fichier pour ce appelé CreateboardForm. Avec l'extension dot js à la fin et assurez-vous que vous avez juste orthographié correctement. On y va. La première chose que nous voulons faire est d'importer React de « réagir », comme nous le faisons toujours. Ensuite, ce sera un composant basé sur une classe. Vous voulez appeler cela de la même manière que le fichier, qui est CreateboardForm. Cela va étendre les composants React. À l'intérieur, nous ajoutons notre méthode aléatoire requise, qui va ensuite simplement retourner quelques js x comme éléments AP. Avec les textes de salut. Nous y reviendrons dans un instant et créerons notre réforme. Tout d'abord, exportons par défaut. CreateboardForm. Enregistrez ce fichier et puis nous pouvons importer ce fichier dans nos composants personnels. Faites défiler vers le haut en dessous de nos types d'accessoires. Nous pouvons importer CreateboardForm. Le chemin de fichier dont nous avons besoin va être une barre oblique de point. Ensuite, il est dit CreateboardForm. Défilant jusqu'à notre effort aléatoire, nous n'avons plus besoin de ce bouton qui aura ici, puisque nous allons le remplacer par un formulaire. À l'endroit ici, nous pouvons ajouter nos composants CreateboardForm. ferme pendant que nous sommes ici jusqu'à ce que nous puissions ajouter un wrapper d'aperçu, qui va être une plongée environnante. Cela va juste ajouter le style dans lequel nous avons besoin d'utiliser CSS. Nous pouvons ajouter notre nom de classe. Celui-ci sera égal à board-preview-wrapper. Ensuite, prenez la plongée de fermeture et ajoutez-la juste après l'accolade bouclée de fermeture. Ce board-preview-wrapper nous donnera la disposition de la grille CSS pour tous nos aperçus du conseil. Enregistrez ce fichier, puis passez au navigateur et maintenant nous voyons le texte de salut, ce qui signifie que notre composant est maintenant rendu. Aussi nos aperçus de tableau gratuits et sont affichés dans le format de grille plutôt que dans une liste. Retour aux composants CreateboardForm. Nous pouvons créer notre balisage de formulaire. Allons-y. A la place de ce texte élevé, nous pouvons supprimer cela. Nous pouvons ajouter un formulaire à l'intérieur ici. Ce formulaire va également avoir un ClassName, qui devient ou create-board-wrapper. Tout d'abord, nous avons besoin d'une entrée avec le type de texte. Ce qui va être pour notre nom de conseil. Fermez ceci et sur une ligne séparée, je vais ajouter le type qui sera égal au texte. Il a également besoin du nom, qui va être égal au nom. Puis enfin une valeur d'espace réservé, qui va être le nom du tableau. La deuxième entrée qui est formée va avoir besoin va être une boîte de sélection. C' est ainsi que l'utilisateur peut sélectionner la couleur d'arrière-plan de cette carte. Crée une zone de sélection. Ouvrons et fermons ça. Cela n'a pas aimé aussi besoin d'un attribut de nom qui va être égal à l'arrière-plan. À l'intérieur, nous allons ensuite énumérer nos options qui sont disponibles pour l'utilisateur. Je vais ajouter six couleurs différentes. Vous pouvez ajouter n'importe quelle valeur de couleur que vous aimez, ou vous pouvez coller avec celles que je veux choisir. Le premier sera une valeur bleue. Nous pouvons ajouter la même chose en utilisant les attributs de valeur. La valeur x de 80ccff. Vous voulez copier et coller ceci en cinq fois de plus. Nous donnant six valeurs d'option. Est un commun va être pour une couleur verte. La valeur x va être 80ffaa. Le troisième sera rouge, ce qui est une valeur de f94a1e. Le quatrième est pour une couleur rose. La valeur x cette fois est ffb3ff. Ensuite, nous avons un second à dernier violet, qui est bf00ff. Enfin, nous avons la couleur orange. C' est FFAD, double trois, et il y a nos six couleurs. Le dernier élément que nous devons ajouter est pour un bouton de soumission avec les textes de création d'un nouveau tableau. Il a également besoin d'un type qui va être soumis. C' est tout ce que nous avons à faire pour notre formulaire. Enregistrez ce fichier, puis passez dans le navigateur et ouvrez le haut. Nous voyons maintenant nos entrées de nom de conseil. Nous avons notre liste déroulante avec ces couleurs lactiques et notre bouton de soumission. C' est notre formulaire maintenant affiché dans le navigateur. Mais maintenant, nous avons besoin d'un moyen d'obtenir l'entrée de données par l'utilisateur. Il existe plusieurs façons de le faire lors de l'utilisation de React. abord, c'est ce que nous allons examiner maintenant appelé des composants contrôlés. Cela signifie généralement que React prend le contrôle des données, que nous saisissons puis les stocke dans des états. Entrées de formulaire HTML telles que cette entrée et sélectionner nous avons généralement conservé leur propre état, qui signifie que l'ignorance de ce que l'utilisateur a tapé. Vous avez peut-être utilisé event.target.value avant d'y accéder. Nous pouvons alors accéder à cette valeur et la placer dans l'état. Une fois qu'il est alors en état, nous pouvons l'utiliser pour créer notre nouveau conseil d'administration. Nous pouvons commencer par créer notre état par défaut. Passons à CreateboardForm. Juste en dessous de notre titre de classe. Ajoutons nos objets d'état. Tout d'abord, nous pouvons ajouter le titre et satisfaire une valeur initiale d'une chaîne vide. Nous pouvons également définir une valeur de chaîne basée sur l'arrière-plan par défaut de 80ccff, qui est juste notre première valeur bleue. Ce sera notre couleur d'arrière-plan par défaut si aucun sur n'est sélectionné. Faites défiler vers le bas jusqu'à un formulaire. À l'intérieur de ces entrées, nous pouvons créer un gestionnaire d'événements en ligne, définir l'état lorsqu'un utilisateur tape dans les entrées. Nous pouvons le faire juste sous l'espace réservé. Nous pouvons ajouter le gestionnaire d'événements on change et satisfaire une fonction en ligne, qui prend les données d'événement comme e. Cela va exécuter une fonction qui va exécuter des états. Nous pouvons passer cela en tant qu'objet et l'état que nous voulons changer est le titre que vous voulez définir sur e.targets. La valeur e.target. est les données d'événement saisies par l'utilisateur. Ensuite, nous pouvons également faire la même chose pour l'arrière-plan aussi. Faites défiler jusqu'à notre sélection juste après l'arrière-plan à l'intérieur de la balise select d'ouverture. Nous pouvons également ajouter un gestionnaire d'événements on change. À ce nouveau, en ligne passant dans les données d'événement, créez notre fonction de flèche, qui va également définir l'état, avec cet état de point défini, des objets personnels. Mais cette fois, nous voulons définir l'arrière-plan à l'intérieur des États. Ceci est également e pour la cible de valeur. Chaque fois que l'utilisateur tape quelque chose dans le formulaire ou modifie les entrées de sélection, il exécute alors cette fonction et met à jour notre état. Ensuite, nous pouvons tester cela en ajoutant une méthode on submit au formulaire. Descendez sur notre bouton et en fait, nous ajouterons ceci aux éléments de formulaire réels et ceux-ci sur le site en ligne. Cette fois, le gestionnaire d'événements est en soumission. Une fois que le formulaire a été soumis, nous voulons alors exécuter une méthode personnalisée appelée ceci a handle submit. Cela entraînera l'exécution de la méthode d'envoi du handle chaque fois que le formulaire a été soumis. Nous pouvons tester cela ci-dessus avec un simple journal de console. En dehors de notre méthode aléatoire, nous pouvons créer notre méthode personnalisée de handle soumet en passant les données d'événement. La première chose à faire est d'exécuter e ou d'empêcher la valeur par défaut. Cela empêchera le comportement par défaut une fois que le formulaire a été soumis, ce qui sera alors de recharger le navigateur, et nous ne voulons pas le faire car on réagit pour contrôler quand la page se recharge et se met à jour. Nous pouvons ensuite faire un simple journal de console au navigateur, qui va sortir cet état de point. Cet état de point nous montrera alors le titre et l'arrière-plan que l'utilisateur a tapé une fois que ce formulaire a été envoyé. Disons ceci et puis passons au navigateur. Dans l'onglet de la console. Tapons n'importe quoi ici. Modifiez la valeur et créez un nouveau tableau. On dirait qu'on a eu un sommet, vérifions ce qui se passe. C' est une erreur d'orthographe, alors manipuler, soumettre et essayons encore une fois. Rechargez et nous pouvons ajouter notre test. Essayons avec la couleur par défaut. Je vais avoir un titre et une histoire. Changeons la couleur et aussi le titre et nous y allons. Maintenant, l'état a été mis à jour avec la valeur entrée par l'utilisateur. Maintenant, nous pouvons terminer notre méthode en créant notre planche. Installez ceci en tant qu'objet. Supprimons le journal de la console. Créez une constante pour le tableau. Ce sera un objet qui va prendre dans le titre, nous pouvons récupérer des états avec ce titre point d'état, séparé par une virgule. Cela doit également saisir l'arrière-plan. C' est aussi facile. C' est l'état de départ, l'arrière-plan. Ensuite, nous pouvons ajouter la valeur de créé à, qui, comme nous l'avons regardé plus tôt, va être égal à la nouvelle date de point. Par conséquent, nous pouvons saisir cela de la base de données dans l'ordre de temps. Nous n'avons pas encore de données utilisateur, donc nous pouvons ajouter une chaîne simple. Allons pour a, b, c 1, 2 ,3 nous donnant les données du tableau que nous devons envoyer à la base de données. Si nous passons au app.js, nous avons toujours une méthode appelée créer un nouveau conseil. Cela prend également dans les planches, mais nous avons maintenant cela que nous pouvons transmettre avec la méthode. Nous devons transmettre cette méthode comme accessoire et nous y arriverons dans un instant. Mais d'abord, nous voulons ajouter une instruction if pour vérifier d'abord si le titre de point du tableau existe. Nous voulons vérifier si ce titre est là, parce que si ce n'est pas le cas, cela signifie que l'utilisateur essaie de soumettre un tableau sans nom. Nous voulons également vérifier si le fond du point de carte existe aussi, ce qu'il devrait, parce que nous avons cela stocké dans l'état. Nous pouvons ensuite exécuter notre nouvelle méthode de création de tableau avec ce point prop, point créer un nouveau tableau. En passant dans nos nouveaux objets de planche. Maintenant, l'étape suivante est de s'assurer que ces accessoires sont reçus par ce formulaire. Ouvrez le app.js, nous avons notre nouvelle méthode de création de carte, qui est définie dans les états. Nous sommes en train de mettre cela dans les composants de la maison. Passons au point de la maison js, ce point de maison js alors il doit passer cela vers le bas pour créer une forme de conseil. Nous pouvons le faire maintenant, donc crée un nouveau conseil. Ceci est égal à nos accessoires, donc ce point accessoires crée une nouvelle carte. Cela devrait maintenant être disponible dans notre formulaire. Juste une chose à faire avant d'aller de l'avant et de vérifier ceci est que nous avons encore cette nouvelle méthode large juste au-dessus dans nos composants domestiques. Nous pouvons maintenant supprimer cela car cela n'est plus nécessaire. Enregistrez ceci et assurez-vous que tous nos fichiers sont enregistrés et dirigez-vous vers le navigateur. On peut maintenant tester ça. Ajoutons un nouveau tableau. Je vais aller de l'avant pour faire, qui va être une couleur rouge et puis créer un nouveau tableau. Créer un nouveau tableau n'est pas une fonction. C' est par ici. W minuscule, essayons un de plus. C' est dû dans une couleur de rouge. Créer de nouvelles cartes et maintenant nous allons voir notre carte a été poussé à des états, puis rendu dans le navigateur. Pour compléter cette vidéo, nous passons des accessoires, donc nous avons besoin d'une validation de propriété à l'intérieur de toute forme. Commençons d'abord dans le formulaire de création de carte en important nos types d'accessoires à partir de notre paquet de types d'accessoires. Ensuite, comme toujours, nous pouvons ajouter cela au bas de nos composants, juste au-dessus de notre exportation. Crée des types de prop point de forme de carte, p minuscule, ensemble de tous les objets. Le seul prop que nous recevons pour ce composant est de créer une nouvelle carte. Cette nouvelle carte va avoir le type d'accessoire de fonction, qui ajoutera avec point func. Ceci est également nécessaire puisque nous voulons toujours être en mesure d'ajouter un nouveau tableau. Sauvegardons cela et passons au navigateur et vérifions qu'il n'y a pas de problèmes, et tout semble bien. La rubrique suivante, nous allons continuer à regarder les formulaires en jetant un oeil sur les composants de contrôle et aussi en utilisant refs. 14. Composants et réfs incontrôlés: La méthode contrôlée que nous avons examinée dans la dernière vidéo, est la façon généralement préférée de traiter les formulaires. Depuis réaction est en plein contrôle et peut également gérer toutes les mises à jour. Maintenant, nous allons découvrir une autre façon de créer une forme en réaction, et cela est appelé un composant incontrôlé. De cette façon, les données de formulaire sont gérées par le DOM et il peut être une alternative utile pour éviter d'écrire des gestionnaires d'événements pour chaque entrée de formulaire. Pour cet exemple, nous allons construire dans les formulaires et une nouvelle liste. Nous faisons cela dans les composants board.js, et sur cette diapositive ici, c'est les nouvelles entrées de liste que nous voyons en bas à gauche, donc en regardant cela en bas des composants de bol après la div d'emballage de liste. Allons-y maintenant dans notre projet dans Visual Studio Code. Ouvrons le board.js, et puis si nous allons à la div de clôture pour ce wrapper de liste qui est celui-ci ici. Nous pouvons alors créer notre formulaire. Dans ce formulaire, nous allons ajouter un gestionnaire d'événements submit. Sur Soumettre ne va pas déclencher une méthode personnalisée, qui s'appelle l'étoile, crée une nouvelle liste. Si nous faisons défiler vers le haut de ces composants, nous avons déjà créé de nouvelles listes à l'intérieur de nos méthodes, afin que nous puissions en profiter très bientôt. Après cela, nous pouvons également ajouter un nom de classe pour notre style et définir ceci sur un nouveau wrapper de liste. Maintenant, après que le premier est allé imbriquer dans une entrée de formulaire, l'entrée va avoir le type de texte qu'elle ferme elle-même. Sur une nouvelle ligne, nous pouvons ajouter le type de texte. Puisque tout ce que nous recevons par l'utilisateur est les entrées de texte pour une nouvelle liste, nous avons également besoin d'un nom. Nous pouvons simplement appeler son nom, puis une valeur d'espace réservé pour laisser l'utilisateur savoir exactement ce qui frappe et ajouter un symbole plus, puis le texte de la nouvelle liste. Ici, nous avons actuellement notre div entouré, suivi d'un élément de formulaire juste après. Comme nous le savons déjà, réagir ne nous laissera pas faire cela parce qu'il a besoin des éléments d'un parent. C' est ajouter un div en tant que wrapper. Éliminons l'étiquette de fermeture et les endroits juste après notre formulaire. Sauvegardons ceci, puis sur le navigateur. A l'intérieur du navigateur, nous avons notre nouvelle liste sur les entrées, et aussi ce bouton que nous avons depuis plus tôt, qui déclenche la même méthode. Allons dans notre méthode aléatoire. Nous pouvons supprimer ce bouton depuis plus tôt puisque nous avons maintenant notre entrée de formulaire. Ensuite, faites défiler jusqu'à notre méthode créer une nouvelle liste, qui définira l'état. Puisque dans cette version, nous n'utilisons pas l'état pour gérer les entrées de formulaire, nous avons besoin d'un moyen d'accéder aux éléments DOM, puis de les définir à cet objet de liste, c'est-à-dire que nous devons saisir l'entrée que l'utilisateur a entrée et définir ceci à notre objet de liste, et réagir nous donne un moyen de le faire en utilisant refs. Refs sont des moyens d'accéder au DOM et ils nous donnent toutes les informations dont nous avons besoin, y compris la valeur saisie dans une entrée de formulaire. Nous pouvons créer une nouvelle référence avec la méthode create ref. Faisons cela ci-dessus créer de nouvelles listes. Nous donnons notre nom de référence, je veux appeler mes addboardinput. Pour garder le nom descriptif peut définir un ref avec react.create ref, et les crochets utilisés par la suite. Nous pouvons ensuite le passer à nos entrées en tant qu'attributs ref. Appelons les entrées embarquées, descendez aux éléments dont vous voulez l'information. Je vais l'ajouter n'importe où en tant qu'attribut. Nous pouvons définir la référence égale à ces points ajouter l'entrée de carte. Cela attachera cette référence à cette entrée HTML, et nous pouvons y accéder ci-dessus dans notre méthode pour supprimer les propriétés dont nous avons besoin en elle crée une nouvelle liste. Nous pouvons également maintenant passer dans les informations d'événement avec la variable e, alors nous pouvons accéder à cela pour empêcher le comportement par défaut. Cela empêchera essentiellement la page de se recharger lorsque nous soumettons le formulaire. Pour tester cela, je vais commenter le code, puis consigner la référence de la console. Supprimons les états de jeu et aussi notre liste, et supposons un journal de console avec la valeur de notre ref, qui est ceci, .addboardInput. Nous n'avons pas besoin du point-virgule, alors allons au navigateur. On a une flèche à l'intérieur du tableau, donc on a la toute nouvelle liste, décommente cette accolade de fermeture, et on y va. Maintenant, à l'intérieur de notre nouvelle liste, sans rien à l'intérieur, allez à la console, et puis nous obtenons la valeur de notre ref, qui pointe vers notre entrée actuelle. Maintenant, il y a beaucoup d'informations sur l'entrée juste ici. Mais celui qui nous intéresse particulièrement est la valeur actuelle, donc dans notre journal de console, nous pouvons maintenant passer à .current.value. Cela nous donnera la valeur entrée par l'utilisateur, allons taper n'importe quoi dans cette entrée. Nous obtenons maintenant le texte qui a été entré par l'utilisateur. Revenons à notre ballon, nous pouvons maintenant décommenter ce code. C' est comme toutes les lignes lorsqu'elles sont commentées, qui est la liste, jusqu'à définir l'état. Nous pouvons également supprimer le journal de la console, et maintenant nous pouvons utiliser la valeur ref dans notre titre au lieu de cette valeur codée en dur. Nous pouvons le faire en supprimant la chaîne, puis à la place nous pouvons pointer vers this.addboardInput, puis comme nous l'avons vu auparavant dans le journal de la console, nous pouvons saisir la valeur actuelle. Maintenant, enregistrez ceci et passons au navigateur. Essayons quoi que ce soit à l'intérieur ici, nouvelle liste deux, et maintenant encore une erreur. La raison en est plus dans les composants de la liste. Ici, nous parcourons toutes les cartes disponibles à l'intérieur de notre liste. Cependant, à l'intérieur de ces composants de balle, lorsque nous créons une nouvelle liste, nous n'avons pas de configuration de carte à l'intérieur de cet objet. Par conséquent, réagir ne peut pas trouver de valeurs et provoque une erreur. Plus tard, si j'ai basé ces voitures vont se séparer des listes, donc à titre temporaire, je vais ajouter quelques cartes simples lors de la création d'une nouvelle liste. Juste après les nouveaux jours, nous ajouterons temporairement quelques cartes qui vont être un tableau d'objets. Ajoutons l'id 1, du texte et disons la carte 1. Séparé par commun, nous pouvons ajouter un deuxième objet avec un identifiant de 2 et aussi du texte de la carte 2, et aussi ajouter la virgule juste après créé à. Allons dans le navigateur, et maintenant si nous ajoutons une nouvelle liste, il répond. La nouvelle liste est maintenant ajoutée dans le navigateur. Juste avant de terminer cela, il y a quelques petits problèmes à résoudre. Tout d'abord, si nous supprimons le contenu de nos entrées de formulaire et appuyez sur Entrée, nous voyons que nous pouvons maintenant ajouter une liste vide, et aussi numéro 2 l'entrée ne s'efface pas après avoir ajouté une nouvelle liste. Appuyez sur Entrée, et nous voulons que cette valeur soit ensuite effacée pour la liste suivante. Ce sont des choses assez simples à réparer. abord, nous pouvons ajouter une instruction if pour vérifier si le titre est présent, avant de définir un état. Nous pouvons le faire à côté du board.js. Cherchons notre faux appel, qui est juste là. Sur la ligne ci-dessus, nous pouvons créer une instruction if pour vérifier si le list.title est présent. Si cet état .set, puis déplacez-le à l'intérieur, cela entrera, arrêtera une liste vide en cours d'ajout. On peut tester ça. Si nous appuyons sur Entrée sur cette nouvelle liste, nous voyons qu'aucune nouvelle liste n'a été ajoutée. suivant est clair l'entrée après que nous avons soumis une nouvelle liste, nous pouvons le faire à l'intérieur de la carte, .js. Juste après cette étape, nous pouvons actualiser ou réinitialiser la valeur de notre ref afin que ces points soient entrées de carte. Nous pouvons définir la valeur de la colonne, tout comme nous l'avons utilisé auparavant pour être égal à une chaîne vide. Testez ça. N' importe quoi à l'intérieur. Et maintenant, nos nouvelles entrées de liste sont maintenant vides. Maintenant, cela fonctionne, nous pouvons obtenir un peu plus de pratique dans la vidéo suivante en créant le nouveau formulaire de carte. 15. Créer une nouvelle forme de carte: La nouvelle carte formée va être similaire à la dernière vidéo, donc nous allons obtenir un peu plus de pratique en utilisant graphiques et aussi en poussant à tous les objets états. Ce seront les nouvelles entrées de carte que nous voyons en bas de chacune de ces trois listes, minimum connecté dans les moins de composants sur ces cartes. Passons au list.js. À l'intérieur des composants de la liste et sous notre section actuelle, nous pouvons également ajouter un nouveau formulaire, donc juste sous notre boucle et aussi dans cette div environnante, nous pouvons ensuite ajouter un formulaire. Le formulaire va avoir une méthode on submit, qui sera égale à la valeur de this.CreateNewCard. Nous pouvons également ajouter un nom de classe et le définir sur new-card-wrapper. Ajoutez également cela à la ligne, donc c'est plus clair. Maintenant, à l'intérieur de ce formulaire, nous pouvons aller de l'avant et ajouter notre entrée, comme nous l'avons fait lors de l'ajout d'une nouvelle liste. L' entrée va avoir le type de texte. Fermons ceci, et sur une nouvelle ligne, nous pouvons ajouter le type. Après cela, cela va aussi avoir le nom et c'est égal au nom, puis enfin un espace réservé, qui comme la dernière vidéo va être un symbole plus, puis le texte de la nouvelle carte. C' est tout ce que nous avons à faire pour notre formulaire. Cela aura également besoin d'une référence aussi, afin que nous puissions créer ceci en haut de notre classe. Juste au-dessus de notre effort aléatoire, nous pouvons ajouter notre NameInput, répondre à React.CreateRef. Nous devons ensuite saisir ce NameInput et l'ajouter à notre formulaire. A l'intérieur de l'entrée comme un attribut, nous pouvons ajouter la ref, tout comme nous l'avons utilisé auparavant, et c'est donc à la valeur de this.NameInput, reliant la valeur de cette entrée à notre ref. Pour le moment, par souci de simplicité, nos cartes sont contenues à l'intérieur des listes dans les données d'échantillon. Bientôt, tous les tableaux, listes et aussi les cartes seront également l'indépendance, et ensuite nous les lions via des identifiants. Nous pouvons commencer ce processus en ajoutant les états de carte actuels à l'intérieur de l'E2. En haut de ces composants, nous pouvons créer notre objet d'état, et cet état va être responsable du stockage des cartes actuelles. Pour le moment cependant, c'est l'état initial qui va être réglé sur un tableau vide, et le processus de création d'une nouvelle carte est très similaire à la dernière vidéo lorsque nous avons ajouté une nouvelle liste. Tout ce que nous devons faire est d'aller au-dessous de notre ref en dehors de notre effort aléatoire et ensuite nous pouvons créer une nouvelle carte, et rappelez-vous ce nom le plus lien avec la méthode que nous sommes ajoutés sur soumettre, donc « créer une nouvelle carte » va être une fonction qui va prendre dans l'information de l'événement. Nous allons configurer notre fonction de flèche comme ça. Nous pouvons alors empêcher le comportement par défaut pour arrêter le rechargement du navigateur, puis créer notre carte. Nous pouvons stocker cette carte à l'intérieur d'une constante et l'enregistrer dans un objet. L' objet de carte va avoir le texte, l'ID de liste qui est lié, un tableau d'étiquettes, et aussi la date à laquelle il a été créé. Tout d'abord, le texte qui est pour cette carte que nous pouvons prendre de nos réfs. Ceci est stocké dans NameInput, et une fois de plus, nous pouvons saisir la valeur avec .currrent.value. Séparé par la virgule, nous pouvons également lier ceci à une liste en ajoutant un ListID. Plus tard dans ce cours, ce ListID sera automatiquement placé dans les suivants, mais pour l'instant nous pouvons ajouter n'importe quelle valeur à l'intérieur ici. À côté d'une carte aura également besoin d'un tableau d'étiquettes, alors définissons ceci sur un tableau vide initial, et aussi le CreatedAt, qui va être égal à une nouvelle date JavaScript. dessous de cet objet, nous pouvons également définir les états, mais juste avant de le faire, nous vérifierons si la card.text est présente, ce qui empêchera toute entrée de formulaire d'être soumise, ce qui n'a aucune valeur. Nous pouvons alors appeler this.setState, comme dans nos objets. Ces états que nous voulons définir sont les cartes de couleur, donc nous allons faire ce que nous avons fait précédemment. À l'intérieur de cet objet d'état, nous allons définir les CurrentCards en imaginant le CurrentState avec l'opérateur spread, donc this.State.CurrentCards, puis séparés par une virgule ajoutera également à notre nouvelle carte. La prochaine chose à faire après cela est également de réinitialiser notre entrée de formulaire, donc ajoutons simplement ceci sur une nouvelle ligne pour que ce soit plus clair. Ensuite, en dessous de cette accolade pour les instructions if, nous pouvons ensuite réinitialiser la zone de saisie de texte en accédant à la référence avec NameInput, puis définir la valeur actuelle pour être égale à une chaîne vide. Pour vérifier si cela fonctionne, nous pouvons faire un journal de console rapide juste après cela avec la chaîne de nouvelle carte ajoutée, et nous pouvons ajouter à la fin la card.text ou au navigateur. Nous avons maintenant nos nouvelles entrées de formulaire de carte à la fin de chaque liste, alors ajoutons n'importe quoi ici. Permettez-moi d'ajouter une nouvelle carte, puis d'envoyer un texte. Essayons celui-ci, et maintenant tout fonctionne bien. Je vais laisser les cartes telles qu'elles sont pour l'instant, puisque nous allons commencer les données réelles de la carte à partir de [inaudible] base dans une section ultérieure, puis lier ces cartes à chaque liste. 16. Configuration du routeur React: Pour le moment dans notre projet, nous avons montré à la fois la maison et les composants de la carte. Nous pouvons voir cela si nous allons aux outils de développement React à l'intérieur de notre application, nous avons cette section d'accueil, regardez le haut ici et puis en dessous, nous rendons les composants de la carte. C' est parce que nous n'avons actuellement aucun moyen de basculer entre ceux-ci. Idéalement, cependant, ce que nous voulons après la connexion est d'être pris à ces composants de la maison, où nous pouvons ensuite sélectionner l'une de ces cartes, nous pouvons cliquer dessus et ensuite être pris à cette vue de la carte. Fondamentalement, cela doit être sur différentes pages. Pour cela, nous pouvons installer un routeur qui nous permettra d'afficher certains composants sur certaines URL. Par exemple, l'URL des barres obliques frontales affichera les composants de cette carte. Je vais également avoir une URL pour la maison. Malheureusement, cette réaction n'a pas de paquet de routeur officiel, mais probablement le plus couramment utilisé est le paquet react-router-dom, qui est la version web du routeur. C' est un paquet mature qui est activement maintenu et nous pouvons l'installer en utilisant NPM. à notre projet, Passonsà notre projet,ouvrons un nouveau terminal et à l'intérieur, nous allons lancer NPM. Je réact-router-dom, séparé par des traits d'union, laisse allumer ça. Il existe différentes approches que nous pouvons prendre pour configurer notre routeur dans le projet, telles que l'ajout du routeur à un fichier séparé puis l'importation dans notre application principale. Nous pouvons également l'ajouter à notre index.js. Mais puisque nous n'avons que quelques pages à basculer entre, je vais configurer cela dans notre app.js. Allons là-bas maintenant et puis en haut, la première chose que nous devons faire est d' importer les paquets dont nous avons besoin à partir du routeur de navigateur. Ceux-ci sont nommés export, donc nous les ajoutons à l'intérieur des accolades. Le premier dont nous avons besoin est le BrowserRouter, capital B, puis le capital R séparé par une virgule. Nous devons également importer le paquet de route. Ensuite, troisième et enfin, le commutateur va être importé à partir du paquet du routeur, qui est react-router-dom. Tout d'abord, nous avons ce BrowserRouter. C' est notre implémentation réelle du routeur. Nous l'utiliserons comme wrapper pour toutes nos routes et utiliserons l'API d'historique HTML5. Après cela, nous avons les routes, cela sera utilisé pour rendre un composant pour une URL donnée. Enfin, nous avons switch, c'est un wrapper pour plusieurs routes. Je ne rendrai jamais la première route qui correspond. Donnons ceci un coup d'envoi et ajoutons ceci à la méthode aléatoire en enveloppant les composants avec le routeur. Jusqu' à notre méthode aléatoire, où je vais mettre notre maison à bord, entourant ces deux composants à l'intérieur de la div. Ensuite, je veux utiliser le BrowserRouter, que nous venons d'importer, donc la balise d'ouverture, puis ajouter la balise de fermeture juste après le conseil. Nous pouvons ensuite venir trouver notre carte et nos composants domestiques, puis utiliser le routeur pour contrôler cela. Je vais commencer par la route du conseil d'administration. La route de la maison prend les accessoires donc nous y reviendrons très bientôt. Utilisons notre pièce de routage avec un R majuscule, c'est la fermeture automatique. Ensuite, à l'intérieur, nous passons dans le chemin qui va être égal à barre oblique avant, donc chaque fois que l'utilisateur visite ces routes de barre oblique avant, mais que vous voulez ensuite rendre un composant, nous pouvons ajouter les composants, et celui-ci sera les composants de la carte, et cela a besoin d'un B majuscule, pour correspondre aux composants que nous avons importés en haut de ce fichier. Retour sur notre routeur, une autre route dont nous avons besoin est un PageNotFound pour attraper tout votre itinéraire que nous n'ajoutons pas ici. Juste en dessous de notre planche, ajoutons une deuxième route. Nous n'avons pas besoin d'ajouter un chemin cette fois parce que cela va ramasser tous les chemins qui ne sont pas déclarés ci-dessus. Au lieu de cela, tout ce que nous avons à faire est de rendre un composant. Je vais ajouter un composant appelé Page Not Found, puis fermer ceci. Ce composant n'a pas encore été créé, donc nous pouvons aller de l'avant et le faire maintenant à l'intérieur des composants et des rampages, ajoutons un nouveau fichier. C' est le PageNotFound.js. Sa fonction sera assez simple. Je vais importer React d'ici et puis configurer cela comme un composant basé sur la fonction appelé PageNotFound à cause de la fonction, puis à l'intérieur ici nous allons ajouter un div. Ce div va simplement afficher un titre de niveau trois avec le texte de PageNotFound. Maintenant, nous devons exporter cette fonction tout en bas avec une valeur par défaut d'exportation, le nom du composant de PageNotFound. Cela va maintenant nous permettre d'importer ceci dans le app.js, donc en haut, nous pouvons importer PageNotFound à partir du chemin d'accès du fichier, qui est des composants slash point. Ceci est également dans le dossier Pages, puis le nom de PageNotFound. Donnons ceci une sauvegarde maintenant et allons dans le navigateur, j'ai une erreur, BrowserRouter, donc vers le bas sur la ligne 23, il suffit d'ajouter un R à l'intérieur de cela. Ensuite, modifiez le navigateur, donc actuellement nous sommes sur les routes de 123 barre oblique vers l'avant. Maintenant, nous allons obtenir le PageNotFound, car cela ne correspond à aucune des routes à l'intérieur ici. Si nous essayons maintenant barre oblique avant, nous devrions maintenant voir ce composant de carte rendu pour changer notre URL pour être barre oblique avant. Maintenant, je vois le tableau rendu à l'intérieur du navigateur, bien. Juste avant de terminer cette vidéo, je veux vous montrer quelque chose qui pourrait vous attraper lors de l'utilisation du routeur de navigateur pour la première fois. Si nous revenons au app.js. Tout d'abord, si nous commentons le PageNotFound, puis nous ajoutons une route de plus juste au-dessus ici. Ceux-là, et puis nous pouvons ajouter un chemin qui va être pour toute la route de barre oblique, donc à l'intérieur ici, vous pouvez afficher n'importe quel composant. Allons simplement pour le PageNotFound. Si nous sauvegardons ce fichier maintenant et passons dans le navigateur, puis naviguons vers le panneau barre oblique avant, nous voyons à la fois les tableaux sont rendus et aussi les composants PageNotFound, même si nous correspondons à une URL de barre oblique avant. Cela peut sembler un peu étrange car actuellement sur les routes de la barre oblique avant, nous ne voulons pas rendre les composants de la carte. La raison pour laquelle cela se produit est parce que techniquement, la barre oblique avant à domicile est également une correspondance ici aussi. Si nous regardons la barre oblique avant, cela commence également par une barre oblique avant, donc nous aurons une correspondance partielle au début de l'URL. Ceci est suffisant pour rendre le composant home deux et si nous ne voulons pas ce type de comportement, nous pouvons également ajouter exactement à l'itinéraire, ce qui évitera cela. À l'intérieur de notre itinéraire, nous pouvons ajouter exact. Sauvegardez ceci, et maintenant sur la barre oblique avant, nous ne voyons que le composant du conseil puisque l'utilisation exacte n'autorisera pas les correspondances partielles, donc je vais juste rétablir notre application, je décommente sur PageNotFound. Mais c'est quelque chose à surveiller lors de l'utilisation du routeur. Ensuite, nous allons examiner comment nous pouvons réintroduire composants de la maison et aussi comment nous pouvons transmettre les accessoires à l'aide du routeur. 17. Passer des accessoires à un composant de routeur: Ce fichier app.js utilisé pour rendre notre composant personnel et aussi la carte. Dans la dernière vidéo, lorsque nous sommes passés au routeur, nous avons seulement rendu le composant de carte, laissant ce composant personnel jusqu'à cette vidéo. C' est parce que ce composant de maison fait également usage d'accessoires, nous passons les planches, et aussi la méthode de création de nouvelles cartes. Maintenant, en passant des accessoires en utilisant le routeur, le premier instinct serait peut-être de faire quelque chose comme ça. Si nous avions nos routes, nous pourrions passer dans une partie de la maison. Nous pourrions alors aussi transmettre les accessoires, comme nous l'avons dit ci-dessous, comme les planches. Ajoutons que c'est terminé et aussi créer un nouveau tableau. Ne laissez aucun composant pour refléter ce que nous avions plus tôt. Cependant, si nous devions enregistrer ceci et passer ensuite à notre application, nous devons passer à la barre oblique avant, qui est le composant d'accueil. Nous voyons maintenant que nous obtenons un message d'erreur dans la console et aussi dans le navigateur. Nous recevons ces erreurs parce que le composant personnel ne reçoit pas les accessoires dont il a besoin. Par conséquent, React reçoit cette valeur non définie ou nulle. Lorsque vous utilisez le routeur React, nous ne pouvons pas transmettre les accessoires de la manière traditionnelle. La solution est de passer dans un support de rendu à la place de notre composant. Commençons par enlever nos accessoires et aussi ce composant de maison. Ensuite, en place, nous pouvons ajouter une prop de rendu. À l'intérieur, cela prend une fonction. Donc en passant une fonction de flèche, juste comme ça. Ici, nous pouvons ensuite ajouter notre composant maison avec nos accessoires. Donc, comme nous l'avons fait plus tôt, ici, nous avons la composante maison, laquelle est sur nos deux planches. Nous pouvons, en fait, copier cette section, puis l'ajouter à l'intérieur de cette fonction. En fait, nous avons juste besoin d'une maison et pas de cette planche, alors supprimons ça. Donc, tout d'abord, sauvegardons ce fichier et vérifions ceci. Nous voyons maintenant le composant d'accueil rendre les aperçus de la carte, donc cela supprime maintenant notre erreur. Nous voyons également cette page composant introuvable. Comme il n'a pas de chemin, il sera toujours rendu avec notre disposition de routeur actuelle. Pour résoudre ce problème, nous pouvons entourer nos routes avec une instruction switch. Donc, à l'intérieur du routeur de navigateur, nous pouvons utiliser ce paquet de commutateur que nous avons importé plus tôt. Juste après le routeur de navigation, nous pouvons le transmettre. Il a une ouverture et une balise de fermeture, qui se trouve juste à l'intérieur de notre routeur de navigateur. Ce commutateur va faire est de regarder nos composants et ensuite seulement rendre le premier qui correspond. Donc, si une barre oblique ou une barre oblique avant est trouvée, le composant correspondant sera rendu comme lors de l'utilisation d'une instruction JavaScript standard. Si aucun ne correspond, nous sommes alors à gauche avec la page introuvable en bas. Sauvegardons ceci et vérifions que le composant de page introuvable est supprimé. Maintenant, nous allons juste avoir les composants de la maison comme prévu. Cela nous laisse maintenant avec le comportement que nous attendions et c'est ainsi que nous pouvons transmettre les accessoires en utilisant le routeur React. Ensuite, nous allons continuer à regarder ce routeur et comment nous pouvons passer des paramètres via l'URL. 18. Paramètres URL: En utilisant React routeur, nous pouvons également passer des paramètres via l'URL à plus de pages. Les paramètres sont une section de l'URL qui peut changer. Par exemple, si nous avions un utilisateur qui est connecté et utilise un ID tel qu'un utilisateur, nous pourrions alors ajouter « /boards ». Affiche toutes les cartes pour l'utilisateur un. Cette section utilisateur est dynamique, qui signifie qu'elle changera en fonction de l'utilisateur connecté. Aussi la même chose si nous devions avoir divers conseils. On pourrait aussi avoir un conseil. Puis barre oblique avant avec l'ID de carte à seulement 100, ce qui signifie que la section 100 serait dynamique, stockée dans une variable et ensuite disponible pour une utilisation avec le routeur React. Allons dans notre App.js et voyons comment nous pouvons implémenter cela. Pour le moment, nous avons la barre oblique, qui rend nos composants « maison ». Plus tard dans ce cours, cette barre oblique sera utilisée pour rendre un composant de connexion. Un utilisateur doit se connecter avant de voir ses propres tableaux. Par conséquent, cela signifie maintenant que ce composant personnel, qui affiche les cartes de l'utilisateur, devra être sur un itinéraire tel que celui-ci, donc un utilisateur. Ensuite, nous pouvons voir les tableaux disponibles pour cet utilisateur connecté. Maintenant, il n'est pas pratique d'ajouter un itinéraire différent, avec un chemin différent, pour chaque utilisateur connecté sur notre site. Au lieu de cela, nous pouvons ajouter un deux-points, pour ajouter une section dynamique, suivie d'un nom que nous voulons ajouter à cette variable. Appelons ça l'ID utilisateur. Maintenant, si nous allons sur le navigateur et nous devons avoir « 123/boards ». Cela serait maintenant déchiré au composant d'accueil, puis stocker la valeur de 123 à l'intérieur de cet ID d'utilisateur. Étant donné que cette section est dynamique, elle affichera toujours ces composants « Home » quelle que soit la valeur placée à l'intérieur de cette section. Si nous ouvrons le « React Developer tools ». Cliquez sur cet onglet, puis recherchez les « Composants d'accueil » que nous affichons actuellement. Il suffit de voir les accessoires sur le côté droit avec la « Boards » et aussi la fonction « Create New board ». y a actuellement aucune référence à cet ID utilisateur. Pour dire cela, nous devons transmettre les données du routeur comme un accessoire deux. On pourrait le faire à l'intérieur du « Render Prop ». À l'intérieur, nous allons passer les accessoires en tant que variable à la fonction. Puis à l'intérieur de nos « composants de la maison », comme ce sont ceux-ci étaient une ligne séparée. On peut aussi se propager dans les « Props ». Cela va ensuite fusionner dans les données du routeur avec le reste des accessoires, que vous passez aux « Composants Home ». Retour à la « Outils de développement » Nous allons « Reload » dans « Réagir » et rechercher les « Composants de la maison ». Sélectionnez cette option. Maintenant, à côté des « Boards » et « Create New Board », nous avons trois nouveaux accessoires. Il s'agit des accessoires « History, location and match », qui sont tous transmis depuis le routeur React. Nous les examinerons plus en détail au fur et à mesure du reste du cours. Mais pour l'instant, nous pouvons trouver les paramètres ou ces paramètres URL, à l'intérieur des accessoires sur le « Match » Et puis vers le bas à « Params » Nous avons donc cette variable d'ID d'utilisateur avec la valeur de 4-5-6, qui est saisi de cette section ici. Plus tard, nous utiliserons cet ID utilisateur pour récupérer les cartes de l'utilisateur actuellement connecté. Mais pour l'instant, nous pouvons simplement sortir l'utilisateur dans le fichier « Home.js ». Allons à la « Maison ». et juste au-dessus de notre « Create Board Form », je vais sortir un « Span ». Et pour afficher l'ID utilisateur, nous le ferons comme nous le ferions avec n'importe quel autre accessoire. Nous pouvons accéder à ce « topprops.match » Qui sont ces accessoires, que vous avez juste ici. Nous avons besoin de « match.paramas », puis de l'ID utilisateur. Donnons ceci une sauvegarde, puis passons au navigateur. Nous avons maintenant la variable de 4-5-6. Essayons une valeur différente à l'intérieur ici, donc l'utilisateur. Maintenant, ce params est affiché à l'intérieur du navigateur. Nous pouvons aussi le faire pour nos conseils d'administration. Si nous revenons à notre « App.js », puis faites défiler vers le bas jusqu' à notre « Composants du Conseil » Nous pouvons maintenant ajouter dans l'ID de la carte. Slash avant, il s'agit d'une section dynamique donc nous avons besoin de z deux-points, l'ID de la carte. Cela va maintenant nous permettre d'entrer dans l'URL. Puis au « Conseil », puis « /BoardId » comme un seul. Partout où les données dynamiques que nous transmettons pour l'ID de la carte seront encore épuisées ces composants de la carte. Ensuite, l'ID de carte sera stocké à l'intérieur de cette variable. Puisque nous avons également besoin de transmettre les accessoires du routeur dans son outil de composant, nous pouvons remplacer le composant par la fonction de rendu. Ajoutons ceux-ci sur le site en ligne. Nous pouvons supprimer les « composants », puis le remplacer par le « rendu ». Cela prend une fonction que nous allons transmettre dans les accessoires du routeur. À l'intérieur, nous déchirons ensuite nos « composants de carte » sur une ligne séparée, mais nous pouvons également nous étendre dans les « accessoires », qui sont ceux fournis par le routeur, puis nous fermons nos composants de carte. Testons que cela fonctionne dans le navigateur. Pour avoir une barre oblique avant. Essayons 5 000. Pour chaque numéro que vous transmettez, nous voyons toujours le « composant Board » affiché à l'écran. Cherchons à l'intérieur des « outils de développement » pour le tableau. Nous avons encore les accessoires de « l'histoire, l' emplacement » et « mars » nous saisissons les « paramas » à l'intérieur ici. Avec ce travail, nous avons franchi un autre pas vers la structure dont nous avons besoin pour le projet final. Je ne pouvais pas bien que nous soyons juste en tapant ces URL. Mais dans la prochaine vidéo, nous allons voir comment nous pouvons naviguer vers ces itinéraires. Lorsqu' un utilisateur clique sur un aperçu « tableau ». Et aussi comment nous pouvons accéder aux fonctionnalités du routeur React quand il n'est pas possible de transmettre des accessoires. 19. Utiliser avec withRouter et push: Plutôt que de taper nos URL dynamiques, ce que nous avons fait dans la dernière vidéo, nous avons plutôt besoin d'un moyen de les pousser via notre application. Si nous passons à notre projet dans l'hôte local et puis recherchons 1, 2, 3, les deux liaisons flash. Nous avons nos obligations gratuites ici à partir des données d'échantillon. Il serait bon de pouvoir cliquer sur l'un de ces éléments et ensuite être pris aux composants de la carte avec l'ID de carte dans le cadre de l'URL. Pour ce faire, nous pouvons utiliser le routeur de réaction, pour naviguer vers une URL particulière et nous pouvons le faire en utilisant la méthode push. Pendant que nous sommes sur cette page, nous pouvons aller aux outils réactifs et ouvrir l'objet historique à l'intérieur des composants de la maison. Allons à l'histoire à l'intérieur des accessoires. Si on ouvre ça. À l'intérieur, c'est là que se trouve cette méthode push. Cette méthode push va ajouter une nouvelle entrée sur le stock de l'historique du navigateur ce qui signifie que vous pouvez utiliser le navigateur d'avant en arrière, Watson, puis sa page sera stockée dans l'histoire. Ces obligations gratuites, bien sûr, idées de maison et de jardin sont situés à l'intérieur des composants de prévisualisation du conseil. Cela nous laissera avec un petit problème. Si nous allons dans les DevTools et rechercher l'aperçu du tableau. Si nous sélectionnons l'un de ces aperçus du tableau, les seuls accessoires que vous avez sont le tableau réel. Nous n'avons pas accès à l'objet historique où se trouve push. Vous pouvez penser ici que nous pouvons simplement transmettre les accessoires comme nous l'avons fait avec les autres composants, et la réponse est non ou pas directement. Cet aperçu de la carte est un enfant des composants de la maison. Par conséquent, il n'est pas directement rendu par le routeur. A l'intérieur du app.js, les seuls composants qui sont des composants enfants d' un routeur sont ces composants domestiques et aussi la carte. La façon de contourner cela est d'utiliser un paquet appelé le routeur. Le routeur est un composant d'ordre supérieur qui enveloppera notre aperçu de carte. Par conséquent, en passant le même emplacement et les accessoires d'historique, et le routeur est également disponible dans ce même paquet de routeur de réaction que vous avez déjà installé. Passons à l'aperçu du tableau et nous pouvons l'importer en haut du fichier. Il s'agit d'une exportation nommée. Sony, pour utiliser les accolades. Nous avons un routeur. Ceci provient du même paquet, qui est react-router dom. Ensuite, nous pouvons remplacer le contenu à l'intérieur de l'effort aléatoire. Plutôt que de simplement sortir dans this.props.board.title. Mais je vais afficher une liste non ordonnée, puis chaque élément à l'intérieur va être un élément de liste. Chaque élément est le tableau, donc nous pouvons alors sortir this.prompts.board.title. Sauvegardons cela et jetons un oeil aux composants de la maison. Nous avons toujours notre écran de balles gratuites ici. Ajoutons un peu de style à l'intérieur de notre liste non ordonnée. Tout d'abord, nous pouvons ajouter un nom de classe pour déclencher le CSS. Ceci est un élément d'aperçu du tableau. Sur la ligne suivante, nous allons ajouter un gestionnaire d'événements onclick, qui va déclencher une méthode appelée GoToBoard. Ensuite, nous allons ajouter un style en ligne, qui va définir la couleur d'arrière-plan de chacun est des aperçus du tableau. Cela reflétera la couleur de fond, que nous définissons lorsque nous créons un nouveau tableau. Nous pouvons le faire avec une propriété CSS en ligne appelée background-color. Comme il s'agit de JavaScript, nous devons utiliser la couleur de fond de casse plutôt que d'utiliser les valeurs de tiret et minuscules comme nous le ferions avec un CSS régulier. Nous allons définir sa couleur d'arrière-plan égale à this.props.board.background. Maintenant, au-dessus de cela, nous pouvons créer notre méthode GoToBoard en dehors de la méthode aléatoire. Allons juste après notre cours de prévisualisation du conseil, nous pouvons créer GoToBoard, configurer notre fonction. Tout d'abord, nous allons saisir la carte d'identité, que nous avons actuellement des accessoires d'initiés. Si on va à l'aperçu de la balle. À l'intérieur des DevTools, à l'intérieur des accessoires, vous avez toutes les informations dont nous avons besoin. scrab d'abord Iet a probablement acheté ID installé cela dans la constante latérale. L' ID de carte va être égal à this.props.board.id. La deuxième passe d'aujourd'hui est alors utiliser la méthode push du routeur de réaction pour les centres vers une URL différente. Ce que vous voulez faire est de cliquer sur l'un de ces liens. Ensuite, nous voulons être amenés à une nouvelle URL. Donc, board, puis forward /theboardid, que nous avons stocké à l'intérieur de cette variable. Faisons ça maintenant. This .props.History. Accédez à la méthode push. Cela va prendre dans un objet où nous pouvons spécifier le nom du chemin. Depuis ce chemin, nous allons utiliser cette variable d'ID de carte. Nous devons utiliser les ticks arrière pour construire ça. Tout d'abord, nous pouvons naviguer vers la barre oblique avant, puis la barre oblique avant. Nous pouvons utiliser la syntaxe du modèle des accolades symbole Italo, puis passer l'ID du conseil. Si nous disons maintenant ce fichier et ensuite passer à nos composants à la maison. Nous avons maintenant les éléments de liste gratuits pour nos tableaux, qui est également obtenir la couleur de fond de this.props.board.background. Maintenant, nous allons cliquer sur l'un d'entre eux et voir si la méthode push fonctionnera. Nous voyons maintenant votre message désactivé ne peut pas lire la propriété push de undefined. Cela ne fonctionne pas parce que, comme nous l'avons mentionné précédemment, le paquet que nous sommes importants en haut du fichier, qui est appelé routeur, devra maintenant être un rappeur pour ces composants. Nous pouvons le faire assez facilement si nous passons à notre exportation, et ensuite nous pouvons envelopper nos composants d'aperçu de carte avec un routeur, puis à l'intérieur, nous pouvons passer dans notre aperçu de carte, enregistrer ce fichier, et ensuite nous allons vérifier cela dans le navigateur. Nous pouvons cliquer sur l'une de ces cartes et ensuite nous l'emmenons aux composants de la carte. C' est le conseil numéro 2 000. Retournons en arrière et essayons des idées de cause. C' est maintenant le conseil d'administration numéro 1 000. Aussi la même chose pour les idées de jardin. Plus tard dans le cours, quand nous aurons à utiliser dans Firebase, nous utiliserons cette carte d'identification pour obtenir données uniques de la balle plutôt que pour ce jeu de cargaison, que vous voyez ici. Mais pour l'instant, c'est un pas dans la bonne direction, et ensuite nous allons jeter un oeil à la façon dont nous pouvons passer l'état en utilisant le routeur de réaction. 20. Passer l'état par le routeur: Nous savons déjà comment passer en aval lors du rendu des composants à l'aide du routeur, tout comme nous l'avons fait avec ces composants domestiques. Nous allons passer les planches et créer également une nouvelle fonction de conseil d'administration. Également dans l'aperçu du tableau, nous avons navigué vers un autre itinéraire en utilisant la méthode push. En utilisant cette méthode push, nous avons aussi parfois la nécessité de transmettre l'état à notre nouvelle URL ou au composant qui est en cours de rendu. Lorsque nous allons sur le navigateur et revenons ensuite à notre section Accueil, si nous cliquons sur n'importe quel tableau que vous voulez voir, ce serait une bonne idée de passer également les données aux composants de la balle, tels que le titre de la balle et aussi le background- couleur. Dans l'aperçu du tableau, nous pouvons ajouter l'état ou ajouter des données juste après le chemin d'accès. Nous pouvons également mettre en place un objet d'état et à l'intérieur, nous pouvons transmettre les informations de notre carte. Tout d'abord, je vais passer le titre. Cet aperçu de balle a accès à toutes les informations de carte qui sont transmises à partir des composants Home. Jetons un coup d'oeil. Cet aperçu du plateau reçoit alors la carte en tant qu'accessoire. Par conséquent, nous pouvons y accéder avec ce top accessoires, le conseil. On peut accéder au titre. Nous pouvons également transmettre l'arrière-plan de la même manière. Ce sera ce top accessoires, le conseil d'administration, l'arrière-plan. Nous pouvons essayer cela dans le navigateur, enregistrer ce fichier, puis revenir à nos aperçus du tableau, cliquer sur l'un de ces, puis nous pouvons utiliser un outil de développement React. Nous pouvons rechercher la carte, qui est les composants actuels. Sélectionnez ceci et maintenant à l'intérieur des accessoires, nous pouvons également utiliser cet emplacement prop, qui est transmis via le routeur. Si on ouvre ça, on a maintenant un objet d'état vivant ici. Laissons cela vers le bas et maintenant avoir l'arrière-plan et aussi le titre disponible pour ce tableau. Le titre est Conseil était cours Idées. Alors revenons en arrière et vérifions aussi les idées de la Maison. Vérifiez le tableau, l'emplacement, les états, et maintenant avoir les idées de maison sont le titre et aussi la couleur de fond. Maintenant, nous savons où vivent nos données dans ces composants. Nous pouvons maintenant l'utiliser au Conseil. Passons aux composants board.js. Tout d'abord, nous pouvons définir la couleur de fond du Conseil. Nous pouvons ajouter cela à la div d'ouverture à l'intérieur de notre effort aléatoire. Alors ajoutons ceci à une nouvelle ligne. Nous pouvons d'abord ajouter un nom de classe et le lier au CSS, ce sera Board wrapper. Ensuite, comme nous l'avons fait avec l'aperçu de la carte, nous pouvons également mettre en place nos styles, qui va définir la couleur de fond en utilisant camel-case, que nous pouvons récupérer de ce top accessoires, l'emplacement, l'état, le arrière-plan. Assurez-vous qu'il est correctement orthographié. Avant d'aller plus loin et d'ajouter le titre, nous pouvons maintenant voir le bleu est apparu dans le navigateur. On peut y retourner, voir les idées de cours jaunes. Nous ferons la même chose aussi pour les idées de jardin. Passer la couleur de fond à notre planche. Juste en dessous, nous pouvons également ajouter un titre de tableau et aussi un bouton de suppression de tableau, que vous pouvez utiliser plus tard. dessous de notre div pour le board-wrapper, nous avons le div avec le nom de la classe de wrapper listes. Allons au-dessus de ça. Nous pouvons mettre en place un nouveau div, qui va être pour l'en-tête du conseil. Ajoutez donc notre nom de classe ou notre en-tête de trait d'union. À l'intérieur, ajoutons un titre de niveau trois, qui sera pour le titre. On peut prendre le titre du tableau en utilisant la liste des accessoires. emplacement, .states, puis le titre. Juste après cela, nous allons également ajouter un bouton, qui sera utilisé plus tard dans le cours pour supprimer le tableau. Nous n'ajouterons pas de gestionnaires de clics ici pour l'instant. Au lieu de cela, nous allons juste commencer par le texte du tableau de suppression. Maintenant, nous pouvons enregistrer cela et aller dans le navigateur. Nous avons notre bouton de suppression dans le coin et aussi notre titre de tableau. A [inaudible] nous avons des idées de cours et aussi des idées de la Chambre aussi. Maintenant, notre couleur de fond et aussi notre titre de carte ont été transmis à ces composants de carte en utilisant l'objet d'état via le routeur React. C' est sur notre travail dans, donc je vous verrai maintenant dans la section suivante où nous allons travailler en utilisant Firebase. 21. Configurer l'entreprise: Pour ce projet, nous allons utiliser Firebase comme back-end. Cela nous permettra d'ajouter une base de données pour stocker tous nos tableaux, listes et cartes. En outre, il nous permettra de ne récupérer que le tableau, la liste et les cartes dont nous avons besoin pour l'utilisateur qui se connecte actuellement. Nous pouvons les trier par date de création. Il nous donnera des mises à jour en temps réel au fur et à mesure que les données changent, et bien plus encore. En outre, nous pouvons utiliser Firebase pour l'authentification des utilisateurs, l' inscription et la connexion. Une autre grande fonctionnalité de Firebase est qu'il peut être utilisé non seulement pour des projets web, mais aussi pour iOS et Android aussi, sorte que nous pouvons partager les mêmes données sur plusieurs applications. Nous pouvons nous lancer sur firebase.google.com. Vous devez vous inscrire avec un compte Google si vous ne l'avez pas utilisé auparavant. Si vous avez besoin d'aller de l'avant et de vous inscrire maintenant. Je suis actuellement connecté, donc je vais juste cliquer sur « Aller à la console ». Avant d'aller plus loin cependant, Firebase semble changer la mise en page et la conception de son site Web assez régulièrement, mais les étapes sont généralement similaires. Si cela semble un peu différent lorsque vous visitez, vous devriez toujours être en mesure d'arranger les choses, car il n'y a que quelques étapes à franchir. La première chose que nous devons faire est de créer un projet, en cliquant sur « Ajouter un projet ». J' ai déjà un projet appelé React Trello, donc à la place je vais appeler ce React Trello 2. Nous devons également accepter les termes et conditions avant de pouvoir créer notre projet. Alors donnez-nous quelques instants à créer. Nous allons utiliser la dernière base de données Firebase, appelée Cloud Firestore, qui nous donnera nos fonctionnalités en temps réel. temps réel, ce qui signifie que notre application peut être mise à jour avec des modifications au fur et à mesure qu'elles se produisent, et que nos données peuvent être synchronisées sur différents appareils, plutôt que nous ayons à faire une nouvelle demande après chaque modification. Une fois cela fait, nous pouvons cliquer sur « Continuer », puis nous sommes amenés à la page d'accueil de notre projet. Nous devons maintenant cliquer sur le Cloud Firestore, que nous pouvons obtenir en cliquant sur cette section Cloud Firestore juste ici. Ou nous pouvons cliquer sur la « Base de données » dans le menu. Envoyer les choses est assez simple, suffit de cliquer sur « Créer une base de données ». Nous allons commencer en mode test, juste pour l'instant, sens et c'est que tous les utilisateurs peuvent lire et écrire dans notre base de données. Mais nous ajouterons des règles de sécurité plus tard. Cliquez sur « Suivant ». Nous pouvons ensuite sélectionner notre région la plus proche de nous. Choisissez l'un de ces éléments, puis cliquez sur « Terminé ». Voici notre page d'accueil de base de données, et c'est là que nos données s'afficheront une fois que nous les pousserons à Firebase. Nous pouvons également ajouter manuellement des collections à l'aide de ce lien ici. Une collection est un ensemble de données qui seront nos tableaux, nos listes et nos cartes. Ensuite, ajoutez cette base de données à notre projet. Nous devons d'abord obtenir nos paramètres Firebase. Nous pouvons le faire dans la barre latérale, puis cliquez sur « Aperçu du projet ». Nous allons utiliser la version web, alors cliquez dessus. Nous devrons donner un surnom à notre demande. Je veux aussi appeler ceci, React Trello 2. Alors enregistrez notre application. Cela nous donnera accès à nos paramètres de configuration, que nous devons ajouter à notre projet. Nous devons copier tous les paramètres à partir de l'objet config. Fondamentalement, tout à l'intérieur de ces accolades. Copiez toutes ces lignes de code. Ensuite, nous pouvons les prendre en charge au code Visual Studio. Créons un nouveau fichier. Ouvrez la barre latérale à l'intérieur de la source, nouveau fichier. Cela va s'appeler Firebase.js. L' étape suivante consiste à installer Firebase à partir de NPM. Descendez au terminal, appuyez sur Commande ou Contrôle C si vous avez besoin de fermer le serveur, puis vous pouvez exécuter une commande appelée NPM, I pour l'installation, puis le paquet est simplement appelé Firebase. Maintenant, si nous retournons dans notre fichier Firebase.js, nous pouvons maintenant faire une importation, extraire notre paquet Firebase et le stocker dans une variable. Importez ceci à partir des modules de noeud. Ce paquet s'appellera Firebase. Ensuite, nous allons faire une barre oblique vers le haut. barre oblique vers le haut est le client Firebase, qui est requis lors de l'utilisation de Firebase. L' étape suivante consiste à importer également le package firestore. Nous n'avons pas besoin de stocker cela dans une variable, donc nous pouvons simplement faire une importation sans l'installer par son nom, donc nous pouvons importer le paquet Firebase, puis une barre oblique avant Firestore. Cela rendra la fonctionnalité firestore disponible dans nos projets. Nous allons ensuite créer une constante appelée config. Config va contenir toutes les options que nous venons de copier à partir de Firebase. On peut les coller ici. Fermons la barre latérale pour avoir un peu plus d'espace. On dirait que j'ai raté la fin du treillis, mais ça n'a pas d'importance. Allons vers le bas et maintenant initialisons notre application. Nous pouvons le faire en sélectionnant notre variable Firebase, que nous avons importée en haut. Ensuite, nous pouvons faire une méthode appelée initialize App, puis nous allons passer dans notre objet de configuration sans paramètres de Firebase. Avec cette configuration maintenant prise en charge, je vais maintenant mettre en place trois constantes, celles-ci pointent vers nos collections de bases qui vont être des conseils, des listes et des cartes. C' est juste un raccourci que nous allons utiliser tout au long de notre projet, plutôt que d'avoir beaucoup de code répétitif qui pointera vers l'emplacement dans notre base de données. Tout d'abord, nous allons créer une constante appelée db. Il va être égal à Firebase.FiRestore. Encore une fois, c'est aussi un raccourci. Ceci est un pointeur vers notre base de données Firebase, et maintenant nous pouvons simplement taper db au lieu de Firebase.FiRestore. En dessous de cela, nous allons maintenant créer une référence à chaque collection dont nous avons besoin, cela nous permettra d'accéder à ces nouveaux projets pour enregistrer et récupérer des données simplement en utilisant le nom de la variable. Tout d'abord, nous allons créer un BoardsRef, et cela va être égal à notre base de données, qui est DB, et je vais accéder à une collection que nous n'avons pas encore, mais cela aura le nom des boards. Je vais copier et coller cela dans plus de fois. La seconde sera une référence à nos listes. Le nom de la collection va être des listes. Ensuite, le troisième sera un pointeur vers nos cartes. Tout cela signifie maintenant est dans notre projet lorsque nous voulons pousser une carte à Firebase ou récupérer une carte de Firebase, nous avons juste besoin de taper le mot boardsRef, plutôt que d'avoir à taper firebase.firestore.collection.boards. Maintenant, nous pouvons exporter ces références, afin que nous puissions y accéder dans les fichiers. Vous pouvez le faire, avec un nom Export à l'intérieur des accolades. Nous pouvons exporter nos BoardsRef, notre projet de liste, et aussi les cartes ref aussi. Nous pouvons maintenant enregistrer ce fichier et tester qu'il fonctionne dans le app.js. Nous pouvons commencer avec notre BoardsRef en important ceci en haut du fichier. Juste en dessous de la classe, nous pouvons créer une importation, nous allons tout d'abord importer nos boardsRef. Ceci est à partir de notre fichier Firebase, qui est un stringoff./ puis Firebase. C' était une exportation nommée, donc nous pouvons importer chacun à l'intérieur de ces accolades. Nous pouvons ensuite ajouter un test rapide dans le ComponentDidMount pour vérifier que cela fonctionne. Juste sous nos états définis, nous pouvons maintenant accéder à cette variable BoardsRef. Nous pouvons ensuite appeler une méthode appelée dot add, qui est une méthode Firebase pour ajouter de nouvelles données à cette collection. Nous allons simplement créer un objet avec un nom et une valeur de bonjour. Sauvons ça. Maintenant, si nous allons sur notre projet et puis rechargeons, nous avons une erreur de BoardsRef. Vérifions ça. Nous avons l'importation, qui semble correct, passez à Firebase, et cela a besoin d'un S. Retour au projet. Rechargez, et cela entraînera désormais l'exécution du composant en montagne. Si nous allons à Firebase, et que nous pouvons fermer cela, allez à la console, et dans notre base de données. Nous voyons maintenant que nous avons une collection de tableaux avec un seul document. Ceci est l'ID du document, alors nous avons le nom de bonjour. L' un des avantages de l'utilisation de Firebase est que nous n'avons pas besoin de définir nos collections à l'avance. Nous pouvons simplement pousser un nouvel objet ou un nouvel élément à Firebase, et il créera également la collection et les documents nécessaires. Ce n'est qu'un test, donc je vais supprimer ceci maintenant. Allons dans nos tableaux, supprimez la collection. Nous devons également taper le nom du tableau. Nous pouvons supprimer cela, puis supprimer le code de ComponentDidMount dans le app.js. Supprimez cette ligne de code, enregistrez ce fichier. Maintenant, cela nous laisse avec Firebase sur notre configuration. Nous sommes heureux de passer à la prochaine vidéo. 22. Pushing les données dans la Firebase: Nous avons maintenant cinq baies configurées et nous savons que notre connexion fonctionne maintenant. Nous pouvons passer à la création de nos méthodes en réaction à puis pousser les données à Firebase, en commençant par ce app.js. Ici, nous avons déjà une méthode mise en place pour créer un nouveau tableau. Nous pouvons donc maintenant utiliser la méthode Firebase add pour pousser nos nouvelles données de carte dans notre base de données. Commençons à l'intérieur de cette méthode juste avant de définir l'état. Nous créons une nouvelle constante qui s'appellera le nouveau conseil. Nous voulons définir cela égal à notre graphique de carte que nous avons importé en haut du fichier dans la dernière vidéo, qui pointera vers notre collection de tableaux. Nous allons ensuite utiliser la méthode add pour pousser un objet, qui va être notre tableau, qui est passé à cette méthode en tant que paramètre. L' enregistrement Firebase recevra automatiquement un ID généré. Avant de sauvegarder nos nouveaux états de carte, nous pouvons construire un nouvel objet où nous avons grandi cet ID, puis l'ajouter au reste du tableau. Faisons-le, juste au-dessus de notre appel d'état défini. Nous pouvons créer une constante qui va être appelée l'objet de la carte. Ici tout ce que je veux faire est de saisir les données de carte existantes et aussi de fusionner un ID. Donc, tout d'abord, disons une propriété ID, qui sera égale à nos nouvelles constantes de conseil, puis ID. Rappelez-vous, la nouvelle carte fera référence aux données qui reviendront de Firebase lorsque nous ajouterons cette nouvelle carte. Par conséquent, il aura également la propriété Firebase ID. Nous pouvons également ajouter une virgule, puis utiliser cet opérateur de propagation pour ajouter le reste du tableau. Maintenant, lorsque nous définissons dans les états, nous voulons à la place ajouter ces nouveaux objets de carte. Ensuite, nous pouvons ajouter un peu de gestion des erreurs à cette méthode en utilisant async wait. asynchrone nous permettra d'attendre que la carte soit d'abord enregistrée Firebase avant de passer à la ligne de code suivante. Nous voulons nous assurer que la carte est d'abord sauvegardée car nous devons accéder à cet ID généré avant de pouvoir l'enregistrer à l'état. Tout d'abord, nous pouvons définir cette fonction pour être asynchrone en ajoutant le mot-clé asynchrone. Cela nous permettra alors d'ajouter l'attente dans notre méthode. Les données que nous voulons réveiller et revenir sont cette nouvelle carte de Firebase. Nous pouvons ensuite ajouter un peu de gestion des erreurs en utilisant try and catch. Tout d'abord, exécutons ce code à l'intérieur d'un bloc try. Ouvrez les accolades. Quand je fermerai ça juste après que nous ayons établi l'état. Ajouter une accolade supplémentaire à la fin. Si vous n'êtes pas habitué à essayer d'attraper avant que la section try soit le code que nous devons d'abord essayer d'exécuter. Si le code qui est exécuté réussit, tout va bien. S' il y a une erreur lors de l'exécution de ce code dans le bloc try, nous pouvons alors attraper cette erreur en utilisant un bloc catch. Juste après cette accolade bouclée, nous pouvons également ajouter un bloc catch, qui va prendre l'erreur comme une variable. Ouvrez et fermez les accolades. Nous pouvons ensuite faire une erreur de console, que vous allez générer une chaîne d'erreur en créant une nouvelle carte et un deux-points. Ensuite, après cela, nous pouvons également ajouter une virgule. Ensuite, nous pouvons également afficher cette erreur qui est transmise pour attraper, ceci pour sauver. Ensuite, on peut aller à nos conseils et essayer ça. Off au navigateur dans nos projets. On a toujours un graphique à barres ici. Allons dans les planches. Il est maintenant terminé à un des composants de la maison. Eh bien, nous devons ajouter un utilisateur, allons-y pour 1, 2, 3, puis barre oblique avant. Essayons ceci en poussant un nouvel élément dans Firebase. Allons pour une planche de test une couleur verte, puis créer une nouvelle planche. Ce tableau est ensuite immédiatement ajouté car il l'a poussé à l'état. Comme nous le savons déjà, l'état déclenchera une mise à jour dans tous les composants qui utilisent des données. Si nous actualisons maintenant ceci, les données seront perdues puisque nous obtenons ces cartes à partir d'états plutôt que de Firebase. On peut aller sur la console Firebase et vérifier que ça a été enregistré. Rechargez la console. Notre planche de test est maintenant sauvegardée à l'intérieur. Comme nous l'avons mentionné précédemment, Firebase ajoute un ID unique. Allons dans les outils de développement. Nous pouvons également vérifier que cela est ajouté à notre état. C' est notre test 2. Créez un nouveau tableau. Vous pouvez maintenant voir comment les états ont été mis à jour pour inclure quatre éléments dans le tableau. Cliquez dessus, si nous cliquons sur le dernier, nous voyons maintenant que cet identifiant unique a été ajouté à notre objet. Ce doit être le même ID qui est fourni dans la Firebase en cas de rechargement. Cliquez ensuite sur ceci. C'est notre test deux avec le même ID, que nous avons maintenant dans l'état. Faisons maintenant la même chose dans le board.js. Nous pouvons pousser nos nouvelles listes à Firebase 2. Rendez-vous à nos composants de balle. Ensuite, nous devons chercher une méthode appelée créer une nouvelle liste. C' est ce dont nous avons besoin ici. La première chose que je vais faire est de marquer cette fonction comme un évier, afin que nous puissions utiliser une attente. Ensuite, nous pouvons ajouter un peu de gestion des erreurs en ajoutant un bloc try. Ouvrez et fermez les accolades. Nous pouvons ensuite retirer cette accolade bouclée et ensuite l'ajouter à la fin. Juste après que nous avons remis notre Ref à une chaîne vide, vous pouvez ajouter ceci dans. Ajouter un bloc catch qui transmet une erreur. Ouvrez et fermez les accolades. Ensuite, nous pouvons passer une erreur de console avec la chaîne, ce qui va être une erreur de création d'une nouvelle liste. Passer l'erreur. Avec cette gestion des erreurs maintenant prise en charge, nous devons maintenant apporter quelques modifications à notre objectif de liste. Défilons vers le haut. Ici, nous avons un objet de liste que nous avons créé plus tôt. La première étape consiste à supprimer cet ID. Puisque nous allons ajouter ceci via Firebase. Nous pouvons également supprimer ces cartes tableau puisque vous n'avez plus besoin de ces données. Supprimons ça. Nous serons des cartes d'identité comme une collection séparée à l'intérieur d'une Firebase, puis les relierons ensemble via les identifiants. Maintenant, nous devrions juste être laissés avec le titre, le tableau, et aussi l'art créé. Cette liste doit également être liée au tableau de couleurs, afin que nous puissions modifier la propriété du tableau pour ce faire, plutôt que d'avoir une valeur codée en dur. Nous pouvons maintenant définir ce point pour être ce point accessoires dot match dot params dot boardId. Si nous allons à notre carte, rappelez-vous, ce sont les données que nous recevons du routeur de réaction. Nous pouvons voir cela dans les outils de développement. Si nous cliquons sur l'un de ces, choisissez la carte, alors nous avons les accessoires passés via le routeur, à l'intérieur d'un match dot params. Nous avons ce BoardID. Par conséquent, vous allez lier la carte qui a été créée avec le tableau actuel. Cela nous permettra plus tard dans le cours, de tirer ensuite toutes les listes de Firebase pour le tableau actuel que nous regardons. Ci-dessous, nous avons une déclaration. Nous pouvons également nous assurer que le BoardID est également présent avant de l'enregistrer dans Firebase. Vous pouvez également ajouter une liste, une partie parce que nous ne voulons pas enregistrer une liste qui n'a aucune relation avec un tableau. Maintenant, au lieu d'enregistrer cette liste dans les états, nous allons maintenant pousser ceci à Firebase. Puisque nous traitons maintenant des listes, plutôt que des tableaux, nous devons importer la référence de liste à partir du fichier basé sur o5. Nous pouvons le faire en important les listes ref, à partir de notre fichier Firebase, qui se trouve dans la barre oblique point-point puis le nom de fichier de Firebase. Ensuite, nous pouvons ajouter notre nouvelle liste à Firebase au lieu d'utiliser les états définis, que vous déplacez cette ligne. Au lieu de cela, nous pouvons ajouter un poids à la dysfonction de marque comme asynchrone. Nous pouvons accéder à nos listes brouillon. Nous pouvons ensuite utiliser la méthode add pour ajouter un nouvel objet. Ce nouvel objet est la liste avec reculé ci-dessus. Maintenant, sauvegardons ceci et nous pouvons tester cela dans le navigateur, assurez-vous que vous à l'intérieur de l'une des cartes. Ensuite, nous pouvons maintenant aller et créer une nouvelle liste. Cliquez dessus, donc liste de cours 1 et ajoutez également la liste de cours 2 sur la console Firebase. Après le rechargement, consultez maintenant nos listes d'objets ou notre collection de listes a maintenant été créée. Nous avons nos deux listes. Le premier est lié au tableau 1,000, tout comme le second. Nous pouvons voir à l'intérieur de nos projets dans l'URL que c'est le BoardID. Allons juste passer aux idées maison et autres une nouvelle liste 2. Liste de la maison 1, nous allons vérifier ça à l'intérieur de la console. Assurez-vous que cela a l'ID de 2 000. Voilà, tu y vas. La dernière chose que nous devons faire dans cette vidéo, est de créer une nouvelle carte. De nouvelles cartes sont créées dans les composants de la liste parent. Cela suivra un modèle similaire à ce que nous venons de faire. Il ne devrait pas y avoir de surprises. Vers les couches de points de la liste. Nous pouvons d'abord définir la méthode de création d'une nouvelle carte pour être asynchrone. Vous pouvez ensuite envelopper notre code dans le bloc try. Enlevez l'accolade de fermeture, puis nous pouvons ajouter cela en bas. Vos informations sur le journal de la console, ajoutez également dans la section catch, que vous allez prendre dans toutes les erreurs qui sont créées. Il génère une erreur de point de console avec la chaîne d'erreur créant une nouvelle carte, au deux-points, puis transmettez notre erreur. La seule modification de notre carte est la définition de l'ID de liste. Nous pouvons saisir cela à partir des invites de liste, qui sont transmis, plutôt que la valeur codée en dur de abc 1,2,3 nous les saisissons de nos accessoires, que vous définissez via l'ID de point de liste. Ici, nous créons une nouvelle carte. Nous allons également créer une référence à la liste, à laquelle elle appartient. Si nous passons à la liste des composants de nos projets et des outils réactifs, recherchez n'importe quelle liste. Nous pouvons alors voir cette liste qui est passée comme accessoires. Ici, nous saisissons l'ID de liste, qui est 100 dans ce cas, le second a un ID de liste de 300 et ainsi de suite. L' étape suivante consiste à importer nos cartes ref, à partir de notre fichier Firebase. A l'intérieur des accolades. Prenez le graphique de la carte. Le chemin d'accès du fichier est également une barre oblique à points pointus Firebase. Tout comme nous l'avons fait avec la liste avant, nous pouvons également descendre aux déclarations if avant de pousser ceci à l'état. Ensuite, nous pouvons également ajouter à la fin une deuxième piste, qui va également vérifier si l'ID de la liste de points de carte est également présent. Puisque cela est nécessaire avant d'enregistrer dans les états ou dans Firebase. L' étape suivante consiste à supprimer également cette méthode d'état d'ensemble. Au lieu de cela, nous allons attendre cartes ref dot ajouter. Nous ajoutons ceci à Firebase, l'objet que nous voulons ajouter est cette carte que nous venons de construire ci-dessus. Analyse d'une carte, enregistrez ce fichier et puis nous pouvons tester cela dans le navigateur. Nous pouvons tester cela en ajoutant une nouvelle carte dans plusieurs listes. Disons carte de maison 1, carte de maison 2. C' est pour les idées de voyage. Carte de voyage 1. Il s'agit de la carte 1, transférez vers Firebase, puis actualisez la console. Ce sont les cartes. Ce premier est associé à la liste 200. Le second est 100s, et aussi 300s. Tout fonctionne bien. Nous avons également le texte correct pour chacun d'eux. Nous avons créé une mise à jour, qui est générée en utilisant JavaScript. Nous n'avons pas encore d'étiquettes, mais nous reviendrons plus tard dans le cours. Vous pouvez maintenant utiliser les données Firebase. Dans la vidéo suivante, nous allons supprimer les exemples de données de nos projets et lire plutôt les données de Firebase. 23. Lire les données de Firebase: Les données d'échantillon que nous avons importées plus tôt ne sont plus nécessaires dans notre projet. Donc, nous pouvons maintenant commencer à le supprimer et travailler à partir de notre base de données. Nous pouvons le faire dans le app.js. Tout d'abord, nous pouvons supprimer l'importation, donc importer des données, allons supprimer cette ligne, puis en bas, nous avons un composant a monté, qui définit l'état en utilisant cet exemple de données. Supprimons cette ligne aussi. Au lieu de cela, je vais créer une méthode qui va obtenir nos planches de firebase mais seulement quand nous en avons réellement besoin. Juste en dessous de ce composant a monté, nous voulons créer une nouvelle méthode appelée get boards. Ce sera une fonction asynchrone, qui va prendre l'ID utilisateur, qui va lui passer. Au lieu de notre fonction flèche, créez une section try et aussi un catch, qui prend dans l'erreur, que vous êtes toujours un journal de console avec le message d'erreur de zone obtenant cartes et aussi en passant le message d'erreur juste après cela. La première chose que nous voulons faire lorsque nous arrivons aux nouvelles cartes de firebase, est de définir l'état pour être vide. Donc, à l'intérieur du bloc try, nous pouvons faire avec cet état .set, puis à l'intérieur, nous pouvons ajouter nos objets d'état, qui va définir les cartes pour être un tableau vide. Cela garantira simplement que les cartes et états précédents seront supprimés avant de faire un nouvel appel à firebase. En haut, nous avons déjà notre référence de carte importée de firebase. Donc, nous pouvons maintenant utiliser ceci pour obtenir le contenu de la collection de boards et nous pouvons le faire en appelant la méthode get. Donc, juste en dessous de l'état défini, nous pouvons commencer à obéir aux constantes avec le nom des planches et ensuite nous pouvons attendre nos données en saisissant notre référence de conseil et en appelant la méthode .get. Cela n'obtiendra le contenu de notre collection de planches qu'une seule fois. Il n'écoutera aucun changement, mais nous verrons comment le faire plus tard dans le cours. Les constantes de la carte, que nous avons juste ici, contiennent toutes nos cartes, ce qui contiennent toutes nos cartes, signifie que vous pouvez ensuite les parcourir, les obtenir et les enregistrer dans notre état. Firebase nous permettra de le faire en utilisant un pour chaque méthode et nous pouvons le faire juste en dessous de cette ligne. Nous pouvons sélectionner nos constantes de conseil, nous pouvons faire une boucle avec pour chacune. Ici, nous allons stocker chaque élément à l'intérieur de nos planches dans une variable appelée tableau. À l'intérieur de ce corps de fonction, nous pouvons commencer par faire un journal de console, puis charger la valeur de notre carte. Avant de sauvegarder cet état, nous allons faire un journal de console, car cela peut être un peu déroutant sans voir ce qui revient de firebase. Pour exécuter cela, nous pouvons temporairement ajouter cette méthode ci-dessus lorsque le composant monte. Donc à l'intérieur, nous pouvons l'appeler avec this.get boards. D' accord. Une fois cela fait, nous pouvons ouvrir le terminal, assurez-vous que le serveur a démarré avec un démarrage NPM. Lancez ça. Nous pouvons ensuite passer au projet, puis si nous faisons un clic droit et puis inspectons, ouvrez ceci dans la console et faisons une actualisation. À l'intérieur de la console, nous voyons ce qu'on appelle un instantané de document de requête, qui est un instantané du document que nous lisons depuis firebase à ce moment particulier. Si nous ouvrons cela, il contient l'ID de la carte, que vous pouvez voir ici. Nous avons besoin de saisir cela mais si nous voulons seulement les données réelles du document, plutôt que toutes ces métadonnées, que nous voyons ici avec les références Firebase, nous pouvons changer notre journal de console pour appeler la méthode de données, qui va extraire tous les champs en tant qu'objet. Donc, dans notre journal de console, nous pouvons également ajouter la méthode .data aux extrémités. Ajoutez également les crochets pour appeler ceci comme une méthode. Nous voyons maintenant nos quatre objets de planche. On peut ouvrir ça. Nous pouvons ouvrir le tableau et maintenant nous voyons les propriétés de fond créé au titre et aussi l'utilisateur. Ceci est stocké dans un objet de carte, que vous pouvez voir juste ici avec les étalonnages. Ainsi, nous pouvons explorer plus loin en ajoutant .board à la fin de notre journal de console. Allons de temps en temps à la fin des données, nous pouvons ajouter tableau pour accéder aux objets individuels, recharger et ensuite nous les prenons directement dans notre objet. Ce sont les données exactes dont nous avons besoin. Le seul champ manquant est l'ID, que nous avons mentionné précédemment, mais nous pouvons le saisir directement à partir du tableau. Maintenant, nous pouvons stocker ces données à l'intérieur d'une constante de dans le app.js. Donc, plutôt que ce journal de la console, nous pouvons maintenant supprimer cela, nous pouvons définir obey constante appelée données, qui va être égal à board.data.board, que nous avons vu dans le journal de la console et ensuite nous pouvons créer une nouvelle carte objet. Prenons ces données de carte, puis mélangez-les avec l'ID manquant. Sur la ligne suivante, nous créons une seconde constante, qui est pour les objets de la carte. Configurez nos objets. Tout d'abord, nous pouvons mélanger dans l'ID. Nous pouvons saisir cela directement à partir de Board.id, puis nous pouvons nous étaler avec les trois points. Les données, qui est cette constante juste au-dessus. Juste après cet objet, nous pouvons maintenant définir l'état avec cet état .set. À l'intérieur, nous allons cibler l'objet des planches. Nous allons définir ceci sur un tableau, donc nous allons prendre une copie de l'état existant, avec ce .state, .boards, séparés par une virgule, nous pouvons ensuite ajouter dans notre nouvel objet de carte, enregistrer ce fichier et ensuite nous pouvons tester cela dans le navigateur. C' est un bon début. On voit que la planche est retirée de la base de feu. Ajoutons un nouvel objet ou un nouvel objet de tableau. Allons aux outils de développement de réaction, recherchez notre composant personnel. Nous avons nos planches comme accessoires, je vais voir le tableau avec nos quatre nouvelles cartes. Essayons d'en ajouter un de plus. Allons de l'avant pour faire la couleur de l'orange, créer de nouvelles planches et maintenant j'ai un objet supplémentaire poussé à notre état et ceci est construit de la même manière que tout le reste. Nous avons mélangé l'ID avec toutes les autres données de la carte. Donc, actuellement, nous avons ajouté cet appel pour obtenir notre carte à partir de Firebase à l'intérieur du composant n'a pas monté. Nous ne voulons saisir ces tableaux que lorsque le composant personnel se charge plutôt que l'application réelle, car c'est là qu'ils vont être affichés. Tout ce que nous devons faire pour cela est de déplacer le composant a monté le code sur les composants de la maison. Nous allons couper le composant a monté section. Nous n'avons plus besoin de cela et ensuite nous pouvons passer à nos composants domestiques et ensuite nous pouvons coller cela en haut, juste au-dessus de notre méthode aléatoire. Puisque nous accédons maintenant à cette méthode get board, qui est dans le app.js, nous devons maintenant passer cela comme un accessoire. Défilons vers le bas jusqu'à notre routeur, puis à l'intérieur du lien de la maison , qui est celui-ci juste ici, nous pouvons également ajouter un accessoire appelé get boards, qui va être égal à notre méthode de this.get boards, enregistrez ce fichier et maintenant plus à notre composant a monté à l'intérieur de notre home.js, nous avons maintenant besoin d'accéder à ceci via des accessoires. Donc, c'est this.props.board et ensuite ajouter ceci à notre validation de prop vers le bas. Get boards va être nos types d'accessoires et c'est une fonction qui est également nécessaire pour venir soit à la fin. Ensuite, nous pouvons maintenant enregistrer ceci et passer au navigateur. À l'intérieur, les cartes sont toujours affichées dans le navigateur, mais elles ne sont maintenant chargées que lorsque nous regardons tous ces composants. Si nous allons de l'avant et cliquez sur l'un de ces éléments, nous voyons toujours nos exemples de données ici, et nous allons corriger cela dans la prochaine vidéo. Lorsque nous avons créé le lien vers cette carte plus tôt, nous avons également passé cet ID de carte via les paramètres URL. Nous pouvons maintenant utiliser cet ID de carte pour récupérer les détails de la barre chargée actuellement à partir de Firebase, plutôt que de nos exemples de données. Cela sera stocké dans l'état local, c'est-à-dire à l'intérieur de ces composants, et sera utilisé pour afficher le titre de la balle et aussi la couleur de fond plutôt que d'utiliser les données d'échantillon que nous voyons maintenant. Faisons cela maintenant, c'est que les composants de la carte vont passer à la carte .layers. Jusqu' au sommet importaient dans la liste Ref. Nous devons donc aussi fonder la référence à la Commission 2. Nous allons charger la carte actuelle afin que nous puissions également ajouter cet état. Donc, c'est le conseil actuel. Nous pouvons configurer cela initialement comme un objet vide. Puis maintenant ci-dessous, nous pouvons également mettre en place une méthode personnalisée juste en dessous du composant fait monter, qui va obtenir notre carte actuelle de Firebase. Appelons cette méthode. Le get board va être une synchronisation, et il va aussi prendre l'ID de la carte. Donc nous n'obtenons que ces cartes uniques de Firebase. Nous pouvons configurer notre méthode dans une section d'essai. Aussi une section de capture ci-dessous qui va prendre dans l'erreur. Cela va envoyer un journal de console avec le message d'erreur, obtenir des cartes, et aussi passer l'erreur. Donc, la première chose à faire dans la section essayer ici est de créer une constante qui va stocker notre seule carte. Nous pouvons attendre cette information de Firebase. C' est dans les tableaux Ref. Nous voulons utiliser la référence du document, qui sera l'identifiant de carte unique, qui sera transmis lorsque nous l'appelons. On est en train de passer ça. Ensuite, nous pouvons appeler méthode .get pour saisir tout le contenu de notre tableau. Une fois que nous aurons notre conseil, nous pouvons maintenant dire que c'est l'état. Avec cet état défini, l'état que vous voulez mettre à jour est ce tableau actuel que vous avez juste ici. Set est égal à la valeur de nos constantes, et il est également nécessaire d'être conseil Ref. Alors faites ce changement. Donc nous ne voulons pas définir l'état comme ça. Je vais m'assurer que ce sont des planches trop juste au-dessus du sommet. Donc, actuellement, nous définissons dans cet objet de carte dans l'état, mais nous ne voulons pas le faire comme nous le voyons ici. Rappelez-vous plus tôt lorsque nous avons obtenu toutes les cartes dans le app.js. Si nous passons à la méthode des cartes d'écart, lorsque nous avons ajouté un journal de console, nous voyons que nous avons récupéré un instantané de requête. C' est la même chose ici afin qu'il puisse accéder aux objets de carte, la même manière que cela par deux-points besoin méthode de données, puis accéder à l'objet de carte. Alors faisons ça maintenant. Nous avons déjà cette carte, nous pouvons appeler .data et ensuite accéder à l'objet de la carte comme ça. Ces données de carte doivent être immédiatement disponibles. Donc, nous pouvons l'appeler à partir du composant fait monter en passant dans l'ID de carte actuel. Défilons vers le haut à l'intérieur du composant n'a pas monté. Nous pouvons maintenant appeler get board à l'intérieur ici en utilisant this.get board. Ensuite, nous devons passer l'ID qui est reçu à l'intérieur de cette méthode. Donc, pour saisir l'ID actuel, nous savons que cela est stocké dans les paramètres d'URL. vous pouvez voir en haut ici, et nous savons déjà comment accéder aux paramètres du routeur. Nous pouvons le faire avec ce .props, le nom de prop de correspondance qui provient du routeur. Nous allons accéder aux paramètres, puis au nom du paramètre, qui dans ce cas s'appelle l'ID de la carte. Enregistrez ce fichier et maintenant sur la carte à l'intérieur du navigateur. Dès que ce composant de carte sera chargé, passons aux outils réactifs et vérifions que nous avons les données dont nous avons besoin. Faisons une recherche pour les composants de la carte. Sélectionnez ceci à l'intérieur de l'état que nous avons la carte actuelle. Ouvrons cela et maintenant nous voyons toutes les données dont nous avons besoin telles que la couleur de fond et le titre. Donc, nous pouvons maintenant utiliser ceci dans notre méthode aléatoire à l'intérieur du tableau pour définir le titre et aussi l'arrière-plan. Donc, faisons défiler vers le bas jusqu'à la méthode aléatoire. Ensuite, la première chose à faire est de définir la couleur d'arrière-plan. Donc, plutôt que d'utiliser les accessoires de routeur, supprimons cela, et ensuite nous pouvons utiliser les données qui sont stockées dans l'état. Donc, ce .state, .actuel conseil. Nous pouvons accéder à la propriété d'arrière-plan. Juste en dessous à l'intérieur du titre de niveau trois, nous pouvons accéder à ce tableau .state dot.current et puis il saisit le titre. Vérifiez que cela fonctionne toujours dans le navigateur. Charger les composants de la carte, et nous voyons toujours le titre et la couleur de fond. Quand on va dans chacun de ces tableaux. Avec ce travail maintenant, nous pouvons passer aux composants d'aperçu de la carte, et aussi supprimer l'état qui est transmis par le routeur. Ce n'est donc plus nécessaire. Donc, peut supprimer ces objets d'état et ne laissant que le nom du chemin pour la redirection. Ils ne devraient toujours pas fonctionner correctement dans le navigateur. Donc, vous avez peut-être remarqué que tout cela fonctionnait complètement bien avant que nous ayons la couleur de fond et le titre passé par le routeur. Donc, vous vous demandez peut-être pourquoi les changements du tout. La raison est de mettre à jour les composants. Avant de passer l'ID et l'arrière-plan au composant de carte. Cela signifie qu'une fois la carte chargée, nous collons ensuite avec elle ces données exactes. Cependant, lorsque vous récupérez les données de la carte de Firebase et les stockez dans cet état, cela signifie que plus tard, lorsque nous mettrons à jour la carte comme le titre, toutes les modifications seront alors dynamiques et mettront également à jour le composant deux. Donc, il est maintenant en place, passons maintenant à la prochaine vidéo. 24. Le lieu et les méthodes orderBy: Avec ce que nous avons appris dans la dernière vidéo, nous pouvons maintenant l'appliquer à nouveau pour récupérer les listes et les cartes de Firebase. Nous allons également jeter un oeil à deux nouvelles méthodes Firebase. L' un s'appelle OrderBy et il va trier nos données, que nous récupérerons. Ensuite, la méthode Where nous permettra d'obtenir seulement une liste ou une carte, si le BoardID correspond au tableau actuel que nous affichons. Revenons à nouveau dans les composants de la carte. Le Board.js, nous pouvons démarrer en haut en supprimant l'SampleData, nous n'avons plus besoin de cette importation. Par conséquent, nous pouvons également supprimer l'appel setState, qui appliquera cela à l'état. Maintenant, si nous allons sur le navigateur, sur la vue du tableau, il n'est pas surprenant que nous ne voyons aucune liste ou carte dans ces composants. Nous allons donc remplacer notre SampleData par une méthode appelée getLists of dans les composants de la carte. Cela va obtenir nos listes de Firebase, tout comme la méthode GetBoard ci-dessous. Celui-ci est appelé GetLists, et cela va être égal à fonction asynchrone qui va également prendre dans le BoardID. Configurez la fonction flèche, puis à l'intérieur, nous pouvons créer notre try et aussi notre bloc catch. Catch bloc prend une erreur comme toujours, puis nous pouvons faire un journal de console avec la chaîne d'erreurs de récupération des listes. Ensuite, je vais ajouter une virgule, puis je vais aussi mettre l'erreur. Donc juste au-dessus de cette section d'essai, nous pouvons d'abord créer notre constante qui va contenir nos listes. Là où nous allons attendre notre liste que nous pouvons récupérer sur le ListRef. Nous pourrions maintenant chaîner à la fin de la méthode .get que nous avons utilisée précédemment, mais cela irait de l'avant et attraperait toutes les listes de notre base de données. Au lieu de cela, nous avons seulement besoin d'obtenir la liste pour ce tableau de colonne. Plus dans Firebase si nous revenons au navigateur, puis à la console. Rappelez-vous plus tôt lorsque nous avons créé une nouvelle liste et une nouvelle carte, nous avons également ajouté un ID. Cette liste, par exemple, a un BoardId de 1 000, puis cela reliera à un tableau individuel sur lequel il a été créé. Firebase nous permet de le faire en utilisant la méthode Where. Jetons un coup d'oeil à la façon dont nous pouvons le faire. Juste après notre ListRef, nous pouvons enchaîner à la fin la méthode Where. Puis à l'intérieur ici, cela prend trois paramètres. Le premier paramètre que nous ajoutons est le nom du champ. Le nom du champ sera égal à la liste du tableau, puisque nous regardons les objets de la liste et ensuite nous voulons sélectionner la propriété du conseil. A l'intérieur ici comme une chaîne, nous pouvons passer dans list.board. Le deuxième paramètre est la comparaison, ici nous pouvons utiliser moins de, supérieur ou égal, tout comme nous le pouvons avec JavaScript. Séparez par une virgule. En tant que chaîne, nous pouvons ajouter les doubles égaux pour comparer cette référence de conseil avec le BoardID qui est transmis à notre fonction en tant que paramètre. Maintenant, cela va seulement récupérer nos listes de notre collection, où le champ du tableau correspondra au BoardID chargé actuel. Cette liste comporte également un champ CreateDAT. Si on jette un coup d'oeil dans la console. Ceci est le champ CreateDAT juste ici, et cela peut être utilisé pour commander nos données à la date à partir de la date à laquelle elles ont été créées. J' ai une erreur d'orthographe ici, mais ce n'est pas un problème puisque nous pouvons les supprimer et ensuite créer une nouvelle liste plus tard. Jetons un coup d'oeil à la façon dont nous pouvons utiliser CreateDat à l'intérieur d'ici. Tout ce que nous devons faire est juste d'avoir où, cela nous pouvons également enchaîner à la fin la méthode OrderBy, puis à l'intérieur ici comme une chaîne, nous pouvons passer dans notre objet de liste, puis le nom de champ de CreateDAT. Cela va trier notre liste dans l'ordre croissant en utilisant le champ CreatedAt. Vous pouvez également utiliser n'importe quel autre champ ici aussi. Si vous voulez que l'ordre soit inversé, vous pouvez également ajouter un deuxième argument de décroissant qui raccourci à D-E-S-C. Mais je veux supprimer cela et le garder par défaut. Nous avons une erreur dans le terminal, donc cela doit être BoardID, tout comme nous avons inséré des données dans notre fonction. Ensuite, enfin, nous devons appeler la méthode .get pour finalement obtenir ces données. Le reste devrait être assez simple comme c'est similaire à ce que nous avons déjà utilisé. Juste après la méthode Get, nous allons appeler notre objet liste, appelé méthode .foreach, afin que nous puissions passer à travers chaque élément à l'intérieur ici. Nous allons ensuite stocker chaque élément dans la variable de liste, puis cela exécute une fonction pour chacun. Tout d'abord, prenons nos données, avec des données const et je vais définir est égal à lister la méthode de données que nous avons examiné dans la dernière vidéo, puis sélectionnez l'objet List. Juste après ici, nous allons construire notre liste réelle que nous pouvons ensuite pousser à l'état. Rappelez-vous quand nous avons fait cela aux cartes de dans le App.js, nous avons stocké les données dans une variable, nous avons ensuite créé un objet de carte où nous avions les données. Nous devions également fusionner dans l'ID, qui n'était pas disponible à partir de cette méthode de données. Nous faisons la même chose dans le tableau, nous pouvons créer nos objets de liste. Cela va être égal à notre ID, que vous pouvez récupérer à partir de list.id. Ensuite, nous utilisons l'opérateur spread pour fusionner le reste des données. Ci-dessous, nous pouvons ensuite définir les états avec this.setState. L' état que nous voulons ajouter est les CurrentLists. Nous avons cela déjà configuré comme un tableau vide. Mettons ça à l'intérieur ici. Nous cherchons les CurrentLists, ils vont être égaux à un objet où nous répandons dans l'état actuel avec this.State.CurrentLists séparés par une virgule. Nous fusionnons ensuite dans notre objet de liste que nous venons de créer. Maintenant, cette méthode saisit nos CurrentLists et les filtrent à la vue du tableau de colonne. L' étape suivante consiste à appeler effectivement cette méthode lorsque le composant va monter. Faisons cela avec, This.GetLists. Rappelez-vous que GetLists aura également besoin d'un BoardID, que vous pouvez transmettre en tant qu'argument en utilisant this.props.match, pour obtenir cela à partir du navigateur. Nous voulons sélectionner les paramètres, puis aussi le BoardID. Enregistrez ce fichier et dirigez-vous vers le navigateur, puis accédez à nos Projets. Si nous ouvrons la console, nous voyons un avertissement étrange. Il nous dit que la requête nécessite un index, puis nous pouvons suivre ce lien pour créer ceci. Nous pouvons cliquer sur ce lien qu'il fournit et ensuite il va passer à la console Firebase où nous pouvons créer un nouvel index. Nous pouvons voir ici que Firebase va créer un index pour ceux de cette collection de listes. Nous pouvons également voir que les méthodes que nous venons ajouter sont également appliquées à ces champs. Nous attaquons dans la liste des planches dans l'ordre croissant et aussi la propriété CreateDat dans l'ordre croissant aussi. Nous pouvons aller de l'avant et créer notre index en cliquant sur ce bouton. Ceci est nécessaire puisque nous effectuons maintenant une requête plus complexe. Rappelez-vous que nous utilisons la méthode Where pour filtrer les documents par le BoardID et que nous les avons ensuite recherchés par les dates de création. Un index est un moyen de structurer nos données en boucle Firebase pour localiser nos données plus efficacement. conséquent, notre requête est exécutée beaucoup plus rapidement, elle fera en sorte que Firebase comprendra qu'à un moment donné dans le futur, nous formerons une requête plus complexe afin que Firebase puisse être prête pour eux. Cela pourrait prendre un peu de temps pour finir. Mettez la vidéo en pause et revenez quand tout est fait. Bienvenue de retour. Une fois cet index créé, moment est venu de supprimer toutes les listes et cartes que nous avons actuellement dans la base de données. Allons-y et commençons par les listes. Je vais cliquer sur cette icône et supprimer la collection. Tapez également le nom des listes pour confirmer cela, et aussi les cartes que nous pouvons faire de même. [ inaudible] supprimez ceci. Cela est dû au fait qu'ils sont liés aux Boardids à partir des données de l'échantillon. Je n'utilise plus les données d'échantillon, donc nous n'avons pas besoin de cela. Maintenant, si nous revenons à notre application, allons recharger, et ensuite nous pouvons créer de nouvelles listes. Ajoutons la liste 1, liste 2, puis actualisons. Nous voyons maintenant une erreur disant que ne peut pas convertir un objet non identifié ou nul. La raison pour laquelle nous voyons cette erreur qui est liée à this.props.lists.title sur dans les composants de la liste est parce que nous essayons toujours de parcourir les cartes, que nous n'avons pas encore. Rappelez-vous plus tôt lorsque nous avions nos données d'échantillon, nous avons ajouté quelques cartes en tant que tableau à l'intérieur de chaque objet de liste. Nous n'avons plus ces valeurs, donc nous pouvons maintenant supprimer cela du List.js. Tout ce que nous devons faire est de commenter notre boucle, qui est cette section ici, qui rend un composant de carte. Plus au navigateur et maintenant nous pouvons voir les deux listes que nous venons de créer. allons également créer des cartes, carte 1, carte 2 Nous pouvons ajouter cette liste deux aussi bien, donc carte pour la liste deux. Nous ne verrons pas ces cartes tout de suite, parce que nous venons de commenter les composants de la carte, mais si nous passons à Firebase et puis actualisons la console, tout d' abord, nous allons vérifier les listes. Si nous cliquons sur ceux-ci, ceux-ci sont maintenant liés à un tableau particulier. La même chose avec notre deuxième, et si nous allons à nos cartes, nous pouvons également voir qu'elles sont connectées à un ID de liste à la troisième, et c'est un ID différent des deux premiers. Pour terminer cette vidéo, nous pouvons maintenant lire les cartes de la base de données, qui suivront un modèle similaire à nos listes. Plus dans notre liste, nous avons obtenu des composants JS, nous pouvons d'abord appeler la méthode de l'intérieur du composant fait monter. Juste en dessous de notre objet d'état, nous pouvons ajouter ComponentsDidMounts, configurer nos supports et nos accolades. A l'intérieur d'ici, nous pouvons appeler this.fetch cards, qui est la méthode que nous allons créer en un instant, qui va passer dans l'ID de la liste avec ce top props fault.list. Ensuite, nous pouvons configurer notre méthode personnalisée juste en dessous de cela, donc ceci est récupéré cartes va être une fonction de synchronisation, que vous allez prendre dans cet ID de liste qui lui aurait été passé, configurer notre fonction de flèche. Ensuite, j'essaie et un bloc de capture. Passer l'erreur, pas une console.error avec le texte d'erreur, récupérer les cartes. Ajoutez une virgule, puis sortez notre erreur, donc maintenant nous pouvons configurer des choses pour obtenir nos cartes à partir de la base de données, qui correspondra à cet ID de liste qui est transmis. On peut le faire à l'intérieur du bloc try. Nous allons d'abord créer une constante pour stocker nos cartes, où nous allons attendre les données de nos cartes ref. Après des jours, nous pouvons ajouter le train à la fin D enseigné où la méthode. Rappelez-vous que cela prend en trois arguments. Le premier est la valeur à laquelle vous voulez comparer. Ceci est stocké à l'intérieur des cartes. Si nous regardons la console, nous voulons sélectionner l'ID de la liste, alors sélectionnez card.list ID. La deuxième valeur est la comparaison, qui est égale. Nous voulons vérifier si cela est égal à l'ID de la liste. Juste après cela, nous pouvons également enchaîner jusqu'à la fin l'ordre par méthode. Nous voulons commander cette ascend par la propriété card.created up, puis finalement, pour obtenir ces données, nous appelons la méthode .get. Après cela, nous pouvons ensuite sélectionner nos cartes , puis boucle à travers chacune avec .for chacune. Pour chacun va alors stocker chaque valeur dans une variable appelée carte. Cela exécutera une fonction qui va construire nos objets de carte. Tout d'abord, nous pouvons saisir nos données, ce qui est exactement comme nous l'avons fait avec les listes sur les tableaux. On peut attraper nos objets de cartes. Nous pouvons exécuter la méthode de données pour saisir toutes les propriétés de la carte, puis sélectionner les objets de la carte. Ensuite, nous allons ensuite créer nos objets de carte, qui va être celui, ce qui va pousser l'état. Nous devons sélectionner l'ID, qui est disponible à partir de la carte Object.id, séparé par une virgule. Nous pouvons ensuite fusionner les données, comme nous l'avons fait avec les listes sur les tableaux. Testons que cela fonctionne avec un journal de console après notre objet. Nous voulons enregistrer la valeur de nos objets de carte. Enregistrez ceci et puis passez au navigateur dans notre projet, nous pouvons maintenant recharger, et puis nous voyons que cette requête nécessite également un index deux, alors cliquez sur le lien vers la console, et nous pouvons maintenant créer notre index pour les cartes aussi. Créons ceci avec ce bouton. une pause vidéo et donnez-nous quelques instants pour construire notre index, et je vous verrai dans quelques minutes. Avec notre index est maintenant créé, nous pouvons revenir à l'application puis recharger, et maintenant nous allons voir les trois cartes ont été placées dans la console. C' est essayer de créer une nouvelle carte, test. Numéro un, envoyez ça, rechargez le navigateur, et maintenant nous allons avoir notre quatrième carte vient d'être ajoutée avec le texte du test 1. Nous pouvons également voir que cela est lié à cette liste ID. Essayons d'en ajouter un nouveau, donc testez deux rechargement, et puis nous pouvons voir que le test deux a un ID de liste différent au numéro un. La prochaine chose à faire maintenant, nous savons que nous avons les données correctes est de remplacer notre journal de console par un état défini. Cela définit maintenant les états. A l'intérieur, nous allons définir les cartes actuelles, que nous avons déjà dans les états, créer nos objets. Nous pouvons ensuite fusionner dans nos états. Nos cartes actuelles, en passant également dans notre nouvel objet de carte. Avec cela maintenant, revenons sur le navigateur, et puis si nous cherchons à l'intérieur des outils de développement de réaction, nous pouvons rechercher une liste de composants, sélectionner l'un d'entre eux, puis il vers le bas, nous pouvons voir notre état des cartes actuelles. Il y a un rayon avec deux cartes différentes à l'intérieur ici. Vous pouvez chercher notre deuxième. Désinstallez les trois cartes actuelles liées à cette liste, donc la dernière chose à faire dans cette vidéo est d'afficher ces cartes à l'intérieur de chaque liste. Si nous revenons à tous les composants de la liste et nous pouvons compter cette boucle qui exécutera le hors des cartes. Nous pouvons alors changer les invites de style pour être cet état supérieur. Puisque nous stockons maintenant dans les cartes actuelles dans les états. Exactement la même chose avant que nos données. Cela va être this.state, .cartes actuelles, passant également dans la clé, sur le navigateur, et maintenant nous allons voir les listes. Maintenant, les cartes s'affichent dans chacune d'elles. Cela nous laisse maintenant avec chaque carte sur la liste correcte, et ensuite nous allons examiner comment nous pouvons supprimer les données. 25. Suppression des cartes et listes de Firebase: Nous passons maintenant à l'ajout de la fonctionnalité pour supprimer nos éléments de la base de données. Retirer un élément de Firebase est assez simple. Tout ce que nous devons faire est de trouver l'élément dans la base de données, puis appeler une méthode de suppression. C' est ce qu'on peut faire pour les cartes. La première chose que nous devons faire est d'ajouter un simple bouton Supprimer pour chaque carte, que je vais ajouter comme une simple croix aux composants Card.js à l' intérieur de notre div et juste souffler le contexte. Nous pouvons ajouter des éléments de span HTML. Ici, nous pouvons ajouter un gestionnaire d'événements OnClick, qui va déclencher une méthode appelée this.DeleteCard. À l'intérieur des balises de span d'ouverture et de fermeture, nous pouvons ajouter une entité HTML, qui est les temps d'esperluette, puis le point-virgule. Aussi le navigateur. Cela produira une croix, que nous pouvons utiliser pour déclencher cette méthode. Maintenant, nous avons affaire aux cartes stockées dans Firebase. Nous devons importer la référence des cartes. En haut, nous pouvons importer nos cartesRef. Ceci est de la chaîne qui est.. /firebase. Ensuite, nous pouvons créer notre méthode DeleteCard, qui est appelée en cliquant sur cette croix. Juste au-dessus de notre effort aléatoire. Nous pouvons ajouter DeleteCard va être un évier. Nous recevrons les informations de l'événement. Quand il est appelé réglé la fonction de flèche. Je vais essayer la section et aussi le catch passant dans l'erreur. Nous pouvons maintenant mettre une console.error avec la chaîne d'erreur de suppression de la carte. La première étape dans la section try va utiliser ces informations d' événement pour empêcher le comportement par défaut. aurez alors besoin de prendre le CardiD des accessoires. Nous pouvons stocker cela dans une constante appelée CardiD. Désentez cela aussi this.props.data.id. Rappelez-vous que chaque carte reçoit les accessoires appelés données. Nous allons donc entrer dans les outils de développement dans React. Si vous recherchez une carte, cela reçoit toutes les données pour chaque carte à l'intérieur de ces Props de données. Ici, nous y accédons à cet identifiant. Maintenant, nous pouvons l'utiliser pour accéder à une carte particulière à l'intérieur d'une Firebase avec cet identifiant. au-dessous de cette nouvelle constante folle, qui va être pour notre carte. Ici, nous allons attendre le point CardsRef de notre collection. Nous pouvons alors sélectionner un document particulier par l'identifiant. Nous avons déjà ce CardiD stocké juste au-dessus. La dernière étape consiste à appeler la méthode de suppression sur cette carte particulière. Donc card.delete qui est fourni par Firebase. Sauvegardons ceci et passons au navigateur. Cliquez sur « Testez un ». Nous avons encore besoin d'actualiser car nous n'avons pas encore de fonctionnalités en temps réel. Mais nous voyons maintenant que le test 1 a été supprimé. Si nous passons à la console et puis rechargeons ceci, nous pouvons vérifier chacune de nos cartes pour en tester une. Cela est maintenant supprimé de notre base de données également. Ensuite, nous devons également supprimer les listes. C' est un peu plus complexe car nous devons également trouver et supprimer chaque carte, qui est également associée à cette liste. Faisons-le dans le composant de liste, qui est list.js. Encore une fois, cela a également besoin d'un bouton ou à travers pour supprimer la liste. Nous allons le faire juste après avoir sorti le titre de la liste. Cette ligne de code juste ici à la plage. Le contenu sera l'entité HTML des temps d'esperluette et le point-virgule. Cela aura également besoin d'un gestionnaire d'événements OnClick, qui va être this.deleteList boucle en haut. Nous pouvons également importer nos ListSRef à partir de Firebase. Puis créé cette méthode DeleteList. Cela va être asynchrone, puis passer dans une fonction flèche, une section try. Nous pouvons attraper des erreurs lors d'une erreur de console avec le texte de la liste de suppression d'erreur. Les premières étapes dans le bloc try vont être d'attraper le ListID. Nous pouvons stocker cela dans une constante appelée ListID. Cet ID ListID est disponible sur les accessoires. Donc, ce .props le nom des accessoires est liste. Ensuite, nous pouvons saisir l'identifiant. Blow est une seconde constante pour nos cartes où nous allons attendre nos cartesRef. Pour cela, nous ne voulons pas simplement appeler .getmethod. Puisque cela va saisir toutes nos cartes dans la base de données. Nous voulons seulement supprimer les cartes particulières qui est associé à cette liste, qui va supprimer dans. Notons ceci bas. Nous pouvons enchaîner sur la fin, les points où la méthode. Rappelez-vous que cela prend en trois arguments. Le premier va être la carte.ListID. Le second sera la comparaison. Voudrais-je vérifier si chaque propriété d'identifiant de liste sur chaque carte va être égale à ce listID des accessoires. Donc, à la virgule, ajoutez dans le ListID. Ensuite, nous pouvons enfin enchaîner sur la méthode get pour tirer ces cartes. Prochaine étape, ce que vous voulez faire avec ces cartes, une fois que nous les aurons récupérées. Eh bien, pour chaque carte, que nous récupérons, nous voulons appeler la méthode de suppression. Mais juste avant de le faire, nous allons ajouter un rapide if déclarations, qui va d'abord vérifier si des cartes sont revenues. Si cards.docs.length n'est pas égal n'est pas égal à 0. Nous ajoutons ensuite les accolades de la carte. Cela consiste essentiellement à vérifier si la longueur des documents qui ont été retournés est supérieure à zéro. Cela signifie que nous avons quelques correspondances pour notre identifiant de liste. Nous pouvons ensuite parcourir toutes les cartes.foreach. Ensuite, pour chaque carte, nous allons appeler .deletemethod. Nous pouvons le faire avec card.ref.delete. Ceux-ci devraient prendre soin de supprimer toutes les cartes qui sont liées à cette liste. L' étape suivante consiste à supprimer réellement la liste. Juste chaque section de carte va être un peu plus simple. Tout ce que nous devons faire est de créer une constante que vous allez récupérer notre liste à partir du ListRef. Le document que vous voulez saisir est celui qui est égal à ce ListID. Passons ça. Nous pouvons ensuite utiliser cette liste et appeler la méthode FireBase.Delete, qui va déplacer la liste aussi. Maintenant, nous pouvons enregistrer cela et nous pouvons tester cela dans le navigateur, sur Chrome et dans le projet. Allons à la liste 1. Cela devrait supprimer Card1, Card2 et tester deux. Cliquez dessus. Nous ne voyons aucune erreur dans la console, donc c'est bon. Rafraîchissons. Maintenant, cela a été supprimé. Vers la console. Vérifions d'abord nos listes. Nous avons maintenant juste la liste 2 à l'intérieur ici. La liste est en cours de suppression. On peut vérifier les cartes. Maintenant, nous allons juste avoir cette carte unique, qui est de cette liste ici. Tout cela est maintenant travailler dans. Nous pouvons cliquer sur une liste pour supprimer. Il supprimera également toutes les cartes qui ont été liées à l'identifiant. Ensuite, nous allons revenir à la suppression des éléments en supprimant également les cartes de notre application et aussi de Firebase. 26. Suppression des planches: La suppression de la carte est un peu plus impliquée que la dernière vidéo. sentons pas que nous n'avons pas encore regardé. C' est parce que nous devons trouver le conseil lui-même. Ensuite, toutes les listes associées et les cartes qui appartiennent au tableau. Avant la suppression de ces trois collections. Si nous allons à la vue du tableau, nous avons déjà un bouton Supprimer le tableau en haut. Toutes les méthodes liées à la carte et aussi l'état de la balle sont ensuite conservés dans le app.js. Quelqu' un a ajouté une méthode Delete Board à l'intérieur ici aussi. Qui va ensuite passer vers le bas comme accessoires pour les composants de la balle. sorte qu'il peut être déclenché lorsque le bouton est cliqué. La première étape consiste à créer la méthode Delete Board, qui lui transmettra l'ID du tableau. Allons en bas juste au-dessus de la méthode aléatoire. Nous pouvons créer notre tableau de suppression. Ce sera asynchrone. Nous allons passer l'ID de la carte quand nous appelons ceci et ensuite configurer notre fonction flèche. Tout d'abord, nous pouvons créer les sections try and catch. Passer l'erreur comme toujours. Ensuite, nous pourrions faire une console.error avec le texte d'erreur en supprimant le conseil, un deux-points, puis passer l'erreur. Puisque nous appelons cette méthode à partir du bouton dans les composants de la carte, nous devons la transmettre comme accessoires. Faites défiler jusqu'à notre routeur. Nous devons trouver les composants de la carte. Ce qui est juste ici, juste après le problème du routeur, nous pouvons passer dans le tableau de suppression, qui va être égal à notre méthode du tableau de suppression des magasins. Si nous passons au board.js, avant d'oublier, ajoutons la validation appropriée. Nous devons importer cela car nous ne l'avons pas encore utilisé, importer les types d'accessoires. Ensuite, en bas, nous pouvons créer nos types de prop juste au-dessus où nous exportons ce fichier, si gras B, types de prop, configuration au-dessus des objets. Le seul accessoire que nous obtenons à la minute, sera le tableau de suppression. Le tableau Delete est le type d'accessoire de fonction, donc nous utilisons .func. Cela va également être nécessaire. A l'intérieur de la méthode aléatoire, nous avons déjà un bouton à ajouter sur le clic « Écouteur à ». Défilons vers le haut et jetons un coup d'oeil pour notre bouton et qui est celui-ci juste ici. Nous pouvons ensuite ajouter sur clic à l'intérieur ici. Cela va déclencher une méthode, alors créons this.Delete Board. Ce tableau totalement n'est pas la méthode qui va passer parce que nous avons un accès à ce via des accessoires. Maintenant, nous pouvons aller de l'avant et créer Delete Board juste au-dessus de la méthode aléatoire. La méthode de suppression du tableau, que nous allons ajouter maintenant, va être responsable de la saisie de l'ID de ce tableau actuel. Ensuite, appelez dans besoin la méthode Delete Board qui est passée comme accessoires, alors ajoutons ce Delete Board. C' est un asynchrone. Ensuite, à l'intérieur ici la première chose à faire est de saisir l'ID de carte actuel et d'installer ceci à l'intérieur d'une constante. ID de carte va être disponible à partir des accessoires. Ce top props.match.params.Boardid. Rappelez-vous, match.params, est les accessoires du routeur, et les paramètres vont être cet ID de carte, que vous pouvez récupérer à partir d'ici. Nous stockons cela dans une variable, donc nous pouvons maintenant passer cela lorsque nous appelons notre méthode Delete Board, que nous venons de créer dans app.js. Ce top accessoires, totalement carte, comme dans l'ID du conseil. Avant d'aller plus loin, testons, tout fonctionne. Dans le fichier app.js, nous n'avons aucun contenu à l'intérieur de cette section try. Faisons une alerte simple avec le nom de variable de l'ID de carte, qui est juste en train de passer. Sauvegardez ceci sur nos projets. Essayons de supprimer le tableau. Super. Maintenant, nous obtenons l'alerte avec le même ID de carte qui est dans l'URL, lorsque toute la méthode est maintenant appelée. Nous pouvons maintenant utiliser l'ID pour saisir toutes les cartes de Firebase, mettre à jour l'état, puis supprimer la carte. Première étape, nous allons déplacer l'alerte, et ensuite nous pouvons sauver le tableau actuel à une constante. Nous pouvons le faire en attendant nos conseils Ref. Prenez le document, et le document que vous voulez récupérer est par l'ID. L' ID est stocké à l'intérieur de la variable ID de carte. L' étape suivante consiste à mettre à jour l'état avec cet état .set. À l'intérieur ici, vous pouvez passer dans notre objet d'état où nous allons mettre à jour les conseils à l'intérieur de l'état, va configurer cela comme un tableau. La première chose est d'utiliser l'opérateur de propagation pour saisir l'état actuel de cette carte d'état. Cela prendra une copie de tous les conseils actuellement dans les États, mais si nous voulons supprimer un conseil particulier, comment pouvons-nous le faire ? Eh bien, nous pouvons utiliser une méthode de filtre JavaScript, qui filtrera n'importe quel conseil particulier des États. À l'intérieur, nous allons stocker chaque carte à l'intérieur de cette variable, puis exécuter une fonction pour chacune d'elles. Cette fonction va être responsable de ne renvoyer que les tableaux d'états qui ne correspondent pas à cet ID de carte. Ajoutons notre déclaration de retour. Nous voulons retourner tous les tableaux où l'ID n'est pas égal à cet ID de carte, que nous venons de supprimer. Étape numéro trois, juste en dehors de cette section de coupe, nous allons appeler board.Delete pour supprimer cela de Firebase. Nous ne voulons pas tester cela tout de suite, parce que nous voulons aussi supprimer les listes et les cartes pour ce tableau en même temps. Commençons par les listes, donc au-dessus de notre section essayante. Nous pouvons commencer par créer une constante appelée Listes. À l'intérieur, nous allons attendre notre graphique de liste, qui est notre collection de listes. A l'intérieur de cette constante de liste, nous voulons filtrer toutes les listes qui sont liées à cet ID de carte. Nous pouvons le faire avec la méthode web. Il prend trois paramètres. Le premier sera le list.board. Le second est égal à sous forme de chaîne, puis la troisième valeur est l'ID de carte. Cela va filtrer toutes nos listes où la propriété du conseil est égale à la carte qui a été passée, alors nous pouvons trouver la capture tous ces pondérés, la méthode y.get. Puisque nous utilisons maintenant ce brouillon de liste, nous pouvons maintenant aller tout en haut de ce fichier où nous avons ajouté l'importation et aussi à cela, puis revenir à notre méthode. Avec ces données de liste, que nous remontons maintenant, nous devons maintenant faire deux choses. Tout d'abord, nous devons ajouter une instruction if pour vérifier s'il y a des listes enregistrées ce tableau actuel, avant d'aller de l'avant et de les supprimer. Numéro 2, si la liste disponible, nous devons regarder à travers eux, puis supprimer. Juste sous Get, nous pouvons ajouter une déclaration if. Nous pouvons vérifier si les listes, longueur des points docs n'est pas égale à zéro, alors le code à l'intérieur de cette instruction if ne fonctionnera que s'il y a plus d'une liste. Si ces listes, nous pouvons alors laisser pour vous avec le pour chaque méthode. Pour chacun, nous allons stocker chaque élément à l'intérieur de cette variable de liste, configurer une fonction pour chacun d'eux. Maintenant, cela nous laisse dans une position similaire à la dernière vidéo. Nous avons des listes que nous devons supprimer, et nous devons également trouver les cartes pour chaque liste aussi, puis aller de l'avant et les supprimer. Ce qui signifie que nous avons maintenant des fonctionnalités partagées. Si nous passons à la liste app.js, puis jetez un oeil pour la méthode delete list. Nous avons créé cette méthode dans la dernière vidéo pour le faire. Donc, plutôt que de le dupliquer, nous pouvons soulever cela jusqu'au app.js et ensuite l'utilisation de cette fonction. Commençons par découper la méthode complète. Fermera accolade accolade jusqu'à deletelist hébergé app.js. Collons ceci dans et juste au-dessus du presse-papiers. Cette méthode utilise les cartes Firebase href, que vous pouvez voir si nous faisons défiler juste un ici. Nous devons importer cela tout en haut, puis revenir à cette méthode deletelist. Espérons au sommet ici, nous avons une constante appelée ListID. Cette ligne reçoit les données des accessoires, mais nous n'avons pas cette liste correcte disponible maintenant dans ce app.js donc nous supprimons cette ligne. et à la place quand nous appelons, cette méthode passera dans cette listID. Ceci entre parenthèses. Puisque nous avons supprimé cette liste de suppression des composants de la liste, nous devons maintenant la transmettre via des accessoires. Allons à notre conseil. A l'intérieur du routeur. Vous pouvez ensuite l'ajouter en tant qu'accessoire. Ceci est la deletelist et cela va être égal à ceci, dot deletelist. Ensuite, allez au tableau app.js. Nous pouvons les ajouter en tant que type d'accessoire. Dupliquons ceci et c'était deletelist. La liste de liens se trouvait à l'intérieur du composant de liste. Maintenant, nous pouvons transmettre cela comme un accessoire à l'intérieur de ces composants de liste. Juste après une liste, nous pouvons également ajouter notre deletelist prop, qui va être disponible à partir de ce top props, points deletelist. Maintenant, nous avons à nouveau cette fonctionnalité deletelist disponible dans la liste. Cela reçoit maintenant cela comme des accessoires. Nous pouvons l'ajouter dans les temps d'hélice en bas. Voici les listes de suppression. Le type d'hélice est un type de fonction qui est également nécessaire, ajouter un coma entre les deux. À l'intérieur de la méthode aléatoire pour cette liste, nous avons un élément span qui appelle notre méthode delete list. Nous pouvons recréer ceci ci-dessus pour appeler la méthode que vous transmettez comme accessoires. En dehors du rendu, nous pouvons créer notre nouvelle méthode appelée list deletelist, configurer notre fonction, puis à l'intérieur de cette fonction, nous voulons faire deux choses. Tout d'abord, nous voulons attraper le ListID. Parce que rappelez-vous d'avant dans le app.js, Lorsque nous avons déplacé cette méthode deletelist. Refilons vers le haut. Nous passons également cela en tant que ListID. Cet ID ListID est disponible à l'intérieur de ce composant de liste via des accessoires. Ce haut invite dot list id. Ensuite, nous pouvons enfin aller de l'avant et appeler notre méthode deletelist avec ce point invite. Dot deletelist, qui va passer dans le ListID. Enregistrez ce fichier et avant d'aller plus loin, nous pouvons tester cette liste est en cours de suppression et les problèmes veut être lists-ref et le app.js. Ajoutons un s à l'intérieur ici et aussi 63 et 67. C' est à la fin. Ici aussi. Bien. Il fonctionne maintenant. Essayons de supprimer une liste. Ajoutons une liste ici. Actualiser, cliquez sur Suivant. Maintenant, si nous rechargeons ceci, cela a maintenant été supprimé. Essayons également l'un d'entre eux dans différents composants. Ce nouveau clic sur Suivant. Maintenant, nous pouvons également supprimer cela aussi. Maintenant, c'était un peu de travail supplémentaire pour obtenir cela dans différents composants. Mais cela signifie que nous pouvons maintenant revenir à notre app.js où nous avons commencé à l'origine et ensuite nous pouvons utiliser cette méthode deletelist pour chaque liste que nous avons. Maintenant, nous sommes en boucle à travers chacune des listes ou quand il est maintenant faire est d'appeler cette méthode deletelist, que nous avons maintenant disponible dans ce composant. Ce point deletelist. Deletelist doit également être passé dans un id et firebase stockage ceci à l'intérieur d'un objet appelé ref. Nous pouvons y accéder avec list dot ref, dot id. Maintenant, nous avons juste besoin de faire un test et en fait, cela répond à être notre constante de liste plutôt que notre liste ref. Ça nous donne une économie. Maintenant, si nous allons dans une de ces planches, passons à notre test 2. A l'intérieur d'un ici, nous avons une liste de un, deux et trois et aussi la cause de a, b, et c. Maintenant, si nous essayons de supprimer notre tableau, nous allons rafraîchir. Je vais maintenant voir toutes les données ont été supprimées. On peut vérifier ça dans la console Firebase. Nous allons vérifier notre liste sur nos cartes ont été supprimées aussi. Commençons par nos listes. Nous avons seulement la liste unique ici plutôt que les numéros 1, 2 et 3 dans nos cartes. Vous avez toujours la carte unique 2 et nous ne voyons pas a, b, et c. C'est maintenant toutes les méthodes de suppression dont nous avons besoin pour ce projet et dans la section suivante, nous allons examiner comment nous pouvons mettre à jour nos données à l'intérieur d'une base de feu. 27. Mise à jour des données dans Firebase: Dans cette section, nous allons nous concentrer sur la mise à jour de nos tableaux, listes et cartes. Ceci est important car un utilisateur peut vouloir obéir à des choses telles qu'un titre de plateau ou une étiquette sur une carte. Ces étiquettes sont quelque chose que nous allons entrer dans Zoom. Dans cette vidéo, nous allons rendre le tableau et répertorier les titres tous deux modifiables après avoir cliqué dessus. Ensuite, nous pouvons apporter des modifications et les pousser à Firebase. Laissons recommencer dans le board.js alors nous pouvons travailler avec notre titre de conseil. Ici, nous allons remplacer le titre du tableau actuel élément d'entrée HTML afin que l'utilisateur puisse ensuite taper dedans. Commençons par supprimer notre titre de niveau trois afin de supprimer, ou de commenter cette ligne à la fois. Ensuite, à l'intérieur ici, nous pouvons créer une entrée HTML. Ensuite, sur la ligne suivante, je vais ajouter le type qui va être égal au texte. En outre, un nom, qui va être le titre du conseil lors du changement, ce qui déclenchera une méthode qui va être appelée tableau de mise à jour. Le dernier attribut sera la valeur par défaut et la valeur par défaut sera égale à this.State.CurrentBoard.Title. Cela va saisir le titre comme il l'a fait plus haut dans notre titre de niveau 3. En utilisant la valeur par défaut plutôt que simplement l'attribut value, nous allons spécifier la valeur initiale. Nous allons ensuite laisser les mises à jour suivantes sur contrôlé afin que nous puissions donc modifier ce champ. Je vais enregistrer ce fichier, puis passer au navigateur, dans nos projets. Nous devons revenir en arrière, sélectionner le tableau. Nous pouvons maintenant cliquer sur son titre et le modifier. Bien sûr, cela ne sera pas enregistré dans Firebase pour le moment parce que nous n'avons pas créé cette méthode de tableau de mise à jour que nous appelons un intérieur ici. Faisons cela en dehors de la méthode de rendu. Nous pouvons créer un tableau de mise à jour, en passant les informations d'événement, puis définit sur la fonction. Cette mise à jour réelle de la carte ouvrira le app.js ainsi que toutes les enchères à la mer. Commençons une bigamie dans la carte d'identité et stockons-la à l'intérieur d'une constante. L' ID de la carte est disponible à partir de this.props.match.params.boardId. Ceci est un ID de carte qui est disponible à partir des paramètres d'URL. Nous le stockons à l'intérieur de cette variable. Nous allons maintenant créer une nouvelle constante qui va être appelée nouveau titre. Cela va stocker la valeur que l'utilisateur a saisie. Nous pouvons saisir ceci à partir de e.CurrentTarget.Value. Ensuite, les notes ouvertes et si les déclarations où nous pouvons vérifier si l'ID du conseil est présent et nous voulons également vérifier s'il y a un nouveau titre. Si les deux sont présents, nous voulons appeler une méthode appelée tableau de mise à jour, que nous allons créer un app.js en un instant. Cela passera comme accessoires afin que nous puissions accéder avec this.props.UpdateBoard. Ensuite, nous allons envoyer à cette méthode, l'ID du tableau et aussi le nouveau texte qui est enregistré dans le nouveau titre. Allons maintenant au app.js et nous pouvons créer cette méthode de carte de mise à jour, qui va être responsable de l'enregistrement dans Firebase. Donc, en dehors du rendu, carte de mise à jour est asynchrone. Nous dirons encore une fois l'ID du conseil et aussi le nouveau titre. On peut se contenter d'essayer la section puis la prise juste après. En passant l'erreur où nous pouvons faire une erreur de console avec le texte d'erreur mise à jour conseil, en passant également l'erreur. Bien. Maintenant, la première chose à faire est de prendre la planche de Firebase en utilisant cette carte d'identité. Installez les semi constantes appelées board. Nous avons nos planches ref, qui pointe vers notre collection. Nous voulons cibler un document spécifique et ce document sera égal à l'ID du tableau. La prochaine chose que nous pouvons faire est d'appeler une méthode Firebase appelée mise à jour. Puis à l'intérieur, nous allons passer dans un objet. Le champ que nous voulons mettre à jour est un titre et celui-ci est disponible avec board.title. Je vais mettre ceci sur le nouveau titre qui est transmis. Maintenant, nous avons créé ceci. Nous devons également transmettre cela aux composants de la carte. Puisque nous appelons niche à partir du board.js, passons cela comme accessoires. Il s'agit d'une carte de mise à jour afin qu'ils mettent toujours à jour la carte vers le boards.js. Vous pouvez également ajouter ceci à des types d'accessoires vers le bas tout en bas. Ceci est le tableau de mise à jour. Les types de prop, c'est aussi une fonction qui est également nécessaire pour enregistrer ce fichier maintenant sur le navigateur. Rétrécissons ça. Je ne veux pas mettre cela côte à côte avec la console Firebase afin que nous puissions voir cette mise à jour en temps réel. Sur la console, sélectionnons notre planche à faire qui est celle-ci juste ici. Cliquez sur notre titre. Essayons d'ajouter des textes différents ici. Je vais voir ces mises à jour immédiatement. On peut supprimer ça. Essayons de rafraîchir. Si nous rechargeons maintenant le navigateur, nous voyons que ces données persisteront après un rechargement. Changer le titre de la liste est également très similaire à, sinon même plus simple puisque je vais ajouter tout le code dans le composant de liste donc il n'y a pas besoin de le transmettre vers le bas. Si nous passons au list.js, nous pouvons remplacer nos éléments p par une entrée. Faites défiler jusqu'au rendu. Plutôt que nos éléments p, nous pouvons supprimer ceci et les entrées HTML. Le type sera égal au texte. Nous allons également ajouter un nom qui va être le titre de la liste. En changeant cela déclenchera une nouvelle méthode qui va être mise à jour liste puis enfin la valeur par défaut. Cette valeur par défaut va être égale à this.props.list.title donc nous allons saisir ceci d' en haut puis nous pouvons construire la liste de mise à jour en dehors de la méthode de rendu. Il s'agira d'une prise de synchronisation dans les informations de l'événement. Tout d'abord, comme toujours, nous ajoutons notre section try et je vais attraper toute gestion des erreurs. L' erreur de console va être une chaîne de liste de mise à jour d'erreur passant également l'erreur juste après. La liste de mise à jour a également besoin d'accéder à cette liste Id afin de recadrer cette constante juste au-dessus. Nous pouvons ensuite ajouter ceci dans. Une seconde constante de nouveau titre qui va stocker dans la valeur, que l'utilisateur a saisie. Nous pouvons saisir ceci à partir de e.CurrentTarget puis saisir la valeur que l'utilisateur a saisie. Ensuite, nous saisissons notre liste de Firebase et la stockons dans une liste appelée constante. Attendons les listes réf. Nous pouvons saisir un document par l'ID, et l'ID est stocké juste à la fois dans la liste Id. La dernière étape consiste à appeler la méthode update avec list.update. Ici en tant qu'objet, nous allons mettre à jour le champ de titre que nous pouvons récupérer de list.title et définir ceci à notre nouveau titre. Donnons un coup d'envoi à ça. Nous devons aller au navigateur et trouver un tableau qui a une liste. Revenons à la liste deux, nous allons cliquer dessus et le changer pour être liste 200. Nous pouvons également vérifier côte à côte. Liste 200 villes américaines a été mise à jour ici. Si nous actualisons, cela reste maintenant persistant dans le navigateur ce qui signifie qu'il est maintenant stocké dans une Firebase et nous récupérons maintenant ceci dans nos composants de liste. C' est suffisant pour mettre à jour le tableau et la liste. La mise à jour de la carte, nous en aurons un peu plus. Nous commencerons cela dans la prochaine vidéo en créant un modal pop-up pour apporter nos modifications. 28. Modifier le modal de carte: Sur la version finale du projet que j'ai ouvert ici, si nous cliquons sur l'une de ces cartes, cela nous amène à un modal approprié. Ce modal nous permettra d'éditer le texte sur les fiches, mais aussi d'ajouter et de supprimer des étiquettes. Les étiquettes sont quelque chose que Trello utilise comme système de marquage. Par exemple, si vous voulez voir visiblement toutes nos cartes que nous avons remplies, nous pouvons ajouter une étiquette verte pour montrer cela. Ce modal va être un nouveau composant pour gérer tout cela, et c'est ce que nous allons aller de l'avant et créer maintenant. Le style du modal a déjà été fourni dans les styles CSS, que vous auriez dû télécharger plus tôt. Juste ajouté un positionnement et un style de base afin que nous puissions nous concentrer sur le HTML et JavaScript à l'intérieur de notre composant. Commençons par créer cela dans le dossier des composants. Créons un nouveau fichier appelé extension EditCardModal.js. Ce composant traite des accessoires, mais pour l'instant, je vais juste créer le balisage de base, puis nous reviendrons et éditerons ceci bientôt. Commençons par importer React. Ensuite, nous pouvons créer notre composant de base de classe qui va être appelé EditCardModal. Comme toujours, cela va étendre React.Component. Ici, nous pouvons définir notre état initial, donc c'est un objet bulle, puis le premier morceau d'états que je vais ajouter est pour les étiquettes disponibles. Ce sera un tableau qui va contenir six valeurs différentes, pour les couleurs qui sont disponibles à sélectionner. Le premier est une valeur hexadécimale de 80ccff séparée par une virgule, je vais ensuite copier et coller ceci dans cinq fois de plus, pour nous donner six valeurs différentes. Ce second, ça va avoir la valeur de 80ffaa. Le troisième, ça va être f94a1e. Le troisième sera ffb3ff. Le numéro cinq va être bf00ff. Le dernier est ffad33, séparé par une virgule. Nous pouvons également ajouter un tableau vide, qui est pour les SelectedLabels. SelectedLabels contiendra chacune de ces valeurs une fois qu'un utilisateur clique dessus. Ci-dessous après nos états, nous pouvons ajouter la méthode de rendu à l'intérieur ici, et nous pouvons retourner notre jsx. Tout d'abord, cela va être entouré dans un wrapper, qui va être contenu dans un div. Le nom de la classe sera égal à modal-wrapper. Fermez ça. À l'intérieur, nous pouvons imbriquer dans un deuxième div, qui aura le nom de classe de modal-body. Ce corps modal va avoir une section de formulaire. Jetons un coup d'oeil à la version finie, cliquez sur l'un d'entre eux. Ce modal va avoir un bouton de fermeture en haut à droite, ce qui, lorsque nous cliquerons dessus, nous reviendra à la vue du tableau. Nous allons ajouter un titre, puis nous allons parcourir ces étiquettes disponibles que vous venez de définir l'état, puis les afficher. Après cela, nous aurons une zone d'édition où l'utilisateur peut modifier le texte des fiches, suivi des étiquettes sélectionnées qui était le deuxième élément dans notre état, puis un bouton de soumission pour enregistrer ces modifications. Allons de l'avant et construisons ceci maintenant à l'intérieur de cette div. Tout d'abord à l'intérieur ici, nous pouvons ajouter un formulaire imbriqué à l'intérieur. Nous allons ajouter un div et cela va être un div pour la première section qui est pour les étiquettes disponibles. Le haut de cette section modale avait une croix sur laquelle un utilisateur pouvait cliquer dessus pour fermer le modal. Nous pouvons ajouter cela avec une entité HTML qui est ×. Cela va également avoir un ClassName, pour fournir le CSS de modal-close. Il suffit de fermer la barre latérale pour nous donner plus d'espace, puis juste après cette période, un élément p qui va être pour le texte d'ajouter/supprimer les étiquettes. Cela a également un ClassName, qui est pour label-title. Juste après ce titre, nous allons ensuite parcourir chacun de ces éléments dans le tableau. Puisque c'est maintenant JavaScript pour ouvrir les accolades, nous pouvons accéder aux étiquettes disponibles dans les états avec this.State.AvailableLabels. Nous allons ensuite cartographier chacune de ces six valeurs stockées sur chaque élément à l'intérieur de cette variable d'étiquette. A l'intérieur ici, nous pouvons retourner un élément de span HTML pour chaque étiquette disponible. Fermez ça. La plage va avoir un ClassName, qui va être égal à label. Les parties clés de cet élément span vont être une propriété de style. La propriété style va donner à l'étiquette la couleur d'arrière-plan que nous avons définie dans l'état. bas juste après notre étiquette, nous pouvons définir le style, ouvrir les doubles accolades, et en fait, nous pouvons ajouter cela sur sa propre ligne afin qu'il soit plus lisible. À l'intérieur des accolades, nous pouvons définir l'arrière-plan pour être égal à l'étiquette. Ensuite, pour terminer cette section div avec une ligne horizontale, sorte que les éléments hr juste en dessous de cette div. Nous allons ensuite ajouter une deuxième div, qui va être pour notre deuxième section. La deuxième section si nous cliquons sur l'un de ces éléments, ce sera cette zone d'édition. Nous allons avoir une entité HTML qui va être ce petit crayon, et ensuite nous allons aussi avoir l'entrée où l'utilisateur peut changer le texte de la carte. Ajoutons ceci maintenant. Cette div va avoir un className de zone d'édition. Ensuite, la première chose va être une plage pour notre entité HTML. ClassName qui est édit-icon. L' entité HTML pour le crayon est le ✎. Après la plage, nous pouvons ensuite ajouter l'entrée qui est pour le texte. L' entrée a également un ClassName qui va être égal à textbox-edit. C' est tout ce dont nous avons besoin pour cette section. Après cette zone de texte div, nous allons également créer une troisième section div. Ce sera pour nos étiquettes que l'utilisateur a sélectionnées. Commençons par un élément p qui va avoir le titre des étiquettes, suivi d'un deux-points. Les éléments P ont un ClassName, qui va être égal à label-title. Ensuite, nous allons ajouter du JavaScript qui va parcourir toutes les étiquettes, puis les afficher à l'écran. Pour l'instant, bien que je vais juste ajouter une section TODO, puis nous allons dire afficher les étiquettes, commenter cette section et ensuite nous reviendrons à cela dans une vidéo plus tard. La dernière chose pour ce formulaire est d'ajouter un bouton. Ce bouton va envoyer le formulaire afin qu'il ait besoin du type de soumission, le texte de Enregistrer les modifications. Ensuite, pour ce composant, nous devons exporter par défaut le nom de EditCardModal. Donnons à ce fichier une sauvegarde et ensuite nous pouvons passer au composant card.js, où nous pouvons importer ce nouveau fichier. En haut, ajoutons ceci, qui était le EditCardModal de. /EditCardModal. faisant défiler vers le bas dans notre méthode aléatoire, nous pouvons maintenant sortir cela dans le navigateur. Faisons ça à la toute fin. Cela s'appellera EditCardModal, fermez ceci. Maintenant, parce que nous avons deux éléments côte à côte, nous devons également ajouter cela dans un fragment, donc React.Fragment. Nous pouvons alors prendre la balise de fermeture et l'ajouter à la toute fin. Si tout va bien, nous devrions maintenant voir cela dans le navigateur. Si nous allons à notre projet, et ensuite nous devons ajouter une carte, ajoutons rapidement quelques listes, donc abc, actualisons et ajoutons une carte, 1, 2, puis 3. Nous avons maintenant du contenu sur l'écran, nous avons toutes les étiquettes, nous avons la zone de texte, et aussi la section d'étiquette en bas. Nous avons la croix pour le fermer et aussi le bouton pour enregistrer les changements. Évidemment, rien de tout cela ne fonctionnera pour l'instant, et nous voulons également montrer cela seulement lorsque la carte est cliquée sur. [ inaudible] nous pouvons ajouter une valeur booléenne à notre état local dans le card.js. En haut, nous pouvons ajouter un état donc c'est un objet bulle, puis nous pouvons définir l'état initial de ModalOpen pour être false. Ensuite, en dessous de cela, nous pouvons créer une nouvelle méthode qui basculera entre true et false. Appelons ceci Togglemodal, donc c'est une fonction de bulle, et puis nous pouvons basculer l'état avec this.setState. À l'intérieur de notre objet, l'état que nous voulons basculer est ModalOpen. Nous allons définir ceci à une valeur de this.State.modalOpen. Nous pouvons ensuite ajouter le point d'exclamation juste avant cela, ce qui fera le contraire de ce qui est actuellement défini dans l'état. Chaque fois qu'il est cliqué, il faudra ce qui est actuellement là, puis faire le contraire. Nous voulons que cette méthode Togglemodal soit déclenchée chaque fois que le texte de la carte a été cliqué, afin que nous puissions ajouter un gestionnaire de clic sur le texte ci-dessous. notre méthode aléatoire, l'élément p. Nous pouvons ensuite ajouter un gestionnaire de clic à l'intérieur du crochet d'ouverture, et définir ceci égal à this.toggle.modal. Rappelez-vous à l'intérieur de cette carte est l'endroit où nous allons rendre notre modal. Ce modal doit être conscient de cet état de bascule, afin que nous puissions le transmettre comme un accessoire, donc ModalOpen. Nous allons définir ceci sur this.state.modalOpen, enregistrer ce fichier et ensuite nous pouvons nous diriger vers notre composant modal. Maintenant, cet accessoire peut être utilisé pour définir le type d'affichage à l'aide d'un opérateur JavaScript [inaudible]. Défilons jusqu'à notre wrapper modal qui est cette div juste ici, et puis juste après, nous pouvons définir le style, ajoutons ceci sur une nouvelle ligne. Nous pouvons définir la propriété de style CSS avec les accolades doubles. Nous pouvons définir le type d'affichage de ce modal pour être égal à this.props.modalOpen. Si cette valeur booléenne est vraie, nous allons alors définir ce type d'affichage pour être égal à bloc. Ou si cela est défini sur false, nous définirons le type d'affichage sur none, qui masquera ce composant modal. Maintenant, sauvegardons ceci et puis testons cela dans le navigateur, dans notre projet. Nous voyons immédiatement que nous avons nos cartes et liste, mais nous n'avons pas le composant modal affiché. Essayons de cliquer sur le texte, qui va maintenant déclencher cette méthode et ouvrir le modal. Cependant, si nous cliquons sur ce x dans le coin pour supprimer, cela ne fonctionne pas pour le moment. Pour cela, nous devons également transmettre cette méthode Togglemodal, alors revenons au card.js. Nous avons ce Togglemodal, qui est juste là. Nous pouvons également transmettre cela à notre EditCardModal en tant qu'accessoire. Sur une nouvelle ligne, nous pouvons ajouter Togglemodal qui sera égal à notre méthode. Retour aux composants modaux, nous pouvons maintenant déclencher cette méthode lorsque le x a été cliqué. C' est la plage qui a le x. nous pouvons ajouter un gestionnaire de clics comme nous l'avons fait auparavant, qui va exécuter cette prop, ainsi de suite sur clic. Nous pouvons définir ceci sur This.props.togglemodal. Retour au navigateur, nous pouvons maintenant donner un coup de pouce. Cliquez sur le modal qui devrait apparaître cela. Ensuite, cliquez sur le x dans le coin qui exécute maintenant la méthode Togglemodal, puis définit l'état à l'opposé qui est faux. Cela a maintenant pris un peu de dactylographie pour que ce modal fonctionne. Tout ce que nous devons faire maintenant est de le connecter à certaines méthodes pour éditer la carte, et ce sera notre tâche dans la prochaine vidéo. 29. Mise à jour du texte de carte: À l'intérieur de notre projet, si nous allons sur les outils de développement React et puis rechercher les composants de la carte. Si nous sélectionnons l'une de ces cartes, nous pouvons voir sur le côté droit nous avons cet accessoire de données, qui est disponible pour chacune. Il contient toutes les informations sur la carte actuelle, telles que la date créée, l'ID et toutes les étiquettes stockées dans Firebase. Puisque le modal va être responsable de la modification ou de la mise à jour de toutes ces données, nous devons transmettre ces données aux composants modaux. Faisons cela en sortant d'abord dans le card.js. Ensuite, à l'intérieur de la carte d'édition modale, nous pouvons ensuite ajouter un troisième accessoire à cela, qui va être appelé les données de la carte. Ensuite, nous pouvons transmettre ces données en tant qu'accessoires. Ceci. props.data, puis nous passons à la carte d'édition modale. Rappelez-vous lorsque nous avons créé ce composant sera dans les états, nous avons également créé un tableau d'étiquettes sélectionné, que nous avons défini pour être vide. Maintenant, nous avons les données disponibles à partir de Firebase, qui inclut toutes les étiquettes qui ont déjà été sélectionnées. Nous pouvons maintenant mettre à jour ce tableau pour inclure toutes les cartes que vous avez actuellement enregistrées. Nous pouvons l'utiliser dès que le composant se monte. Nous avons le composant monté et puis à l'intérieur ici, nous allons simplement définir l'état avec ceci. définir l'état. Notre objet va mettre à jour les étiquettes sélectionnées avec la valeur de nos accessoires, qui est stocké dans les données de carte et les données de carte veulent est le champ d'étiquettes. Maintenant, sauvegardons cela et ouvrons le modal et voyons ce que nous devons faire. Allez dans le projet, cliquez sur le texte. La première chose à faire est d'ajouter le texte de la carte à l'intérieur de cette zone de texte. L' utilisateur peut le modifier s'il le souhaite. La deuxième chose à faire est de parcourir les étiquettes sélectionnées, puis de les afficher juste en dessous. Commençons par ajouter le titre de la carte dans la zone de texte. Retour ouvert à VS Code, nous pouvons descendre à l'effort aléatoire et jeter un coup d'oeil pour l'entrée, qui est juste ici car nos données sont en ligne. Nous devons ajouter la valeur par défaut qui va afficher la valeur du texte. On peut régler ça à partir des accessoires. Donc ça. données de carte Props. texte. La deuxième chose à faire était de parcourir toutes les étiquettes disponibles dans l'état, puis de les afficher sous ce titre d'étiquettes. Nous avons déjà un commentaire de titulaire de lieu où nous voulons que cela apparaisse. Mais maintenant, je veux remplacer cela en mappant à travers nos étiquettes sélectionnées. À l'intérieur des accolades, nous pouvons sélectionner nos états, les étiquettes sélectionnées. Je vais utiliser la méthode map pour parcourir chacune d'elles, stocker chaque valeur à l'intérieur d'une étiquette. Nous pouvons alors configurer notre fonction pour chacun d'eux. À l'intérieur, tout ce que nous allons faire est de retourner un élément de span HTML. Cet élément span va avoir une couleur d'arrière-plan, qui est la même que la couleur de l'étiquette. À l'intérieur de la balise d'ouverture, nous pouvons créer un nom de classe d'étiquette. Mais aussi, nous voulons définir la valeur de style avec un double accolades. Définissez la propriété d'arrière-plan CSS pour qu'elle soit égale à l'étiquette. Cette couleur de fond de l'étiquette va être égale à la valeur hexadécimale que nous avons à l'intérieur de l'état. Ces étiquettes sélectionnées contiendront l'une de ces valeurs hexagonales. Ensuite, en faisant défiler vers le bas, nous pouvons définir ceux-ci pour être la couleur d'arrière-plan de notre plage. Puisque nous sommes en boucle, nous devons également ajouter une clé unique à chacun de ces éléments de span. Juste après l'arrière-plan, nous pouvons également ajouter à la clé, qui sera égale à notre étiquette. Cela va être très bien à utiliser puisque chacune des six couleurs est unique, ce qui signifie que nous n'aurons pas de doublons. Alors enregistrez ceci, puis sur le navigateur. Allons maintenant dans l'un de ces modaux en cliquant sur le texte. Nous voyons le texte à l'intérieur ici avec une valeur de un. Essayons numéro trois. Nous n'avons toujours pas d'étiquettes disponibles pour ces cartes à afficher, mais nous voyons que la valeur de trois est maintenant dans une entrée de texte. Pour nous permettre d'éditer cette carte, nous pouvons ajouter une nouvelle méthode sur le formulaire lorsque nous soumettons. Revenons à notre modal, puis faites défiler jusqu'au formulaire. A l'intérieur de la balise d'ouverture, nous pouvons ajouter un on submit, qui sera égal à cette carte .update. Juste avant d'aller de l'avant et de créer cette méthode de carte de mise à jour, je vais ajouter un ref à l'entrée de texte pour d'abord saisir la valeur. Faites défiler jusqu'à l'entrée avec la classe de modifications de manuels scolaires, qui est juste ici, juste après la valeur par défaut. Nous pouvons également ajouter une référence avec cela. entrées de texte. Maintenant, ci-dessus, nous devons créer cette référence et aussi la méthode de la carte de mise à jour. Juste en dessous du composant a été monté. Nous pouvons créer notre ref, qui était des entrées de texte et qui est égal à react.create ref. Après cela, nous devons créer notre méthode de carte de mise à jour. Pour le moment, cette méthode va se concentrer sur la mise à jour du texte. Nous reviendrons sur les étiquettes très bientôt. Commençons par faire cette fonction asynchrone, qui prend dans les informations d'événement telles que la fonction flèche où nous ajoutons la section d'essai, la section de coupe juste en dessous, que nous allons passer dans l'erreur puis une erreur de console qui détecte toutes les erreurs de mise à jour de la carte. Ajoutez un deux-points, puis transmettez l'erreur. À l'intérieur de notre section d'essai, nous allons d'abord appeler prévenir les événements par défaut. Pour arrêter le comportement par défaut du rechargement du navigateur dans. Ouvrez ensuite, créons trois constantes. Nous devons saisir l'ID de la carte, nous devons saisir le nouveau texte qui a été ajouté dans le champ de saisie et ensuite nous devons prendre la carte actuelle de Firebase. Commençons par l'ID de la carte, qui aura disponible à l'intérieur des accessoires. Carte data.id. La suivante est pour le nouveau texte que vous avez stocké à l'intérieur de cette référence. Donc const nouveau texte. Cela va être égal à notre valeur ref de this.text entrées. Nous pouvons saisir la valeur avec les courants de point valeur de point. Si la constante dont nous avons besoin est pour la carte actuelle de Firebase, nous allons attendre ses informations pour revenir, qui est de nos cartes ref.doc et ensuite nous pouvons passer notre ID de carte. Maintenant, nous avons la carte de Firebase, nous pouvons appeler la méthode de mise à jour. À l'intérieur, nous avons mis en place nos objets. Pour l'instant, le seul champ que nous allons mettre à jour est le texte. Je vais prendre cela de card.text, disant est égal à nos nouveaux textes constants. Juste après nos mises à jour, nous pouvons ensuite fermer notre modal en appelant la méthode modale à bascule, qui est disponible à partir des accessoires. Donc, ce .props.toggle modal. Dès que la carte est mise à jour et que le formulaire est soumis, nous fermerons ensuite le modal et revenons à la vue du tableau. Juste avant de continuer, assurez-vous que la référence des cartes est importée en haut de ce fichier et assurez-vous également qu'il s'agit d'ID. Donnons ceci un Save et passons au projet. Sélectionnez l'une de ces cartes. Prenez le modal et modifiez la valeur à l'intérieur des entrées de texte. Il enregistre maintenant les modifications et active maintenant le modal à fermer. Si nous passons à la console, rechargez-le dans la collection de cartes. Maintenant, nous pouvons vérifier que notre carte numéro un a été changée à 100. À l'intérieur de notre projet, nous devons toujours actualiser pour voir les changements jusqu'à ce que nous ajoutions notre fonctionnalité en temps réel plus tard. Tout cela va maintenant en raison de mettre à jour le contexte. Dans la prochaine vidéo, nous nous concentrerons sur la mise à jour des étiquettes. 30. Régler les étiquettes: Les mises à jour des étiquettes à l'intérieur de nos composants de carte impliqueront un peu plus de travail que dans la dernière vidéo où nous avons mis à jour le texte. C' est parce que nous allons activer et désactiver les étiquettes. Lorsque vous cliquez sur une étiquette, nous devons d'abord vérifier si l'étiquette doit être ajoutée ou supprimée. Pour ce faire, je vais ajouter un gestionnaire de clics en ligne à l'intérieur de notre modèle. Lorsque le modèle de carte d'édition, dans cette section, nous avons créé dans la dernière vidéo où nous passons à travers toutes les étiquettes disponibles. Nous pouvons également ajouter un gestionnaire d'événements sur clic. Cela va être une fonction de flèche en ligne, qui va appeler une méthode appelée cet ensemble de points Lebel. En passant également la valeur de l'étiquette actuelle. Dès que l'utilisateur clique sur l'une de ces étiquettes, il ne va pas déclencher cette méthode d'étiquette d'ensemble, que nous pouvons maintenant créer en dehors de notre méthode aléatoire. Donc, définissez Label, qui prend l'étiquette qui lui est transmise, configure notre fonction flèche. La première étape à l'intérieur est de créer une constante qui va être appelée étiquettes. Cela va stocker en tant que tableau toutes les étiquettes actuellement sélectionnées, qui sont stockées dans les états. Nous allons les étaler avec cet état point, point des étiquettes sélectionnées. L' étape suivante consiste à vérifier si cette étiquette transmise est actuellement stockée à l'intérieur de ce tableau. Faisons cela en créant une instruction if -. Nous pouvons vérifier si les étiquettes, les points incluent, qui est une méthode JavaScript prise dans l'étiquette actuelle, ouvrent le code erace. Si cette étiquette transmise est stockée à l'intérieur de notre tableau d'étiquettes avec M12, appelez la méthode de filtre pour le supprimer. Nous pouvons stocker cela à l'intérieur d'un nouveau tableau appelé de nouvelles étiquettes. Nous pouvons saisir notre tableau actuel appelé labels, appelé la méthode de filtre JavaScript. Ensuite, nous pouvons stocker chaque valeur à l'intérieur ici dans une variable appelée éléments. C' est à propos de la fonction, c'est une course pour chacun, qui va retourner tous les éléments qui ne sont pas égaux à notre étiquette. Nous pouvons ensuite mettre à jour notre état avec cet état de jeu de points, où nous allons obtenir les étiquettes sélectionnées pour être égales à notre nouveau tableau. C' est ce qui se passe si l'étiquette est incluse dans le tableau. Si ce n'est pas le cas, nous allons alors ajouter une section L, qui va pousser la nouvelle étiquette dans l'état. On a donc les étiquettes. Nous pouvons ensuite appeler la méthode push JavaScript, qui va pousser la nouvelle étiquette à notre tableau. Nous pouvons ensuite mettre à jour l'état. Une fois de plus, mettre à jour les étiquettes sélectionnées avec la valeur de nos étiquettes, tableau. Donc, juste pour récapituler ce que nous faisons ici, nous avons les étiquettes sélectionnées stockées dans des états qui auraient ensuite pris une copie de et sauvegardé connu de cette constante. Nous vérifions ensuite et si l'étiquette sur laquelle l'utilisateur a cliqué est stockée dans ce tableau. Si c'est le cas, nous allons aller de l'avant et exécuter cette section de code, qui va être responsable du filtrage de l'étiquette actuelle, et installer sur le reste des valeurs dans ce nouveau tableau d'étiquettes. Nous allons enfin pousser ceci à l'état une fois que l'étiquette a été supprimée. Si l'étiquette sur laquelle on clique n'est pas stockée dans les états, nous exécutons alors cette section l qui est juste en dessous. Au lieu de cela, cela va pousser notre nouvelle étiquette à notre tableau, puis enregistrer cet état. Maintenant, nous pouvons revenir à notre méthode de carte de mise à jour, qui est juste au-dessus. Nous pouvons mettre à jour ceci pour ajouter nos étiquettes. Juste après le nouveau texte, nous pouvons créer une étiquette d'appel constante et définir cette égale à la valeur stockée dans l'état. Ce point d'état de point sélectionné les étiquettes. Nous pouvons également pousser cela à Firebase dans notre méthode de mise à jour. Nous pouvons également sélectionner les points de carte, les champs d' étiquettes, et définir cela égal à o étiquettes. Alors sauvegardez ceci et passons au modal. Cliquez sur l'un de ces éléments, puis sélectionnez l'étiquette. Nous n'avons pas cette autoroute. Donc, il est ajouté. Si nous cliquons dessus à nouveau, il supprimera alors cela des états en appelant la méthode de filtre. Voyons si l'un d'entre eux est ici dans votre Firebase, nous pouvons cliquer dessus pour enregistrer les modifications. Ensuite, nous chargeons nos cartes. Cette carte 100 est en cours de mise à jour avec nos deux couleurs. Avant d'aller plus loin, cette composante modale reçoit également des accessoires. Donc, nous pouvons ajouter une validation de prop. Ainsi, comme toujours, nous pouvons importer les types de prop à partir de notre module, qui est appelé types de prop. Donc, cette carte modale reçoit trois accessoires différents. Si on regarde dans la carte qui a laissé tomber un oui. Nous avons le modal ouvert, nous avons basculer modal et aussi les données de la carte. Donc, revenez au fond du modal. Nous pouvons mettre en place notre validation de prop. Alors modifiez le modèle de carte. Les types d'accessoires, b minuscules, configurent nos objets. La première sera modale ouverte, ce qui sera égal aux types de prop. Ceci est une valeur booléenne donc nous pouvons sélectionner w, ceci est également requis. Le second est bascule modal. Ce type de prop est une fonction donc nous ajoutons ce func. Ceci est également requis. Une troisième et dernière est nos données de carte. Le type de prop est un objet qui est également nécessaire une fois que nous avons défini les types Prop. La dernière partie de cette vidéo sera d'afficher à l'intérieur de notre application les étiquettes sélectionnées juste au-dessus du contexte. Pour cela, nous devons créer une boucle à l'intérieur du card.js. Rappelez-vous à l'intérieur de ces composants de carte, si nous ouvrons les outils de développement de réaction, si nous recherchons la carte, c'est là que nous stockons toutes nos données actuelles à l'intérieur de ce Dataproc. Ici, nous avons les étiquettes que nous allons parcourir pour chaque carte. Donc, en haut de notre rendu, juste en dessous de la classe de carte, nous allons créer un nouveau div, qui va être une nouvelle section qui contient toutes ces étiquettes. Le nom de la classe sera égal aux étiquettes de carte. Ouvrez la carte erace. Nous pouvons accéder à nos accessoires et aux étiquettes de points de données. Pour être approuvé et nous pouvons utiliser la méthode de la carte, qui prend dans l'étiquette. Donc c'est au-dessus de la fonction de flèche. Ensuite, il va retourner un élément span pour chacun. Nous pouvons passer dans notre clé, qui peut simplement être la valeur de chaque étiquette, le style. Donc, nous avons la valeur de couleur, nous pouvons définir la couleur de fond pour être également égale à notre étiquette. Ensuite, enfin, nous pouvons demander un nom de classe à cela, qui va être étiquette. Bien. Maintenant, je vais donner à ce fichier une sauvegarde et ensuite passer au navigateur. Nous pouvons voir instantanément que les deux couleurs qui ont été ajoutées comme étant mises à jour dans les composants de la carte. Essayons de se déplacer dans la couleur bleue et ajouter un vert et enregistrer les changements, actualiser. Ceci est désormais reflété à l'intérieur des composants de la carte. Donc, toutes les fonctionnalités de mise à jour sont maintenant terminées. Je vous verrai ensuite où nous allons améliorer sur cette carte en autorisant plusieurs lignes de texte. 31. Redimensionner la zone de texte: Si nous cliquons sur l'une de nos cartes et ouvrons le modal d'édition, il s' agit actuellement d'une saisie de texte, qui nous permettra d'ajouter des textes sur une seule ligne. Il vaudrait mieux que nos cartes aient du texte multi-lignes, et que la carte s'agrandisse pour s'adapter à chaque ligne. Pour ce faire, je vais ajouter un paquet appelé react-autosize-textarea, ce qui nous permettra de les ajouter au projet. Cela nous donnera une zone de texte, qui redimensionnera également la hauteur de la carte, fonction du nombre de lignes de texte. Passons au code VS et ajoutons ceci à notre projet. En bas, en bas. Je vais fermer le serveur avec le contrôle C, et ensuite nous pouvons exécuter et npm i réact- autosize- textarea. Alors lançons ça... 32. Premier regard sur onSnapshot: Chaque fois que nous ajoutons des mises à jour ou supprimons quelque chose de nos projets, nous devons effectuer une actualisation pour obtenir les nouvelles données. Eh bien, c'est vrai pour la plupart des choses, si nous devions aller de l'avant et ajouter un nouveau tableau, disons , des cours à prendre, ajouter la couleur, puis créer un nouveau tableau, vous verrez cela apparaîtra sans rafraîchissement. Je voulais vous montrer deux façons différentes que nous pouvons aborder la mise à jour de cette application. Le premier est tout comme nous l'avons ici avec les nouvelles planches, chaque fois que nous ajoutons ou enlevons une planche, nous mettons les planches en état. Comme nous le savons déjà, l'un des avantages de ceci est, il mettra à jour tous les composants que nous allons utiliser comme état. Cela va également être généralement plus rapide que attendre sur la base de données pour renvoyer les données, mais cela signifie aussi que nous avons deux sources des mêmes données. Nous avons la carte stockée dans l'état et aussi dans Firebase. Si une erreur se produit lors de la mise à jour de l'un ou l'autre de ces derniers, cela peut alors entraîner la non-synchronisation de notre application. Une autre approche que nous allons maintenant utiliser nos listes et cartes est d'utiliser fonctionnalité en temps réel de Firebase pour nous dire quand quelque chose a changé. Plutôt que de nous demander les données, Firebase nous les enverra chaque fois qu'il y a un changement. Commençons par la méthode get list dans les composants de la carte. Allez dans le fichier board.js et faites défiler vers le haut pour obtenir des listes. C' est ici à peu près le haut de ce fichier. Get lists utilise cette méthode get pour obtenir ce qu'on appelle un instantané de nos données à l'heure actuelle. Pour obtenir des mises à jour en temps réel, nous pouvons remplacer cela par une méthode appelée sur les instantanés. Sur les instantanés, il touche un écouteur qui nous avertira lorsqu'une modification a été apportée. Pour ce faire, je vais commenter nos données existantes. Donc tout juste au-dessus de notre bloc catch, jusqu'à la méthode get. Maintenant, nous pouvons commencer à remplacer cela par notre propre méthode d'instantané. Les mêmes principes s'appliquent. Nous voulons obtenir notre boucle de données à travers elle, créer un objet de liste, puis l'enregistrer dans l'état. Nous appelons d'abord l'instantané, qui prend une fonction. Juste dans l'auto par, nous pouvons alors appeler des snapshots, en passant les snapshots pour chaque fonction. Pour chaque donnée, snapshots, qui est un objet contenant des détails sur la requête, nous voulons ensuite appeler une méthode appelée doc changes, donc snapshots.doc change. Les modifications de document renverront un tableau contenant les modifications depuis nos derniers instantanés. Alors, que devons-nous faire lorsque nous avons un tableau de données ? Eh bien, nous devons vivre ça pour pouvoir travailler avec chaque article individuel. Juste après ici, nous pouvons alors appeler pour chacun, en passant une fonction de rappel, donc pour chaque changement. Mais je vais exécuter le code à l'intérieur de ces accolades. Avant d'aller plus loin cependant, faisons un journal de console et nous pouvons enregistrer la valeur du changement. Enregistrez ce fichier. Allez sur le navigateur, ouvrez la console, cliquez sur l'un de ces tableaux, et ajoutons une nouvelle liste. Disons, pour faire une liste, appuyez sur Entrée, et nous obtiendrons un journal de console. Une chose que nous devons noter ici est ce type d'ajouté. Gardez cela à l'esprit car nous aurons besoin de revenir à ce sujet très bientôt, mais la chose principale dont nous avons besoin ici est ce doc. Voici un instantané des documents contenant toutes les données dont nous avons besoin. On peut voir qu'il a l'ID. Si nous cliquons dessus et nous pouvons saisir cela avec doc.id. Quelque chose qui n'est pas si évident en regardant ce document est comment nous obtenons le reste de nos données de liste. Comment nous pouvons en fait obtenir est en appelant une méthode de données. Passons à notre journal de console. Nous pouvons accéder à notre document que nous venons de voir dans la console puis à la méthode de données, sauvegardez ceci. Nous voyons maintenant à l'intérieur ici, nous avons notre objet de liste qui contient l'ID du tableau, le créé à la date, et aussi le titre. Ceci, combiné avec l'ID que nous semblons, nous donnera maintenant toutes les informations dont nous avions besoin pour construire notre nouvelle liste. Revenons en arrière, nous pouvons supprimer notre journal de console. Ensuite, à l'intérieur de nos quatre chacun, nous pouvons créer une constante appelée doc. Cela va stocker la valeur de change.doc, nous donnant une référence à nos documents. L' étape suivante consiste à créer notre liste, qui va être un objet. Nous devons d'abord saisir l'ID, qui est disponible à partir de Doc.id, qui est exactement ce que nous avons vu auparavant, donc doc est égal à change.doc.id. Nous devons ensuite saisir le titre, qui est disponible à partir de doc, la méthode de données que nous venons d'examiner. Prenez nos objets de liste, puis saisissez le titre en dehors de notre objet de liste. Nous pouvons ensuite définir l'état, donc this.setstates passant dans les objets. L' état que nous voulons mettre à jour est la liste actuelle. En tant que tableau, nous allons fusionner dans la liste actuelle, donc ce .date.currentlists puis séparés par une virgule, nous pouvons ajouter dans notre nouvelle liste. Maintenant, sauvegardez ce fichier, et nous pouvons revenir à notre projet dans le navigateur. Nous pouvons essayer d'ajouter une nouvelle liste, et cela devrait être ajouté automatiquement. Disons de faire la liste deux, appuyez sur Entrée. Maintenant, cela est en cours de mise à jour sans avoir besoin d'actualiser le navigateur. Cependant, si nous cliquons maintenant sur l'une de ces listes et supprimons, nous voyons maintenant une erreur à l'intérieur de la console et aussi notre liste a été ajoutée en tant que troisième élément. Le message d'erreur vers le bas dans la console indique qu'il a rencontré deux enfants avec la même clé. C' est à cause de la façon dont nous gérons les modifications apportées aux documents et c'est ce que nous examinerons dans la prochaine vidéo. 33. Travailler avec les changements de document: Dans la dernière vidéo, nous avons discuté était une époque où nous avons enlevé un de nos ascenseurs. Nous avons reçu le message que j'ai rencontré aux enfants avec la même clé, puis nous avons vu une liste supplémentaire apparaître à l'intérieur de notre projet. C' est à cause de la façon dont nous avons les choses en ce moment dans notre propre méthode d'instantané. Si nous passons au tableau dot.js, où nous travaillions sur notre dernière vidéo, puis dans la méthode get list. Nous construisons toujours un nouvel élément de liste, puis définissons l'état, qui est cette section juste ici. Même si l'élément a été supprimé, nous obtenons toujours les données de modification de la liste, nous l'ajoutons ensuite à notre objet. Ensuite, définissez-le sur états, cela entraînera le groupe d'éléments que vous voyez ici. Par conséquent, rencontrez en elle deux enfants avec la même touche aux pixels. Si vous vous souvenez de la dernière vidéo, nous avons dit de garder à l'esprit quand nous avons fait le journal de la console, il y avait un type de ajouté. Nous pouvons l'utiliser pour définir l'état ou pour supprimer l'élément de l'état, selon si la liste a été ajoutée ou supprimée et nous pouvons le faire avec une instruction if. Revenons à notre board.js. Puis il juste au-dessus où nous construisons nos documents. Nous pouvons ajouter une instruction if pour vérifier si le change.type est égal à la chaîne de ajouté. Si c'était le cas, nous pouvons ouvrir et fermer les accolades. Nous pouvons ensuite récupérer toutes nos données à partir d'états définis, notre liste et de nos documents. Ensuite, ajoutez ceux-ci à l'intérieur de notre instruction if. Maintenant, cela ne définira notre état que si l'élément a été ajouté. Cependant, si l'élément a été supprimé, il suffit d'annuler notre instruction if, nous pouvons ensuite ajouter une seconde instruction if, entre crochets le change.type. Ce temps est égal à supprimer. Si c'est le cas, nous pouvons alors ouvrir les accolades et ensuite nous pouvons une fois de plus définir l'état, configurer nos objets d'état. L' état que nous voulons obtenir est les listes actuelles. ensembles de notre tableau et maintenant puisque nous supprimons un élément de l'état, nous pouvons utiliser la méthode de filtre JavaScript. Nous pouvons le faire en fusionnant dans notre tableau une copie des listes actuelles. Fusionnez ces listes avec les trois points, .state, .current. Nous pouvons alors appeler la méthode de filtre. À l'intérieur de cette méthode de filtre, nous allons exécuter une fonction pour chaque élément de notre liste. Nous voulons retourner uniquement les listes où le list.id n'est pas égal à Change dot doc, point ID. Juste pour récapituler ce que nous faisons ici, nous saisissons toutes nos listes des états et nous allons retourner uniquement nos listes où l'identifiant de chaque liste particulière ne correspond pas à celui qui a été supprimé. Ceci est disponible à partir de change.doc.id. Maintenant, tout ce qu'il reste à faire est de sauvegarder ceci et de passer dans le navigateur. A l'intérieur de notre planche, nous pouvons ajouter une nouvelle liste. Disons que la liste de tâches trois ajoute ceci dans. Nous allons déplacer l'un de ces éléments et maintenant ceux-ci sont ajoutés et supprimés sans provoquer d'erreurs. Enfin, à partir de la dernière vidéo, nous avons encore la section commentée où nous utilisons la méthode de devis. Nous pouvons maintenant supprimer cela en toute sécurité car nous n'aurons plus besoin de ce code. Voici notre liste qui fonctionne maintenant avec les données en temps réel Firebase. Ensuite, nous l'appliquerons également à nos cartes. 34. Cartes en temps réel: Nous pouvons également ajouter cela sur les cartes totales de l'écouteur instantané aussi. Ce qui signifie que si nous provoquons des mises à jour, si nous ajoutons des cartes ou en supprimons, ces changements sont immédiatement reflétés dans l'application. Faisons cela dans the.js, qui est responsable de la récupération des cartes avec la méthode fetch cards. Faites défiler vers le bas pour récupérer les cartes. Tout comme avec la liste, nous allons tout commenter, depuis le catch réglable jusqu'à la méthode get. Ensuite, nous pouvons maintenant remplacer ceci par notre instantané. Juste à commander par nous pouvons ajouter sur instantané qui prend ensuite un instantané de chaque changement. Donc, il s'agit de fonction, et puis à l'intérieur ici, nous allons vivre à travers chacun des changements de document. Nous pouvons le faire avec Snapshot.docChanges. Pour chaque modification de document, nous allons exécuter la méthode ForEach en passant le changement. Nous allons construire notre carte comme nous l'avons fait avec la liste. Tout d'abord, créez une constante appelée doc, qui va être égale à change.doc Nous créons ensuite notre jeu de cartes de tous les objets de carte. L' ID, rappelez-vous provient du doc.id séparé par une virgule. Nous avons également le texte qui est disponible dans notre variable doc. Nous avons la méthode de données pour saisir toutes les données. Les données que nous voulons proviennent de l'objet de la carte et du champ de texte. Celui-ci a aussi les étiquettes. Tout comme la ligne ci-dessus, nous appelons l'objet de carte accessible aux données, puis le champ appelé étiquettes. Alors, comme nous l'avons fait dans la dernière vidéo, nous devons suivre le type de changement. Ensuite, définissez l'état selon s'il a été ajouté, supprimé ou modifié. Faisons ça. Juste après nos objets de carte, nous pouvons ajouter une instruction if pour vérifier si le change.type est d'abord égal à ajouté ajouter les accolades. Ensuite, nous pouvons définir l'état, donc this.setState. Puisque c'est un ajout, nous allons fusionner dans les cartes actuelles comme un tableau pour l'opérateur spread, prenez this.state. This.states.CurrentCards séparés par une virgule nous allons ensuite fusionner dans nos objets de carte. Sous cette première section if, nous pouvons ajouter une seconde pour vérifier si le type de changement, cette fois sera égal à supprimé. Si cela est supprimé, nous allons faire une chose très similaire aux listes où nous allons filtrer par l'id. Nous allons d'abord définir this.setStates, passant nos objets, sélectionnez les CurrentCards. Nous allons ensuite répandre this.state.currentCards où nous allons appeler la méthode de filtre. Chaque élément sera stocké à l'intérieur de cette variable de carte, nous ne retournerons alors que les cartes dont l'ID ne correspond pas à celle qui a été supprimée. La card.id qui n'est pas égale à change.doc.id,. Après cette section supprimée, nous allons également ajouter une section modifiée. Cette fois, si le change.type est égal à la chaîne de modified, nous exécutons ensuite ce code à l'intérieur des accolades. La première chose que nous devons faire est de saisir le numéro d'index de l'élément qui est stocké dans les états. Nous pouvons commencer cela à l'intérieur d'une constante appelée index. Ceci est égal à this.State.CurrentCards. Nous allons ensuite utiliser la méthode find index. A l'intérieur d'ici chaque élément qui va passer en boucle, il va être stocké dans cette variable d'élément. Par conséquent, nous ne pouvons retourner que l'article où l' item.id est égal à change.doc.id. Cela va renvoyer un seul article de nos CurrentCards. Élément dont l'ID d'élément est égal à celui qui est en cours de modification. Nous avons besoin de ce numéro d'index, toute cette position de notre élément à l'intérieur de cet état afin que nous sachions exactement quel élément mettre à jour. L' étape suivante consiste à créer une constante appelée cartes qui sera égale à toutes les cartes dans notre état actuel. Nous allons les saisir avec l'opérateur de propagation donc this.State.CurrentCards. Nous avons maintenant tout ce dont nous avons besoin pour mettre à jour notre état. Nous avons les CurrentCards qui ont été modifiés. Nous avons le numéro d'index qui est la position qui est stockée dans les états. Tous nos droits proviennent des États, donc maintenant nous pouvons aller de l'avant et mettre à jour cette situation. Tout d'abord, nous sélectionnons toutes nos cartes dans les états. Nous sélectionnons par le numéro d'index, la carte individuelle que nous voulons mettre à jour. Par exemple, ce serait cartes zéro, cartes cinq, cartes 10, tous quel que soit le nombre dans notre état. Nous allons ensuite remplacer cela par notre objet de carte d'en haut. Ensuite, définissez ceci à l'état avec this.setState passe dans nos objets, de sorte que les cartes actuelles vont maintenant être égales à ce tableau de cartes. Nous pouvons maintenant faire défiler vers le bas, et supprimer le code d'origine, donc avec la méthode get, et aussi le pour chaque. Aussi, si nous faisons défiler vers le haut, nous pouvons maintenant voir que nous n'utilisons plus cette constante actuelle. Nous pouvons également supprimer cela et attend tout simplement nos CardsRef. Nous allons enregistrer ce fichier et maintenant nous allons au navigateur et tester ça, dirigez-vous vers le tableau. Je vais devoir ajouter quelques listes comme ABC. Je peux également ajouter un peu plus dans nos différentes listes. Nous pouvons ajouter des cartes et cela mis à jour en temps réel. Essayons de se déplacer dans le numéro deux qui est bon, et le numéro quatre, si rechargement, ils sont toujours affichés. Essayons maintenant de modifier ceci. Changeons un pour être cent. Enregistrez nos modifications et ces modifications sont désormais reflétées en temps réel. Cela nous laisse maintenant avec nos cartes de liste de carte, toutes maintenant mises à jour sans avoir besoin de rafraîchir le navigateur. 35. React Context API: À mesure que l'ab devient grand et plus complexe, nous avons souvent besoin d'une meilleure façon de gérer nos états. Le passage d'accessoires vers le bas de nombreux niveaux, souvent appelé forage d' hélice , peut ajouter une couche de complexité. C' est là que les bibliothèques de gestion d'état telles que Redux ont joué un rôle pour aider à gérer cela. Redux est bien, mais cela signifie aussi apprendre de nouvelles choses, ajouter à la taille globale de notre ab, et cela peut également ajouter de la complexité si nous ne l'utilisions que pour passer l'état. Une solution pour utiliser l'API React Context. Contexte a été créé pour partager les données dont nous avons besoin dans plusieurs parties de notre application. Dans cette section, nous allons utiliser Firebase pour fournir l'authentification des utilisateurs. Les utilisateurs peuvent se connecter et s'inscrire, puis ne voir que les tableaux qu'ils ont créés. Ce serait un bon cas d'utilisation pour l'API Context puisque l'état connecté est nécessaire sur plusieurs pages. Lorsque vous utilisez Context, nous n'avons plus besoin de transmettre les données, dans notre cas, les états connectés à partir du composant parent via les composants enfants. Au lieu de cela, nous avons essentiellement un composant avec l'état global, que nous pouvons importer directement dans n'importe quel autre composant afin que nous puissions accéder aux données. La première chose que vous pourriez penser est  : « Pourquoi ne pas simplement déplacer tous nos États dans ce contexte ? » C' est une bonne question. Bien que cela soit certainement possible, les créateurs de React découragent cela car il peut rendre les composants moins réutilisables, et transmettre des accessoires seulement quelques niveaux, peut être une solution beaucoup plus simple. Dans le répertoire des composants, créons un nouveau fichier pour notre contexte. Dans le fichier Composants, Nouveau, je vais appeler ceci le AuthContext.js. Ce nom de fichier est à nous mais j'ai le nom de ce AuthContext car il gérera l'authentification de l'utilisateur. En haut du fichier, la première chose que nous faisons comme jamais est d'importer React depuis React. Ce paquet React nous permettra d'accéder à la méthode Create context, nous pouvons maintenant stocker dans une constante appelée AuthContext, ce qui est égal à React.CreateContext avec les crochets juste après. Donc maintenant, nous avons cet objet de contexte. On peut créer deux choses. Nous avons besoin à la fois d'un composant fournisseur et d'un consommateur. Comme ces deux sons, le fournisseur fournira les données à d'autres composants, et le consommateur obtiendra les données et sera également abonné à tout changement. Tout d'abord, nous pouvons créer le composant fournisseur, comme nous le ferions avec tous les composants React normaux. Nous pouvons créer une classe appelée AuthProvider, qui étend React.Components. Puisque ce fournisseur est responsable de la fourniture des données, nous pouvons également ajouter dans n'importe quel état. allons donc mettre en place notre objet états où nous allons définir l'utilisateur initial pour être un objet vide. Nous devons aussi passer une méthode aléatoire, comme nous le ferions normalement. À l'intérieur, nous allons retourner quelques données JSX entre parenthèses. Cependant, cela ne va pas rendre JSX comme nous l'avons fait précédemment. Au lieu de cela, nous allons retourner un composant de fournisseur de contexte, qui ressemble à ceci. Donc, nous pouvons saisir l' AuthContext, AuthContext est la variable que nous avons définie juste au-dessus, alors nous devons accéder au Fournisseur avec un P majuscule, fermer ceci. Ce composant permettra à d'autres composants de s'abonner à toute modification de données. À l'intérieur de la balise d'ouverture, il prend une valeur, et cette valeur peut être tout ce qui ne passera pas sur les composants. Je vais l'utiliser pour transmettre l'utilisateur des états, que nous venons de définir avant. A l'intérieur de cette étiquette d'ouverture, nous pouvons définir la valeur à l'intérieur des accolades doubles. Nom de la valeur de l'utilisateur qui sera égal à this.state.user. En bas, nous avons tout ce que nous pouvons utiliser dans nos composants, nous avons également besoin d'exporter ce fournisseur. À l'intérieur des accolades, nous pouvons exporter notre AuthProvider. J' ai donc ajouté ceci comme une exportation nommée à l'intérieur ces accolades puisque nous allons également exporter un consommateur très bientôt. Donc maintenant, nous pouvons prendre ce fournisseur et aussi les données, qui est l'utilisateur, et le rendre disponible pour le reste de notre application dans le app.js. A l'intérieur, nous pouvons d'abord importer ce fournisseur tout en haut. Importez à l'intérieur des accolades, notre AuthProvider. Le chemin d'accès au fichier sera égal à .slash, il se trouve dans le dossier des composants et le nom de AuthContext. La façon dont nous mettons ces données à la disposition tous les composants est de les utiliser comme composant d'emballage. Allons à notre routeur de navigateur, et puis nous pouvons ajouter ceci à l'intérieur ici. Donc, en haut, le routeur du navigateur. Nous pouvons ajouter cela comme un composant normal. Ceci est le nom du fournisseur. Cela a une balise d'ouverture et de fermeture, donc nous pouvons prendre la balise de fermeture et envelopper tout le contenu à l'intérieur de ce fournisseur. Pour supprimer cela, juste au-dessus du routeur de navigateur à cette fin, puis enregistrez ceci. Si nous passons maintenant à notre application, et si nous faisons une actualisation, nous ne voyons aucun contenu à l'écran. puisque nous avons maintenant utilisé ce AuthProvider comme wrapper, tous les composants qui sont maintenant à l'intérieur sont maintenant un enfant de ces composants. Jetons donc un coup d'oeil à ce qui se passe dans AuthContext. À l'intérieur, nous avons ce AuthContext.Provider, qui fournira toute valeur à tous les composants enfants. Ce composant n'a aucun contenu entre les balises d'ouverture et de fermeture, et c'est pourquoi nous ne voyons aucun contenu à l'écran. Alors, comment pouvons-nous dire à React que ce composant devrait également rendre tous les composants qui sont imbriqués dans le app.js ? Eh bien, nous pouvons le faire avec this.props.children, que nous pouvons ajouter à l'intérieur des accolades. Maintenant, donnez à ce fichier une sauvegarde, puis sur le navigateur. Nous pouvons maintenant voir que tous les composants fonctionnent comme prévu. Cela nous laisse maintenant fournir le contenu à d'autres composants. Nous pouvons donc maintenant mettre en place le consommateur qui va aller de l'avant et utiliser ces données. Dans l'AuthContext est l'endroit où nous allons mettre en place cela. Faisons ça en bas, juste après notre cours. Donc, la première chose à faire est de créer une constante appelée AuthConsumer. Nous allons à nouveau utiliser l'AuthContext, que nous avons mis en place en haut ici mais cette fois, nous allons attraper consommateur plutôt que le fournisseur, que nous avons utilisé auparavant. Donc AuthContext.Consumer, puis la deuxième chose à faire est d'ajouter cet AuthConsumer à notre exportation afin qu'il soit disponible pour l'utiliser dans d'autres fichiers. Donc, juste avant d'aller tester cela fonctionne dans d'autres composants, ajoutons quelques données initiales pour travailler avec. Pour le moment, nous avons un objet utilisateur vide. Ajoutons simplement un nom à l'intérieur ici, afin que nous puissions tester les données atteignent les composants. Alors maintenant, sauvegardez ceci. Dans le fichier app.js, nous allons maintenant fournir dans ces données à tous nos composants enfants utilisant ce fournisseur. Donc, maintenant, nous pouvons aller dans l'un de ces composants imbriqués à l'intérieur et ensuite profiter du consommateur que nous avons créé pour accéder à ces informations. Faisons cette Auth dans le composant de carte. La première chose que nous devons faire en haut est d'importer notre AuthConsumer à partir de notre nom de fichier qui est. /AuthContext, faites défiler jusqu'au rendu. Nous utilisons ensuite ce AuthConsumer comme enveloppe à l'ensemble de notre contenu. Donc, juste en retour, nous pouvons ajouter dans notre AuthConsumer. Fermez ça. Prenons ceci, découpons ça à sa place et ajoutez-le tout au bas de notre contenu. Ce composant AuthConsumer nous permet de nous abonner à toute modification à l'intérieur du contexte. Donc, si un utilisateur a été mis à jour dans notre fichier AuthContext, cela serait alors transmis à ce consommateur. Chaque fois qu'il y a un changement, ce authConsumer prend une fonction en tant qu'enfant. Commençons donc par découper toutes les données à l'intérieur de AuthConsumer. Coupez ça hors de propos, je vais l'ajouter ici dans un instant. Ensuite, nous pouvons passer dans une fonction à l'intérieur des accolades. Ouvrez donc les parenthèses, configurez la fonction flèche. Cette fonction prend toute valeur qui est transmise à partir du contexte. Donc actuellement à l'intérieur du fournisseur, nous ne transmettons que la valeur de l'utilisateur, donc de retour ici dans le consommateur, nous pouvons passer l'utilisateur à l'intérieur des accolades, puis à l'intérieur de ce corps de fonction, nous pouvons maintenant coller le contenu que nous avions auparavant. Donc, ajoutez ceci dans, et maintenant toutes les valeurs que vous avez passées à la fonction devraient maintenant être disponibles dans ce code. Nous pouvons tester cela fonctionne en sortant cet utilisateur n'importe où à l'intérieur ici. Faisons cela juste au-dessus de l'en-tête de la carte, à l'intérieur des accolades, nous pouvons sortir l'utilisateur et ensuite accéder au nom de notre objet, enregistrer ce fichier, sur le navigateur, et maintenant nous voyons le nom qui avait été fournis par notre Etat. Donc, nous allons utiliser ces données à l'intérieur de ce consommateur dans un moment, mais pour l'instant je vais supprimer ce nom puisque tout cela fonctionne maintenant. Donc, juste comme un résumé rapide, nous créons un fichier contextuel, qui va stocker notre utilisateur dans des états. Nous allons bientôt attraper cet utilisateur de Firebase, mais pour l'instant, nous avons codé en dur dans une valeur juste en dessous. Nous avons ensuite configuré notre AuthContext, qui a ensuite obtenu un fournisseur et un consommateur. Le fournisseur est responsable de la transmission des données à tous les composants enfants. Actuellement, la seule valeur que nous transmettons est cet objet utilisateur, nous créons ensuite un consommateur qui prend ensuite données à l'intérieur de n'importe quel composant qui en a besoin, puis dans le app.js, nous avons importé le et ensuite enveloppé notre application entière avec ceci. Ainsi, tous les composants enfants ont accès à ces données dans le fichier board.js. Nous utilisons ensuite le consommateur que nous avons créé, qui a ensuite un enfant comme une fonction, puis transmettons cet utilisateur dans notre code afin qu'il soit disponible pour l'utiliser partout où nous le souhaitons. Comme vous pouvez le voir, il y a une petite configuration requise avec Context. C' est pourquoi il est recommandé de ne peut-être utiliser que, en cas de passage d'accessoires, plusieurs niveaux. Cependant, une fois cette configuration terminée, nous pouvons maintenant accéder à ces données simplement en ajoutant un consommateur à tous les composants qui en auront besoin. Ensuite, nous allons commencer à examiner l'utilisation authentification Firebase pour permettre aux utilisateurs de s'inscrire et de se connecter. Nous utiliserons ces états connectés et le transmettrons ensuite à tous les composants qui en ont besoin via Context. 36. Authentification de Firebase et mise en place: Nous utiliserons cette API contextuelle que nous avons consultée dans la dernière vidéo, ainsi que l'utilisateur actuellement connecté à différents composants. Nous allons le faire avec le package d'authentification Firebase, qui aura la possibilité pour les utilisateurs de s'inscrire et de se connecter, et il écoutera également les changements et ensuite mettre à jour notre état. Par exemple, lorsqu'un utilisateur se déconnecte, l'état sera alors mis à jour et cela nous permettra alors de cacher toute information qu'il ne devrait pas voir. Un autre avantage d'avoir un utilisateur connecté est que nous pouvons également utiliser l'ID unique de l'utilisateur lors de la création d'un nouveau compte de forum de liste. Cela signifie que nous pouvons ensuite filtrer les données que nous récupérons de Firebase pour afficher uniquement les éléments créés par l'utilisateur connecté. Aussi la console Firebase, nous avons actuellement utilisé ce lien de base de données, mais nous pouvons configurer l'authentification juste pour les deux. Allez à la méthode d'inscription, qui est ce bouton juste ici. Firebase nous fournit de nombreuses façons de connecter les utilisateurs. Nous avons des options pour utiliser les médias sociaux, tels que Facebook ou Twitter, mais celui que je vais ajouter est une combinaison e-mail et mot de passe. Allons à cela en haut, cliquez ici, activez ceci, et puis nous pouvons enregistrer en utilisant ce bouton ici. La prochaine chose à faire est d'aller à notre Firebase Config à l'intérieur de nos projets, qui est le Firebase.js, puis à l'intérieur, nous pouvons également importer le paquet Auth comme nous l'avons fait ci-dessus avec firestore, donc importer de Firebase, le paquet auth. Ensuite, en dessous de la configuration, je vais ajouter un raccourci à la méthode off, puis le stocker à l'intérieur d'une constante. Ci-dessous de la base de données, je vais appeler cette constante, la FireBaseAuth, et définir cela égal à firebase, puis la méthode Auth. Nous pouvons ensuite importer cette référence dans chaque fichier qui en a besoin , puis accéder aux méthodes d'authentification fournies par Firebase. Pour ce faire, nous devons également exporter cela, descendre en bas comme je l'ai nommé exportations, nous pouvons ajouter FireBaseAuth. Pour créer un nouvel utilisateur, nous avons également besoin d'un formulaire, donc nous allons créer un nouveau composant pour cela à l'intérieur du dossier Composants. Créons un nouveau fichier appelé UserForm.js. Fermez la barre latérale. Nous pouvons ensuite importer React à partir de réacts, à l'intérieur d'un composant basé sur une classe appelé UserForm, qui étend React.Component. Je vais mettre en place deux méthodes différentes, qui seront pour l'email et le passe afin que nous puissions supprimer les données que l'utilisateur a saisies. Le premier est une référence à notre entrée email, et ensuite nous pouvons créer notre ref, comme nous l'avons fait dans les vidéos précédentes. Nous voulons dupliquer ceci, puis changer ceci pour être le mot de passe, et créer notre méthode de rendu que nous allons retourner notre formulaire. On peut l'entourer d'un React Fragments. Ensuite, à l'intérieur, nous pouvons ajouter notre div, qui va avoir un nom de classe pour notre CSS appelé sign-up-wrapper. En haut, nous allons ajouter un titre de niveau 2, qui sera le texte de connexion ou de création de compte. Ensuite, notre formulaire, qui a les deux entrées. Rappelez-vous De là, nous utilisons dans la combinaison e-mail et mot de passe, nous devons donc les ajouter à notre formulaire. Créons un formulaire avec un nom de classe du formulaire d'inscription. Nous pouvons ajouter un div qui va entourer chaque entrée. La première entrée sera pour notre email et nous pouvons joindre notre ref, nous avons créé juste au-dessus, qui est égal à ce point d'entrée email. Sur la ligne suivante. Il s'agit d'un type d'e-mail. En outre, un nom qui va être égal à l'email, puis un espace réservé de courrier électronique aussi. Ensuite, notre deuxième div juste en dessous. Prenons cette section ici, copiez ceci, et nous pouvons changer cela pour être le mot de passe, donc l' entrée va avoir une référence de l'entrée de mot de passe, le type de mot de passe, le nom du mot de passe, et aussi le espace réservé aussi. Juste après cette div, nous pouvons également ajouter un bouton. Créons un div wrapper, puis un bouton. Puis à l'intérieur ici le texte de l'inscription. Enfin en bas, n' oublions pas d'exploiter cela avec une valeur par défaut d'exportation avec le nom de UserForm. Le formulaire d'inscription sera les composants initiaux un utilisateur verra lorsqu'il visitera notre application pour la première fois. Nous pouvons l'ajouter à l'intérieur du routeur sur l'itinéraire domestique ou dans le app.js. Importons d'abord ces composants tout en haut. Ceci est appelé UserForm, qui est disponible à partir de. /Composants, puis vous utilisez un formulaire. Nous pouvons ajouter ceci ci-dessous dans notre routeur. Actuellement, si nous faisons défiler toutes nos routes, nous n'avons pas de barre oblique pour la maison, donc nous pouvons l'ajouter directement en haut. Nous pouvons créer une nouvelle route. Nous pouvons définir cela pour être exact avec le chemin du fichier de la route principale, ou la barre oblique avant. Ensuite, les composants que nous voulons rendre est ce UserForm. Aussi le navigateur, nous pouvons maintenant tester cela, si vous allez à notre projet et ensuite aller à la barre oblique avant, nous voyons maintenant les composants UserForm. Nous avons maintenant ce formulaire utilisateur à la racine de nos projets. Dans la prochaine vidéo, nous allons utiliser ce formulaire pour nous permettre de pousser un nouvel utilisateur sur Firebase. 37. Inscription des utilisateurs: Je vais utiliser un formulaire est maintenant prêt à être câblé à une méthode pour pousser un nouvel utilisateur à Firebase. Puisque nous utilisons l'API contextuelle pour contenir toutes nos données utilisateur, je vais configurer cela là-bas. Passons à tous les contextes point JS. Ensuite, au sommet, nous devons d'abord impulser notre référence au paquet FireBaseAuth. Ceci est une exportation nommée, nous le faisons à l'intérieur des accolades. Le FirebaseAuth du paquet Firebase, qui est la barre oblique point et puis Firebase, alors nous pouvons créer une méthode d'inscription qui fera usage de l'e-mail et du mot de passe, qui sera entré dans le formulaire bientôt. Maintenant, dans notre classe, juste en dessous des objets de notre état, nous pouvons créer une inscription, qui sera une synchronisation prise dans l'e-mail et aussi le mot de passe, puis enfin les informations de l'événement. A l'intérieur, nous pouvons créer une section d'essai et nous pouvons également attraper des erreurs. Plutôt que de publier un journal de console, nous n'y reviendrons pas très bientôt. Nous ajouterons bientôt une lentille à main. Juste au-dessus de la première chose que nous allons faire est de saisir la mission inventive et ensuite empêcher le comportement par défaut. Nous pouvons alors utiliser ce paquet FireBaseAuth qui conduit à [inaudible] les deux. Nous allons attendre, FireBaseAuth et ensuite nous pouvons appeler une méthode Firebase qui est appelée CREATE_USER avec e-mail et mot de passe. Entre parenthèses, cela prend l'e-mail et le mot de passe, qui va être transmis à notre méthode et c'est tout ce que nous avons à faire maintenant pour la méthode d'inscription. La prochaine chose à faire maintenant avoir ceci disponible dans ce fichier est que ces deux sont fournisseur en tant que valeur. Juste en dessous de l'utilisateur, comme ce sont ceux-ci sur sa propre ligne. Ajoutez une virgule, maintenant nous pouvons également transmettre notre méthode d'inscription, qui est égale à ce point d'inscription, exactement comme nous le ferions lors de la transmission des invites. La méthode d'inscription est désormais accessible dans toute l'API contextuelle. Allons à un point de formulaire utilisateur JS. Je travaille maintenant importer cet Authconsumer au sommet. À l'intérieur des accolades, vous avez Authconsumer à partir de notre nom de paquet qui est au chemin du fichier de barre oblique point, puis le AuthContext. Tout comme nous l'avons fait avec les composants audacieux, nous devons entourer l'ensemble de notre contenu dans ce consommateur alors descendons et saisissons tout de cette section de retour. Nous pouvons supprimer cela et avoir besoin de consommateurs. Rappelez-vous de la dernière vidéo, nous avons dit que le consommateur doit avoir une fonction d'enfant. Nous pouvons ajouter cela juste à l'intérieur des accolades au lieu d' une fonction et puis à l'intérieur d'ici nous allons passer dans la méthode d'inscription à l'intérieur des accolades. Ensuite, à l'intérieur de ce corps de fonction, nous pouvons coller dans tout le contenu que nous venons de supprimer. Avec cela maintenant en tant que wrapper, tous ces contenus ont maintenant accès à la méthode d'inscription. Cela peut être placé dans le bouton en tant que gestionnaire sur clic. À l'intérieur de la balise d'ouverture, nous pouvons ajouter sur clic crée une fonction en ligne qui prend dans les informations de l'événement. Cela va ruiner notre méthode d'inscription et rappelez-vous que cela prend dans l'e-mail et le mot de passe. L' e-mail est disponible à partir de cette entrée de courrier électronique points, qui est notre valeur de point actuel REF point point. Séparé par une virgule, nous pouvons faire la même chose pour le mot de passe. La REF a été appelée entrées de mot de passe, puis saisir la valeur actuelle. Aussi, rappelez-vous quand nous configurons cela dans le contexte, si nous faisons défiler vers le haut, cela prend également les informations de l'événement. Nous pouvons passer cela comme un troisième argument. Enregistrez maintenant ce fichier et testez cela dans le navigateur. Nous allons créer un e-mail à l'intérieur ici. Ensuite, nous avons également besoin d'ajouter un mot de passe qui est un minimum de six caractères. Cliquez sur Inscription. Accueil à Firebase. Cliquez sur l'onglet de l'utilisateur et maintenant nous allons voir notre seul et unique utilisateur que nous venons de créer. Si vous ne voyez aucun utilisateur appliquer à l'intérieur d'ici, vérifiez le code et assurez-vous également que le mot de passe comporte au moins six caractères. Sinon, vous verrez une erreur à l'intérieur de la console. Si vous voyez des utilisateurs dans cette loi sur la console Firebase, vous pouvez maintenant passer à la vidéo suivante où nous allons voir comment un utilisateur enregistré peut se connecter et se déconnecter. 38. Se connecter et hors: Une fois qu'un utilisateur s'est inscrit, il doit également se connecter et se déconnecter. Nous allons également le faire dans le contexte hors contexte en tant que méthodes personnalisées, commençant par la connexion. Laissons-le au fichier Off context.js. Puis à l'intérieur ici sous l'inscription, nous créons une nouvelle méthode, elle va être appelée login, ce sera une synchronisation, en prenant également l'e-mail et le mot de passe, ainsi que les informations de l'événement, que nous allons passer lors de l'appel, comme dans la section try, et puis tout comme la section d'inscription ci-dessus, nous allons transmettre toutes les erreurs, mais nous allons traiter cette section très bientôt. Dans la section try, nous allons d'abord utiliser ces informations d'événement pour empêcher le comportement par défaut, puis nous allons attendre, notre firebase off et ensuite nous pouvons utiliser la méthode d'authentification firebase appelée connexion avec email et mot de passe, tout camel-case. Connectez-vous avec e-mail et mot de passe, puis à l'intérieur, comme avec l'inscription, cela prend un e-mail, ainsi que le mot de passe et le formulaire d'inscription. Juste en dessous de cela, nous pouvons faire un test pour vérifier si cela fonctionne avec un journal de console, avec le texte de connecté, et nous reviendrons à les tester dans un instant. Déconnexion, nous allons ajouter la méthode de déconnexion, la fonction appropriée, la section try, la section cut juste après, comme un dans l'erreur, nous reviendrons à cela bientôt. Tout ce que nous devons faire dans la section try, est d'accéder à la firebase off, puis appeler une méthode appelée sign-out. Une fois cela fait, nous pouvons alors mettre à jour l'état avec ce point setState, [inaudible] des objets, et l'état que nous voulons obtenir est l'utilisateur. Je vais remettre ça à un objet vide. Encore une fois pour les tests, nous pouvons ajouter un journal de console, qui sortira une chaîne de déconnexion, vers le fournisseur. Nous devons également fournir ces deux méthodes, sorte qu'elles peuvent être accessibles à l'intérieur d'autres composants, donc en tant que valeur que nous avons connexion, qui est égale à cette connexion point, puis également séparée par une virgule, nous ont déconnexion, plus dans l'utilisation des composants de formulaire, nous pouvons ensuite appuyer dans la méthode de connexion au consommateur. Il suffit de vous inscrire, nous pouvons également ajouter une connexion, nous pouvons également ajouter l'utilisateur, et maintenant cela signifie que nous pouvons maintenant déclencher cette méthode de connexion à l'intérieur de ces composants, et nous allons le faire en ajoutant un bouton juste au-dessus de l'inscription. Défilons vers le bas jusqu'au bouton d'inscription, puis juste au-dessus de cela, nous pouvons également ajouter un nouveau bouton, qui va être pour la connexion. Tout comme l'inscription ci-dessous, cela va passer dans un gestionnaire d'événements onclick, qui va déclencher une méthode. On va passer nos événements. Je dénote une fonction de flèche en ligne, avec le nom de la méthode de connexion. Le login doit avoir accès à l'entrée de l'e-mail, ainsi qu'à l'entrée du mot de passe, comme nous l'avons fait ci-dessous, avec les informations de l'événement. Je vais copier ces trois lignes, les coller, et entre les balises de bouton, nous allons ajouter le texte de connexion. Enregistrez cela, puis allez dans le navigateur, dans nos projets, nous voyons maintenant un bouton de connexion. Ouvrons la console. Nous pouvons maintenant notre combinaison e-mail et mot de passe, puis nous nous inscrirons à. Avant de cliquer sur login, modifions ceci pour être un mauvais e-mail. Cliquez sur login. Un message d'erreur s'affiche dans la console. Essayons un autre mot de passe, connectez-vous. Nous obtenons également une deuxième erreur. Maintenant, nous pouvons répondre aux informations d'inscription correctes, cliquez sur connexion, puis nous avons obtenu notre journal de console de connexion. Nous reviendrons à ces messages d'erreur très bientôt. Pour être plus clair pour l'utilisateur, ce qui a mal tourné. La prochaine chose que je vais faire, est de créer un composant d'en-tête, qui va afficher l'utilisateur connecté actuel, et ce sera également l'endroit où nous pouvons ajouter un bouton de déconnexion. Créons le composant d'en-tête maintenant. À l'intérieur de la barre latérale, sous les composants, nous pouvons créer notre header.js. Comme toujours, nous importons les réactions des réactions. Nous allons également utiliser le consommateur off, donc je vais importer ceci. Cela nous donnera accès aux informations de connexion de l'utilisateur, auxquelles nous pouvons accéder à partir d'une loi de contexte. Nous n'avons pas besoin de créer un composant basé sur une classe, car cela va simplement prendre certaines informations, puis les rendre à l'écran. Paramétons un composant basé sur la fonction. Nous pouvons afficher les éléments d'en-tête HTML à l'intérieur ici, comme un wrapper, le passe authconsumer dans l'enfant, qui va être une fonction à l'intérieur des accolades, cela prend dans l'utilisateur, et aussi la méthode de déconnexion, configurer notre fonction flèche. Les parenthèses, comme un wrapper, nous pouvons passer dans les fragments de réaction. Commençons en haut à gauche de notre application. Nous allons ajouter un bouton d'accueil, qui va être un emoji de la maison, où l'utilisateur peut cliquer sur et être redirigé vers notre page d'accueil. Prenons un élément, puisque ce sera un lien, le href sera égal à barre oblique avant. Ensuite, à l'intérieur des éléments span, nous allons avoir une entité HTML, qui est les esperluettes. Le hachage, puis la valeur de 127968, le point-virgule. Répondre peut également avoir un rôle, qui est égal à l'image, puis pour l'accessibilité, vous pouvez ajouter une étiquette, qui va être égal à emoji maison. Parallèlement à cela, nous pouvons ajouter un titre de niveau 1, qui sera pour le nom du projet de [inaudible]. Maintenant sur le côté droit de cet en-tête, nous allons ajouter une section qui est pour la zone utilisateur. Nous allons utiliser le contexte pour afficher l'e-mail de l'utilisateur lorsqu'il est connecté. Un bouton pour se déconnecter, ainsi que le texte de s'il vous plaît se connecter, que nous allons rendre conditionnellement lorsque l'utilisateur n'est pas connecté. Commençons par les petits éléments. Nous allons afficher l'utilisateur, puis nous allons sortir l'e-mail de point utilisateur, que nous allons prendre à partir du contexte. Après cela, un bouton, qui va avoir un gestionnaire d'événements onclick, et cela va prendre les informations d'événement, puis exécuter notre fonction de déconnexion, puis à l'intérieur d'ici, nous pouvons passer dans e, à l'aise merci, nous pouvons également ajouter le texte de déconnexion, et puis la troisième chose que nous allons ajouter ici, entre les petits éléments, sera le texte de svp login. Groupes très similaires ensemble, le bouton et l'utilisateur, et ne les affichera que lorsque l'utilisateur est connecté. Lorsque l'utilisateur est déconnecté, ceux-ci seront tous deux supprimés, puis ne sortiront ceux-ci seront tous deux supprimés, que le texte de s'il vous plaît se connecter. Enregistrez ce fichier, et maintenant nous pouvons importer ceci dans notre app.js. Tout en haut, à l'importation de notre en-tête à partir du chemin du fichier, qui est des composants slash point, puis l'en-tête. Ce composant sera toujours affiché sur notre application, donc nous devons ajouter cela en dehors des composants de commutation des routeurs, alors allez simplement ajouter n'importe quel en-tête, se ferme, enregistrez ceci et rechargez maintenant le navigateur. Je pourrais également avoir besoin d'exporter par défaut dans l'en-tête. Allons-y maintenant, juste en bas, donc exportez par défaut, et le nom de l'en-tête. Essayons encore une fois. Maintenant, nous avons l'en-tête montrant à l'intérieur de l'application. Nous pouvons maintenant essayer de vous connecter, en utilisant les informations correctes. Nous obtenons le message de connecté. Essayons le bouton de déconnexion, et je recevrai le message de déconnexion. Dans la vidéo suivante, nous utiliserons une autre méthode Firebase, pour écouter quand un utilisateur se connecte ou se déconnecte, puis obtenir l'état avec l'utilisateur actuel. 39. L'écoute pour les changements d'auth: Lorsqu' un utilisateur se connecte et se retire de notre application, nous avons besoin d'un moyen de suivre cela et de mettre à jour l'état. Firebase nous fournit une méthode pour cela appelée onAuthStateChanged. Cela écoutera tous les changements apportés à nos utilisations de statut, puis nous pouvons mettre à jour notre propre état. Cela nous permettra de protéger certaines vues dans notre application, comme la vue du tableau si l'utilisateur se déconnecte. Nous ne pouvons pas attacher cet écouteur une fois que les composants sont montés dans le contexte d'authentification. Passons au fichier de context.js, et puis nous pouvons ajouter cela dans une méthode de cycle de vie appelée composant va monter. À l'intérieur, nous allons accéder à une méthode qui va être appelée onAuthStateChanged. A l'intérieur, nous allons configurer une fonction qui prend dans l'utilisateur. Si AuthStateChanged a provoqué la connexion de l'utilisateur, la valeur utilisateur sera stockée à l'intérieur de cette variable. Nous allons d'abord vérifier si l'utilisateur est présent, c'est-à-dire s'il s'est connecté. Nous allons ensuite mettre à jour l'état avec la valeur utilisateur actuelle, avec this.set.State. En passant nos objets d'état, où nous allons mettre à jour l'utilisateur. Notre objet utilisateur va contenir un identifiant, qui sera égal à l'user.id. Nous devons également saisir l'e-mail, qui provient de l'user.email. Ce code sera déclenché si l'utilisateur s'est connecté à l'autre information utilisateur sinon, nous allons ajouter une section else, qui va également mettre à jour l'état pour être un objet vide. Ensuite, nous définissons l'utilisateur pour être notre objet vide, juste comme ceci, et nous avons un message d'erreur ici, donc FireBaseAuth juste comme ceci, et nous pouvons également changer notre état juste au-dessus pour être un objet vide. Puisque nous permettons maintenant à Firebase de contrôler cela. Ci-dessous, nous fournissons déjà ces données utilisateur à plus de composants vers le bas comme valeur. Je fais défiler vers le bas, nous avons l'utilisateur, et aussi dans les composants d'en-tête. Si nous jetons un oeil ici, nous avons également importé cet utilisateur juste ici, puis saisissant l'e-mail de l'utilisateur juste en dessous. Passons maintenant à nos projets et nous pouvons tester cela. Essayons de vous déconnecter. Nous voyons le message de déconnexion. Essayons de vous connecter. Bon de non seulement nous obtenons le message connecté dans la console, nous voyons également l'utilisateur a maintenant été entré dans l'en-tête. Essayons de vous déconnecter. Sur l'en-tête est également mis à jour. Bien, tout ça fonctionne maintenant, mais maintenant on a juste besoin de déplacer ça sur le côté droit. Pour ce faire, passons au header.js. Nous pouvons découper toutes les informations de l'utilisateur. Nous pouvons créer un div en tant que rappeur, [inaudible] de retour, puis ajouter un nom de classe. Activez le CSS, qui sera égal à la zone utilisateur. Enregistrez ceci, et cela pousse maintenant notre zone utilisateur vers le côté droit. Bien, donc nous détectons maintenant que l'utilisateur est connecté état, et dans la vidéo suivante, nous pouvons l'utiliser pour le rendu conditionnel. 40. Rendu conditionnel: Maintenant que notre application est l'endroit où si l'utilisateur est connecté, nous pouvons utiliser ces informations pour faire certaines choses. L' un d'eux est d'ajouter un rendu conditionnel, ce qui nous permettra de faire des choses telles que l'affichage d'une carte uniquement si elle a été créée par l'utilisateur connecté en cours. Juste pour commencer ici à l'intérieur de la vue de boule, nous sortons dans un composant de connexion. C' est parce que dans le app.js, nous avons une erreur juste ici, donc je vais enregistrer ceci juste avant d'aller plus loin. Maintenant, c'est en place. Nous pouvons aller au board.js, et nous pouvons ajouter un rendu conditionnel pour les composants de la carte. Pour commencer, je vais ajouter une nouvelle propriété à l'état, qui va être un message vide pour commencer, puis nous pouvons mettre à jour ce message lorsque nous ne pouvons pas trouver de tableau ou que le tableau a été supprimé. Passons à notre méthode get board, qui est juste en dessous de cela. À l'intérieur, on essaie de trouver un tableau par la carte d'identité. Si aucune carte ne peut être trouvée plutôt que le journal de la console, nous pouvons mettre à jour notre message dans l'état. This.setState à l'intérieur des objets, la propriété que nous voulons mettre à jour est le message, qui va simplement être une chaîne de tableau introuvable. Nous pouvons également copier la section de l'état de jeu, et nous pouvons également ajouter ce tableau lorsque nous supprimons également le tableau. Si nous sauvegardons ce fichier et passons maintenant à l'une de nos cartes, comme les composants de cette carte ici, quand une carte a été enlevée ou introuvable, nous devons masquer le titre de la carte, le bouton de suppression, et aussi le nouveau en bas. Nous pouvons le faire dans les composants de la carte en ajoutant un opérateur ternaire basé sur si nous avons un message dans un état. Passons aux composants de la balle, faites défiler vers le bas jusqu'à notre rendu, puis juste au-dessus de notre en-tête de carte, nous pouvons ajouter notre opérateur ternaire à l'intérieur des accolades. On peut vérifier ce .state. Ce message est égal à une chaîne vide, nous pouvons alors configurer notre opérateur ternaire, qui ressemble à ceci et c'est juste du JavaScript régulier. Si c'est vrai, et nous aurons juste une chaîne vide à l'intérieur des états, nous pouvons alors louer l'en-tête dans ce premier ensemble de parenthèses. Faisons cela en découpant le support de fermeture à la fin, faites défiler jusqu'à juste après l'en-tête de la carte, qui est cette section ici. Nous pouvons ensuite coller cela à l'intérieur, qui signifie que c'est notre en-tête de carte avec le bouton de suppression du tableau, et aussi, le texte est maintenant à l'intérieur de ce premier ensemble de crochets, si c'est faux et que nous avons un message « not_found », nous peut alors sortir ce message à l'intérieur du deuxième ensemble de parenthèses, à l'intérieur d'une couverture aux éléments. Le message est disponible avec this.state.message. Maintenant, évidemment, le navigateur, donnons à cela un test. Nous voyons maintenant notre section d'en-tête de carte en haut. Si nous essayons de supprimer ce tableau, cela supprime maintenant le titre et aussi le bouton, nous laissant avec le message de Conseil introuvable. Nous avons encore ce nouveau bouton de liste en bas cependant, et nous pouvons le cacher en définissant le type d'entrée à masquer quand il y a un message à l'intérieur de l'état. Revenons aux composants de balle à notre créer de nouvelles entrées de liste. Au lieu de définir le type pour être du texte, nous pouvons également ajouter un opérateur ternaire JavaScript à l'intérieur des accolades, nous pouvons faire la même chose que ci-dessus. Nous pouvons vérifier si le message à l'intérieur de l'état est égal à une chaîne vide. Si la valeur est, nous allons définir le type d'entrée pour être du texte, sinon, nous allons définir le type d'entrée pour être masqué. Maintenant, sauvegardons ceci, pour ce tableau actuel que nous venons de supprimer. Ceci est maintenant supprimé le type d'entrée. Allons à une carte différente tout cela est bien, et les nouvelles entrées de liste est toujours là maintenant ce composant de carte complet. En outre, tout ce qu'il doit afficher si l'utilisateur connecté le possède réellement. Dans Firebase, si nous revenons à notre console et dans la base de données, à l'intérieur de nos cartes, nous avons ajouté un identifiant d'utilisateur tout en bas. Cette utilisation d'ABC123 est actuellement codée en dur lorsque nous créons une nouvelle carte. Cela doit maintenant être changé beaucoup l'utilisateur connecté, et nous pouvons tout faire dans le formulaire Créer un tableau. Allons-y, à l'intérieur de nos composants, ici, nous avons besoin d'accéder à l'utilisateur connecté actuel, et à la liste, nous pouvons envelopper nos composants dans le consommateur hors. Allons vers le haut, et puis nous pouvons importer ceci, le consommateur hors, qui va être disponible à partir du chemin de fichier de.. /components, puis le contexte off jusqu'à la section return. Nous pouvons maintenant envelopper cela dans le consommateur off, ajoutons les composants. Rappelez-vous comme un enfant, nous devons passer dans la fonction qui va prendre dans l'utilisateur, qui a toutes les informations de l'utilisateur connecté ensemble sur la fonction automatique. Ensuite, à l'intérieur d'ici, nous pouvons découper tout le reste du contenu. Prend le formulaire, jusqu'à la balise de formulaire de fermeture, puis nous pouvons coller cela à l'intérieur de notre fonction. Maintenant, nous avons cet utilisateur disponible à l'intérieur de ces composants, nous devons le passer à notre méthode de soumission de handle afin que nous puissions l'ajouter aux objets de la carte. Passons à notre propre méthode de soumission. Nous devons supprimer this.handleSubmit, et ensuite peut passer des arguments avec cela, nous pouvons utiliser une fonction en ligne. Configurez une fonction de flèche, que vous pouvez appeler this.handleSubmit. Avoir cela en ligne nous permettra maintenant de passer les arguments à l'intérieur des crochets, donc nous avons besoin des informations sur l'événement, et nous avons également besoin de saisir l'User.ID, donc il va chercher à gérer les soumissions. C' est un argument que nous avons également besoin d'analyser l'UserId. Cet UserID peut maintenant être utilisé à l'intérieur de notre objet de carte, plutôt que cette valeur codée en dur d'ABC123. Cet utilisateur peut également être ajouté à la déclaration if ci-dessous où nous vérifions si le tableau ou le titre et aussi l'arrière-plan existe. Nous pouvons également ajouter une troisième condition pour vérifier si la carte ou l'utilisateur est disponible, avant de l'enregistrer dans Firebase. Maintenant, sauvegardons ceci et passons au navigateur. Cela devra être connecté afin que nous puissions saisir notre identifiant utilisateur unique. Ajoutons l'e-mail et le mot de passe, avec lesquels nous nous sommes inscrits plus tôt. Une fois que nous serons connectés avec notre e-mail sur le haut, nous devons maintenant aller à l'URL. Si nous allons à nos utilisateurs à l'intérieur d'une Firebase, nous pouvons saisir notre identifiant d'utilisateur unique. Nous pouvons ensuite utiliser cette URL ouverte avec barre oblique avant coller ceci dans, suivi d'une barre oblique avant planches. Nous sommes ensuite amenés à la section où nous pouvons créer un nouveau tableau, et nous sommes maintenant connectés en tant qu'utilisateur actuel. Maintenant, créons un nom de tableau. Allons faire notre test, changer la couleur, créer de nouvelles planches. Nous verrons si nous avons essayé de faire ce nouveau tableau, que rien ne semble se passer. Si nous allons à la base de données et vérifions ici, nous verrons que notre tableau n'est pas ajouté ici non plus. Cela est dû à la façon dont notre ID utilisateur est stocké dans la Firebase. Actuellement, lorsque vous vérifiez si le titre du tableau, arrière-plan et l'utilisateur est là avant que nous sauvegardons cela. Eh bien, en fait, l'utilisateur de point de carte n'est pas reconnu. C' est parce que si nous allons à notre de contexte à l'intérieur ici, lorsque l'état est changé, va alors mettre à jour dans nos objets utilisateur, pour avoir l'ID et l'e-mail. Pour le moment, nous définissons l'ID pour être l'ID point utilisateur, mais si nous allons à Firebase et dans l'authentification, l'ID utilisateur est réellement stocké dans un champ appelé UID. Nous devons maintenant mettre à jour ceci dans le contexte. À ma Firebase. Enregistrez ceci sur notre application. Essayons de tester une fois de plus, changez la couleur, créez de nouveaux tableaux. Maintenant, cela a été ajouté. Vérifions simplement que l'utilisateur a été reconnu à l'intérieur de notre base de données, à l'intérieur de notre carte de test, plutôt que la valeur codée en dur. Maintenant, nous avons notre identifiant utilisateur. Nous pouvons maintenant profiter de cette propriété d'ID utilisateur sur la carte et vérifier qu'elle correspond à l'utilisateur connecté actuel avant de rendre tous les composants de la carte. Retour à notre tableau point js. Ici, nous allons ajouter un opérateur ternaire. Ajoutons ceci juste au-dessus de notre emballage de carte. A l'intérieur des accolades. Nous pouvons vérifier si l'ID de point de l'utilisateur est égal à cet état de point de tableaux actuels point utilisateur, dit environ deux ensembles de parenthèses. Nous pouvons ensuite couper la section d'extrémité, sorte que nous pouvons envelopper nos composants de carte et ensuite nous pouvons l'ajouter à la toute fin. Juste après notre emballage de conseil, qui est ici, nous pouvons coller ça. À l'intérieur de la section L, nous allons simplement ajouter une plage vide car nous n'avons pas besoin de rendre le contenu. Aussi pour garder réagir heureux, nous pouvons également envelopper cela à l'intérieur d'un fragments. Juste à l'intérieur de l'utilisateur, nous pouvons ajouter un fragments de points de réaction. Vous ouvrez la balise, attrapez la balise de fermeture. Ensuite, nous pouvons ajouter cela en bas. Juste après cette accolade bouclée. Maintenant, donnons ceci une sauvegarde et passons au navigateur, dans la vue de nos tableaux. N' oubliez pas que seul test a été créé avec cet utilisateur connecté en cours. Les autres avaient tous une valeur de carte codée en dur. Maintenant, si nous cliquons sur les tests, ils devraient maintenant fonctionner. Nous essayons tous les sortants. Nous voyons maintenant que nous obtenons juste la plage vide sans contenu rendu à l'écran. Comme un test supplémentaire. Je vais également tester cela dans un autre navigateur avec un utilisateur de connexion différent. Maintenant, allons à notre composant personnel et inscrivons un deuxième utilisateur. Inscrivez-vous avec un deuxième e-mail. Pour cela, je vais ouvrir Firefox ou tout autre second navigateur est bien. Nous pouvons copier notre hôte local 3000 dans Firefox. Je vais maintenant me connecter en tant que deuxième utilisateur. C' est un que nous venons de créer. Cliquez sur Connexion. Maintenant, comme une deuxième vérification à l'intérieur du navigateur d'origine, je vais me connecter en tant qu'utilisateur d'origine. Allez sur notre planche de test, ouvrons ceci, donc maintenant si nous copions l'URL qui avait été créée avec cet utilisateur du Firefox, nous pouvons maintenant coller ceci dans, appuyez sur Entrée. Nous voyons maintenant un écran vide parce que l'utilisateur qui est connecté ne fait pas beaucoup le champ utilisateur dans l'ensemble de notre tableau. Tout ça fonctionne bien. Quelque chose d'autre pour lequel nous avons besoin d'un rendu conditionnel est ces composants d'en-tête. Nous voulons regrouper l'utilisateur de l'e-mail et le bouton de déconnexion et ne les afficher que lorsqu'il est connecté. Une fois déconnecté, nous voulons ensuite les supprimer et ne montrer que le texte de s'il vous plaît se connecter. Cela sera simple puisque le composant point d'en-tête js a déjà accès à l'utilisateur à partir du contexte. Passons à nos composants d'en-tête. À l'intérieur, nous avons accès à notre utilisateur à l'intérieur du consommateur afin que nous puissions faire défiler vers le bas jusqu'à notre e-mail utilisateur et aussi le bouton. On peut les entourer d'un fragment. Fermez ceci, prenez la balise de fermeture et ajoutez-la juste après le bouton. Nous pouvons ensuite ajouter un opérateur ternaire pour vérifier si l'ID de point utilisateur est présent. Si c'est le cas, nous allons exécuter le code à l'intérieur de ces premiers crochets. Si ce n'est pas le cas, le code à l'intérieur du second ensemble sera exécuté. Prenez les crochets de fermeture, à droite aux extrémités découpez cela, collez-le juste après la fin de nos fragments. Ensuite, nous pouvons saisir la petite section de s'il vous plaît vous connecter et coller ceci dans la section else. Sauvegardez ceci et nous pouvons tester cela dans le navigateur. Nous sommes actuellement connectés et nous voyons le bouton de déconnexion et l'e-mail de l'utilisateur. Si nous cliquons sur déconnexion, cela est maintenant supprimé et nous obtenons le texte de s'il vous plaît connexion. Nous allons également sauvegarder toute la sécurité bientôt lorsque nous ajouterons des autorisations sur le serveur. Ensuite, nous nous en tiendrons au rendu conditionnel en affichant uniquement les cartes pour l'utilisateur actuel. 41. Rendering des cartes basées sur les utilisateurs: À l'intérieur de la vue de cette carte, nous sommes actuellement connectés en tant qu'utilisateur, qui se termine par n1. toute console Firebase, si vous jetez un oeil à la collection de cartes, micron connecté utilisateur, qui se termine par n1, a créé cette carte. Si vous descendez au second, cela est créé par abc123 comme c'est aussi le troisième et le quatrième tableau. À l'intérieur de notre application, nous ne devrions voir que le tableau que l'utilisateur connecté actuel a créé. Cela, bien sûr, a causé un problème parce qu'un utilisateur ne devrait voir les tableaux qu'il a créés plutôt que ceux d'autres personnes aussi. Cet ID utilisateur est déjà transmis en tant que paramètre d'URL. Plus dans les composants home.js, ouvrons cela dans la barre latérale, nous pouvons passer dans ce paramètre lorsque nous appelons la méthode get board. A l'intérieur du composant a monté, nous pouvons accéder à ce point accessoires dot match, point params, puis l'ID utilisateur sur dans le app.js. Si nous enregistrons ce fichier, dirigez-vous vers l'application, cette méthode est toujours à l'intérieur de composants où nous pouvons recevoir ces accessoires comme un argument. Jetons donc un coup d'oeil à la méthode que nous appelons get boards, qui est juste ici. Nous avons déjà cet ID utilisateur que nous avons ajouté précédemment, mais notre présent, il n'a pas été utilisé. La première chose à faire après la référence de la carte, est de supprimer la méthode get. Ensuite, à la place de cela, ce que je vais utiliser la méthode where que nous avons examinée plus tôt, ce qui nous permettra d'obtenir uniquement les tableaux où le champ utilisateur de la carte correspond à l'ID utilisateur actuel. Comme premier paramètre, il s'agit du nom du champ de carte qui est Board.User, séparé par une virgule. Ceci est l'opérateur de comparaison, qui est égal au troisième. Nous voulons vérifier cela par rapport à l'ID utilisateur, qui est transmis à partir des paramètres. Donc, nous pouvons ajouter cette variable à l'intérieur ici. Ensuite, nous pouvons également enchaîner à la fin l'ordre par méthode, qui va retourner les planches dans l'ordre du moment où elles ont été créées. Nous pouvons le faire en accédant au board.created @field. Ensuite, enfin, nous pouvons appeler get pour extraire toutes nos données de carte vers le navigateur et maintenant nous ne voyons pas de planches à l'intérieur d'ici, mais si nous faisons un clic droit et inspectons puis allons dans la console, nous voyons maintenant le message de la requête nécessite un index. Tout comme précédemment, c'est parce que nous utilisons maintenant une requête plus complexe. Donc, nous pouvons maintenant cliquer sur ce lien pour créer cela dans Firebase, et puis comme nous l'avons fait précédemment, nous pouvons aller de l'avant et créer notre index, puis cela donne quelques instants à créer. Une fois cela fait, nous allons maintenant passer à la base de données. Cliquez sur l'onglet Données, puis nous allons supprimer toutes ces cartes. J' ai aussi une erreur d'orthographe ici où cela devrait être créé à. Donc, il résout également en un instant aussi. Laissons la collection, tapez le nom des planches, car certaines sont facilement créées par un utilisateur codé en dur d'abc123. Maintenant, allons à la forme de tableau de création et dans l'objet de tableau juste ici, nous pouvons maintenant créer juste ici. Les fichiers de service et maintenant les nouvelles cartes auront maintenant les données correctes. À l'intérieur de app.js. Nous avons tout ce dont nous avons besoin ici. Alors passons aux projets, créons un nouveau conseil. Appelons cela les idées de cours et il va être bleu, créer sur votre tableau et cela semble bon. Disons de faire pour le prochain. Choisissez une couleur différente. Donc, ceux-ci sont créés pour notre utilisateur connecté actuel. Essayons de vous déconnecter. Nous n'avons pas encore de redirection ou de messages d'erreur configurés, mais nous allons gérer cela dans la prochaine vidéo. Maintenant, allons de l'avant et connectez-vous avec un utilisateur séparé afin que nous puissions vérifier ces tableaux et ne pas afficher pour un compte différent. Ajoutez l'e-mail et le mot de passe, puis connectez-vous. Nous devons également saisir l'ID du deuxième utilisateur. Donc, de l'authentification, prenons l'ID utilisateur, maintenant nous pouvons passer à notre projet. barre oblique avant collez cette barre oblique dans, puis avant et maintenant nous ne voyons pas les tableaux créés à partir de notre ancien utilisateur, car ceux-ci sont filtrés vers le bas par notre identifiant utilisateur. Essayons de créer un nouveau tableau pour celui-ci. Donc tester dans créer un nouveau conseil, bon. Maintenant, tous les nouveaux tableaux que nous ajoutons ne s'afficheront que pour l'utilisateur qui les a créés. Plus loin dans cette section, nous allons également introduire des règles de sécurité sur le serveur, afin d'éviter ces deux règles. Ensuite, nous améliorerons l'expérience d' inscription et de connexion de l'utilisateur en fournissant des redirections et des messages d'erreur. 42. Redirection et messages d'erreur: Permettez-moi de me connecter et de me déconnecter. Nous savons par l'en-tête en haut, c'est ainsi qu'un état utilisateur change, mais nous voulons aussi être redirigé vers. Une fois que nous nous connectons, nous devrions être amenés à la page des tableaux et je me déconnecte, devrait nous retourner à cette page de connexion. Nous allons également ajouter des messages d'erreur lors de la connexion et également de la connexion, alors faites savoir à l'utilisateur si son e-mail et son mot de passe étaient erronés ou si l'e-mail de l'utilisateur est actuellement pris lors de l'inscription. Tous les dans le fichier de contexte off, qui est le point de contexte hors js. Nous avons toutes nos méthodes liées à l'utilisateur à l'intérieur ici. Il va être ici où nous demanderons les redirections. Pour utiliser la redirection, nous devons accéder au routeur de réaction. Défilons vers le haut et nous pouvons tirer cela de notre paquet de routes. Le nom du paquet que nous voulons importer est que nous avons routeur, que nous avons utilisé plus tôt, et nous importons ceci à partir du routeur de réaction dom. Ensuite, comme nous le savons dès le début, nous devons également envelopper ce composant lors de l'exportation. Faites défiler vers le bas. Je vais retirer notre fournisseur d'authentification, que nous exportons ici, laissant au consommateur. Ensuite, sont-ils exportés par défaut ci-dessus. Nous pouvons ensuite envelopper nos composants avec un routeur, une personne dans le fournisseur d'authentification. Enregistrez ce fichier, puis dans l'application dot js, à l'intérieur de ce fichier sur le haut, nous devons également changer l'importation car c'est maintenant une exportation par défaut en supprimant les besoins entourant les accolades. Avec cela maintenant en place, nous pouvons revenir à notre contexte hors contexte et ensuite nous devons d'abord configurer un message off dans les états. Allons aux objets de notre état. Ensuite, juste après l'utilisateur, nous pouvons ajouter un message off. Que nous allons définir initialement à une chaîne vide, descendez à notre méthode d'inscription. Une fois qu'un utilisateur est connecté, nous pouvons ensuite rediriger vers l'URL des tableaux, qui est composée de l'ID utilisateur. Après nous être connecté avec l'e-mail et le mot de passe, nous pouvons accéder à ceci, point accessoires, point historique, point push pour accéder aux dates push du routeur. Ensuite, à l'intérieur des ticks arrière, nous allons insérer l'URL, qui est barre oblique avant. Ensuite, en tant que variable, nous pouvons également insérer notre identifiant d'utilisateur, qui est disponible à partir de ce, état de point, utilisateur de point, ID de point. Après cela, nous avons également besoin d'aller à la barre oblique avant, va alors être la section de coupe ci-dessous qui reçoit des messages d'erreur et nous pouvons utiliser le message pour définir l'état. A l'intérieur, nous pouvons supprimer les commentaires. Ensuite, nous pouvons définir les états et cet état sera égal à notre message d'erreur. Nous pouvons définir le message de désactivation pour être égal au message de point d'erreur. En dessous de cela, le composant de journalisation va être exactement le même. La première chose que nous devons faire est de provoquer une redirection vers les tableaux de l'utilisateur. On peut prendre la ligne de code de la section d'inscription. Nous pouvons ensuite coller ceci après où nous vous inscrirons avec notre e-mail et notre mot de passe. Nous pouvons également attraper tous les messages d'erreur et définir cela sur état aussi. Avec cet état de point défini. Nous pouvons passer le message off, qui va à nouveau être égal à message d'erreur. Dans la méthode de déconnexion, qui est en dessous, une déconnexion devrait entraîner la redirection de l'utilisateur vers la route principale, qui affiche les composants de connexion. Après avoir déconnecté et défini l'état, nous pouvons également rediriger avec les méthodes push. Tout ce que nous voulons faire ici est de rediriger vers la barre oblique avant, mais au moins là où nous attrapons des erreurs. Nous pouvons également définir l'état qui va mettre à jour notre message off. Dans l'étape suivante pour ajouter notre message de désactivation de l'état au fournisseur afin qu'il puisse être utilisé à l'intérieur d'autres composants. Après la déconnexion, nous pouvons également ajouter le message off, qui va être égal à ce, état point, point off message. Maintenant, j'ai tout cela en place. Le composant que nous voulons utiliser est terminé dans le formulaire utilisateur dot js. On peut trouver ça à l'intérieur de la barre latérale, dans notre consommateur hors marché. Nous pouvons aussi transmettre ce message hors service. Il y a une passe de message off des états. Il peut être affiché juste au-dessus du formulaire. Faites défiler vers le bas jusqu'à notre formulaire avec la classe de formulaire d'inscription. Nous pouvons ensuite ajouter un opérateur ternaire à l'intérieur des accolades, où nous vérifions s'il y a un message d'arrêt, s'il y en a, nous allons sortir un élément de span qui va sortir notre message hors à l'intérieur des accolades. Si le message off est false, cela signifie qu'aucun message n'a été défini l'état, donc après le deux-points, nous pouvons simplement définir ceci comme une chaîne vide. Maintenant, sauvegardons cela, sur le navigateur et le signe intégral des composants. Nous pouvons d'abord tester cela avec un e-mail et un mot de passe erronés pour vérifier que notre message est transmis à ces composants. Trouvons une erreur à l'intérieur de l'e-mail avec le mot de passe correct. Je vais tracer la console. Essayons de nous connecter. Nous obtenons l'erreur à l'intérieur de la console et aussi le message d'erreur sur l'écran. Laissez-moi utiliser et savoir qu'aucun enregistrement utilisateur n'a été trouvé. Essayons d'ajouter l'e-mail de manière incorrecte ou de supprimer un chiffre du mot de passe, connectez-vous. Nous voyons à nouveau une erreur à l'intérieur de la console, puis le message mis à jour à l'écran. Corrigons cela et connectez-vous correctement, ce qui nous redirige ensuite vers la vue du conseil. En passant également l'ID utilisateur, ce qui signifie que nous n'avons pas besoin de les taper à chaque fois que nous nous connectons. Supprimons également cet ID utilisateur de l'écran car il n'en a plus besoin. Cela a été ajouté dans les composants de la maison. Nous allons à la maison dot js. Jetons un coup d'oeil pour les éléments de span, qui est juste en haut ici. On peut supprimer ça. Un autre cas que nous pouvons gérer est un utilisateur connecté de retour à la route d'accueil, est maintenant qui est actuellement connecté, puis cliquez sur l'icône d'accueil, sera ensuite pris à la page d'inscription. Si nous sommes également connectés sur cette page, nous n'avons plus besoin de nous connecter ou de créer un compte. Au lieu de cela, ce que nous devons faire est d'ajouter un bouton, qui va rediriger l'utilisateur vers la vue du tableau. Nous pouvons à nouveau utiliser l'opérateur ternaire pour afficher le formulaire uniquement s'il n'y a pas d'utilisateur connecté. Faisons-le dans Visual Studio Code. Allons au formulaire utilisateur, puis au div avec la classe d'un wrapper d'inscription. Au-dessus de cela, nous allons à nouveau utiliser l'opérateur ternaire pour masquer ou s'inscrire formulaire si l'utilisateur est connecté. Le premier que nous allons faire est de vérifier si l'ID utilisateur n'est pas présent. Nous pouvons l'utiliser avec le point d'exclamation, pour vérifier si l'ID de point utilisateur n'est pas actuellement défini. Après le point d'interrogation, nous pouvons alors ouvrir nos crochets. Nous pouvons ensuite envelopper le reste de notre wrapper d'inscription en prenant ces deux et entre parenthèses le fermer en place. Ensuite, faites défiler vers le bas jusqu'à la div de fermeture, tout en bas. Après notre div wrapper de fermeture, nous pouvons coller ceci dans. Nous pouvons alors demander la deuxième condition après le deux-points, ouvrir les crochets. Ensuite, c'est le cas si l'utilisateur est connecté. Nous allons ensuite sortir un bouton qui redirigera l'utilisateur vers le tableau. Ajoutons un bouton H plus à l'intérieur ici. Un gestionnaire d'événements onclick, qui va déclencher une fonction en ligne. Mettons en place une fonction d'erreur à l'intérieur ici, que nous allons créer dans un moment appelé redirections. redirection est de prendre l'ID de point utilisateur, puis il prend entre les éléments d'ouverture et de fermeture. Je vais à mes conseils. Cet opérateur ternaire masquera le formulaire si l'Utilisateur n'est pas connecté. Si l'utilisateur est connecté, nous allons alors afficher un bouton qui, lorsqu'il est cliqué, va rediriger l'utilisateur vers la vue de la carte. Pour ce faire, nous devons créer cette méthode de redirection en dehors de notre rendu. Défilons vers le haut. Créer nos redirections, qui prend l'ID utilisateur, configurer notre fonction et la seule chose est méthode de redirection va faire est de pousser vers une nouvelle URL. On peut accéder à ça, points accessoires, histoire des points. Accédez à la méthode push. À l'intérieur des tiques arrière. Nous pouvons rediriger deux barres obliques, ajouter notre variable, qui va être l'ID utilisateur, puis les barres obliques avant. Sauvegardons ceci et passons à notre projet dans le navigateur. Puisque nous sommes maintenant connectés, nous pouvons maintenant cliquer sur ce bouton, j'irai à mes tableaux. Cela nous redirigera ensuite vers notre identifiant utilisateur, suivi des tableaux. En tant que redirection finale pour cette vidéo, nous pouvons également travailler avec les emoji de la maison dans l'en-tête. Cela est toujours lié à l'itinéraire domestique, mais quand un utilisateur est connecté, il serait préférable de lier aux tableaux de l'utilisateur. Passons à notre point d'en-tête js. Défilons jusqu'à notre lien, qui est des sorties dans notre emoji. Comme je href, au lieu de cette barre oblique, je vais supprimer cela, ajouter les accolades. Nous pouvons rendre cette dynamique. Ensuite, à l'intérieur, nous pouvons également utiliser l' opérateur ternaire pour vérifier si l'ID de point d'utilisateur est présent. Si est à l'intérieur des ticks arrière, nous voulons ensuite rediriger vers les planches, qui est barre oblique, nous passons ensuite l'ID de point utilisateur, suivi de barres obliques avant. Ensuite, nous pouvons également ajouter la condition else, puis rediriger vers la route de barre oblique avant si l'utilisateur n'est pas connecté. Essayons ça. Si nous sauvegardons maintenant, modifions les projets, nous nous connectons maintenant, nous allons cliquer sur l'emoji. Nous avons redirigé vers nos conseils d'administration. Si nous déconnectons maintenant serait alors prendre dans le formulaire d'inscription. Cet emoji nous redirigera toujours vers cette maison routes. Ces utilisateurs redirige quelque chose qui profitera à l'utilisateur lors de la navigation autour de notre application. 43. Rôles et permissions: Il est maintenant temps d'ajouter des règles de sécurité à notre base de données. Afficher et masquer des choses sur le frontal lorsqu'un utilisateur est connecté, est parfait pour garder l'interface utilisateur comme il se doit. Mais nous devons également configurer notre sécurité backend juste au cas où quelqu'un les contournerait en créant une demande fausse ou modifiée. Cela signifie que la base de données n'enverra des données que lorsque l'utilisateur est connecté et n'affichera les cartes, tableaux d' écoute, que si elles correspondent à l'utilisateur actuel. Je suis allé de l'avant et j'ai supprimé les listes et les cartes de notre base de données pour nous donner un bon départ pour cette vidéo, puisque nous allons ajouter un nouveau champ. Le nouveau champ que nous allons ajouter sera exactement comme les tableaux où nous avons ajouté un identifiant utilisateur. Nous allons recommencer dans les composants boards.js, où nous créons une nouvelle liste. Ici, lorsque nous créons une nouvelle liste, nous pouvons utiliser cet utilisateur qui est transmis via le contexte. Pour ce faire, faites défiler vers le bas jusqu'à notre formulaire et sur la méthode onSubmit, nous appelons actuellement la méthode CreateNewList. Je vais découper cela et ajouter une fonction en ligne ici, qui va prendre les informations de l'événement. L' ajout de cette ligne nous permettra de passer l'ID utilisateur lors de l'appel de cette méthode. Nous pouvons ajouter à notre méthode CreateNewList, en passant les informations d'événement et aussi l'user.id. Maintenant, avec cela, nous pouvons aller à CreateNewList en dehors du rendu, qui est juste à l'intérieur d'ici. Nous recevons actuellement les informations sur l'événement, nous devons également recevoir l'ID utilisateur comme un second paramètre juste après nos événements. Ensuite, lorsque nous créons une nouvelle liste, nous voulons ajouter le champ utilisateur, qui sera égal à cet UserID, et le même pour ajouter une nouvelle carte aussi. Allons aux composants list.js. À l'intérieur ici, nous n'utilisons actuellement aucun contexte. Commençons par importer le consommateur hors vente en haut de ce fichier. Allons au sommet. Nous pouvons importer Authconsumer à partir du chemin du fichier qui est. /AuthContext. Faites défiler vers le bas et nous pouvons maintenant utiliser ce composant AuthConsumer pour envelopper notre code à l'intérieur de la méthode aléatoire. Il suffit de retourner créer notre authConsumer, qui a une balise d'ouverture et de fermeture. Ensuite, nous pouvons créer notre fonction, qui va être l'enfant passant dans l'utilisateur à l'intérieur des accolades. Configurez le reste de notre fonction. Ensuite, nous pouvons attraper le reste de notre code de cette div avec la classe de liste. Prenons tout ça, jusqu'à la div de clôture. On peut couper ça. Ensuite, collez ceci à l'intérieur de notre fonction. Maintenant avoir accès à l'utilisateur via notre contexte. Si nous faisons maintenant défiler vers le bas jusqu'à l'endroit où nous créons une nouvelle carte, nous pouvons faire exactement ce que nous avons fait dans la dernière vidéo. Nous avons sorti notre méthode actuelle à partir du onSubmit. Nous pouvons ensuite passer dans une fonction en ligne prendre les informations d'événement, appelant CreateNewCard, puis en passant les informations d'événement. Puis aussi l'user.id, qui a été passé à partir du contexte. En aidant CreateNewCard, il va maintenant recevoir cet UserID. Nous pouvons passer ceci comme deuxième argument. Ensuite, juste après CreateDAT, nous pouvons également ajouter notre champ utilisateur, qui sera égal à l'UserId. Il est maintenant en place. Nous pouvons faire un essai dans le navigateur. Passons à nos projets et nous pouvons créer un nouveau conseil d'administration. Allons juste pour a, b, et aussi déconnectez-vous. Nous pouvons maintenant nous connecter avec un autre utilisateur. Nous avons maintenant redirigé, c'est à c et aussi d. Maintenant, cela va nous laisser avec différents tableaux pour différents utilisateurs. Nous pouvons également ajouter des listes et des cartes pour tester cela aussi. En fait, nous voulons aller à l'un des conseils qui a été créé. Allons pour c, donc 1, 2 et 3 et ajoutez quelques cartes à l'intérieur ici toutes à la console. Rafraîchissons et jetons un coup d'œil à nos nouvelles cartes de descente. Passons en revue toutes les cartes pour commencer et nous avons maintenant l'ID utilisateur lié dans ceux-ci. Vérifions juste que la liste fonctionne aussi. Tout ça marche bien. Maintenant, nous avons ces champs utilisateur. Nous pouvons ajouter nos autorisations. Cliquez sur l'onglet règles et nous pouvons les définir à l'intérieur de la base de données. Cliquez dessus. Ces règles par défaut permettront à quiconque de lire et d'écrire dans notre base de données, qu'il soit enregistré ou non. Mon installation nous permettra de faire correspondre des documents ou des collections, ainsi que de configurer des règles pour chacun lors de la lecture, de la création, de la mise à jour ou de la suppression de données. Nous avons d'abord cette correspondance externe environnante, qui pointera vers nos documents de base de données. Vous pouvez considérer cela comme un chemin de fichier vers notre base de données. Ces accolades que nous avons à l'intérieur d'ici, sont fondamentalement des variables qui peuvent changer, comme l'ID du document. Ensuite imbriqués à l'intérieur, nous pouvons spécifier certains documents ou collections que vous souhaitez sécuriser. Cet exemple montre tous les documents de notre base de données. C' est une règle assez générale. Ensuite, à l'intérieur, nous permettons à n'importe qui de lire et d'écrire notre base de données et bien sûr, ce n'est pas très sécurisé. J' ai fourni avec ce cours un ensemble de règles que vous pouvez utiliser pour les remplacer et je les ai disponibles sur mon bureau. Je vais les ouvrir. Il s'agit d'un fichier texte. Si vous ne l'avez pas encore fait, allez-y et téléchargez-les à partir du cours, et je vais copier tous ces éléments. Retournez à notre base de données et collez-les en place. Nous pouvons ensuite cliquer sur Publier pour les appliquer à notre base de données. Ces règles sont divisées en trois sections, une pour chacune de nos collections. Nous aurons la section match qui est ici, où nous allons faire correspondre tous les documents à l'intérieur de notre collection de tableaux. Nous avons également la même chose pour nos listes et aussi pour nos cartes. Imbriqué à l'intérieur d'ici, nous avons différentes règles pour quand nous voulons lire des données, créer ou mettre à jour des données, et aussi supprimer quoi que ce soit de notre base de données. Deux choses à noter ici lors de l'utilisation de ces règles Firebase, nous avons à la fois une requête, que nous voyons ici, et un objet de ressource, que nous utilisons beaucoup à l'intérieur de ces règles. Cet objet ressource contient des données qui vivent actuellement dans notre base de données, comme ici où nous saisissons au tableau, puis le champ utilisateur. Nous avons ensuite l'objet de requête, qui est juste ici. Cet objet requête contient un objet hors imbriqué à l'intérieur qui contient des informations sur l'utilisateur connecté en cours. Cette ligne de code vérifie si l' utilisateur connecté en cours correspond à l'ID utilisateur lié à la carte. Si c'est le cas, cela permettra à l'utilisateur de lire à partir de la base de données. S' il n'y a pas de correspondance, la demande échouera et l'utilisateur ne peut pas lire les informations qu'il demande. Ensuite, nous avons quelques règles pour créer ou mettre à jour le tableau. Ils peuvent également être séparés, mais dans notre cas, ils contiendront le même ensemble de règles. Je les ai regroupés. Nous avons déjà dit que cet objet de requête contient les données entrantes. Request a également un objet ressource que nous utilisons ici, et cela contient les données que nous envoyons lors de la création ou de la mise à jour de nos tableaux. accès à ces données nous permettra de fournir une certaine validation pour vérifier que les données sont correctement formatées avant d'enregistrer. Ici, nous vérifions si le titre des planches est une chaîne, nous vérifions si l'arrière-plan est une chaîne, le champ At créé est un horodatage, et nous vérifions également si l'utilisateur que nous avons ajouté à l'objet board est également égal à l'utilisateur connecté. Ensuite, nous autorisons les utilisateurs à supprimer réellement un tableau si la balle a été créée par l'utilisateur connecté en cours. Tout le reste ci-dessous est assez similaire. Nous mettons en place un ensemble similaire de règles pour nos cartes et aussi nos listes pour sécuriser ces deux cartes. Établir nos règles n'est pas trop mal. Une fois que nous comprenons, nous ajustons souvent en comparant ce que nous avons dans notre base de données en utilisant l'objet ressource avec les données qui entrent, et ceci est disponible à partir des objets de requête. Maintenant, si nous publions ceci et aller à notre projet, cliquez sur l'icône d'accueil. Je suis connecté avec un utilisateur et nous pouvons toujours voir les tableaux que nous avons créés. Ouvrons un deuxième navigateur avec un autre utilisateur. Si nous actualisons, nous voyons que la Firebase nous permet toujours d'accéder aux balles créées par chaque utilisateur. Nous pouvons aussi entrer dans chacun d'entre eux. Essayons de vérifier notre liste dans les cartes. Essayons de supprimer des informations, et tout cela fonctionne. Nous pouvons également tester que si nous copions un lien d'un utilisateur connecté, et le collez dans un autre navigateur, nous ne sommes pas autorisés à afficher les informations de la carte. Ceci est maintenant ajouté une sécurité dorsale à notre application, ainsi que quelques vérifications frontales pour garder l'interface utilisateur en ligne. Vous pouvez bien sûr ajouter des règles plus complexes à Firebase, mais ce sont un bon point de départ pour permettre uniquement aux utilisateurs connectés, ainsi qu'aux créateurs de tableaux d'afficher leurs propres données. 44. Le développement: Une fois que nous sommes satisfaits de notre application, il est temps de créer une construction pour la production. Commençons par passer au package.json dans la barre latérale. Ouvre ça. Si nous faisons défiler vers le bas jusqu'à la section de script que nous avons juste ici. Nous avons utilisé jusqu'à présent le script de démarrage pour le développement et il y a aussi un script de construction que nous aurons juste ci-dessous pour construire notre application pour la production. Alors faisons ça à l'intérieur du terminal. Je vais ouvrir un nouvel onglet à l'intérieur du terminal. Une fois que nous sommes là-dessus, nous pouvons exécuter npm, exécuter build, puis déclencher cela. Donnez-nous quelques instants pour aller de l'avant et construire pour la production et je vous verrai dans un moment où tout sera fait. Une fois cela fait, si nous ouvrons maintenant la barre latérale, vous remarquerez à l'intérieur de notre projet que nous avons maintenant un dossier de construction. Cela contient ce dont nous avons besoin pour déployer notre application pour la production. Il supprime tout ce dont nous n'avons pas besoin, comme tout développement, messages d'erreur et dépendances. Nous avons construit notre application en utilisant beaucoup de fichiers JavaScript pour les pages et les composants. À l'intérieur de ce dossier Build, il sera groupé ensemble. Nous n'avons donc pas à faire une demande séparée pour chaque fichier. Il fera également la même chose si nous avons plusieurs fichiers CSS aussi. Nous pouvons le voir si vous ouvrez le fichier statique à l'intérieur ici, nous avons un CSS et aussi un dossier JavaScript, et c'est ici où nos fichiers sont regroupés. À l'intérieur, pour notre obligation JavaScript, par exemple, il y a beaucoup de paquets qui sont divisés et ont des numéros dans les noms de fichiers à des fins d'encaissement. Le nom de fichier que nous avions fait à l'intérieur de celui-ci, qui est celui-ci juste ici, est notre code d'application que nous avons écrit. Si nous ouvrons cela, vous pouvez voir certaines parties de notre application que nous reconnaissons. Ainsi, par exemple, si nous ajoutons ici des états définis, nous avons notre appel d'état défini où nous définissons les étiquettes sélectionnées. Si nous continuons à parcourir notre code, nous en avons un pour ouvrir le modal. Nous verrons donc des références à notre code, mais cela est compressé et formaté pour la production. Dans la barre latérale, nous avons également des fichiers commençant par un nombre, comme ceux-ci juste ici et il s'agit souvent d'un code fournisseur tiers, comme tous les modules de noeud que nous avons inclus et ceux-ci sont mis en cache séparément pour la performance. Ensuite, les noms de fichiers d'exécution qui auront vers le bas. Ce sont du code de pack web pour charger et exécuter notre application. Nous avons toujours notre fichier index.html principal, qui pointe maintenant vers notre fichier JavaScript principal à l'intérieur de la build. Passons à nos scripts. Ceci pointe maintenant vers notre fichier JavaScript, qui est à l'intérieur de notre bundle et c'est le fichier principal que nous avons recherché auparavant. Donc maintenant, nous avons ce dossier de construction à l'intérieur de notre application. Nous sommes maintenant prêts à passer à la prochaine vidéo et à déployer notre application en production. 45. Déployer sur Netlify: Il y a beaucoup d'hébergement et de fournisseurs là-bas. Mais un très populaire et facile à utiliser est Netlify. Ils ont également une option gratuite à utiliser aussi. Nous pouvons rapidement mettre notre site en ligne à l'aide de l'interface de ligne de commande Netlify, qui nous donnera un ensemble de commandes pour pousser notre application à la production. Nous pouvons le faire dans le terminal en utilisant npm. Passons à notre terminal et unicode npm install netlify -cli, puis -g pour l'installer globalement. Si vous voyez une erreur lors de cette opération, vous devrez peut-être ajouter le pseudo mot-clé avant cela pour installer en tant qu'administrateur. Une fois que ces CLI sont installées pour vous, nous pouvons alors exécuter l'une des commandes qui est fournie appelée netlify deploy. Cela s'ouvrira dans le navigateur où nous devons créer un compte si vous n'en avez pas déjà un. Maintenant, nous avons quelques options de ce que nous aimerions faire ensuite. Nous devons créer et configurer un nouveau site en utilisant les touches haut et bas, puis appuyez sur « Entrée ». Je vais entrer par ce nom d'équipe. C' est tout à fait bien. Nous pouvons alors choisir un nom de site unique ou nous pouvons le laisser vide pour obtenir un nom généré aléatoirement, ce que je vais faire. J' ai déjà utilisé l'interface de ligne de commande Netlify quelques fois auparavant. Si vous ne l'avez pas utilisé dans le passé, vous devrez peut-être utiliser le navigateur pour vous connecter ou autoriser l'application. La prochaine chose que nous devons faire est de dire à Netlify où se trouve notre dossier Build dans notre projet. Il s'agit simplement du dossier Build. Ils sont les mêmes. Avant de rendre cela disponible pour le monde entier, Netlify nous donnera un projet d'URL, qui est essentiellement un site de test pour nous permettre de voir si tout fonctionne en premier. Commençons par copier cette URL brouillon. Nous pouvons copier cela, toutes les commandes et cliquer pour prendre dans le navigateur. Ici, nous pouvons vérifier si tout fonctionne bien. Allons nous connecter. Donnez un test à ça. Nous prenons dans nos conseils. Essayons certains d'entre eux. Nous avons aussi notre liste et nos cartes apparaissant. Tout cela semble fonctionner bien. Cependant, si nous cliquons maintenant sur cette icône « Accueil » dans le coin, nous obtenons alors un message d'erreur de page introuvable. C' est parce que lorsque nous cliquons sur ce lien de page d'accueil dans le coin, nous essayons ensuite de lier à une URL qui se termine par/notre identifiant d'utilisateur, puis /boards. Cependant, nous n'avons pas cette route ou cette configuration de lien dans notre application. Tout cela est géré sur l'extrémité frontale à l'aide du routeur. La solution à cela lors de l'utilisation d'une application d'une seule page est de dire au serveur toujours retourner uniquement la page d'accueil, puis nous gérerons tout routage sur l'extrémité frontale. Faire cela est assez simple, si nous revenons à notre éditeur de texte, nous avons simplement besoin d'ajouter un fichier _redirect à notre racine de répertoire de construction. Ouvrez le dossier Build, créez un nouveau fichier ici, qui sera _redirect. Tout ce que nous avons besoin d'ajouter ici est/star /index.html 200, enregistrez ce fichier. Cela indiquera au serveur de toujours renvoyer la page index.html et aussi un code d'état de 200. Maintenant, avec cela en place, si nous descendons à notre terminal, nous pouvons à nouveau lancer netlify deploy, envoyer ceci. Il nous demandera également le chemin de déploiement une fois de plus, qui est simplement construit. Celui-ci construit maintenant notre application en nous donnant une URL de test en direct. Nous pouvons cliquer dessus et essayer de vous connecter. C'est très bien. Cliquez sur l'icône « Accueil ». Une fois que nous sommes heureux que tout fonctionne comme prévu, nous pouvons maintenant pousser cela à la production. Nous pouvons le faire avec une commande de plus vers le bas dans un terminal. Il s'agit de netlify deploy, puis de -prod, qui est abrégé pour la production. En outre, nous devons passer dans le chemin de construction. Cela va maintenant nous donner une URL en direct, sur laquelle nous pouvons cliquer, ouvrir dans le navigateur. Maintenant, il nous reste un lien en direct pour notre projet sur le web, que vous pouvez maintenant partager avec d'autres personnes. 46. Merci: Félicitations, vous avez atteint la fin de ce cours. Merci de vous inscrire et j'espère que vous avez eu du plaisir à apprendre tout ce qu' est React et comment nous pouvons l'utiliser pour construire des applications en JavaScript. Lors de la construction de notre application, nous avons cliqué sur beaucoup de terrain, à partir du début, où nous avons examiné les bases telles que le réglage de notre application, les composants, cycles de vie, les méthodes et les invites, nous avons cliqué sur beaucoup de terrain,à partir du début, où nous avons examiné les bases telles que le réglage de notre application, les composants,lescycles de vie, les méthodes et les invites, avec l'état et la validation rapide. Nous avons passé à l'utilisation de formulaires et d'entrées, et comment React utilise à la fois des composants contrôlés et non contrôlés pour différentes situations. Nos utilisateurs ont également besoin d'un moyen de naviguer dans nos pages. Nous sommes ensuite passés à résoudre ce problème à l'aide d'un routage frontal. Avec d'autres solutions fournies par le routeur, telles que les invites et l'état du routeur, méthodes push et les paramètres d'URL. Cependant, React ne couvre que l'extrémité frontale de notre projet, donc nous avons souvent besoin d'un service back-end, aussi. Au moins, nous avons branché Firebase pour nous donner une base de données en temps réel pour démarrer toutes les cartes, listes et cartes. En plus d'apprendre tout sur la création, la lecture, la mise à jour et la suppression de données, ainsi que diverses méthodes Firebase et services d'authentification utilisateur. Enfin, nous avons construit notre application pour la production et déployé pour le reste du monde à voir. J' espère que vous avez apprécié ce cours, et j'ai hâte de vous revoir dans un futur cours.