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 accessoir