Le camp de base complet React 2023 (mis à jour)

1. Introduction: Bienvenue dans le bootcamp de réaction complet. Bonjour, je m'appelle Andrew et je suis développeur de React. Bonjour, mon nom est notre Ash et je peux UI UX designer. Avez-vous déjà voulu créer une application similaire à Twitter ou Facebook ? Préférez-vous la pratique plutôt que la théorie ? Si c'est le cas, vous êtes au bon endroit ensemble, nous allons construire trois projets distincts de complexité différente à partir de zéro, un jeu tic-tac-toe et une application de recherche de films, et enfin, un bavardage. Ce cours s'adresse aux personnes désireuses de développer des applications web. Nous technologies qui deviennent de plus en plus populaires de nos jours. abord, nous allons discuter de toutes les bases que vous devez connaître avant de sauter dans la réaction. Ici, nous allons parler de l'absence de GS, bonnes API de rendu côté client et côté serveur et outils essentiels pour vous faire sentir à l'aise à n'importe quel stade des approches de développement. Juste après cela, nous avons une section JavaScript dédiée, mais nous avons découvert les dernières fonctionnalités du langage. Ensuite, nous passons légèrement à réagir avec la petite partie de la théorie. À ce stade, vous apprendrez à connaître une fois Riak fait et comment il fonctionne. De là, nous commencerons avec notre premier projet, ce jeu tic-tac-toe. Il a une interface utilisateur moderne avec des animations cool et des fonctionnalités transparentes dans ce projet, apprendre à connaître d'abord réagir. Vous apprendrez à créer des composants, des styles dynamiques dans les interfaces utilisateur. Mais nous allons parler de la gestion de l'état et des événements du cycle de vie des composants à l'aide de Hooke. À la fin de ce projet, vous serez en mesure de créer une application web simple qui montre votre forte réaction de base, et vous ferez l'expérience du flux de développement en général. Le deuxième projet s'appelle box-office. Il agit comme un moteur de recherche pour les films TV et les émissions. Vous pouvez obtenir des informations sur n'importe quel film ou AG. Et en plus de cela, vous pouvez les ajouter aux favoris pour les examiner à l'avenir, nous ces projets, vous vous déplacez vers une application React plus complexe ou vous travaillez avec API externes et gérer des scénarios non-primitifs en utilisant des crochets 3i costume. De plus, vous apprendrez à connaître CSS et JS comme alternative pour le style et l'application, nous allons explorer le concept de routes dynamiques et de récupération de données à distance. Vous comprendrez également comment optimiser et analyser les composants React à l'aide d'outils de réaction intégrés. À la fin de ces projets, nous transformerons même notre application en une application web progressive qui fonctionne hors ligne. Après la fin du box-office, vous serez en mesure de créer une application React typique qui nécessite des connaissances plus complètes et avancées en matière de réaction. Notre projet final sera un chat avec les fonctionnalités les plus populaires requises par n'importe quelle application de chat. Ceux-ci comprennent les connexions de médias sociaux, gestion de compte, les autorisations basées sur les rôles , les données en temps réel, et beaucoup d'autres fonctionnalités intéressantes dans ce projet, vous apprendrez à connaître Firebase en premier lieu. Ici, vous maîtriserez l'authentification des utilisateurs et la gestion globale de l'état. À ce stade, réagir crochets va être votre arme principale pour développer une application React prête à la production gérer les styles vous-même n'est pas toujours souhaitable. C' est pourquoi nous allons utiliser ici une bibliothèque de composants d'interface utilisateur pour utiliser un système de conception préconstruit. Enfin, nous développerons notre propre backend en utilisant Cloud Functions, et nous ajouterons la fonctionnalité de notifications en temps réel à notre application de chat. Attends, tu n'as pas fini. Vous êtes prêt à vous aider à n'importe quelle étape du cours et à répondre à vos questions le plus rapidement possible. Êtes-vous prêt à explorer, réagissez ensemble. On se voit en classe. 2. Exigences: Salut, je m'appelle Andrew. Je serai votre instructeur. Jetez Dick Koers. Permettez-moi de vous parler des exigences pour que cette cour commence à travailler avec réagir. Tout d'abord, toutes les connaissances sur HTML et CSS sont essentielles. Je ne serai pas plus d'attention à expliquer ce qu'est la balise dif. La même chose vaut pour CSS. Je m'attends à ce que vous connaissiez les classes et les sélecteurs, mais ne ferez aucun arrêt sur l'explication bases HTML et CSS. Mais vous pouvez toujours poser des questions à la Chambre des communes. Il y a certainement quelques moments clés hors HTML et CSS, et cela sera expliqué. Mais la plupart du temps, nous allons travailler avec JavaScript. Je ne m'attends pas à ce que vous soyez un bon JavaScript ou que vous ayez une expérience décente. Je voulais savoir sur la programmation en général, vous devez comprendre des choses de base comme ce qui est disponible ou une guerre est un quatre look. Tu auras, tu le sais aujourd'hui. Syntaxe JavaScript. Pendant le cours, il est tout à fait convivial cœur à comprendre. Les parties seront expliquées, alors ne vous inquiétez pas à ce sujet. Il y a aussi une section spéciale dédiée Onley à JavaScript. Il couvre les aspects les plus importants de la langue pour vous assurer que vous en savez assez pour commencer par réagir rush, et j'essaie de rendre tout aussi lisse que possible. Mais néanmoins, je voulais vous poser autant de questions que possible. Et ne soyez pas timide poser des questions stupides ont toujours été là pour vous aider. Résumons rapidement. Vous devez être conscient de HTML CSS et quelques connaissances générales de programmation. C' est ça. se voit dans la vidéo suivante. 3. Mises à jour et problèmes: Hé, dans cette vidéo, je voudrais faire référence à un fichier qui vous parlera mises à jour et des changements que les humains font pendant le cours. Dans le web, tout change constamment. Et pour suivre le contenu à jour, nous avons créé ce fichier. S' il vous plaît trouver les mises à jour et les problèmes fichier pdf point dans la section projets et ressources à l'intérieur, vous verrez deux chapitres principaux, mises à jour importantes et les problèmes communs. Des mises à jour importantes affectent tous ceux qui suivent le cours. Veuillez lire ce chapitre pour éviter d'avoir des incohérences pendant les vidéos. Problèmes communs fait référence aux erreurs potentielles que vous pourriez rencontrer et à leurs solutions. S' il vous plaît référencer ce fichier en premier lieu lorsque vous avez un problème. Dans le pire des cas, veuillez lire le chapitre 3. Nous voulons toujours vous garder avec des contenus à jour. Seulement. Bonne chance pour les projets. 4. Introduction à la première section: Hey, bienvenue dans le cours dans la section Couverture mobile Toutes les choses qu'il faut savoir avant de commencer avec le développement de réaction. Cela inclut des outils, un peu de théorie et quelques autres choses. J' espère que vous les apprécierez. On se verra là-bas. 5. Installer Git + Git Bash (Windows): Hé, dans cette vidéo, nous allons installer et obtenir ce qui est bon et pourquoi en avons-nous besoin ? Nous allons couvrir tout cela dans la vidéo à venir. Cette vidéo porte sur l'installation. Allons-y. Comme toujours, nous ouvrons d'abord Google, puis nous chercherons et obtiendrons cela nous amènera sur le site officiel. Dans un nouvel onglet que je vais ouvrir ne charge pas. Et dans l'onglet actuel, je vais chercher Git installé sur place. Cela nous amènera à au moins one.com. Pourquoi en avons-nous besoin ? Si vous constatez des divergences dans l' installation de Git ou si vous êtes perdu au sujet de l'installation de Git. Il s'agit d'un tutoriel d'insolation le plus récent et à jour. Je le recommande. Donc, si vous êtes sous macOS, Linux, Windows, cela n'a pas d'importance. Il suffit de naviguer ici et c'est très simple et simple. Bon, revenons maintenant aux téléchargements. Cette vidéo est destinée aux utilisateurs de Windows, mais si vous êtes de Linux ou de macOS, elle est tout à fait parfaite. Donc, si vous êtes sous Linux, cliquez ici, et en fonction de votre distribution, il suffit de sélectionner la commande. C'est très facile à faire, d'accord ? Si vous venez de MacOS World, vous avez quelques options. Vous pouvez installer adieu à l'aide d'un gestionnaire de paquets comme Homebrew, ou vous pouvez utiliser directement un programme d'installation. Ce tutoriel ici, il recommande d'utiliser un programme d'installation, ce qui est le moyen le plus simple sur macOS, d'accord ? Puisque nous sommes sous Windows, nous allons cliquer sur Windows et nous obtiendrons le programme d'installation. Encore une fois, si vous venez d'un autre système d'exploitation, je vous recommande de parcourir rapidement cette vidéo car nous allons aborder quelques questions importantes. Très bien, nous avons ouvert l'installateur et nous avons cliqué sur Suivant. De quoi avons-nous besoin ici ? Icônes supplémentaires. C'est à vous de décider, l'intégration de l'Explorateur Windows. Il s'agit donc de l'option Windows uniquement. Et nous voulions sélectionner Git Bash ici, et nous voulions décocher une bonne interface graphique. Personne n'utilise bien pour y aller. C'est un outil visuel pour représenter un bon, d'accord ? Et Git Bash est une version courte du terminal Unix appelée Bash. Cette version courte est donc disponible sur Windows sous Git Bash Day. Et je pense que c'est très utile et pratique. Sur Windows, nous avons cmd et PowerShell, et nous allons installer Git Bash et l'utiliser la place de CMD et PowerShell. Ok, alors nous voulions sélectionner un bon L de c. Donc c'est juste au cas où nous aurions fichiers vraiment volumineux et notre bon projet, cette option nous permettra de mettre ces fichiers. Donc, dans un bon projet, nous voulions garder les associations. Je n'ai pas besoin de mises à jour quotidiennes profil Git Bash sur Windows Terminal. Je ne suis donc pas sûr de celui-ci, mais je suppose que c'est lié au nouveau Terminal Windows récemment publié. D'accord, donc je n'en veux pas non plus. Ensuite, cette étape, choisissons un éditeur pour lequel vous vous sentez à l'aise. Je sais donc que vous ne le savez pas encore, mais dans le bon sens, il y a une possibilité qu'il y ait un conflit entre plusieurs fichiers. Et pour résoudre ce conflit, vous devrez parcourir ces fichiers manuellement et les modifier. Ainsi, lorsque ce conflit se produit, get ouvre un éditeur que vous sélectionnez ici par défaut. Ok, alors choisissez quelque chose que vous savez utiliser, par exemple Visual Studio Code. Très bien, le prochain ici. Qu'est-ce que nous avons ici, juste, le nom de la branche initiale dans votre référentiel ? C'est délicat. Nous allons sélectionner, nous allons choisir, laisser, décider. Mais de quoi il s'agit. Je comprends, je sais que vous n'êtes pas encore au courant, mais il y a ce concept de branches en bon état. Il y a environ un an, la bonne communauté et la communauté GitHub ont décidé de changer le nom de branche par défaut deux, principal juste avant qu'il ne soit appelé maître. Maintenant, il est officiellement appelé main, mais il y a encore beaucoup de projets qui continuent d'utiliser master. Donc ce que je recommande de faire, c'est simplement choisir, sélectionner, laisser, prendre, décider. Ensuite, nous allons cliquer sur Next. Et ici, nous avons ajusté votre environnement de chemin afin que nous puissions sélectionner la deuxième option recommandée. Il nous permettra d'utiliser Git à partir de n'importe quel shell de terminal, que ce soit CMD, PowerShell ou Bash, ou à partir de tout autre logiciel et shell que nous allons installer et utiliser. C'est pourquoi la deuxième option est ce que nous voulons. À cette étape. Nous ne voulons rien changer, il suffit de garder une utilisation par défaut groupée OpenSSH en obtiendra quatre. Les connexions peuvent utiliser des tunnels SSH. D'accord. C'est pourquoi il est livré avec un exécutable SSH, qui provient d'OpenSSH. Ok, ensuite, ici, back-end de transport https. Continuez à utiliser OpenSSL. Nous ne voulons pas le changer également. Ensuite, voici les terminaisons de lignes. Eh bien, c'est un outil multiplateforme. Cependant, certains éléments spécifiques doivent être gérés ou contrôlés d' une manière ou d'une autre pour atteindre cette disponibilité multiplateforme. Et l'une de ces choses est la fin des lignes. Le fait est que sur Windows et sur des systèmes semblables à UNIX, les terminaisons de ligne ont des codages différents, d'accord ? Et cela pourrait créer de gros problèmes pour obtenir des projets. Cela nous permettra donc de maintenir notre projet multiplateforme sans aucun problème. C'est une chose très mineure, mais c'est très important car si vous sélectionnez la troisième option et si vous allez faire quelques modifications pour obtenir projet sous Windows, puis vous ouvrez ce projet sur un différents systèmes d'exploitation, vous rencontrerez beaucoup de problèmes. Pourquoi nous n'en voulons pas. Pour Windows, nous sélectionnons cette option. Ensuite, configurez l'émulateur de terminal pour l'utiliser avec Git Bash. Bon, donc Git Bash va être à nouveau notre nouveau shell que nous utiliserons comme alternative à CMD et PowerShell. minty est cette fenêtre de terminal, ok, donc si j'ouvre CMD, j'ai cette fenêtre de fenêtres par défaut, essentiellement la droite, comme il est dit, la deuxième option ici, la fenêtre de console par défaut. Donc mentoré est que ce logiciel, essentiellement qui exécute le shell trans terminal, coquille à l'intérieur de celui-ci. Ce sera donc cette fenêtre que nous pourrons configurer, modifier sa couleur et son codage et d'autres choses peuvent être des liaisons clés, tout cela. Donc c'est juste que, vous savez, fenêtres qui exécutent des coques terminales. D'accord ? Nous voulons donc utiliser un mentoré, puis choisir le comportement par défaut d'un bon sondage. Vous n'êtes pas encore au courant, mais choisissons par défaut. C'est l'option préférée, presque toujours. Et je dirais toujours. Ensuite, choisissez un assistant d'informations d'identification. Ici, nous voulons sélectionner le noyau de Git Credential Manager. C'est spécifique à Windows ici, mais utilisez toujours cette option. Ce que ça fait, il y aura des moments, je veux dire, toujours comme ça. Nous voulions accueillir notre bon projet quelque part. Nous avons hébergé sur GitHub. Et pour nous autoriser à utiliser GitHub, nous devrons entrer nos informations d'identification pour GitHub, notre nom d'utilisateur et notre mot de passe. Ainsi, pour ne pas y répondre chaque fois que ces informations d'identification doivent être stockées en toute sécurité quelque part dans un stockage en cache. Sous Windows, ce stockage en cache s' appelle Git Credential Manager core. C'est pourquoi nous ne devions pas entrer nos informations d'identification à chaque fois. Nous aimerions faire passer nos modifications à GitHub. Ok, ensuite, à cette étape, nous voulions activer la mise en cache du système, les nettoyages symboliques. Gardez-le tel quel. Nous arrivons à la prochaine étape et nous n'avons pas besoin de fonctionnalités expérimentales. Il suffit donc de cliquer sur Installer. Suppression de la version précédente. Oui, je veux dire, pour moi parce que je l'ai déjà installé. Attendons une seconde jusqu'à ce qu'il soit installé et voyons ce que nous avons. Bon, bien. Terminer l'assistant de bonne configuration. Je ne veux pas que les notes de publication soient terminées. Maintenant, le bon est installé. Comment pouvons-nous vérifier cela ? Allons voir CMD. Et dans cmd, nous voulons simplement taper git space dash, version dash. Et si vous voyez la version installée, félicitons , get est maintenant installé. Désormais, cela concerne uniquement les utilisateurs Windows qui ont installé qui ont sélectionné Git Bash pendant l'installation. Comment pouvons-nous vérifier le maintien de Bash ? Eh bien, nous pouvons exécuter git Bash directement à partir d'un autre shell, voyant Cmd par exemple. Donc, si je tape Git Bash avec un tiret à l'intérieur, je verrai que Git Bash n'est pas reconnu. Eh bien, c'est pour être honnête, attendu. Et pour y remédier, nous devons refaire un petit changement dans notre variable de chemin. Donc, ce que nous devons faire, c'est d'aller lancer le Panel et de rechercher les types III et V. Ensuite, nous allons modifier les variables d'environnement du système et les légumes vitaminés. Et sous le système, les bulles chercheront le chemin. Double-cliquez dessus. Et ici à la fin de la liste, vous verrez C Program Files, good, CMD ou n'importe quel chemin d'installation que vous avez choisi lors de l'installation. Ok, donc si nous ouvrons ce chemin, allons dans les dossiers. Et allons-y. exécutables que nous avons ici sont bons, une bonne interface graphique, tout sauf Git Bash. Cependant, si nous allons dans le dossier ici, nous avons l'exécutable Git Bash. Très bien ? Par conséquent, pour utiliser cet exécutable depuis le terminal, nous devons ajouter le chemin d'accès au dossier à la variable chemin. D'accord ? Nous revenons donc ici à cette liste. Nous cliquons sur Nouveau et nous ajoutons C Program Files. Bien. Donc on a frappé OK, OK, OK. Maintenant, je vais redémarrer le terminal. Et maintenant, si je tape Git Bash, boom, je suis à l'intérieur de la coquille Git Bash et il utilise de la menthe. Donc si je clique sur les options ici, vous verrez ce logo de menthe. Il peut donc sembler très similaire, mais il utilise en fait la console par défaut de Windows. Mais cela fonctionne à l'intérieur de Minty Terminal Emulator. Très bien, si vous le souhaitez, vous pouvez configurer différentes options ici, Sélection des clés, Terminal Windows. Ce sont donc toutes les options et juste au cas où, et c'est Git Bash. Maintenant, si nous voulons taper des commandes Linux très basiques ici, nous pouvons le faire, par exemple ls, pour répertorier tous les fichiers de ce dossier. Très bien, et c'est notre entropie des utilisateurs C. C'est le mien. Ce sera votre nom d'utilisateur ici. Si nous voulions aller sur un autre disque, nous allons taper cd pour changer de répertoire, puis le nom du disque. Super, il s'agit donc de Git Bash. Vous pouvez également l'exécuter depuis la fenêtre Exécuter dans le Panneau de démarrage ou en appuyant sur Windows plus r et en tapant Git Bash. Et vous êtes à l'intérieur. C'est essentiellement, c'est tout ce dont nous avons besoin pour configurer Git, d'accord, peut-être qu'une autre option est cette commande Git config, non ? Donc, si nous allons à la lésion au total, peu importe quand pour Windows, Linux n'a pas d'importance. Donc, ici, nous devons configurer, utiliser notre nom et notre adresse e-mail, n'est-ce pas ? Il suffit donc de copier cette commande ici et de la coller dans le terminal. Et entrez votre nom ici. Il peut s'agir de votre vrai nom, ou de votre surnom, quoi que vous fassiez. Appuyez donc sur Entrée pour votre nom d'utilisateur, puis sur la même chose pour l'e-mail. Alors, qu'est-ce que c'est ? Ceux-ci seront visibles dans les messages de validation. Dans la bonne histoire, nous couvrirons tout cela, mais c'est quelque chose que d'autres utilisateurs et vous verrez dans l'historique de votre projet, choisissez quelque chose de réel, c'est-à-dire qu' il est installé pour Utilisateur Windows, vous obtenez des bashes installés. Dans la prochaine vidéo, nous en parlerons en détail et comment cela nous facilitera la vie. voit là-bas. 6. Modifiez l'apparence de Git Bash (uniquement Windows seulement): Hey, tout d'abord, je tiens à mentionner que cette vidéo est réservée aux utilisateurs de Windows. Dans cette vidéo, j'aimerais aborder l' apparence de Git Bash. Laissez-moi vous montrer ce que je veux dire. Si je lance Git Bash. Je n'aime pas ce que ça ressemble. Je veux supprimer ce qui signifie W 64, je veux supprimer cette entrée B à, dans le nom de ma machine. Je n'ai pas besoin de tout ça. C'est totalement facultatif, mais cela rendra votre expérience développeur un peu plus agréable. Changeons donc cela. Ce que nous devons faire, nous devons d'abord naviguer pour obtenir le dossier d'installation. Donc, pour moi, ce sera C, Program Files, bien. Dans ce dossier, nous voulons ETC. Et le profil D ici cherchera un bon point d'invite SH, et nous l'ouvrons avec n'importe quel éditeur de texte. Je vais l'ouvrir avec Sublime Text. Et vous verrez cela. Je sais ce qui va être complètement déroutant et nous ne savons pas ce qui se passe ici, mais ne paniquez pas. Nous voulons seulement les supprimer ou peut-être les remplacer par autre chose. Donc tout d'abord, pour supprimer ce titre Ming W6 car nous chercherons quelque chose avec le titre, apparemment. Ce préfixe de titre de signe de dollar est donc exactement pour Ming W 64. Nous venons donc de le retirer d'ici. Et nous supprimons également les deux-points, mais ne supprimons pas ce point-virgule d'ici, car cela fait partie de cette couleur représentée en gros. Alors, laissez-moi mettre mon surnom avec une flèche et laissez-moi enregistrer le fichier. Maintenant, permettez-moi de redémarrer Git Bash. Encore une fois, je vais à la fenêtre Exécuter Git Bash. Et maintenant boum, je vois mon surnom et, et je Fais plutôt cool maintenant, je veux supprimer tout ce que j'ai mis en évidence. Je cherche donc le système EMS. Je viens de supprimer complètement cette ligne. Ensuite, je supprime l'utilisateur au nom d'hôte. Et ce que j'aimerais faire, j'aimerais souligner le chemin actuel, qui est affiché ici. Donc, si je navigue pour voir, je l'ai comme ça, mais je voulais le mettre entre parenthèses. Donc, la barre oblique inverse w est le répertoire de travail actuel. Je veux donc le mettre dans des supports comme ça. Très bien, et une classe, ce que je voulais faire, je voulais peut-être changer l'invite du signe du dollar à une flèche. Je cherche donc cette ligne. Très bien, l'invite sera toujours une flèche. Je le modifie, j'ai enregistré le fichier, et maintenant voyons le résultat. Encore une fois, je redémarre Git Bash. Et maintenant, c'est notre dernière apparition. Si nous naviguons vers le disque D, nous l'avons comme ça. C'est plutôt cool. Encore une fois, c'est totalement facultatif et c'est ma préférence personnelle car j'aime la simplicité et j'aime son apparence. Et pour moi, de mon point de vue, c'est beaucoup mieux qu'avant. C'est à vous de décider que vous en ayez besoin ou non. Mais c'est tout. C'est ce que je voulais aborder. On se voit dans le prochain. 7. Installez Git (macOS): Dans cette vidéo, je vais vous montrer comment installer Git sur Mac OS. Tout d'abord, accédez à Google et saisissez git. Accédez à la première URL. Il s'agit du site officiel. Cliquez sur Téléchargements, puis sélectionnez macOS. Vous verrez comment installer Git de quelques façons. Nous allons choisir celui avec Homebrew. Homebrew est gestionnaire de paquets. Il nous permet de télécharger des logiciels distribués à l'aide d'une seule commande de terminal. Installez Homebrew, copiez la commande d'installation à partir du site Web, puis accédez au Launchpad et lancez le terminal, collez la commande et attendez son installation. Il peut également vous demander de saisir votre mot de passe. Maintenant que nous avons Homebrew, nous pouvons facilement installer Git, revenir en arrière pour obtenir le site Web et copier Git installé par homebrew, ouvrir le terminal et coller la commande. Il faudra quelques secondes avant que Homebrew s'installe dans votre système. S'il est dit que get est déjà installé, alors tout va bien. C'est probablement à cause de Xcode. Et c'est tout. Au revoir. 8. Installer VSCode (Windows): Bonjour, Dans cette vidéo, nous allons installer VS Code et éditeur que nous utiliserons tout au long du cours. Tout d'abord, pourquoi VS Code ou Visual Studio code ? Je pense personnellement que c'est l'un des meilleurs éditeurs et IDE disponibles pour les projets JavaScript. Si vous êtes à l'aise avec n'importe quel autre éditeur, par exemple Atom for Development, si vous avez une expérience préalable, hésitez pas à l'utiliser. Mais dans l'entraînement, je conseille à ses missiles pseudocode en raison de son système plug-in et est tout simplement confortable. Bon, alors installons-le. Ce que nous devons faire, c'est d'aller sur Google comme toujours et de taper VS Code. Et cela nous amène sur le site officiel. Je suggère donc d'ouvrir la page Docs et de ne pas regarder la page. Sur la page de téléchargement, nous avons donc installation pour trois systèmes d'exploitation différents, Windows, Linux et macOS. Donc, pour Windows, c'est assez simple, n'est-ce pas ? Vous cliquez sur le programme d'installation et il démarre le téléchargement, ok, pour Linux et macOS, je vous conseille d'aller la page de documentation et ensuite, en fonction de votre système d'exploitation, passer à la section appropriée. Pour Linux, c'est aussi très simple. Selon votre distribution Linux, il existe des chiens que vous pouvez lire et voir comment installer NodeJS. Je veux dire, comment exactement allez-vous faire cela parce que les commandes seront différentes en fonction de votre distribution. Bon, alors traitez juste les chiens. Croyez-moi, c'est assez simple et fondamentalement la même chose pour Mac OS. C'est un moyen facile. Vous obtenez le programme d'installation et il vous suffit de le faire glisser dans votre Launchpad. C'est ça. Et VS Code est considéré comme installé. Bon, donc pour Windows, nous avons eu le programme d'installation. Nous allons le lancer. Cet utilisateur avait l'intention de courir pour nous mettre au sol et a dit : Oh payez. Donc dans Donc oui, je veux continuer à courir. D'accord. Je le ferme. Vous ne verrez pas cela. D'accord. Donc, je suis ici. Je suis allé accepter. Vous pouvez modifier le chemin d'accès si vous le souhaitez comme installation par défaut. Il est également écrit sur les chiens. Vous pouvez lire à ce sujet ici. Alors, où est-il ? D'accord, c'est ici. Maintenant, nous cliquons sur Suivant. Prochaine. Maintenant, nous devons sélectionner deux chemins qui sont sélectionnés par défaut, mais assurez-vous qu'il existe. Enregistrez le code en tant qu'additif pour les types de fichiers de soutien. Oui, il est conseillé de le sélectionner. C'est facultatif et si vous devez créer un élément de bureau, OK, cliquez sur Installer. Après cela, cela prendra du temps et du boom, vous verrez du code VS sur votre bureau. Après cela, vous le lancez et vous vous retrouvez dans une fenêtre comme celle-ci, le thème sera différent, mais cela n'a pas d'importance. Vscode est maintenant installé. Comment configurer avec code SQL et comment installer des plugins. Tout sera abordé dans la prochaine vidéo. voit là-bas. 9. Installez le code VS (macOS): Bonjour, Dans cette vidéo, je vais vous montrer comment installer le code VS sur macOS, aller à la recherche Google et taper fiasco, puis cliquez sur le bouton Télécharger et cela vous amènera à la page de téléchargement. Cliquez sur le programme d'installation de macOS. Il commencera automatiquement le téléchargement pour vous, attendez que ce soit terminé. Et cela a ouvert le fichier à l'intérieur, vous verrez le code VS. Je peux raccourcir, simplement glisser-déposer l'icône sur les applications juste après cela, VS Code est considéré comme installé et vous pouvez y accéder en allant au déjeuner, puis rechercher VS Code, ouvrir et vérifiez que tout va bien. Et c'est tout. Voyez dans le prochain. 10. Configuration et extensions VSCode: Dans cette vidéo, j'aimerais parler du code VS, façon dont nous configurons VS Code et de ce que nous devons faire pour nous sentir à l'aise pendant le développement. Allons-y. La première chose que j'aimerais présenter est la barre de recherche de code VS, car il est incroyable d'ouvrir la barre de recherche. J'appuie sur Control P. et ça m'amène ici. Je peux taper tout ce que je veux ici, mais cela ne donnera pas de résultats correspondants car il essaie de rechercher des souillures dans le projet actuel. Mais comme nous n'avons aucun projet au moment de mon ouverture, il ne donne pas de résultats correspondants. Ce que je veux taper à la place, c'est la flèche droite. En tapant la flèche droite au tout début. Cela signifie que je veux utiliser des commandes intégrées à VS Code ou des options de code VS peut-être pour naviguer sombrement. Par exemple, si je tape flèche et que je paramétre JSON, cela me donne les préférences ouvertes des paramètres chasten. Laissez-moi cliquer sur celui-là et cela m' amène au fichier JSON de paramètres. Ainsi, le fichier JSON de paramètres est essentiellement comme fichier de configuration utilisateur de code. Ici, il suffit de taper différentes commandes pour configurer des extensions, configurer certains outils ou autres. La première chose que je voulais mettre ici, laissez-moi ouvrir le navigateur. Et ici, j'ai ce fichier, cette configuration de code. Vous aurez cette URL et peut-être déjà comment elle est partagée. Il suffit donc de l'ouvrir. Et à partir d'ici, je prendrai la fenêtre de confiance de la sécurité de l'EI. Et je vais juste le placer ici comme ça. Et ce qu'il fait, il désactive la fenêtre de sécurité, mais ne panique pas. Qu'est-ce que la fenêtre de sécurité ? Eh bien, le code VS vous demandera souvent, faites-vous confiance à cet environnement ou faites-vous confiance à ce dossier ? Et croyez-moi, c'est très ennuyeux de désactiver cette fenêtre. Il suffit de copier cette option et vous ne verrez jamais cette fenêtre. Une fois encore. Si vous êtes curieux, vous pouvez toujours commenter cette ligne de code et la voir vous-même. Mais je vais le garder tel quel. Maintenant, une seconde. Je vais laisser la deuxième option et je prendrai la dernière option à partir d'ici, qui concerne le prédicateur. Qu'est-ce que le prédicateur ? Pre-Clear est un outil que nous aborderons en détail dans la prochaine vidéo. Preacher va lui former notre code lorsque nous enregistrerons des fichiers, cette ligne garantit que lorsque nous cliquons sur Enregistrer, notre code sera formaté. À cette étape, VS Code est déjà configuré et vous pouvez commencer immédiatement les essais de développement. Mais une chose que je veux mentionner est le terminal intégré VSCode. Donc, si je clique sur le terminal et que je clique sur un nouveau terminal, il m'ouvre PowerShell car je suis sous Windows. Si vous êtes sous Linux ou macOS, vous verrez Bash pour les utilisateurs de Linux et de macOS, c'est très bien. Mais pour les utilisateurs Windows, depuis que nous avons installé Git Bash, utilisons Git Bash et non PowerShell ou Cmd car par défaut VS Code et Windows utilisent PowerShell. Alors, que doit-on faire ? Nous devons revenir à ce fichier et copier cette configuration et me laisser la placer ici à la fin. Ce qu'il va faire, il demandera à VSCode d'utiliser Git Bash comme terminal intégré. Ce n'est pas différent comme si vous l' ouvriez en dehors de VSCode. Il est pratique d'utiliser tout au même endroit, en particulier un outil comme un terminal. J'ai copié toutes ces options si path est différent pour vous, remplacez-le simplement en suivant le même schéma. Et fermons-le, puis ouvrons-le à nouveau. Et vérifions que maintenant nous utilisons Git Bash. Cela dit, les utilisateurs de Windows en flouent, nous utilisons Git Bash. Maintenant, la dernière chose dont je veux parler lors de cette vidéo, et je dirais que la plus importante est les extensions VS Code. Très bien ? Qu'est-ce que les extensions VS Code ? Ce sont tous des outils optionnels qui étendent VS Code avec de très bonnes fonctionnalités. Pour accéder à Extensions, nous avons cliqué sur cette icône dans le panneau de gauche. Et ici, j'ai déjà 33 extensions installées. C'est beaucoup de choses que je sais, mais ne paniquez pas. Nous n'avons pas besoin de tous les installer. Ce que je vais faire maintenant, je vais rapidement passer en revue les extensions qui, selon moi , sont nécessaires pour notre cours. Et c'est à vous de décider si vous voulez les installer ou non. Pour vendre et étendre dans la barre de recherche, il suffit de taper le nom de l'extension. Par exemple, une meilleure syntaxe C Plus Plus. Vous cliquez sur l'extension, par exemple, celle-ci et cliquez sur Installer. Après cela, il sera installé. Et cela peut vous demander de redémarrer le code VS, mais c'est très rare. Au fait, je n'ai pas besoin de cette extension, donc je vais simplement la désinstaller. Je retourne donc aux extensions installées et cherchons rapidement. La première extension que je veux mentionner est celle de l'étiquette de nom. Ce qu'il va faire. Il suffit de renommer HTML, d'ouverture et de fermeture de balise au fur et à mesure que nous saisissons HTML. C'est très utile. Je recommande celui-ci, support de couleur poire. Je pense que c'est l'une des extensions qu'il devrait installer car elle met simplement surbrillance le support d'ouverture et de fermeture et le décodage. Cela est utile car cela rend notre code plus lisible et plus distinguable. Je recommande vivement cette extension. Ensuite, nous avons des extraits de code ES 7 React redux GraphQL React Native. Il s'agit d'une extension importante. Nous allons l'utiliser beaucoup lorsque nous allons écrire du code React. Alors installez-le. Je vais mentionner cette prolongation à l'avenir une fois de plus. Ensuite, nous avons les peluches ES. Nous allons couvrir les peluches ES plus en détail dans la vidéo à venir. Mais assurez-vous que cette extension est installée à l'avance. Ensuite, nous avons mis en évidence l'étiquette correspondante. Comme il est dit, il mettra en surbrillance la balise HTML correspondante, comme vous le voyez là-dessus. Aperçu. C'est plutôt cool. Je pense que c'est, c'est utile. Nous avons maintenant IntelliSense pour les noms de classes CSS. Eh bien, oui, c'est utile. Ce qu'il va faire, il ajoutera l'auto-complétion pour les noms de classes CSS définis dans notre projet , à vous de décider. Ensuite, nous avons Material Icone Theme. Il suffit d'ajouter cet ensemble d'icônes aux fichiers que nous verrons dans l' Explorateur de fichiers ici sur le panneau de gauche. Je l'utilise et je le recommande à tout le monde. Intelligence NPM. Celui-ci est important. Ce qu'il fera, il ajoutera une complétion externe pour les paquets et bibliothèques que nous allons importer dans du code, fortement recommandé. Ensuite, nous avons l'intelligence du chemin. Fondamentalement la même chose, mais pour les fichiers locaux. Donc, auto-complétion pour l'importation de fichiers locaux. Ensuite, nous avons un prédicateur, prédicateurs, un outil qui formatera nos fichiers. Encore une fois, nous allons couvrir cela en détail, alors assurez-vous qu'il est installé. Et la dernière extension va être basculée entre guillemets. Basculer le devis est très simple. Il suffit de basculer les guillemets. Par exemple, si vous lisez ici, nous devons appuyer sur cette touche en fonction votre système d'exploitation pour basculer entre guillemets simples et doubles, de doubles en rétro-ticks. Laissez-moi vous le démontrer. Si vous appuyez simplement sur ces boutons n'importe où, vous verrez ce message indiquant que l'exécution de la commande contributed a échoué. Le fait est que vous ne devez utiliser cette commande qu'entre guillemets. Je dois placer mon curseur ici dans un texte avec guillemets, puis utiliser la combinaison pour tripler les guillemets. Je l'utilise beaucoup personnellement et je le recommande vivement à tout le monde. Je pense que c'est tout. J'ai couvert tout ce que je voulais. J'ai mentionné toutes les extensions que je pense importantes. Je vous ai tout donné sur les paramètres, JSON, vous savez, sur le terminal intégré. Je l'ouvre personnellement avec le contrôle plus liaison J, pas d'ici. Et oui, c'est tout. Peut-être qu'une autre chose à mentionner est le thème VSCode. Si vous voulez que VS Code soit cool, recherchez un thème d'extension, accord, et choisissez quelque chose qui vous plaît. Personnellement, j'aime le thème Firefox. Et je l'ai déjà installé. Je vais donc simplement cliquer sur Set Color Theme, Firefox, dark et boom. Maintenant, j'ai des couleurs différentes dans mon code VS. C'est plutôt sympa. Il a également un thème léger si vous êtes intéressé. Je pense que c'est tout. On se voit dans le prochain. 11. Travailler avec Git - Partie 1: Hé, dans cette vidéo, on va parler de, bien, Allons-y. Tout d'abord, qu'est-ce que Git ? Git est un outil de gestion de projet qui nous permettra de suivre tous nos fichiers de projet. Par exemple, nous allons apporter beaucoup de modifications à notre code source lorsque nous allons développer nos projets. Il faudra peut-être un an. Il faudra peut-être deux ans pour développer ce projet. Après un an, je ne me souviendrai probablement plus de ce que j'ai fait dans le passé, de quelle peur il y a. Et pour avoir l'historique de ce projet, Good existe. Il nous permettra de voir quels changements nous avons apportés, ce qui a vraiment mal tourné à cette étape particulière. Peut-être voudrions-nous changer quelque chose. Peut-être voudrions-nous contribuer avec d'autres personnes et pour gérer tout cela, le bien existe. Maintenant, voyons tout cela en pratique. Tout d'abord, je vais créer un nouveau dossier de projet. J'ai déjà ouvert VS Code. Nous devons maintenant ouvrir un dossier de projet. Je vais cliquer sur File Open Folder. Je vais ensuite accéder à un dossier dans lequel je souhaite créer un autre dossier. Ce sera mon projet de test, et je l'ouvrirai dans VS Code. Super. Maintenant, ouvrons le terminal intégré. Je vais appuyer sur Control plus j et ça va ouvrir Git Bash pour moi. Et comme vous pouvez le constater, il est déjà dans le dossier du projet. Super. Maintenant, nous devons d'abord initialiser bon dans ce dossier de projet. Pour ce faire, nous devons entrer git dedans. Et vous verrez ce message initialisé dépôt git vide dans ce dossier. Et le point important ici qu'il va créer un point de dossier caché obtenir un ordre pour afficher ce dossier caché, nous devons taper ls moins a. Il affichera tous les fichiers et dossiers dans le dossier actuel plus dossiers cachés. Tellement bien. Et nous pouvons en fait naviguer vers ce dossier en utilisant cd pour changer de répertoire. Ensuite, nous pouvons taper à nouveau ls pour afficher tous les fichiers et dossiers. Et vous pouvez voir beaucoup de choses ici, mais elles ne nous intéressent pas. Point important ici : si nous voulons supprimer ce dossier, tous les bons détails de notre projet seront supprimés. Donc, si je retourne au dossier principal, j'utiliserai un CD et deux points, et maintenant je vais le supprimer. Je vais donc taper une RAM que notre F et notre nom de dossier pour supprimer tous les fichiers et dossiers à l'intérieur du bon, et obtenir le dossier lui-même. Maintenant, vous pouvez voir ce maître, le titre principal a disparu ici. Cela signifie que maintenant get est complètement supprimé de ce dossier. Maintenant, permettez-moi de taper Git dedans à nouveau. Et le boum, bien, est maintenant initialisé une fois de plus. Super. Maintenant, qu'en est-il de ce titre de maître ici ? Qu'est-ce que c'est ? Il s'agit de notre succursale actuelle. Nous allons parler de succursales plus tard. En ce moment. Ne vous concentrez pas là-dessus. Nous sommes intéressés à se procurer ce qu'il fait. Quels sont donc les avantages ? abord, créons un fichier ici. Nous allons appeler ça un point de fichier TXT. Ici, nous allons taper bonjour. Peut-être que ce sera notre fichier de projet principal, joli vidage, mais ça fera l'affaire. Maintenant, pour utiliser good, nous pouvons tout d'abord taper git status pour comprendre ce qui se passe à ce moment précis dans un bon projet. Vous ne pouvez donc pas encore voir de commits. Nous sommes actuellement sur le maître de branche et nous avons un tas de fichiers non suivis pour être plus précis. Pour un fichier, certains file.txt, rien n'a été ajouté à la validation, mais les fichiers non suivis présents dans un bon projet peuvent être dans trois états différents. premier état est un état non suivi, second état est l'état de la scène. troisième état est le moment où les fichiers sont validés. ce moment, nous sommes dans un état non suivi. Qu'est-ce que cela signifie ? Cela signifie que nous avons détecté que nous avons de nouveaux fichiers dans notre projet, mais ils ne font pas encore partie de ce bon projet. Pour ajouter ces fichiers, pour leur faire savoir que nous voulons suivre ces fichiers pour suivre ces fichiers pour les inclure dans notre bon projet, nous devons les ajouter à l'état de la scène. Pour ce faire, nous devons taper comme il est dit ici, git add file. Nous pouvons donc taper git, ajouter un fichier file.txt. J'ai appuyé sur la touche pour l'auto-complétion Donc je tape juste un fichier, un peu de F, puis j'appuie sur Tab et cela permettra de compléter le nom de fichier pour moi. Mais je peux également faire git add dot pour ajouter tous les fichiers de ce dossier à l'état de la scène. Le point représente donc tous les fichiers du répertoire courant. Je vais utiliser cette commande car elle est plus courte. Git add dot. Vous pouvez maintenant voir la couleur bleue ici. Et ce qui se passe. Tapez à nouveau git status pour voir ce que nous n'avons pas encore de commits, les modifications à valider. Maintenant, vous pouvez voir que nous avons un nouveau fichier, quelques file.txt. Super. Cela signifie que notre fichier est en état d'étape. Et puisque nous utilisons VS Code, VS Code a intégré l'intégration Git et la désintégration est un outil vraiment puissant. C'est pourquoi, dans le panneau de gauche, nous avons cette icône avec un numéro à l'intérieur. Cliquons là-dessus. Par conséquent, cet onglet représente l'intégration get. Vous pouvez donc voir que nous avons deux listes déroulantes ici, modifications et des modifications mises en scène. Vous pouvez voir que maintenant notre somme file.txt à l'intérieur des modifications mises en scène. Vous pouvez donc voir à gauche ce qui était avant, et à droite avec le vert, ce qui a été ajouté, puisqu'il s'agit d'un nouveau fichier, nous ne voyons rien et rouge à gauche. Maintenant, si vous êtes aux prises avec tous ces bons commandements ou que je ne sais pas, pour une raison quelconque, il est difficile pour vous de vous souvenir de tous ces bons ordres. Vous pouvez toujours utiliser l'intégration Git ici. Donc, si je clique moins ici, il supprimera ce fichier de l'état de la scène et le rétablira à l'état non suivi. Maintenant, si je tape git status, le terminal à nouveau, vous pouvez voir fichiers non suivis, certains file.txt. Maintenant, si je veux ajouter ce fichier à l'état de la scène, je clique simplement sur le signe plus. Boom, c'est le cas, il est à nouveau mis en scène. Super. Quel est l'état de la scène ? Eh bien, cet état d'étape est essentiellement étape pré-opérationnelle à laquelle les fichiers peuvent être validés. Qu'est-ce qu'un commit ? Un commit n'est qu'un enregistrement dans l'historique Git et représente les modifications apportées au projet. Consacrons maintenant ce fichier à notre bon historique. Donc, ce que nous pouvons faire, nous pouvons taper git commit , puis nous devons taper moins M pour le message commit. Et nous allons taper quelques file.txt ajoutés. Je vais exécuter cette commande. Et vous verrez le mode traité, un fichier modifié, une insertion, super. Et tous les changements à gauche ont disparu. C'est très bien. Maintenant, si nous allons saisir à nouveau git status, vous ne verrez rien à valider. C'est parce que Commit est une arme à feu. C'est déjà dans le passé. Good garde une trace de tous nos engagements que nous avons pris dans le passé. Pour afficher l'historique de Git et le terminal, nous devons taper git log. Nous avons un commit que nous avons nommé éditer quelques file.txt. La date est celle-ci et l'auteur, mon surnom et mon e-mail et hachage de validation sur la branche maître. Supposons que je souhaite ajouter de nouvelles modifications à ce fichier. Je vais juste aller de l'avant et modifier ce fichier. Je vais taper quelque chose qui a été largué et sauvegarder le fichier. Sur la gauche, vous verrez que nous avons nouveau apporté de nouvelles modifications au fichier. Et c'est ce que nous avons ajouté, c'est ce que nous avions auparavant. Maintenant, les mêmes étapes. Nous devons d'abord ajouter ces modifications ou le fichier qui a été modifié à l'état de la scène, n'est-ce pas ? Et après cela, nous pourrons valider ce fichier. Parce que maintenant si je vais faire git commit et taper quelque chose, vous verrez un message d'erreur. Eh bien, ce n'est pas un message d'erreur, mais il ne commettra rien car bon ne peut valider que des fichiers mis en scène. Par exemple, si je vais créer un nouveau fichier, test.js et que je vais taper, je ne sais pas, chose très basique en JavaScript, journal de console. Bonjour. Je vais revenir à cet onglet. Je vais taper git status. Vous verrez qu'un fichier est modifié, un fichier n'est pas suivi. Maintenant, je veux mettre en scène tous ces dossiers. Je vais faire Git Add Dot. Et vous verrez qu'ils sont tous mis en scène. Et si je dois taper git commit, ces fichiers mis en scène seront ajoutés au nouveau commit. C'est bon ? Mais que se passe-t-il si je ne veux pas que tous ces fichiers soient validés ? J'ai peut-être créé ce fichier, mais je ne suis pas encore prêt à le valider. Je veux juste engager ces changements dans l'histoire. Donc, ce que je vais faire, je vais supprimer test.js de cet état de scène, et je ne laisserai que quelques fichiers dans cette étape. Donc, comme je l'ai déjà dit, git ne commet que les fichiers mis en scène. Donc, si je vais taper git commit et que je vais taper un fichier file.txt édité. Je vais l'exécuter. Vous verrez que le test reste juste parce qu'il est toujours pas suivi, non validé. Et si je tape git log, je verrai maintenant que je dois valider la note. Maintenant, si je veux ajouter test.js, je vais taper à nouveau git add dot, puis git commit. Et je vais taper éditer, tester. Oui, c'est cool. Encore une fois, bonne chance. Et j'ai mon historique Git là-bas. C'est ce que fait le bien. Il nous permet de créer cet historique de projet à l'aide de messages de validation. Mais, ok, cela semble utile, mais je ne vois pas le point principal ici pour voir tous les fichiers, tous les changements que vous avez apportés obtenir un projet ou des commandes différentes, comme bon show par exemple. Nous pouvons donc taper git show, puis valider hachage afin de visualiser les modifications apportées à ce commit particulier. Je vais donc juste copier ça et mettre un bon message d'argent. Nous avons cet engagement. C'est la différence. Dans le dossier. Certains file.txt, nous avons une ligne éditée et la deuxième ligne éditée. C'est ça. Je suis donc d'accord pour dire que ce n'est pas pratique de tout voir à travers le terminal. C'est pourquoi il existe de nombreuses extensions VS Code que nous pouvons installer afin de visualiser ce processus. Donc, si je tape git dans la recherche d'extensions, vous verrez beaucoup d'extensions différentes comme une bonne histoire, obtenir des terres, un bon graphique. Et tous vous aideront à travailler avec le bien. Ils vous permettront de visualiser, de réutiliser et de rendre le développement de votre kit aussi confortable que possible. Personnellement, je n'utilise aucun d'entre eux parce que je pense que cette intégration est plus que suffisante et que le reste ira sur GitHub. Dans la deuxième partie, nous allons parler de GitHub. Github est apparenté pour obtenir ce que c'est GitHub. Vous saurez tout cela dans la prochaine vidéo. voit là-bas. 12. Travailler avec Git - Partie 2: Bonjour, Bienvenue dans la deuxième partie de la bonne série. Dans cette vidéo, nous allons parler de GitHub. Qu'est-ce que GitHub et pourquoi en avons-nous besoin ? N'oublions pas que j'ai le petit bon projet de la première partie où j' ai deux fichiers et quelques commits dans le terminal, si j'obtiens le journal, je pourrai voir l'historique Git de ce projet. Maintenant, la question est : que se passera-t-il si je supprime ce dossier de projet de test de mon PC, est-ce que mon projet va disparaître complètement ? Et la réponse à cette question sera GitHub. Il viendra à notre rescousse. Github est un service d'hébergement pour de bons projets, tout comme nous avons l'hébergement pour les sites Web, GitHub est un service d'hébergement ou plateforme pour de bons projets. Si je vais sur Google et que je cherche un GitHub, cela m'amènera sur le site officiel. Si vous n'avez pas encore de compte GitHub, je vous suggère d'en créer un dès maintenant, moment, je me suis déjà connecté. Je tiens à mentionner qu'il existe d' autres services d'hébergement populaires pour de bons projets, tels que Git Lab ou peut-être Bitbucket. La différence entre eux réside dans les fonctionnalités et les intégrations qu'ils vous donnent. Github est le plus courant. Très bien, maintenant, nous avons notre compte GitHub ici, et nous aimerions héberger notre bon projet que nous avons localement sur notre PC, sur GitHub. Comment pouvons-nous faire cela. Nous devons donc d'abord créer un référentiel distant sur GitHub. Si je clique sur le signe plus et le coin supérieur et que je clique sur un nouveau référentiel, il me demandera les détails de mon nouveau référentiel. Un référentiel est essentiellement un projet correct, que vous mettez sur GitHub. Par conséquent, Repository signifie projet, mais sur GitHub, donc mon nom de référentiel sera mon projet. Je laisserai la description vide visibilité du référentiel indiquant qu'il peut s'agir un référentiel public et privé. Si vous choisissez public, votre référentiel sera visible par tout le monde, mais seules les personnes autorisées pourront contribuer à ce référentiel s'il doit être privé, personne ne le saura et ne verra jamais. ce référentiel. Alors choisissons privé, puis cliquons sur Créer un référentiel. À cette étape, nous avons créé un nouveau projet sur GitHub. Maintenant, nous devons associer votre bon projet local que nous avons sur notre PC à un référentiel distant sur GitHub. Nous pouvons le faire de deux manières, soit via HTTPS, soit via un tunnel SSH. Ssh est une option disponible, mais GitHub recommande HTTPS car il est plus simple et plus facile à configurer, utilisons HTTPS. Vous pouvez déjà remarquer que GitHub suggère quelques étapes pour associer notre code local ou projet local à un référentiel distant. Nous allons suivre la deuxième étape pour pousser un référentiel existant, car notre bon projet local peut être appelé référentiel Git local. Il suffit donc de copier la première commande à partir ici et de la mettre dans le terminal. Alors, qu'est-ce que git remote ajoute l'origine ? Commençons par exécuter cette commande et voyons ce qui va se passer. Rien n'est imprimé et c'est tout à fait très bien. Mais maintenant, notre bon projet local connaît ce référentiel distant. Nous pouvons vérifier qu'en tapant git remote dash v, vous verrez l'origine et vous verrez l'URL du référentiel que nous avons copiée ici. Il est également disponible ici. Maintenant, regardons encore une fois cette commande. Nous avons donc git remote add. Il s'agit de la commande permettant d'associer nos référentiels. Origin est le nom d'un alias que nous assignons à cette URL car il est plus facile de toujours faire référence à un surnom ou à un alias plutôt qu'à une URL tout le temps, qui était origine. C'est le nom le plus courant. D'accord. Maintenant, que doit-on faire pour applaudir nos fichiers locaux à l'hébergement, nous devons faire git push que l'alias que nous avons associé à l'URL de notre référentiel, qui sera l'origine et le nom de branche que nous voulons déployer. Donc git push origin master. Si nous ouvrons à nouveau et Git Hub, nous verrons qu'il suggère une bonne branche main, puis git push origin main, car rappelez-vous que j'ai déjà mentionné cette agitation il y a environ un an que la communauté veut changer nom de branche par défaut du maître au principal, mais nous allons continuer à utiliser master dès maintenant. Nous allons donc utiliser git push origin master au lieu de git push origin main. Je vais l'exécuter. Et vous verrez que la nouvelle branche a été créée en fonction de ce taux d'URL. Revenons à GitHub, rafraîchissons la page et boum, nous pouvons voir que tout est visible ici. Ce que nous pouvons faire sur GitHub. Github, nous pouvons voir notre histoire complète. Nous pouvons voir tous les fichiers et nous pouvons voir au moment où cette commande pour ce fichier a été créée, d'accord, donc il y a trois heures était la dernière validation pour ce fichier et pour ce fichier aussi bien pour les tests, oui, nous pouvons cliquer sur sur Fichiers pour afficher le contenu. Nous pouvons effectivement cliquer sur les commits pour voir quelles modifications ont été apportées à ce commit. Donc, pour modifier un fichier à nouveau valider, nous avons modifié ou supprimé nous avons modifié ou supprimé cette ligne et nous avons ajouté ces deux lignes. Le vert est ce qui a été ajouté. Le rouge signifie quelque chose qui a été retiré. Revenons au dépôt ici. Nous pouvons également consulter l'historique complet en cliquant sur ce bouton. Et nous pouvons voir que nous avons trois engagements. Nous pouvons parcourir le référentiel à ce stade, à l'historique. Si nous cliquons, nous pouvons voir à ce stade y avait qu'un seul fichier. Revenons à nouveau au dépôt principal en répondant à la question principale, pourquoi avons-nous besoin de GitHub ? Nous avons besoin de GitHub pour collaborer avec d'autres personnes ou pour rendre notre projet portable. Ce que je veux dire, c'est que supposons que nous perdions accidentellement ce dossier de projet de test sur notre PC local. Pour une raison quelconque, il n'existe tout simplement pas. Cependant, notre projet existe sur GitHub. Donc, ce que nous pouvons faire, nous ne pouvons pas charger notre projet depuis GitHub et placer sur notre PC local en cliquant sur ce bouton vert, nous avons quelques options ici. Nous pouvons télécharger zip ou cloner. Donc, si nous cliquons sur Download Zip, et si nous allons ouvrir ce zip, vous verrez tous les fichiers à l'intérieur. C'est donc un moyen. La deuxième méthode consiste à cloner ce référentiel à l'aide de l'interface de ligne de commande. Nous allons donc choisir une connexion HTTPS. Nous allons copier cette URL. Et maintenant supposons que mon projet de test n'existe pas ici sur PC. Je l'ai perdu. Donc, si je voulais le récupérer ou le récupérer, je ferai git clone puis l'URL que j'ai copiée. Il va donc copier, il créera un nouveau dossier appelé mon projet, et il mettra tous les fichiers à l'intérieur. Si je vais inspecter mon dossier de projet, vous verrez un fichier file.txt et un test, oui. Mais aussi si je vais aller mon dossier Project et si je fais hélas F, pour afficher les fichiers cachés, il y aura un autre dossier Git ici. C'est donc parce que lorsque vous clonez un référentiel, il sera livré avec un bon dossier avec la configuration Git déjà. Imaginez que ce projet de test n'ait jamais existé sur ce PC. Je clone le référentiel à l'aide de HTTPS et de git clone. Et maintenant, ma configuration Git est déjà terminée. Je peux simplement accéder à ce dossier Project et tout est déjà là. Configurez pour moi. Je peux maintenant continuer à faire de nouveaux commits, à faire quelques modifications, puis à recharger sur GitHub, laisser supprimer mon dossier de projet. Je n'en ai pas vraiment besoin. Je vais revenir en arrière. Maintenant. Comment puis-je continuer à développer une fois mon projet sur GitHub ? C'est une bonne question. Eh bien, comme avant, si j'ai besoin d'introduire de nouvelles modifications au projet, je vais continuer à faire mes changements. Peut-être que j'ajoute une autre ligne avec bonjour deux ici et je l'ai sauvegardée. Maintenant que vous vous en souvenez, je n'ai pas suivi les changements. Si je tape git status, vous verrez que ce fichier est modifié. Encore une fois, je dois ajouter ce fichier à l'état de la scène. Je vais mettre Git Add Dot. Vous le verrez ici, il apparaît maintenant dans les changements mis en scène et maintenant je peux m'engager. Git commit a donc ajouté bonjour deux. Maintenant, si je tape git log, je pourrai voir un nouveau commit en haut. Maintenant, j'ai quatre commits, mais si je retourne sur GitHub, je ne le vois pas ici car GitHub et Git, ils ne sont pas synchronisés par magie les uns avec les autres. Chaque fois que vous effectuez de nouvelles modifications sur votre PC, elles sont locales. Ils sont disponibles uniquement sur votre PC. Et si vous voulez les voir lors de l'hébergement, vous devez les télécharger dans l'hébergement. Et pour ce faire, nous utilisons à nouveau la commande git, push, Good Push, ainsi que le nom de LES et notre alias. Nous pouvons vérifier qu'avec git remote dash v, notre Ls est origine, qui conduit à ce référentiel, ce qui est correct. Je vais donc faire git push origin, puis maîtriser le nom de la branche. Maintenant, je vois que mes modifications sont téléchargées. Je rafraîchis la page. Et un autre comité a été ajouté ici il y a une minute, ce qui est exact. Si je clique sur ce message de validation, vous verrez que ces deux lignes pour modifier exactement ce que je viens de faire. Et une fois de plus pour répondre à la question principale, que fait GitHub ? Pourquoi en avons-nous besoin ? Github est nécessaire à la collaboration entre les gens et à rendre notre projet aussi portable que possible. Dans la vidéo suivante, nous allons parler des succursales et de la façon dont les gens collaborent avec GitHub. On se voit là-bas. 13. Travailler avec Git - Partie 3: Bonjour, bienvenue dans la troisième partie de la bonne série. Dans la dernière partie, nous avons déployé avec succès notre bon projet local sur GitHub. Et nous savons ce qu'est GitHub. Il s'agit d'une plateforme d'hébergement collaboration et nous utilisons GitHub pour rendre le projet le plus portable possible. Dans cette partie, nous allons découvrir ces principaux concepts de bonnes branches froides. Et nous allons parler de la façon dont nous sommes capables de collaborer sur GitHub. Allons-y. Tout d'abord, parlons de branches. Cette mystérieuse branche maîtresse était ici dès le début. Mais qu'est-ce que cela signifie ? Si nous allons taper git branch dans le terminal, nous verrons que vous n'aurez que master, mais nous sommes en mesure de créer autant de branches que nous le voulons. Donc, la branche est juste une autre copie de notre projet. Voyons cela à travers un exemple. Créons donc une nouvelle branche. Pour créer une nouvelle branche, nous devons taper git checkout que moins b, puis le nom de la branche que nous voulons créer, appelons-le ma fonction de tiret. Vous pouvez voir basculer vers une nouvelle succursale. Ma fonctionnalité, encore une fois, je tape git branch. J'ai un maître et j'ai ma fonction et un ensemble de maîtres. Je vois ma fonctionnalité maintenant, c'est parce que c'est ma branche active en ce moment. Ce que vous voyez ici, c'est votre branche actuellement active. Maintenant, quelle est la différence en ce moment, ces deux branches sont égales, mais supposons que je souhaite développer une nouvelle fonctionnalité dans mon application, mais je ne veux pas toucher mon code principal. Mon code principal reste inchangé, mais je voulais développer une nouvelle fonctionnalité. C'est ici que les branches entrent en jeu. Ma branche principale contient donc ma dernière application sur le code déployé en production. Il fonctionne en ce moment. En même temps, je voulais développer une nouvelle fonctionnalité. Je crée donc une nouvelle branche appelée ma fonctionnalité, et maintenant je commence à développer cette nouvelle branche. Supposons que je sois sur ma branche de fonctionnalités, je crée un nouveau commit. Ma nouvelle fonctionnalité va être un nouveau journal de console, qui sera bonjour trois. Très bien ? Maintenant, je commets ces changements. D'abord, je passe à l'état de la scène , puis je fais un nouveau commit. J'appelle ça développé ma nouvelle fonctionnalité. Super. Si je fais git log pour afficher l'historique, je peux voir mon historique précédent, puis mon nouveau commit, développer ma nouvelle fonctionnalité. Génial, mais en quoi est-ce utile ? Maintenant, si j'ai besoin pour une raison quelconque de revenir à mon code principal et de voir ce qu'il y avait là. Je suis maintenant en mesure de basculer entre les branches. J'ai donc mis git branch pour voir quelles branches font la moitié et ensuite je peux faire git checkout master pour basculer entre les branches, mais cette fois sans drapeau moins B. Maintenant, je passe au maître de branche. Et vous pouvez voir comment ce changement effectué par dr sur ma branche de fonctionnalités a disparu. Cela est dû au fait que ce changement fait partie de ma branche de fonctionnalités. Il n'a aucun rapport avec master car si je mets un git log, vous verrez que je n'ai pas ce commit que je l'ai libéré sur ma branche d'entités, sur la branche master, c'est complètement différent. Comme vous pouvez le constater, Master et ma fonctionnalité sont une sorte de copie de mon projet qui existe en même temps, je peux manipuler ces branches pour développer différentes fonctionnalités. Maintenant, comment puis-je réellement utiliser ce concept de branche rendre utile pour moi ou pour les personnes avec qui je collabore ? Supposons donc qu'il y 10 personnes qui travaillent sur le même projet et invitent personnes dans un référentiel et doivent accéder aux paramètres, gérer l'accès. Et ici, vous inviterez généralement des collaborateurs. Les personnes qui ont accès à ce référentiel privé pourront donc ce référentiel privé pourront modifier ce référentiel. Mais si le, tous, si toutes les personnes travaillant sur un projet vont pousser vers la même branche principale ou la même branche principale. Cela va être un peu désordonné. Nous voulons le rendre aussi structuré que possible afin de garder notre bon historique propre, lisible et maintenable. Et pour ce faire, nous utiliserons des branches. Supposons que notre code principal soit sur la branche principale, qui a ajouté le dernier commit bonjour à je suis une autre personne assise quelque part là-bas. Je suis collaborateur et je crée une nouvelle branche, ma fonctionnalité que j'ai déjà créée, et j'ai fait quelques changements. Je veux transférer ces modifications vers GitHub, et je souhaite fusionner ces modifications dans le code principal, qui se trouve à nouveau sur la branche principale. Donc, ce que je dois faire, je dois d'abord pousser cette branche. À GitHub. Pour ce faire, je vais faire git push origin car c'est nos extraterrestres pour le dépôt. Nous nous souvenons que git push origin, ma fonctionnalité. Attendons une seconde. Et maintenant, il est poussé et il nous suggère même créer une pull request pour ma fonctionnalité sur GitHub en visitant. Nous allons en parler dans une seconde. Mais si nous revenons à GitHub, nous voyons déjà que ma fonctionnalité a eu des poussées récentes il y a moins d'une minute. Comparaison et pull request. Si je rafraîchis la page, je vais maintenant voir deux branches. Si je clique ici, j'ai un maître de branche par défaut et j'ai vos succursales, ma fonctionnalité la met à jour il y a quelques minutes par moi et la branche principale de la CEU il y a quelques heures par moi. Et ici, je peux voir si je survole, je verrai un engagement devant maître. Maintenant, pour transférer les modifications que j'ai sur ma branche de fonctionnalités dans master, je dois créer une pull request directement sur GitHub. Une pull request est la demande du développeur lorsque vous demandez aux responsables de projet de fusionner votre branche dans la branche principale. Donc, fondamentalement, vous voulez contribuer et vous souhaitez transférer ces modifications dans le code principal. Nous allons cliquer sur une nouvelle demande de tirage. Nous allons le nommer développé. Ma nouvelle fonctionnalité laissera un commentaire qui, hé, je viens de faire ce grand changement. Et ici, nous le sélectionnons. Nous voulons pousser, nous voulons fusionner ma branche d'entités en master. Ce sont tous les engagements que j'ai faits sur cette branche. Je peux créer autant de commits que possible. Par exemple, si j'ajoute un autre commit, peut-être console.log, bonjour pour, encore une fois, je mets en scène ces modifications, je les valids à nouveau, une nouvelle modification. Encore une fois, je pousse, origine Good Push, ma fonctionnalité. La succursale sera mise à jour. Même si j'ai déjà créé une pull request, je ne l'ai pas encore créée. Mais de toute façon, je vais donc cliquer sur créer, tirer, demander. Et voyons ce que nous avons ici. Par conséquent, nous voyons d'abord la possibilité de fusionner car ces changements peuvent survenir. Mais comme nous n'avons aucun conflit, c'est très bien. Nous verrons donc nos demandes de tirage ici. Alors, que va-t-il se passer maintenant ? Je suis la personne qui est assise là à créer cette pull request, puis le chef de projet ou le responsable du projet arrive et la personne responsable de la pull request va ici et elle voit que, Hé, cette personne voulait fusionner ces changements. Il clique donc sur cette pull request. Très bien, ce type a fait ce grand changement. Oh mon Dieu. Je veux fusionner ces changements. Cette personne fusionne donc cette pull request. Il sélectionne donc l'une des options ici. Laissez-moi cliquer sur Merge Pull request et voyons ce qui va se passer. Donc, fusionnez les requêtes d'extraction de cette personne, cette branche a développé ma nouvelle fonctionnalité, confirmez la fusion, la fusion, la demande de sondage, branche de suppression a réussi et fermée. Nous allons cliquer sur cette branche a été supprimée, pull request, fusion. Si je reviens à mon projet ici, je peux voir les demandes d'extraction de Sherlock 16, ma fonctionnalité, et elle fait maintenant partie d'une bonne histoire. Si je clique sur les commits, je verrai que j'ai d'abord ces deux commits que j'ai eu sur ma branche de fonctionnalités. Et en plus de cela, j'ai une autre pull request de fusion de validation. Maintenant, toutes ces modifications qui se trouvaient sur ma branche de fonctionnalités ont été fusionnées dans le code principal et elles sont disponibles ici. C'est ainsi que les gens contribuent généralement par pull request 1, toutes ces modifications se font sur GitHub. Nous aurons des divergences car nous avons sept commits sur la branche principale, sur le référentiel distant, sur GitHub dans notre projet local, nous avons toujours ma branche de fonctionnalités. Et si nous allons à master en utilisant git checkout master. Et si nous faisons git log, nous voyons que le dernier commit ici est ajouté bonjour deux, alors que le voici, fusionner les pull requests en une. Pour résoudre ce problème, nous devons télécharger les dernières modifications de GitHub dans notre code local pour synchroniser l'historique. Pour ce faire, la commande est très similaire à git push, mais au lieu de git push, nous utiliserons git pull. Encore une fois, nous obtenons un pull que les zones du référentiel, puis le nom de la branche à extraire. Nous voulons donc retirer le maître de l'origine. Je vais l'exécuter. Et vous verrez que quelque chose de génial s'est passé. Et comme vous pouvez le constater, maintenant, tous mes changements sont ici. Le dernier commit introduit, bonjour quatre et moi, et maintenant j'ai bonjour dans mon code. C'est plutôt cool de vérifier que je refais git log. Et vous voyez que j'ai plusieurs demandes de bombe de Sherlock 16, d'ailleurs, pour quitter cet état quand, quand une bonne histoire déborde, vous pouvez simplement taper q et cela vous amènera au terminal. Très bien, je dirais que c'est probablement cela, c' est ainsi que les gens utilisent GitHub pour collaborer. Le modèle serait un peu différent s'il s'agit d'un référentiel public et que vous souhaitez contribuer à un projet open source. Mais nous n'allons pas couvrir cela dans cette série. C'est plus que suffisant pour comprendre comment Git fonctionne et comment les gens collaborent entre eux. Encore une fois, je vais répéter le flux une fois de plus. Et si vous vouliez créer une nouvelle modification et que vous travaillez sur un projet. abord, vous créez une nouvelle branche en utilisant git checkout moins b et le nom de la branche, il peut s'agir de n'importe quoi. Très bien, donc ces copies, cette nouvelle branche sera créée à partir de la branche active au moment où vous exécutez cette commande. Donc, cette branche contiendra maintenant tous les commits que vous avez eus lorsque vous exécutez cette commande, accord, vous continuez à développer la branche de conduite, faites autant de commits que nécessaire pour compléter la fonctionnalité. Ensuite, vous poussez cette branche vers GitHub en utilisant un bon Push. Il apparaît ensuite sur le référentiel. Ensuite, vous accédez à vos pull requests et vous créez une nouvelle pull request pour fusionner la branche que vous venez de publier sur GitHub dans le code principal, dans la branche principale. Et puis une personne responsable viendra voir ça, Hé, ce type veut fusionner cette branche dans le code principal. Et une fois cette pull request fusionnée ou acceptée, vos modifications seront fusionnées dans le code principal. Après cela, tous ceux qui travaillent sur un projet devront extraire dernières modifications de la branche principale à l'aide de la commande git pull. Et c'est tout. Il s'agit du flux de base des félicitations de collaboration Git et GitHub. Je pense que c'est notre série finie, et je vous verrai dans la prochaine. 14. Installer Node.js (Windows): Bonjour, Dans cette vidéo, nous sommes sur le point d' installer Node.js sous Windows. Qu'est-ce que NodeJS et pourquoi en avons-nous besoin est expliqué dans la vidéo suivante. Ce que nous devons faire, c'est ouvrir n'importe quel navigateur et accéder à Google. Et Google ne cherchera pas de GS. Le premier lien sera le site officiel. Nous avons ici deux versions à télécharger, LTS et la version actuelle. La version actuelle est la dernière version disponible en téléchargement, et LTS est la dernière version stable. Nous n'avons pas besoin de trop compliquer. C'est pourquoi nous obtenons LTS. Cliquez sur celui-ci, puis ouvrez le programme d'installation. Attendez un peu et cliquez sur Suivant. Oui, j'accepte Suivant, changez le chemin si nécessaire. Ensuite, à cette étape, nous n'avons pas besoin de GS, NPM et de trajectoire d'attitude. Ensuite, à cette étape, nous avons des outils pour les modules natifs et nous souhaitons sélectionner cette option. Qu'est-ce que c'est et pourquoi en avons-nous besoin ? Comme il est dit, certains modules npm doivent être compilés à partir de CC plus plus lors de l'installation. Qu'est-ce que cela signifie ? Cela signifie qu'il existe des bibliothèques, modules ou paquets que nous installerons pendant notre développement et qui nécessitent des binaires natifs spécifiques au système d'exploitation, dans notre cas, Windows. Les outils qui compileront ces muscles lisses sont donc ces muscles lisses sont outils de construction Python et Visual Studio. Donc cette option va simplement les installer s'ils sont manquants maintenant, n'est-ce pas ? Cliquez sur Suivant et cliquez sur Installer. Je ne vais pas cliquer sur Installer car je n'ai pas déjà installé GS. Mais pour vous, c'est ce qui va se passer. Lorsque vous cliquez sur ce bouton, une nouvelle fenêtre CMD s'affiche. Et il verra quelque chose comme nous allons faire et installer cette commande que nous aurons besoin de ce nombre d'espace. Fermez simplement cette fenêtre et après cela, une autre fenêtre s'ouvrira, à savoir la fenêtre PowerShell. Et il y aura tout le journal d'installation. Il suffit donc d'attendre un peu de temps jusqu'à ce que ce soit fini, puis vous allez bien. Aucun JS n'est considéré comme installé. Maintenant, vérifions cela. Comment faire ça. Cliquez sur le panneau Démarrer et recherchez cmd. Ensuite, nous ouvrons cela. Et dans CMT, nous tapons espace noeud, tiret, version tiret. Appuyez sur Entrée et vous devriez voir la version que vous venez d'installer. Il se peut que lorsque vous tapez noeud dash, version dash, vous constatiez que noeud n'est pas reconnu comme une commande interne ou externe. Nous devons donc trouver un autre moyen de vérifier notre installation. Pour ce faire, nous devons de nouveau lancer Panel plutôt que dans le panneau de configuration. Ensuite, nous chercherons des programmes et des fonctionnalités, d'accord ? Ici, nous devons vérifier que nous n'avons pas de GS dans la liste. Donc, si vous n'avez pas de GS dans la liste ici, cela vous indique qu'il n'est pas reconnu comme une commande supplémentaire interne. Ensuite, vous devez effectuer un petit ajustement dans la configuration du système. Vous devez donc cliquer à nouveau sur le panneau Démarrer dans le type de recherche ENV et sélectionner Modifier les variables d'environnement système. Cliquez ensuite sur les variables d'environnement. Et ici, sous variables système, vous devez trouver la variable chemin. Double-cliquez dessus. Et dans la liste, vous ne verrez pas C Program Files. Pas de JS, ce qui est mon chemin d'installation pour pas de jazz. Donc, parce que vous ne l'avez pas dans la liste, vous voyez que le nœud n'est pas reconnu, d'accord ? Donc, ce que vous devez faire, vous devez cliquer sur Nouveau et ajouter votre chemin d'installation pour aucun GS. Donc, si vous ne modifiez pas l'option dans l'installation, ce serait C Program Files, NodeJS également. Alors, appuyez sur New, collez le chemin par ici, d'accord ? OK, d'accord, puis redémarrez le terminal. Essayez ensuite node dash, version dash. Une fois encore. Après cela, vous devriez voir la version. Et c'est essentiellement ça. Félicitations, Vous venez d'installer NodeJS sur Windows. On se voit dans le prochain. 15. Installer Node.js (macOS): Bonjour, Dans cette vidéo, je vais vous montrer comment installer NodeJS sur macOS. Allons-y. Comme toujours, vous allez d'abord sur Google et tapez NodeJS, accédez à la première URL, qui est le site officiel, puis accédez à la page de téléchargements et cliquez sur le programme d'installation de macOS. Le téléchargement démarre automatiquement. Ouvrez le fichier téléchargé. Vous verrez que l'assistant d'installation clique sur Continuer, puis accepter les termes, puis vérifiez le chemin d'installation et cliquez sur Installer. Il vous demandera votre mot de passe et c'est très bien. Attendez qu'aucun GS ne soit installé juste après le processus d'installation, vous n'aurez pas de GS et de NPM dans votre système pour vérifier l'installation. Allons au terminal, on va manger mal. Recherchez ensuite un terminal pour vérifier NodeJS type node dash V, qui signifie version. Il doit imprimer la version que vous avez installée. De la même manière, nous devons également vérifier le NPM. Alors tapez npm dash v, et c'est tout. On se voit dans le prochain. 16. Node.js et NPM - Partie 1: Bonjour, Bienvenue à connaître la vidéo d'introduction de GS. heure actuelle, nous allons parler de ce qui n'est pas un GS. Pourquoi en avons-nous besoin et comment pouvons-nous l'utiliser ? Allons d'abord, ce qui n'est pas GS sait que GS est un environnement d'exécution JavaScript. Cela signifie que c'est quelque chose qui nous permet d'exécuter JavaScript. Et vous vous demanderez probablement pourquoi n'avons-nous pas besoin de GS ? Parce que nous avons JavaScript exécution dans le navigateur et c'est le problème. De nos jours, nous sommes en mesure d'exécuter JavaScript en dehors du navigateur avec l'aide de NodeJS, nous pouvons utiliser JavaScript pour écrire des applications mobiles. Nous pouvons utiliser JavaScript pour écrire des applications de bureau. Nous pouvons tout faire avec JavaScript en ce moment. Merci de noter, oui, car il nous permet d'exécuter JavaScript en dehors du navigateur. Par exemple, si j'ouvre le navigateur ici, je clique sur Inspecter, puis je vais sur console. Il s'agit donc d'un environnement de navigateur. Je suis capable d'écrire n'importe quel JavaScript que je veux ici. Par exemple, si je veux taper console.log 5 plus 2, il en imprimera six pour moi. C'est génial, mais c'est à l'intérieur du navigateur. Si je voulais l'exécuter ailleurs, je ne serais pas autorisé à le faire. Mais avec l'aide de nœuds, oui, je pourrai le faire. Passons au code VS et laissez-moi créer un nouveau dossier de projet. Je vais aller dans le dossier Mes projets, et ici je vais mettre le test GS. Je vais sélectionner ce dossier. Et maintenant créons un nouveau fichier ici, nous l'appellerons test.js. Avant d'écrire quoi que ce soit, veillons d'abord à ce que nous n'ayons pas installé JS. Nous sommes en mesure d'y accéder. Pour cela, je vais ouvrir mon terminal intégré. Et pour accéder à NodeJS, j'ai juste besoin de taper node. Une fois qu'ils exécutent la commande node, j'entrerai dans l'environnement Node.JS. Donc ici, je vais pouvoir exécuter JavaScript. Par exemple, la même chose que j'ai fait dans le journal 2 plus 4 de la console du navigateur. C'est plutôt génial. C'est la preuve que JavaScript a été exécuté en dehors du navigateur. Mais ce n'est pas très pratique pour nous d'écrire toujours du JavaScript à l'intérieur du terminal. Donc, pour quitter ce mode, qui va appuyer plusieurs fois sur Control plus C. Super. Et maintenant, écrivons quelques fichiers JavaScript que nous exécuterons plus tard sans JS avant de sauter dans les fichiers, je veux juste mentionner que chaque fichier, chaque fichier JavaScript exécuté dans l'environnement Node.JS va être un module. Un module est un fichier JavaScript autonome. Cela signifie qu'il ne sait pas seulement ce qui est écrit à l'intérieur du monde extérieur. Commençons par créer peut-être Suis-je audible ? Const cinq équivaut à cinq. Et maintenant, consolons le journal de points 5 et appuyez sur Enregistrer. C'est ça. Nous venons de créer notre premier script. allons maintenant l'exécuter pour exécuter un fichier, nous devons taper noeud, puis le nom du script que nous aimerions exécuter. Ce sera donc le test GS. J'exécute cette commande et vous pouvez en voir cinq dans la console car je ne console que le journal 5. Si je veux supprimer cette ligne, je vais le commenter. Et je vais essayer de réexécuter le script. Rien ne sera imprimé. Et c'est évident parce que nous ne faisons rien à l'intérieur. Maintenant, rendons notre tâche un peu plus difficile. Que se passe-t-il si nous avons deux fichiers vers modules ? Laissez-vous créer un deuxième point ici, et mettons une chaîne ici. Peut-être que mon nom, je vais imprimer Andrew. Et ce que je veux faire, je veux partager informations entre ces deux modules. J'ai donc voulu passer mon nom du second gs au test. Oui. Et je suis capable de le faire par l'importation et l'exportation. Donc, pour exporter quelque chose à partir d'un module, nous utilisons un module. Donc, nos experts n'exportons qu'un objet. Et dans cet objet, je vais mettre mon nom variable comme ça. Je peux donc le faire comme ça. Mon nom, puis appelez mon nom. Mais en JavaScript, nous pouvons utiliser un raccourci. Nous pouvons simplement le dire comme ça et cela fonctionnera très bien. Maintenant, mon nom est exporté à partir du second gs. Essayons de l'importer. Si je retourne à Ts, gs, laissez-moi enlever tout ça. Je vais mettre un const que je nommerai mon exportation quelque chose comme. J'ai importé mon nom, peu importe. Et pour importer ce que j'ai exporté d'ici, j'ai besoin de taper requis. Et à l'intérieur requiert, je mets le chemin vers ce module, qui ne sera que deuxième GS. Je n'ai pas besoin de spécifier l'extension. J'ai donc mis point et barre oblique ici pour spécifier que ce fichier se trouve dans ce dossier. Maintenant, ce que je vais faire, je vais simplement me contenter d'importer mon nom. Je sauvegarde le fichier, retourne au terminal, puis à nouveau, nœud, test, GS. Boom, ce que je vois, j'ai un objet. Et cet objet contient ma clé de nom. Exactement ce que j'ai exporté de la seconde, oui, en fait, nous pouvons le renommer en second module importé. Et puis je peux référencer le deuxième module importé mon nom car il s'agit d'un objet et il a une clé mon nom. Je l'enregistre, j'exécute à nouveau le script et je suis entré imprimé dans la console. C'est ainsi que NodeJS fonctionne en créant simplement différents modules partageant des données entre eux. Ce système avec un besoin et avec des exportations de modules est appelé GS commun, qui est écrit comme ça. Gs virgule. Il s'agit d'un système d'exportation d'importation natif dans Node.JS. Cependant, en ce moment, la communauté NodeJS travaille activement sur et utilise un système appelé modules ECMO Script. Ces modules font donc partie de l'environnement du navigateur et sont actuellement expérimentaux dans un environnement Node.JS. Ils sont donc légèrement différents des exportations de demande et de module, mais ils sont plus faciles et intuitifs à utiliser. Essayons-les. Que pensez-vous pour utiliser molécules de script ACML dans l'environnement Node.JS, nous devons ajouter une autre extension à nos modules. Donc, au lieu de js, nous devons utiliser MGS, qui sera le module GS, MGS et renommer ce fichier aussi, qui sera mgs. Donc, au lieu d'être requis, je vais commenter cette ligne en appuyant sur Control Slash. Et au lieu de cela, j'utiliserai Import. Ensuite, puisque nous exportons un objet, je mettrai à nouveau des crochets bouclés. Et je vais préciser que je dois importer mon nom. Il est important de spécifier le même nom car si je dois spécifier quelque chose de différent, il n'existe pas sur l'objet exporté, non ? Je vais donc mettre mon nom à partir du deuxième module. Super. Et maintenant, je vais consoler mon nom. Et dans le second MGS, au lieu des exportations de modules, je tape simplement exporter mon nom. C'est ça. Et il a l'air beaucoup, beaucoup plus propre que CommonJS. Essayons maintenant un test de nœud exécuté. Oui, et nous aurons, je ne trouve pas de module aha IC. C'est parce que je dois probablement spécifier l'extension. Laissez-moi l'essayer. Oui, exactement. Il y a donc un autre inconvénient avec l'utilisation du module ECMO scripts à l'état actuel de NodeJS, je dois toujours spécifier l'extension avec CommonJS, je peux admettre spécifier l'extension lorsque a Importer différents modules comme ça, mais avec le module de scripts ECMO, je dois le faire. Le résultat est le même. Je vais lancer le script. J'ai Andrew, mais vous pouvez voir maintenant qu'il utilise le module de scripts ECMO dans notre projet. Lorsque nous allons faire tout ce développement, nous allons utiliser l'environnement Node.JS et nous allons utiliser les modules Achmat Script. Vous pouvez voir qu'il s'agit d'un exemple très simple. Il utilise ici des scripts uniques, rien de compliqué. Cependant, nous avons évidemment besoin de quelque chose de plus complexe et c'est notre sujet pour la prochaine vidéo. voit là-bas. 17. Node.js et NPM - Partie 2: Bienvenue dans la deuxième partie de l'introduction de NodeJS et la dernière partie nous avons discuté de ce qui n'est pas oui, et de la façon dont nous sommes capables d'exécuter des scripts uniques. Dans cette vidéo, nous allons parler de NPM et façon dont nous pouvons utiliser npm pour gérer les dépendances de projets et de projets. Allons-y. Tout d'abord, qu'est-ce que le NPM ? Npm signifie Node Package Manager et il est déjà fourni avec NodeJS. Donc, si vous n'avez pas installé JSON, vous avez déjà NPM pour vérifier qu'à l'intérieur du terminal, tapez simplement npm. Il existe une version de tableau de bord et elle imprimera la version NPM actuellement installée. Maintenant, comment pouvons-nous utiliser npm ou ce qu'il fait pour nous ? Eh bien, le fait est que dans les vrais projets JavaScript, il y a des dépendances ou des paquets de projets. Il s'agit donc de bibliothèques, de différents modules d'Internet ou différents outils que nous installons dans notre projet. Et npm est l'outil qui nous permettra de le faire. Donc, pour installer ces paquets, mais d'abord, comment initialiser npm dans notre dossier de projet. Pour ce faire, nous devons utiliser la commande npm init. Et une fois que vous exécutez cette commande, elle vous demandera quelques éléments tels que le nom du paquet, la version et d'autres choses. Il suffit de sauter cela en appuyant sur Entrée tout le temps. Une fois la commande terminée. Dans l'itinéraire du projet, vous verrez le paquet de fichiers package.json Jason est ce fichier manifeste qui décrit notre projet à l'intérieur, nous pouvons voir le nom du projet, peut-être la description de la version du projet. Si nous allons mettre les lumières de cet auteur et voir si nous avons scripts et quelques autres sections dont nous allons parler dans une seconde. La question est de savoir quel paquet JSON fait pour nous ? Comment cela peut-il être utile ? Allons dans le navigateur. allons chercher NPM dans Google et nous finirons sur le site officiel de NPM. Npm possède le registre NPM. Node Package Manager est donc un outil qui nous permet de gérer les paquets au sein de notre projet. Mais d'où viennent ces colis ? Ils proviennent du registre NPM. Le registre NPM est l'océan de différents paquets, outils et bibliothèques que nous pouvons installer dans notre projet à l'aide de npm. Ainsi, sur ce site, vous pouvez rechercher différents forfaits. Il y a des millions, des milliards de bibliothèques différentes que nous pouvons utiliser. Mais pour l'instant, cherchons juste celui que j'ai préparé, c'est-à-dire le cowsay. Cliquons là-dessus. Et maintenant, nous pouvons voir la page Web officielle de ces emballages sur cette page, nous pouvons trouver sa documentation, comment installer ce paquet, ce qu'il fait, comment l'utiliser et toutes autres choses. Nous pouvons voir qu'il y a des dépendances. Le fait est que les paquets publiés dans le registre NPM ont des dépendances, et ces dépendances sont également des packages publiés. Et ces paquets peuvent également avoir des dépendances. Les dépendances, dépendances et dépendances des dépendances sont appelées dépendances homologues. Sur cette page, nous pouvons également trouver des informations telles que la version, nombre de téléchargements hebdomadaires que l'auteur a publiés pour la dernière fois, et d'autres choses. Nous allons lire la documentation. Que voyons-nous ici ? Tout d'abord, que fait ce paquet ? Eh bien, ce paquet est fondamentalement très simple. Son seul but est d'imprimer cette vache dans le terminal. Voyons donc la partie d'installation, npm install moins g cowsay. Copions cette commande et mettons-la dans notre terminal. Voyons ce qui va se passer. Nous pouvons donc voir quelque chose qui se passe. Pouvons-nous voir que l'installation a déjà réussi ? Nous pouvons voir Edit 41 paquets et la version que nous avons installée, soit 1.5. Pourquoi un forfait 41 ? Comme je l'ai mentionné précédemment, paquets ont leurs propres dépendances, et ces dépendances ont leurs propres dépendances. Et finalement, nous avons cet arbre de dépendance. C'est pourquoi, au final, nous avons 41 paquets au total. Nous n'avons pas installé Cowsay. Qu'est-ce qu'il a fait ? Eh bien, il vient d'installer Cowsay dans notre système en tant que paquet mondial. En tant que paquet global car nous avons un indicateur moins g pour vérifier que nous pouvons taper npm list moins g, puis tiret, profondeur de tiret est égale à 0. Exécutons cette commande et voyons ce qui est imprimé. J'ai déjà quelques paquets installés ici dans le monde entier, mais dans votre liste, vous verrez cowsay. Qu'est-ce que ça veut dire ? Qu'est-ce qu'il nous donne ? Cela signifie que nous pouvons maintenant utiliser le package comme CLI dans le monde entier dans notre système. Voyons le parc d'utilisation, Cowsay JavaScript. Nous allons le copier. Et essayons de l'exécuter dans le terminal. J'ai cette jolie vache ici qui dit JavaScript. C'est donc exactement ce que fait ce paquet, et nous pouvons l'utiliser comme CLA dans notre terminal. Et peu importe où il est disponible dans le monde entier. Si j'ouvre une autre instance Git Bash ici, je pourrai toujours utiliser cowsay. Parce que encore une fois, nous avons installé Cowsay en tant que paquet mondial. Cela signifie que nous pouvons l'utiliser n'importe où. Il existe deux types de paquets, ou je dirais deux façons d'installer un paquet. Tout d'abord, nous pouvons l'installer dans le monde entier, comme vous le voyez ici. Ainsi, lorsqu'un package est installé globalement, il n'est lié à aucun projet, est simplement installé globalement dans votre système. La deuxième méthode consiste à installer un package en tant que dépendance au projet. Lorsqu'un package est installé en tant que dépendance de projet, tout d' abord, il n'est pas disponible globalement. Il devient disponible uniquement dans projet dans lequel il a été installé, nous allons d'abord désinstaller Cowsay en tant que package global, et installons-le en tant que dépendance de projet. Donc, nous allons d'abord taper npm install moins g saké de vache. Vous verrez à la fin que vous avez supprimé 41 colis grade. Maintenant pour installer cowsay en tant que dépendance de projet, nous devons faire npm installé cowsay, mais cette fois sans drapeau moins g, exécutons cette commande et voyons ce qui va se passer. Quoi de neuf dans l'Explorateur de fichiers latéral. Donc d'abord, si nous ouvrons le paquet Jason, nous verrons une nouvelle section sur les dépendances. Ainsi, comme le paquet Jason est notre fichier manifeste , il contiendra toutes les dépendances que nous avons installées. Nous n'avons donc installé qu'un seul cow-say de dépendance de cette version. Maintenant, nous voyons également package.json. Et package.json apparaît chaque fois que vous installez une dépendance package.json pour objectif de rechercher les versions des dépendances installées et des dépendances des dépendances. De cette façon, nous pouvons éviter différents problèmes liés aux résolutions de versions. Et nous avons également un dossier de modules de nœuds. Le dossier des modules de nœuds est le dossier dans lequel tous les packages ont été installés. Si nous ouvrons ce dossier, nous verrons ici un tas de paquets différents avec Cowsay. Ce sont les 41 paquets que nous avons vus avoir été installés. Ils sont ici sous Modules Node. Si nous voulons supprimer ce dossier, il sera supprimé. Revenons maintenant à Cowsay et voyons comment nous pouvons réellement utiliser ce paquet. Par conséquent, si nous faisons défiler vers le bas, nous pouvons voir l'utilisation comme un module. Rappelez-vous que j'ai dit à ceux que tous les fichiers dans Node.JS, nos modules sont identiques avec les paquets. Étant donné que les paquets du registre NPM sont également des fichiers JavaScript, cela signifie qu'il existe des modules. Voyons donc comment nous pouvons l'utiliser comme module. Et en regardant cet extrait de code, je peux dire que cet exemple utilise requiert, qui signifie qu'il utilise le système d'importation CommonJS. Mais maintenant, nous savons qu'il existe CommonJS et qu'il existe également des modules ECMO Script. Au lieu de cela, nous allons utiliser des modules atmosphériques. Nous allons donc copier cet exemple. Et mettons-le à l'intérieur de nos appareils de test. Mais au lieu d'exiger, j'utilise lors de mon importation de script. Nous allons donc taper le cowsay importé de Cowsay. Et ici, je dois spécifier le nom du paquet, où le nom de dépendance du paquet JSON. Je n'ai pas besoin de spécifier le chemin où je n'ai pas besoin de référencer les modules de nœuds. J'ai juste besoin de taper le nom de dépendance, qui va être cow-say. Maintenant, supprimons ceci et supprimons cela, et sauvegardons cela. Et essayons d'exécuter ce script. Je vais taper node test.js. Et voyons voir, encore une fois, nous avons cette vache qui dit que je suis Moodle, mais maintenant le cowsay fait partie de notre projet. Lorsque nous l'avons installé à l'échelle mondiale, il était indépendant. C'était juste un outil de notre système que nous pouvons utiliser via le terminal. Mais puisque maintenant Cowsay fait partie de notre projet, nous sommes limités à cow-say dans ce projet spécifique. Si je vais supprimer le dossier des modules de nœuds, allons-nous de l'avant et supprimés complètement. Et si je vais essayer d'exécuter à nouveau ce fichier, vous verrez que le paquet cowsay ne peut pas trouver car nous venons de supprimer tous les fichiers nécessaires à l'exécution de cowsay. Donc, pour réinstaller les paquets répertoriés dans le paquet Jason répertorié dans notre projet, nous devons simplement taper npm installé chaque fois que nous n'avons pas de dossier de modules de nœuds, mais nous devons installer les packages. Nous tapons simplement npm install. Donc, ce qu'il va faire, il regardera à l'intérieur du paquet Jason. Il recherchera la section dépendances et installera les paquets manquants. C'est ça. Maintenant, vous pouvez voir à nouveau le paquet 41, si j'exécute à nouveau le script, la vache était là. Génial. Examinons le package JSON et trouvons la section scripts ici. Je veux parler de cette section maintenant, le fait est que dans les projets, il y a quelques scripts spécifiques aux projets. Cette section s'appelle donc les scripts NPM. Par conséquent, les scripts spécifiques au projet sont généralement définis à l'aide de scripts NPM. Nous avons déjà défini ici un script de test, mais nous allons le supprimer et définir notre propre script. Il peut s'agir de n'importe quoi, nous pouvons le nommer comme nous voulons. Par exemple, mon script de test. Et ici, nous devons taper ce que fera le script. Par exemple, si dans le terminal pour imprimer quelque chose dans la sortie, j'utiliserais la commande echo, echo, bonjour et bonjour est imprimé. Eh bien, ici, nous pouvons définir la même chose. Par exemple, mon script de test exécutera echo hello, par exemple, à code hello. Maintenant, pour exécuter ce script NPM, je dois taper npm run et le nom du script, qui va être mon script de test. Une fois qu'ils exécutent cette commande, commande recherchera le package JSON dans ce dossier, et elle regardera à l'intérieur de cette section de script, et elle trouvera mon script de test, puis elle exécutera tout ce qui est écrit. ici. Essayons ça. Vous pouvez voir que j'ai Hello, essentiellement le même résultat. C'est ça, pourquoi cela pourrait être utile. Eh bien, il y a des situations où nous pourrions avoir un scénario vraiment, très long ici. Imaginez que ça se passe comme ça. Et maintenant, au lieu d'écrire tout cela, tout le temps, nous pouvons simplement exécuter npm, exécuter mon script de test, et cela fera le truc. C'est ça. Nous allons parler plus en détail des scripts NPM une fois que nous aurons échafaudé un vrai projet React pour l'instant, laissons-le vide. Une autre chose que je veux mentionner ici est que les dépendances de projets peuvent être de deux types. En fait, il existe des dépendances régulières que nous utilisons dans notre code source, et il peut y avoir des dépendances de développement. Les dépendances de développement font donc également partie du projet, mais elles ne sont pas référencées dans le code source. Ils sont utilisés uniquement pour le développement. Ces paquets que nous allons installer pour le développement seront donc prédicateurs et ES lint. Et nous allons les installer en tant que dépendances sourdes. Nous en parlerons dans les prochaines vidéos. Ils seront utilisés pour faciliter notre développement, mais ils sont facultatifs. Si nous voulons supprimer les dépendances de développement, le projet sera toujours en mesure de s'exécuter. Cependant, si nous supprimons cette dépendance à partir d'ici, si nous voulons supprimer des modules de nœuds, le projet ne pourra pas être exécuté car il dépend de cowsay. Par conséquent, si nous supprimons les dépendances de développement, le projet sera toujours en mesure de s'exécuter. Mais si nous supprimons la dépendance principale, le projet ne sera pas exécuté car la dépendance est maintenant manquante car notre projet en dépend. Mais les dépendances de développement ne sont que des dépendances pour notre environnement de développement. Il n'a pas d'influence directe sur le code source. Nous en parlerons encore une fois, une fois que nous parlerons de prédicateur dans l'essence. Mais pour l'instant, je pense que c'est suffisant. Tous les projets JavaScript sont gérés de la même manière qu'à l'aide de npm, les packages de registre NPM, vous aurez empaqueté JSON dans votre dossier racine. Des dépendances seront installées à partir du registre NPM. Vous allez ensuite référencer ces dépendances dans votre code source. En fin de compte, lorsque vous devez développer le projet ou créer le projet, scripts NPM seront définis ici dans le package Jason. Et c'est tout. Voici à quoi ressemblent tous les projets JavaScript. C'est tout pour NodeJS. Et je vous verrai dans la vidéo ES peluche et prédicateur. 18. Qu'est-: Dans cette vidéo, j'aimerais parler de prédicateur dans ES lint. Quels sont ces outils ? Pourquoi nous soucions-nous et comment ils vont nous aider ? Découvrons-le ensemble. Donc, tout d'abord, je veux mentionner que dans cette vidéo, je vais réutiliser le même projet que celui que j'ai créé dans la vidéo d'introduction Node.JS. Comme vous vous en souvenez, il ne contient qu'une seule dépendance, c' est-à-dire le cowsay, et nous l'utilisons uniquement dans MGS. Commençons par ça. prédicateurs sont un outil qui va formater tous nos fichiers. Il n'a qu'un seul but de formater des fichiers. Il gagne le conflit prédéfini. Voyons donc comment utiliser le prédicateur. Si nous allons sur Google et que nous cherchons un prédicateur, vous vous retrouverez sur le site officiel. Allons à la documentation officielle de l'installation et suivons-la. Prédicateur installé d'abord localement. Copions cette commande et mettons-la à l'intérieur du terminal. L'indicateur save-dev à l'intérieur de la commande signifie que ce prédicateur de paquet sera installé en tant que dépendance de développement. Si nous allons ouvrir package.json, nous verrons ici une nouvelle section, les dépendances de développement, qui sont les dépendances des développeurs. Et nous verrons un prédicateur ici. Maintenant. Continuons sur les chiens. Et ici, nous avons créé un fichier de conflit vide. Encore une fois, je vais juste copier la commande. Mettez-le dans le terminal, et cela créera un prédicateur RT JSON vide pour moi, chaque prédicateur d'outil et Eastland, nécessite un fichier de configuration pour comprendre ce que nous voulons de cet outil. Et nous pouvons voir toutes ces options de conflit pour prédicateur dans la documentation sous le lien Options. Si nous allons ici, nous verrons ici différentes options que nous pouvons utiliser à l'intérieur de l'image RC Jason, par exemple, onglet avec. Je vais donc simplement utiliser la largeur de la tabulation à partir d'ici. Je vais juste le copier, mettre dans la configuration. Et nous pouvons voir que la valeur par défaut est deux. Laissez-moi peut-être en mettre 10 ici et voyons ce qui va se passer. J'ai enregistré le dossier. Je retourne pour tester MGS. J'appuie sur Control S pour enregistrer le fichier. Et boum, vous voyez que l'indentation a changé. Maintenant. Il utilise une largeur de robinet de 10 lignes vides. Vous pensez probablement à ce que c'est automatiquement comme formater ce fichier. Le fait est que ce que nous venons d'installer dans notre projet sous des dépendances de développement, nous avons installé prédicateur comme outil, mais en dehors de la mise en forme, comme nous le voyons, fonctionnalité est disponible via le code VS extension que vous auriez déjà dû installer. Si ce n'est pas le cas, accédez à l'onglet Extensions. Cherchez des prédicateurs ici. s'agit de l'extension et installez-la et assurez-vous qu'elle est déjà configurée. Si ce n'est pas le cas, pour visionner vidéo VS Code Configuration d'un projet à l'autre, vous souhaitez réutiliser le prédicateur. Vous ne souhaitez pas toujours spécifier différentes options ici. Croyez-moi, il n'y en aura que quelques-uns. Pour cette raison, je vais partager avec vous ce cadeau et vous pourrez simplement copier et coller conflit de prédicateurs que j'utilise partout. Laissez-moi le mettre ici et laissez-moi enregistrer le dossier. Comme vous pouvez le constater, j'utilise cinq commandes et c'est suffisant pour qu'un prédicateur fonctionne. Vous pouvez voir si je vais le sauver. Il utilise ce conflit maintenant. Génial. Donc, en répondant à la question, pourquoi avons-nous besoin de prédicateur ? Tout d'abord, vous devez comprendre que le prédicateur est un outil facultatif, mais il est fortement recommandé d'avoir prédicateur dans votre projet JavaScript. La raison en est que nous voulions rendre notre code aussi lisible et maintenable que possible. Et le prédicateur va nous aider avec cela. Lequel préférez-vous ? Ce formatage bizarre ? Parce que pour une raison quelconque, vous n'avez pas mis fin à l'indentation manuelle ou préférez-vous un code très propre obtenu avec le prédicateur ? Je suppose que ce sera la deuxième option. Enfin, considérez une situation où vous avez beaucoup de fichiers dans le projet et qu'ils ne sont pas formatés. Prédicateur. Alors, que faire dans ce cas ? Eh bien, la première option est bien sûr, d' aller dans chaque fichier, appuyer sur Control S pour enregistrer chaque fichier manuellement, puis le prédicateur se formera à eux. Mais ce n'est pas très pratique. Il serait préférable de créer un script qui formatera tous nos fichiers en même temps. Et ce script nous utiliserons prédicateur, et c'est ici que les scripts NPM entrent en jeu. Créons un script NPM qui utilisera le prédicateur pour formater tous nos fichiers à l'intérieur du projet à l'aide du prédicateur RC JSON. Donc, si nous revenons à la documentation du prédicateur, passons à la page d'installation. Défilons vers le bas et ici nous pouvons voir maintenant formater tous les fichiers avec prédicateur et nous avons cette commande et un tiret de prédicateur px, tiret droit point. Laissez-moi le copier. Revenons aux scripts NPM. Nous allons donc définir et vous le script NPM que nous nommerons format. Dans ce script, je vais mettre n px, tiret de prédicateur, tiret, point droit. Cependant, nous n'avons pas vraiment besoin de Px ici, vous pouvez lire ce qui est n px dans cette alerte jaune. sommes-nous sûrs ? Ainsi, n px est essentiellement un outil fourni sans JS qui permet d' exécuter des paquets directement depuis le registre NPM sans installation. Si je n'ai pas installé le prédicateur et que j'utiliserais un tableau de bord de prédicateur px, tiret Reidar. Cela fonctionnerait car NP x utilisera prédicateur sans installation directement à partir du registre NPM, mais nous n'en avons pas du tout besoin. Nous avons installé un prédicateur. Et lorsque nous écrivons un prédicateur ici dans le script NPM, il utilisera le prédicateur installé dans les modules de nœuds. Essayons cette commande que nous venons de définir. Je vais retourner à mon terminal et j' exécuterai le format npm run. Vous verrez que quelque chose se passe. Et maintenant, certains fichiers sont affectés, essentiellement tous. Secouons-les. Nous avons donc ce fichier formaté, ce fichier formaté, ce fichier formaté. Donc, en gros, tout est maintenant formaté à l'aide d'un prédicateur. Revenons au prédicateur RC Jason, et passons peut-être à 10 tablettes. Et réexécutons le format d'exécution de la commande npm. Et vous verrez que tous les fichiers sont désormais formatés contre les conflits de prédicateurs que nous venons de définir. C'est ça. Maintenant, vous savez ce que fait le prédicateur et pourquoi en avons-nous besoin ? Résumons rapidement. Preacher est un outil qui formatera les fichiers à l'intérieur de notre projet actuel, Prettier a un fichier de configuration qui est le prédicateur de points RC JSON. Nous pouvons utiliser preacher via les scripts NPM ou utiliser preacher via l'extension VS Code que nous avons installée. Donc cette extension, la seule chose qu'elle fait, elle nous permet simplement de formater des fichiers. Lorsque nous cliquons sur le bouton Enregistrer, si nous voulons désactiver cette extension ou si nous ne l'avons pas, le prédicateur ne se forme pas à nos fichiers lorsque nous cliquons sur Enregistrer, la seule occasion pour nous de formater le les fichiers seront via notre script NPM personnalisé, que nous avons nommé format. Mais avec l'extension, c'est beaucoup plus pratique. Passons maintenant à ES lint avant d'aller à Eastland, permettez-moi de revenir rapidement à notre paramètre précédent ici et de relancer la commande format. Génial. Qu'est-ce qu'Eastland ? Eastland est également un outil facultatif qui nous permettra de vérifier JavaScript par rapport à certains problèmes courants, rapport à certaines directives de code prédéfinies. Nous aurons besoin d'ES lint pour vérifier que nous n' avons pas d'erreurs très simples dans notre code, telles que des variables non définies, des variables inutilisées, ou peut-être que nous avons un morceau de code mal utilisé et ES lint va faites-nous savoir à ce sujet. Encore une fois, comme avec la pression, allons sur Google et cherchons les peluches ES. Cliquons ici. Vous pouvez voir que les peluches ES sont linéaires. Le linéaire est donc un outil qui vérifie réellement le code contre les erreurs. Cliquons sur Get Started, et suivons simplement la documentation. Donc npm installe ES lint save-dev, copiez. Remettons-le dans le terminal. Dash, Dash Save Dev Flag garantira que ES lint sera installé en tant que dépendance de développeur dans le paquet Jason, encore une fois, les dépendances de développement d'eau, les dépendances de développement sont les outils que nous utilisons dans le développement environnement. Ils ne font pas partie du code source. Donc, si je veux retirer l'Islande et le prédicateur, mon projet sera toujours en mesure de fonctionner. Super. Nous avons installé ES lint. Nous allons maintenant suivre la documentation. Il nous suggère donc d'utiliser la commande init pour initialiser le fichier de configuration. Créons-le manuellement au lieu de cela. Je vais donc créer un nouveau fichier ici, et je le nommerai point ES lint RC. Donc, ce sera mon fichier de configuration ES lint. Pour configurer ES lint, nous devons suivre exactement le même schéma qu'avec le prédicateur. Vous devez créer un fichier de configuration et nous devons mettre quelques commandes pour que Yes Lint comprenne ce que nous voulons de lui. Revenons sur le site Web et nous avons ici la configuration. Alors, nous allons peut-être le copier. Mais nous allons modifier quelques options ici. Je vais le mettre ici. Je vais supprimer cela et nous finissons avec la section des règles. Dans la section règles en Islande, RC, nous définissons les règles ES peluches que nous aimerions utiliser dans notre projet par rapport laquelle notre code sera vérifié. Par exemple, je peux taper une règle appelée non virus inutilisé, et nous devons fournir quelques options ici. Et vous pouvez voir qu'il me donne même éditeur de complétion automatique désactivé et usé. Alors, qu'est-ce que c'est ? Donc, si je dois différer, cette règle sera désactivée et mon code ne sera pas vérifié par rapport à cette règle. Si je vais proposer une option pour une règle de peluche ES. Cela signifie que lorsque je vais à l'encontre de cette règle, ES lint me donnera un avertissement. Et j'ai une troisième option, qui est une erreur. Cela signifie que chaque fois que je vais à l'encontre de ce rôle, oui, Lint produira une erreur. Il y a donc, disons, certaines règles cruciales que je veux être signalée pour moi comme une autre. Et il y a peut-être des règles mineures que je veux me signaler comme des avertissements. Nous pouvons trouver toutes ces règles dans la documentation. Je vous suggère toujours de regarder à l'intérieur de la documentation. Vous pouvez tout trouver ici pour que vous puissiez même voir les options d'erreur d'avertissement ici, exactement ce qui vous est dit. Maintenant, nous pouvons accéder au Guide de l'utilisateur et nous pouvons passer aux règles. Il s'agit d'une référence aux règles. Vous trouverez toujours toutes les règles ici. Par exemple, si je ne cherche pas de barres inutilisées, vous pouvez le voir ici. Nous allons le chercher. Oui, interdire les variables inutilisées. C'est donc ce que fait la règle, c'est-à-dire que cela permet l'utilisation de variables inutilisées. Essayons donc. Je vais revenir à mon code. Et voici ce que j'ai une erreur d'analyse, l'entrée clé est réservée. Eh bien, oui, nous devons d'abord laisser ES lint comprendre que nous utilisons la dernière syntaxe JavaScript. Pour ce faire, nous allons à ES lint. Ici, nous ajoutons une autre option qui sera des options d'analyseur. Ainsi, dans les options d'analyseur, nous devons fournir la version AVMA. Et mettons 2020 ici lorsque je sauvegarde le fichier et revenons à tester MGS, et je vois une autre erreur disant que l'importation et l'exportation peuvent apparaître uniquement dans module de type source provenant de ES lint à nouveau. Je retourne donc à oui Lind et je peux fournir une autre option ici sera le type source, niveau de module. Maintenant, nous n'avons pas d'erreurs ou d'avertissements, donc nous n'avons pas de règle de virus inutilisée définie qui produira une erreur chaque fois que nous allons à l'encontre , c'est vrai, allons tester les mgs. Et ici, créons une variable d'utilisation finale. Je vais peut-être le nommer Hello. Et que voyons-nous ici ? Nous voyons qu'il est surligné par une ligne rouge. Si je survole, vous voyez à quel point est attribuée à une valeur basse mais jamais utilisée. Et cela vient, comme vous pouvez le constater dans ES lint, aucune variable inutilisée. Si je vais revenir à ES lint RC, et si je vais désactiver cette règle, désactivez la vérification par rapport à cette règle. Vous verrez maintenant que je n'ai pas d'avertissement ni d'ajout. Revenons ici et mettons ça comme un avertissement. Et nous pouvons voir qu'il est jaune car c'est un avertissement maintenant. Et si je le remet à l'état, il deviendra rouge. Génial. Gardons peut-être un avertissement et revenons à la documentation. Revenons donc à la page d'installation. Et ici, nous pouvons voir tout en bas que nous pouvons également mettre l'option extents à l'intérieur de la peluche ES. Le fait est que ES lint a beaucoup de règles différentes et écrit toutes ces règles manuellement ici tout le temps. Ce n'est pas très pratique car nos peluches ES seront jolies, assez longues. Ce n'est pas pratique. Donc, pour résoudre ce problème, ES lint a des fichiers de configuration ou disons que les conflits prédéfinis que nous pouvons étendre à partir d'ES lint sont intégrés dans le conflit recommandé ES lint. Il suffit donc de le copier et de le mettre en haut. Maintenant, nous utilisons le condamné recommandé. Si nous revenons à tester MGS, nous constatons que la console n'est pas définie maintenant. Eh bien, c'est parce que ES lint les choses que nous exécutons dans l'environnement du navigateur. Et pour cela, nous devons encore préciser que nous ne courons pas dans le jazz. Pour cela, nous devons placer les options ENV ici et nous précisons que nous sommes à l'intérieur. Remarque. Et nous allons dire vrai, nous pouvons mettre en place de nombreuses options différentes comme ES6 pour spécifier à nouveau que nous utilisons la dernière syntaxe JavaScript. Et il y a beaucoup d'options différentes. Et croyez-moi, vous n'avez pas besoin de tous les connaître. Parce que vous avez toujours la première documentation que vous pouvez utiliser lorsque vous rencontrez des problèmes avec la compréhension d'Eastland ou que vous pouvez simplement copier et coller oui. Conflit de liaison depuis quelque part et adapté à vos besoins. Il s'agit d'une question très basique. Gardons ça tel qu'il est. Une note importante que je voulais souligner est que vous ne pouvez voir que ce jaune planer ou peut-être que vous pouvez voir ce rouge planer ici. Je veux dire, un reportage direct dans VS Code, grâce à l'extension. J'ai donc installé l'extension ES lint. Celui qui intègre ES lint dans le code VS. C'est pourquoi je vois ici cette ligne rouge. Si cette extension était désactivée ES lint ne me rapporterait pas vraiment, comme je la vois en ce moment. Il ne serait pas devenu rouge. La seule façon de connaître cette erreur serait d'exécuter la commande ES lint, comme nous l'avons fait auparavant avec prédicateur. Nous allons peut-être créer un autre script NPM et définir la commande pour Eastland. Revenons à package.json. Ici, je vais mettre la commande peut être lint et j'appellerai ES lint astérix dot JS ou comme nous avons l'extension MGS que je vais mettre et gs ici, nous allons courir à ES lint contre tous les fichiers avec l'extension MGS. Allons dans le terminal intégré et exécutons le script que nous avons défini, npm lance lint, et vous verrez ES lint rapporte un problème. Une valeur est attribuée à Hello, mais jamais utilisée. C'est donc très pratique car dans le code de production, nous ne voulons apparemment pas avoir ni utiliser de variables. Et il y a beaucoup d'erreurs et d'avertissements différents que nous pourrions recevoir. Mais croyez-moi, c'est pour notre bien. Es lint nous aidera à maintenir notre base de code avec moins d'erreurs possible. Nous allons beaucoup utiliser les peluches ES combinées à un prédicateur. Cependant, il y a un problème avec ES lint et Preacher. Le fait est que certaines règles de prédicateur chevauchent les règles ES sur les peluches. Et pour corriger cette erreur, nous devons naviguer vers ES lint. Si nous allons à ES lint nous faisons défiler vers le résumé ici, nous pouvons voir utiliser ES lint convict preacher pour que preacher et ES link jouent bien ensemble. Naviguons vers le prédicateur ES Lean Conflict. Et passons à la partie d'installation. Nous allons le copier. Nous allons le mettre ici. Et encore une fois, dash, dash, save dev flag pour installer ce paquet en tant que dépendance de développement. Si vous allez regarder à l'intérieur des dépendances de développement, vous verrez maintenant un prédicateur de conflit oriental. Et voyons ce que nous avons à faire au prédicateur de la vaste baie de votre fichier Eastland RC. Cela prolonge d'autres configurations et pressions. Très bien, alors disons, copions le prédicateur. Revenons à ES lint étends. Et vous pouvez voir dans l'exemple qu'il utilise un tableau. Ainsi, ES lint prend en charge les deux. Transformons cela en tableau. Et mettons le prédicateur ici. Joli. Sans ce paquet, sans ce prédicateur d'ESPN, vous vous retrouverez dans une situation où vous aurez des erreurs Eastland et vous ne comprendrez pas pourquoi vous les avez. Ce package garantit que vous ne rencontrez aucun conflit. Et je verrai que c'est ça. C'est tout ce que je voulais dire sur les peluches ES et prédicateur pour résumer rapidement, qu'est-ce qu'Eastland ? Eastland est un outil qui nous permettra de vérifier notre code, notre code JavaScript, par rapport certaines directives communes prédéfinies. Cela finira par rendre notre code moins sujet aux erreurs, et cela veillera à ce que notre base de code aussi propre que possible. Preacher formatera notre base de code afin qu'elle devienne aussi lisible que possible. Une fois de plus, je vais dire que ces outils sont facultatifs, mais vous verrez prédicateur et ES lint dans presque tous les projets JavaScript car les gens veulent que leurs projets soient lisibles. et pour être moins sujet aux erreurs. C'est ça. On se voit dans le prochain. 19. Qu'est-: Dans cette vidéo, j'aimerais parler des serveurs. Qu'est-ce qu'un serveur ? Qu'est-ce qu'une API ? Qu'est-ce qu'une API Rest ? Qu'est-ce que GraphQL ? Découvrons-le ensemble. Commençons d'abord par le serveur. Qu'est-ce qu'un serveur ? Un serveur, c'est juste un ordinateur quelque part sur Internet. Il exécute des logiciels. Et ce logiciel sur cet ordinateur donne des leçons pour nos demandes entrantes. Par exemple, lorsque je navigue sur n'importe quel site Web, lorsque je clique sur ce lien, mon navigateur envoie une demande à ce serveur. Sur la gauche, c'est mon navigateur, et il envoie cette demande à ce serveur. Ce serveur gère la demande entrante et renvoie les fichiers HTML, CSS et JavaScript. Encore une fois, un serveur, c'est juste un ordinateur qui exécute logiciel qui gère nos demandes entrantes et renvoie une réponse. Maintenant, que se passe-t-il si je ne veux pas toujours recevoir des fichiers HTML, CSS et JavaScript, peut-être que je veux simplement lancer une requête sur le site Web, comme dans la barre de recherche. Dois-je renvoyer du code HTML à nouveau ? Non, vous ne le faites pas. Il vous suffit d'obtenir les données, le résultat de cette requête dans la barre de recherche. Dans ce cas, les données doivent donc être transférées dans un autre format. Par conséquent, un autre format est généralement au format JSON ou XML. Mais XML est déjà obsolète, je dirais que sur le web, tout le monde utilise JSON. Cherchons donc JSON ou peut-être même pour une fausse API de repos sans espace réservé JSON . Très bien, donc nous devons d'abord savoir ce qu'est JSON. Je vais juste cliquer sur Exécuter un script ici. Et je reçois ce JSON est juste un format dans lequel les données sont transférées sur le Web. Il peut être utilisé non seulement sur le Web, mais dans n'importe quel autre scénario. Il est tout simplement très facile de transférer des informations dans ce format. Il ressemble beaucoup à un objet JavaScript. Revenons maintenant à notre toile. Alors, comment s'adapte-t-il à ce scénario ? Imaginez que je suis ici sur le site Web et que je tape quelque chose dans la barre de recherche, qui se trouve à l'intérieur du site Web. Et je veux récupérer mes résultats de recherche au format JSON, j'enverrais une autre demande à ce serveur, et ce serveur gérera ma demande, ma requête. Il va chercher la base de données. Il va récupérer les résultats, et il m'enverra ces données au format JSON, ce qui ressemble exactement à cela. Pas besoin de HTML, de CSS ou de JavaScript. Ce type de serveur hébergeant des fichiers HTML, CSS et JavaScript, généralement appelés services d'hébergement. Ils sont donc utilisés pour héberger des pages HTML de base. Ils mettent simplement vos fichiers, HTML et CSS sur leur machine, et ils les diffusent simplement sur leur ordinateur. C'est ça. Qu'en est-il des serveurs API ? Donc, qu'est-ce qu'une API en premier lieu, API signifie interface de programmation d'applications, et elle convient généralement aux serveurs API uniquement parce que le plus souvent, les serveurs API servent cet objectif d' intermédiaire entre votre base de données et sous-jacente. Mais ce n'est pas seulement le cas. Eh bien, ils sont généralement appelés serveurs API car ils sont interfaces pour tout ce qui se trouve derrière ce serveur. C'est pourquoi on les appelle API ou interfaces ou quoi que ce soit qu'il les appelle. Jetons un coup d'œil à cet espace réservé JSON une fois de plus. J'envoie donc une demande à cette URL. Je vais juste le copier et le mettre ici. Si j'y accède, vous le verrez probablement dans un format brut comme celui-ci. Ce serveur agit comme une API Rest car il suit le format Rest. Il s'agit donc d'une API car il s'agit d'une implémentation de serveur personnalisée. C'est donc ce logiciel personnalisé installé sur le serveur qui gère ma demande et renvoie Jason, c'est la partie API. Maintenant, qu'est-ce que le repos ? Rest signifie qu'il suit le modèle de conception reste lors de l'implémentation de repos. Cela signifie que le code de type espace réservé JSON du serveur qui calme expose plusieurs points de terminaison auxquels nous sommes en mesure d'accéder afin de récupérer des données. Par exemple. Allez à la barre oblique pour faire une barre oblique. Il s'agit de todo id. Nous obtenons des données concernant l'ID numéro 1. Si je tape sept ici, vous verrez que j'ai maintenant l'identifiant utilisateur un, ID sept et des données différentes. S'il doit y avoir quatre, il s'agira de données différentes. Si c'est quelque chose comme ça, vous ne verrez rien car il n' existe pas leur serveur d'API, celui-ci auquel nous accédons actuellement est en fait une API pour la base de données sous-jacente qu'il utilise sous le capot. D'accord, et il suit le schéma du reste. Vous pouvez accéder au site Web principal ici. Vous pouvez également rechercher d'autres points de terminaison disponibles sur cette ressource. Par exemple, vous pouvez voir les ressources ici. Nous pouvons aller à des publications, nous pouvons aller aux utilisateurs, nous pouvons aller à des albums. Et vous pouvez voir qu'ils ont tous des points de terminaison différents. Encore une fois, c'est parce qu'il suit l'implémentation de repos. Imaginez une grande maison avec beaucoup de portes. Une grande maison est donc le serveur, le serveur API. Et ces portes sont des points auxquels vous accédez pour obtenir des données. Et ces données sont transférées au format JSON. Parce qu'il est très simple de comprendre ce format. Il est très léger et facile à lire ou à écrire, mais le reste n'est pas la seule implémentation de serveur qui puisse exister dans la nature. Il y en a un autre très populaire en ce moment, appelé GraphQL. Et il y a évidemment les autres. Donc, mais à l'heure actuelle, principalement deux types, l'API Rest et l'API GraphQL. Graphql est à la fois un langage et en même temps l' implémentation du serveur, l'architecture. Cherchons donc GraphQL dans Google ou peut-être GraphQL Explorer. Cela nous amènera à cette page de documentation GitHub API GraphQL. Et ce sera le cas, nous finirons sur cette page. Il faudra que je me connecte pour pouvoir l'utiliser. Je vais donc me connecter avec mon compte. Si vous n'avez pas de compte GitHub pour le moment, c'est très bien. Il suffit de regarder la vidéo. C'est donc le langage GraphQL. C'est à ça que ça ressemble. Pour demander des données au serveur GraphQL, nous devons envoyer une co-variante comme papa dans ce format suivant le langage QL du graphe. Donc, si je dois l'envoyer, vous verrez que je reçois des données dans ce format et c'est au format JSON, comme vous pouvez le voir. Quelle est donc la différence entre le graphique et le repos ? Eh bien, tout d'abord, comme je l'ai déjà mentionné, API Rest a plusieurs points de terminaison. Par exemple, des todos obliques. Où est-il ? Slash les commentaires, les albums, les photos et les tâches à faire. Pour accéder aux données, votre URL doit être différente pour accéder à différentes ressources. Mais GraphQL, c'est légèrement différent. Si je clique sur Inspecter et que je vais dans l'onglet Réseau ici, lorsque je clique sur ce bouton de lecture, lorsque je clique sur ce bouton de lecture, vous pouvez voir l'URL à laquelle vous accédez, qui est un proxy barre oblique GraphQL barre oblique. Et si j'exécute une autre demande, l'URL ne change pas. Eh bien, l'implémentation du serveur GraphQL n' a qu'un seul point final par lequel toutes les demandes passent pour comprendre ce que l'utilisateur a refusé, ce que nous voulons du serveur. Nous envoyons cette co-variante au serveur. Si, par exemple, nous accédons aux références et aux requêtes dans un nouvel onglet. Cherchons donc l'utilisateur et il attend un argument. Essayons cette requête. Je vais donc supprimer tout ça. Je vais taper utilisateur, comme il est dit ici. Et nous devons présenter un argument. Vous soumettez un argument. Nous devons ouvrir la parenthèse et nous mettons cet argument ici. Login est l'argument de type string. Nous allons mettre mon surnom ici. Maintenant, entre crochets, il faut spécifier le type de données que nous devons recevoir. Il va donc s'agir d'une connexion. Si je le dis comme ça. Eh bien, j'ai essentiellement les mêmes informations, mais la requête est différente et à ce moment-là, c'est la même. Maintenant, avez-vous déjà repéré la différence ? Eh bien, la différence, la principale différence entre GraphQL et l' API Rest est que GraphQL n' envoie que les données que vous demandez, n'est-ce pas ? Donc, ici, je ne demande que la connexion dans ma requête. Cette requête est donc en fait appelée schéma, schéma que vous demandez au serveur. Très bien, donc je demande ce schéma de connexion uniquement et je ne me reconnecte qu'à l'API Rest. Si nous allons à des publications, j'ai demandé des messages. Je ne spécifie pas quels champs je veux récupérer de la pose. C'est au serveur de décider que le nom et le corps du serveur sont centrés, et nous ne pouvons pas modifier cela. Très bien, si j'accède aux publications portant cet identifiant, cela me donne le titre et le corps. Mais avec GraphQL, je suis en mesure de spécifier les champs que je veux récupérer du serveur si nous naviguons vers les chiens. Donc, connectez-vous, en fait cette requête nous renvoie le type utilisateur. Si nous l'ouvrons, l'utilisateur dispose de nombreux champs et nous pouvons réellement utiliser l'intelligence de GraphQL. Je vais juste appuyer sur l'espace de contrôle. Et ici, j'ai un espace de contrôle bio ici j'ai peut-être un nom ici, j'ai une connexion. Vous pouvez donc voir que j'utilise le langage de requête pour spécifier le champ que je veux récupérer. Et lorsque je clique sur Lecture pour envoyer la requête, vous pouvez voir maintenant que ma forme de données personnalisée est spécifiée dans la requête. C'est plutôt cool. C'est donc la principale différence. Et vous penserez probablement que GraphQL est, Oh mon Dieu, c'est incroyable. Pourquoi avons-nous même besoin d'API Rest ? Le problème est uniquement lié à mise en œuvre et à sa complexité. Graphql a été créé par Facebook a quelques années et il est devenu très populaire. Cependant, l'API Rest est plus mature et une solution testée au combat. Graphql est dur. Ce n'est pas si facile. Il est facile de consommer Graph kill, mais pour implémenter GraphQL, il faut de bonnes connaissances. L'API Rest est plus simple, plus facile à implémenter, et elle est plus intuitive que les gratifications GraphQL. Vous savez maintenant ce qu'est une API. On se voit dans le prochain. 20. Rendement côté client (SPA) en soi. Rendement côté serveur (dynamique et statique): Dans cette vidéo, j'aimerais parler applications côté client et côté serveur. Pourquoi nous en soucions-nous et pourquoi est-il important de comprendre la différence ? Allons-y en premier. Laissez-moi ouvrir ma petite toile que j'ai préparée. En haut, nous avons trois principaux types de rendu sur le Web. Le premier est le rendu côté serveur, qui est un routage côté serveur. Ensuite, nous avons un rendu côté client, qui utilise le routage côté client. Ensuite, nous avons une approche hybride, qui combine les deux. La meilleure façon de comprendre la différence entre ces trois personnes est de regarder les exemples. Et c'est exactement ce que nous allons faire. Si je vais au navigateur ici, j'ai préparé deux sites Web, site Web Steam et Netlify. Les deux sont des applications de rendu côté serveur. Et comment en savons-nous ? Si nous cliquons avec le bouton droit sur la page et que nous allons voir la source de la page, ici, nous pouvons voir le balisage. Par conséquent, si nous voyons le balisage dans la source de la page, cela signifie que la page est rendue côté serveur. C'est donc ce que vous voyez ici, a été renvoyé par le serveur lorsque j'accède à cette URL. De plus, chaque page contient des attaques uniques. Cela signifie que si je vais une autre page et si j' inspecte la source de la page de cette page, les balises Meta seront différentes et le balisage sera unique pour chaque page du site Web. Maintenant, nous avons un deuxième exemple, Netlify. Il utilise également le rendu côté serveur. Si j'inspecte la page, j'ai exactement la même photo. J'ai des méta-tags uniques et j'ai le balisage. Très bien ? Mais Netlify est différent. Le fait est que Netlify utilise des pages statiques ou un rendu statique côté serveur, tandis que Steam utilise rendu dynamique côté serveur, quelle est la différence ? La différence est que dans le cas de Netlify, toutes ces pages sont simplement statiques, elles ne changent pas. Cela signifie également que chaque page site Web Netlify possède son propre fichier HTML. Si je vais sur la page de tarification, la page de tarification possède son propre fichier HTML, tout comme la page d'accueil ou toute autre page. Et maintenant, qu'en est-il de la vapeur ? Vapeur, légèrement différente. Il utilise un rendu dynamique côté serveur. Cela signifie que cette page, par exemple, la page de jeu, n'est qu'une page squelette. Il possède le modèle qu'il utilise pour rendre des jeux. Donc, si je vais sur une autre page, vous pouvez voir qu'elle est exactement la même. La seule chose qui a été modifiée sont les informations sur la page, mais la mise en page est la même. Et cette disposition est le squelette utilisé pour insérer dynamiquement des données dans ce squelette. Et c'est exactement ce que fait la vapeur. Donc, pour toutes ces pages de jeux, ils n'ont qu'un seul squelette. Et ce squelette est réutilisé pour insérer dynamiquement les données. C'est ce qu'on appelle dynamique car chaque fois que j'envoie une demande d'accès à cette page, le serveur crée dynamiquement balisage HTML, puis il me renvoie pour refuser. C'est pourquoi chaque page est différente. Il possède un balisage unique car il a été créé ou assemblé dynamiquement sur le serveur. Contrairement aux pages statiques, balisage HTML n'est pas assemblé au moment de la demande lorsque j'accède à cette page. balisage a été assemblé lors de la création de l'application. Il a donc été créé une fois et maintenant chaque fois que j'accède à cette page de tarification, il envoie simplement le balisage statique car il n'a pas tendance à changer. Très bien, L'inconvénient des pages statiques est que si nous devons modifier quelque chose dans notre contenu statique, nous devons reconstruire l'application, régénérer les pages HTML, puis les télécharger à nouveau sur l'hébergement. Ils sont donc maintenant considérés comme étant mis à jour. Avec le rendu côté serveur, ce n'est pas le cas. Vous disposez du squelette et les données sont insérées dynamiquement. Cela signifie que les données extraites de la base de données, puis sur la base ces données, le code HTML est renvoyé. Vous n'avez pas besoin de changer quoi que ce soit. Vous n'avez pas besoin de régénérer des pages ou de faire quoi que ce soit. Seulement si vous devez modifier la disposition ou le squelette. Dans ce cas seulement, il doit être redéployé pour refléter tous les changements apportés à ce squelette. Passons au second type, qui est le rendu côté client, ou plus souvent appelé applications monopage en tant que PA. Maintenant, quels sont ces sites Web ? J'ai préparé ici deux exemples. Télégramme, version Web. Et ce site Web instantané qui a été construit avec React d'ailleurs. Donc, si j'inspecte le télégramme, Afficher la source de la page, je peux voir que je n'ai rien du tout ici. Si je vais à l'étiquette corporelle, elle est totalement vide. Toutefois, si j'inspecte des éléments de la page, le balisage est là. Que se passe-t-il ici ? Depuis le serveur ? Je reçois ce fichier HTML ours uniquement avec des bundles JavaScript. Et JavaScript est celui qui va rendre ma page, qui créera le balisage ? Qui va créer le code HTML dans le navigateur. C'est pourquoi on l'appelle le rendu côté client, car JavaScript est celui qui affichera la page à l'intérieur du navigateur une fois que nous aurons ce code HTML du serveur, c'est la différence. Ainsi, dans le rendu côté serveur, nous avons déjà assemblé et renvoyé à partir du serveur. Mais avec les applications monopage ou rendu côté client, nous n'avons pas cela. Nous avons un très strict minimum de HTML et le reste est assemblé à l'intérieur du navigateur par JavaScript. C'est ça. un inconvénient très important applications monopage ou le rendu côté client présentent un inconvénient très important. C'est mauvais pour le SEO, qui signifie optimisation des moteurs de recherche. Le fait est que si vous souhaitez que cette page soit classée et analysée par Google ou Facebook, il est toujours préférable d'effectuer un rendu côté serveur. Parce que les crawlers, ce que la mer, ils voient exactement ceci, cette page source. Ils voient le balisage, ils voient les attaques de Matt. Et en se basant sur ce balisage et les balises Meta, ils peuvent s'exécuter et comprendre de quoi consiste cette page. Cependant, mais les applications d'une seule page, les robots d'exploration, ils ne voient aucun d'entre eux. Ils n'attendent pas que JavaScript dans le navigateur assemble et restitue la page. Ils voient juste cette étiquette de corps vide et ces attaques mathématiques de base. Donc, si vous avez besoin d'un bon référencement, utilisez le rendu côté serveur. Très bien, nous avons maintenant ce concept de routage côté serveur et de routage côté client. Qu'est-ce que c'est ? Et une application sur une seule page. Vous pouvez voir que si je navigue dans les pages, l'URL change, mais ma page ne s'actualise pas. C'est ce qu'on appelle le routage côté client car il a géré le client par JavaScript. Cela signifie que le JavaScript est celui qui modifie l'URL. Javascript est celui qui affiche la page. D'accord ? Il n'envoie aucune demande supplémentaire au serveur. Tout se fait à l'intérieur du navigateur. Contrairement au routage côté serveur, si je vais sur une autre page, vous pouvez voir qu'elle est actualisée car ce que je fais essentiellement, je demande au serveur de me fournir cette page. Et c'est la différence. routage côté serveur est donc lorsque vous envoyez une autre demande au serveur et que vous demandez cette page avec des applications monopage avec un routage côté client. Tout cela se fait à l'intérieur du navigateur sans demande supplémentaire. Ok, super. Maintenant, la troisième méthode de rendu est appelée approche hybride. L'approche hybride est la meilleure des deux mondes combinés. Nous avons un rendu côté serveur, et nous avons une navigation côté client, un routage côté client. À présent, un exemple serait la documentation de Netlify. Donc, si j'inspecte la source de la page, je peux voir le balisage et je peux voir des attaques rencontrées uniques. C'est plutôt cool. Mais si j'essaie de naviguer vers une autre page, vous pouvez voir les changements d'URL. Toutefois, la page ne s'actualise pas. Ainsi, à la première demande, lorsque vous accédez à ce site Web comme cela, il vous enverra un balisage déjà assemblé depuis le serveur, ce qui signifie qu'il s'agit d'un rendu côté serveur. Cependant, après cela, une fois la page chargée, JavaScript prend le relais et vous avez ce sentiment d' appartenance à l'application lorsque vous naviguez sur la page Web. C'est plutôt cool, non ? Pour le moment, l'approche hybride est donc très populaire car encore une fois, elle combine le meilleur de deux mondes. Vous pouvez bénéficier d'une bonne optimisation du référencement grâce au rendu côté serveur, et vous pouvez avoir une sensation similaire à l'application avec le routage côté client. C'est plutôt cool. Quels sont les inconvénients et les avantages de chaque approche ? Je l'ai déjà mentionné, mais je vais le refaire. Le premier est C0, qui signifie optimisation des moteurs de recherche avec rendu côté serveur, COO est le meilleur résultat car vous avez déjà voulu dire des attaques assemblées. Vous avez déjà assemblé le contenu de la page de balisage. Et sur la base de ces informations, des crawlers, comme Google Crawler, Facebook, Twitter chalutiers et tout autre troller. Ils peuvent analyser votre page en fonction de ces informations et classer correctement votre page avec des applications monopage. Ce n'est pas le cas. Si j'inspecte la page, je ne vois que très peu de minimum. Cependant, il existe une solution moderne pour résoudre ce problème d'applications monopage. Et la solution consiste à pré-effectuer le rendu d'une application d'une seule page. Cela signifie que chaque page d'une application monopage dans application côté client sera pré-rendue dans un fichier HTML statique. Chaque page aura donc son propre code HTML. Et lorsque vous accédez à cette page, elle vous apportera le code HTML statique généré. C'est ce que fait Netlify. Netlify est un service d'hébergement qui effectue le pré-rendu applications monopage pour les rendre plus optimisées pour le référencement. C'est vraiment une excellente solution. Ensuite, nous avons une application semblable à la sensation. Ainsi, les applications de rendu côté serveur, ou plus particulièrement le routage côté serveur, ne disposent pas de cette fonctionnalité car vous pouvez voir chaque fois que vous naviguez, la page est actualisée et vous pouvez instantanément comprenez qu'il s'agit d'un site Web. Cependant, avec le routage côté client, vous recevez un sentiment semblable à une application car la page n'est pas actualisée, tout comme nous parcourons l'application mobile. Et le dernier point est, nécessite JS, application de rendu côté serveur ou plus spécifiquement des pages statiques. Ils ne signifient peut-être pas du tout JavaScript. Il peut s'agir d'un contenu statique contenant uniquement du HTML et du CSS, qui ne nécessite pas de JavaScript. Mais les applications monopage ou les applications côté client ont toujours besoin de JavaScript car tout est fait par JavaScript. C'est comme le cœur des applications côté client. Et si vous désactivez JavaScript ou s'il est indisponible pour une raison quelconque, la pomme ne fonctionne tout simplement pas dans la formation. Nous allons nous concentrer sur la création applications monopage avec React. J'espère que c'était clair et je vous verrai dans le prochain. 21. Raccourcis du code VS: Salut. Dans cette vidéo, je vais vous montrer mes raccourcis que j'utilise dans le code V. Cela sera utile pour tout le monde. Ne vous concentrez pas sur le froid. Cette vidéo concerne les raccourcis. Nous commençons par ouvrir un dossier de projet pour ce contrôle de maintien que d'appuyer sur K plus o puis sélectionner le dossier à ouvrir. Et nous sommes de la perspicacité. Maintenant, nous avons besoin de terminaison pour ça. Vous pouvez appuyer sur le contrôle, plus labouré ou le contrôle plus J T ouvrir dans le rire terminal grandement entre cacher et afficher contrôle de la presse d' État plus Jay, Il y a beaucoup de situations où nous avons besoin de déplacer des lignes de code autour pour cela juste tenir et appuyez sur les flèches coupées et en bas elle a déplacé les lignes Cordis pointant Soyez alors nous avons besoin gérer plusieurs onglets ouverts pour ouvrir le fichier dans un nouvel onglet. Il suffit d'ouvrir ce fichier à partir de l'Explorateur ou appuyez sur le contrôle plus B pour Riesco Charge bar, puis recherchez le fichier et appuyez sur Entrée pour basculer entre les onglets. Maintenez et appuyez sur les numéros de 1 à 9. Elle a ouvert le robinet ordonné pertinent La plupart du temps. Nous devons l'ajouter. Quelque chose en plusieurs lignes. Sélection de plusieurs lignes et aidez-nous à déplacer le parcours ou au bon endroit. Maintenez le contrôle, ainsi que les flèches haut et bas vers le haut et le bas pour étendre la sélection avec des lions. Relâchez le contrôle plus sur et maintenant nous sommes en mesure d'éditer le code en mode multi ligne, maintenez, décalage et appuyez sur les prés pour la sélection de caractère unique ont été maintenez le contrôle et appuyez sur les flèches pour déplacer les voitures ou aux mots suivants ou précédents. Vous pouvez combiner le quart et culturel pour sélectionner l'ensemble de la paroisse. Nous pouvons également sélectionner une correspondance spécifique pour l'édition de plusieurs lignes, déplacer votre cours ou à la paroisse ou sélectionner certains caractères, maintenez le contrôle et appuyez sur D. Une fois, il sélectionnera la cour actuelle, puis maintenez le contrôle et Président de Il ajoutera des occurrences à la sélection qui correspondent au modèle. Nous pouvons également créer plusieurs onglets pour faciliter le contrôle de la presse, ainsi que la barre oblique inverse pour diviser ce coréen en plusieurs robinets. En fait, la même chose peut être appliquée au terminal à l'intérieur de la commande de presse de terminal plus barre oblique inverse pour ouvrir plusieurs instances. Ce qui entre les instances tiennent et appuyez sur la flèche supérieure ou inférieure et c'est tout. Ce sont les principaux raccourcis qui faciliteront la protestation du développement. Vous pouvez toujours personnaliser les paramètres de timbre Invesco étaient ici. Rendez-vous dans la prochaine 22. Introduction à JavaScript: Bonjour, Bienvenue dans la section JavaScript. Dans cette section, nous allons parler des fonctionnalités de syntaxe JavaScript les plus courantes. Nous ne couvrirons pas les bases même, car nous comprendrons tout cela pendant le processus, nous allons attacher des modèles plus avancés et plus courants. Nous devons comprendre tout cela pour nous sentir à l' aise pendant le développement de la création. J'espère que ça va vous plair. On se voit dans le prochain. 23. Var VS. Laissez des VS. Const: Bonjour, Dans cette vidéo, nous parlerons des différents types de variables qui existent en JavaScript. Ce sont var, let et const. Dans cette vidéo, nous comprendrons la différence entre eux et le type que nous devons utiliser dans cette situation. Allons-y. Alors, comment tout cela va-t-il être organisé ? Je vais créer un script unique que je nommerai le fichier gs. Et puis je vais exécuter ce script avec des exemples via le terminal intégré à l'aide de la commande node file.js. Alors bar, laissez et const. Quelle est la différence ? Créons peut-être une variable de type var et appelons-la mon nom. Ensuite, je vais juste console.log cette variable. Ensuite, exécutons le script. Vous verrez Andrew s'imprimer, tout fonctionne. Alors, quel est le problème avec cette variable ? Ils traitent de var, c'est que ce type de variable est entouré de la portée de fonction la plus proche. Pour comprendre que nous devons créer cette variable à l'intérieur d'une fonction. Créons donc une fonction. Imprimez mon nom. Et dans cette fonction, je vais mettre var. Et puis je consolerai mon nom à l'intérieur. Maintenant, si je vais exécuter le script, je ne vous verrai rien parce que c'est une fonction et je dois l'appeler, imprimer mon nom. Super. Exécutez à nouveau le script. Vous verrez Andrew, le résultat est le même. Si je dois mettre le journal de la console en dehors de la portée de la fonction, j'obtiendrai une erreur de référence. Parce que mon nom est défini à l'intérieur de la portée de la fonction. Il n'est pas visible en dehors de celui-ci. C'est pourquoi nous avons une erreur de référence. Super, nous comprenons cela. Encore une fois, quel est le problème avec le var ? En tant que triste, il est enfermé à la portée de fonction la plus proche. Cela signifie que peu importe nombre de portées que j'ai à l'intérieur de cette fonction, elle sera visible partout. Ce que je veux dire, c'est que si je vais mettre beaucoup de blocs ici, si cinq sont supérieurs à un, alors je vais en créer un autre dans leur blog juste pour créer des scopes, d'accord ? Si 10 vaut moins de 20 ans, si cinq sont supérieurs à trois, peu importe ce que je fais ici. Je veux simplement créer autant de portées intérieures que possible. Et maintenant, ce que je vais faire, je vais mettre var, mon nom le plus dans leur portée, et ensuite j'essaierai d'accéder mon nom dans cette fonction. Que pensez-vous, c'est que ce code va fonctionner comme prévu et nous verrons une entrée dans le terminal. Essayons ça. Je vais réexécuter le nœud de script file.js. Et nous voyons Andrew, eh bien, c'est imprévisible. Nous voulons que cette variable se comporte pour ne pas être visible dehors de la portée où elle a été définie. Donc, la portée dans laquelle cette variable a été définie est ce bloc si le plus interne, si elle était définie, disons dans ce bloc, dans ce bloc, si ici, alors elle serait visible partout à l'intérieur, mais pas à l'extérieur. Var est encore une fois, est enfermé à la portée de fonction la plus proche. Peu importe où ou dans quelle mesure, dans leur portée maximale, j'ai défini une variable de type var à l'intérieur d'une fonction, sa visibilité sera toujours la j'ai défini une variable de type var à l'intérieur d'une fonction, portée de la fonction. Et c'est mauvais parce que c'est imprévisible. Nous voulons toujours veiller à ce que notre variable soit toujours visible uniquement dans le cadre où elle a été définie ici. Donc, pour résoudre ce problème, nous avons des variables de type, let et const. Donc, si je dois mettre LED ici, je vais essayer d'exécuter le script. Une erreur de référence s'affiche. Parce que maintenant, la portée est portée à la portée la plus proche, en fait à la portée où elle a été définie. Et la même chose avec Const. Si je vais mettre Const ici et exécuter ce script, vous verrez à nouveau la même chose. Mon nom n'est pas défini erreur de référence. Donc, pour corriger cela, pour corriger l'erreur de référence, nous devons référencer mon nom dans cette étendue là où il est disponible, ce qui va être le suivant. Déplacons le journal de la console vers cette étendue. Et essayons encore. Vous verrez que l'entrée est imprimée. Et maintenant, c'est prévisible car nous savons que cette variable est définie à l'intérieur de cette portée et sa visibilité se termine chaque fois que nous sortons dehors, si je mets le journal de la console dans cette étendue, vous verrez encore une fois l'erreur de référence. Oh, laissez-moi enregistrer le dossier. Vous verrez une erreur de référence car elle ne fait pas partie de la portée. Où est défini mon nom, n'est-ce pas ? C'est la différence entre les bols en fibre de plomb const et var let et const. La visibilité se termine par la portée qui entoure, tandis que var se termine par la portée de fonction la plus proche. Donc, si j'ai une autre fonction à l'intérieur d'une fonction, disons la fonction bonjour. Ensuite, je vais définir la même chose. Tout cela dans Hello than var ne sera visible qu'à l'intérieur de la fonction Hello. Il ne sera pas visible d'imprimer mon nom mais de Hello. Très bien, je suppose que c'est clair. Maintenant, quelle est la différence entre let et const ? C'est ce type de variable qui a tendance à être réaffectée. Supposons que j'ai créé mon nom viable et que, à l'avenir, je souhaite le réattribuer. Peut-être que je veux maintenant combien de valeur n'est pas Andrew, mais autre chose. Donc, ce que je ferais, je réattribuerais cette valeur précieuse. Donc, par son nom, devient maintenant John. Et si je vais consoler John, vous verrez en fait John non entrée car maintenant il a une valeur différente. Tapez qui peut être réaffecté. Cependant, avec Const, ce n'est pas le cas. Laissez-moi le sauvegarder et exécuter le script. Vous verrez l'affectation à variable constante parce que const signifie constante, quelque chose qui ne change pas si je la crée par double mon nom et que je le mets comme entrée, cela signifie qu'il ne changera pas. Ce sera toujours Andrew. Une fois encore. Let peut être réaffecté. Si vous avez créé une variable, mon nom, puis, à l'avenir, si vous êtes sûr de la renommer, utilisez lead car le lead peut être réaffecté si vous ne souhaitez pas que cette variable change, Vous êtes sûr que la valeur que vous attribuez à cette variable restera ainsi. Utilisez const. En pratique, la plupart des variables auront le type const. Et ces variables que nous savons que nous allons les réaffecter. Nous allons utiliser lat, mais sinon const, et nous n'utilisons jamais var. Donc, pour résumer rapidement, fil est le type de données de itable, qui était la capacité est la portée de fonction la plus proche. Peu importe la façon dont la plupart définiraient cette variable. Il sera toujours visible dans l'étendue de la fonction. Et comme let et const, let et const sont portés à la portée la plus proche où elles sont définies. C'est ce type de variable qui peut être réaffecté et const est constant. Si vous souhaitez créer une variable constante, elle ne sera pas modifiée ultérieurement. Cependant, il y a encore une petite astuce avec const, et cette astuce est des objets. Par conséquent, si Mon nom doit être un objet, cet objet peut être modifié, mais vous ne pouvez pas passer de type objet à autre chose. Ce que je veux dire, c'est que si mon nom, je le définit comme un objet et plus tard, je veux le changer en John. Je serai affecté à une bataille constante. Mais si je veux dire, modifiez l'objet lui-même, par exemple, donnez-lui une nouvelle clé. Par exemple, mon nom dote quelque chose va être bonjour. Ensuite, je vais consigner mon nom. Vous verrez l'objet qui possède une clé, quelque chose avec la valeur Hello. Vous devez vous en souvenir. Donc, dans ce cas, vous ne modifiez pas directement par double type, mais plutôt vous modifiez l'objet lui-même. Vous connaissez maintenant la différence entre les différents types de variables. Je vais le dire encore une fois. En pratique, la plupart de nos variables seront de type const. Et pour les variables qui ont tendance à changer, nous allons utiliser le type de LED. Nous n'utiliserons jamais la VAR. On se voit dans le prochain. 24. À quoi s'est-: Bonjour, Dans cette vidéo, parlons de la carte matricielle. La méthode de mappage de points de tableau est disponible sur toutes les baies JavaScript. Il est utilisé pour parcourir un tableau d'éléments, et il est utilisé pour transformer chaque élément de tableau en autre chose. C'est pourquoi le tableau de points de la matrice de noms. Voyons cela sur un exemple. Dans file.js. Je vais créer un nouveau tableau, que je vais nommer bonjour et le laisser être 4326. Maintenant, disons que je veux parcourir ce tableau. Je veux que vous consoliez simplement chaque élément de tableau. manière générale, je peux y parvenir avec la méthode traditionnelle de le faire en utilisant la boucle for, mais nous pouvons maintenant utiliser une carte radar. Je vais donc mettre Hello Dot Map. Et une fois que j'ai ouvert la parenthèse code VS me donnera la description. Vous pouvez voir que la méthode de cartographie de points reçoit une fonction de rappel. Et le deuxième argument est cet arc. Cet arc concerne le, ce mot-clé en JavaScript. Nous n'allons pas y toucher. Nous sommes intéressés par. La fonction de rappel. Le rappel est cette fonction qui est transmise en argument à une autre fonction. Donc, puisque nous allons passer une fonction à une fonction de carte, c'est pourquoi nous l'appelons, nous rappelons. Très bien, je pense qu'il est clair que nous allons beaucoup utiliser le rappel de mots. Ce rappel reçoit donc trois arguments. Le premier argument est la valeur, puis nous avons index et tableau. Et saisissons la fonction. Et si je vais ouvrir à nouveau la parenthèse, je verrai la valeur, l'index et le tableau. La valeur correspond donc à la valeur de l'élément actuel. Le fait est que la méthode de cartographie par points effectue une itération sur un tableau. Ainsi, le rappel que nous transmettons à la méthode de cartographie de points s'exécutera pour chaque élément de tableau. Donc, si nous avons quatre éléments au total dans ce tableau, cela signifie que cette fonction de rappel sera exécutée quatre fois pour chaque élément et valeur du tableau. Le premier argument du rappel sera la valeur actuelle que nous allons parcourir. Donc, pour la première fois que le rappel sera exécuté, la valeur sera, pour la deuxième fois, la valeur sera de trois, et ainsi de suite jusqu'au dernier élément. Le deuxième argument ici est l'index, et il va s'agir de l'index de l'élément de tableau actuel. Donc, pour le premier élément, il sera 0 car les tableaux en programmation commencent par 0 index. Il va donc être 0, 1, 2 et 3. Appelons ça Idx. Et le troisième argument sera le tableau. Et ce sera le même tableau pour lequel nous avons appliqué cette méthode de cartographie de points. Disons que c'est le cas, et je vais à l'intérieur de ce rappel à l'intérieur de cette fonction. Allons en fait console.log, valeur, index et tableau. Et maintenant, essayons d'exécuter le fichier de nœud de script HGS. Et ce que nous voyons, c'est d'abord la valeur. Comme vous pouvez le voir pour trois à six, nous voyons tous nos éléments de tableau, ce qui est correct car encore une fois, ce rappel s'exécute pour tous les éléments du tableau. La deuxième colonne que nous voyons est l'index de cet élément. Donc pour a 0 index, c'est ce que vous voyez dans le terminal. Et le dernier élément aura index trois, car, eh bien, c'est le dernier élément et nous savons que tableaux commencent par 0 index, ce qui est correct. Et la troisième valeur sera le tableau lui-même sur lequel cette méthode de cartographie de points a été appliquée. Mais ce n'est pas le vrai pouvoir de la méthode du diagramme à points. Il est utilisé pour transformer chaque élément de tableau en autre chose. Et ils ont pris la méthode cartographique produit une nouvelle valeur. Il produit un nouveau tableau. Cela signifie que je peux l'écrire dans une variable. Je vais donc mettre le résultat const égal à bonjour.mat. Et puis je peux réellement obtenir le résultat console.log pour voir ce que j'ai. Si je dois exécuter ce script, j'aurai un tableau de quatre éléments où chaque élément n'est pas défini. Pourquoi est-il indéfini ? Eh bien, le fait est que la méthode cartographique s'attend à ce que nous rendions une certaine valeur de cette fonction, à partir de ce rappel. Et cette valeur que nous renvoyons sera définie comme une nouvelle valeur pour l'élément actuel. Par défaut, lorsque nous n'avons rien renvoyé d'une fonction, cette fonction renvoie non définie. C'est pourquoi nous n'avons pas été définis partout. Essayons de mettre le retour pour le rappel. Pouvez-vous deviner quelle sera la valeur ? Je vais lancer ce script et maintenant il va être 4, 4, 4, 4. Eh bien, encore une fois, cette fonction de rappel s'exécute pour chaque élément de tableau. Et pour chaque élément de tableau, nous revenons pour, si je vais mettre une valeur multipliée par deux, pouvez-vous deviner le résultat maintenant ? Voyons voir. Nous avons maintenant 864 et 12. En gros, ce que nous avons fait, nous avons simplement multiplié chaque élément de tableau par deux. Parce qu'une fois de plus rappel s'exécute pour chaque élément de tableau. Pour la première fois. Il s'exécutera pour le premier élément qui est quatre, la valeur va être pour, la valeur va être multipliée par deux, nous renvoyons huit, ce qui signifie que dans la valeur renvoyée pour la méthode cartographique pour le premier élément, nous avons la valeur 8. C'est ce que nous voyons. Il en va de même pour le deuxième élément. Ce rappel s'exécute. La valeur va être de 3. 3 multiplié par 2 correspond à 6 pour le deuxième élément. Maintenant, nous en avons six, et ainsi de suite jusqu'au dernier élément. Et c'est tout. Il s'agit d'une carte de points de tableau de mots utilisée, nous allons l'utiliser beaucoup, en particulier dans React, mais nous devrons mapper un tableau pour react balisage. C'est pourquoi il est très important de comprendre la méthode cartographique. C'est ça. Et je vais vous voir dans le prochain. 25. Qu'est-: Hé, dans cette vidéo, nous allons parler d'une réduction redox, tout comme une réduction de points de tableau radar sur des éléments d'un tableau radar. Cependant, il est fondamentalement différent si la cartographie de points de tableau est utilisée pour mapper chaque élément de tableau à une la cartographie de points de tableau est utilisée pour autre valeur réduction des points de tableau est utilisée pour compresser ou réduire tous les éléments du tableau en une seule valeur. Voyons cela sur un exemple. Si nous revenons à File GS, nous allons créer un nouveau tableau ici, bonjour, qui sera sept. 6945, peut-être. Super. Maintenant, nous pouvons utiliser la méthode de réduction des points la même manière que la méthode cartographique, ce qui signifie que nous pouvons taper hello dot reduite. Et tout comme avec la carte de points, nous devons fournir une fonction de rappel. Mais cette fois, la fonction de rappel recevra différents arguments. Nous avons donc la valeur précédente, la valeur actuelle, l'indice actuel et le tableau. Essayons donc de voir ce qu'ils sont. Nous fournissons donc le rappel et nous ouvrons à nouveau la parenthèse pour IntelliSense. Et nous avons la première valeur précédente, la valeur actuelle, l'indice actuel et le tableau. Tout comme pour la cartographie par points, dot reduit exécutera ce rappel pour chaque élément de tableau. Cela signifie que ce rappel sera exécuté cinq fois pour chaque élément. C'est pourquoi nous savons ce qui va être l'index et le tableau actuels. Ainsi, comme dans Dark Map, array sera le même tableau que celui que nous utilisons pour cette méthode .radius. Et l'indice actuel sera l' indice de l'élément actuellement itérateur, qui sera 01234. Nous n'avons pas besoin d'eux. La seule chose dont nous avons besoin, c'est la valeur précédente et la valeur actuelle. Mais la plupart du temps, valeur précédente n'est pas une valeur précédente froide. C'est ce qu'on appelle accumulateur. Qu'est-ce que l'accumulateur ? Nous allons parler dans une seconde. Je veux juste mentionner que la méthode dots reduit attend également un deuxième argument à côté du rappel. Le deuxième argument est la valeur initiale et il est facultatif. Alors mettons 0. Super. Qu'est-ce que l'accumulateur ou quelle est cette valeur précédente ? Le fait est que la méthode de réduction des points fonctionne en comprimant ou en accumulant réellement chaque élément de tableau vers le résultat final. Cela signifie que nous commençons par une valeur initiale par 0. OK ? Ensuite, lorsque tous ces rappels sont exécutés pour chaque élément de tableau, cela modifie en quelque sorte notre valeur initiale. Très bien ? Et à la fin, lors de la dernière course de rappel, nous avons le résultat. Cela signifie que la méthode dots reduise produit également une valeur, mais au lieu d'un nouveau tableau, elle produit une sortie unique. Donc, peut-être qu'il sera 15 ans, nous ne savons pas. Donc, comme il produit une valeur, placons-la, mettons-la dans une variable. Donc le résultat de const va être bonjour dot réduire, et à la fin, nous allons juste résultat console.log. Super. Maintenant, si nous allons essayer d'annuler accumulateur de journal et à côté de celui-ci, nous allons consoler la valeur actuelle du journal. Et nous allons exécuter ce script. Ce que nous allons voir, la sortie n'est pas assez évidente. Qu'avons-nous ? Nous avons d'abord 0, puis l'amplification Undefined, Undefined, Undefined. Pour ne pas nous confondre, nous avons en fait cinq journaux de console provenant des rappels et le dernier pour le résultat. Laissez-moi le dire comme ça. Et nous le gérons. Oui, parfait. Alors pourquoi avons-nous beaucoup de valeurs non définies ? Eh bien, au premier tour, lorsque ce rappel sera exécuté pour le premier accumulateur d'élément 47 sera notre valeur initiale que nous avons fournie ici. C'est pourquoi nous voyons 0 valeur actuelle sera l'élément actuel, qui est sept. C'est pourquoi nous voyons 07. Tout ce que nous reviendrons de ce rappel sera triste car la valeur de l'accumulateur pour le prochain rappel sera triste. Parce que nous n'avons rien rendu de cette fonction. Par défaut, la valeur renvoyée n'est pas définie. C'est pourquoi lors de la prochaine exécution de ce rappel pour le deuxième élément, qui est six, l'accumulateur n'est pas défini. Si nous voulons en renvoyer un pour chaque accumulateur R1 suivant, il en sera toujours un, et la valeur finale sera également une. Si j'exécute le script, vous pouvez le voir vous-même. Nous avons toujours un accumulateur réglé sur un, mais c'est très largué. Nous voulons vraiment faire quelque chose avec cela. Comment utiliser le point réduit pour faire quelque chose de réel, nous pouvons en fait utiliser la méthode dots reduct pour trouver la somme de tous nos éléments. Nous pouvons réellement taper accumulateur plus la valeur actuelle. Et c'est tout. Cela va faire l'affaire. Nous allons le sauvegarder et voyons ce qui est imprimé. Nous voyons que le résultat est 31. Mais comment nous en sommes arrivés avec ça, allons le décomposer. Pour la première fois. Ce rappel a un accumulateur défini sur 0 car notre valeur initiale est 0, la valeur actuelle va être sept. Nous avons donc 0 plus 7. C'est ce que nous voyons ici. Donc, à partir de ce rappel, il en retournera sept. Nous allons taper la première descente sera un retour sept. Cela signifie que lors de la deuxième exécution de ce rappel pour l'élément six, accumulateur sera cette valeur de retour de l'exécution précédente. Nous avons donc un accumulateur égal à 27 lors de la deuxième série pour le deuxième élément, et nous avons sept valeurs actuelles plus. Nous avons donc 7 plus 6, nous en avons 13, ce qui signifie qu' à partir de la deuxième manche, nous en retournons 13. Lors de la troisième étape de ce rappel pour les éléments neuf, accumulateur sera 13 car c'est ce que nous sommes renvoyés par le rappel de l'exécution précédente. Quatre éléments, 613, c'est pourquoi il est maintenant 13. Donc, 13 plus la valeur actuelle sera de 13, plus 9 va être de 22. Nous sommes revenus 22. Pour le quatrième élément accumulateur est 2222 plus quatre va être 26. Retour 26. Et pour le dernier élément, nous avons l'accumulateur 26. 26 et cinq vont avoir 31 ans. Et cela va être notre valeur finale. Donc, notre valeur finale que nous avons dans la variable de résultat sera la valeur qui reviendrait à partir du tout dernier rappel de la méthode dots reduite qui est large. Ce premier argument s'appelle accumulateur car, comme vous l'avez observé en ce moment, cette valeur est accumulée dans tous les rappels que nous avons dans la méthode de réduction des points. C'est un outil très flexible et au début, il est vraiment difficile de comprendre comment fonctionne la réduction des points, mais croyez-moi, c'est très flexible. Un autre exemple est celui où nous devons produire un nouvel objet à partir de ce tableau. Par exemple, nous voulions avoir cet objet où la clé sera l'index de l'élément et que la valeur sera dévaluée. Par exemple, l'élément 0 va être sept, élément un sera 6, deuxième élément sera 934 et cinq, non ? Supposons donc que nous devions transformer ce tableau en cet objet. C'est donc le résultat souhaité. Nous pouvons en fait utiliser le point réduit pour y parvenir. Permettez-moi de supprimer ces Communes et voyons comment nous pouvons aborder cela. Nous savons donc que nous devons recevoir un objet à la fin. Donc, avant de calculer la somme, nous savons que notre valeur finale sera un nombre. C'est pourquoi nous avons mis 0 ici. Mais maintenant, comme il va s'agir d'un objet, nous allons mettre un objet vide ici. Ce sera notre point de départ. accumulateur de la première exécution sera un objet vide. La valeur actuelle reste la valeur que nous avons à l'intérieur de notre tableau. Donc maintenant, pour atteindre ce résultat, nous devons réellement fusionner des valeurs à l'intérieur de cet objet. Puisque nous devons travailler avec des objets, nous devons renvoyer un objet de ce rappel car il s'agit de notre accumulateur. Notre résultat final est encore un objet. C'est pourquoi notre accumulateur est un objet. Nous allons donc revenir et nous devons retourner un objet. Donc, pour fusionner des objets, nous devons taper objet dot assignation. Le premier est donc la cible. Et ici, nous allons fournir une valeur qui sera fusionnée dans cet objet. Mais avant de pouvoir le fusionner, nous devons réellement créer l'objet, n'est-ce pas ? Nous allons donc mettre Const, disons un élément actuel cartographié. Et nous allons d'abord le mettre comme un objet vide. Ensuite, nous devons créer cette valeur unique qui représentera notre élément actuel dans le résultat final. Nous voulons donc que cet élément actuel de carte soit cet objet. Donc, pour le premier élément, ce sera 0, 7. Nous voulons que l'élément actuel cartographié soit de cette forme, et nous fusionnerons cet objet dans notre accumulateur. Nous devons donc réaliser d'une manière ou d'une autre que nous puissions saisir un élément courant mappé. Ensuite, l'index de notre élément, nous devons l'utiliser. Nous pouvons donc maintenant mettre notre argument ici et l'appeler indice actuel. Dis-le comme ça. De cette façon, nous pouvons référencer cet indice courant de point d'élément courant mappé égal à la valeur actuelle. Et cette ligne nous apportera cette grille de résultats. Maintenant, nous avons fusionné ce résultat dans notre élément actuel cartographié par accumulateur, et maintenant nous aurons le résultat souhaité. Jetons un coup d'œil. Fichier de nœud gs. Et aujourd'hui, nous avons 0 élément valeur 7, valeur du premier élément six secondes, 9, troisième, quatrième, 45, grade. Tout ce que je voulais. Que s'est-il réellement passé ici ? Essayons d'accumuler console.log. Eh bien, et comme vous pouvez le constater, c'est vraiment un excellent exemple de cette sortie. Vous pouvez voir comment l'accumulateur est réellement accumulé sur toutes ces opérations de rappel. Donc d'abord, pour la première fois, nous avons gardé notre objet vide, n'est-ce pas ? C'est pourquoi nous voyons ici un objet vide. Ensuite, nous avons créé cet élément ici, c' est-à-dire celui-ci, puis nous l'avons fusionné en un objet vide. C'est donc ce que nous revenons dès la première descente. Lors de la deuxième série, nous avons fusionné cela dans le premier objet, qui a donné à cet objet 76, et ainsi de suite jusqu'au dernier élément. Donc, à la fin, nous avons le résultat souhaité. C'est plutôt génial. Dot Reduce est vraiment puissant et très flexible. Il est essentiel de comprendre que, parce que le Dr US est assez courant, pas aussi courant que la méthode de cartographie ponctuelle, mais il est toujours utilisé très fréquemment. Je sais que c'est difficile à comprendre. Les points diminuent complètement lorsque vous le voyez pour la première fois, mais croyez-moi, prenez un peu de temps, expérimentez, jouez avec les différentes valeurs. Essayez-le vous-même, peut-être essayez les valeurs de journalisation de la console. J'ai essayé de mettre différentes valeurs dans un rayon, j'ai essayé de renvoyer différentes valeurs à partir d'ici. Et vous verrez qu' après un certain temps, vous comprendrez, vous aurez ce moment aha. J'en suis presque sûr. Je pense que c'est la méthode de réduction des quatre points. J'espère que c'était clair. J'ai essayé de le décomposer autant que j'ai pu et le reste est sur vous. Je vais vous voir dans le prochain. 26. Déclaration de fonction VS. Expression: Parlons de l' expression de la fonction et de la déclaration de fonction. Pourquoi avons-nous besoin de connaître la différence et quelles sont ces différences ? Il s'agira plus d' une vidéo théorique que d'une vidéo pratique. Mais je pense que c'est important pour comprendre la différence, même si B n'est peut-être pas nécessaire. Quoi qu'il en soit, au bout du compte, cela fera de vous un meilleur développeur. Allons-y. Donc, si je dois revenir au fichier G, S ici, je vais déclarer une fonction. Je l'appellerai Hello, et à l'intérieur, j'annulerai le journal. Je m'appelle Andrew. Et ci-dessous, je vais créer un précieux bonjour à cette variable. Je vais attribuer une fonction. Et à l'intérieur, je vais imprimer. Et vous aussi. Maintenant, comme vous pouvez le constater, les deux font la même chose. Appelons-les. Nous allons d'abord appeler bonjour, puis nous allons appeler bonjour au terminal. Je vais lancer le script et la sortie. Eh bien, c'est fondamentalement la même chose, non ? Quelle est donc la différence ? La différence est que le premier exemple est une déclaration de fonction, et le second est une expression de fonction. Le deuxième exemple est en fait une expression variable. Donc, si je dois mettre une variable et lui donner une valeur, ce sera une expression. Nous pouvons donc observer la même chose ici. Nous attribuons essentiellement une fonction à une variable. Contrairement à ici. Ici, nous faisons une déclaration de fonction. différence la plus importante entre ces deux éléments est qu'avec la déclaration de fonction, peu importe où nous définissons la météo de la fonction. Il est en haut ou tout en bas, mais avec l' expression de la fonction et compte en fait. Mettons-les tous les deux à la fin. Et appelons-les encore une fois. Je vais lancer ce script. Et ce que je vois, la première fonction, qui est la déclaration de fonction, passée et je peux voir la sortie. Mais le deuxième exemple, erreur de référence échouée ne peut pas accéder à Hello Tube avant l'initialisation. Le fait est que bonjour deux est une expression de fonction et JavaScript ne créera cette fonction que est une expression de fonction et JavaScript ne créera cette fonction que lorsque JavaScript va à cette ligne, la déclaration de fonction sera créée ou elle sera hissé jusqu'à la côtelette. En JavaScript, il existe ce concept de hissage lorsque les déclarations de fonctions sont en fait comme déplacées vers le haut avant l'exécution du code. C'est pourquoi l'endroit où nous les définissons n'a pas d'importance. Le code va toujours, la langue verra toujours ce code comme si la déclaration de fonction était en haut, comme cela. Mais l'expression de la fonction reste là où elle a été définie. Tout comme pour les variables, nous pouvons réellement référencer une variable. Disons bonjour, avant qu'il ne soit créé. Donc, si je vais créer haut ci-dessous, et si j'essaie d'exécuter ce morceau de code, je donnerai le même adder. erreur de référence ne peut pas accéder en haut avant l'initialisation. Donc, parce qu'il s'agit d'une expression et de la même chose que nous voyons avec bonjour, s'agit d'une expression et nous ne pouvons pas accéder à cette expression avant qu'elle ne soit créée ici en haut. Donc, la seule solution à cela est, eh bien, d'accéder réellement à bonjour après avoir créé cette variable. Donc maintenant, si je vais l'exécuter, je ne verrai aucune erreur dans monde réel dans les projets molaires JavaScript. En fait, ce n'est pas une chose. Vous n'observerez pas un tel comportement dans le code. Eh bien, parce que c'est principalement lié au JavaScript simple et qu'il est toujours bon de connaître et de comprendre la différence, non ? Mais dans les projets modernes, puisque nous disposons d'outils qui traitent notre code, cette chose n'aura pas lieu, mais comme je l'ai dit, c'est bien et je pense personnellement qu' important de comprendre la différence. Donc, pour résumer rapidement, l'expression de fonction est lorsque vous attribuez une fonction à une variable, il est plus facile de se rappeler si vous pouvez y penser, est-ce que la déclaration de fonction commence toujours par la fonction Le premier mot. Et l'expression de fonction n'a pas de fonction comme premier mot car le premier mot que nous avons const ici, nous l'affectons à une variable et les déclarations de fonction sont déplacées vers le haut, peu importe. où ils sont définis juste avant l'exécution du code. Et c'est tout. Je vais vous voir dans le prochain. 27. Fonctions de flée et argumentaires de fonction par par par défaut: Dans cette vidéo, parlons des fonctions de flèche et des arguments par défaut. Allons-y. Si je vais accéder à file.js, créons une simple déclaration de fonction que nous appellerons mon nom. Et il imprimera Andrea, qui est mon nom. Et créons un deuxième exemple qui utilise une fonction flèche. Et la fonction flèche est une expression de fonction en premier lieu, ce qui signifie qu'elle sera affectée à une variable. Je vais donc mettre const, mon nom, 2 est égal à des parenthèses, puis la fonction flèche, ou parfois on appelle ça une fonction de graisse. Et après ce corps de fonction, je vais mettre console.log et en dessiner deux. Maintenant, si je dois appeler mon nom, nous savons quel en sera le résultat. Mais si je dois appeler mon nom, que ce sera le même ? Jetons un coup d'œil. Nœud file.js. Et nous voyons que la sortie est prédite car, eh bien, c'est juste une fonction, mais il s'agit maintenant d'une fonction de flèche. Quelle est donc la différence ? La première différence est que les fonctions de flèche ont une syntaxe plus légère les déclarations de fonctions. Eh bien, le fait est que nous allons beaucoup utiliser les fonctions de flèche, surtout dans le JavaScript moderne. Ils sont encore plus préférés que les déclarations de fonctions commençant par le mot-clé fonction. Ce n'est pas parce que la syntaxe est plus légère, surtout lorsque nous allons fournir des rappels, deux méthodes différentes. Il est plus facile de fournir une fonction flèche. Donc, si je vais, par exemple, utiliser un tableau de points, il est plus facile pour moi de fournir une fonction de flèche. Il est plus léger d'écrire une fonction flèche au lieu d'utiliser une fonction, puis des parenthèses. Et maintenant, ça ressemble à papa, ça risque même de confondre certaines personnes. Donc, finalement, peu importe lequel, qu' il s'agisse d'expression de fonction ou de déclaration de fonction. Peu importe, car au bout du compte, notre code sera traité par les outils de construction qui s' occuperont de tout cela sous le capot. La deuxième différence a quelque chose à voir avec ces mots-clés en JavaScript. Nous n'allons pas couvrir ce cas d'utilisation avec ce mot-clé. Mais je dirais que vous devriez vraiment aller sur Google et vérifier vous-même. Il suffit de chercher les fonctions de flèche, ces mots-clés. Et la troisième différence est que les fonctions de flèche nous permettent d'utiliser une syntaxe encore plus courte que celle-ci. Lorsque nous devons renvoyer une valeur unique à partir d'une fonction de flèche, nous pouvons omettre d'utiliser les crochets bouclés pour spécifier le corps de la fonction. Par exemple, si mon nom renvoie une chaîne, Andrew, nous pouvons réellement l'écrire comme ça, la même chose que nous aurons à mon nom. Laissez-moi l'écrire. Retournez Andrew, et il n'y aura pas de différence, non ? Mais avec les fonctions de flèche, on peut même le raccourcir. Je vais donc juste copier la chaîne Andrew. Je vais enlever les crochets bouclés. Et je vais juste mettre une chaîne, et maintenant rien ne sera changé, mais la syntaxe est beaucoup, beaucoup plus courte. Vérifions que mon nom renvoie une chaîne, Andrew, puisqu'il renvoie une valeur, je vais l'écrire dans une autre variable. Appelons-le m et ensuite console.log M. Great. Ensuite, je vais relancer le script et vous verrez Angio, c'est exact. C'est ce qui revient de mon nom, il est très important de comprendre que si vous voulez écrire comme ça, la fonction ne retournera rien, ce qui signifie qu'elle retournera indéfinie. Laissez-moi exécuter ce script et vous verrez indéfini. Eh bien, comme il ne s'agit pas d'une syntaxe courte, c'est la même chose que d'écrire ceci, mais sans le mot-clé retour. Il est donc important de comprendre que si vous en avez besoin ou si vous souhaitez utiliser une syntaxe plus courte, n' oubliez pas de supprimer les crochets bouclés. Et il est également important de comprendre que syntaxe plus courte ne renvoie qu'une seule valeur. Si vous devez effectuer une action au sein d'une fonction, vous ne pourrez pas utiliser la syntaxe courte car dans ce cas, vous n'avez nulle part où écrire votre code. Donc, dans ce cas, vous devez effectuer une opération ici, n'est-ce pas ? Bien, votre code personnalisé, puis à la fin, vous retourneriez une valeur comme celle-ci. Il n'y a donc aucune différence si vous le faites comme avec le mot-clé retour ou si vous le faites avec la syntaxe plus courte est la même. C'est juste votre façon d'écrire le code chaque fois que possible, essayez d'utiliser une syntaxe plus courte parce que bien. Il est plus court. Il y a une chose que je veux mentionner à propos cette courte syntaxe, c'est quand vous devez renvoyer un objet. Ainsi, lorsque nous avons une situation, lorsque nous devons renvoyer un objet, par exemple nom, entrée. Donc, cet objet que je veux revenir de cette fonction de flèche. Eh bien, avec le mot clé retour, ça ressemble à ça. Mais comment cela va ressembler sans le mot-clé retour, les objets auront également des crochets bouclés et le corps de la fonction auront également des crochets bouclés. Si on veut dire ça comme ça. Vous verrez une erreur de syntaxe car bien, ce sont des choses JavaScript erronées que c'est une fonction, mais ce n'est pas un objet. Pour résoudre ce problème, vous devez envelopper l'objet renvoyé entre parenthèses comme cela. De cette façon, il comprendra que vous souhaitez renvoyer une seule valeur que vous souhaitez utiliser une syntaxe plus courte et que vous retournez un objet pour vérifier que vous pouvez exécuter le script. Et nous voyons que maintenant notre objet est renvoyé. Super, si bien, qui s'assoit à propos des fonctions de flèche. Nous allons les utiliser beaucoup. Parlons des arguments de fonction par défaut. Eh bien, celui-là est vraiment facile. Il existe de nombreuses situations où nous devons transmettre des arguments à nos fonctions. Par exemple, mon nom est la seule chose que cette fonction fera. Il va consigner le premier argument que nous allons fournir. Et appelons cet argument mon nom. Donc, du côté de la réception, nous avons mon nom et ensuite nous imprimons mon nom est mon nom. Super. Maintenant, si je dois appeler mon nom, laissez-moi supprimer le code inutile. Si je vais exécuter mon nom sans fournir le paramètre pour cet argument. Eh bien, dans ce cas, mon nom va être indéfini parce que, eh bien, nous ne l'avons pas fourni, non ? Nous n'avons fourni aucune valeur pour mon nom. Pour vérifier que mon nom n'est pas défini. Et il y a beaucoup de situations où nous avons des circonstances différentes dans notre code et nos variables. Ils ne produisent pas de valeurs attendues. Ils ne produisent pas de résultats attendus, n'est-ce pas ? Dans ce cas, nous voulons nous assurer que nous avons toujours une valeur de secours pour fournir la valeur par défaut de cet argument de fonction. Nous devons simplement mettre des valeurs égales , puis fournir une valeur par défaut. Je ne sais pas, John. Très bien, maintenant, chaque fois que je ne transmets aucune valeur pour cela, mon argument de nom, John, aura lieu et sera utilisé comme solution de secours. Essayons maintenant d'exécuter le script et vous verrez que je m'appelle John, non ? Parce que je ne passe rien. Cela a été récupéré et maintenant il utilise John et John est imprimé. Si je dois fournir Angio, John ne sera pas utilisé à la place d' Andrew car Andrew n'est pas indéfini. C'est une valeur que nous transmettons pour cet argument, n'est-ce pas ? Exécutez le script. Je vois maintenant que je m'appelle Andrew. Tout fonctionne très bien. Donc, si je dois passer indéfini, qu'est-ce qui va être imprimé ? Correct ? John ? Pour vérifier que nous sommes à nouveau sous script, je m'appelle John. Parfait. Imaginez les situations où nous avons plusieurs arguments dans une fonction. Disons mon nom et mon âge, et je vais imprimer mon nom et mon âge sera mon h. Si je ne fournit aucun argument, mon nom ne sera pas défini. Mon h va être indéfini. Pour vérifier non défini, non défini, parfait. Maintenant, je peux fournir une valeur par défaut pour tous ou pour un seul argument. Donc, que ce soit mon âge et, par défaut, il sera égal à 10 ans. Donc maintenant, si je réexécute, vous verrez que mon nom reste indéfini car nous n'avons aucune valeur de secours. Et mon âge est de 10 ans. Peut-être. Mettons-le à John. Versons Andrew ici. Et mettons indéfini pour finaliser nos pensées, disons franchement et nos connaissances. Donc, pour mon nom et vous serez pris en charge, et pour mon âge, 10 ans seront ramassés parce que nous fournissons non définis. C'est la même chose que de ne pas fournir de valeur du tout, n'est-ce pas ? Si je veux l'écrire, je m'appelle Andrew et mon âge est Stan. Parfait. Eh bien, c'est tout. Vous savez maintenant comment nous allons utiliser les fonctions de flèche. Qu'est-ce que c'est ? Et maintenant, vous connaissez les arguments de fonction par défaut. On se voit dans le prochain. 28. Interpolation de chaîne: Bonjour, Dans cette vidéo, nous allons parler de modèles de chaînes, ou en fait, ils sont appelés chaînes de modèles et interpolation de chaînes. Allons dans file.js. Supposons que je veuille imprimer mon nom dans une phrase. Je veux dire que je m'appelle Andrew, mon h a 10 ans. Pour cela, je vais créer trois variables. La première variable sera name, qui sera Andrew. Le second sera h, va être 10. Et le troisième sera le résultat que j'imprimerai sur la console. Donc, pour faire une phrase, je vais devoir concaténer des chaînes car je vais utiliser des valeurs dynamiques, qui sont le nom et l'âge. En programmation. Dans d'autres langages de programmation, cela se fait généralement à l'aide de l'opérateur plus. Donc ça va ressembler à mon nom plus. Cela donnera lieu à une entrée. Encore une fois, plus. Et maintenant, le point de ficelle que je dois taper mon âge est à nouveau plus h. Et nous devons aussi prendre soin des espaces. Ici. Je dois ajouter un espace et ici aussi. Super. Essayons maintenant de l'imprimer et d' exécuter ce script, le fichier de nœud gs. Je m'appelle Andrew May, il est en 10e année. C'est le résultat souhaité. Mais comme vous pouvez le constater, ce n'est pas très pratique car, eh bien, cette syntaxe, n'est en fait pas pratique. Et si nous avons beaucoup de variables et que nous avons une chaîne très longue, cela deviendra illisible. Et s'il existe une meilleure façon de le faire ? Eh bien, en fait, il s'agit de modèles de chaînes, ou généralement appelés chaînes de modèle. Essayons de réexécuter cette ligne de code à l'aide d' un modèle de chaîne. Nous allons donc créer un autre résultat variable pour. Et nous allons utiliser un modèle de chaîne. Pour utiliser un modèle de chaîne, nous devons utiliser des backticks. Donc, pour les chaînes régulières, nous utilisons des guillemets réguliers, n'est-ce pas ? Soit un simple recul, soit des guillemets doubles. Pour les modèles de chaînes, nous utilisons des backticks. Je vais donc basculer les devis en utilisant l' extension de cotations à bascule que j'ai installée dans VS Code. Vous pouvez le trouver sur le marché VS Code. Cette extension bascule les guillemets, celui-là. Ensuite, j'appuie sur la touche pour changer de guillemets et je m'arrête sur les backticks. Backticks, la chaîne est évaluée telle quelle, telle qu'elle apparaît dans le code. Je vais donc taper, m'appelle Space. Et ici, je voulais dynamiquement, par exemple injecter une valeur. Pour ce faire, nous devons interpeller cette valeur dans une chaîne. Les modèles de chaînes nous permettent de le faire en utilisant la syntaxe du signe dollar et des crochets bouclés. Ainsi, lorsque nous mettons le signe dollar suivi de crochets bouclés , entre crochets, nous pouvons mettre n'importe quelle expression JavaScript qui produit une valeur. Cette valeur sera interpolée dans cette chaîne, à cet endroit de cette chaîne. Nous voulions donc mettre des noms ici. Je m'appelle nom. J'ai mis Dodd. Mon âge est encore, le signe du dollar suivi crochets bouclés h. Je vais le sauver. Je vais le consigner à côté de notre premier résultat. Et comparons ces deux-là. Comme vous pouvez le constater, ils sont les mêmes. Mais la différence réside dans le résultat syntaxique d'utiliser des modèles de chaînes et le premier utilise uniquement l'opérateur plus et les chaînes de concaténation ont jamais été générées. Il s'agit d'une syntaxe beaucoup plus agréable et plus complète, et cette syntaxe est préférée dans le JavaScript moderne. Personne n'utilise réellement la concaténation pour concaténer des chaînes, peut-être très rarement, plupart du temps, vous verrez une interpolation de chaînes l'aide de modèles de chaînes avec des backticks. Comme je l'ai mentionné précédemment, la chaîne qui apparaît dans les backticks est évaluée telle quelle. Cela signifie que si je vais mettre beaucoup d'espaces vides ici, et peut-être ici, ils seront tous inclus dans la chaîne finale. Donc, si je mets des espaces vides ici, des chaînes vides, ce seront des chaînes vides dans la sortie. Voyons ça. Vous pouvez voir que l'espacement est entièrement conservé. J'ai mis trois lignes vides ici, elles apparaissent dans la sortie. Nous ne pouvons pas le faire avec l'opérateur plus. Si je dois mettre des espaces vides ici, j'aurai une erreur de syntaxe. Et si j'essaie d'exécuter le script, j'aurai une erreur de syntaxe, jeton non valide ou inattendu si nous voulons utiliser des lignes vides dans notre chaîne et que nous voulions les conserver, nous devons utiliser modèles de chaînes. Cela entraînera donc une syntaxe non valide. Remettons-le comme avant. Très bien, maintenant nous comprenons les modèles de chaînes, comme je l'ai mentionné précédemment , entre crochets bouclés, nous sommes capables de mettre n'importe quelle expression JavaScript. Et comme nous nous en souvenons, l'expression est une entité qui produit une valeur. Nous avons donc un nom qui est une expression disponible, il donne une chaîne à Andrew. Ce que je veux dire, c'est que nous ne sommes pas limités à placer uniquement des variables ici. Nous pouvons mettre n'importe quelle expression JavaScript à l'intérieur. Par exemple, nous allons utiliser l'opérateur ternaire. Si 10 est supérieur à cinq , nous allons mettre la variable name. Sinon, nous utiliserons l'âge car 10 est toujours supérieur à cinq, nous aurons toujours un nom. Essayons donc de voir. Et nous avons Mon nom est Andrew, mon âge est de 10 ans. Excellentes œuvres. Changeons d'opérateur. Et maintenant, nous aurons, mon nom est 10 car bien, nous avons faux ici, et c'est pourquoi nous recevons H à la fin. Nous pouvons donc mettre en place une fonction de chaque année. Créons const et prenons mon nom. Et il va rendre John ici, non ? Et à l'intérieur des crochets bouclés utilisant l'interpolation de chaînes, je vais appeler cette fonction. À cette fonction, je vais me renvoyer la chaîne. Essayons ça. Nous allons voir que je m'appelle John. Mon âge est de 10 ans, et c'est tout. C'est tout ce que nous devons savoir sur modèles de chaînes ou les littéraux de chaîne et l'interpolation de chaînes. À la fin, vous devez vous souvenir de trois éléments concernant les modèles de chaînes. Le premier est donc qu'ils utilisent des backticks. Ils n'utilisent pas de devis réguliers. Si vous allez mettre des citations régulières ici, cela ne fonctionnera pas. L'interpolation de chaînes ne fonctionnera pas. Si je le vérifie, vous verrez que j'aurai le signe du dollar et les crochets bouclés seront imprimés. Je dois changer mes guillemets en backticks, donc l'interpolation des chaînes fonctionnera. La deuxième chose à retenir est qu'à l'intérieur de l'interpolation de chaînes, nous pouvons mettre n'importe quelle expression JavaScript. Nous ne sommes pas limités. Et la troisième chose à retenir est que la chaîne dans les backticks est évaluée telle quelle. Cela signifie que si nous mettons des espaces vides ici, ils seront inclus dans la chaîne. Ils ne seront pas omis. C'est ça. On se voit dans le prochain. 29. Array et en des objets: Hé, dans cette vidéo, nous allons parler d' objet et le tableau fait la structuration. Ces deux fonctionnalités sont très utilisées. Examinons-les dans file.js. Disons que je voulais créer un objet, que ce soit une voiture. Et il aura les clés suivantes. La couleur, qui va être rouge, disons Gears 5 et peut-être le type de moteur. Mettons du diesel. Supposons maintenant que je souhaite accéder aux clés de cet objet. Donc d'habitude, je le ferais comme une voiture, puis je mettais le DOD puis le nom de clé auquel je veux accéder. Et si je voulais le mettre dans une variable, je le ferais généralement comme ça. Je vais donc déclarer une nouvelle variable appelée moteur. Et puis je mettais la voiture et l'attention. Et si je voulais extraire tous ces objets, je créerais une variable distincte pour chacun d'eux. Par exemple, les engrenages const seront des engrenages de voiture et nous ferons la même chose pour la couleur, n'est-ce pas ? Nous pouvons voir cela comme trois lignes de code distinctes. Eh bien, ce n'est pas très pratique dans le GPS moderne, nous pouvons faire quelque chose de plus simple, la destruction d'objets. Alors, au lieu de le faire, permettez-moi de le commenter. Nous pouvons le remplacer par une seule ligne. Nous allons donc mettre const, puis nous allons mettre des crochets bouclés pour spécifier que ce sera un objet structurant. Ensuite, nous allons mettre des égaux et l'objet que nous aimerions détruire, qui sera la voiture de cet objet de voiture, nous voulions tirer le moteur et les engrenages. Disons que nous n'avons pas besoin de couleur. Par conséquent, entre crochets, je spécifie les clés que je veux tirer de cet objet. Ce sera donc de la couleur. Et puis je vais tirer des engrenages. Cette seule ligne de code viendra-t-elle remplacer ces deux pour la couleur et les engrenages ? Si nous voulions tirer le moteur aussi, nous ne ferions que taper le moteur ici. Et bien sûr, il est très important de spécifier très strictement le nom de la clé. Disons que si nous avons des engrenages ici pour une raison quelconque et qu'ils sont capitalisés, nous ne sommes pas au courant de cela, n'est-ce pas ? Et nous détruisons les engrenages, vont être indéfinis parce qu' il n'existe pas sur cet objet. Essayons peut-être de consoler le journal, la couleur. Comme ça. Permettez-moi de faire rapidement des engrenages et aussi anciens. D'accord. Laissez-moi pauvre fichier Node GS et vous voyez le Colorado et les engrenages indéfinis moteur diesel, puisque nous avons des engrenages, des objets commençant par une majuscule, et nous détruisons des engrenages qui n'existent pas là-dessus objet. Nous n'avons pas défini, mais d'autres valeurs le sont. Très bien. Nous allons donc le remettre en place et vérifions qu'il fonctionne. Génial. Maintenant, nous avons Gears 5, cet objet est structuré, pense, est un outil vraiment puissant. C'est essentiellement tout ce qu'il fait. Il tire simplement les clés d'un objet. C'est ça. C'est essentiellement la même chose que faire cela avec ces trois lignes distinctes. Je dirais que ce n'est qu'un raccourci. Il n'apporte pas quelque chose de nouveau. C'est juste un raccourci. Il y a une autre chose que la structuration de cet objet est que, par exemple, avec la première approche avec ces trois lignes, nous pouvons facilement renommer les variables. Si je voulais spécifier le moteur de la voiture, je renommerais simplement la variable du moteur au moteur de voiture, comme ça. C'est assez facile, non ? Mais lorsque l'objet est structuré, n'oubliez pas que nous devons toujours spécifier une clé stricte que nous aimerions détruire, car autrement, elle n'existera pas. La clé n'existera pas sur cet objet. Alors, comment pouvons-nous les renommer ? Eh bien, pour ce faire, disons qu' au lieu du moteur, nous voulons utiliser un moteur de voiture. Je dois mettre deux points , puis le nouveau nom de cette variable. Maintenant, à partir de l'objet de la voiture, je tire le moteur et j'ai renommé moteur en moteur de voiture. Le moteur n'existera pas en tant que variable. Il apparaîtra comme moteur de voiture. Si je vais utiliser le moteur du journal de console uniquement, voyons ce que nous aurons. Nous aurons une erreur de référence. Le moteur n'est pas défini car cette variable n'existe pas. Nous avons tiré sur la clé du moteur, mais le nom de la variable est maintenant moteur de voiture. Donc, si nous voulons faire référence au moteur de voiture, cela ne nous causera aucune erreur. Je pense que c'est clair. Il en va de même pour les autres touches, si vous souhaitez renommer la couleur, nous allons mettre la colonne puis la couleur de la voiture. Et c'est tout. C'est assez facile, non ? Comme une destruction d'objet triste parce que c'est un outil vraiment puissant. Nous allons beaucoup l'utiliser, surtout dans React. Jetons un coup d'œil un exemple réel que nous allons utiliser dans React. Je vais donc créer une fonction, disons une fonction. Et cette fonction de somme recevra un argument, appelons-la voiture d'arc. Nous allons nous attendre à ce que notre voiture soit un objet. Et on peut appeler une fonction. Et nous fournirons notre objet de voiture pour notre voiture, n'est-ce pas ? Commentons rapidement et essayons de console.log, arg, voiture comme ça. Et nous verrons notre objet assez simple. Supposons maintenant que nous voulions annuler les clés distinctes du journal de cet objet. Encore une fois, la même image que nous venons de le faire. Donc, soit nous référençons ces clés en utilisant la syntaxe de nom de clé de porte de voiture à arc. Par exemple, la couleur du point de la voiture d'arc. C'est vrai ? Nous avons lu que si je vais utiliser un moteur, ce sera déloyal si je fournisse une clé non existante, par exemple des roues carrées, non ? Je vais être indéfini parce que cette clé n'existe pas sur cet objet. Au lieu de le faire, je peux utiliser la restructuration d'objets et je peux l' utiliser directement entre parenthèses. Donc, la première façon d'utiliser cette ligne de code, exactement comme ça. Et ça va marcher, non ? Tout comme nous l'avons discuté plus tôt. Mais au lieu de cela, je peux déplacer cet objet qui est structuré directement à l'intérieur des parenthèses. Je vais juste copier ça et le mettre ici. Et maintenant, nous venons de supprimer encore plus de lignes de code. Maintenant, je peux accéder directement aux couleurs et aux engrenages critiques. Vérifions que nous avons lu et cinq, ce qui est exact. Joli. Prolongeons un peu plus cet exemple. Que se passe-t-il si je fournisse un deuxième objet à une fonction ? Supposons donc que je fournisse un deuxième objet. Ce ne sera peut-être pas une voiture, mais je vais juste la mettre comme une voiture. C'est bon ? Et ici, j'attends un objet, et je m'attends à ce que cet objet de somme deux ait deux clés, le nom et l'âge. Je peux donc les référencer en faisant des objets sur le nom du point ou l'âge. Mais au lieu de cela, je peux à nouveau utiliser la destruction d'objets directement ici. Je mettrais donc le nom et l'âge. Nous utilisons la destruction d'objets pour nos deux arguments. Les arguments sont donc séparés par la virgule, n'est-ce pas ? Et les touches que nous détruisons sont assez facilement spécifiées entre crochets que certaines fonctions en sont un très bon exemple car nous aurons un morceau de code très similaire dans React. Combinons l'objet fait structuration avec les arguments par défaut. Alors, que se passe-t-il si je ne fournit aucun argument pour une fonction quelconque ? Permettez-moi de retirer le deuxième objet d'ici. Et disons que je détruis la couleur et les engrenages. Essayons ça. Que vais-je obtenir ? Je vais obtenir la couleur de propriété indéfinie de destruction impossible . Que s'est-il passé ? Eh bien, comme vous vous en souvenez, lorsque nous ne fournissons aucun argument pour certaines fonctions, cet argument que nous attendons d'un pair dans cette fonction ne sera pas défini. Donc, ce que nous faisons ici, nous essayons de tirer ces clés d'une valeur vide, qui n'existe pas sous le capot, cela ressemble à cela. Nous tirons donc la couleur et les engrenages de l'indéfini. Mais comme vous pouvez le constater, cette syntaxe entraîne une erreur de type. C'est incorrect. Donc, dans ce cas, pour corriger cette erreur, nous pouvons lui fournir une valeur de secours. Je vais donc mettre un objet vide, et maintenant voyons ce que nous allons avoir. Nous allons avoir indéfini, indéfini. Eh bien, cela est attendu parce que nous n'avons fourni aucune valeur pour cet objet. La valeur non définie revient à un objet vide. Et à partir de cet objet vide, perturbateur les clés, la couleur et les engrenages non existants. Eh bien, parce qu'ils ne sont pas définis sur un objet vide. Si je vais mettre la couleur verte et essayer de la consoler, vous verrez que la valeur sera verte et que les engrenages ne seront pas définis, n'est-ce pas ? Car encore une fois, notre valeur indéfinie revient à cet objet. Et à partir de cet objet, nous détruisons la couleur en engrenages. Il y a un autre inconvénient avec cette approche. Que se passe-t-il si je fournisse un objet vide ici ? Comme nous le savons peut-être, un objet vide est déjà une valeur définie, n'est-ce pas ? Je vais mettre un objet vide. Pouvez-vous deviner ce qui va être la couleur et les engrenages ? Correct ? Il va être indéfini. Non défini car maintenant la couleur et les engrenages, ils n'existent pas sur cet objet. C'est pourquoi nous n'avons pas été définis. Non défini. Que se passe-t-il si nous voulons spécifier valeurs par défaut pour des clés d'objet distinctes ? L'approche est la même en utilisant le signe égal. Ainsi, nous pouvons mettre la couleur par défaut sera verte. Mettons un objet vide pour le vérifier dans une seconde. Et les engrenages par défaut seront six, n'est-ce pas ? Maintenant, si je vais l'exécuter, vous verrez le vert et six. C'est plutôt génial. Encore une fois, pour étendre cet exemple, que passe-t-il si je supprime la valeur par défaut de l'objet lui-même, mais que je conserve les valeurs par défaut pour clés séparées et que je vais supprimer un objet vide ici. Essayons de l'exécuter. Une fois encore. Nous n'avons pas pu lire la couleur de propriété indéfinie car encore une fois, nous avons la même situation. Ces deux clés sont essayées d'être détruites à partir d'une valeur non définie, ce qui entraîne une erreur de type. Donc, pour y remédier, nous devons fournir une solution de secours. C'est important. Nous fournissons la solution de secours pour l'objet lui-même, et nous fournissons ici valeurs par défaut pour des clés détruites distinctes. Mais je suis d'accord pour dire que cette syntaxe est un peu déroutante. Nous pouvons en fait le refactoriser pour qu'il soit plus beau. Finalement, nous finirons avec une ligne de code plus importante, mais c'est très bien. Entre parenthèses, je vais ne conserver que la valeur par défaut de l'objet lui-même. Et au lieu d'utiliser la structuration, je vais mettre le nom de l'argument. Donc, que ce soit un objet de voiture. Et sur une nouvelle ligne, je mettrai en fait la restructuration de l'objet, const color gears correspond à l'objet Car. Maintenant, vous pouvez voir que nous avons réellement séparé les préoccupations entre parenthèses. Nous avons uniquement spécifié la valeur par défaut pour l'objet lui-même et sur une nouvelle ligne Lorsque nous utilisons cette structuration, nous spécifions des valeurs par défaut pour des clés distinctes, aussi simples que cela, je pense personnellement que c'est l'une des fonctionnalités les plus intéressantes disponibles dans les SIG modernes. J'aime beaucoup ça, mais nous avons aussi un rayon structuré à côté de l'objet. La structuration est en fait très, très similaire. Disons donc que j'ai un tableau ou que je vais peut-être supprimer tout ça. Je vais garder une certaine fonction, mais je vais le commenter. Et ci-dessous, je vais créer un tableau. Et je vais mettre des valeurs comme 5, 4, 3, 2 et 8. la même manière que j'applique restructuration d' objets à un objet, je peux utiliser une structuration de rayon pour signifier que nous utilisons la destruction d'objets. Nous utilisons des crochets bouclés, mais pour les tableaux, nous allons utiliser des supports de boîte. Ainsi, de la même manière, nous allons spécifier un tableau de somme égale entre crochets. Mais cette fois, nous n'avons pas besoin suivre strictement le nom des clés. Cela va-t-il s'opposer ? Nous avons des noms clés, mais dans le tableau, nous ne l'avons pas. Dans le tableau, nous avons des commandes. Ainsi, lorsque nous appliquons la destruction d'objets, peu importe dans quel ordre vous détruisez les clés. Mais dans une rage, c'est structurant. C'est important. Mais vous pouvez donner noms que vous voulez pour vos futures variables. Par exemple, j'aimerais perturber votre deuxième élément de ce tableau. Donc, pour ce faire, je dois d'abord détruire le premier élément, l' ordre que vous spécifiez dans une structuration de rayon sera le même que celui éléments dans le tableau d'origine à destructeur le premier élément, je fournit le premier élément. Et maintenant, j'ai détruit Le deuxième élément, deuxième élément, qui va être 4. Donc, le premier élément sera 5, le deuxième élément sera quatre. Comme vous pouvez le constater, la commande est conservée. Premier élément cinq secondes 4. Si je vais mettre le troisième élément ici, pouvez-vous deviner la valeur ? Eh bien, oui, il va y en avoir trois. Jetons un coup d'œil. Journal de la console, premier élément, deuxième élément et troisième élément. Notez le fichier GS, ce que nous voyons 5, 4, 3, exactement les mêmes valeurs. Si, pour une raison quelconque, je voulais émettre cet élément, disons que je l'utilise comme ça, non ? Const, deuxième élément. Eh bien, ça ne va pas marcher. Le deuxième élément va maintenant être le premier élément, qui est cinq. Si je console le consigne, vous le verrez, il sera cinq. Car encore une fois, la commande est importante lorsque vous appliquez une restructuration car les éléments, ils sont ordonnés, ils n'ont pas de noms clés. Vous pouvez donner n'importe quel nom à cette variable, mais vous devez conserver l'ordre. Je pense qu'il est enfin assez clair, je dirais qu'une structuration de rayon est utilisée de la même manière que la restructuration d'objets. Si vous voulez faire quelque chose similaire avec un rayon structuré entre parenthèses lorsque vous utilisez une fonction, cela fonctionnera. La différence est seulement qu'avec la destruction d'objets, q sont nécessaires pour utiliser crochets bouclés avec la structuration du rayon, vous allez utiliser des crochets et également l'ordre. N'oubliez pas que dans un tableau, les éléments sont classés et c'est pourquoi vous devez détruire tous les éléments précédents. Si vous vouliez détruire le numéro d'élément. Et si je veux détruire le quatrième élément, je dois perturber vos trois premiers. Cela est inévitable alors que dans les clés d'objets, ils ne sont pas commandés. C'est pourquoi vous pouvez utiliser n'importe quelle commande. Lorsque vous détruisez les clés, c'est à propos de la structuration d'un objet et d'un rayon. Nous allons l'utiliser beaucoup et j'espère que c'était clair pour vous. On se voit dans le prochain. 30. Opérateurs de l'écarte et de repos: Bonjour, Cette fois, nous allons parler du reste et des opérateurs de diffusion. Ces deux-là sont étroitement couplés à l'objet en race et sont beaucoup utilisés dans les js modernes. Découvrons ce qu'ils font. Si je retourne au fichier GAS, laissez-moi peut-être créer une fonction et le haut que je nommerai une fonction. Il va recevoir l'argument numéro un, l'argument numéro 2 et 4. Maintenant consoles religieuses log arg1, arg2, parfait. Ci-dessous, laissez-moi appeler cette fonction et laissez-moi fournir bonjour comme premier argument. deuxième argument va être n au troisième sera 15, peut-être juste une fonction de flèche vide, puis laissez-le être juste le numéro 5. Super. Si je dois exécuter ce script, je verrai que j'ai Hello Andrea, les deux premiers arguments. Maintenant, comment pouvons-nous réellement réaliser le reste des arguments et comment les accumuler en une seule unité, en S et Google supportables, c'est pourquoi l'opérateur reste existe. Il accumule le reste, les arguments sur le reste de quelque chose dans un seul baril. Au sommet, je vais juste nous donner une référence rapide. Ainsi, l'opérateur de repos accumule ou disons de fausses valeurs dans une seule variable. Défauts. Super. Donc, pour utiliser l'opérateur reste, il faut placer les trois points et le nom de variable dans laquelle le reste sera écrit. Alors qu'il s'agisse d'arcs. Il peut s'agir de n'importe quel nom. Maintenant, permettez-moi d'essayer de consoler le reste des arcs. Et maintenant, nous avons 15 fonctions anonymes et 5, nous allons essentiellement le reste des arguments que nous n'avons pas définis. Nous pouvons donc voir que nos deux premiers arguments sont bonjour et ONG, et le reste est 15, la fonction et cinq, super, si je vais supprimer R2 ici, pouvez-vous deviner comment le reste de RX va changer ? Essayons ça, non ? Nous avons donc Andrew au début de 15 fonctions et cinq. Et c'est ainsi que fonctionne l'opérateur de repos. Il prend simplement le reste des valeurs et les plie en une seule variable, comme cela. Voyons maintenant comment utiliser l'opérateur reste dans des objets et des tableaux. Permettez-moi de commenter cela. Et je vais créer un objet, dirais que ce sera la personne et le nom va être Andrew. Peut-être que l'âge sera de 10 ans. Et supposons que j'ai un objet qui est structuré ici. Et j'aimerais peut-être saisir le nom de cet objet que je vais annuler mes bagages. Nous pouvons recevoir la note angio. On y ajoute peut-être d'autres clés. Disons des jeux de passe-temps, parfaits. Maintenant, que se passe-t-il si je veux récupérer uniquement la clé de nom et le reste des clés, j'aimerais me plier dans un nouvel objet complètement nouveau. Dans ce cas, encore une fois, je peux utiliser l'opérateur de repos. Donc, tout comme dans la fonction, je vais juste utiliser trois points à l'intérieur de l'objet structuré et le nom de l'objet dans lequel le reste sera écrit. Donc, que ce soit le reste de la personne. Maintenant, permettez-moi d'essayer de consigner le reste de la personne. Et ce que j'obtiendrai, j'obtiendrai un nouvel objet avec le reste des clés que je n'ai pas détruites. ai donc détruit que le nom. Et le reste, c'est h et passe-temps. C'est pourquoi dans le nouvel objet, qui est le reste de la personne, je vais voir H et passe-temps si je vais ajouter H ici. Maintenant, le reste de la personne ne contiendra que des passe-temps parce que c'est le reste. Que reste-t-il ? Nous allons vérifier cela. jeux de passe-temps parfaits. Si je vais aussi détruire le passe-temps, pouvez-vous deviner la valeur maintenant ? C'est vrai ? Il va s'agir d'un objet vide. Si je veux supprimer toutes les clés, pouvez-vous deviner la valeur maintenant ? Correct. Ce sera exactement le même objet parce que le reste, eh bien, est toutes les clés que nous n'avons pas détruites depuis que nous n'avons rien entendu. Le reste est essentiellement tout ici. La même règle s'applique à l'effacement. Permettez-moi de commenter cela. Et en bas, je vais créer un tableau. Et je vais mettre 5, 4, 3, 10 et 8, non ? Et je vais appliquer une restructuration de raid. Donc const bogs crochets d'un tableau, de certains re, j'aimerais saisir premier élément et le reste. J'aimerais écrire dans une variable complètement nouvelle. Encore une fois, je vais mettre trois points et le nom de la variable, qui sera le reste d'un tableau. Vérifions que je vais consoler le reste d'un rayon. Et je vais avoir 4, 3, 10 et 8, ce qui est le reste du tableau que je n'ai pas détruit. Si je dois détruire votre deuxième élément. Maintenant, le reste sera de 3, 10 et huit parce que j'ai deux premiers éléments et le reste est 310 et 8. Si je vérifie que c'est correct, tout fonctionne parfaitement. Maintenant, nous n'avons pas parlé de l'opérateur de propagation, mais nous pouvons voir qu'il comporte également les trois points. Eh bien, le fait est que les opérateurs restants et dispersés ont la même syntaxe, mais ils sont utilisés dans des contextes différents et il est très facile de les manquer confondus. Comme nous le savons, l'opérateur reste accumule ou faux le reste de quelque chose en une seule variable. Ils se répandent l'opérateur fait exactement le contraire. Il démontre une certaine valeur. Laissez-moi vous le démontrer. Supposons donc que nous ayons un objet. Très bien, où est-il ? Réutilisons cet objet de personne. Et disons que j'ai un autre objet que l' on appelle un autre objet. Et il y a des domaines tels que génome de l' IA dont leur nom va être Alex, et peut-être que la voiture sera BMW. Super. Que se passe-t-il si je veux fusionner ces deux objets ? Nous pouvons utiliser l'opérateur de propagation pour y parvenir. Nous allons donc créer ci-dessous un objet complètement nouveau, que nous appellerons objet fusionné. Il va s'agir d'un objet vide. Et dans cet objet vide, nous allons d'abord répandre l'objet de la personne, puis nous allons répandre un autre objet. Nous avons donc d'abord répandu la personne , puis nous avons répandu un autre objet. Pouvez-vous deviner ce qui va être l'objet de la vallée de Merced ? Vérifions l'objet défilé. Et nous voyons que le nouvel objet possède toutes les clés que nous avons en personne et dans un autre objet combiné. Comme je vous l'ai déjà dit, l'opérateur de propagation déplie des valeurs. Ainsi, dans ce cas, il a d'abord déplié l'objet de la personne, puis il a déplié un autre objet. plus de cela, comme vous le remarquez peut-être déjà, il a exactement la même syntaxe, trois points que l'opérateur rest, mais ils ont tous deux la différence sous-jacente que, encore une fois, l'opérateur de propagation déplie les valeurs pendant que l'opérateur reste les plie. Jetons un coup d'œil à un autre exemple avec des objets. Et si, au lieu de cela, je vais simplement fusionner directement un autre objet à l'intérieur d'une personne. Je peux facilement le faire comme ça. Un autre objet. Et bien sûr, je dois le mettre au sommet. Et maintenant, je n'ai pas besoin d'objet fusionné. Et maintenant, notre nouvel objet de personne contiendra toutes les clés du bol lui-même et d'un autre objet. Cela est très flexible car vous pouvez désormais utiliser l'opérateur de propagation pour gérer les objets comme vous le souhaitez. Vous pouvez fusionner des objets ensemble. Vous pouvez fusionner un objet dans un autre. Et il y a quelques autres cas d'utilisation qui vous permettent d'utiliser cette propagation pour déplier les clés d'un objet dans un autre endroit. Dans notre cas, ce que nous venons de faire, nous avons déplié toutes les clés de cet objet dans l'objet Personne. Si je veux supprimer l'opérateur de propagation, voyons ce qui va être dévalué. Nous aurons un autre objet en tant que personne d'information clé. Et cette clé contiendra la valeur de l'objet avec des clés, autre nom et une voiture. Pourquoi l'avons-nous comme ça ? Eh bien, cette syntaxe que vous voyez ici est essentiellement le raccourci d'un autre objet, deux-points, d'un autre objet. C'est la clé, c'est la valeur. Mais lorsque nous avons une situation, lorsque key aura le même nom que la variable qui contient la dévalue, qui est un autre objet. Nous pouvons utiliser le raccourci et cela fonctionnera. Parfait. Voyons maintenant l'opérateur de propagation sur l'effacement. Je vais commenter cela. Et je ne serai pas commun à notre tableau de somme. Nous avons donc ici le reste d'un tableau. Enlevons vraiment ça. Et prenons cet exemple. Y est, créons une nouvelle variable et aucun tableau, et laissez-le être 123. Bien. Maintenant, de la même manière que nous avons fusionné des objets et exactement de la même manière nous sommes capables de fusionner l'effacement, n'est-ce pas ? Je vais donc créer un tout nouveau tableau. Je vais appeler ça le résultat. Et dans ce nouveau tableau, je vais d'abord déplier un résumé, puis je vais dévoiler un autre tableau. Donc, à la fin, nous allons simplement concaténer ces deux tableaux. Résumé et n'oubliez pas trois points. Et puis un autre tableau avec trois points. Maintenant, nous ne sommes que les résultats du journal de la console et recevrons éventuellement deux baies combinées. Génial. Il s'agit d'une flexibilité spatiale avec des tableaux car nous sommes en mesure déplier un tableau dans un autre tableau à n'importe quel endroit. Cela signifie que si je veux simplement les remplacer, je vais juste les échanger, non ? J'aurai une commande complètement différente car maintenant un autre tableau passe en premier. C'est pourquoi je vois 123 et le tableau qui en résulte. Si je veux retirer l'opérateur de propagation des deux. Maintenant, notre tableau ne comporte que deux éléments où chaque élément est un tableau lui-même. C'est vrai ? Nous avons donc un ensemble de deux éléments. premier élément est un tableau, second est un tableau, mais ce n'est pas exactement ce que nous voulons. Normalement, nous ne voulons pas de ces tableaux imbriqués. Nous voulions travailler avec une course plus plate car c'est pratique et bien, c'est tout simplement normal à voir. Il y aura beaucoup de situations où nous devrons utiliser l'opérateur de propagation dans les tableaux. Et nous aimerions suivre strictement certaines commandes avec l'opérateur de spread, nous sommes en mesure de placer toutes les valeurs où nous le voulons. Tout comme je le fais en ce moment, non ? Pouvez-vous deviner la valeur, la valeur résultante, si je mets cette ligne de code, laissez-moi voir. Donc, d'abord, j'aurai un autre tableau. Après toutes les valeurs d'un autre tableau qui est 1, 2 , 3, je vais avoir 15, 16 et 12. Après cela, j'aurai toutes les valeurs du résumé. Et à la fin, je vais avoir 16, 1 et 0. C'est plutôt cool. Je suppose que tout est question des opérateurs de propagation et de repos. Nous allons beaucoup les utiliser. Ils sont très, très utiles. Je vous conseille donc de vous mettre à aise avec eux et de vous entraîner un peu. Ils peuvent être déroutants, mais ils finissent par être très faciles. Alors croyez-moi, prenez un peu de temps, habituez-vous et je vous verrai dans le prochain. 31. Async , Callstack et boucle d'événement: Bonjour, nous avons enfin atteint notre dernier sujet JavaScript, une promesse de code d'évier et d'évier et asynchrone vous attendent. C'est le sujet le plus important de la GS moderne, la connaissance de ce sujet est essentielle. Sans cette connaissance, le développement JavaScript ne sera jamais complet pour vous. C'est pourquoi je suggère de me mettre le plus aise possible avec ce sujet. Pour comprendre un code d'évier et d'évier et de promesses, vous devez comprendre des sujets plus approfondis, comment fonctionne le GPS sous le capot, qu'est-ce que la boucle d'événements et la pile d'appels ? Dans cette vidéo, je vais essayer expliquer en termes simples comment JavaScript fonctionne afin de comprendre ensuite le concept de promesses, lâcher prise. Ce que vous voyez à l'écran en ce moment est un aperçu de haut niveau de la façon dont JavaScript exécute le code. Cette image décrit comment GS s'exécute dans le navigateur. Pour NodeJS, il sera légèrement différent, mais il est bon de l'utiliser pour notre cas d'utilisation. Ainsi, dans le cadre jaune, vous pouvez voir des parties du moteur JavaScript appelées pile de tas et d'appels. Le segment se trouve dans l'espace alloué à la mémoire où toutes les variables définies vivent pendant l'exécution du code. La pile d'appels est le lieu de débit où JavaScript décide ce qu'il faut exécuter. Ensuite, nous parlerons de la pile d'appels et d'un moment. En dehors du cadre GS, vous pouvez voir les API Web, le rappel, la file d'attente et la boucle d'événements. Tous ces éléments ne font pas partie du moteur JavaScript. Cela signifie qu'ils sont définis par l'environnement dans lequel JavaScript s'exécute. Nous connaissons deux environnements d'exécution JavaScript principaux, navigateur et NodeJS. Par exemple, les API Web incluent des éléments tels que l'API DOM ou l'API Fetch, qui font partie de l'environnement du navigateur. Seulement, les API Web ne sont pas implémentées dans Node.JS. Nous n'avons pas de fonctionnalités de manipulation HTML telles que document get element by ID et NodeJS. s'agit de fonctionnalités implémentées dans l'environnement du navigateur qui ne connaissent que gs, mais implémente quelques éléments à partir des API Web. Par exemple, définissez un délai d'attente. Ils se ressemblent exactement dans les deux environnements, mais sous le capot, la mise en œuvre est différente. Vous avez peut-être déjà entendu dire que JavaScript est un langage à thread unique. Mais qu'est-ce que cela signifie ? Cela signifie que JavaScript possède une pile d'appels unique. En tant que pile d'appels uniques, la langue ne peut traiter qu'une seule opération à la fois. Imaginez une porte simple. Peu de gens qui essaient de passer par la porte ne peuvent s'adapter qu'à une seule personne à la fois. Il ne peut pas convenir aux gens même temps que la première personne entre dans l'embrayage de la porte. Et si cette personne devient plus grande que les autres personnes qui essaient de passer par la porte, il faudra attendre parce qu'elle ne peut entrer qu'après que la personne d'origine ait quitté la porte, d'autres personnes pourront continuer et passer par la même chose avec moteur JavaScript s'il y a deux lignes de code qui vont l'une après l'autre, par exemple, deux journaux de console, nous savons que la première ligne de code sera toujours exécutée en premier et seulement après la première ligne, la deuxième ligne sera exécutée. Cela signifie que si la première ligne de code prend cinq ans pour être exécutée, la deuxième ligne de code attendra toutes ces cinq années avant la fin de la première opération, et seulement après cela, elle sera exécutée. Encore une fois, JavaScript est un langage à thread unique avec une pile d'appels unique. En raison d'une pile d'appels unique, GS Engine ne peut traiter qu'une seule opération à la fois. La pile d'appels est un stockage temporaire pour toutes les fonctions en attente à exécuter. Et il est organisé comme une pile, une structure qui suit la dernière méthode de première sortie. Dernier entré, premier sorti signifie que dernier élément ajouté au le dernier élément ajouté au stockage sera toujours retiré en premier, un tas de plaques est un parfait exemple de dernier entré, premier sorti, imaginez un tas de plaques. Vous empilez les plaques les unes sur les autres. Une fois que vous avez des gabarits les uns sur les autres, supposons que vous deviez retirer la toute première plaque par le bas. Vous ne pouvez pas simplement le prendre par le bas à droite ? Si vous le faites, le tas tombera et les assiettes se disperseront. Le seul moyen pour vous de retirer ce jeu est de retirer toutes les plaques du haut, une par une jusqu'à ce que vous atteigniez la plaque souhaitée en bas, ce type d'organisation s'appelle pile. La dernière plaque ajoutée à la pile va d'abord se détacher de cette pile. Ainsi, le nom est le dernier en premier sorti. pile d'appels de Java pourrait suivre exactement la même organisation. Imaginez maintenant un conteneur. Ce conteneur va être la pile d'appels. Sur la gauche, il y a un simple morceau de code. Voyons comment JavaScript protesterait contre cet extrait. Javascript divise le code en fonctions. Lorsque JavaScript doit exécuter une fonction, elle est ajoutée en haut de la pile d'appels. Chaque fois que la fonction quitte ou revient, elle est supprimée de la pile d'appels. Donc d'abord, JavaScript voit console.log. Êtes-vous prêt ? Il est ajouté à la pile d'appels puis exécuté et immédiatement supprimé. Après que gs, Cs, imprime ma biographie, il est ajouté à la pile d'appels à l'intérieur imprimer ma bio, GS voit d'abord, obtenez mon nom, ce qui signifie qu'il a été ajouté en haut de la pile d'appels. Gs regarde à l'intérieur, Get FirstName et voit que cette fonction renvoie une valeur. Une fois la fonction retournée, GS la supprime de la pile d'appels. L'exécution de Print My Bio se poursuit. Maintenant gs, Cs fonctionnent GetAge, la même situation. Gs regarde dans GetAge, la fonction revient et est supprimée de la pile d'appels. Ensuite, il y a console.log final. Je m'appelle Andrew, j'ai 10 ans, ajouté et supprimé instantanément. Imprimer ma biographie quitte et la pile d'appels est vide. L'exécution du code principal ou du mainframe est maintenant terminée. La pile d'appels maximale notoire dépassée ou erreurs de dépassement de pile se produisent lorsque la taille de la pile d'appels est gonflée et que le nombre est devenu ridiculement énorme car le moteur ne peut pas traiter ce nombre d'opérations dans le pile d'appels. Parce que JavaScript a une pile d'appels unique qui est organisée de la manière que vous venez de voir. C'est ce qu'on appelle le blocage. N'oubliez pas qu'une opération à la fois, la fonction suivante ne sera pas exécutée avant la fin précédente. Cela nous amène au terme synchrone, ce qui signifie essentiellement que l'exécution se déroule une par une telle que nous le voyons dans le code. Le comportement de blocage peut être facilement absorbé dans l'environnement du navigateur. Sur n'importe quelle page, cliquez avec le bouton droit de la souris, sélectionnez Inspecter, puis ouvrez l'onglet de la console. Dans l'onglet de la console, nous sommes en mesure d'exécuter n'importe quel code JavaScript valide dans le navigateur. Par exemple, console.log. Wow produira wow imprimé dans la console. Parfait. Mais qu'en est-il du comportement de blocage dans l'environnement du navigateur, nous avons la fonction d'alerte et c'est un bon exemple pour démontrer le comportement de blocage. Je vais donc taper Alert High. Et une fois que j'ai appuyé sur Entrée, que se passe-t-il, c'est que je vois d'abord la fenêtre contextuelle qui dit haut, mais que se passe-t-il sous le capot ? Sous le capot, la fonction d'alerte a été ajoutée à la pile d'appels et elle n'a pas encore été supprimée car l'alerte n'a pas quitté et que alert n'a renvoyé aucune valeur, ce qui signifie que l'alerte est toujours à l'intérieur de la pile d'appels et bloque l'exécution de tous les appels de fonction suivants. Je vais consigner n'importe quoi. Lorsque j'appuie sur Entrée. Rien ne se passe car actuellement, l' alerte se trouve à l'intérieur de la pile d'appels et bloque l'exécution, et elle continuera à bloquer l'exécution jusqu'à ce que la fonction d'alerte revienne ou se termine. Et ça va arriver ce que je vais appuyer, OK, donc je vais appuyer sur console.log. Je vais exécuter le journal de la console deux fois de plus , puis je vais appuyer sur OK, voyons ce qui va se passer. Maintenant. Vous voyez comment tout vient de se dégeler sous le capot. La fonction d'alerte a été supprimée de la pile d'appels et l'exécution s'est poursuivie. C'est pourquoi je peux voir tous les journaux de ma console S3 pour lesquels j'ai appuyé sur Entrée plus tôt. Super. Nous comprenons maintenant le code de synchronisation. Comme vous pouvez le constater, il n'est pas très pratique d' attendre toujours la fin d'une opération. C'est ici qu'un code de synchronisation vient à la rescousse. Lorsque JavaScript lit un morceau de code, il est traité, non exécuté, traité en arrière-plan, et une fois traité, il est placé dans une file d'attente séparée, ce qui attend que la pile d'appels soit devient vide lorsque tout le code de synchronisation est exécuté et que la pile d'appels devient vide, code asynchrone, qui a été placé dans la file d'attente, est poussé dans la pile d'appels et est en cours d'exécution. Il existe des fonctionnalités linguistiques spéciales qui nous permettent d'écrire du code asynchrone. Il s'agit de promesses et de rappels dont les implémentations nous sont exposées par l'environnement. Les navigateurs, les API Web traitent le code en arrière-plan et retardent sa boucle d'événements d'exécution dans ce système est une sorte d'observateur pour la pile d'appels et la file d'attente Async, une fois appelée la pile est vide. boucle d'événements extrait les éléments de la file d'attente et les place dans la pile d'appels. Ce concept introduit un modèle d'exécution de code non bloquant. Cela ne modifie pas le fait que la pile d'appels peut traiter qu'une seule opération à la fois, mais elle permet d'exécuter le code de manière non bloquante. Considérons un cas avec deux opérations. Envoyez une demande à un serveur et imprimez bonjour sur la console. La demande prend 500 millisecondes à se terminer pendant que l'impression Hello ne prendrait que dix millisecondes si utilisation du journal de console modal de synchronisation devait attendre 500 millisecondes pour la demande que vous terminer et seulement alors bonjour est imprimé. Avec le modèle non bloquant, la demande serait traitée asynchrone en arrière-plan. Eh bien, le code de synchronisation continue son exécution. Nous verrions que Hello s'imprime tout de suite après dix millisecondes et la demande en arrière-plan, nous finirons son exécution dans le futur après 500 millisecondes sous le capot, il y a en fait plusieurs files d'attente. L'un pour les minuteurs, l'autre pour les sacs froids, 14 promesses, etc. Ils ont des priorités différentes et un certain ordre. Par exemple, les promesses ont priorité sur rappels pour ne pas trop compliquer cela, imaginons qu'il existe une seule file d'attente pour tout le code asynchrone. L'un des exemples de code asynchrone est celui des rappels. Le rappel est une fonction qui est transmise en argument à une autre fonction. Les rappels ne sont pas asynchrones par défaut, mais ceux exposés par les API Web le sont en fait. Par exemple, jetons un coup d'œil à SetTimeout. Il est disponible dans les environnements GS et navigateurs connus. Nous allons jeter un coup d'œil à deux exemples. Un à l'intérieur de la GS et l'autre dans le navigateur. En fait, peu importe où nous allons utiliser SetTimeout. Mais plus c'est le mieux, n'est-ce pas ? Le premier exemple sera à l'intérieur d'aucun GS. Et j'ai déjà préparé ce simple morceau de code avec deux journaux de console et SetTimeout. SetTimeout s'attend donc à ce que nous fournissions deux arguments, le premier argument étant le rappel qui sera exécuté après le nombre de millisecondes que nous fournissons. En deuxième argument, dans ce cas, je fournis à 0 millisecondes, cela signifie que l'exécution ne sera pas retardée. Mais voyons comment le code sera exécuté. Pouvez-vous deviner le résultat ? Que viendra-t-il en premier ? Voyons voir. Je vais exécuter le script et nous voyons 1, 2, et seulement ensuite le timeout est déclenché. Le fait est que SetTimeout est asynchrone. Cela signifie que le délai d'attente, le rappel a été ajouté à la file d'attente de rappel en arrière-plan. Je vais fournir 2504,52 secondes. Voyons en quoi l'image sera différente. J'exécute le script, je vois 12. Ensuite, je vois un délai de 2,5 secondes. Et seulement alors le délai d'expiration IC se déclenche sous le capot. paramètre Settimeout a été traité par le code. Settimeout a été ajouté à la pile d'appels, mais le rappel et l'exécution du minuteur ont été délégués aux API Node.js à traiter en arrière-plan, SetTimeout a été supprimé de la pile d'appels. Cela signifie que l'exécution se poursuit. Ensuite, nous voyons le journal de console un dans la pile d'appels et instantanément supprimé. Et la même chose avec le deuxième journal de console ajouté à la pile d'appels et instantanément supprimé. Et une fois en arrière-plan, la minuterie est terminée après 2,5 secondes à l'avenir. Ces rappels seront ajoutés à partir de la file d'attente de rappel en arrière-plan dans la pile d'appels, puis exécutez-les. Et peu importe le nombre de millisecondes que je vais fournir pour le deuxième argument. Il s'agira toujours d'une protestation non bloquante, et elle sera poussée vers la file d'attente de rappel. Et seulement après que la pile d'appels devienne vide, la boucle d'événements retirera ce rappel de la file d'attente de rappel en arrière-plan et le poussera dans la pile d'appels. Peu importe le nombre de millisecondes que je fournis ou où j'ai mis ce code, il sera toujours de protester de façon asynchrone. Si je le mets entre les deux et que je fournis 0 millisecondes, l'image est la même. Jetons un coup d'œil au deuxième exemple. Vous pouvez voir un code HTML d'index très basique, qui comporte un seul élément de bouton avec id, btn. Ensuite, à l'intérieur du script, je viens d'appuyer sur ce bouton en utilisant l'API DOM, sélecteur de crédits documenté, le hashtag, mon btn. Ensuite, à cet élément de bouton, j'attache un écouteur pour l'événement OnClick et pour l'événement OnClick sur BET et la fonction Click se déclenche. ce moment, il est vide, mais ajoutons quelque chose dans le journal de la console bonjour. Et laissez-moi ouvrir ce index.HTML dans le navigateur. Cliquez avec le bouton droit sur révélation dans l'explorateur Double-cliquez dessus et boum, voilà. Cliquez avec le bouton droit sur Inspect. Et j'ouvre l'onglet de la console, j'appuie sur cliquez sur moi et je vois que bonjour est imprimé comme nous l'avons défini dans le gestionnaire de l'événement OnClick. Parfait, copions et collons le code que nous avions dans aucun GS dans le gestionnaire. Maintenant, est-ce que le comportement va être le même qu'à l'intérieur non, GS. Nous allons vérifier cela. Je retourne dans le navigateur, je rafraîchis la page. J'appuie sur le bouton et comme je peux le voir, commence par 1, 2, puis seulement le délai d'attente se déclenche, même s'il est placé entre les journaux de la console. Si je le mets au travail et si je vais mettre, disons deux secondes. Je rafraîchis la page. Je clique en bas, une à deux secondes se sont écoulées dans les feux de temporisation IC. Eh bien, la photo est la même. Ce qui se passe, c'est qu'une fois que JavaScript lit SetTimeout, SetTimeout est à nouveau ajouté à la pile d'appels, mais le rappel et le minuteur ont été délégués cette fois aux API Web du navigateur. Cela signifie qu'ils sont traités en arrière-plan. L'exécution se poursuit. Settimeout est supprimé de la pile d'appels. Journal de la console ajouté à la pile d'appels, exécuté et supprimé. Et la même chose avec le deuxième journal de la console. Une fois le code terminé, le mainframe ou le code principal terminé, boucle d' événements vérifie constamment la file d'attente de rappel. Le rappel est donc ajouté à la file d'attente de rappel. Ensuite, la boucle d'événements voit cela et pousse ce rappel dans la pile d'appels. Et après cela, l'appel se retourne sur le niveau. Mais voyons cela avec l'exemple de blocage. Et si je dois mettre l'alerte au lieu du journal de la console, je vais simplement taper alert high. Et je vais supprimer le deuxième journal de la console. Et maintenant la question est définir le délai d'attente sera traité en arrière-plan une fois que l' alerte commencera à bloquer la boucle d'événement, Voyons voir. Je rafraîchis la page. J'appuie sur le bouton, alerte les feux, et maintenant il bloque la boucle d'événement. Mais je ne vois rien à l'intérieur de la console. Et si je dois appuyer sur le bouton OK, n'est qu'après cela que le code commencera à traiter le rappel. Parce que SetTimeout apparaît après la ligne d'alerte. Si nous voulons placer SetTimeout avant la ligne d'alerte , l'image sera différente. Pour actualiser la page. Cliquez à nouveau sur le bouton Moi. Alert commence à bloquer la boucle d'événements, mais maintenant SetTimeout a déjà délégué le traitement de ce rappel aux API Web. Cela signifie que si l'alerte bloque la boucle d'événements, rappel est traité par les API Web en arrière-plan. Et maintenant, ce rappel se trouve dans la file d'attente de rappel en attendant d'être poussé vers la pile d'appels. Si je dois appuyer sur OK, je verrai instantanément des feux de temporisation. C'est vrai ? Mais si je dois appuyer sur OK, dans ces deux secondes ici, l'image changera, rafraîchira la page, cliquez sur moi, appuyez instantanément sur OK. Et vous pouvez voir que c'était encore moins de deux secondes car une fois que j'ai cliqué sur le bouton, cela est instantanément délégué aux API Web. Et peu importe combien de temps la ligne d'alerte bloquera l'exécution. Cela est déjà traité en arrière-plan. Super. En termes simples, on peut dire que le code asynchrone est ce type de code qui est toujours exécuté après tout le code synchrone. Pour se souvenir facilement de ce concept, imaginez deux colonnes, une pour la synchronisation et 14 codes asynchrones, disons que gs commence à lire le code, puis qu'il trie le code en colonnes zinc et zinc. Et une fois qu'il est temps d'exécuter le code, suffit de placer la colonne asynchrone sous la colonne du lavabo. Et voilà. Il s'agit de l'ordre dans lequel le code sera exécuté. Bien sûr, cela est trop simplifié, mais cela donne l'idée de base. Dans GAS moderne, vous verrez des promesses partout. La base des promesses est le code asynchrone. C'est pourquoi il est si important de tirer parti de ce concept. Demandes de serveur, opérations de base de données, opérations de lecture de fichiers. Pour tout cela, nous utiliserions des promesses et du code asynchrone. J'espère que c'était clair et maintenant vous comprenez mieux comment GS interprète le code. La prochaine fois, nous parlerons de promesses et de l'asynchrone vous attendent. Voir les autres. 32. Code Async et Sync - Promis et Promises: Bonjour, Dans cette vidéo, nous allons enfin parler de promesses et asynchroniser l'attente. Allons-y. Nous savons que la base des promesses est le code asynchrone. Mais qu'est-ce qu'une promesse ? Une promesse est un objet qui produira une certaine valeur dans le futur. De manière asynchrone non bloquante, une promesse peut être l'un des trois états en attente, l'état résultats et l'état rejeté. Bien qu'une promesse soit en attente, cela signifie que la promesse n'a pas été résolue ou n'a pas encore produit de valeur, une promesse est résolue. Cela signifie que la promesse a déjà produit une valeur. Et lorsque les promesses sont rejetées, cela signifie que cette promesse a été lancée et qu'elle n'a produit aucune valeur. Très bien, voyons à quoi ressemble une promesse très élémentaire et voyons comment nous pouvons commencer à travailler avec eux. Laissez-moi donc créer une variable. Je vais appeler ça faire un peu. Et à l'intérieur de cette variable, je vais juste appeler constructeur promis. Pour ce faire, je dois faire de nouvelles promesses. Et le constructeur de promesses, je dois fournir l'exécuteur ou le rappel qui initialisera la promesse. Je vais donc passer un rappel vide. Et ce rappel que je passe au constructeur reçoit toujours deux arguments. Le premier argument est ce que l'on appelle resolve. Le deuxième est le rejet. Le premier argument est donc la fonction que nous devons appeler à l'intérieur du rappel afin de produire une valeur à partir de cette promesse. Et lorsque nous appelons le rejet, nous jetons évidemment une erreur de cette promesse. Nous rejetons cette promesse. Par exemple, je vais juste appeler Resolve. Et comme vous pouvez le constater par l'intelligence, j'ai une valeur que je dois passer. Nous résolvons une promesse avec certaine valeur car la promesse produit une valeur. Par exemple, bonjour. Essayons d'utiliser cette promesse d'une manière ou d'une autre. Rappelez-vous donc qu'une promesse, ce n'est pas une fonction. Il serait donc faux de l'appeler entre parenthèses comme si cela était une fonction. Il suffit juste de faire référence à la promesse pour qu'elle fonctionne. Si j'enregistre le fichier et que j'exécute le script, vous verrez que rien ne se passera car bon, nous n'imprimons rien à la sortie. Mais si je vais faire un journal de la console, dans ce cas, je verrai que objet de la promesse sera imprimé. Il est important de noter que ce que vous voyez ici est l'objet prometteur. C'est donc la promesse elle-même. Ce n'est pas la valeur que la promesse résout. Ce rappel que nous passons pour promettre constructeur est initialisé de manière synchrone. Cela signifie que chaque fois que nous faisons référence à certains, ce rappel s'exécutera de manière bloquante. Cependant, la valeur qui sera résolue à partir de cette promesse est résolue de manière non bloquante. Et pour résoudre une valeur de cette promesse pour obtenir la chaîne réelle bonjour, je dois utiliser cette syntaxe de promesse spéciale appelée alors ou simplement une syntaxe vénérable. On l'appelle parfois comme ça. Il en va de même pour le DOD. Et d'après l'intelligence que vous pouvez voir, j'ai trois options attraper enfin, et ensuite, pour résoudre une valeur de cette promesse, je dois appeler la méthode point puis sur l'objet promesse et la méthode 2D dot-dot-dot, Je dois passer un rappel. Et ce rappel en tant que premier argument recevra la valeur de résultat de cette promesse, par exemple la valeur résolue. Et si j'essaie de consoler la valeur du résultat du journal, vous verrez que ce sera notre chaîne Hello. Si j'exécute le script, vous voyez que Hello est imprimé sur la sortie, ce qui est correct. Maintenant, qu'en est-il de la fonction de rejet que nous recevons comme deuxième argument dans l'initialiseur. Essayons donc et, au lieu de Resolve, utilisez reject, et une fois qu'ils l'appellent, vous pouvez voir une raison d'argument facultative. Donc, chaque fois que nous rejetons une promesse, nous avons rejeté avec une raison quelconque , la plupart du temps, vous rejetterez une promesse avec une erreur et d'autres promesses que vous allez laisser dire une rencontre dans la nature, ils rejetteront tous avec un objet Adder. C'est pourquoi, au lieu de simplement passer le rejet avec cette promesse a échoué. Mais le message comme celui-ci, au lieu de cela, nous passons un nouvel éditeur et le message va être prometteur, a échoué. Maintenant, si je vais exécuter ce script, vous verrez une erreur, vous verrez une erreur, promesse a échoué et géré avertissement de rejet de promesse et note importante ici que ce rappel n'a jamais été déclenché parce que la promesse a rejetée et nous ne voyons aucune valeur de résultats. Cela signifie que la promesse génère une erreur et que nous ne faisons rien pour y remédier. Essayez toujours de détecter les erreurs de Promises. C'est vraiment important, car sinon vous verrez des messages comme ce rejet de promesse non géré, qui peut potentiellement planter l'application. Donc, pour attraper ce rejet à l'intérieur de la promesse, nous devons utiliser le bloc de capture que nous avons vu plus tôt. Je vais juste mettre le DOD et ensuite je vais appeler la méthode de capture. Et à l'intérieur, je dois aussi passer un rappel car le premier argument qui rappelle la méthode catch recevra tout ce que nous rejetons cette promesse. Puisque nous avons rejeté cette promesse avec un autre objet, une nouvelle promesse a échoué. Ici. Tout d'abord, je vais recevoir l'objet. Je vais donc juste voir le journal de la console. Et je dirai que l'adder s'est produit. Et puis je vais juste imprimer un message d'erreur. Super, essayons d'exécuter le fichier. Vous verrez que nous n'avons pas d' avertissement de rejet de promesses non gérées. Et cette fois, nous voyons notre journal de console. Ainsi, chaque fois que nous rejetons la promesse, toutes les danses que nous avons définies pour résoudre à partir de cette promesse ne seront jamais exécutées parce que la promesse génère une erreur et que cette erreur ou ce rejet est géré par le bloc de capture. Une autre bonne astuce sur les promesses est la danse des points. Ils peuvent être enchaînés autant de fois que nous le voulons, même que pour les blocs de capture. Par exemple, si je vais remettre un autre point ici , vous verrez enfin l'esquisse intelligente. Et encore une fois, j'appelle la méthode alors, je passe le rappel. Cette fois, j'ai reçu de la valeur, disons, et j'essaie de consoler la valeur du journal en second lieu. Et pouvez-vous deviner quelle sera cette valeur ? Essayons. Et nous voyons qu'une promesse a échoué. Ah, ok, donc au lieu de rejeter, reprenons la résolution pour donner le contrôle de la danse au point. Nous n'avons pas besoin de jeter cette promesse cette fois. Donc, notez le fichier GS, vous pouvez voir Hello d'abord imprimé parce que c'est ce que nous faisons lors du premier rappel, puis nous voyons la valeur dans le second Dan n'est pas définie. Le fait est que lorsque vous enchaînez des multiples puis des arguments, le premier argument du Dan suivant sera la valeur renvoyée de la précédente, car à partir de ce premier, puis le rappel ne garantira rien. Le deuxième point puis le premier argument ne sera pas défini. Si je dois en renvoyer cinq ici, la valeur ici sera cinq. Essayons. Et vous verrez la valeur en secondes, puis vous serez cinq. Donc, si je vais utiliser un autre troisième Duck Dan, et cette fois disons que Val trois En troisième, ça va être trois, non ? Il va être indéfini, n'est-ce pas ? Parce que la littérature n'a rien du précédent. Alors, si je dois revenir 10, le val trois sera 10. J'espère que c'est clair. Et vous avez peut-être une question : pourquoi devons-nous enchaîner plusieurs danses ici ? Le fait est que dans le monde réel, nous allons travailler avec plusieurs promesses en même temps. Et à l'intérieur d'une promesse, nous allons appeler une autre promesse quelque chose comme faire un point alors, puis à l'intérieur, nous aurons quelque chose comme retourner une autre promesse et encore une fois, et ainsi de suite. C'est pourquoi il est plus facile transmettre le résultat d'une logique à une autre, afin de simplifier le code afin de le rendre plus lisible. Je sais que c'est peut-être déroutant parce qu'il n'y a pas de véritable exemple en ce moment ici. Mais croyez-moi, c'est très bien. Vous le verrez à l'avenir. Essayons de créer un exemple plus réel en utilisant des promesses. Je vais donc simplement supprimer tout ça. Et au lieu de cela, créons une toute nouvelle promesse que nous allons envelopper la fonction setTimeout que nous connaissons déjà. Nous aimerions convertir SetTimeout syntaxe basée sur des promesses. Par exemple, je veux créer une fonction, appelons-le poids, somme. Cette fonction que je passerais, disons le nombre de millisecondes, disons 40000 pendant 40 secondes. Et cela va être une fonction qui renverra une promesse. Et après cette fonction, une fois résolue, une fois la promesse résolue, ce rappel sera exécuté. Par exemple, le journal de la console, quatre secondes passées. C'est une sorte de remplacement pour SetTimeout, mais l'utilisation de la syntaxe promise soit. Donc, comment nous sommes capables de mettre en œuvre cela. C'est donc notre maquette. venons de commenter, et commençons maintenant à écrire la promesse. La somme de poids est donc une fonction qui reçoit un argument, c'est-à-dire le nombre de millisecondes. Je vais donc créer une somme de poids. En tant que fonction flèche. Cette fonction reçoit un délai d'expiration d'un argument dans un tel gâchis. Et cette fonction renvoie une promesse, qui renverse une nouvelle promesse au constructeur de promesses, je passe le rappel. Et ce rappel reçoit deux arguments, résultat et rejet. Mais comme nous ne rencontrons pas le rejet ici, je vais simplement utiliser l'argument de résolution. Donc maintenant, nous devons retarder l'exécution du code à l'intérieur de cette promesse, nous pouvons utiliser SetTimeout. Je vais juste appeler SetTimeout. premier argument est à nouveau le rappel qui se déclenchera après nombre de millisecondes fourni comme deuxième argument. Et pour le deuxième argument, je vais juste passer l'argument pour poids une fonction elle-même, délai d'attente dans la masse. Et une fois que ces froids se retournent, je vais juste appeler la résolution de résoudre cette promesse. Et c'est tout. Il s'agit de notre mise en œuvre. Examinons notre utilisation de cette promesse, et voyons simplement comment elle fonctionne. Fichier de notes GS. Je vois que quatre secondes se sont écoulées, et je vois ma sortie quatre secondes plus tard. Juste pour vous montrer comment cela va être non bloquant, nous pouvons en fait utiliser le même exemple de nos vidéos précédentes, journal 2 de la console de consoles. Peu importe où je mets un point prometteur Dan, il sera toujours résolu utilisant la syntaxe des points de manière non bloquante. Cela signifie qu'il apparaîtra toujours après tout le code synchrone. Pour vérifier cela, encore une fois, nous allons peut-être le raccourcir un peu. Un grade 100. Vous en voyez 12 et seulement quatre secondes se sont écoulées. Et peu importe si je mets SetTimeout ou pas ici. Par exemple, je vais simplement résoudre le problème sans aucune logique. Ce sera toujours à la fin parce qu' une promesse est toujours résolue de manière non bloquante. J'espère que c'est clair. Examinons maintenant un autre exemple réel utilisant l'API Fetch disponible dans le navigateur. Si lorsque Google, je vais juste taper l'espace réservé JSON, je finis sur le type de point réservé JSON code.com. Lorsque je fais défiler un peu vers le bas, vous trouverez cette section avec un exemple. Je vais donc juste le copier et le coller dans mon script NodeJS. Si j'essaie d'exécuter le fichier, vous verrez que Fetch n'est pas défini car, encore une fois, Fetch n'est disponible que dans l'environnement du navigateur. Il fait partie des API Web des navigateurs. Il n'est pas implémenté nativement dans Node.JS. C'est pourquoi ce code ne fonctionnera qu'à l'intérieur du navigateur. J'ai donc copié à nouveau, je vais sur la console du navigateur, non ? Et ici, j'exécute le code. Donc, décomposons ça. Que se passe-t-il ici ? Tout d'abord, ce qui est récupéré, nous fournissons une URL à cette fonction, et cette fonction envoie une requête à cette URL et nous renvoie la réponse. Cette récupération de points est une fonction qui renvoie une promesse. C'est pourquoi nous devons utiliser la syntaxe dot Dense pour résoudre cette promesse. Ainsi, fetch envoie une demande à l'URL de manière non bloquante en arrière-plan. Et une fois que la réponse à cette demande est prête et que le navigateur est prêt à la gérer, cette promesse se résout, cet appel se retourne et nous avons accès à l'objet de réponse. Et comme vous pouvez le constater, c'est notre sens de la charge utile pour nous de retour du serveur. Et c'est la promesse qui était en attente Une fois qu'il faisait froid et une fois qu'elle a été résolue avec le premier point, alors vous voyez que l'État promis est maintenant rempli. Comme je l'ai déjà mentionné, cette demande sera traitée de manière non bloquante. Cela signifie que si cette demande prend jusqu'à 10 secondes, alors ce rappel à l'intérieur du premier point, Dan se déclenchera au bout de 10 secondes de manière non bloquante. Mais quelle est cette réponse ici ? Essayons de réécrire un peu cet exemple. Et au lieu d'appeler réponse JSON, nous allons simplement à l'objet de réponse console.log que nous avons ici. Et comme vous pouvez le voir, l'objet réponse a quelque chose de copain, d'en-tête utilisé. Eh bien, cet objet de réponse représente la réponse du serveur. Et sur cet objet, nous avons la méthode JSON point que nous devons faire appel à cet objet pour obtenir la charge utile au format JSON. Donc, si nous voulons simplement accéder à cette URL dans un onglet séparé, n'est-ce pas ? Tout cela se passe comme manuellement. Nous le faisons manuellement à l'aide de la zone de recherche du navigateur, mais pour le faire par programmation, nous utiliserions fetch, puis nous appellerions la méthode JSON point disponible sur l'objet réponse. Ceci, mais la méthode JSON aussi la Cerence est une promesse. Mais comme il s'agit d'une action unique au sein de ce rappel, la valeur de cette promesse sera résolue automatiquement, et c'est la valeur renvoyée par ce rappel. Ce qui se passe ici, c'est que dans le premier point puis response.data n'est pas la méthode est appelée, cette promesse est résolue et elle est renvoyée. Depuis le premier point puis le rappel car il s'agit du raccourci pour les fonctions de flèche, nous savons déjà que la valeur renvoyée de la méthode Dodge JSON sera disponible en tant que premier argument dans la suite C'est pourquoi nous avons ici un argument appelé JSON. Vous pouvez le nommer comme vous voulez, puis nous ne faisons que le bloquer. C'est pourquoi, si nous voulons utiliser cet exemple, nous verrons notre charge utile. Mais cette fois, nous l'avons fait par programmation au lieu d' aller au navigateur et de simplement accéder à l'Euro. Tout cela se produit maintenant par programmation à l'aide l'API Fetch disponible dans le navigateur. Super. Je dirais qu'il s'agit de promesses, mais il y a encore une chose. Nous avons aussi quelque chose appelé async wait. Et async wait n'est qu'une syntaxe alternative à la syntaxe point puis, puisque nous allons travailler avec plusieurs promesses en même temps, la syntaxe des points devient vraiment désordonnée à un moment donné. C'est pourquoi une alternative à cette syntaxe est asynchrone. Voyons à quoi cela ressemble, et essayons de réécrire cet exemple avec fetch en utilisant async wait. Tout d'abord, la syntaxe asynchrone wait est disponible qu'à l'intérieur d'une fonction. Cela signifie que pour pouvoir l'utiliser, il faut créer une fonction. Je vais donc créer une nouvelle fonction. Appelons ça envoyer une demande. Et pour rendre la syntaxe d'attente asynchrone disponible à l'intérieur de cette fonction, nous devons marquer cette fonction comme un lavabo. Donc, la fonction asynchrone envoie une demande, s'il s'agissait d'une fonction de flèche, Const, disons envoyer une demande. Ce serait comme ça. Juste avant la fonction flèche, nous mettions le mot-clé asynchrone, mais gardons la syntaxe de la fonction normale pour que nous le sachions. Pour résoudre cette promesse, nous devons appeler le point Dan et fournir un rappel à l'intérieur de la syntaxe asynchrone wait. Nous n'utilisons pas point, puis nous utilisons le mot clé qui vous attend. Attendez. C'est pourquoi le nom de la syntaxe est appelé async wait car bien, il ne s'agit que de deux mots clés, async à marquer la fonction à utiliser avec l'asynchrone, syntaxe d' attente et un poids pour résoudre la promesse. Je vais juste appeler Fetch. Laissez-moi le copier. Va chercher. Et pour attendre que cette promesse soit résolue, je dois juste mettre un poids devant et cela remplacera le point, puis il s'appelle Back devant une attente, je dois signer la valeur du résultat de cette promesse pour à propos d'Apple , par exemple, cela va être une réponse égale à attendre, récupérer. Et nous ferons la même chose avec la méthode JSON. Nous avons donc maintenant accès à l'objet réponse. Ensuite, nous allons créer la nouvelle variable JSON. Et il va s'agir d'attendre le point de réponse JSON, qui est disponible sur l'objet réponse. Si vous n'utilisez pas le mot-clé wait, la variable JSON sera l'objet promise, comme vous l'avez vu au début de la vidéo. Ce n'est pas ce que nous voulons. Nous ne voulons que la valeur de résultat de cette promesse si je supprime le mot-clé d'attente, n'est-ce pas ? Et si je survole la variable, je verrai une promesse car c'est l'objet de la promesse. Mais si j'attends, j'en aurai, ce qui signifie que cette variable contiendra j'en aurai, n'importe quelle valeur, mais ce n'est certainement pas un objet prometteur. Maintenant, nous allons essayer de consoler le journal JSON. Et ce code va simplement remplacer complètement ces trois lignes. Oui, c'est un peu plus de lignes, mais cette syntaxe est plus facile à lire. La syntaxe asynchrone wait repose sur les promesses, et son intention est de faire des promesses de ressembler davantage à du code synchrone normal. Parce que vous pouvez voir que nous pouvons lire ce morceau de code ligne par ligne, contrairement à point, alors un nœud à pointer ici est cette deuxième ligne de code, n'est-ce pas ? ligne numéro sept ne sera pas exécutée avant résultats de la ligne 6 puisque nous utilisons le mot-clé await, cela signifie que si cette ligne de code, promesse prend 10 secondes pour être exécutée, le code ne sera pas exécuté plus loin. Il attendra toutes les dix secondes jusqu'à ce que la promesse soit résolue, car nous utilisons le mot clé d'attente, il attend la promesse. La promesse se résout et seulement alors l'exécution continue. J'espère qu'il est clair de vérifier que nous allons appeler la fonction et exécutons ce morceau de code à l'intérieur du navigateur. Et vous verrez que nous aurons exactement le même résultat. Nous allons voir notre charge utile que nous recevons du serveur. Très bien, je suppose que c'est tout pour cette vidéo. Et je sais qu'il était vraiment difficile de comprendre cette quantité d'informations. C'était très déroutant, mais croyez-moi, ce n'est pas si compliqué que cela puisse paraître. Nous allons joindre le sujet une fois de plus dans nos projets React. Et c'est là que je vous verrai la prochaine fois. Adieu. 33. Modules ECMAScript: Hé, dans cette vidéo, j'aimerais parler modules atmosphériques dans l'environnement Node.JS, nous savons déjà qu'il existe un système de modules natif appelé GS commun. Il utilise la syntaxe d' export requiert et module pour importer et exporter quelque chose à partir d'un module dans l'environnement du navigateur, nous avons également un système de module de navigateur natif appelé script. Les modules et les modules atmosphériques utilisent la syntaxe d'importation et d'exportation. communauté Nodejs pousse les modules Ackman Script à être implémentés dans Node.JS afin remplacer CommonJS car les modules Ekman Script sont plus pratiques et plus complets. Et finalement, nous avons créé des outils qui nous permettent d'utiliser les modules de script ACML dans l'environnement Node.JS sans prise en charge directe modules atmosphériques dans l'environnement Node.JS, et moderne JavaScript, vous verrez les modules ECMO Script. Et rarement, je dirais que vous verriez CommonJS. Dans cette vidéo, j'aimerais parler de l'importation et de l'exportation de modules atmosphériques car il y a quelques aspects importants que nous devons comprendre à leur sujet. Commençons par créer deux fichiers. Je vais donc renommer file.js en file.js MGS afin d'utiliser les modules de script ACML natif dans l'environnement Node.JS. Ensuite, je vais créer un deuxième fichier appelé second MGS. Et à partir du deuxième MGS, je vais exporter quelques choses. Je vais donc d'abord créer une variable appelée Five, et je vais en exporter cinq juste à côté. Je vais exporter Const 10. Et je vais le préciser comme ça. Vous voyez la différence ? J'ai donc d'abord créé une variable, puis je l'ai exportée. Et voici juste une ligne unique, essentiellement la même chose qu'en haut. Exportons peut-être autre chose. Exporter const. Je vais m'appeler Andrew. Et à la toute fin, je vais mettre l'exportation par défaut et cette fois, laissez-la magasiner comme ça. Comme vous pouvez le constater, nous avons deux types d'experts. Nous avons nommé les exportations et nous avons une exportation par défaut. Ainsi, en tant que modules Aqua Script, il existe deux types d'experts nommés et par défaut. ne peut y avoir qu'une seule exportation par défaut dans un module et autant d'exportations nommées que vous le souhaitez. Maintenant, comment pouvons-nous réellement importer tous ces éléments. Si je vais dans File MGS ici, je dois taper importer quelque chose à partir du second MGS. Super. Alors, que dois-je fournir ici pour importer 5 ? Eh bien, le fait est que n'importe quel module a son propre objet d'exportation, l'objet expert du second MGS va ressembler à ça. Donc, d'abord, nous l'explorons cinq, non ? Ce qui va être notre expert nommé parce que nous avons la Bible nommée cinq et nous exportons la variable nommée cinq. Donc cinq vont être cinq, puis cette même largeur, 10, et la même avec mon nom. Ce sont toutes nos exportations nommées. Ensuite, à la fin, nous avons export shot par défaut, experts par défaut. Ils n'ont aucun nom. C'est parce qu'ils sont par défaut. Vous n'exportez qu'une valeur. Vous voyez que je n'ai pas créé de nom explicite pour une chaîne pointue, n'est-ce pas ? Il n'est affecté à aucune variable, il est simplement exporté par défaut, les modules atmosphériques ajouteront cette exportation par défaut à l'objet d'exportation sous la clé par défaut, comme cela. On finit donc par finir avec un objet comme celui-ci. C'est ce que nous exportons à partir des deuxièmes mgs. Maintenant, si je veux importer 5, je peux utiliser l'objet est structuré. Pourquoi ? Parce que nous exportons un objet. Encore une fois, chaque module possède un objet expert, et comme il s'agit d'un objet, nous pouvons utiliser la destruction d'objets. C'est pourquoi. Ici, à côté de l'importation, je vais mettre des crochets bouclés pour cette structuration. Et j'importerai 5, à droite, spécifié la clé que je voulais importer 5. J'aimerais aussi saisir peut-être mon nom, cinq et mon nom. Allons console.log cinq et mon nom. Et exécutons le script pour le vérifier. Et on voit cinq et Andrew. Ce qui est exact. Mais qu'en est-il de notre exportation par défaut ici ? Essayons d'importer par défaut. En fait, moins de destruction par défaut. Si je le fais, j' aurai instantanément une erreur de syntaxe. Le fait est que nous ne pouvons pas simplement utiliser ce mot-clé réservé par défaut. Ceci n'est pas autorisé pour importer l'exportation par défaut, nous n'avons pas besoin d'utiliser la structuration. À la place. Il suffit de lui donner notre propre nom pour la valeur exportée. Il s'agit donc ma virgule d'importation par défaut, puis de toutes les exportations nommées. Donc, si nous n'avons pas besoin de toutes ces exportations nommées, nous ne pouvons importer que l'exportation par défaut, ce qui sera net. Je vais donc supprimer cette partie structurante et je ne conserverai que mon importation par défaut. Maintenant, permettez-moi d'essayer de consigner mon importation par défaut. Vous verrez nettement et peu importe nom que je fournis pour mon importation par défaut. Cela n'a pas d'importance car nous le ferons au départ, il n'a pas de nom de variable. Contrairement à nos experts nommés, ils ont tous un nom significatif. Nous exportons cette variable nommée cinq. C'est pourquoi, lorsque nous allons importer cette variable, nous pouvons simplement la renommer, n'est-ce pas ? Nous pouvons simplement mettre 55 majuscules n'existe pas sur l'objet exporté. Nous en avons cinq, ce qui est minuscule. C'est pourquoi nous devons suivre strictement les mêmes règles que pour la destruction d'objets. Nous devons utiliser les mêmes noms que ceux que nous exportons. Un autre cas d'utilisation serait lorsque nous devons importer tout cela en un seul objet. Comme vous le voyez ici, nous ne voulons pas séparer comme les exportations nommées et les exportations par défaut, comme cela. Nous ne voulons pas les séparer comme ça. Au lieu de cela, nous voulions recevoir l'objet entier. Donc, dans ce cas, nous pouvons importer un astérix en tant que nom de l'objet. Donc, qu'il s'agisse d'un deuxième module. Et maintenant, si je vais annuler le deuxième module de journal, vous verrez que j'ai, sera essentiellement mon objet d'exportation. J'ai 5, 10, mon nom et ma valeur par défaut. Et maintenant, pour accéder à l'expert par défaut, je dois maintenant référencer la clé par défaut, non ? Vous verrez pointu. Si j'ai besoin d'accéder à 10, je devrai utiliser 10. Ce que nous venons de faire, nous avons importé tout le module dans ce module d'une seconde, bol de pâte, je dirais dans la pratique, c'est moins courant dans la pratique dans le monde réel. La plupart du temps, nous allons voir une exportation par défaut ou une exportation nommée. Ils sont beaucoup utilisés dans le monde réel. Nous allons voir soit comme ça 510, soit si un module n'a que l'exportation par défaut, nous utiliserions uniquement cette importation par défaut. Et nous l'utiliserions exactement comme ça. Eh bien, c'est là que vous allez le voir. Ce n'est pas si difficile de comprendre cette partie. Il suffit de toujours se rappeler qu'il existe deux types d'exportation. Une exportation par défaut et une exportation nommée, il n'y a qu'une seule exportation par défaut pour un seul module que vous ne pouvez pas utiliser pour exporter par défaut ici. Si j'essaie de le faire, vous verrez que j'aurai identifiant d'erreur de syntaxe par défaut déjà déclaré l'identifiant d'erreur de syntaxe par défaut. Je vous recommande de toujours rappeler que chaque module possède un objet en cours d' exportation et que toutes les exportations nommées sont fusionnées dans cet objet. Il est plus facile de se rappeler que vous devez importer cet objet. L'utilisation d'un objet est structurante. Je pense que les modules ECMO Script sont amusants et je les aime vraiment. Et j'espère que U2 vous verra dans le prochain. 34. ECMAScript ou JavaScript: Hé, ça va être court. Je veux juste clarifier la différence entre un script et JavaScript. Vous avez probablement vu beaucoup de termes tels que ES6 est cinq, ES 2015. Après cette vidéo, vous saurez la différence. Pour trouver la réponse, j'utiliserai Google et je vais simplement taper ECMO script ou GS. Et Google va me faire la différence. Ainsi, comme nous pouvons le constater dans la première fenêtre contextuelle, la spécification de script ECMO est un modèle de création d'un langage de script. Et JavaScript est une implémentation de ce Blueprint. Et vous pouvez voir différentes variantes de cette déclaration sur tous ces liens. Pour résumer rapidement cette déclaration, je peux dire que le script ECMO est un ensemble de cations spécifiques implémentées par JavaScript. Cela signifie que le script AGMA est une sorte de script pour un film où le film est JavaScript, aussi facile que cela. Pour plus d'informations, vous pouvez accéder à la page Wikipédia pour le script ECMO. Laissez-moi donc ouvrir cette page et d' ici nous pouvons voir différentes versions d'acme scrape. version la plus courante du script ACML est probablement oui, 2015, qui s'appelle ES6 car il s'agissait de la sixième édition du script ECMO. Si vous faites défiler vers le bas, vous pouvez lire exactement ce qui a été créé sur cette version spécifique. Et il existe également un terme appelé ES. Ensuite, comme vous pouvez le constater, il s'agit d'un nom dynamique qui fait référence à la prochaine version au moment de la rédaction de la rédaction. Nous savons maintenant que celui qui fait référence à JavaScript comme script ECMO est une bonne personne. Parce que nous savons maintenant que ces deux-là sont fondamentalement la même chose. Je pense que c'est tout. Pour plus d'informations, veuillez consulter Wikipédia ou Google. On se voit dans le prochain. 35. Qu'est-ce que React ?: On commence enfin à parler de React. Ces courtes vidéos à venir aborderont la théorie et les concepts de React. N'hésitez pas à référencer ces séries tout moment dans le futur. Let's go React est une bibliothèque permettant de créer des interfaces utilisateur. Il peut être utilisé pour créer des sites Web, des applications mobiles et même des applications de bureau. Le moyen le plus simple d'apprendre à réagir est probablement de commencer à réagir sur le Web pour créer des sites Web. Dans cette vidéo, je vais parler du point de vue web, l'objectif de réagit est de créer des interfaces utilisateur avec ce qu'on appelle des composants. Pour les sites Web, il s'agit simplement de réagir ou de réagir pour le Web. Pour les applications mobiles, il s'agit React Native pour les applications de bureau qu'on appelle électron. React fonctionne uniquement sur la couche de vue. Cela signifie que React n' oblige pas à créer votre application. React ne fait que forcer sa propre logique et dicte comment manipuler les éléments HTML sous-jacents. Le reste est sur vous dans le passé. Ici, vers 20 et 10, jQuery a été beaucoup utilisé pour manipuler le HTML via JavaScript. Mais il n'est pas nécessaire d'utiliser jQuery de nos jours. Comme React n'est qu'à la bibliothèque, il peut être intégré n'importe quelle application existante pour créer une interface utilisateur. Des exemples de sites Web React sont Facebook et Netflix. Discord utilise React pour tout ce qui est nécessaire pour créer son site Web, son application mobile et même son application de bureau est conçue avec React. assez impressionnant, n'est-ce pas ? React n'est pas un framework créé par d'autres parties de l'application, qui par d'autres parties de l'application, doit être construit avec d'autres outils et bibliothèques. Et vous verrez qu'une fois que nous aurons commencé à coder, react a d'abord été utilisé pour créer des applications à page unique, uniquement des sites Web entièrement gérés par JavaScript et destinés à remplir des applications mobiles plus similaires. Mais pour l'instant, la communauté React a créé de nombreux outils et cadres autour de React. Par conséquent, nous sommes aujourd'hui en mesure de créer n'importe quel type de site Web avec React. Mais il y en a, le rendu côté serveur, l'application monopage, les pages Web statiques ou peut-être une application hybride. Et vous avez probablement vu d'autres solutions comme Vue, JS, Svelte ou peut-être même Angler. Ils sont tous basés sur des composants et finissent par obtenir le même résultat. Il est vraiment difficile de savoir lequel choisir. Quelque chose est plus facile. Quelque chose est plus difficile. Si vous avez encore du mal à choisir, je vous recommande de choisir celui avec le nom ou le logo le plus attrayant, aussi simple que cela. Mais dans nos projets, nous allons apprendre à connaître React. Restez à l'écoute car il ne reste plus que quelques vidéos théoriques avant d'entrer dans la partie codage jusqu'à la suivante. 36. Approche basée sur des composants: Dans la vidéo précédente, j'ai mentionné les composants et l'approche basée sur les composants. Mais quel est le composant ? Un composant n'est qu'un bloc de HTML qui ne peut être réduit à l'avenir. L'approche basée sur les composants est lorsqu' une application est en cours de création avec des composants, il est préférable de considérer un composant comme une balise HTML personnalisée créée par l'utilisateur. Mais en plus de cela, les composants peuvent également inclure la logique et l'état. Par exemple, un composant peut être un bouton qui change de couleur. Une fois cliqué, le bouton change de couleur d'arrière-plan. Nous pouvons nommer ce composant comme bouton couleur. Et plus tard, dans n'importe quelle partie du code HTML, utilisez le bouton Couleur autant de fois que nous le voulons. C'est essentiellement ce que nous faisons avec les balises HTML. Les composants ne sont pas différents. Il est logique de les considérer comme des éléments constitutifs de l'application. approche basée sur les composants constitue une arborescence de composants. En haut de cet arborescence, il y a un composant racine qui imbrige d'autres composants dans le composant racine React est presque toujours appelé application, ou d'autres composants sont imbriqués dans le composant de l'application. Les composants qui se trouvent sur le dessus sont appelés composants de premier niveau. Il s'agit généralement de pages. Les composants qui apparaissent plus haut dans l'arbre sont appelés parents. Une fois que c'est en dessous, on appelle les enfants. Jetons un coup d'œil à la page Facebook officielle. Facebook est le créateur de React, et c'est pourquoi c'est le meilleur exemple possible à observer. Je vais essayer de diviser l'espace en composants pour vous donner une idée de base, Allons-y. L'ensemble du site Web lui-même est le composant App. En haut, nous aurions le composant Navbar et la barre de navigation au centre, il y a un composant de navigation et chaque bouton à l'intérieur est également un autre composant. Sur la droite, il peut s'agir d'un composant de navigation profilé, où chaque bouton similaire est le même composant mais réutilisé plusieurs fois. Essayez-le vous-même et divisez le menu déroulant ci-dessous en composants en dessous de la barre maintenant, il peut s'agir d'un composant de page d'accueil. La page d'accueil comprend trois composantes. barre latérale à gauche, la barre latérale à droite et le flux dans le composant central de la barre latérale inclut le menu. Le composant Feed inclut la liste des publications et la barre latérale à droite inclut autre chose. Il appartient aux développeurs de structurer et de créer des composants. Il est certainement possible de conserver tout le balisage et toute la logique dans un seul composant sans créer d'autres composants. Mais l'idée d'une approche basée sur les composants serait alors totalement compromise. Et ce sera la même chose que de ne pas utiliser de composants. À la fin de la journée, nous nous retrouvons avec un arbre de composants. Et cet arbre a toujours une direction de haut en bas. S'il y a des changements dans un composant parent, tous les enfants de ce composant seront également affectés simplement parce qu'ils en font partie. Concluons. Le développement avec React repose sur une approche basée sur les composants. L'application React peut être visualisée sous la forme d'une arborescence de composants. Les composants sont des éléments réutilisables de l'application. Les avantages des composants sont réutilisabilité et la cohérence dans l'application. La possibilité d' insérer un composant de publication utilisateur utilisable dans n'importe quel endroit l'application n'était qu'une seule ligne de code. Avec cohérence, le composant de publication utilisateur se comportera toujours exactement de la même manière, indépendamment de la page ou de l'endroit où il est utilisé. Eh bien, c'est tout. C'est ainsi que toutes les applications modernes sont construites aujourd'hui avec des composants. J'espère que c'est logique. La CIA. 37. Fonctions et cours: Bonjour, dans React. Il existe deux types de composants disponibles pour nous, basés sur les classes et les déchets fonctionnels. Ils diffèrent par la syntaxe et la façon dont nous manipulons les données qui s'y trouvent. Avant React Hooks, nous n'avions pas d'autre option que créer des compétences à l'aide de classes à l'heure actuelle, la situation est légèrement différente. Avec React Hooks, nous utilisons des fonctions pour créer des composants. crochets React ne sont disponibles que dans les composants basés sur des fonctions, et c'est la raison pour laquelle les fonctions simplifient les composants. La syntaxe est plus légère et plus facile à comprendre. Dans nos projets, nous utiliserons React Hooks, ce qui signifie que nous allons travailler avec des composants basés sur des fonctions. Uniquement. Les composants basés sur les classes sont de plus en plus rarement utilisés. Il est cependant possible que parfois vous voyiez des composants basés sur des classes, mais c'est tout à fait correct. L'équipe React a ses enjeux sur React Hooks et elle croit que les crochets sont l'avenir. Après avoir terminé le dernier projet, vous pourrez lire composants basés sur les classes et vous n'aurez aucun problème lors de la transition entre les fonctions et les classes. J'espère que c'est logique. On se voit dans le prochain. 38. Réagir sous le capot.: Encore bonjour. Voyons comment React fonctionne sous le capot. l'exemple d'une application monopage, la meilleure façon de penser à une application React comme s'il s' d'une arborescence de composants dans React, il existe un point de montage dans lequel l' application React est insérée, ou mieux vaut dire, monté par défaut, il s'agit d'une balise div avec ID grossier. En haut de l'arborescence, il y a le composant de l'application, qui est l'enveloppe de tous les composants de l'application. À l'intérieur du composant de l'application, placez des composants de niveau supérieur À l'intérieur d'eux, posez les composants imbriqués, et ainsi de suite jusqu'au composant très imbriqué. Si on y pense un instant, c'est à peu près la même chose que la structure HTML DOM, n'est-ce pas ? Le modèle objet de document ou DOM est la représentation d'une page HTML sous la forme d'une arborescence de balises. Dom est la façon dont les navigateurs voient et interprètent le balisage HTML. Lorsque nous faisons des choses de base en JavaScript telles que Document.getElementByID id. Cet objet de document fait partie de l'API DOM qui est exposée par le navigateur. React crée en mémoire une représentation de l'arborescence des composants appelée DOM virtuel. Il est identique au DOM du navigateur, mais il n'est utilisé qu'en interne par react. Lorsque l'application React en cours de rendu dans l' arborescence des composants de la page est traduite de présentation dominante virtuelle en balisage HTML. Ce balisage HTML est ensuite inséré dans l'élément de montage de la page Web. N'oubliez pas que tout cela se fait via JavaScript. Lorsque les données sont des composants qui doivent être mis à jour, react fonctionne toujours avec le DOM virtuel en premier lieu. Il prend l'état précédemment capturé du DOM virtuel, le compare au nouveau DOM avec des mises à jour et calcule la différence. En cas de différence, react calcule les données et les composants qui doivent être mis à jour. Et ces changements sont appelés rendus 3D. Chaque rendu représente essentiellement état DOM virtuel à un moment donné, le processus de calcul de la différence entre les rendus est appelé réconciliation. Et le nom de l'algorithme de ce processus est React Fiber. En termes simples, React Fiber détecte ce qui doit être mis à jour entre les nouveaux rendus. Vous avez peut-être une question : pourquoi utiliser le DOM virtuel ? N'ajoute-t-il pas une étape supplémentaire et plus de complexité ? Eh bien, ça dépend. DOM virtuel change ou plus léger car ils sont tous en mémoire, contrairement aux modifications d'un DOM réel, lorsque le balisage HTML est modifié, navigateurs recalculent généralement la mise en et repeignent la page Web. Il est préférable d'avoir 100 mises à jour dans le DOM virtuel, ce qui finira par générer une seule mise à jour réelle et une rectification de correctifs supérieure à l'application 100 mises à jour directement sur le DOM réel. Lorsque nous naviguons sur un site Web sous le capot, HTML est constamment mis à jour. React veille à ce que ces mises à jour soient effectuées de la manière la plus efficace possible. L'idée derrière le dôme virtuel est de réduire le nombre de vraies mises à jour DOM. Je sais qu'il peut être difficile de percevoir cette quantité d'informations, mais c'est tout à fait très bien. Vous n'êtes pas obligé de connaître tous les détails. Nous savons maintenant comment React fonctionne en interne. C'est là qu'une pièce manquante sur son architecture, ces pois est un flux de données à sens unique, appelé flux. Flux est le nom d'une architecture interne Reacts. Flux implique que les données de l'application circulent toujours dans une direction de haut en bas. Par exemple, lorsque les données d'un composant sont mises à jour, le composant et tous ses enfants sont également rendus. Si les enfants sont mis à jour ou non, c'est le travail de React Fiber mentionné précédemment, l'algorithme qui calcule exactement ce qui doit être mis à jour. Mais le fait est que les mises à jour passent des composants parents aux enfants. Il est impossible de faire passer le flux de données de bas en haut. Je pense que vous serez en mesure de le ressentir lorsque nous écrirons du code React. Très bien, résumons sous le capot, react utilise sa propre représentation HTML DOM appelée DOM virtuel. L'objectif du DOM virtuel est de réduire le nombre de mises à jour DOM réelles. L'algorithme de base de React est appelé React Fiber et sa tâche principale est de calculer ce qui doit être mis à jour entre les ré-rendus, la conception de l'architecture React est appelée flux, ce qui implique que les données ne circulent que dans une direction allant des composants parents aux enfants. Eh bien, c'est toutes les informations concernant React. Ne vous inquiétez pas si c'était déroutant. Il suffit de reregarder la vidéo ou de chercher plus d'informations si nécessaire. voit ensuite. 39. Boilerplates et nicher de projet: Hey, cette fois, j'aimerais parler façon dont nous pouvons commencer le développement d'une nouvelle application Web React. Dans cette vidéo, je n' envisagerai pas de plateformes en ligne différentes, telles que CodePen, pour développement directement à l'intérieur du navigateur. Parce que ces plates-formes sont utilisées uniquement comme terrains de jeux, ou généralement simplement pour partager rapidement le code avec une configuration de base. Pour comprendre comment les applications JavaScript modernes sont créées, nous devons comprendre ce que notre projet Butler est un outil qui prend tout le code source, les scripts, les styles, les images, les processus, tout cela, et créez un projet construit. Project build est une version minifiée groupée du code source optimisée pour une efficacité maximale. Ce sont des tonnes de sons de projet Bundler qui sont les plus courants sont Webpack, roll up et colis. Tous les projets JavaScript modernes sont couverts par ces outils. Excellent, revenons à notre question principale, comment commencer à développer une nouvelle application React. Il finit par se résumer à trois passes. La première façon de créer une application React consiste à configurer et à configurer tous les outils de génération, tels que le pack Web pour React à partir de zéro. La deuxième méthode consiste à utiliser un modèle de projet. Nous sommes déjà configurés pour le développement React. Et la troisième méthode consiste à utiliser un framework React tel que le prochain GS ou Gatsby. Il n'y a pas de réponse correcte sur laquelle choisir. Tout dépend de la configuration que vous recherchez, préférences personnelles, des fonctionnalités spéciales, etc. La configuration manuelle de tout et la configuration du projet Butler, comme Webpack à partir de zéro, sont rarement vues de nos jours. Presque chaque fois, vous utilisiez un modèle ou un framework. en passant, les modèles sont souvent appelés chaudières, ce qui signifie que chaque fois que vous voyez où la chaudière ne panique pas, c'est juste une autre façon de dire modèle Word. Il existe de nombreuses plaques de chaudières de projet React créées par la communauté , qui consiste à copier un modèle et à commencer développer rien de plus nécessaire. plaque de cuisson React la plus connue est probablement l'application Create React, qui est gérée par l'équipe React sous le capot Elle utilise une configuration Web back prédéfinie. Vous pourriez être tenté d'utiliser uniquement l'application Create React. Mais il est important de se rappeler que l'application Create React n'est pas le seul moyen de développer des applications React à l'heure actuelle, qu'il existe de nombreuses alternatives intéressantes. Actuellement, les outils construits très populaires pour le front-end sont la VDD et le snowpack. Une autre façon de gérer React consiste à utiliser un framework React. frameworks sont très populaires ce moment, surtout ensuite, oui, mais je dirais qu'il vaut mieux commencer à apprendre à réagir sans cadre. Parce que les frameworks for Ches encadrent des fonctions et des rôles spécifiques dans nos projets, nous allons utiliser des modèles déjà configurés et des collines construites. Lequel ? Asseyez-vous une fois que vous entrez dans les projets, voir d'autres 40. 1 Aperçu du projet TicTacToe: Salut à tous. Bienvenue dans la section Tic Tac Toe. Il s'agira d' une vidéo d'introduction rapide dans laquelle vous pourrez prévisualiser le projet. Le projet sera le jeu Tic Tac Toe, que vous pouvez voir sur votre écran dès maintenant. On peut cliquer sur des carrés. Nous pouvons jouer le jeu. Chaque fois que nous avons un gagnant, la combinaison gagnante sera mise en évidence. Nous aurons des effets actifs différents. bas, il y aura également l'historique du jeu, que nous pourrons parcourir, et voir quels mouvements ont fait, si nous cliquons sur des cases, nous pourrons remplacer l'historique au cas où nous aurions besoin d'un bouton de démarrage de la partie, et je dirais que c' est à peu près tout. Bien que cela puisse paraître simple. Il contient de nombreux concepts de base qui constitueront une bonne base pour vos connaissances en matière de React. Alors allons-y. 41. 2 Créer et configurer un nouveau projet avec Vite: Bonjour. Nous allons enfin commencer à construire le premier projet qui sera Tic Tac Toe. L'outil que nous allons utiliser pour créer Tic Tac Toe sera Vite. Ceci est le site officiel de Vite que vous pouvez consulter dès maintenant. Vous pouvez le trouver sur Google. Je vais cliquer sur « Commencer », et voyons ce que fait exactement Vite. En gros, Vite est un outil frontal qui construit le projet. Ça peut être n'importe quoi. Il peut s'agir de React, de JavaScript brut ou de tout autre framework supporté. Sous le capot, Vite utilise Rollup. Rollup est un bundler de modules. Rollup est essentiellement l'outil qui construit le projet et Vite est la configuration autour de Rollup. Vite est assez rapide et en fait très populaire en ce moment. Passons en revue la documentation et passons à l'échafaudage de votre projet de la première semaine. Cela nous oblige à avoir la version 14 et plus de Node, mais je suis presque sûr que vous avez dernière version stable , qui est la 18 pour le moment. Nous pouvons voir que nous pouvons créer un nouveau projet avec npm en exécutant simplement cette commande. Je vais copier cette commande, et je vais accéder à CMD. Tout au long des projets, je vais utiliser Git Bash, et dans VS Code, j' utiliserai Git Bash. Cependant, pour celui-ci, je vais utiliser CMD. Vous pouvez utiliser n'importe quelle autre coque. J'ai choisi CMD spécifiquement parce que Vite va nous poser quelques questions et lorsque Git Bash s'exécute en tant qu'instance distincte, il a des problèmes d' interactivité, contrairement à CMD. Une fois que j'aurai exécuté cette commande, Vite va me poser quelques questions , puis je vais créer un nouveau dossier de projet. Cependant, je vais créer un nouveau dossier de projet dans notre terminal de navigation actuel. À l'heure actuelle, dans CMD, je navigue pour voir mon nom d'utilisateur. Il s'agit d'un dossier utilisateur, et une fois que j'aurai exécuté la commande Vite, elle créera un dossier de projet ici dans ce répertoire. Je ne veux pas faire ça. Je souhaite définir mon propre chemin de dossier de projet. Pour cela, je dois d'abord décider où je souhaite placer mon projet. Pour moi, ce sera ici, dans D_Web. C'est à cet endroit que je souhaite placer mon projet. abord, je dois naviguer dans le terminal jusqu'à ce dossier. Dans CMD, je vais taper le nom du disque pour changer la navigation vers le disque D. Si vous êtes dans Git Bash, vous devez taper cd d et deux-points, si vous êtes dans un autre shell, alors je suis sûr que c'est comme un shell Linux, comme Bash, ou peut-être sur Mac, je suis sûr que vous n'en avez même pas besoin. Quoi qu'il en soit, je suis dans le disque D, puis je vais taper cd, cd signifie changer de répertoire, et je vais juste taper cd_web. Je sais que c'est _web car si je tape ls, ls est une commande shell Unix pour répertorier tous les dossiers de la navigation en cours. Cependant, comme CMD est un terminal basé sur Windows, je dois utiliser dir, donc dir est l' alternative de commande à un terminal Windows Power moins intégré. Dans D, j'ai _web. C'est exactement dans ce dossier que je navigue, donc je vais taper cd_web, et boum, maintenant je suis dans ce dossier et je peux exécuter la commande Vite en toute sécurité. Je vais exécuter la commande copiée. Il m'a demandé un nom de projet, nous allons l' appeler tictactoe-vite. J'appuie sur « Enter ». Maintenant, je dois sélectionner un framework. Nous allons choisir React et la variante sera JavaScript. Génial. Maintenant, la commande a été exécutée avec succès. Cela indique que le projet d'échafaudage dans _web tictactoe-vite est terminé. Exécutez maintenant cd, npm install, npm run dev. que nous allons faire au sein du département. Nous allons sortir de là. Maintenant, ce que je vais faire, ouvrir le fichier VS Code, ouvrir le dossier, et maintenant je vais aller sur D Web et sélectionner tictactoe-vite comme dossier de projet dans VS Code. Une fois à l'intérieur, nous avons quelques fichiers ici. La toute première chose que nous allons faire, c'est installer des dépendances. Nous avons créé les fichiers. Nous avons déjà répertorié le package json avec quelques dépendances, mais aucune d'entre elles n'est installée. Pour cela, je vais ouvrir terminal intégré dans VS Code, et voici ce que je vais faire, je vais installer des dépendances en exécutant npm install. Npm installé sans aucun argument, il scanne le package json dans la navigation en cours. Ma navigation actuelle est le dossier tictactoe-vite. Il recherche le package json. Il recherche les dépendances et les dépendances de développement répertoriées à l'intérieur, et si elles sont manquantes, si elles sont désinstallées, npm les installera. Je vais écrire cette commande, et je vais attendre. Pendant qu'il fait son travail, voyons quels types de dépendances nous avons ici. Par défaut, les dépendances React et React-dom sont installées. Ce sont des packages de base de React, donc react est le package de base et react-dom est le package de base spécifiquement pour le Web car, eh bien, le Web utilise le modèle dom. Dans les dépendances de développement, nous avons des types react, nous n'en avons en fait pas besoin dans les types react-dom. C'est quelque chose pour TypeScript. Je ne sais pas pourquoi ils entrent. Ensuite, nous avons le plugin-react vitejs et Vite lui-même comme outil. Nous voyons également viteconfig.js ici. Comme Vite peut être utilisé pour créer n'importe quel projet frontal, il doit détecter. Tout d'abord, Vite est livré avec une configuration presque nulle. Nous devons spécifier, configurer avec, d'accord, prenez mes fichiers React et faites la magie, et Vite fera l'affaire. Pour cela, nous devons installer le plugin, qui est déjà installé, puis dans viteconfig, nous devons répertorier ce plugin Vite ici. Vous voyez que tout est déjà configuré pour nous. Nous n'avons pas vraiment besoin de faire quoi que ce soit. Si vous souhaitez en savoir plus sur la configuration de Vite, suivez ce lien ici. C'est assez simple. À partir de maintenant, si j'ouvre à nouveau mon terminal vous pouvez voir des packages ajoutés, tout va bien. Deux autres éléments apparaissent ici, modules package-lockjson et node. Package-lockjson représente donc la version que nous venons d'installer. Il capture la version spécifique du package que nous avons installé. Ensuite, nous avons les modules de nœuds. Les modules Node sont l' endroit où toutes nos dépendances ont été installées. Puisque nous avons ce dossier, nous pouvons maintenant exécuter facilement nos scripts et ils fonctionneront. Avant de faire cela, configurons quelques éléments supplémentaires ici. Nous allons ajouter eslint et prettier à notre projet. Pour ce faire, nous devons d'abord les installer. Je vais exécuter npm install dash dash save-dev. Save-dev demandera à npm install d' installer les packages en tant que dépendances pour les développeurs, donc npm installera eslint et prettier. Ensuite, nous devons créer des fichiers de configuration pour ces deux. Vous pouvez voir qu'une fois la commande terminée, prettier et eslint apparaissent à la fois comme dépendances de développement dans le package json. Je vais créer un nouveau fichier .prettierrc et l' autre sera .eslintrc. Maintenant, comment allons-nous configurer ces deux ? Nous avons quelque chose qui s'appelle Gist. Ce lien sera partagé avec vous. Dans ce Gist, vous pouvez trouver les fichiers .eslintrc et .prettierrc. Ce sont les configurations que nous allons utiliser. Nous allons simplement le copier à partir d' ici et le coller comme ça. Vous pouvez choisir n'importe quelle configuration plus jolie que vous souhaitez. C'est juste ma préférence personnelle que j'ai choisie spécifiquement pour ce projet. Vous pouvez modifier toutes les valeurs selon vos besoins. Ensuite, la configuration d'eslint, j'ai également copié à partir de là. Cependant, c'est plus intéressant que joli. Ici, nous faisons quelques choses. Nous étendons eslint recommended, qui est la configuration intégrée à eslint. Nous n'avons pas besoin de l'installer. Ensuite, nous étendons le runtime JSX plug-in, React , Recommended et Plug-in React JSX ainsi que plus joli. Ceux-ci proviennent en fait des packages, donc ces packages doivent être installés. Si nous revenons à ce Gist ici, nous pouvons trouver les dépendances des développeurs, MD, eslint-config-prettier et eslint-plugin-react. Si nous allons ici, nous devons d'abord les installer. Ce sont les plug-ins que nous étendons et ils n'apparaissent pas de nulle part. Ils doivent être installés. Je vais juste copier la commande d'installation pour eslint-plugin-react et l'installer. Je ferai exactement la même chose pour eslint-config-prettier. Que font ces deux-là ? Le eslint-config-prettier garantira que notre configuration eslint et configuration prettier n'entrent pas en collision. Ce package garantit simplement que nous n'avons pas rencontré de malentendu entre ces deux outils. ESLint-Plugin-React est un package très populaire. Eh bien, en gros, une liste de règles pour lancer des projets React. La configuration que nous avons ci-dessous provient essentiellement de la documentation de la page eslint-plugin-react. Vous pouvez le trouver ici. Nous étendons deux choses à partir de ce plug-in, l'ensemble de règles recommandé et l'environnement d'exécution JSX. Runtime JSX, nous allons y revenir, quoi il s'agit exactement. Règles Insights, j'ai désactivé la règle des types d'accessoires React, qui provient du package plugin-react. La raison de ces types d'accessoires est quelque chose que nous n'allons pas aborder. Cependant, il est inclus ici, nous n'en avons donc pas vraiment besoin. Cela ne fera que perturber notre processus de développement, nous avons donc complètement désactivé cette règle, nous l'avons désactivée. Le reste, comme je vous l'ai dit, a été pris d'ici. Génial. Essayons peut-être enfin de lancer le projet. À l'intérieur des scripts, nous avons trois scripts définis par défaut : dev, build et preview. Dev va exécuter le serveur de développement local, compiler, nous allons créer le projet, et prévisualiser. Je suis presque sûr qu'il nous donnera un aperçu de la version de production finale. Il servira aux fichiers de construction de production. Allons-y et exécutons le script de développement, npm run dev. Au bout d'une seconde, vous verrez ce message. Maintenant, nous pouvons accéder à cette URL qu'elle nous donne et l' ouvrir dans le navigateur. Si je dois y aller, tu verras ça. Eh bien, c'est notre application React pour le moment. Dans ce cas, il a créé un serveur local pour nous et nous a exposé le lien que nous pouvons utiliser pour accéder au serveur de développement. C'est l'endroit où nous pouvons voir le projet localement et le développer. Arrêtons la commande en appuyant plusieurs fois sur la touche Ctrl C. Essayons de voir la version de l'autre commande. Si je vais lancer npm build, vous verrez quelques choses ici. Vite crée le dossier dist, et à l'intérieur du dossier dist, il crée des fichiers SVG, HTML et, à l'intérieur des ressources, des fichiers JS et CSS. Cette commande prend tous les fichiers du dossier source et les intègre en fichiers HTML, CSS, JavaScript et secondaires. Cette commande de génération produit la version finale de production de notre application. Plus tard, nous pourrons prendre le dossier dist et le déployer sur l'hébergement. C'est exactement ce que nous allons faire plus tard dans ce projet. Nous n'avons pas vraiment besoin d' inspecter quoi que ce soit à l'intérieur de la poussière. Il est optimisé, il est minifié et vous pouvez voir qu'il a l'air moche. C'est tout à fait correct car c'est censé être optimisé de cette manière. Encore une fois, sous le capot, vite utilise le roll-up. Le roll-up est l' outil qui effectue toute cette minification, transpilation et le reste. Maintenant, jetons un coup d'œil, qu'avons-nous ici parmi d'autres fichiers ? Le dossier source est le dossier dans lequel nous allons créer nos fichiers sources. Tous les composants réagissent, tout le code entre dans le code source. Le reste de la configuration, eslint, plus joli qui ne fait pas partie du code source, mais qui fait partie de la configuration du projet, se trouve dans le dossier racine ici à côté du package Jason. De plus, nous avons un index HTML ici. Index HTML ici, ce sera notre point d'entrée. C'est là que notre projet commence. Nous y reviendrons plus tard. Ce que nous allons faire maintenant, est ne rien toucher. Nous allons aborder ce sujet dans la vidéo suivante. Pour l'instant, passons simplement en revue le reste. Nous avons le dossier public et le dossier source. Le dossier public est l'endroit où se trouvent les ressources statiques de notre projet. Ils sont toujours servis sous le chemin racine de notre application. Ce que je veux dire, c'est que nous allons réexécuter la commande dev. Si nous voulons y accéder, voyons ce que nous avons en public. Nous avons vite SVG donc si nous voulons accéder à slash, qui est root vite SVG, nous voyons que le fichier est diffusé ici sous vite SVG, donc le chemin que vous avez pour le fichier dans dossier public est mappé au segment URL. Si je dois créer un dossier, appelons-le. Je ne sais pas, lol et on peut déplacer Vite à l'intérieur de lol alors le vite SVG sera diffusé sous lolvite.svg. C'est l'endroit où se trouvent les fichiers qui ne sont pas censés être transpirés, réduits d'une manière ou d'une autre, ou affectés par l'outil de génération. Ils resteront tels quels en public, et nous pouvons les référencer dans notre application. Le dossier public est assez courant dans tous les projets frontaux. Génial. Maintenant que nous savons quels sont tous ces fichiers, il ne nous reste plus qu'une chose à faire avant commencer le développement et d'explorer ces fichiers. Nous voulons présenter notre projet à Git. Que devons-nous faire ? Nous devons d'abord initialiser, Git ici. Dans le terminal, nous allons taper git init et vous pouvez voir que Git est désormais présent. Ce que nous pouvons faire, c'est ajouter tout cela à la scène, puis tout valider. Juste une remarque. Il y a un nouveau fichier appelé Gitignore. Gitignore est le fichier reconnu par le système Git et tout ce qui est répertorié dans Gitignore sera ignoré par Git. Dans ce dossier, nous avons de nombreux fichiers secondaires qui ne nous intéressent pas vraiment. Cependant, nous avons également ici des modules de nœuds et des objets distants. Ces deux éléments seront ignorés par Git et si vous les voyez dans le code VS, ils ne seront même pas surlignés. Qu'est-ce que cela signifie ? Cela signifie que lorsque nous validons des fichiers, tous les fichiers concernés seront ajoutés dans le cadre du projet Git, mais les fichiers listés ici ne seront pas reconnus par Git. Ils seront simplement ignorés et les modules de ce nœud seront ignorés parce que, eh bien, nous n'en avons pas vraiment besoin. Il s'agit de fichiers générés dynamiquement. Si nous voulons, disons, partager notre projet avec quelqu'un d'autre, cette personne téléchargera tous les fichiers du projet et nodez les modules parce que leur poids est élevé et qu'ils n'en ont nodez les modules parce que leur poids est élevé et qu' pas vraiment besoin car ils peuvent être créés dynamiquement. Je vais juste taper npm install, modules Node seront recréés. Je vais taper npm run build et le dossier dist sera recréé. Nous n'avons pas vraiment besoin de trop de poids, et ils peuvent être créés dynamiquement. C'est pourquoi ils sont répertoriés dans Gitignore. Allons-y et ajoutons tout à l'état de stage avec le point git add, afin que nous puissions voir un tas d'avertissements ici. Parfois, c'est tout à fait normal. Git garantit que notre projet est multiplateforme entre différents systèmes ayant des encodages différents, nous n'avons donc pas vraiment à nous inquiéter à ce sujet. Ensuite, nous validons tous ces fichiers préenregistrés avec le premier message de validation et si nous tapons git log, nous voyons que nous avons le premier commit ici. Génial Maintenant, nous devons télécharger ce projet Git sur GitHub. Ce que nous allons faire, c'est aller ici sur GitHub. Nous allons cliquer sur Nouveau référentiel ici. Nom du dépôt, nous allons nous en tenir à TicTacToe-Game. Je vais choisir ce référentiel pour qu'il soit public. Je le rendrai public plus tard, une fois que nous aurons terminé, nous n'aurons pas besoin d'un fichier ReadMe initialisé avec le nouveau dépôt, car nous allons le créer nous-mêmes plus tard, ou peut-être pouvons-nous le faire dès maintenant. Je vais donc créer un nouveau fichier appelé README.md, et à l'intérieur, je vais utiliser la syntaxe Markdown. Il s'agit de la syntaxe des documents, je vais donc simplement ajouter des hashtags ici. N'y pense pas trop. Appelons ça le jeu Tic Tac Toe. Je l'enregistre et comme il s'agit d'un nouveau fichier, nous devons à nouveau ajouter un autre commit. Ajouté, README.md. Parfait. Nous avons maintenant deux engagements. Génial. Nous n'avons pas besoin de ReadMe, nous n'avons pas besoin de Gitignore car Gitignore l' ajoute automatiquement par vite. Nous n'avons besoin d'aucune licence. Je clique sur Créer un référentiel. Génial. Ici, dans la configuration je peux maintenant configurer et associer mon dépôt nouvellement créé sur GitHub à mon référentiel local sur mon ordinateur. Nous pouvons suivre l'invite ici. Si nous créons un tout nouveau référentiel, si nous n'avons aucun fichier, mais ce n'est pas le cas. Nous devons choisir de placer un référentiel existant en première ligne. Je vais juste copier ligne par ligne ici. Git Remote à l'origine. Une fois que je l'ai fait, je peux taper git remote-v et je vais voir que sous l'alias origin, j'ai ce référentiel et si je copie ce lien et si je l'ouvre dans un nouvel onglet, il me mènera ici, ce qui signifie que le lien est correct. Ensuite, il nous suggère de taper git branch-m main. Je ne pense pas que nous allons le faire. Le problème avec GitHub et Git Community est qu' ils n'arrivent pas à décider quel est le meilleur nom pour la branche principale par défaut. En général, elle s'appelle master. Nous sommes actuellement sur la branche principale, mais les gens veulent que les choses soient assez simples. Au lieu de master, certaines personnes veulent voir principal. Nous allons nous en tenir au Maître. Ce n'est pas grave après tout. Ce que nous allons faire puisque nous avons maintenant associé le projet au dépôt distant, qui va le télécharger sur GitHub en tapant git push origin master. Origin est l'alias qui pointe vers le référentiel et master est le nom de la branche cible du référentiel où nous allons envoyer notre code actuel. moi qui exécute cette commande. Vous pouvez voir que quelque chose s'est passé et si je dois actualiser la page ici, je verrai tous les projets ici et le fichier ReadMe que nous avons créé. Quelque chose comme ça. Félicitations à tous. Nous avons créé et configuré les projets Tic Tac Toe. À bientôt dans la vidéo suivante. Nous allons enfin commencer à créer l'application, et nous pouvons voir quels en sont les composants. Au revoir. 42. 3 extensions Eslint et de Prettier: Salut à vous, voici juste un petit rappel sur ESLint et Prettier. Comme nous voulons nous assurer que ces outils sont intégrés à notre VS Code et que nous pouvons tout voir en temps réel, nous voyons les points forts et nous formons un fichier lorsque nous les enregistrons, nous devons nous assurer que les extensions sont installées. Accédez à l'arrêt Extension ici et assurez-vous que formatage de code Prettier est installée ici ainsi que l'extension ESLint. L'extension ESLint veillera à mettre en évidence tout problème ESLint. Ainsi, les avertissements ou les erreurs que nous avons dans le code s'en chargeront. L'extension Prettier s' assurera que les fichiers sont formatés en fonction du conflit lorsqu'ils sont sûrs. Cependant, pour la configuration de Prettier, nous avons besoin d'un peu plus de configuration, pour cela, vous devez accéder aux paramètres JSON dans VS Code. Ouvrez les paramètres utilisateur JSON, et ici, nous voulons nous assurer que nous avons le format de l'éditeur sur save true, ainsi que le formateur par défaut de l'éditeur et JavaScript, le formateur par défaut de l'éditeur. Tout cela est décrit dans la page Extensions. Il suffit d'ouvrir cette page directement dans le code VS, de la faire défiler, copier et de copier le format de l'éditeur, de l' enregistrer et de la placer dans vos paramètres JSON, comme ça. Ensuite, une fois que vous aurez enregistré les fichiers, ils seront automatiquement formatés. Pour l'extension ESLint, nous n'avons besoin d'aucune configuration, elle fonctionnera simplement. On se voit. 43. 04 Qu'est-ce que les composants et les accessoires React: Salut à tous, découvrons enfin ce que nous avons dans le dossier source. Voyons d'abord comment Vite résout tout dans le dossier source. Si je dois exécuter npm run dev, alors Vite sert le serveur de développement et nous avons ceci. Tout cela est créé et défini dans la source. Mais comment Vite résout-il réellement ce problème ? Si nous examinons package.json et que nous examinons le script de développement, le script de développement, ce qu' il fait réellement, il appelle simplement la commande Vite. Cependant, un argument facultatif commande Vite est le chemin vers index.html, qui sert d'entrée à Vite pour comprendre qu'il s'agit de notre point d'entrée. fichier Index.html que nous avons ici est l'entrée, et par défaut, lorsque Vite est appelé sans aucun argument, il recherche index.html dans le dossier actuel, ce qui est correct dans notre cas. Dans index.html, nous avons un balisage simple, donc Vite affiche ce index.html dès que la commande démarre, et il voit que, accord, dans le index.html, nous avons un script qui pointe vers la source main.jsx. source main.jsx est le point d'entrée de l'application React, tandis que index.html est le point vers l'application elle-même. Eh bien, dans une application, vous pouvez en fait avoir plusieurs applications React, mais cela se voit rarement. Nous avons un script qui pointe vers main.jsx. Nous avons un développeur dont l'identifiant est défini sur root, et nous avons ici des attaques par défaut assez fréquentes. Nous pouvons réellement le changer et l'appeler Tic Tac Toe. Une fois que je l'ai enregistré, vous pouvez voir dans le terminal qu'il a été changé en page à charger. Si je reviens en arrière, il a été automatiquement chargé pour moi. Je n'ai rien appuyé et le titre a été modifié. Génial, n'est-ce pas ? Si nous regardons à l'intérieur, source main.jsx. Ici, nous apprenons enfin à connaître React. Nous avons importé quelques éléments depuis React et react-dom/client. Cette importation de React depuis React, avant React 17, était requise dans chaque fichier où vous écrivez du code React. Cependant, à partir de React 18, cela n'est pas nécessaire. Vous pouvez omettre l'importation dans React. Mais dans notre cas, puisque nous utilisons l'espace de noms React pour utiliser le mode strict, nous devons toujours l' importer uniquement ici, mais dans tous les autres fichiers, nous n'avons pas besoin de taper import React depuis React. Cela n'était à nouveau nécessaire qu'avant React 17. Dans eslintrc, nous avons plugin jsx-runtime pour configurer eslint afin de comprendre que nous utilisons React 18, veuillez ne pas nous dire que nous devons importer React depuis React. Eslint le sait. Nous importons ReactDOM et sur un objet ReactDOM, nous appelons CreateRoot. Pour la méthode CreateRoot, nous transmettons élément document get par ID root. Nous récupérons l'élément de index.html, qui n'est qu'un élément vide, et cet élément vide s'appelle le point de montage. Il s'agit de l'élément juste vide. Il peut s'agir de n'importe quel élément HTML valide qui doit être présent dans le code HTML. Il servira de vaisseau à l'application React. Pour l'arborescence des composants. Nous créons une racine à partir de cet élément HTML. Nous l'obtenons à nouveau à partir de index.html, les identifiants doivent correspondre si je dois taper quelque chose de différent qui ne correspond pas à root et définir un index.html. Rien ne sera créé sur la page. Eh bien, c'est évident. Super. Nous le remettons à la racine et nous nous assurons que tout fonctionne. Une fois que nous avons l'objet racine, sur l'objet racine, nous appelons la méthode de rendu. À la méthode de rendu, nous devons transmettre l'arbre des composants que nous voulons voir apparaître sur la page. Eh bien, pour la méthode de rendu, nous transmettons essentiellement notre application React, nos composants React. Le composant App représente presque toujours les principaux composants de l'application React. Cela s'appelle presque toujours, j'en suis presque certain, simplement App. React StrictMode, c'est quelque chose qui a été récemment introduit dans React. Il se présente également sous forme de composant, mais ce qu'il fait, il ne fait que quelques éléments qui nous avertiront des problèmes potentiels ou des erreurs que nous pourrions avoir dans l'application React. Nous le gardons comme ça. Nous ne changeons rien ici. Ce que vous voyez ici est notre arbre de composants, juste comme ça. Tous les composants commencent toujours par une majuscule. Vous ne verrez aucun composant commençant par une lettre minuscule. C'est impossible. La première règle d'or est que les composants sont toujours capitalisés. Toujours, quoi qu'il arrive. Nous avons le mode React StrictMode et le composant App, et voici notre arborescence de composants. Maintenant, jetons enfin un coup d' œil au composant App. Dans le composant de l'application, oh mon Dieu, nous avons déjà quelque chose. Si nous survolons la souris, nous pouvons voir n'importe quelle erreur eslint provenant de la règle vide de React/jsx-no target. Eh bien, c'est bien nous n'allons rien faire à ce sujet, nous allons juste supprimer ce balisage de toute façon donc nous ne nous en soucions pas vraiment. C'est une bonne chose. Cet eslint nous indique qu'il n'est pas sûr de conserver les balises Anchor sans attributs spécifiques. Parfait. On n'y touche tout simplement pas alors. Il s'agit d'un composant. La fonction de l'application que vous voyez ici est un composant appelé App Il s'agit donc d'un composant d'application et nous avons déjà créé quelques éléments ici, mais supprimons-les simplement, nous n'en avons pas besoin. Je vais supprimer cela, je vais supprimer ce que vous avez dit et dont nous ne savons rien, le logo React, App.css. Peut-être pouvons-nous conserver App.css. Nous pouvons ensuite retirer le reste. Au lieu de cela, nous pouvons simplement taper bonjour, supprimer le nom de la classe. Nous avons un seul div, bonjour et fermez le div, nous le sauvegardons. Ensuite, nous allons supprimer le dossier des ressources. Nous n'en avons pas besoin. Nous allons supprimer index.css. Nous n'en avons pas besoin dans main.jsx. Nous allons supprimer la référence à index.css puisque nous venons de supprimer ce fichier. Nous n'avons que main.jsx, qui importe le composant App, et à l'intérieur du composant App, nous avons App.css. Super. Un composant est simplement une fonction qui renvoie le balisage JSX. Ce que vous voyez ici est du HTML, mais en réalité, sous le capot, il est traduit en JavaScript. Tout ce que vous écrivez ici est en JavaScript. Ce balisage HTML s'appelle ici JSX. Si je ne me trompe pas et si je me souviens bien, c'est la combinaison de JavaScript et de XML, je n'en suis pas sûr, mais de toute façon, ce balisage s'appelle JSX. Si vous pouvez le voir, nous avons également l'extension .jsx. Nous aurions pu utiliser l'extension just.js au lieu de jsx, mais le fait est que, puisque Vite est un outil frontal il doit également détecter exactement où se trouve le balisage React et où se trouve exactement le JavaScript normal. Cela nous oblige à nommer tous nos composants, ou tous nos fichiers où nous avons balisage jsx avec l'extension .jsx. C'est pourquoi vous voyez main.jsx car nous avons un balisage JSX dans un App.jsx parce que c' est un composant et il y aura certainement du balisage JSX à l'intérieur. Encore une fois, un composant n'est qu'une simple fonction qui renvoie un balisage JSX, qui ressemble à du HTML et qui est traduit en JavaScript. Nous pouvons saisir n'importe quel code HTML valide ici. Si je dois taper une balise span, ou une balise h1 et l'appeler titre, je l'enregistre, puis je reviens en arrière, vous pouvez voir que cela se reflète ici. Super. Si je dois inspecter le balisage dans le navigateur, je vois div id root, qui est à nouveau notre point de montage pour l'application définie dans index.html, puis notre application React est montée dans le div, comme vous le voyez ici. Le balisage que nous avons défini dans le composant App, div et title. est aussi simple que cela. Maintenant, nous avons également App.css ici. Comme vous l'avez déjà remarqué, pour créer des styles, ou pour styliser une application React, il suffit de créer un fichier CSS. Écrivez du CSS normal ici, puis importez-le dans le composant. Juste comme ça. Rien de spécial. Pour attribuer des classes à des éléments contenus dans le balisage, nous devons transmettre attribut ClassName aux éléments, pas la classe mais le ClassName, car n'oubliez pas que même s'il s'agit d'un balisage HTML, il est traduit en JavaScript sous le capot. Cela signifie qu'il est traité par React. Dans React, au lieu de transmettre uniquement la classe, nous transmettons l'attribut ClassName. Dans l' attribut ClassName, nous précisons les noms de classe que cet élément doit avoir. Passons quelque chose au hasard. Passons la classe de carte définie dans le CSS. Nous allons juste créer une carte, puis la sauvegarder. Si nous inspectons, vous pouvez voir maintenant que ce div a une classe de cartes avec le CSS défini ici. Cela fonctionne exactement comme ça. n'a rien de spécial. Alors allons-y et créons nos propres composants. Dans la source, nous allons créer un nouveau dossier appelé Components. Dans ce dossier de composants, nous allons créer un nouveau fichier, que nous allons nommer Square.jsx. Ici, nous allons créer une nouvelle fonction appelée square, et pour l'instant, elle va renvoyer un simple div, bonjour. À partir de ce fichier, nous allons exporter carré par défaut, juste comme ça. Maintenant, nous venons de créer un composant carré et nous voulons l'utiliser dans un autre composant. Dans la réaction, vous utilisez des composants à l'intérieur d'autres composants. Tout est un composant de React. Nous revenons à l'application JSX, et ici nous allons importer un carré à partir de composants carrés, puis à l'intérieur, nous allons simplement taper carré et fermer automatiquement. Vous pouvez voir que lorsque vous souhaitez utiliser des composants, vous les utilisez comme des éléments HTML. Cependant, encore une fois, la première règle est qu'ils sont toujours en majuscule. Fondamentalement, ils ressemblent beaucoup aux balises HTML réutilisables, mais ce sont des composants avec leur propre logique définie à l'intérieur. Si nous revenons à l'application, vous pouvez voir que hello est ajouté ici. C'est notre composant et le balisage à l'intérieur du carré signifie bonjour. Si je le remplace par autre chose, cela se reflétera ici. est aussi simple que cela. Maintenant, vous savez que n'importe quel attribut HTML peut recevoir des arguments pour transmettre des informations, pour transmettre des données à cet élément. Par exemple, nous avons une balise image. balise image attend deux attributs, source et alt, au cas où l'image ne se chargerait pas. Allons-y et essayons de spécifier ce fichier vite.svg comme source pour cette balise d'image. Comme vite.svg est diffusé sous root, car souvenez-vous de ce dossier public mappé à des segments d'URL, je vais simplement spécifier vite.svg, enregistrer et vous verrez que cela fonctionne. Cela nous indique vite.svg, qui est correct. Les composants ont également des attributs, mais tous ces attributs sont entièrement définis par nous dans la définition du composant. Ces attributs sont appelés accessoires. Tout comme les éléments HTML ont des attributs, les composants sont invités à transmettre des données à l'intérieur de ce composant. Nous avons une composante carrée. Si nous ouvrons un composant carré, ne s' agit que de données statiques ici, cela montre simplement bonjour. Et si je voulais afficher le composant carré et modifier ce qui va être affiché à l'intérieur ? Disons que nous pouvons dupliquer des composants carrés, comme ça, et nous aurons plusieurs composants carrés, par exemple bonjour, bonjour, bonjour. Mais que faire s'ils ont besoin d'informations dynamiques sur la taille, données dynamiques comme hello 1, hello 2, 3, 4, etc. ? Pour ce faire, nous devons passer des accessoires. Props est simplement l'objet que le composant reçoit comme premier argument. Juste comme ça. Si nous voulons annuler les accessoires de journalisation, ouvrir la console, et si je dois actualiser la page, vous verrez plusieurs journaux de console ici. Pourquoi en avons-nous plusieurs ? Parce que nous exécutons la composante carrée plusieurs fois. Pour chaque composant, le journal de la console est imprimé. Pour le moment, il s'agit d'un objet vide. Il n'est pas indéfini, c'est un objet vide. Tout ce que nous transmettons au composant en tant qu'accessoire apparaîtra sous l'objet accessoires ici. Tout comme nous transmettons des attributs à des éléments, nous transmettons des accessoires aux composants. Disons qu'à ce dernier composant carré, nous allons passer l'accessoire. Encore une fois, ce sera entièrement personnalisé. Appelons cela une valeur. Nous allons passer String 5. Nous revenons ici, je rafraîchis la page, dans la console du navigateur, nous pouvons voir la valeur 5. L'annulation a été bloquée à deux reprises. Eh bien, c'est faux, cela a été annulé deux fois. Je pense que la raison en est peut-être le mode strict ici. Permettez-moi d'essayer très rapidement de l'enlever. Si je rafraîchis, je n'ai plus qu'un seul journal de console. C'est bizarre. Le fait est que lorsque le composant est mis à jour, il a été mis à jour à l'intérieur. Lorsque le composant est mis à jour, JavaScript s'exécute à nouveau et la logique du composant s'exécute à nouveau. Pour une raison ou une autre, le composant strict oblige le composant à afficher à nouveau le code JavaScript contenu dans le composant pour le réexécuter et nous voyons plusieurs fois un journal de console pour le même composant. Continuons comme ça. Nous avons la valeur 5. Pour le reste des composants que nous avons ici, il s'agit toujours d'un objet vide car bon, on ne passe rien à l'intérieur, mais pour le dernier composant, on passe la valeur 5, on passe l'accessoire. Super. Je pense qu'il est clair que puisque nous ne transmettons rien ici, pour ces composants, il s'agit d'un objet vide, mais ici nous passons la valeur 5. Maintenant, dans l'objet props, nous avons une valeur clé avec une chaîne de valeur 5. Dans la définition des composants carrés, nous pouvons maintenant utiliser cette valeur ici. Comme il s'agit d'un objet, il est disponible sous props.value. Console log props.value et actualisons la page, nous voyons undefined et cinq, car encore une fois, pour tous ces composants qui ne transmettent pas la valeur prop, la valeur sera indéfinie, mais pour le dernier composant, la valeur sera la chaîne 5. Super. Maintenant, dans le balisage JSX, nous pouvons afficher des expressions JavaScript. heure actuelle, si je tape quelque chose ou si je le voulais, voyons voir, afficher la valeur de ces accessoires sous forme texte dans mon composant au lieu de bonjour, pour que cela soit dynamique. Je saisirais probablement props.value. Mais cela fonctionnera-t-il ? Essayons de voir. Si j'ouvre ma page, je vois props.value sous forme de texte car cela ne fonctionne pas. Ce n'est qu'une ficelle. Mais si nous voulons évaluer props.value en tant que JavaScript dans notre balisage JSX, nous devons utiliser des crochets. Juste comme ça. Entre crochets, nous pouvons saisir n'importe quel code JavaScript valide. Il sera évalué et éventuellement interpolé dans le balisage que nous écrivons. Si nous revenons ici, nous n'en voyons que cinq. Mais où se trouvent les autres composants ? Si nous inspectons le balisage, il est simplement vide. Comme ils sont vides, ils ne prennent pas de place sur la page. Mais le dernier composant, qui a été rendu, en contient cinq. Qu'est-ce qu'on passe ici exactement comme accessoire ? Si nous passons une autre chaîne ici, comme bonjour, la valeur sera mon nom. La valeur va être quelque chose. Supprimons celui-ci, sauvegardons-le et revenons en arrière. Vous pouvez voir que tout est affiché au fur et à mesure que nous passons. De cette manière, à l'aide d'accessoires, nous pouvons transmettre les informations au composant. Voici un petit conseil, car nous savons toujours que le premier argument de la fonction de composant sera l'objet props. Nous pouvons utiliser la déstructuration au lieu d'écrire des accessoires, quelque chose comme ça tout le temps. Ce que je vais faire, c'est appliquer déstructuration directement dans les arguments de la fonction. Puisque nous avons déstructuré la valeur de la clé à partir de l'objet props, je vais juste la récupérer comme ça. Maintenant, cela semble beaucoup plus propre et nous n'avons pas besoin d' écrire props.something. De cette manière, nous pouvons transmettre autant d'accessoires que nous le souhaitons à l'intérieur du composant. En plus de ce [BRUIT], nous pouvons transmettre un autre accessoire spécial prédéfini appelé children. Les enfants sont quelque chose que vous transmettez à l'intérieur du composant sous la forme de son propre balisage. Ce que je veux dire par là, c'est que si vous regardez à l'intérieur de la composante carrée en ce moment. Il se ferme automatiquement. C'est le cas et à l'intérieur, nous passons différents accessoires. Cependant, on peut aussi l' écrire ainsi. Carré, puis fermez-le sur une ligne séparée. Ensuite, à l'intérieur, nous pouvons passer quelque chose comme div, bonjour. Peut-être qu'un autre titre dit : « C'est un titre ». Dans ce cas, ce composant ne se ferme plus automatiquement. Ils restent fermés automatiquement , mais c'est comme un composant normal qui ne se ferme pas et à l'intérieur, nous passons du balisage. Tout ce que nous faisons passer à l'intérieur du composant de cette manière. Ce balisage ici, bonjour, c'est le titre. Il sera disponible dans la définition du composant. Comme l'accessoire pour les enfants, il s'agit d'un nom de clé réservé spécialement à cela. Si je dois y aller et enregistrer les enfants sur console. Si nous ouvrons à nouveau la console, vous pouvez voir que pour les autres composants auxquels nous ne transmettons pas d' enfants, elle n'est pas définie. Mais pour le premier composant, si vous l'ouvrez, il y a des choses étranges ici. C'est le JavaScript qui est réellement utilisé sous le capot derrière le balisage JSX. Nous pouvons prendre les enfants et le rendre. Nous pouvons l'utiliser comme machine à sous. Dans d'autres bibliothèques, cela s'appelle des machines à sous. Dans le réacteur, on appelle ça des enfants. Vous transmettez du balisage à l'intérieur du composant , puis le composant qu'il contient, en l'utilisant en tant qu' enfant, peut décider où exactement il sera affiché. Dans ce balisage, je vais taper, les enfants seront affichés ci-dessous. Dans le div, je vais interpoler les enfants parce que, encore une fois, si je dois simplement transmettre des enfants comme ça, cela sera considéré comme une chaîne d'enfants. Mais comme les enfants sont une variable dans cette fonction, nous devons l' interpoler dans le balisage JSX. Juste comme ça. Maintenant, si nous regardons dans notre code HTML, nous avons différentes choses ici. Pour la première composante, nous avons quelque chose puis nous avons des enfants, ce sera rendu ci-dessous. Ensuite, nous avons div, qui correspond aux enfants que nous avons transmis au composant qu'il contient. On y passe le bonjour et voici le titre. C'est exactement ce que nous voyons ici. Ce HTTP de HTML est interpolé à l'intérieur d'un composant carré. Il est disponible pour les enfants. Il a été exposé en tant qu'accessoire pour enfants. Encore une fois, vous ne pouvez pas changer. Ça reste toujours comme ça. C'est un nom d'accessoire réservé aux enfants. Ça ne change jamais et ça restera toujours comme ça quoi qu'il arrive. Pour le reste de nos composants, rien ne sera rendu. Vous verrez que ce sera un div vide. Chaque fois que vous essayez d'afficher, ou disons ce que vous essayez d'interpoler une valeur nulle indéfinie. Dans le balisage JSX, il ne sera pas rendu car il est considéré comme une valeur vide, il ne sera pas affiché. Si je dois continuer et essayer d'afficher une valeur nulle à l'intérieur, rien n'y figurera. Ce ne sera qu'un div vide. Il en va de même pour undefined et false. Toutes les valeurs erronées ne seront pas évaluées comme quelque chose. Ils seront simplement omis. ainsi que nous pouvons créer des composants. Cool, n'est-ce pas ? Dans la vidéo suivante, nous allons créer un composant de carte. Nous allons créer un composant à racine carrée et essayer d'intégrer certaines fonctionnalités à l'application. On se voit là-bas. 44. 05 Comment appliquer des styles CSS: Bonjour. Continuons à créer l'application. La dernière fois, nous avons discuté des composants, manière dont nous pouvons créer des composants, manière dont nous pouvons transmettre des enfants , de la nature des composants , de la manière dont nous pouvons les afficher, etc. Maintenant, commençons et donnons vie à notre application. Ce que nous allons faire maintenant, c'est créer le balisage qui sera utilisé dans notre jeu. Nous revenons à l'application JSX. Nous allons tout supprimer d'ici. Nous allons supprimer ce nom de classe pour le moment, nous allons supprimer l' importation de square, et nous allons créer un nouveau composant dans le dossier des composants, que nous allons nommer board JSX. Il représentera notre tableau et nous mettrons toute la logique pertinente à l'intérieur de ce composant. Encore une fois, je vais créer une fonction Word. À l'intérieur, pour l'instant, nous allons afficher div sous forme de bonjour, et à partir de ce fichier, nous allons explorer ce composant du tableau. Ensuite, dans l'application JSX, nous allons importer une carte à partir d'une carte de composants. Ensuite, nous allons le chercher ici en tant que composant à fermeture automatique. Maintenant, nous revenons au navigateur, nous voyons bonjour, qui provient du composant de la carte. Maintenant, à l'intérieur du tableau, nous allons définir le marqueur initial. Nous allons lui donner un tableau de noms de classe. Il n'est encore traité nulle part, pas dans un fichier CSS, nulle part. Nous allons simplement l'étiqueter avec le tableau des noms de classe. À l'intérieur, nous allons créer des lignes parce que si vous vous souvenez notre jeu va être un tic-tac-toe et que ce doit être cela, disons une structure en forme de ligne dans du code HTML. Nous allons créer trois rangées. Nous allons avoir trois plongées. Chaque div aura un nom de classe, un tableau, une ligne, et à l'intérieur de chaque ligne, nous aurons trois carrés. Il s'agira essentiellement d' une grille, trois par trois. À l'intérieur de chaque ligne, nous allons utiliser la composante carrée. Nous allons importer carré par carré. D'ailleurs, cet./ représente le dossier actuel dans lequel cette carte de fichiers JSX l'a localisé dans ce cas. Si je tape. /, il représente ce dossier de composants. Cela signifie que tout ce que je vais taper plus loin sera résolu à partir de ce dossier. J'importe par défaut, j' exporte celui-ci, un nom, son carré intérieur, et tout cela est importé à partir de ce fichier carré ici. À l'intérieur de chaque rangée, je vais parcourir le carré trois fois, juste comme ça. Finalement, ça ressemble à quelque chose comme ça. Si je rafraîchis, nous avons toujours le balisage de la dernière vidéo, mais supprimons-le et utilisons uniquement la valeur prop. Mais nous devons tout de même le transmettre dans chaque instance de racine carrée que nous exécutons. Je vais transmettre la valeur zéro ici. La valeur sera une. D'ailleurs, dans la dernière vidéo, je passe la valeur sous forme de chaîne. Juste comme ça. Une chaîne peut être passée sans crochets , mais si vous essayez d'en transmettre cinq et que vous voulez qu'il s'agisse d'un nombre au lieu d'une chaîne, vous devrez utiliser des crochets. Encore une fois, les crochets n'importe où dans le balisage JSX vous permettent d'utiliser n'importe quelle expression JavaScript valide à l'intérieur. Zéro en tant que nombre est une expression JavaScript, et nous pouvons la transmettre en tant qu'accessoire de valeur, et ce sera juste le numéro 0 ou le numéro un. Si vous voulez que ce soit une chaîne, vous pouvez simplement la taper comme ceci et ce sera une chaîne. Expression qui s' évalue sous forme de chaîne. Mais s'il s'agit d'une chaîne, vous pouvez la passer comme ça. Si nous transmettons des chiffres, nous devons utiliser des crochets. Valeur 0, valeur comme ça. Permettez-moi de le recopier rapidement et de le faire ainsi jusqu'à huit heures. Vous vous demandez peut-être pourquoi cela part de zéro. Eh bien, je ne vous l'ai pas dit, mais nous allons aborder très bientôt la façon dont nous allons représenter le plateau, comment allons-nous gérer cela, et nous devons représenter les carrés d'une manière ou d'une autre. Nous pouvons les représenter par des index. Une augmentation de la programmation part de zéro. Comme nous allons utiliser une augmentation pour gérer un jeu de plateau, les index partiront de zéro. C'est pourquoi, pour l'instant, nous donnons des indices à nos carrés et ils partent de zéro, car ce seront des éléments de tableau. Nous retournons ici et nous voyons cela. Eh bien, si nous inspectons le code HTML, c'est exactement ce que nous avons écrit. Maintenant, rendons-le un peu plus élégant. Nous revenons au carré JSX et nos carrés seront cliquables. Au lieu de div, nous pouvons afficher un bouton avec le type button, et nous allons lui donner le nom de classe square, que nous allons définir dans un instant. Maintenant, ça ressemble à ça, et ce n'est pas si mal, n'est-ce pas ? Mais nous allons appliquer nos propres styles ici. Si nous revenons à l'invité, c'est exactement sur cette page où vous pouvez avoir toutes les informations qui vous sont fournies si vous faites défiler la page ici, nous avons styles.scss ici. Eh bien, SCSS est pour les fichiers Sass. Sass est un préprocesseur CSS que nous allons utiliser. Qu'est-ce qu'un préprocesseur CSS ? Il s'agit essentiellement d'un langage construit sur le CSS et qui possède son propre ensemble de fonctionnalités. Finalement, lorsque nous allons écrire ce quelque chose de SCSS à points, il sera compilé en quelque chose de CSS à points, et il fonctionnera comme un CSS normal. Mais il présente l'inconvénient de ses propres fonctionnalités, par exemple, comme la nidification. Dans le CSS normal, nous ne sommes pas autorisés à imbriquer des sélecteurs. Nous devons les écrire en ligne, comme Dot History Rapper, puis Space puis Dot History. Dans SASS, tout peut être imbriqué. Nous pouvons avoir des variables et des choses différentes. Vous pouvez rechercher dans Google des feuilles de style SASS, Syntactically Awesome. Vous pouvez l'ouvrir, cliquer sur « Learn SASS » et parcourir cette page très rapidement. Ce n'est pas trop long, c'est assez court, et il couvre et vous montre toutes les fonctionnalités SASS, par exemple les variables. En utilisant le signe dollar, vous pouvez avoir des variables en CSS. C'est plutôt cool, et vous pouvez faire la nidification. Vous pouvez voir que si vous écrivez ce balisage SASS, il se traduit dans ce CSS, nous allons donc utiliser SASS. Pour ce faire, nous devons donner des instructions à Vite. Nous devons dire à Vite qu' au lieu du CSS normal, nous aimerions également utiliser SASS, et Vite prend en charge SASS. Si nous revenons à la documentation de Vite, si nous cliquons sur « Rechercher » et que nous cherchons SASS ici et que nous ouvrons le premier lien, nous avons la section du préprocesseur CSS, et Vite fournit un support intégré pour les fichiers SCSS. Ensuite, pour ce faire, activez le support dont nous avons besoin pour installer le compilateur SASS. compilateur SASS est disponible sous la forme d'un package npm appelé SASS. Vous pouvez voir cette commande ici. Si je tape npm SASS, je mettrai le premier lien. C'est le package qui nous donne la possibilité de compiler SASS en fichiers CSS. Il suffit donc de l'installer et Vite se chargera du processus de transpilation. Je vais juste copier cette commande, ouvrir le terminal, arrêter la commande en appuyant sur Control C, pour que notre serveur diff tombe en panne, puis je vais installer SASS. Dash D est fondamentalement identique à Dash, Dash Save-dev. C'est juste un raccourci. Il installera SASS en tant que dépendance de développeur, et si vous regardez dans le package JSON vous verrez maintenant SASS sous les dépendances de développement. Génial. Maintenant, nous devons d' abord exécuter npm run dev pour redémarrer le serveur et nous pouvons créer des fichiers SASS. Dans le dossier source, je vais créer Styles.scss, et que vais-je faire ? Je vais juste passer à l' invité et je vais juste tout copier à partir d'ici et le mettre dans le style CSS. Vous n'avez pas besoin d'entrer trop dans les détails ici. C'est le balisage final que nous allons avoir dans notre application car ces vidéos ne concernent pas le CSS. Si vous devez changer quelque chose ou si vous souhaitez apporter quelque chose de nouveau ici, vous êtes libre de le faire. Allez-y, modifiez-le, jouez avec, nous allons utiliser ce balisage. À l'intérieur de ces styles, nous avons défini une clause de tableau. Ensuite, à l'intérieur du tableau, nous imbriquons la classe des rangées, puis à l'intérieur de la classe des rangées du tableau, nous imbriquons la classe des rangées carrées. En fait, si vous ouvrez à nouveau SASS, imbrication se compile dans ces sélecteurs ici, donc en gros, le tableau, et l'intérieur du tableau, seront compilés comme ça, et le carré sera compilé comme ça. C'est très pratique, je pense. Nous avons des classes de tableau et de ligne et de racine carrée, donc ce que nous allons faire, c'est importer un fichier SASS à points dans notre application. Nous n'aurons plus besoin de CSS App Dot, nous allons donc simplement le supprimer. Ensuite, nous passons au composant de l'application, et au lieu d' importer du CSS de l'application, nous allons importer des styles CSS à points, et cela fonctionnera. Nous avons maintenant des classes de tableaux, de rangées de tableaux et de carrés. Nous allons au carré, nous attribuons une classe carrée, qui va se résoudre à ce CSS. À l'intérieur du tableau, nous avons tableau et une rangée de tableaux, qui se termineront par ces classes. Maintenant, nous revenons à l'application, et boum, vous pouvez le voir, elle ressemble exactement à ça. Cependant, vous pouvez voir que quelque chose ne va pas ou que quelque chose ne va pas. Il s' agit en fait de notre balisage, agit en fait de notre balisage nous devons donc le modifier un peu. Si nous accédons à l'application ici, nous allons donner le composant qui enveloppe l'ensemble de notre balisage. Nous allons lui donner ici la classe d'application que nous avons définie comme ça. Nous pouvons donc lui donner le nom de classe App. Ce qu'il va faire, c'est nous donner la boîte flexible de base avec la configuration des colonnes. Si nous revenons ici, vous pouvez voir que nous avons maintenant notre grille finale, qui ressemble à ceci. C'est plutôt cool. C'est une question de style. Vous connaissez maintenant une autre astuce comment personnaliser votre application à l'aide de SASS. Si vous connaissez déjà un autre préprocesseur comme Less, vous pouvez également lire dans la documentation de Vite comment le brancher ou le stylet. SASS est très populaire dans toutes les solutions courantes d'applications. Je pense que c'est plutôt cool et très pratique. Nous avons commencé par interactivité, mais nous avons fini par les styles. Je pense que pour l'instant, nous allons nous retrouver avec des styles, et en fait, dans la prochaine vidéo, nous allons parler d'interactivité. Je pense que ça ne te dérange pas. Comme nous avons déjà beaucoup travaillé ici, nous avons introduit SASS, nous avons créé des composants carrés et carrés . Nous avons ici notre joli balisage allons tout valider. Qu'est-ce que nous avons ici ? Nous avons supprimé le CSS de l'application, nous avons modifié le package JSON, nous avons supprimé quelques fichiers. Nous allons donc simplement continuer et tout ajouter à l'état de scène. Je vais taper « Git add point » pour que tout apparaisse sous les modifications et que nous allons simplement tout valider, et nous allons nommer le commit SASS installé, et créer des composants carrés et carrés, des composants simples, quelque chose comme ça. Message de validation très étrange, mais je pense que ça suffira. Nous nous engageons à tout faire. Pour que tout apparaisse sur GitHub, nous devons le déployer, car encore une fois, nous devons nous rappeler que si vous validez des modifications, elles restent localement sur votre PC. Si vous revenez sur GitHub dès maintenant, rien ne sera modifié car toutes vos modifications sont disponibles localement Vous devez donc les déployer sur un hébergement GitHub chaque fois que vous introduisez de nouvelles modifications localement, donc git push origin master. Je le fais, je me rafraîchis, et maintenant tout va bien. Génial Comme promis, prochaine vidéo portera sur l'interactivité, alors rendez-vous là-bas. 45. 06 React State avec useState hook, React événements: Rebonjour. Dans cette vidéo, comme promis, nous allons parler d'interactivité. Ce que j'entends par interactivité. L'interactivité est quelque chose qui se produit lorsque l'utilisateur interagit avec la page Web. Quand je clique sur le bouton, quelque chose doit se passer. Un événement se produit et quelque chose est mis à jour à l'écran. C'est ce que l'on appelle l'interactivité. Nous allons maintenant voir comment gérer cela dans React. En JavaScript brut, en JavaScript simple sans React, vous avez un fichier JavaScript. Vous récupérez généralement des éléments avec l'API DOM , un peu comme document get element by ID. Vous saisissez un bouton, puis vous écrivez button.add event listener, et à cet écouteur, vous attachez une fonction qui s' exécutera lorsque vous cliquerez sur le bouton. Mais dans React, c'est à peu près la même chose. Cela semble différent, mais c'est presque pareil, alors ouvrons JSX ici. À titre d'exemple, créons un bouton et nous allons jouer avec lui. J'ai retiré le tableau pour le moment. Où en était le composant pour le moment ? Nous n'en avons pas besoin. Nous avons l'éditeur eslint ici, pas de variables inutilisées. Cela produit une erreur au lieu d'attribuer Faisons en sorte qu'il y ait moins de variables. Dans eslint, je vais juste supprimer variables inutilisées et je voulais générer un avertissement. Maintenant, ce sera orange au lieu de rouge et cela ne nous dérangera pas beaucoup. Je vais donc créer un élément de bouton et je vais l'appeler, cliquez sur moi, s'il vous plaît. Maintenant, ce que je veux faire sur ce bouton, c'est peut-être que je veux mettre à jour quelque chose ou annuler, enregistrer quelque chose et voir de la valeur dans la console du navigateur. Comment pouvons-nous le faire ? À chaque élément, à chaque balise HTML utilisée dans le balisage JSX, vous pouvez transmettre un gestionnaire d'événements afin d'avoir des événements, des événements de clic, des événements de souris, différents types d'événements et chaque fois que je parle de gestionnaire d'événements, je fais référence à la fonction qui s'exécutera lorsque cet événement se produira. Prenons l'exemple de cet élément de bouton. Si je dois essayer de transmettre attribut commençant par un à partir de l'intelligence, je peux voir une assez longue liste de différents événements disponibles pour cet élément. Onsubmit, OnResize, OnMouse, over OnKeyUp, etc. heure actuelle, nous nous intéressons à l'événement OnClick, donc je vais juste faire OnClick et pour cet attribut sur l'élément de bouton, je dois transmettre un gestionnaire d'événements, une fonction qui s'exécutera lorsque le clic se produit. Je vais donc simplement transmettre une fonction vide ici et à l'intérieur de cette fonction, je vais faire console.log, « Bonjour » donc si je l'enregistre, je retourne à l'application. Maintenant, chaque fois que je clique sur le bouton, vous verrez que hello s'affiche à chaque fois que je clique dessus, donc cela fonctionne réellement. En JavaScript brut, tous les gestionnaires d'événements reçoivent toujours un objet d'événement comme premier argument, de sorte que cette fonction reçoit toujours en JavaScript simple un objet d'événement qui représente l'événement. Essayons d'annuler le journal de cet objet ici. Voyons s'il y a une différence. Donc, si je clique sur le bouton ici, je peux voir bonjour, puis je vois l'objet de l'événement. Cet objet d'événement est donc une enveloppe autour d'un objet d'événement natif que vous obtiendriez habituellement avec du JavaScript simple, mais en React, c'est ce que l'on appelle événement syntaxique. Il s'agit donc essentiellement d'une enveloppe autour événement natif avec les quelques propriétés de réaction. Si vous l'inspectez, vous avez ici une pile de propriétés différentes, ainsi qu'un événement natif auquel vous pouvez accéder avec simplement event.native event. De cette manière, si vous en avez besoin, vous pouvez obtenir un objet d'événement JavaScript natif. Mais la plupart du temps, il en a juste assez pour faire référence à un événement synthétique. La plupart du temps, il contient les informations que vous recherchez au cas où vous en auriez besoin. Dans ce cas, nous n'avons donc pas du tout besoin d'un objet d'événement. Nous souhaitons apporter une certaine interactivité à l'application Essayons-la maintenant et voyons comment nous pouvons y parvenir. Disons que nous avons un compteur. Permettez-moi de créer une variable. Appelons-le « Compteur de lettres, qui commence à un ». Maintenant, je voulais juste afficher ce compteur ici et chaque fois que je clique sur un bouton, j'aimerais augmenter la valeur un, 2, 3, etc. Dans le gestionnaire d'événements OnClick, en fait, essayons de déplacer cette fonction ici vers l'application pour qu' elle soit plus agréable. Cela semble plus attrayant et plus facile à lire. Nous pouvons donc simplement créer cette fonction ici et l'appeler OnBtnClick. Je vais simplement la copier d'ici, coller ici et pour l'attribut OnClick, je vais transmettre BtnClick. comme ça, disons que dans ce gestionnaire d'événements, j'aimerais augmenter le compteur ici pour qu'au lieu du journal de la console, nous le gardions peut-être. Allons-y et disons que le compteur est égal au compteur plus un. Rien de spécial. Maintenant, pouvons-nous voir qu'il a réellement été augmenté ? Allons-y en haut et en bas. Affichons la valeur du compteur Je vais donc utiliser des crochets pour à nouveau la valeur en six seulement , car elle possède un compteur variable. Je l'enregistre. Je reviens ici, j'en vois un. Nous l'avons juste au départ, super. Si j'essaie de cliquer dessus, rien ne se passe. Mais pourquoi ? Le problème avec cette approche est que React ne suit pas exactement les mêmes règles que le JavaScript ordinaire. Donc, si vous aviez utilisé du JavaScript simple et essayé d'écrire une logique très similaire, cela aurait fonctionné, mais pas avec React. Dans React, chaque fois que vous avez besoin d'une valeur qui change au fil du temps, par exemple, après avoir simplement dévalué les modifications au cours de la période d' interactivité, vous devez en faire un état. Ainsi, dans React, une valeur qui change doit être un état. En une seconde, nous pouvons maintenant créer notre premier état. Mais avant de le faire, permettez-moi de vous expliquer rapidement pourquoi cela ne fonctionne pas. Je vais ouvrir Paint et vous expliquer rapidement comment React gère cela. Dans React, il existe le concept de rendu à nouveau. Un nouveau rendu se produit essentiellement lorsque le composant est repeint sur la page Web. Lorsque nous utilisons state, state déclenche toujours le rendu d'un composant, et l'état lors du prochain rendu sera mis à jour. Mais si nous créons simplement des variables comme celles-ci et essayons de les mettre à jour, cela ne fera rien. La raison en est que lorsque nous essayons simplement de muter la variable de cette manière, cela ne déclenchera pas le nouveau rendu du composant. cycle de vie d'un composant est en fait basé sur des nouveaux rendus. Lorsque nous actualisons la page, le composant est monté sur la page. Cela signifie qu'il est affiché pour la première fois. Supposons donc que ce carré représente un seul rendu. Le composant est monté sur la page, il a été rendu, il a été affiché. Maintenant, selon les règles de React, si je veux mettre à jour quelque chose à l'écran, si je veux mettre à jour quelque chose dans ce composant, je dois déclencher un nouveau rendu pour cela. À peu près sur cette photo , cela ressemblera à cela. Ce nouveau rendu se traduira par un nouveau rendu. Ce sont des cadres et React les remplace. C'est donc notre premier rendu. Disons que nous mettons à jour l'état. Encore une fois, l'état sera la valeur qui change au cours d'une certaine période. L'état a été mis à jour, mise à jour de l'état déclenche un nouveau rendu, et nous avons maintenant un composant qui a été rendu à nouveau. Encore une fois, avec les variables, si nous les utilisons comme ça, cela ne fonctionnera pas. La raison de cette mise à jour variable, cette ligne numéro 9, ne déclenche pas de nouveau rendu et c'est un problème. Nous en restons à cette première image et essayons de mettre à jour ce compteur plus un ici, et cela ne fait rien, cela ne déclenche pas de nouveau le rendu, ce qui signifie que nous devons utiliser l'état pour toutes les valeurs dont nous savons qu' seront modifiées au fil du temps après une certaine interactivité. Chaque nouveau rendu ici, donc c' est le premier rendu, le second, ils oscillent l'un par rapport à l'autre, ils ne savent rien l'un de l'autre. Le premier rendu ne sait pas qu'il y aura un second rendu, et tout comme le second rendu ne sait pas s'il y a eu un premier rendu ou un nouveau rendu précédent, ils oscillent l'un avec l'autre. Tout cela est géré en interne par React, mais le point principal ici est que nous devons savoir que pour mettre à jour quelque chose, nous devons déclencher un nouveau rendu d'un composant. Chaque fois qu'un état est mis à jour, il déclenche un nouveau rendu d'un composant. Maintenant, si nous voulions que ce compteur soit mis à jour et fonctionne comme prévu, à partir de React, nous devrions explorer quelque chose appelé UseState. En haut, je vais juste importer UseState et ici j'utilise l' importation nommée depuis React. Qu'est-ce que UseState ? Dans le React, il existe un concept de React Hooks. Qu'est-ce qu'un crochet ? Hook est essentiellement une fonction qui nous permet de manipuler le cycle de vie des composants. Qu'est-ce que le cycle de vie des composants ? cycle de vie d'un composant est simplement une période pendant laquelle quelque chose se passe à l'intérieur du composant. Il est en cours de montage, mise à jour, démontage, il s'agit donc du cycle de vie des composants. Nous pouvons utiliser React Hooks pour manipuler d'une manière ou d'une autre le cycle de vie de ce composant. UseState nous permet donc de créer une valeur qui sera modifiée au cours du cycle de vie d'un composant. Comment pouvons-nous l'utiliser. Dans notre composant, il suffit d'appeler useState en tant que fonction. Encore une fois, tous les React Hooks sont des fonctions. D'ailleurs, tous les React Hooks commencent toujours par le préfixe use. C'est donc la convention de React. Chaque fois que vous voyez utiliser quelque chose, c'est définitivement un React Hook. Nous l'appelons en tant que fonction, et en tant que premier argument, nous devons transmettre l'état initial. Quelle sera la valeur par défaut pour cet état ? Dans notre cas, nous voulions lui donner une valeur initiale de un, nous allons donc simplement en transmettre une. Maintenant, cette fonction UseState renvoie toujours un tableau. UseState renvoie toujours un tableau contenant exactement deux éléments. Allons-y et nommons-la valeur de retour pour le moment, et essayons de l'enregistrer sur console, écrire directement dans le composant. Voyons voir ce que nous avons ici ? Je rafraîchis donc la page et voici, comme je vous l'ai dit, un tableau composé exactement de deux éléments. Le premier élément sera valeur de l'état à ce moment lors du nouveau rendu en cours, et la deuxième valeur de ce tableau sera la fonction de mise à jour que nous devons appeler pour mettre à jour cet état. Laissez-moi vous montrer ce que je veux dire. La plupart du temps, vous verrez que nous allons utiliser une redéstructuration car nous savons que useState renvoie toujours un tableau d'exactement deux éléments, ce qui nous permet d'appliquer une restructuration en toute sécurité. Le premier élément sera notre état et le second, une fonction que nous devons appeler pour mettre à jour l'état. Elles sont appelées état et fonction de mise à jour de l'état, et nous pouvons les nommer comme nous le voulons. Notre état s' appellera counter, et la fonction de mise à jour pour définir l'état sera appelée setCounter. Maintenant, je vais supprimer ce compteur de lettres égal à 1. Je vais supprimer ce compteur de lignes plus 1, nous n'en avons pas vraiment besoin. Essayons de consoler notre comptoir. En fait, nous n'avons pas eu besoin de l'annuler, nous l'avons déjà ici. Si je l'enregistre, je rafraîchis la page, nous en avons toujours une ici. C'est notre état initial. Maintenant, si nous voulons mettre à jour l'état, nous devons appeler la fonction de mise à jour de l'état, SetCounter. Entre les clics et les clics, nous voulons augmenter la valeur. Alors, ce que nous pouvons faire. Nous pouvons appeler setCounter, et à l'intérieur, nous devons simplement transmettre une nouvelle valeur pour cet état. Pour l'instant, mettons simplement une valeur statique. Disons 10. Je l'enregistre, je retourne au navigateur, maintenant je clique sur le bouton, et vous voyez que la valeur a été changée à 10. À l'intérieur de la console, il est important que vous voyiez bonjour ici. Ce qui s'est passé, c'est que lorsque vous cliquez sur le bouton, SetCounter a été appelé, il mis à jour l'état de 1 à 10. Ensuite, votre nouveau rendu a eu lieu. Si nous revenons à ce petit diagramme, ce qui s'est passé, c'est que ce composant a été affiché sur la page. Nous avons cliqué sur le bouton, nous avons mis à jour l'état, et cette mise à jour a déclenché le nouveau rendu. La deuxième image représente notre nouveau rendu actuel où l'état actuel est 10. Pourquoi voyons-nous le journal de la console ici ? En fait, nous voyons le journal de la console ici parce que nous l' avons dans OnBtnClick. Mais que se passerait-il si nous mettions le journal de la console ici en dehors de OnBtnClick. Essayons encore une fois. Je rafraîchis la page. Nous voyons d'abord deux journaux de console, mais bon, c'est normal car, comme vous vous en souvenez, je vous l'ai dit dans la vidéo précédente à propos de React StrictMode, c'était intentionnel qu'il affiche le composant deux fois pour détecter les erreurs, mais ce n'est pas le but, ou peut-être que ce sera le but. Permettez-moi de supprimer React StrictMode pendant une seconde. Je rafraîchis la page. Nous voyons un journal de console bonjour, car le composant est monté, la logique interne du composant s'exécute, nous voyons le journal de la console. Super. Mais maintenant, si je clique sur le bouton, nous voyons la valeur être mise à jour, le composant est rendu et nous voyons bonjour pour la deuxième fois. Nous le voyons parce que, encore une fois, chaque nouveau rendu, la logique à l'intérieur du composant est à nouveau exécutée. Javascript s'exécute à nouveau lorsque le composant est rendu à nouveau L'état est donc conservé car UseState est une fonctionnalité interne de React. Eh bien, il est entièrement géré sur React, de sorte que la valeur qui change au fil du temps est gérée par React. Il est persistant. Tout va bien. Mais nous voyons le journal de la console ici parce que, eh bien, c'est quelque chose que nous intégrons au composant et que la logique s'exécute à nouveau . C'est pourquoi nous le voyons une deuxième fois. Si nous sommes sur le point de mettre à jour à nouveau l'état lors du prochain rendu du composant, vous verrez un autre bonjour, etc. Vous verrez un bonjour à chaque fois que le composant sera vous verrez un autre bonjour, etc. Vous verrez un bonjour à chaque rendu à nouveau. Mais que se passe-t-il si je clique à nouveau sur le bouton ? Vous voyez, je clique dessus une fois de plus et nous ne voyons plus aucun bonjour. React est suffisamment intelligent pour détecter que l'état reste le même, donc que la valeur reste la même. React est assez intelligent pour ne pas mettre à jour le composant tout le temps, encore une fois. Il n'exécute pas de nouveau calcul en permanence si la valeur de l'état est la même. Allons-y et essayons d'augmenter le compteur. On peut faire un compteur plus 1, juste comme ça. Maintenant, si je rafraîchis la page, je clique sur le bouton, j'en vois 2, je vois bonjour, car à nouveau le composant est rendu. Je clique à nouveau sur le bouton, et maintenant le bonjour, nous en voyons 3 et ainsi de suite. Cependant, cette approche avec une telle mise à jour de l'état, lorsque nous devons définir une nouvelle valeur pour cet état et que nous voulons calculer une nouvelle valeur d'état partir de la valeur d'état actuelle, nous devons utiliser une approche légèrement différente. Au lieu de faire un compteur plus 1, nous pouvons en fait transmettre rappel alternatif à la fonction de mise à jour de l'état. La fonction de mise à jour de l'état peut recevoir l'un des deux arguments. Soit une nouvelle valeur d'état, comme vous l'avez vu, donc 5, 10, nouvelle valeur qui ouvrira la voie, soit nous pouvons transmettre un rappel à cette fonction de mise à jour d'état, et à l'intérieur de ce rappel, premier argument sera la valeur, qui représente l'état actuel. Disons un compteur de courant. Tout ce que nous renverrons de ce rappel sera défini comme la nouvelle valeur. À partir de ce rappel, nous pouvons maintenant renvoyer compteur actuel plus 1. Il en sera de même et, du point de vue de l'utilisateur, rien ne sera modifié, mais en interne, cette approche est correcte lorsque vous devez calculer une nouvelle valeur d'état à partir de la valeur d'état actuelle ou précédente. Comme il s'agit du compteur et que nous aimerions l'augmenter, nous devons connaître l'état actuel du compteur. Chaque fois que vous vous trouvez dans cette situation, utilisez toujours l'approche de rappel. Si nous voulions simplement le régler sur un nombre aléatoire, nous n'en avons pas vraiment besoin car nous n'avons pas besoin l'état actuel pour calculer le nouvel état. Nous revenons à l' application. Je rafraîchis. Encore une fois, comme je vous l'ai dit, du point de vue de l'utilisateur, rien n'a changé. Avec quelque chose comme ça, vous pouvez manipuler des éléments de la page. Sur la base de ces connaissances de base simples, ces connaissances de base simples, toutes les applications React sont conçues comme ça. Vous avez plusieurs états. Vous pouvez créer autant d' états que vous le souhaitez. Vous pouvez les manipuler comme vous le souhaitez avec différents événements : un clic, un survol, lorsque quelque chose s'ouvre, se ferme, tout est géré avec de tels états. Je pense que pour cette vidéo, cela suffira. Vous connaissez maintenant les événements React que vous pouvez transmettre à quelque chose. Pour cet attribut, vous pouvez transmettre n'importe quel gestionnaire d'événements pour exécuter une fonction lorsqu'un événement se produit. Ce gestionnaire d'événements reçoit toujours un objet d'événement comme premier argument au cas où vous en auriez besoin. Si vous ne le faites pas, eh bien, ne l'utilisez pas. Si vous avez besoin de mettre à jour une valeur sur la page, le compteur de couleurs, le texte , etc., nous avons la solution. Les variables ne fonctionneront pas car React ne fonctionne pas de cette façon. React est basé sur le concept de rendu, et pour conserver la valeur d'un rendu à un autre, nous devons utiliser l'état. Nous pouvons le faire en utilisant le hook use state. hooks dans React ne sont que des fonctions que vous appelez pendant cycle de vie du composant pour manipuler les données à l'intérieur du composant. Quelque chose comme ça. Dans la vidéo suivante, nous verrons comment utiliser ces connaissances et comment les appliquer à notre jeu. Nous allons créer l'état du jeu et manipuler des carrés. Ainsi, lorsque nous cliquons dessus, l'état sera mis à jour d'une manière ou d'une autre. On se voit là-bas. 46. 07 Créer un état de plateau de jeu: Hé. Dans la dernière vidéo, nous avons parlé de l'interactivité, l'État, de ce qu'est l'État, façon dont il peut nous aider. Dans cette vidéo, nous pouvons continuer avec l'état, mais cette fois, nous l' appliquerons à notre jeu. Par rapport à la vidéo précédente, quelques modifications ont été apportées ici. Je vais juste faire référence à ces modifications très rapidement, et la configuration d'eslintrc est obsolète. Je n'ai mis aucun rôle vars inutilisé en guise d'avertissement. En fait, ajoutons un autre commit pour cela. Les barres d'attribution réduisent le réchauffement. OK, ça va très bien faire l'affaire. Passons maintenant à l'interactivité. Donc, si nous passons au plateau, nous allons créer l'état de notre plateau, qui représentera essentiellement notre plateau de jeu. Mais la question qui se pose est comment allons-nous nous y prendre ? Si vous vous en souvenez, j'ai déjà dit que ce serait un tableau. C'est pourquoi nous avons neuf éléments ici et ils commencent tous par zéro. Ils commencent par zéro, pas tous. Donc, je vais ouvrir la peinture ici. Je vais vous dire comment exactement nous pouvons représenter l'état du jeu avec un tableau. Il s'agira d'un ensemble de neuf éléments. Par défaut, il s'agira donc d'un tableau vide de neuf éléments. Et par défaut, chaque élément sera nul, d'accord. Donc, par défaut, nous aurons initialement un tableau de neuf éléments, chaque élément sera nul. Ensuite, quand on va cliquer sur un carré. Nos carrés seront donc représentés par des index à l'intérieur de ce tableau. Le premier carré aura l'indice zéro, deuxième carré aura l'indice un, deux et ainsi de suite. Lorsque nous cliquons sur un carré, disons que nous cliquons sur un carré dont l'index est un, sa valeur passe de zéro à x ou à zéro en fonction de la personne qui a cliqué sur ce carré. Et c'est ainsi que nous allons gérer l'État. Donc, finalement, nous aurons un tableau de neuf éléments, chaque élément pouvant être soit nul si le carré n' est pas cliqué, soit x, soit zéro si le carré a été cliqué. Allons-y et dans le tableau, nous allons d'abord importer useState depuis React. À l'intérieur du tableau, nous allons créer un nouvel état, que nous pouvons nommer des carrés. Définissez les carrés, ce sera UseState. Maintenant, dans un premier temps, nous devons créer un tableau de neuf éléments et chaque élément sera nul par défaut. Pour cela, nous pouvons utiliser simplement du JavaScript ici, nous ne pouvons donc pas appeler un constructeur de tableau avec neuf comme longueur de tableau. Ensuite, nous allons appeler la méthode de remplissage par points, et nous allons remplir le tableau avec des valeurs nulles. Finalement, il produira un tableau de neuf éléments où chaque élément est nul. Maintenant, comment pouvons-nous réellement associer chaque carré à chaque composant qui représente un carré ? heure actuelle, nous passons 0,1, 2, 3 et 4. Donc, au lieu de cela, nous allons passer à zéro. Donc, puisque notre état est carré, ce sera toujours un tableau qui aura saisi le premier élément de ce tableau. Donc, pour le deuxième carré, nous pouvons saisir le deuxième élément et ainsi de suite. Nous devons le faire pour chaque carré. Allons-y et faisons-le pour chaque carré. Nous l'enregistrons donc. Nous revenons à l'application. Ce site n'est pas accessible. C'est parce que je n'ai pas fait le tour du serveur de développement. Donc, npm run dev. Je reviens ici et maintenant nous pouvons voir que nos places sont vides. Eh bien, c'est normal car nous avons une valeur nulle. Nous émettons des nuls. Et si vous vous en souvenez, si nous essayons d'afficher la valeur null, elle ne sera pas évaluée. Cela n'aboutira à rien et au HTML. Maintenant, que pouvons-nous réellement faire ? Vous pouvez voir que nous devons mettre à jour l'état d'une manière ou d'une autre, mettre à jour les carrés, mettre à jour l'état lorsque nous cliquons sur un carré, comment pouvons-nous faire cela ? Nous sommes donc restés à l'intérieur du tableau, mais nous avons toute la logique d'une composante carrée à l'intérieur d'une composante carrée. Ce que nous pouvons faire, c'est utiliser des accessoires. Nous pouvons donc définir ici une fonction qui gérera la logique, et nous pouvons transmettre cette fonction en tant qu' accessoire à un composant carré. Encore une fois, nous ne faisons que des accessoires pour transmettre certaines données, certaines informations aux composants. Alors, qu' allons-nous faire ? Nous allons créer une nouvelle fonction appelée handle square click. Cette fonction recevra un argument. Nous allons appeler cette fonction avec une position d'argument. Ce sera 0,1,2,3,4,5,6,7 et 8 sera l'indice du carré. Et dans le cadre de cette fonction, nous allons faire quelque chose. Pour l'instant, nous allons simplement le laisser vide. Donc, comme je vous l'ai dit, nous allons utiliser des invites pour transmettre des données à Square. Ce que nous voulons faire lorsque nous cliquons sur ce carré, est le clic carré sur la poignée qui sera annulé. Alors, que pouvons-nous faire ? Nous pouvons transmettre OnClick ou Squared Click quel que soit le nom que vous avez donné à cet accessoire. Appelons-le simplement OnClick. Et pour cet accessoire OnClick, nous allons passer et créer un clic carré. Mais le problème est que, puisque nous passons cette poignée au carré, cliquez ici, et si nous la transmettons de cette manière, alors nous allons saisir ce bouton OnClick ici à l'intérieur du carré, et nous devrons appeler cette fonction dans un carré et transmettre la position comme argument, car le clic sur les carrés reçoit l' la position comme argument, car le argument de position. Donc, lorsque nous appelons cette fonction, nous devons transmettre cette position. Mais le problème, c'est que Square n'a pas vraiment besoin de savoir quoi que ce soit à ce sujet. Que voulons-nous faire idéalement ? Nous voulons simplement récupérer cette fonction OnClick ici, et pour l'attribut OnClick, nous voulons transmettre cette fonction comme ça. Et Square ne fera aucune logique à ce sujet. Tout sera géré ici à bord. Donc, pour ce faire, ce que nous pouvons faire pour l'accessoire OnClick ici, nous pouvons transmettre une fonction, et cette fonction appellera HandleSquareClick avec la position dont nous avons besoin. Donc, finalement, ça ressemble à quelque chose comme ça. Nous pouvons même simplifier cela et supprimer le corps de la fonction. Maintenant, ça a l'air plus concis et ça ressemble à ça. Pourquoi devons-nous transmettre une fonction qui appelle une autre fonction ? Pourquoi pouvons-nous l'appeler ainsi ? Eh bien, le problème est que, comme vous vous en souvenez, lorsque les composants sont montés sur la page, le JavaScript contenu dans le composant s'exécute, et avec cette syntaxe, nous allons utiliser du JavaScript ligne par ligne, et dès que JavaScript utilise de la lumière, nous verrons que nous appelons simplement cette fonction ici sur cette ligne. Donc, ce qu'il va faire, c'est appeler cette fonction write tout de suite. Et quel que soit le dysfonctionnement qui nous sera renvoyé, la valeur de OnClick prop sera transmise ici, puisque notre fonction ne renvoie rien, elle ne sera pas définie, et finalement OnClick here inside square ne sera pas définie. se passera rien. Nous aurons cette fonction appelée write straight et undefined à la fin. Ce n'est pas exactement ce que nous voulons. Tout d'abord, le gestionnaire d'événements est une fonction. C'est pourquoi nous transmettons une fonction, pas autre chose. Nous transmettons donc une fonction qui appelle rapidement les poignées avec les arguments dont nous avons besoin. Eh bien, comme vous pouvez le voir, nous devons le faire pour chaque case ici, juste comme ça et passer position différente, mais vous pouvez remarquer qu' il y a une petite répétition ici. Nous avons beaucoup de choses que nous pouvons simplifier ici. Ainsi, au lieu de cadrer des valeurs, des carrés, puis l'index du tableau, puis OnClick, et de répéter que les poignées cliquent tout le temps, nous pouvons simplifier cette fonction. Nous pouvons simplifier cette syntaxe en utilisant une autre fonction. Alors, que pouvons-nous faire ici pour éviter cette répétition ? Ici, à l'intérieur du tableau, nous pouvons créer une autre fonction que nous pouvons appeler quelque chose comme un carré de rendu. Ce RenderSquare reçoit à nouveau la position qui sera un index carré et à l'intérieur de cette fonction, nous pouvons ensuite renvoyer le balisage JSX. Nous allons simplement copier ici. À partir de RenderSquare, nous pouvons désormais renvoyer le carré. Ainsi, au lieu de zéro, nous allons transmettre la position des carrés et HandleSquareClick. Au lieu de zéro, nous allons passer la position. Finalement, quelque chose comme ça. Maintenant, dans JSX, nous utilisons des crochets pour y interpoler du JavaScript. Comme nous pouvons interpoler des variables ici, qui sont des expressions JavaScript exactement de la même manière, nous pouvons appeler des fonctions ici, car les fonctions font également partie des expressions JavaScript. Au lieu d'écrire des carrés tous comme ça, que pouvons-nous faire ? Nous pouvons simplement ouvrir des crochets, appeler RenderSquare et transmettre un indice nul à l'intérieur. Dès que le composant rebondit, cette fonction sera appelée avec zéro comme argument, qui sera la position à l'intérieur de celle-ci. Il renvoie le balisage JSX et ce balisage JSX sera interpolé à l'endroit où cette fonction a bien été appelée, en gros ici. Exactement la même chose que nous allons faire pour le reste de nos carrés. Je vais juste le copier deux fois. Je l'enlève parce que nous n'en avions plus besoin et je ferai exactement la même chose pour le reste de nos carrés, donc 3, 4, 5, 6, 7, 8. Encore une fois, nous appelons la fonction lorsque le composant est monté, cette fonction renvoie le balisage JSX, et ce balisage JSX sera inséré à l'endroit où cette fonction est appelée. Si vous venez de référencer cette fonction comme ça, rien ne se passera. Si j'y retourne, voyons ce qui se passe. Eh bien, nous voyons des choses étranges ici et si nous essayons de voir, nous n'avons que deux carrés ici. Ce que nous faisons actuellement, c'est essentiellement essayer d'afficher la fonction elle-même. Pas ce que la fonction renvoie mais bien la signature de la fonction et réagissez. Cela ne fonctionne pas de cette façon. Si vous essayez d'afficher les objets tels qu'ils sont, vous ne pourrez pas le faire. Vous devez d'abord les convertir en chaînes de caractères, mais ce n' est pas ce que nous allons faire pour le moment. C'est un peu avancé et nous y reviendrons à l'avenir. On appelle cette fonction, on lui passe un argument et on vérifie que tout fonctionne. En gros, nous avons légèrement remanié notre composant, mais il fait exactement la même chose. Il affiche la valeur à l' indice que nous spécifions ici, la valeur de notre tableau de carrés, qui est l'état. Dans HandleSquareClick, nous devons faire preuve de logique ici, donc d'une certaine logique pour afficher les carrés d'une manière ou d'une autre. Pour mettre à jour l'état du carré, nous devons appeler la fonction de mise à jour de l'état dans notre cas lors de l'indexation de ses carrés. C'est exactement ce que nous allons faire. Étant donné que notre état est un tableau qui sera modifié au fil du temps et notre nouvel état de tableau que nous aurons calculé doit être calculé à partir de l'état actuel, nous allons utiliser la version de rappel de set state. Je vais passer le rappel ici et le premier argument sera l'état carré pour le moment. Je vais le nommer CurrentSquares et nous devons d'une manière ou d'une autre manipuler l'état de CurrentSquares et obtenir un nouvel état de carrés avec des valeurs mises à jour. Un point que je n'ai pas mentionné dans la vidéo précédente est que nous ne pouvons pas muter une variable d'état. Qu'est-ce que je veux dire par là ? Si nous utilisons useState et que nous essayons de prendre ces carrés et que nous essayons de faire quelque chose comme ça, carrés à une certaine position sont égaux à quelque chose. Ce que nous faisons ici, c'est manipuler directement cet état au lieu d'utiliser cette fonction de mise à jour d'état, cela ne fonctionnera pas. Ceci est interdit de cette manière, l'état ne sera pas mis à jour. Dans React, cela ne fonctionne pas de cette façon. Nous devons appeler la fonction de mise à jour de l' état tout le temps pour ce faire, donc encore une fois, cela ne fonctionnera pas. Nous appelons SetSquares et dans Setsquares, nous avons également CurrentSquares qui représente l'état à la fois. Si nous essayons à nouveau de modifier l'état directement ici, cela ne fonctionnera pas. Cela ne fonctionnera tout simplement pas. Ce n'est pas ainsi que fonctionne React. Nous devons appeler la fonction et renvoyer une nouvelle valeur. React ne consiste pas à muter directement des valeurs. React consiste à renvoyer nouvelles valeurs si cela vous convient. À partir des setSquares, nous devons renvoyer une nouvelle valeur. Ce que nous pouvons faire pour parcourir tous nos carrés et les mettre à jour d'une manière ou d'une autre, nous pouvons utiliser la méthode Array.map et la méthode Array.map ne modifie pas l'état, mais renvoie une nouvelle valeur de tableau. C'est pourquoi il est possible de le faire en toute sécurité. Un retour CurrentSquares.map, nous allons donc parcourir notre état carré en boucle. Notre premier argument sera la valeur que nous parcourons en boucle pour le moment, donc ce sera notre SquareValue. Ensuite, nous avons l'indice du carré. Disons que c'est juste pos. Comme nous avons déjà une position dans cette étendue de fonction, si nous essayons de la nommer position, nous avons une collision de variables. On se contente de rester au courant. Chaque fois que je reviens du fichier .map pour l'élément actuel, il associera une nouvelle valeur à cet élément. Ici, la logique sera assez simple. La position que nous transmettons à cette fonction est la position sur laquelle nous cliquons essentiellement. Pour ne pas nous embrouiller, renommons-le en position cliquée et ici, indexé dans Array.map, nous allons appeler position. Nous allons déterminer si la position sur laquelle vous avez cliqué est égale à la position du carré que vous regardez Dans ce cas, nous allons renvoyer X pour l'instant à partir du fichier .map. Sinon, si le carré qui tournera en boucle pour le moment n'est pas celui sur lequel nous avons cliqué, nous renverrons simplement la même valeur carrée. Maintenant, sauvegardons-le, il semble que lorsqu'il est formaté peut être un peu confus, car nous avons fonction qui appelle une fonction et une fonction interne, nous avons un rappel, il suffit de s'y habituer, pour revenir à l'application. Essayons maintenant de cliquer sur un carré. Je clique au milieu et boum, rien ne se passe. Pourquoi ça ? Essayons dans le journal de la console l'état carré ici. Voyons ce que nous avons. Nous avons un tableau de taux nuls et si je clique, rien ne se passe réellement. Voyons ce qui ne va pas ici. Le problème, c'est que vous pouvez voir le composant carré n' a pas été enregistré. C'est parce que, quoi que je vienne d'écrire ici, cela n'a pas été enregistré, donc les modifications n'ont pas été validées. Je l'enregistre et maintenant ça devrait fonctionner. Je clique sur le carré et vous voyez maintenant que j' ai X ici et si vous voyez ici, l'état a été mis à jour. Maintenant que j'ai cliqué sur un carré avec l'index 4, 0, 1, 2, 3, 4, nous avons cliqué sur ce carré et, dans ce tableau, nous avons mis à jour l'élément à l'index 5, et nous avons défini sa valeur sur X, ce qui correspond exactement à ce dont nous avons besoin. Si nous continuons et que nous cliquons sur tous ces carrés, vous verrez que tous les carrés seront remplis d'accès, qui est exactement ce que nous voulions et nous voyons à nouveau tous ces journaux de console tout le temps. Parce que depuis que nous avons mis à jour cet état, composant réaffiche à nouveau la logique au sein des exécutions et nous voyons le journal de la console chaque fois que la logique est réexécutée. Génial. Quelque chose comme ça, nous sommes capables de gérer notre État. Pour l'instant, je pense que cela suffira. Dans la vidéo suivante, nous allons présenter nos joueurs. Nous aurons en fait le joueur actuel, ce qui nous permettra de différencier qui cliquera ensuite sur cette case. Ce sera soit X, soit zéro, donc pour l'instant, vous pouvez voir que nous n'avons que des X, qui n'est pas exactement ce que je recherche. Dans la vidéo suivante, nous allons aborder cette question. Lorsque nous cliquons sur ce carré, ce sera soit X, soit zéro. On se voit là-bas. 47. 08 Ajouter des joueurs X et O: Bonjour. Dans la vidéo précédente , nous avons parlé de ces carrés d'état et nous avons réussi à placer X l'intérieur du carré lorsque nous cliquons dessus. Dans cette vidéo, nous allons ajouter plus de fonctionnalités. Ainsi, lorsque nous cliquons sur le carré, nous pouvons afficher soit x, soit zéro. En d'autres termes, nous aurons un joueur. Avant d' introduire de nouvelles modifications, de nombreuses modifications ont été apportées jusqu'à présent par rapport à la vidéo précédente. Nous avons ajouté cette fonctionnalité lorsque nous cliquons sur le carré, nous affichons X à l'intérieur. Eh bien, allons-y et validons ces modifications. Je vais juste taper git add. et je vais nommer ce message de validation appelé, disons afficher X lorsque vous cliquez sur un carré. Redémarrons le serveur. Génial. Maintenant, allons-y et ajoutons essentiellement une fonctionnalité de lecteur. Le joueur est quelque chose qui changera au cours du cycle des composants. Cela signifie que ce sera un État. Ce que nous allons introduire, c'est un nouvel État, et cet État sera le joueur. Cependant, nous ne ferons aucune complication à ce sujet. Ce ne sera qu'une simple valeur booléenne, qui nous indiquera qui sera le prochain joueur. Nous allons le nommer quelque chose comme IsXNext. Si c'est vrai, nous mettons l'état à x, sinon il sera nul, aussi simple que cela. À l'intérieur du tableau, nous pouvons créer un nouvel état et le renommer ISXNext, et les fonctions de mise à jour définissent ISXNext, et par défaut, ce sera faux. Comme nous avons déjà peu près tout ce dont nous avons besoin, nous allons simplement modifier cette ligne 12. Ici, nous retournons x. Il est codé en dur ici. Mais au lieu de cela, nous allons simplement introduire une autre condition simple, sinon. Nous allons demander. Si c'est XNext, alors la valeur que nous associerons au carré cliqué sera X, sinon, elle sera nulle. Juste après avoir mis à jour l'état de SetSquare, nous allons également mettre à jour setSxNext, nous allons l'activer car il s'agit d'un booléen. Je vais appeler SetisXNext, et comme nous devons l'activer, et comme cela se fera dans l'ordre, nous devons connaître la bascule booléenne actuelle, qui est vraie ou fausse pour le moment, et nous allons simplement l'inverser. Nous allons à nouveau utiliser la version de rappel de set state updater. Nous allons appuyer sur Callback. CurrentIsXNext ou simplifions-nous les choses. Nommez-le simplement comme P ou prev pour le précédent, ou allons-y sans aucune complication, que soit CurrentIsXNext. Pour changer cette valeur booléenne, il suffit d'appliquer la négation en face, comme ça, et c'est tout. Ce qu'il fera, il prendra le stade booléen actuel. Ce sera vrai ou faux, si c'est faux, nous appliquons la négation au faux, cela deviendra vrai, et si c'est vrai, nous appliquons la négation, cela deviendra faux. En gros, inversez le booléen et nous le faisons après avoir mis à jour l'état des carrés définis. Nous le faisons, nous retournons à notre application. Nous cliquons, et maintenant nous avons d'abord zéro. Maintenant, nous cliquons plus loin, nous avons X et nous passons à autre chose, et vous pouvez voir qu'il est basculé et que tout fonctionne comme prévu. Cependant, si je clique à nouveau sur le carré, vous pouvez voir quelque chose jeté ici. Le problème, c'est que lorsque nous cliquons sur le carré, la logique s'exécute à nouveau et elle met à jour le carré à l'index à la position sur laquelle nous avons cliqué. Que voulons-nous ajouter ici, une autre condition. Si le carré a déjà une valeur, s'il n'est pas nul, alors nous n'appliquons tout simplement pas cette logique. Voici les poignées intérieures supérieures avec un clic carré, nous pouvons vous demander si les carrés sont déjà corrects ClickedPosition, la valeur est vraie. valeur vraie signifie qu'elle n'est pas nulle. Notre valeur carrée peut être nulle, X ou zéro. Si cette valeur est vraie, cela signifie qu'elle n'est pas nulle. Dans ce cas, nous revenons simplement de cette fonction. Le mot clé return quitte la fonction et ne va pas plus loin. Nous le sauvegardons. Voyons voir, le nôtre va ressembler à. Je clique sur des carrés et j'essaie de cliquer à nouveau sur le carré et rien ne se passe car encore une fois, il vérifie la condition et quitte la fonction. Plutôt cool. Quelque chose comme ça, nous avons ajouté un joueur à notre jeu. Notre prochaine étape sera d' afficher le message en haut, qui sera le prochain joueur. Cependant, nous allons le faire dans la vidéo suivante. Pour l'instant, nous allons valider nos modifications actuelles. Je vais nommer ce commit. Ce que nous avons fait, passons en revue. Nous avons essentiellement présenté un joueur ici. A fait découvrir le jeu à un joueur. Lorsque vous cliquez sur un carré, affichez x ou zéro. Nous nous y engageons, nous déployons. Je l'ai mal orthographié. Appuyez sur Origin Master. Je l'ai fait uniquement parce que j'ai fait quelque chose dans les coulisses lorsque j'ai éteint la vidéo. Excusez-moi, vous ne devriez pas avoir ça. Je vais juste utiliser le premier drapeau comme ça, et maintenant tout est sur GitHub. Ne vous inquiétez pas de cette partie, vous ne l'aurez pas. Génial. À bientôt dans la vidéo suivante. 48. 09 Montrez les messages des joueurs et des gagnants: Hé. Dans la vidéo précédente, nous avons réussi à ajouter des fonctionnalités pour les joueurs à notre jeu. Dans cette vidéo, nous allons poursuivre et afficher le message ici en haut de la grille, qui indique que le joueur est le suivant et que si nous avons un gagnant, nous afficherons le gagnant. Dans cette vidéo, nous aborderons tout cela ainsi que le calcul du gagnant. Tout d'abord, que voulons-nous faire ? Nous devons décider exactement ce que nous voulons mettre dans le message. Le joueur suivant est x ou zéro. Eh bien, nous voulons le faire dans App jsx. Ici, juste un simple tag H2 qui indique que le joueur suivant est pour l'instant quelqu'un. Si j'y retourne, ça ressemble à ça pour le moment. Cependant, nous avons déjà un problème. Ce que nous devons utiliser ici pour afficher qui sera le prochain joueur. Comme vous pouvez le constater, toute la logique et l'état se trouvent à l'intérieur du composant de la carte. Cela signifie qu'il n'est pas accessible au monde extérieur. Le seul composant qui connaît carrés, tout l' état et toute cette logique est le composant de la carte lui-même et vous pouvez transmettre toutes les données dont vous avez besoin de ce composant à ses composants enfants. Par exemple, comme nous le faisons avec Square. Si nous voulons accéder à cet état ou à ces données en dehors du bord, c'est impossible. Deux options s'offrent à nous. La première option consiste à déplacer le joueur suivant qui envoie un message à l'intérieur du composant du plateau. Peut-être le mettre ici. Nous avons toutes les données dont nous avons besoin dans le cadre de ce message afin de pouvoir en tirer quelque chose et éventuellement l'afficher. Nous avons le joueur suivant. Cette ou cette deuxième option consiste à déplacer une partie de cette logique vers le composant parent. Par exemple, au composant de l'application, puis transmettez les informations requises au composant de la carte via accessoires, puis mettez en pause autres informations nécessaires au message ici. Si nous essayons de le visualiser, si nous ouvrons la peinture, nous avons une image comme celle-ci. Nous avons un composant d'application qui affiche composant du tableau et également dans l'application, nous affichons le message. Il ne fait pas partie de l'application pour le moment, mais il fait toujours partie de l'application et non du tableau. L'état est géré ici à l'intérieur du composant de la carte. Comme le message ne fait pas partie du tableau, il n'a aucun rapport avec celui-ci. Il vit sous la forme d'une feuille séparée, signifie qu'il est impossible d' accéder à ce qui se passe à bord. La première option que j'ai mentionnée est d'intégrer le message composant du forum ici. Si nous allons sur le forum et que nous mettons un message ici, nous pouvons accéder aux données, afin de les gérer ici. C'est la première option, mais nous n'allons pas le faire, nous voulons que le message fasse partie du composant de l'application. La deuxième option consiste à augmenter la logique, augmenter l'état du composant parent, à savoir l'application, puis à transmettre les données requises aux composants correspondants à l'aide d'accessoires. La logique sera intégrée à l' application, puis nous transmettrons des données au tableau via des accessoires, puis nous transmettrons d'autres données au message, utilisant à nouveau des accessoires à l'avenir. Pour l'instant, ce n'est pas un composant, mais l'idée est la même. Nous partageons des données dans le cadre de la composante des brevets. Nous ouvrons le tableau et à partir du tableau, nous allons prendre l'état et le déplacer vers le composant de l'application. Nous allons faire la même chose avec l'importation. Nous le mettrons dans l'application et gérerons également le clic carré. À partir de maintenant, il sera actif et sera géré dans le composant de l'application. Je le copie ici. Je l'ai mis dans l' application. Juste comme ça. Nous enregistrons le tableau mais vous pouvez voir qu'à l'intérieur du tableau, nous n'avons plus de poignée Square Click. Si nous survolons la poignée, la racine carrée n'est pas définie car elle n'a jamais été créée nulle part ici, même pour les carrés. Le composant de la carte possède désormais ces valeurs non définies. Eh bien, cela signifie que nous devons y accéder d' une manière ou d'une autre et nous le ferons à l'aide d'accessoires. Comme nous avons maintenant des carrés et gérons les carrés, cliquez ici dans l'application, nous pouvons les transmettre au composant du tableau avec des accessoires. Je vais juste passer des carrés ici comme ça et gérer les clics carrés exactement de la même manière. Maintenant, à l'intérieur du tableau, je peux appliquer un lien de destruction saisir des carrés et gérer le clic carré. Maintenant, si j'enregistre les deux fichiers, j'ouvre à nouveau mon application. Tout fonctionne comme avant, mais maintenant l'état est intégré à l'application, et toutes les données requises sont transmises aux composants de la carte via des accessoires. Génial. Cela signifie que le message que nous affichons dans le composant de l'application a désormais accès à l'état. Nous pouvons afficher le message. Notre logique sera assez simple. Je vais créer une nouvelle variable ici, et je vais vous expliquer pourquoi. Nous appelons cela un message ou disons un message de statut. Ici, nous allons faire IsXNext, nous retournons une chaîne x, sinon, renverrons une chaîne nulle et un message d' état puisqu' elle est disponible, nous l' interpolerons en JavaScript. Nous allons dire que le joueur suivant est {Message de statut}, ou disons qu'au lieu de message de statut, appelons-le joueur suivant. Le joueur suivant est le joueur suivant. Nous le sauvegardons et joueur suivant est zéro. Génial. Nous cliquons. En effet, c'était zéro, et vous voyez que cela a changé, que ça continue et que tout fonctionne comme prévu. Cependant, vous vous demandez peut-être pourquoi affichons-nous ici en tant que variable ? Pourquoi ne créons-nous pas huit États pour cela, peut-être ? Le fait est que ce joueur suivant est ce que l' on appelle un état dérivé ou calculé, et pourquoi ne pas créer un autre état pour celui-ci en utilisant l'état d'utilisation ? L'état dérivé ou calculé est une valeur dérivée de l'état le plus récent. Comme nous avons ISXNext comme état, et nous savons que chaque fois que le composant s'exécute, la logique qu'il contient s'exécute, qui signifie que cette ligne de code sera réexécutée à chaque nouveau rendu du composant. Le fait est que lorsque le composant s'affiche à nouveau, l'état est mis à jour. Cela signifie que pour le nouveau rendu actuel, l'état que nous avons ici sera à jour. C'est le dernier État que nous ayons. Comme cette logique est réexécutée, elle utilisera toujours le dernier état, ici isXNext. C'est pourquoi nous n'avons pas vraiment besoin de créer un autre État pour cela. Nous créons simplement une valeur dérivée de la dernière valeur d'état. Eh bien, cela peut sembler un peu compliqué, mais si vous y réfléchissez, cela n'a rien de sophistiqué. Nous avons déjà une certaine valeur qui change et nous en tirons quelque chose. Rien de plus. C'est pourquoi nous n'avons pas besoin de créer un autre état d'utilisation, cela n'a aucun sens. Nous avons maintenant le message qui indique qui sera le prochain joueur, mais allons plus loin et affichons le gagnant. Chaque fois que nous avons un gagnant, nous aimerions l'afficher. Le gagnant est celui-ci , le joueur suivant X. Si nous revenons à l'invité qui vous a été communiqué au début, et si vous recherchez calculatewinner.js à l'intérieur, vous avez une fonction  : calculer le gagnant. Copions cette fonction. Revenons à notre application et à notre source interne, créons un nouveau fichier et appelons-le winner.js. Si vous l'avez remarqué, nous n'avons pas nommé ce fichier avec l'extension dot.js6 car ce fichier ne possède aucun balisage js6. Il s'agit simplement d'un JavaScript normal. À partir de là, à partir du fichier js, nous allons exporter la fonction calculatewinner. Pour ce faire, il utilise notre tableau de carrés, qui, encore une fois, si vous vous en souvenez, est un tableau dans lequel nous stockons nos valeurs carrées : null, X ou zéros, et à partir de ce tableau, il calcule le gagnant. S'il n'y a pas de gagnant pour les carrés de coton, la valeur Null est renvoyée. S'il y a un gagnant, il renvoie X ou zéro, ce qui a lieu à la ligne 15. Comment fonctionne-t-il ? Comment fonctionne la fonction ? Ici, nous avons défini un tableau de lignes, qui représente essentiellement toutes les combinaisons gagnantes possibles dans le jeu de tic-tac-toe. Par exemple, 0, un et 2 sont la combinaison 0, 1 et 2, donc si vous avez des X sur une ligne. Vous pouvez vérifier toutes les combinaisons possibles que vous voyez ici. Encore une fois, c'est juste un ensemble de toutes les combinaisons gagnantes possibles. Alors, que faisons-nous ici ? Nous utilisons une boucle simple. Et nous les parcourons en boucle. Nous passons en revue chaque combinaison gagnante. Je dis très simple. Nous comparons notre tableau de carrés actuel à la combinaison gagnante. Si nous avons cette combinaison gagnante dans notre état de carrés et dans notre tableau de carrés, nous renvoyons simplement le gagnant. Nous utilisons ici la déstructuration des tableaux sur la ligne 13. Les lignes situées à la position des yeux représentent ce tableau. À partir de ce tableau, nous encapsulons les premier, deuxième et troisième éléments et les nommons a, b c. Par exemple, pour ce tableau , a sera égal à zéro, b à un, deux à c. Ensuite, en utilisant cette logique if, nous voyons s'il y a un gagnant. Si vous voulez vraiment savoir comment cela fonctionne, essayez simplement de mettre les valeurs dans cette formule, disons vous-même. Un peu de logique ici. Nous revenons à l'application et nous pouvons le faire en exécutant simplement cette fonction dans le composant de l' application. Puisque nous devons passer l'état carré et calculer, le gagnant produira le gagnant. Nous n'avons pas besoin de créer un autre État. Cette variable gagnante que nous avons sera, encore une fois, l'état dérivé de l'état carré. Je vais continuer ici, peut-être en haut, je vais créer une variable pour les gagnants. Ce que je vais faire, c'est importer CalculateWinner. Cela s'appelle export, donc je l'importe avec des crochets à partir du gagnant. J'appelle cette fonction ici et à l'intérieur je passe notre état carré. J'aurai un gagnant ici. Essayons de l'enregistrer et de voir ce que nous avons. J'ouvre la console. Dans la console, j'ai zéro parce que, eh bien, nous n'avons aucun gagnant. Quand je joue au jeu, nul, nul. Créons un gagnant. Si je clique ici maintenant, j'aurai la combinaison gagnante, et vous voyez qu'elle produit zéro ici parce que maintenant, eh bien, nous avons un gagnant, qui est zéro. Dans ce cas, nous devons afficher. Allons-y. Nous avons déjà indiqué que le joueur suivant est le joueur suivant, mais nous allons légèrement modifier ce message. Ou peut-être que nous n'y toucherons pas. Ici, nous allons créer une autre variable que nous appellerons message d'état à ce stade. Ici, nous allons demander si nous avons un gagnant, puis nous allons dire que gagnant est le gagnant, la variable que nous avons. Cependant, nous devons utiliser un modèle de chaîne ici pour appliquer l'interpolation de chaîne. Je vais transformer cette chaîne en modèle de chaîne en remplaçant les guillemets singuliers par des guillemets inverses. Cela me permettra d' utiliser l'interpolation en utilisant le signe du dollar et des crochets frisés, sorte que le gagnant soit le gagnant. Sinon, si nous n'avons aucun gagnant, nous utiliserons message du joueur suivant que nous avons déjà reçu. Au lieu de montrer que le joueur suivant est le joueur suivant, cette fois, nous allons simplement afficher un message de statut. Je l'ai mal orthographié. Ce sera un message d'état. Maintenant, voyons ce que nous avons ici ? Nous avons donc juste le joueur suivant qui est le joueur suivant. Je vois. Au lieu de cela, nous devons dire que le joueur suivant est le prochain joueur. Si on y retourne, le joueur suivant est zéro. Jouons au jeu. Créons un gagnant. Maintenant, nous voyons le message : le gagnant est X. Super, car nous avons un gagnant. Cool. Cependant, voici un problème. Si vous essayez de jouer au jeu, si vous continuez, nous pouvons toujours cliquer sur des carrés, mais cela peut être facilement corrigé. Nous avons déjà la logique de quitter la fonction si nous cliquons sur le même carré deux fois ou trois fois plusieurs fois. Ici, nous allons simplement étendre cette condition et nous allons le dire. Si nous cliquons deux fois sur la même case ou si nous avons un gagnant, nous allons simplement quitter la fonction. C'est aussi simple que ça. Essayons. J'ai joué au jeu. Nous avons le gagnant maintenant. Si je clique sur l'un des carrés, aucune logique ne s'exécutera parce que nous sortons ici parce que cela produit peut-être faux, peut-être vrai, peu importe, mais ici c'est définitivement vrai. Nous avons la condition de sortie. Juste comme ça, nous avons presque terminé notre jeu. La seule fonctionnalité que nous ajouterons ici sera l'historique du jeu. Nous serons en mesure de naviguer dans l'historique du jeu. Nous allons suivre les mouvements que nous avons effectués et nous pourrons nous déplacer entre eux, mais nous allons gérer cela dans la prochaine vidéo. Pour l'instant, ces modifications sont suffisantes. Transmettons-les dans Git car nous allons introduire beaucoup de choses différentes ici. Je vais ouvrir le terminal, tout ajouter à la scène, et je vais nommer toutes ces modifications sous forme de vue d'ensemble. Tout d'abord, nous avons fait sortir l'État du bord. Il est apparu dans le composant de l'application , puis nous avons affiché le gagnant. Eh bien, c'est beaucoup. Nous allons le dire, augmenter le composant État de l' application et afficher le message d' état à l'utilisateur. Aucun message de statut n'est envoyé à l' utilisateur, calculez le gagnant. Ne compliquons pas les messages. Je pense que cela suffira. Finalement, dirigez le déploiement de tout sur GitHub. Sur cette note profonde, ajoutons cette vidéo. Je te verrai dans le prochain. 49. 10 Affichage du dessin du jeu: Bonjour. Dans cette vidéo, nous continuerons à parler, en fait, des messages que nous affichons à l'utilisateur ici. Le seul point que nous avons oublié dans la vidéo précédente où nous avons affiché un message de statut est le match nul. Et si nous terminons la partie mais que nous n'avons finalement aucun gagnant ? Dans ce cas, nous aimerions montrer à l'utilisateur un autre message indiquant que, disons, x et zéro sont égaux, il y a donc un match nul. Pour ce faire, nous devons appliquer plus de logique ici. Mais nous allons le faire dans un composant que nous allons créer spécifiquement pour le message de statut. À l'intérieur des composants, je vais créer un nouveau fichier, que je vais appeler message d'état. Ce sera le nouveau composant. À partir de là, je vais créer un composant de message d'état d'exportation. Message d'état. Juste comme ça pour l'instant, ce sera un div, qui dit bonjour. De plus, je dois l'exporter d'ici. Ensuite, dans App JSX, je vais importer un carré à partir de composants carrés. Oups, excusez-moi, ce n'est pas un message de statut carré. Ensuite, ici, au lieu du message d'état H2, nous allons afficher le composant du message d' état comme ça. Nous supprimons donc cela. Maintenant, le message d'état est censé se trouver quelque part dans le composant du message d'état. Cependant, nous n' avons aucune donnée ici, c'est pourquoi nous allons à nouveau utiliser des accessoires pour transmettre toutes les données requises au composant du message d'état. Nous avons la couche suivante et le message d'état ici, qui vont le déplacer directement vers le composant de message d' état. Nous n'avons pas ISXNext, et nous n'avons aucun gagnant ici. C'est pourquoi nous nous attendons à ce que le gagnant soit dépassé et qu' ISXNext soit dépassé. Le calcul du gagnant se fait ici. Cependant, le fait est que nous devons également détecter quand nous n' avons pas de cases vides et quand nous n'avons pas de gagnant ? Nous devons écrire cette logique. Pour afficher le tirage au sort, nous devons savoir si toutes les cases sont occupées par quelque chose et si nous n'avons toujours pas de gagnant Pour obtenir cette valeur, cette valeur booléenne qui indique que nous devons à nouveau accéder à l'état de nos cases. Nous en aurons également besoin dans le message d'état. Nous allons le transmettre ici aussi. Nous allons avoir le gagnant, ISXNext et Squares restent ici. Faites passer tout pour des accessoires. Donc, lorsque je génère un composant de message d' état, je vais passer le gagnant, je vais passer IsXNext et je vais passer des carrés. Super. Maintenant, nous allons utiliser ce que l' on appelle le rendu conditionnel. En fait, vous n'êtes pas au courant de cela, mais nous avons déjà appliqué rendu conditionnel ici, aux lignes 3 à 5. Le rendu conditionnel affiche simplement quelque chose en fonction de la condition. Par exemple, si j'ouvre des crochets dans JSX et que j' écris, disons, condition simple, cinq est inférieur à 10. Dans ce cas, veuillez afficher div, qui indique cinq moins 10. Sinon, affichez un autre div qui dit autre chose. Ce que vous voyez ici s'appelle un rendu conditionnel. En gros, c'est exactement ce que nous faisons ici. Au lieu de simplement utiliser des chaînes ici, nous pouvons écrire du balisage JSX, comme ça, et tout finit par ressembler à ceci. Mais nous n'avons pas besoin de balisage JSX, nous avons besoin de chaînes simples, donc nous le gardons tel quel. Maintenant, qu'en est-il du dessin ? Quelle est la logique d'affichage du tirage au sort ? Nous devons savoir que toutes les cases sont occupées sur la grille et qu'il n'y a pas de gagnant. Pour obtenir le booléen qui indique s'il n'y a pas de cases libres sur le tableau, nous allons créer une autre variable car, encore une fois, il s' agira d'un état dérivé. Nous allons dire qu' il ne reste plus aucun mouvement. Ce seront des carrés. Chaque... chaque méthode est la méthode que l' on peut appeler un effacement. Il renverra soit vrai, soit faux. Nous passons un rappel à chacun. Ce rappel est exécuté pour chaque élément du tableau de carrés. Si chaque rappel, si pour chaque élément le rappel renvoie vrai, alors la valeur finale sera finalement vraie. Si au moins un rappel renvoie la valeur false, la valeur finale sera fausse. C'est essentiellement le nom de chacun. Le callback a exactement les mêmes arguments que la méthode map. Nous avons d'abord l'élément qui sera une valeur carrée dans notre cas. Cela suffit, nous n'avons pas besoin d' index et nous n'avons pas besoin de tableau lui-même. Nous vérifions simplement si la valeur carrée n'est pas égale à zéro. Nous vérifions cela. Si chaque valeur n'est pas égale à zéro, l'ensemble de la condition retournera vrai. Si au moins une racine carrée n'est pas nulle, l'ensemble de la structure condition renvoie la valeur false. C'est exactement ce que nous recherchons. Maintenant, nous avons simplement le div, et nous pouvons appliquer plusieurs conditions ici. Si nous avons un gagnant, nous pouvons afficher quelque chose. Voici l'astuce : comment appliquer également le rendu conditionnel. Si nous avons un gagnant, nous pouvons utiliser une fin logique et ensuite afficher n'importe quel JSX que nous voulons. Il s'agit également d'un rendu conditionnel et c' est une alternative à l'écriture de ceci. Si nous avons un gagnant, affichez-le, sinon veuillez afficher null. Si vous vous en souvenez, null ne sera évalué à rien et finalement rien ne sera affiché, mais cela peut être fastidieux à écrire à chaque fois, c'est pourquoi les gens choisissent généralement cette façon d'écrire les choses. Mais tu dois faire attention. Cette chose ici, lorsque vous vérifiez la condition, doit être une valeur booléenne. S'il ne s'agit pas d'une valeur booléenne mais d'une valeur véridique, par exemple zéro, elle affichera zéro. Zéro est considéré comme une valeur fausse, mais il ne s'agit pas d'un booléen. Donc, la façon dont l'opérateur et fonctionne, uniquement lorsque cette condition renvoie exactement faux. Nous devons nous assurer que cette valeur est booléenne si vous souhaitez utiliser cette approche avec une fin logique. Dans notre cas, le gagnant est déjà un booléen, nous n'avons donc pas besoin de le faire. À l'avenir, vous tomberez certainement sur cette situation, lorsque vous vous en souviendrez, en particulier lorsque vous allez faire face à une course et à des données provenant d'API. Notre logique doit être la suivante. Si nous avons un gagnant, nous voulons afficher le gagnant comme gagnant. Je vais juste le copier et le mettre ici. Ensuite, nous pouvons appliquer un autre rendu conditionnel ici et dire que si nous n'avons pas de gagnant et que nous n'avons aucun mouvement, nous pouvons afficher autre chose. Si je l'enregistre, il sera automatiquement formaté. Nous finirons par avoir une telle structure. Ensuite, nous aurons une autre condition lorsque nous n' aurons pas de gagnant et qu'aucun nœud ne se déplacera vers la gauche. Mais cette chose n'a pas l'air moche, mais elle peut être très peu pratique et parfois très difficile à lire. Au lieu de le faire, nous pouvons l'écrire de manière plus lisible. Donc, si vous vous souvenez de ce que nous avons fait dans le composant intégré, nous avons créé cette fonction carrée de rendu à partir de laquelle nous renvoyons le balisage JSX. Ici, nous pouvons appliquer exactement la même approche et écrire les conditions du rendu conditionnel dans cette fonction. Ici, nous allons le dire. Quelque chose comme afficher un message de statut, d'accord ? Cette fonction n' acceptera rien comme argument car, eh bien, nous ne traitons aucun argument ici. Nous avons accès à toutes les données dont nous disposons dans le cadre supérieur. Ici, nous allons juste demander. Si nous avons un gagnant grâce à cette fonction, nous ferons en sorte que le gagnant soit le gagnant. Ensuite, nous allons vous demander si nous n'avons pas gagnant et s'il ne nous reste plus de coups Cela signifie que nous avons un match nul. Dans ce cas, nous affichons zéro et une hauteur x. Sinon, techniquement, nous pouvons ajouter une autre condition, par exemple s'il n'y a pas de gagnant et qu'il ne nous reste plus de mouvements Dans ce cas, les parties se poursuivent et nous affichons joueur suivant est le joueur suivant, comme ça. Cependant, nous pouvons en faire une instruction de retour par défaut à partir de cette fonction, car cela n'a aucun sens de l'appliquer si, comme une instruction de retour par défaut à partir de fonction, car cela cette fonction, car cela n'a aucun sens de l'appliquer si, c'est la dernière elle ne sera certainement , elle ne sera certainement déclenchée que lorsque ces deux éléments échoueront Nous n'avons donc pas vraiment besoin de la vérifier ici ou nous pouvons le faire, restons comme ça, vérifions cette condition et à en fin de compte si nous n'avons aucune condition qui nous satisfasse, dans ce cas nous ne remboursons rien au cas où quelque chose tournerait mal pour nous. Cependant, cela n'arrivera jamais. Enveloppons-le en div. Le joueur suivant sera le joueur suivant, nous n'avons pas besoin d'un signe dollar, nous n'avons plus besoin de tout cela, nous n' avons qu'un message d' état de rendu et au lieu de toute cette construction étrange, nous pouvons simplement appeler la fonction de message d' état du rendu. Maintenant, ça a l'air beaucoup plus lisible, n'est-ce pas ? Nous revenons à notre jeu et nous voyons que le joueur suivant est, ce qui est correct Allons-y et créons un gagnant et tout fonctionne comme prévu, mais allons plus loin et n'ayons aucun gagnant ici, eh bien, c'est difficile. Ce n'est pas difficile, donc comme vous pouvez le constater maintenant, toutes les cases sont occupées par quelque chose, mais vous n'avez aucun gagnant et nous finissons par être à égalité avec mais vous n'avez aucun gagnant zéro et x, exactement ce que nous faisions, ce qui est formidable. Maintenant, allons-y et appliquons un style à ce fichier, car vous pouvez voir que nous avons ces fichiers de styles ici depuis le tout début, mais nous n'avons pas fait grand-chose à ce sujet parce que nous étions occupés à toutes ces fonctionnalités. Allons-y et stylisons ce message d'état, Allons-y et stylisons car nous avons déjà nos styles ici. Si nous examinons de près l'historique, nous y reviendrons plus tard. Nous avons défini la classe de message d'état ici, génial, donc nous passons au message de statut ici et à cet élément d'encapsulation à div. Ajoutons un message d'état du nom de classe Si nous enregistrons, nous l' avons déjà fait, nous avons une marge. Peut-être que nous pouvons le transformer en élément H2, comme c'était le cas auparavant, mais en fait, rien ne changera vraiment parce que nous avons la taille de police, qui est définie ici, super. Maintenant, ajoutons quelque chose ici car, comme vous pouvez le constater, les éléments de portée qui apparaissent depuis un message d'état ont également un poids de police normal Je voulais probablement que ce soit cette balise H2. Nous avons également des classes ici, du texte vert et des textes orange, nous pouvons appliquer à nos joueurs x et zéro. Donc, ce que je vais faire, je vais le faire comme ça, donc pour ce zéro et ce x que nous avons ici, nous pouvons les intégrer dans des éléments de portée comme ça, et à cet élément de portée, nous pouvons réellement ajouter des avantages. X va être vert et zéro va être orange, donc nous ajoutons les balises vertes pour x, pour zéro, nous allons ajouter le nom du texte orange, maintenant ça ressemble à ça, plutôt cool. Ensuite, ce que nous devons faire c'est appliquer des styles de manière conditionnelle, lorsque nous aurons le prochain joueur, lorsque nous aurons le prochain joueur, d'une manière ou d'une autre. Eh bien, c'est quelque chose de nouveau dont nous n'avons pas parlé, donc nous devons d'une manière ou d'une autre appliquer des classes de manière conditionnelle. Encore une fois, nous allons inclure le joueur suivant dans Span et nous allons afficher le joueur suivant ici, mais maintenant, nous devons également appliquer dynamiquement des classes en fonction du joueur. Donc, pour couvrir, nous allons transmettre le nom de la classe et au lieu de simplement transmettre une chaîne, nous allons transmettre une expression JavaScript, donc pour cela, encore une fois, nous allons utiliser des crochets et voici Je vais demander. Si c'est Xnext, dans ce cas, nous allons appliquer la classe verte aux textes , sinon nous allons appliquer la classe texte orange Comme il s'agit d'un JavaScript, vous pouvez utiliser n'importe quelle méthode disponible pour transformer, appliquer, combiner, concaténer la chaîne, et finalement elle sera évaluée comme la chaîne de nom de classe ici, alors voyons voir. Nous avons la couche suivante qui est zéro et elle est en fait orange et pendant que nous jouons au jeu, vous pouvez voir les changements de couleur et les couleurs fonctionner, ce qui fonctionne incroyablement bien. Donc, à la fin, nous avons également le gagnant comme gagnant, donc selon la même logique qu'ici, nous allons postuler au gagnant. Le gagnant est le gagnant, mais cette fois, nous allons demander si le gagnant est égal à x. Ensuite, nous utilisons des balises vertes, sinon du texte, de l'orange , vérifions rapidement , super, le gagnant est x. Peut-être qu'une chose que nous pouvons ajouter ici et qui pourrait être utile à l'avenir et pour nous maintenant, c'est que vous pouvez voir maintenant chaque fois nous voulons afficher quelque chose, c'est toujours encapsulé dans un élément, dans ce cas dans une balise H2, en div mais que se passe-t-il si je veux ne pas supprimer, ne pas afficher de div ici du tout ? Et si je voulais juste afficher le gagnant, comme c'est le cas avec la balise span sans dans un div, car si vous ouvrez le balisage, il est encapsulé dans le div, si je ne veux pas le faire ? Je veux juste afficher le nom du gagnant et son étendue sans aucune division, comme directement dans H2. Dans ce cas, nous pouvons utiliser quelque chose appelé fragments React, donc le fragment React n'est en fait qu'un élément vide, donc si je supprime le div et si je tape React.fragment, importez React depuis react car maintenant nous utilisons React, l'espace de noms est essentiellement un composant, mais c'est comme un composant vide, juste un espace réservé. Si je dois utiliser un fragment React partout ici, je rafraîchis la page, je joue au jeu, j'ouvre le balisage, ici vous ne voyez rien sauf le gagnant, excusez-moi, sauf que le joueur suivant est en ligne, je n'avais aucun élément d'encapsulation. Encore une fois, le fragment React représente essentiellement un élément vide, mais le fragment React syntaxe très large et il est bon de savoir que vous pouvez toujours l'utiliser, cependant, le fragment React a une syntaxe plus légère. Si vous le supprimez et que vous laissez vos crochets vides, il s'agit d'une version courte du fragment React. Nous pouvons supprimer l' espace de noms React d' ici et supprimer les fragments React partout, gardant simplement des crochets vides comme ça et cela fonctionnera . C'est donc aussi un fragment de réaction, mais c'est une syntaxe courte sans dire explicitement React.fragment, hésitez pas à en utiliser n'importe lequel, je préfère utiliser cette syntaxe, moins de code, mieux c'est. nous en avons terminé avec les messages de statut pour de bon, alors allons-y et validons nos messages, excusez-moi, nos modifications car bon, nous avons fait beaucoup de choses, nous avons parlé de rendu conditionnel, nous avons parlé de styles conditionnels, de styles dynamiques, de noms de classes dynamiques et nous avons également affiché le message de dessin, super. Maintenant, j'ai déjà tout ajouté à l'état Stitch. Cette fois, utilisons l'interface utilisateur de VSCode Je clique donc sur le signe « plus » pour enregistrer toutes les modifications. Maintenant, elles sont toutes en cours et nous pouvons taper un message ici et appuyer sur commit, mais je préfère tout sélectionner manuellement, mais je veux qu'il soit puis taper manuellement git commit et determiner. Le message de validation sera cette pièce ou oui, affichera un message de dessin, appliquera affichera un message de dessin, des styles ou un composant de message d'état , et c'est tout. Dans la vidéo suivante, nous allons commencer par l'historique du jeu, nous allons expliquer comment nous pouvons réellement introduire cette fonctionnalité d'historique du jeu que nous pouvons parcourir Cela va être amusant. On se voit là-bas. 50. 11 Implémenter l'historique des jeux: Bonjour. Dans cette vidéo, nous allons parler de l'histoire du jeu vidéo. Dans la dernière vidéo, nous avons parlé de Game Draw qui affichera les messages qui apparaissent ici en haut. Le joueur suivant est : nous avons un gagnant, nous avons un match nul, ce qui est incroyable, mais cette fois, nous allons parler l'histoire du jeu afin de pouvoir cliquer sur n'importe quel mouvement que nous avons effectué et ensuite parcourir l'histoire. Pour y parvenir, nous devons réellement transformer notre État. La façon dont nous gérons actuellement un état de jeu consiste à utiliser des carrés et des états ISXNext. C'est très bien et nous continuerons à gérer les choses de cette façon. Cependant, nous allons légèrement modifier sa forme. Puisque l'histoire est quelque chose dont nous devons nous souvenir parce que nous serons en mesure de la parcourir, nous devons la transformer d' une manière ou d'une autre en un tableau. Permettez-moi d'ouvrir Paint et de vous montrer exactement comment nous allons représenter l'état du jeu vidéo. Comme il s'agit d'une histoire, ce sera un ensemble d'éléments. Ce sera un tableau et à l'intérieur de ce tableau, chaque élément sera un objet. Il s'agira essentiellement d'un tableau d' objets et chaque objet de ce tableau aura deux clés, des carrés et ISXNext. Chaque objet de ce tableau représentera l'état du plateau de jeu au moment de notre déplacement. Pour suivre les mouvements que nous effectuons dans le jeu, notre CurrentMove, nous avons besoin d'un compteur. Nous devons d'une manière ou d'une autre suivre quel est notre CurrentMove afin de pouvoir voyager dans cette histoire. Si nous cliquons sur un élément de l'historique, disons que nous accédons au déplacement numéro 1, nous passerons en fait au déplacement numéro 1 et notre mouvement actuel sera modifié. Pour cela, nous avons besoin d'un autre État pour suivre cela. Allons-y et voyons à quoi cela va ressembler dans la réalité. Ici, en haut de l'application, je vais créer un nouvel état, que nous appellerons history et setHistory, et cela doit être un tableau. Par défaut, nous avons déjà un état de jeu vide, comme c'est le cas ici sur les lignes 11 et 12. Nous allons créer un tableau vide avec un objet à l'intérieur, et par défaut, il s' agira de carrés, qui sera un tableau de neuf éléments remplis de valeurs nulles, puis isXNext sera faux, comme nous l'avons fait ici. Nous pouvons le supprimer en toute sécurité. Ensuite, nous allons créer un autre état qui représentera notre CurrentMove. Nous allons de l'avant. Nous créons CurrentMove et SetCurrentMove. Par défaut, notre CurrentMove sera égal à zéro. Notre compteur sera basé sur zéro. Génial. Maintenant, nous pouvons voir que puisque nous avons tout changé, nous avons beaucoup d'erreurs ici. Changeons cela. Comment pouvons-nous obtenir dernier état du plateau de jeu que nous avons ici ? Nous pouvons créer une autre variable qui sera notre valeur dérivée de l'historique et des états CurrentMove. Nous pouvons l'appeler, disons, GamingBoard. Ce sera l'histoire et notre CurrentMove. En fait, cela nous donnera cet objet pour notre CurrentMove. Maintenant, au lieu d'analyser uniquement les carrés ici, nous allons passer à GamingBoard.squares. Vous pouvez voir que j'ai même l'IntelliSense pour cela. Génial. Maintenant, HandleSquareClick, nous allons aborder cela dans une seconde. Passons au message de statut ici. heure actuelle, nous analysons deux accessoires, isXNext et des carrés. Maintenant, tout est combiné sous un seul objet. Nous pouvons simplement transmettre l' objet au message d'état. Ce que je vais faire, c'est juste analyser GamingBoard directement jusqu'au message d'état. Je vais retirer ces deux accessoires. Je vais ouvrir le message de statut ici. Maintenant que j'analyse GamingBoard, au lieu de déstructurer ISXNext et les carrés, je vais faire GamingBoard. Je vais déstructurer GamingBoard ici. Maintenant, je dois taper GamingBoard.Squares, GamingBoard.ISXNext, et ici aussi, GamingBoard.ISXNext. Mais au lieu de cela, puisque GamingBoard n'est qu'un objet avec deux touches, des carrés et ISXNext, je vais appliquer une autre déstructuration ici. Ce que je vais faire à partir de l'objet GamingBoard, déstructurer des carrés et ISXNext. Un petit rappel. C'est pareil. Cette seule ligne nous remplace en écrivant GamingBoard.Squares comme ça et GamingBoard.ISXNext à chaque fois. Génial. Nous avons traité d'un message de statut. Passons à tout le reste. Pour monter à bord, nous analysons des carrés. Maintenant, nous avons GamingBoard.squares, et maintenant nous devons d'une manière ou d'une autre faire face à HandleSquareClick. Eh bien, la logique est que nous avons une histoire et que chaque fois que nous créons un nouveau mouvement, chaque fois que nous jouons au jeu, nous devons étendre notre gamme. Nous devons ajouter de nouvelles valeurs à ce tableau. Dans HandleSquareClick, allons-y. Tout d'abord, nous avons maintenant GamingBoard.Squares ici. Ensuite, au lieu de définir des carrés, nous allons utiliser SetHistory, et nous reviendrons à cette logique dans une seconde. Au lieu de SetisXNext, qu'allons-nous faire ? Nous allons simplement incrémenter notre CurrentMove. Chaque fois que nous cliquons sur une case, le déplacement, le compteur sera incrémenté. Pour cela, si vous vous souvenez notre exemple tiré de vidéos précédentes sur le compteur, c'est exactement le cas. CurrentMove, et nous pouvons le nommer CurrentMove inside. Cependant, nous avons déjà ce nom ici en tant qu'État, alors appelons-le simplement Move. Le déplacement sera égal à un déplacement plus 1. Nous allons simplement l' augmenter à nouveau. Move va représenter notre état actuel pour CurrentMove. Dans SetHistory, au lieu de CurrentSquares, nous allons l'appeler CurrentHistory, et nous devons maintenant étendre l'historique d'une manière ou d'une autre. Tout d'abord, nous devons connaître notre dernier état de jeu. Pour ce faire, nous devons récupérer le dernier élément du tableau d'historique. Nous pouvons le faire en tapant. Nommons peut-être que la variable LastGamingState sera history, et nous allons récupérer le dernier élément en faisant history.length moins 1. De cette manière, nous pouvons récupérer dernier élément du tableau historique, qui sera à nouveau un objet de cette forme. Maintenant, ce que nous pouvons faire, c'est calculer un nouvel état que nous allons ajouter au tableau d'historique. Nous avons déjà compris la logique. Au lieu de retourner, nous allons le placer dans une nouvelle variable appelée NextGamingState. Au lieu de CurrentSquares, nous allons utiliser LastGamingState.Squares, et au lieu de IsXNext, nous allons utiliser LastGamingState.ISXNext. Maintenant, afin de définir la nouvelle valeur pour l'état de l'historique, nous devons revenir à partir de ce rappel. À partir de ce rappel, ce que nous allons faire, nous allons concaténer ce que nous venons de créer ici, NextGamingState, à notre état historique actuel. Nous pouvons utiliser la méthode array.concat pour cela. CurrentHistory.concat et nous allons introduire un nouvel objet ici. Nous devons analyser un objet de cette forme. Squares va devenir NextGamingState. Nous l'avons nommé NextGamingState, appelons-le NextSquaresState. Nous allons l' analyser comme ceci. ISXNext sera, encore une fois, le retournement d'un booléen, comme nous le faisions auparavant, mais cette fois, nous allons faire référence à notre LatestGamingState que nous avons ici, donc LatestGamingState.ISXNext. Nous allons appliquer la négation pour inverser le booléen et tout fonctionnera désormais comme par magie. Revenons ici et essayons de consulter l' historique des journaux de la console et CurrentMove, les deux, pour voir ce qui se passe réellement. Nous allons accéder à l' historique des journaux de la console et à CurrentMove. Au fait, je suis en train de les enregistrer tous les deux dans l'objet. Je le fais juste pour mes préférences personnelles. De cette façon, il est plus facile de les visualiser dans la console. n'y a aucune raison particulière à cela. Vous pouvez les enregistrer sur console comme ça , l'un après l'autre. Mais si vous les enregistrez dans la console en tant qu'objet, c'est plus facile à visualiser. On retourne au jeu, on inspecte, on voit la console, on ouvre cet objet. Nous avons CurrentMove, zéro, nous avons l'historique, qui est un tableau. premier élément est cet objet avec des carrés de valeurs nulles. Maintenant, allons-y, jouons au jeu et voyons comment cela change. Je clique quelque part plusieurs fois et si je les ouvre, vous pouvez voir que notre indice CurrentMove suivant a été augmenté et qu'à chaque mouvement suivant, l'index augmente. Grandit. Au départ, c'était juste un ensemble de valeurs nulles dans le premier élément, puis nous avons joué au jeu, nous l'avons ajouté au tableau historique, puis nous avons rejoué, nous avons ajouté d'autres éléments à l'historique, donc nous sommes en mesure de le suivre. Maintenant, la question est de savoir comment l'afficher réellement. Comme nous avons un tableau, c'est très facile à faire. Si nous revenons au composant de l'application, nous devons l' afficher d'une manière ou d'une autre. Ce que je suggère, c'est de créer un autre composant dans le dossier du composant, que nous allons nommer historique. Ce sera le composant de l'histoire de Yan. Nous allons l'exporter par défaut depuis l'historique JSX. Pour l'instant, ce ne sera qu'une fonction vide. Dans l'application, je vais importer l'historique à partir de l'historique des composants. Je vais faire défiler la page vers le bas et afficher ce composant historique en dessous du tableau. Je l'enregistre, et maintenant, dans l'historique, nous voulons afficher d'une manière ou d'une autre toutes les étapes que nous avons franchies. En réalité, ça ressemble à ça. Lorsque vous avez un tableau d'éléments, vous souhaitez généralement que chaque élément représente quelque chose dans le balisage. Par exemple, si nous avons une liste de fruits représentés sous forme de tableau, disons pomme, kiwi et autre chose dans React, cela ressemble généralement à cela. Vous prenez un tableau d' éléments et vous mappez chaque élément du tableau au balisage JSX. Cette chaîne Apple se transforme en div, qui affiche cette chaîne Apple, et il en va de même pour le reste des éléments. composant historique, nous allons transmettre notre tableau d' historique en tant qu'accessoire d'historique. Dans l'histoire, nous pouvons le soutenir en utilisant la distraction de l'objet props. À partir du composant, nous allons revenir au balisage JSX, les éléments d'encapsulation seront div, et nous allons utiliser un élément de liste ordonnée pour cela. Ici, nous devons mapper chaque élément du tableau de notre historique au balisage JSX. Je vais ouvrir des crochets pour interpoler JavaScript dans JSX. Je vais faire history.map. Maintenant, sans aucune logique supplémentaire pour le moment, qui va afficher div, donc à partir de d.mapcallback, je renvoie également le balisage JSX et je dis bonjour ici. Ne vous inquiétez pas du message rouge maintenant, nous pouvons le joindre dans une seconde. Sauvegardons-le et voyons ce que nous avons. Nous avons le bonjour. Nous avons joué au jeu et vous pouvez voir que chaque élément de notre tableau est en fait mappé au div correspondant dans le code HTML. Comme nous avons six éléments, chaque élément a été mappé au div ici. Au fait, je viens de remarquer que nous avons également un problème car nous n' affichons que ceux-ci ici. Voyons voir. J'ai en quelque sorte changé la logique. Vérifions rapidement que cela fonctionne. Génial. Je disais que chaque élément du tableau est mappé au div correspondant. Nous l'avons fait en utilisant la méthode .map. Cependant, vous avez déjà remarqué qu'il y a un avertissement dans la console, et si je passe la souris ici, ce sera le même accessoire clé manquant pour l' élément dans l'itérateur. Le fait est que lorsque vous utilisez .map dans balisage JSX pour mapper un élément de tableau à JSX, vous devez toujours transmettre l'accessoire clé pour les éléments JSX qui sont mappés. La raison en est que React doit suivre en interne chaque élément que vous avez mappé au balisage JSX au cas où il serait modifié à l'avenir. La raison en est que ce tableau est dynamique, chaque élément JSX mappé à l'intérieur ce tableau doit être représenté de manière unique. Pour aider à réagir de manière unique et à identifier de manière unique chaque élément du tableau, nous devons transmettre l' accessoire clé et l'accessoire clé doit être unique pour chaque élément. Dans notre cas, chaque élément du tableau est un objet, des carrés et des clés IsNext Nous n'avons donc rien de spécial ici. Ce que nous pouvons faire dans des cas simples, simplement transmettre un index d'élément de tableau comme clé, car il sera unique pour chaque élément, car pour le premier élément, ce sera zéro , pour le second, un, etc. Il identifiera de manière unique l' élément à l'intérieur de ce tableau. Ce sera suffisant pour notre cas. Nous allons récupérer cet index ici. Tout d'abord, nous avons l'objet, avec les carrés et IsNext. Nous n'en avons pas besoin, mais nous devons quand même le définir, car sinon, nous ne pourrons pas récupérer l'index, qui constitue le deuxième argument. Puisque nous n' allons pas utiliser d'objet, qui va le nommer soulignement, et nous allons récupérer l'index. Pour la clé, nous allons passer un index comme ça. Si je l'enregistre, si je l'actualise, vous pouvez voir que tout est resté le même, mais nous n'avons plus aucun problème avec la clé, car maintenant chaque élément du tableau est identifié de manière unique. Maintenant, nous avons un index ici, et nous pouvons également l'interpeller dans le div et nous pouvons afficher cet index. Ce que nous pouvons dire ici se déplacer, c'est un indice. Voyons voir, qu'est-ce que nous avons ? Nous avons le mouvement 1, le mouvement 2, 3 et 4. Génial. Cela semble plutôt bon jusqu'à présent, mais tout d'abord, nous ne voulons pas afficher le mouvement égal à zéro. Nous voulons afficher quelque chose comme un nouveau jeu ou démarrer le jeu. Nous allons appliquer le rendu conditionnel ici. Au lieu de le faire, nous allons demander, si l'index est égal à 0, alors nous allons afficher le texte d'un nouveau jeu comme celui-ci. Sinon, nous allons ouvrir des backticks, et nous allons dire « allez déplacer le hashtag ». Ici, nous allons afficher l'index. Voyons à quoi cela ressemble. Si je rafraîchis la page, nous avons un nouveau jeu par défaut. Si je joue au jeu, vous pouvez voir que nous avons maintenant une sortie beaucoup plus propre. Cependant, au lieu d'un nouveau jeu, appelons-le, passez au début du jeu. En fait, vous pouvez voir qu'ils ne sont pas cliquables du tout. Convertissons ce div en élément de bouton de type a button, je l'enregistre et maintenant vous voyez qu'il est cassé. Cependant, si vous vous en souvenez, nous avons nos styles dans styles.css. Pour cet historique, nous pouvons effectivement appliquer cet ensemble de classes qui sont déjà écrites ici. Tout d'abord, nous avons history-wrapper, que nous pouvons attribuer à div history-wrapper. Ensuite, nous avons l'histoire elle-même. Ce sera l'historique de nos listes non ordonnées. Ensuite, dans l'historique, chaque élément li sera stylisé. Eh bien, en fait, c'est vrai, parce que nous avons oublié que ce doit être un élément li. Au lieu de bouton, nous allons taper li ici et déplacer ce bouton à l'intérieur. Nous avons toujours ce message pour la clé, car je vous ai dit que la clé devait être attribuée, devait être transmise uniquement à l'élément d'emballage. Le bouton se trouve à l'intérieur de cet élément. L'élément lui-même est un li. Je dois lui transmettre la clé de l' élément li. Maintenant je l'enregistre. Nous avons également la classe btn-move ici. Nous pouvons donner à ce bouton className btn-move. Voyons voir le résultat. Ça a l'air plutôt bien jusqu'à présent. Vous pouvez voir que c'est beaucoup, beaucoup plus beau. Mais le fait est que nous ne sommes plus en mesure de faire quoi que ce soit maintenant. Nous devons d'une manière ou d'une autre ajouter la fonctionnalité de traversée. La logique, où nous allons le faire sera placée dans App jsx. Nous avons déjà l'état CurrentMove, qui représente l' étape à laquelle nous nous trouvons actuellement. À l'intérieur, nous pouvons créer une fonction qui modifiera notre CurrentMove. Nous allons appeler cette fonction MoveTo. Ce MoveTo s' attend à un argument. Appelons ça Move. Qu'est-ce que ça va faire ? Il mettra simplement à jour l'état en fonction du mouvement transmis. Chaque fois que nous les appelons MoveTo, disons cinq, cela définira MoveTo cinq. Maintenant, nous allons simplement transmettre cette fonction MoveTo à l'histoire en tant qu'accessoire comme celui-ci. Dans l'histoire, nous allons récupérer MoveTo. Ici, nous pouvons associer ce MoveTo à l'événement onclick. Pour cet élément de bouton, nous allons spécifier le gestionnaire d'événements onclick. Nous allons transmettre une fonction qui appellera MoveTo avec l' index de ce mouvement. Quelque chose comme ça. Je l'enregistre. Je rafraîchis la page. Jouons au jeu. Nous avons plusieurs déménagements ici. Chaque fois que je clique ici, MoveTo n'est pas une fonction, c'est parce que je n'ai pas encore enregistré App jsx. Essayons encore une fois. J'y joue, je clique sur « Moves » et vous pouvez voir l'état du jeu change réellement. Cela fonctionne comme prévu. Mais pour le rendre plus convivial, soulignons notre évolution actuelle . Nous revenons au code et, ici, dans l'historique, nous pouvons à nouveau appliquer des classes dynamiques. Si nous examinons les styles, nous avons ici une classe active qui peut être donnée à btn-move. Nous avons déjà la classe btn-move, mais elle est statique pour tous les éléments. Maintenant, nous allons ouvrir les crochets. Nous allons passer par btn-move ici. Nous allons transformer cette chaîne en modèle de chaîne afin de pouvoir appliquer une interpolation de chaînes, ce qui nous permettra d'utiliser du JavaScript à l'intérieur de cette chaîne. Ici, nous allons suivre une logique très simple. Si index ou disons si CurrentMove est égal à index, alors cet élément sera actif et ces tuiles seront appliquées. Nous allons donner une classe active sinon, nous allons lui donner une classe vide. Mais nous n'avons pas CurrentMove ici, nous devrons donc le recevoir à nouveau en tant que tel et dans App jsx. Je vais vous transmettre notre CurrentMove ici. CurrentMove est égal à CurrentMove. Quelque chose comme ça. Sauvegardons et voyons. Eh bien, maintenant, il est en train d'être transformé en vert. Examinons le balisage HTML. Nous avons btn-move et nous avons une classe active. Exactement ce que nous avons écrit car l'index du premier élément est zéro et CurrentMove est zéro par défaut, c'est notre état initial. Nous jouons au jeu et vous pouvez voir comment le nom de classe change et le dernier élément a toujours une classe active par défaut. Mais lorsque nous cliquons sur « Historique » pour le parcourir, vous pouvez voir comment ClassName change. C'est plutôt cool. Quelque chose comme ça. Cependant, essayons de jouer le jeu. Passez à un mouvement, puis continuez à jouer au jeu. Vous pouvez voir qu'il se passe des choses étranges ici. Le problème, c'est que notre état de jeu n'est pas synchronisé avec le mouvement auquel nous sommes revenus. Cela pose problème. Ce que nous voulons faire chaque fois que nous parcourons l'histoire et si nous cliquons sur le carré, nous voulons remplacer l'historique. Maintenant, nous devons ajouter un autre élément de logique pour y parvenir. Nous devons détecter si nous parcourons l' historique et si nous le parcourons, nous voulons le remplacer. Sinon, nous voulons le garder tel qu'il est actuellement. Revenons à l'historique des ensembles App JSX et Insights. Découvrons d'abord si nous sommes en train de traverser. Nous pouvons le faire en introduisant la nouvelle variable IsTraversing. La logique sera la suivante. Si notre CurrentMove plus 1 n'est pas égal à CurrentHistory.length. Ensuite, nous pouvons essayer de l' enregistrer sur console et voir si c'est vrai et pourquoi nous faisons le mouvement actuel plus 1. Encore une fois, consolons un CurrentMove et connectons-le history.length. Disons que c'est la durée de son histoire. Voyons pourquoi devons-nous ajouter plus 1 ici ? Si j'ouvre « Console » et que je joue au jeu, vous pouvez voir que la longueur de notre historique est toujours plus 1. Ensuite, le CurrentMove que nous avons. Cela est dû au fait que la longueur minimale de l'historique est définie par notre état par défaut ici, tandis que notre CurrentMove est basé sur un index nul. Pour normaliser cela, nous devons ajouter plus 1 au mouvement actuel afin qu'ils correspondent les uns aux autres. Nous vérifions simplement. Si « CurrentMove » est égal à la longueur dont nous disposons, alors nous savons que nous sommes sur le dernier mouvement et que nous ne parcourons pas l'histoire. Mais si nous n'en sommes pas à notre dernier mouvement, nous traversons, quelque chose comme ça. Maintenant, nous devons également modifier notre « LastGamingState », car chaque fois que nous en sommes à notre dernier mouvement , nous enchaînons, nous ajoutons à l'historique actuel des jeux jusqu' à la fin du tableau. Toutefois, si nous voulons remplacer, nous voulons ajouter des éléments à l'historique, qui se trouve au moment de ce déplacement. Peu nous importe mouvement numéro trois et tout ce qui se trouve en dessous. moment, seule l'histoire nous intéresse. Nous devons écrire la logique suivante ici. Nous devons le modifier. Nous pouvons vous demander, si nous sommes en train de traverser, dans ce cas, veuillez utiliser l'historique actuel au moment du déplacement actuel. Sinon, prenez le dernier élément de cet historique. La logique de « NextSquareState » ne change pas , et maintenant, au lieu de discuter de l'historique actuel, nous devons également envisager une matrice de base différente à laquelle nous allons attribuer nouvel état du plateau de jeu. Nous allons créer une nouvelle variable et la nommer peut-être quelque chose comme base. Ici, nous allons à nouveau nous demander : si nous parcourons dans ce cas, veuillez, à partir de l'histoire actuelle, ne découper que ces éléments ici. « Passez au début du jeu », « passez au mouvement 1 », « passez au mouvement 2 ». Nous passons de l'indice zéro à l'indice historique actuel du dernier plus 1. Sinon, veuillez conserver l'historique actuel comme tableau de base. Au lieu du dernier, nous voulons utiliser le dernier état du jeu, et au lieu de l'historique actuel, je veux utiliser la base. Nous reviendrons sur cette logique dans une seconde. Cela a l'air terrifiant, je sais, surtout avec tous ces nids. Mais voyons à quoi ressemble notre jeu en ce moment. Nous voyageons à travers l' histoire, tout va bien. Nous en sommes à la troisième étape, et si je veux effacer l'historique, je suis maintenant capable de le faire. Vous pouvez voir que nous supprimons le reste de l'histoire et que nous l'annulons avec notre nouvelle initiative ici. Juste comme ça. Il fonctionne parfaitement. Maintenant, qu'en est-il de la logique ? Encore une fois, slice est utilisé pour découper certains éléments de ce tableau, du tableau historique actuel. Nous sommes passés du premier élément à l' indice historique actuel de plus 1. Nous prenons simplement l'indice du moins d' états de jeu que nous avons et nous y ajoutons un parce que, encore une fois, nous avons « CurrentMove » en base zéro. peut-être confus, mais il suffit de le relire plusieurs fois et cela aura du sens. Ce n'est pas si simple à première vue, mais il n'y a rien de trop complexe et vous n'avez pas vraiment besoin d'y réfléchir trop. Maintenant, nous avons l'histoire des jeux vidéo et cela fonctionne incroyablement bien. Nous sommes capables de voyager, passer outre à l' historique sans aucun problème. Parfait. Maintenant, il semble que nous avons fait beaucoup et que nous en avons fait beaucoup. Supprimons ce journal de console inutile et voyons si nous devons ajouter quelque chose ici. Peut-être pouvons-nous ajouter un message ici, quelque chose comme l'historique actuel du jeu. Voyons à quoi ça ressemble. Cela ressemble à ceci, ce qui est bien, et je pense que cela suffira pour cette vidéo. Essayons de mettre en pratique tout ce que nous avons fait ici. C'est beaucoup. Je vais arrêter l'application, tout ajouter à Stage, tout valider et je vais appeler cela modifier l'historique du jeu. En gros, c'est exactement ce que nous avons fait. Nous avons transformé cet état en un tableau. Nous avons modifié notre logique et nous avons tout ajusté à la nouvelle forme d'État que nous avons introduite avec l'histoire. GIT commit a ajouté l'historique du jeu. GÉNIAL. Peut-être ajoutons-nous une autre chose ici. Ce n'est absolument pas nécessaire mais cela nous aidera pour la prochaine vidéo, et je vais vous donner un petit exercice jusqu'à la prochaine vidéo. Je vais redémarrer le serveur , et ce que je vais faire, déplacer ce tableau comme état initial en dehors du composant. Je vais le créer ici et je vais l' appeler nouveau jeu. J'ai tout mis en majuscule parce que c'est la définition de la valeur globale constante que nous ne changerons pas, et je vais lui donner ce tableau, comme ça. Pour l'état initial, je vais passer à une nouvelle partie. Je peux effectivement le déplacer à l'intérieur du composant, mais il vaut mieux le garder à l'extérieur. La raison en est que, si vous vous souvenez, chaque fois que nous avons un nouveau rendu de ligne, JavaScript s'exécute à l'intérieur, et chaque fois que JavaScript s'exécute, il crée à nouveau de nouvelles variables, et comme le nouveau jeu est quelque chose de statique que nous n'avons pas besoin de recréer à chaque rendu de ligne , nous pouvons simplement le déplacer vers l'extérieur. ne s'agit que d'une très petite optimisation, mais elle ne nous servira que pour GIT. Pourquoi l'ont-ils fait ? Dans la vidéo suivante, nous allons ajouter un bouton sur lequel nous cliquons et qui réinitialise le jeu. Voici un petit exercice pour vous en attendant la prochaine vidéo. Essaie de le faire toi-même. Créez un bouton, affichez-le quelque part ici, et lorsque vous cliquez dessus, il rafraîchit l'état du jeu à son état initial. Encore une fois, vous jouez au jeu, vous cliquez sur le bouton, cela rafraîchit l'état. Essayez de l'implémenter en utilisant cette nouvelle variable de jeu que nous avons créée en dehors du composant. Je vais le valider, et disons que je suis passé à nouvel état de jeu en dehors du composant de l'application, et je vais tout transmettre au master et la prochaine vidéo nous aidera à implémenter la réinitialisation du jeu. Essaie de faire de l'exercice. On se voit dans le prochain. 51. 12 Ajouter un bouton de remise à zéro du jeu: Hey, comment s'est passé ton exercice dans la dernière vidéo ? Tu as réussi à le faire ? Voyons voir. Dans cette vidéo, nous allons ajouter un bouton qui réinitialisera notre état de jeu. Allons-y. Donc, juste ici, dans le balisage, juste en haut de l'historique actuel du jeu, nous allons ajouter un élément de bouton de type button et nous allons indiquer que cela lancera une nouvelle partie. Donc, lorsque nous cliquons dessus, il est censé faire quelque chose. Nous allons placer le gestionnaire OnClick ici, et pour cet événement OnClick, nous allons spécifier onNewGameStart, et cette fonction sera une fonction que nous allons créer ici et cette fonction, la seule chose qu'elle fera, c' est une fonction que nous allons créer ici et cette fonction, la seule chose qu'elle fera, c' de mettre à jour l'état. Dans la vidéo précédente, à la toute fin, nous avons déplacé le nouveau jeu à l'extérieur du composant , ce qui va nous aider maintenant. Maintenant, nous pouvons réellement appeler, définir l'historique et passer à une nouvelle partie, ce qui est notre état initial. En plus de l'historique, nous devons également réinitialiser le compteur pour notre mouvement actuel. Nous allons commencer par appeler Set Current Move et le remettre à zéro. Voyons voir. Si je le sauvegarde, je joue au jeu, je clique sur « Commencer une nouvelle partie ». Tout a été rafraîchi maintenant. Cependant, il n'est pas stylé et si nous examinons le style CSS, nous avons ici la classe .btn-reset. Allons-y et utilisons-le. Donc, pour ce bouton, je vais transmettre le nom de la classe et je vais transmettre btn-reset. Mais si vous voyez, il y a aussi la classe active ici. Ce que je voulais faire lorsque j'ai introduit cette classe active, c'est que chaque fois que nous avons un gagnant, ce bouton soit actif. Nous allons donc appliquer la logique du nom de classe ici. Comme nous allons appliquer du JavaScript, encore une fois, nous utilisons des crochets et, tout d'abord, il s'agira d'un modèle de chaîne avec des backticks. Nous allons lui donner une classe statique, btn-reset, puis nous allons ouvrir les guillemets d'interpolation de chaînes et, entre crochets, pour l'interpolation de chaînes, nous allons demander. Donc, si nous avons un gagnant, veuillez lui attribuer une classe active, sinon, laissez-le vide. Quelque chose comme ça et maintenant voyons voir. Nous avons donc ce joli bouton ici et si nous jouons au jeu, et qu'il y a un gagnant, et chaque fois que nous avons un gagnant, ce bouton devient actif. Si nous parcourons l'histoire, tout fonctionne à nouveau comme prévu. Ça a l'air bien. C'est tout pour la réinitialisation des boutons. Comme vous pouvez le constater, rien compliqué alors allons-y et engageons-nous. Je vais ajouter ces modifications à l'état de la scène, puis je vais les valider. Un message de validation sera ajouté pour réinitialiser le jeu ou démarrer un nouveau bouton de jeu. Génial. Je mets le tout sur GitHub et je vous verrai dans la prochaine vidéo. 52. 13 Gagnant du jeu en surbrillance (combinaison gagnante): Salut à tous Dans cette vidéo, qu'allons-nous faire ? Nous pouvons afficher la combinaison gagnante au cas où nous aurions un gagnant, et aussi, mais nous changerons la couleur des carrés car ils sont maintenant noirs. instant, commençons peut-être par les couleurs. Si nous passons au carré des composants, la logique sera à peu près la même que celle que nous avons dans le message d'état. Si vous vous en souvenez, nous avons appliqué le nom de classe dynamique ici. Si le gagnant est X, le texte est vert, sinon le texte est orange. Les classes que nous avons définies ici dans les styles donnent simplement la couleur à l'élément défini ici par la variable SAS. Ici, dans le carré, nous allons simplement le convertir en expression JavaScript. Nous allons remplacer les guillemets doubles par des guillemets inverses. Je vais continuer et je vais demander si notre valeur est X, puis nous allons afficher le texte en vert, sinon, nous allons afficher le texte en orange. Juste comme ça, rien de compliqué. Vous pouvez maintenant voir que tout est transformé en un magnifique système de couleurs. Si on clique, si on joue, ça marche. Génial. Maintenant, allons-y et réfléchissons à la manière dont nous pouvons réellement mettre en évidence les cases gagnantes. Afin de mettre en évidence les cases gagnantes, nous devons connaître les cases. Nous avons besoin de connaître leurs indices. Nous devons savoir que si nous avons gagnant X pour cette combinaison gagnante, nous avons des cases gagnantes et un indice 2. Ensuite, nous avons 0, 1, 2, 3, index 4 et index 6. Voici nos carrés de gains. Nous calculons le gagnant dans la fonction Calculer le gagnant, et nous ne renvoyons que la case gagnante, uniquement sa valeur. Cependant, à partir de cette fonction, nous pouvons également renvoyer des cases gagnantes. Parce qu'ici, nous comparons toutes les combinaisons gagnantes possibles. Nous avons déjà ces variables a, b et c, elles sont structurées ici, qui représentent les indices gagnants, la combinaison gagnante. À partir de cette fonction de calcul du gagnant, nous pouvons renvoyer un objet au lieu de simplement annuler ou de renvoyer le gagnant. Nous pouvons retourner un objet avec le gagnant et les cases gagnantes. Dans le cas où nous n' aurions aucun gagnant, nous renverrons la valeur nulle pour l'instant. Mais changeons-le en objet. Nous retournerons le résultat gagnant ou nul, et les cases gagnantes seront un tableau vide. Mais si nous avons un gagnant, nous retournerons un objet. Les gagnants seront les cases c, gagnants seront les cases les cases a ou les cases b, peu importe. Mais pour les cases gagnantes, nous allons renvoyer les lignes i ou nous pouvons les renvoyer comme ça. Nous pouvons créer un nouveau tableau, puis spécifier explicitement que nous renvoyons a, b et c, ou nous pouvons spécifier une ligne a lignes i. Maintenant, nous revenons à J6. Maintenant, ce gagnant est un objet. Si je le surligne, cela me montre également un objet. Je peux utiliser cette structure ici. À partir de la structure d'identification de l'objet renvoyé, clé gagnante et des cases gagnantes. gagnant et une case gagnante. Nous pouvons maintenant transmettre ces cases gagnantes au composant du plateau en tant qu'accessoire et y gérer cette logique. Je vais passer les cases gagnantes au plateau, et à l'intérieur du plateau, je vais saisir cases gagnantes et les cases gagnantes et les placer ici. Je peux passer un accessoire qui indique si cette case est une case gagnante ou non, puis appliquer une certaine logique à la composante carrée. Dans Render Square, je vais vérifier si le carré est un carré gagnant. Je vais créer juste une variable dans carré de rendu et l'appeler carré gagnant. Les cases gagnantes sont un ensemble d'indices gagnants. Comme 0, 1 et 2. Prenons cette combinaison, par exemple. Nous devons vérifier si la position de ce carré se trouve dans le tableau des carrés gagnants. Si c'est vrai, alors nous savons que le carré fait partie de la combinaison gagnante. Nous pouvons simplement vérifier WinningSquares. Cela inclut ce tableau qui inclut la position globale de la méthode. C'est ça Ensuite, nous pouvons passer cette case gagnante en descendant vers la composante carrée. Si nous ouvrons le composant carré, déplacons-le ici. Depuis notre passage, la case intérieure est la case gagnante. Nous récupérons cette case gagnante dans l'objet à accessoires. Ici, nous pouvons appliquer un autre ClassName dynamique basé sur ce carré booléen gagnant. Le point includes renvoie la méthode sous la forme d'une valeur booléenne qui indique si ce tableau inclut cet élément. Nous avons déjà appliqué un nom de famille dynamique ici en fonction de la valeur. Nous pouvons faire exactement la même chose pour sa case gagnante. Je vais juste étendre cette chaîne avec une autre interpolation et je vais vous demander si c'est la case gagnante Veuillez appliquer un ClassName et un ClassName le sera. Si nous ouvrons des styles, du CSS, à l'intérieur, nous avons cette classe gagnante. Cette classe gagnante associe l' animation de texte à l'échelle définie ici, qui augmente la taille de la police de manière infinie. Revenons à la case départ. S'il s'agit d'une case gagnante, nous attachons la classe gagnante. Sinon, nous attachons une classe vide. Voyons si cela fonctionne et après cela , nous allons faire quelque chose à propos de cette diapositive, car vous voyez qu'elle semble un peu désordonnée en ce moment. Trouvons un gagnant. Boum. En effet, cela fonctionne. Il suffit de regarder ça. Tout est en place ici. Plutôt cool, n'est-ce pas ? Chaque fois que nous parcourons l'histoire, et si nous revenons aux derniers mouvements, l' animation sera toujours présente. Si nous inspectons le balisage, nous avons la classe gagnante attachée à chaque case faisant partie de la combinaison gagnante. C'est plutôt cool. Maintenant, faisons quelque chose à propos de cette chaîne parce que, eh bien, elle a l'air un peu désordonnée. En fait, nous ne pouvons pas y faire grand-chose. Nous pouvons le diviser en plusieurs variables , puis le combiner, peut-être quelque chose comme ColorClassName. Ensuite, nous pouvons simplement couper cette logique à partir de là, mettre comme ceci, puis nous pouvons peut-être dire quelque chose comme WinningClassName, et ensuite nous ferons exactement la même chose. Nous avons simplement supprimé cette logique, nous l'avons mise ici. Au lieu d'utiliser cette logique en ligne, comme nous le faisions maintenant, qui va transmettre la variable. Ce sera ColorClassName. Nous interpolons la valeur de cette variable dans cette chaîne et nous faisons de même ici, WinningClassName. Maintenant, ça a l'air beaucoup plus propre. Nous avons essentiellement séparé la logique en plusieurs lignes. Tout ce que tu préfères. Si vous voulez le rendre un peu plus propre , c'est bien. Si vous avez aimé la manière désordonnée, n'hésitez pas à le faire. C'est ainsi que nous avons la combinaison gagnante, a été soulignée dans l'historique du jeu. Génial. Je pense que dans la prochaine vidéo, nous allons faire les derniers préparatifs et y ajouter quelques éléments supplémentaires, peut-être juste du texte supplémentaire, plus de styles. L'application sera enfin prête à être déployée sur un hébergement. Génial Maintenant, avant de terminer cette vidéo, supprimons les commentaires, les journaux de console et validons tout. Passons en revue ce que nous avons fait. Nous avons modifié le calcul du moment où le retour renvoyait cette valeur dans un objet doté de deux clés, case gagnante et une case gagnante, puis nous transmettons ces cases gagnantes à votre composant du plateau. À l'intérieur du tableau, nous détectons si la case que nous avons parcourue est une case gagnante, et en fonction de cette composante carrée intérieure, nous appliquons dynamiquement des noms de classe pour activer l'animation. Quelque chose comme ça. Allons-y et engageons-nous à tout faire. Git ajoute ça. Le message sera surligné avec la combinaison gagnante. Génial Mettons tout en œuvre. À la prochaine, on se voit là-bas. 53. 14 touches finales: Bonjour. Dans cette vidéo, nous allons apporter une touche finale à notre application avant son déploiement. Eh bien, si nous passons à nos styles, en fait ici, à body element, nous appliquons cette police Roboto, mais nous ne l' avons pas vraiment sur notre PC. Nous ne l'avons nulle part. D'où vient-il ? Le fait est qu' il n'a pas vraiment appliqué. Réglons ça. Dans l'invité que nous avons partagé avec nous, nous avons un index HTML avec quelques propriétés. Si nous regardons dans notre index HTML, nous n'avons pas ce lien vers la feuille de style que nous avons ici. La feuille de style, ce qu'elle va faire, téléchargera la police Roboto à partir des API Google. Nous allons simplement l'inclure et avec cette ligne, si nous actualisons l'application, rien ne changera car nous n'avons pas exécuté le serveur de développement. Je lance le serveur, je retourne à l'application. La police Roboto est maintenant appliquée. Si je supprime cette ligne, vous verrez que la famille de polices change. Mais dès que nous ne chargeons pas la police spécifiée dans la feuille de style, tout fonctionne. Super. Ajoutons maintenant le titre à notre application en haut de la page. Ici, dans l'application, juste en haut du composant du message d'état, nous allons afficher une simple balise de titre h1 et nous allons en informer TIC TAC TOE. Pour le rendre plus attrayant, nous pouvons modifier la couleur du TAC. Enveloppons-le dans un élément span et donnons-lui un nom de classe de texte vert. Sauvegardons-le. Maintenant, ça a l'air bien mieux, et je pense que nous devrions vraiment supprimer la propriété font-weight bold du titre actuel de l'historique du jeu. Nous pouvons le faire en appliquant des styles en ligne. Eh bien, ce qui est génial. Nous ne l'avons pas entendu ou nous ne l'avons pas vu auparavant. présent, la seule façon dont nous avons appliqué des styles dans l'application était d'utiliser la propriété du nom de classe. Les noms de classe sont définis ici dans le fichier SaaS. Cependant, que se passe-t-il si nous n'avons pas de fichiers CSS ou de fichiers SaaS ? Comment pouvons-nous appliquer des styles ? Eh bien, sans React dans un fichier HTML, nous pouvons avoir deux types de styles. Nous pouvons donner un nom de classe aux éléments, ou nous pouvons transmettre des styles en ligne. Nous pouvons faire la même chose ici dans React. À cet historique du jeu, nous pouvons transmettre la propriété de style et la propriété de style doit être un objet. Nous devons spécifier les styles en utilisant JavaScript, non pas avec du CSS, mais avec du JavaScript. Nous allons écrire du CSS à l' aide de JavaScript, et c'est ce qu'on appelle le style en ligne. Nous voulons supprimer le caractère gras de la police de l'élément de titre que nous avons ici. Le style de l'élément sera normal en termes de poids de police. Ici, nous devons passer un poids de police normal comme ça. Voyons si ça a marché. Si nous inspectons l'élément, je peux voir que le style et le poids de la police sont normaux. Ce sont des styles intégrés. L'objet JavaScript que nous transmettons ici a été converti en cette chaîne de style en ligne. Vous pouvez constater que je n'ai pas spécifié de tiret entre la police et les mots de poids car lorsque vous spécifiez des styles en ligne, vous devez utiliser la syntaxe des majuscules et minuscules. Si votre propriété comporte un tiret entre les mots, ou si elle comporte des espaces, peu importe, vous la remplacez toujours par un étui en forme de chameau. Par exemple, famille de polices. Vous auriez une famille de polices à la manière d'un camel case. Quelque chose comme ça. Allons-y et appliquons les styles en ligne ailleurs. Si nous accédons à l'historique des composants, nous avons ce bouton qui représente cet élément dans la liste. Mettons-le en gras chaque fois qu'il est actif. Si nous ouvrons les noms des classes, voyons s'ils sont en gras. En fait, c'est audacieux. Ce que nous aurions pu faire si nous n'avions utilisé aucun style, nous aurions pu faire ce qui suit si nous revenons à l'histoire. Ici j'aurais transmis le style et je précise, vous pouvez voir des crochets doubles ici. Les premiers crochets indiquent que nous utiliserons du JavaScript à l'intérieur et les seconds entre crochets indiquent qu' il s' agira d'un objet auquel nous transmettrons un objet. C'est pourquoi nous avons des crochets doubles ici. Nous aurions pu demander la propriété font-weight Si le mouvement actuel est égal à l'indice, elle sera en gras, sinon c'est normal. Si nous n'avions pas ces classes, supprimons-les et voyons si cela fonctionne. Si je zoome, je joue au jeu, vous pouvez voir que l'élément pour lequel cette condition est vraie devient gras. En gros, notre initiative actuelle devient audacieuse. Sinon, son poids de police est normal. Nous n'en avons pas besoin pour cet élément spécifique car cela a déjà été géré dans le CSS. Vous pouvez voir que le poids de la police est en gras lorsqu'il est actif Nous n'avons donc pas vraiment besoin de styles intégrés ici. Je pense que c'est ça. Je dirais que nous en avons terminé avec notre candidature. Nous avons toutes les fonctionnalités, nous avons tous ces styles. Tout fonctionne parfaitement et a une apparence incroyable. N'hésitez pas à modifier quoi que ce soit, à appliquer vos propres styles, à jouer avec, l' étendre ou peut-être à changer quelque chose. n'existe aucune exigence stricte selon laquelle cela doit être fait spécifiquement de cette manière. Vous êtes le développeur ici, et c'est vous qui décidez. Si vous devez modifier le titre ici, n'hésitez pas à le faire. Si vous souhaitez inclure des balises méta supplémentaires dans la tête, n'hésitez pas à le faire. Nous en avons terminé. Il s'agit de l' état final de notre application. Dans la vidéo suivante, nous allons parler du déploiement. Mais avant de terminer cette vidéo, terminons-la et engageons-nous à tout mettre en œuvre. Je vais ouvrir le terminal ; je vais tout valider. Je vais préciser les modifications que nous avons Nous avons donc ajouté la police et le titre. Ajout du titre du jeu TIC TAC et inclusion de la police Roboto. Je remets tout à nouveau sur GitHub. Comme toujours, à la prochaine. 54. 15 Déploiement pour s'envoler: Bonjour. À ce stade, nous avons terminé notre précieuse application. Ça a l'air magnifique. Il possède toutes les fonctionnalités. Le moment est venu pour nous de partager cette application avec le monde extérieur. Nous voulons le publier sur Internet afin d' avoir le vrai lien, la véritable URL que nous pouvons donner à nos amis. Comment pouvons-nous y parvenir ? Il existe des tonnes de services différents qui peuvent héberger nos fichiers statiques gratuitement ou non. Nous allons utiliser des services gratuits. Mais la question est de savoir comment cela se produit exactement. Quand allons-nous exécuter le script de construction défini dans le package Json, vite construira notre application et produira des fichiers statiques, HTML, du CSS, du JavaScript et des images si nous en avons. Ensuite, nous pouvons prendre ce dossier et le donner à un fournisseur d'hébergement. Ce fournisseur d'hébergement diffusera ces fichiers quelque part sur ses serveurs et les exposera publiquement via une URL générée automatiquement. L'un des services que nous pouvons utiliser pour héberger gratuitement notre application, pour héberger gratuitement notre code HTML, CSS JavaScript, ce sera toujours gratuit et c'est très simple. Le service s'appelle Surge. Vous pouvez y accéder en accédant au fichier surge.sh. L'avantage de Surge, c'est sa simplicité, que vous n'avez pas besoin de configuration supplémentaire. Ce que vous devez faire, installer uniquement le package global Surge , puis en utilisant la commande Surge, vous pouvez déployer l' application comme ça. Allons-y et faisons-le. NPM installe Global Surge. Je vais le coller dans mon terminal. Il installera le package Global Surge. Il indique qu'il s'agit d'une vulnérabilité de gravité critique. Eh bien, tu n'as pas à t'inquiéter à ce sujet. Chaque fois que vous constatez des vulnérabilités, cela peut être assez courant, en particulier avec les packages globaux. Eh bien, c'est le problème du package. Que pouvons-nous faire à ce sujet et quelles sont les vulnérabilités ? Des vulnérabilités se trouvent dans le code que nous téléchargeons à partir de ce package et il est possible qu'il soit malveillant. Mais tu n'as pas besoin de le prendre au sérieux. La plupart du temps dans le monde NPM, package est mis à jour peut-être une fois par jour, peut-être deux fois par jour. Mais vous ne pouvez pas toujours suivre les changements, les mises à jour. Vous verrez au moins une fois une vulnérabilité critique. Vos options sont, tout d'abord, de ne rien faire et de passer à la dernière version espérant que l' auteur du package a corrigé la vulnérabilité. La deuxième option est de ne pas utiliser ce package. Dans notre cas, nous ne pouvons vraiment rien faire , c'est pourquoi nous sommes d'accord. Maintenant, le package de recherche globale installé et il indique que nous devons exécuter la commande de recherche. Si je le fais, il me demandera de me connecter ou de créer un compte. Je vais simplement saisir mon adresse e-mail , puis mon mot de passe. J'ai déjà un compte, vais donc me connecter. Mais dans votre cas, cela vous créera un nouveau compte. Maintenant, cela m'invite à lancer le projet, mais je n'ai vraiment besoin de rien pour le moment. Je vais donc simplement utiliser Control C pour arrêter la publication de mon application. Tout d'abord, nous devons le construire. Je vais exécuter le script npm run build et vite produira la dernière version de notre application. Super. Maintenant c'est là. Il a l'air réduit, aglifié, et tout ce qui ressemble à ça. Nous voulons maintenant prendre le dossier Dist et le déployer pour effectuer une recherche. Nous utilisons donc la commande de recherche, puis nous précisons le chemin du dossier que nous voulons déployer par rapport à notre navigation actuelle. Depuis notre navigation actuelle, tictactoe-vite, et notre dossier se trouve dans ce dossier dans le même répertoire. Nous n'avons pas besoin d'en devenir fous. Il suffit de spécifier le nom du dossier que nous voulons déployer. Dans notre cas, il s'agit d' un dossier appelé Dist. Si je le fais, je lance simplement Search Dist. Il me demande un domaine. Ainsi, chaque fois que vous déployez sur Surge, il sera toujours déployé dans un sous-domaine. Ce sera toujours quelque chose de point surge point sh. Vous ne pouvez pas modifier la partie surge.sh, mais vous pouvez choisir un sous-domaine unique qui n'est pas utilisé pour le moment. Par défaut, Surge génère automatiquement un sous-domaine disponible, mais vous pouvez le modifier. Allons-y et appelons-le tictacgame.surge.sh. moi qui ai choisi ce nom. Mais dans votre cas, vous devrez créer votre propre sous-domaine, car si vous essayez de le déployer dans un sous-domaine déjà occupé par un autre utilisateur de Surge, l' autorisation vous sera refusée ou quelque chose comme ça. Cela vous indiquera que votre demande sera abandonnée. Assurez-vous donc de choisir quelque chose unique et de vous y tenir. Je choisis tictacgame.surge.sh. Je déploie, et maintenant il est publié sur tictacgame.surge.sh. Maintenant, je peux prendre ce lien et y aller. Comme vous pouvez le voir maintenant, mon application est en ligne. Il possède un lien HTTPS. Cela signifie que le certificat SSL est présent. Il est géré par Surge. Nous n'avons pas à nous inquiéter à ce sujet. Tout fonctionne. Vous pouvez maintenant utiliser ce lien et le partager avec vos amis. Il suffit de regarder ça. Est-ce que c'est cool ? Super. À présent, pour référence ultérieure, nous souhaiterons peut-être simplifier le processus de déploiement. Et si je souhaite modifier quelque chose , puis effectuer un nouveau déploiement vers exactement le même domaine ? Donc, dans ce cas, ce que je dois faire, mes nouvelles modifications, introduire de nouvelles modifications à l'application. Ensuite, je vais exécuter à nouveau npm run build pour produire un nouveau dossier dist mis à jour, puis encore une fois, je devrai exécuter surge dist et entrer dans le même domaine. Cependant, je tiens à ce que les choses soient aussi simples que possible. Alors pourquoi ne pas créer un autre script dans le package Json et l'appeler deploy. Allons-y et créons un nouveau script de déploiement. Cela fera deux choses. Tout d'abord, il exécutera la commande build, npm run build, et juste après, en utilisant l'opérateur logique et, nous pouvons enchaîner la commande qui s' exécutera après npm run build. Nous voulons donc exécuter Surge Dist et le domaine que nous avons jusqu'à présent. Surge, le nom du dossier que nous voulons déployer, dist, puis le domaine. Oui, je peux le transmettre à la commande surge comme argument et cela fonctionnera. Surge comprendra que nous souhaitons effectuer un déploiement sur ce nom de domaine. Nous pouvons donc supprimer le HTTPS et ne conserver que le nom de domaine comme ça. Maintenant, si j'essaie de changer quelque chose, peut-être dans l'application, vérifions rapidement si cela fonctionne. Changeons donc tic en autre chose, et maintenant je lance npm run deploy. Vous verrez qu'il prend la commande build, et juste après, il prend la commande surge. Il a été déployé, indique-t-il , publié sur titacgame.surge.sh. Si je rafraîchis. Maintenant, vous voyez de nouveaux changements. Cool, non ? C'est bon. Revenons en arrière et redéployons à nouveau. Encore une fois, il a produit une nouvelle version. Encore une fois, il a été déployé et publié à nouveau dans ce sous-domaine. Génial. C'est ça. Vous avez maintenant notre application en ligne. Vous pouvez le partager avec le monde entier. Validons notre script de déploiement que nous avons introduit, git commit a ajouté le script de déploiement. Alors félicitations, nous avons créé ce jeu plutôt cool ici sans trop d'efforts. Nous l'avons publié sur le service Surge. Maintenant, il est disponible sur Internet et il sera toujours gratuit. Il sera hébergé gratuitement pour toujours et nous pouvons maintenant nous en vanter. Dans la prochaine et dernière vidéo sur Tic-Tac-Toe, nous allons résumer exactement ce que nous avons appris au cours de ces vidéos, quels concepts nous comprenons, ce que nous sommes capables de faire maintenant avec nos connaissances. voit là-bas. Félicitations pour ce déploiement. 55. 16 Résumé: Rebonjour. Dans cette vidéo, nous allons résumer rapidement ce que nous avons appris jusqu'à présent tout au long du jeu de tic-tac-toe. Allons-y. Si nous examinons notre structure, nous pouvons déjà dire que nous savons comment utiliser Vid. Nous connaissons les outils frontaux qui peuvent construire notre projet. Si nous examinons le package JSON, nous pouvons voir que nous avons également découvert hébergement et comment héberger l'application gratuitement. Vous pouvez choisir dans Google tous les services d'hébergement qui vous permettent d'héberger des fichiers statiques, HTML, du CSS et du JavaScript, et voir comment les appliquer au cas où vous auriez besoin d'une alternative à la recherche. Nous connaissons maintenant les services d'hébergement. Si nous regardons dans le dossier source et si nous regardons dans le JSX principal, nous pouvons voir que nous avons utilisé React 18. Il s'agit de l'API des en-têtes React 18 et elle est différente de React 70. Nous avons appris à utiliser la dernière version de React ici. Si nous regardons dans App JSX, nous pouvons voir une logique différente ici. Nous savons déjà ce qu'est l'état, comment gérer l'état, comment mettre à jour l'état et pourquoi cela est nécessaire. Nous savons également quelle est la valeur dérivée de cet état et pourquoi nous n'avons pas vraiment besoin de créer un autre état pour gérer ces calculs, comme Winner ou peut-être comme plateau de jeu. Nous savons également que la mise à jour d' état ou la fonction peut être appelée de plusieurs manières, soit avec le rappel chaque fois que nous devons définir un nouvel état à partir de la valeur d'état actuelle, soit simplement avec un appel normal sans rappel, juste la valeur. Nous connaissons maintenant le balisage JSX. Nous savons comment appliquer les noms de classe. Nous connaissons les styles en ligne avec juste l'objet style, ce qui nous permet écrire du CSS en utilisant JavaScript. Nous savons comment appliquer des styles dynamiques en utilisant simplement des modèles de chaînes et un peu de JavaScript. Nous savons comment passer des accessoires. Les invites sont essentiellement les attributs des composants que vous pouvez utiliser pour transmettre des données au composant. Nous avons découvert le rendu conditionnel. Nous savons que nous pouvons afficher balisage JSX en fonction de certaines conditions, et nous pouvons y parvenir de plusieurs manières. Nous pouvons le faire en ligne en utilisant l'opérateur AND directement dans JSX, ou peut-être pouvons-nous créer une fonction d'assistance et y écrire la logique. Voyons ce que nous avons d'autre ici. Si nous examinons l'intérieur de Square, nous en avons déjà parlé. Si nous examinons l'histoire, nous n'en avons pas parlé jusqu'au bout. Nous savons également maintenant que nous pouvons prendre un tableau et mapper chaque élément du tableau au balisage JSX. Au cas où nous aurions besoin d'afficher des listes, nous utilisons la méthode de la carte à points. La méthode de mappage par points mappe chaque élément du tableau balisage JSX si nous l' utilisons dans JSX. Chaque fois que nous faisons cela, nous nous souvenons que nous devons toujours transmettre l'accessoire clé à l'élément d'encapsulation, car React doit identifier chaque élément mappé dans JSX. Je pense que c'est ça. Nous avons déjà appris de nombreux concepts sur React. Croyez-moi, tous ces concepts que vous avez expérimentés constituent la base dont vous avez besoin pour créer quoi que ce soit avec React. Tout ce que vous voyez ici est présent dans n'importe quelle autre application React. Si vous vous sentez flexible et que vous pouvez tirer parti, c'est génial. Cela signifie qu'à l' avenir, vous n'aurez aucun problème pour créer n'importe quel type d'application. Félicitations. Sur cette bonne note, nous allons mettre fin au projet tic-tac-toe. voit la prochaine fois. 56. 17 Extra: Salut à tous. En fait, j'ai oublié un petit détail subtil à ajouter à notre application. C'est une question de styles. Il s'agit de ces cercles que l'on voit en arrière-plan. Nous ne les voyons pas maintenant parce que nous ne les avons pas ajoutés, mais j'ai oublié de le faire. Dans Style CSS, vous avez la classe BG balls, qui s'occupe des cercles d' arrière-plan. Nous avons juste besoin de créer un élément vide quelque part dans le balisage de l'application. Disons un div vide. Nous lui donnons un nom de classe de balles BG. Si nous actualisons la page, nous voyons les cercles apparaître en arrière-plan, ils sont réactifs et plutôt jolis. Je suis désolée pour celui-ci. N'oubliez pas de redéployer l' application et d'omettre cette modification. Je vais juste continuer et je vais ajouter , ajouter des cercles d'arrière-plan. Ensuite, NPM exécute le déploiement. Les scripts de déploiement que nous définissons dans [inaudible]. Très bien, à bientôt. 57. Aperçu de l'application de box-office: Bonjour, bienvenue au Box Office. Dans cette vidéo, j'aimerais vous présenter rapidement le projet, ce que ce sera. heure actuelle, vous regardez Box Office. Ce sera une application de recherche de films et d'acteurs. Vous pourrez rechercher des films ou des acteurs, et les données que vous recherchez seront extraites de l'API. Par exemple, dans la saisie, je vais taper quelque chose comme « filles », et lorsque j'appuie sur « Entrée » ou sur le bouton de recherche, je vois les résultats. Tous ces résultats seront extraits du serveur d' API externe, qui est accessible au public. Nous serons en mesure de présenter des émissions. Lorsque nous cliquons sur une émission, nous voyons cette animation sympa. Pour faire comprendre à un utilisateur que cette émission est désormais en vedette, nous pouvons cliquer sur Lire la suite, et dans ce cas, une nouvelle page s' ouvrira dans un nouvel onglet. Ici, nous pourrons voir toutes les informations que nous avons récupérées à partir de l'API : détails, saisons, casting, tout ce qui concerne l'émission. Ici, nous retournons à votre page d'accueil Bouton «  Ici » au cas où nous aurions besoin de revenir en arrière. Fermons cet onglet. Maintenant que nous avons mis en vedette des émissions ici, elles seront disponibles ailleurs. Ils seront disponibles sous l'onglet Démarrer. Lorsque nous naviguons ici, toutes les émissions que nous avons sélectionnées précédemment apparaissent désormais ici sur cette page. Même si je ferme le navigateur, si je ferme l'onglet ou si je rafraîchis la page, nos émissions seront toujours là. Ils ne sont pas stockés dans une base de données, mais ils sont enregistrés dans le stockage du navigateur, en particulier dans le stockage local. Revenons à la page d'accueil, et vous pouvez voir que l' entrée est toujours là. en va de même pour la saisie, tout comme les émissions que nous avons mises en vedette sont enregistrées quelque part dans le navigateur, il en va de même pour la saisie ici. Si je rafraîchis la page, l'entrée est toujours là. De plus, nous avons cette boîte radio, des boutons radio, si nous passons à des acteurs et que nous cherchons ensuite un nom, par exemple, comme James. Au lieu de spectacles, nous allons maintenant voir les acteurs. Encore une fois, c'est la même API, mais contrairement aux émissions, les acteurs n'ont pas leur propre page car nous ne recevons pas trop d'informations de la part de l'API. C'est suffisant, juste des cartes pour les personnes, pour les acteurs, et cette application est également une application Web progressive. Cela signifie que notre application est désormais installable comme s'il s'agissait d'une application native, nous soyons sur un ordinateur de bureau ou un appareil mobile. Par exemple, dans le coin supérieur droit, j'ai ce bouton d'installation, et si je clique dessus, il m'invitera à installer ce site Web comme s'il s' agissait d'une application. Si je clique sur Installer, juste après, je serai, disons, redirigé ou ouvert dans une nouvelle fenêtre qui s'exécute toute seule et ce sera mon application. Juste après, si je retourne à mon bureau, je vois ceci, je peux maintenant. C'est mon raccourci pour l'application. Si je le ferme et si je l'ouvre à nouveau, il sera ouvert dans un onglet séparé et agira exactement de la même manière. Plutôt cool. Je dirais que c'est ça, c'est notre application, ce sera très amusant. Nous vous y verrons. 58. 02 Créer le projet avec Create React App: Salut, voilà. Comment te sens-tu après un tic-tac-toe ? Prêt à continuer ? Cette fois, nous allons travailler sur Box Office, une application Web qui nous permet de rechercher différents films et acteurs. Allons-y. Pour Box Office, nous allons utiliser l'application Create React. Il s'agit d'un modèle React très populaire, qui nous permet de créer des fichiers de projet. Dans Tic-tac-toe, nous avons utilisé un outil appelé Vite. Cette fois, nous allons utiliser l'application Create React. Create React App est comme le Saint Graal de tous les modèles d'applications React. La raison en est que Create React App est maintenue par l'équipe React. C'est ce que l'on peut appeler un modèle React officiel. Vous avez une question, pourquoi choisissons-nous Create React App alors que nous avons utilisé Vite dans Tic-tac-toe ? La réponse à cette question est très simple. Tout simplement parce qu'il n'y a aucune raison réelle à cette décision. Quoi que vous choisissiez, tout ira bien pour vous. Mais dans l'intérêt de notre trading, nous souhaitons explorer autant d' options que possible et voir ce que nous pouvons faire et ce que nous pouvons réaliser en utilisant différents modèles. Ils seront tous à peu près les mêmes. Ils peuvent être différents selon les possibilités de personnalisation. Mais dans l'ensemble, ils sont assez similaires. ce moment, je suis actuellement sur site Web officiel du modèle Create React App. Ce que nous pouvons faire, c'est aller à Get Started. À partir de là, nous avons déjà la section Quick Start où nous pouvons simplement copier cette commande. Mais notre application Box Office sera appelée une application Web progressive. Nous allons parler d'une application Web progressive. C'est quoi ça ? Pourquoi c'est cool et pourquoi en avons-nous besoin ou peut-être n'en avons-nous pas besoin ? Nous aborderons tout cela plus tard dans Box Office, mais nous devons prendre une mesure précise avant de créer l'application. Plus tard, nous pourrons l'utiliser. Si nous faisons défiler la page vers le bas et que nous accédons à Modèles, nous pouvons voir que nous pouvons exécuter la commande Create React App avec l'indicateur de modèle. Si nous passons à l'utilisation avancée ou au développement, laissez-moi voir où cela se trouve créer votre application, créer une application Web progressive. Si nous accédons à cette section ici, cela nous donne cette commande que nous pouvons exécuter avec le modèle tel que spécifié, selon laquelle il s'agira d'une application Web progressive. C'est exactement ce que nous allons copier et utiliser pour créer de nouveaux fichiers de projet. Donc, ce que je vais faire, accéder au dossier dans lequel je souhaite voir mon projet. Ce sera le dossier d' emballage que j' avais dans la vidéo précédente. L'approche est la même. Vous devez exécuter cette commande dans le dossier dans lequel vous souhaitez voir le dossier de votre projet. Je vais ouvrir Git Bash, vous ouvrez votre terminal. Ça peut être n'importe quoi. Nous n'aurons aucun problème d'interactivité si nous sommes sous Windows avec Git Bash. Je vais accéder au disque d, puis au dossier de l'application. Ici, je vais coller cette commande au lieu de mon application ici. Je vais choisir le modèle Box Office, le modèle Create React App PWA. Lorsque j'appuie sur Entrée, la commande démarre. de tous les fichiers nécessaires prendra quelques création de tous les fichiers nécessaires prendra quelques minutes. Non seulement elle créera des fichiers, elle installera toutes les dépendances du package Jason Cette commande peut donc prendre un certain temps. Pendant le processus d'installation, parlons de la différence entre Vite et Create React App. Dans Tic-tac-toe, nous avons utilisé Vite. Vite est essentiellement une configuration qui s'ajoute la compilation du bundle de modules avec Create React App. C'est presque pareil. Create React App est une configuration au-dessus du bundler de modules appelé Webpack. Bien que Vite puisse être utilisé pour n'importe quelle bibliothèque frontale, pour n'importe quel projet frontal, Create React App cible uniquement React. Vite utilise le roll-up. Create React App utilise Webpack, et ce sont tous deux des configurations au-dessus de ces modules. n'y a pas tellement de différence entre ce qu'il faut choisir. La réponse est que le choix est très subjectif. Personnellement, je préfère Vite, mais Create React App présente ses propres avantages. Par exemple, ils proposent une prise en charge progressive des applications Web prête Par exemple, ils proposent à l'emploi, ce qui est excellent et répond parfaitement aux besoins de notre projet. Permettez-moi de revenir au terminal. Je vois que tout a été installé. Je peux voir le message de réussite et le message de bienvenue. Si j'ouvre mon dossier ici, j'ai Box Office et mes fichiers de projet. Maintenant, je vais ouvrir VS Code et dans VS Code, je vais ouvrir ce dossier lab. Ce sera le Box Office. Nous avons ici quelques éléments légèrement différents de ce que nous avions auparavant dans le tic-tac-toe. Nous allons en parler dans une seconde. Avant de poursuivre, ouvrons l'invité que vous avez partagé avec vous. À partir de là, nous allons configurer Prettier et ESLint. La configuration sera à peu près la même que dans le tic-tac-toe, mais légèrement différente. Tout d'abord, copions la configuration ESLint. Je vais créer eslintrc. Copiez tout ici, comme je ferai pour Prettier. Dans ESLint, qu'avons-nous ici ? Exactement la même configuration que dans tic-tac-toe, mais nous avons également le plugin ici, React Hooks, et juste quelques règles définies ici. Ensuite, nous devons installer des dépendances. Comme avant, nous devons installer ESLint config Prettier. Le plugin Prettier que nous étendons, lequel nous devons installer plug-in ESLint React ainsi que le plugin React Hooks. Je vais juste copier ces plug-ins ici. La commande d'installation sera eslint-config-prettier, eslint-plugin-react et eslint-plugin-react-hooks. De plus, je dois installer les outils eux-mêmes. Je dois installer Prettier et ESLint. Génial. Maintenant, attendons l'installation. J'ai déjà six vulnérabilités de haut niveau de gravité. Eh bien, alors, ce que je vais faire ensuite. Ensuite, nous allons inspecter ce que nous avons exactement dans le colis Jason. Commençons par les scripts. Comme je vous l'ai dit, Create React App est une configuration au-dessus du bundler de modules sous-jacent à Webpack. Cette configuration cachée nous est exposée via le package de scripts React, qui est distribué via NPM. Tout comme nous avons distribué Beat via NPM, nous avons des scripts React. C'est pourquoi, dans nos scripts, nous avons des scripts React qui démarrent, construisent, testent et éjectent. Quels sont ces scripts ? Dans Tic-tac-toe, nous avons le script de développement, qui exécute le serveur de développement local pour nous. Ici, cela s'appelle démarrer. Eh bien, généralement, cela s' appelle démarrer, mais cela fait exactement la même chose. Il lance un serveur de développement local. Ensuite, nous avons le script de construction, encore une fois, pour créer une version de production, script de test qui exécute des tests. Nous allons le toucher dans une seconde et l'éjecter. Eject nous permet de désactiver la configuration des scripts React et de personnaliser nous-mêmes la configuration selon nos besoins. Ensuite, nous avons de nombreuses dépendances liées à la boîte de travail. C'est quoi ça ? Tout cela est lié à la création d'une application Web progressive. Nous en reparlerons plus tard, nous ne toucherons à rien de tout cela. Web Vitals, nous allons y revenir dans une seconde. Les scripts React sont le package contenant la configuration. La dépendance à React et la bibliothèque de test, nous allons également aborder cela dans une seconde, ainsi que nos dépendances de développement que nous venons d'installer. Génial, maintenant, si nous regardons dans le dossier public, le but de ce dossier est exactement le même que dans le flux. Tous les fichiers que nous plaçons ici sont mappés au segment d'URL de notre application. Ici, nous avons un index HTML dans un dossier public. Si dans le flux nous l'avions dans le dossier racine, nous l'avons ici en public. C'est la première différence majeure, disons, entre le flux et l'application Create React. Nous avons ici quelques éléments qui sont différents. Nous avons d'abord cette URL publique, variable globale, cette URL publique sera envoyée par webpack. Lorsque notre application sera compilée, Webpack traitera le code HTML d'index et remplacera cette URL publique par le chemin racine de notre application. Dans notre cas, cela se traduira par quelque chose comme ça. Juste un favicon, et c'est tout. Nous avons maintenant également l'élément racine dans lequel l'application sera montée. peu près ce que nous avions au tic-tac-toe. Ensuite, nous avons le fichier manifeste. Le fichier manifeste est modifié par rapport élément lié à la création de l'application Web progressive. Il contrôlera essentiellement le raccourci qui sera utilisé pour ouvrir notre application. Nous allons aborder cette question une fois que nous reviendrons à Progressive Web App, nous n'y penserons pas pour le moment. Maintenant, qu'avons-nous dans le dossier source ? Dans le dossier source, nous avons une configuration très basique. En fait, exécutons le script Start pour lancer le serveur de développement. Voyons voir ce que nous avons ici. Si je reviens ici, l'ouverture de l'application prend un certain temps . Pendant qu'il s'ouvre encore, voyons ce que nous avons dans l'index qu'il a ouvert. Voyons à quoi ressemble l'application et revenons aux fichiers. Vous pouvez voir que cela prend quelques minutes et que nous avons déjà un problème instantané ici. React est défini mais jamais utilisé dans App.js, car comme je vous l'ai dit, dans React 17 et versions antérieures, vous deviez toujours importer React depuis React chaque fois que vous utilisiez JSX dans des fichiers. À partir de React 18, cela n'est pas obligatoire. Nous utilisons ici une option de plug-in spécifique jsx-runtime, qui nous indiquera que nous n'en avons pas besoin. C'est pourquoi nous le supprimons. Dans React 18, cela n' est pas obligatoire. Maintenant, voici notre application, voici à quoi elle ressemble pour le moment, rien de trop spécial, configuration assez basique. Explorons les fichiers. Commençons par Index.js, notre point d'entrée, et nous avons ici quelques éléments que nous n'avions jamais vus auparavant. Tout d'abord, nous avons ReactDOM.CreateRoute, document. Obtenir l'élément par ID root, qui est l'élément que nous avons récupéré à partir de l'index HTML. Les identifiants doivent correspondre. C'est ici que l' application sera montée. Encore une fois, nous avons un mode strict qui rend la configuration de notre application assez basique, mais nous avons également enregistré des agents de service et nous avons signalé les signes vitaux du Web. Quels sont-ils ? Enregistrement des travailleurs de service et GS des travailleurs de service. Ce sont les fichiers qui feront notre application Web une application Web progressive. Nous ne voulons pas vraiment y penser en ce moment. C'est quelque chose que nous utiliserons plus tard. Nous les conservons et, pour l'instant, nous ignorons simplement ce que nous avons ici concernant l'enregistrement des travailleurs des services. Encore une fois, nous en reparlerons plus tard. Mais nous avons également un rapport sur les données vitales du Web ici. Si nous examinons les données vitales du Web, c'est ce que nous importons. Ici, il s'agit simplement d'une fonction simple qui importe quelque chose appelé Web Vitals et qui appelle ensuite un ensemble de fonctions ici. Qu'est-ce qu'un Web Vitals importé ici ? C'est le package que nous avons ici Web Vitals. Si nous revenons au registre NPM, dans le registre NPM, nous pouvons rechercher ce package contenant des éléments vitaux et voir ce qu'il fait exactement. En bref, Web Vitals est un package. Il s'agit essentiellement d'un ensemble de fonctions que vous pouvez voir dans Report Web Vitals. Ces fonctions nous permettent de mesurer les performances de notre application. Quel type de performance ? Les performances sont basées sur différentes mesures que nous pouvons collecter lors du chargement de notre page. Vous pouvez en savoir plus sur eux ici sur la page NPM officielle du package. C'est très utile lorsque vous souhaitez obtenir une optimisation maximale et une vitesse maximale dans votre application. Comment cela fonctionne, c'est que cet index interne, oui, nous appelons ce rapport Web Vitals et ici en tant que rappel, qui est à nouveau défini ici lors de la saisie des performances ici. Le rappel que nous transmettons ici sera appelé pour chaque métrique. Si nous réussissons, annulez ici. Cela signifie que tous nos indicateurs de performance seront annulés. Laissez-moi l'enregistrer et voyons ce dont j'ai besoin exactement. Si je retourne à l'application, je passe à Inspect. Si je regarde à l'intérieur de la console, je peux voir différentes mesures ici. La console est enregistrée en tant qu'objets avec des valeurs différentes. C'est exactement ce que fait le package Web Vitals. Il mesure les performances et vous fournit des indicateurs. Rien de plus. Nous n'en avons pas vraiment besoin. Peut-être, mais nous l' utiliserons plus tard, mais pas maintenant. Nous pouvons donc la garder comme une fonction simple ici. Voyons ce qui se passe dans App.js. En fait, une bonne question serait pourquoi avons-nous tous les fichiers extension with.js au lieu de JSX ? Parce que dans Tic-Tac-Toe, nous utilisons .jsx partout. Eh bien, Vite nous a demandé d'utiliser l'extension .jsx et Vite fonctionne de telle sorte qu'il récupère tous les fichiers avec extension JSX et comprend qu'il s'agit de React. Ici, étant donné que l'application Create React ne cible que les applications React, ce n'est pas une exigence car elle comprend que tout sera React. Mais dans Vite, c'était différent puisque Vite peut également être utilisé pour d'autres bibliothèques. Nous allons également nommer l'extension with.js de nos fichiers. Nous allons les renommer dans la prochaine vidéo. le moment, nous ne supprimerons rien d'ici. Dans App.js, nous avons importé le fichier du logo ici. Je veux juste faire une remarque rapide, car nos actifs statiques tels que des images, des polices, des éléments statiques ne nécessitant aucun traitement peuvent que des images, des polices, des éléments statiques ne nécessitant aucun traitement placés en public puis référencés à partir du code source. Mais ici, il est importé. Le fichier SVG est une image. Il a été importé comme s'il s' agissait d'un script ou d'un module. Ensuite, tout ce qui est important ici est transmis comme source. Si nous examinons le code HTML, désolé, nous avons ici une image qui pointe vers l'URL. Vous pouvez voir que c'est comme si c'était généré automatiquement ou quelque chose avait été fait à cette URL. Exactement. Sous le capot de ce que Webpack a fait, pour que le package React scripte la configuration, il a compris que nous voulions importer une image. Il a ensuite traité cette image et généré automatiquement l'URL correspondante. Donc, en gros, il a été traité par le Bundler. Vous vous demandez peut-être pourquoi. Pourquoi devons-nous le garder séparé ? Pourquoi certains fichiers, certaines images importés de cette manière à partir de source et d'autres gardés publics ? En fait, je suppose qu'il n'y a aucune raison particulière à cela. La différence est que ces fichiers sont traités par le Bundler. Ceux qui se trouvent dans un dossier public ne sont pas traités par le Bundler. Nous aurions pu déplacer ce fichier logo.svg dans Public. Ensuite, dans App.js, nous ferions simplement référence à logo.svg, n'est-ce pas ? Si je l'enregistre, je l'actualise, tout reste le même et vous pouvez voir logo.svg est diffusé sur l' itinéraire de l' application car nous l'avons dans un dossier public et les segments d'URL sont mappés, comme vous vous en souvenez. Il est placé dans la source, puis il est importé comme ça, puis la source spécifiée. De cette manière, vous pouvez charger des images. Il dit que cela ne peut pas être résolu. C'est probablement parce que je dois redémarrer mon application pour qu'elle puisse le récupérer à nouveau. Faisons-le juste au cas où, pour nous en assurer. Mais je pense que c'est tout ce que nous devions faire. Ce que nous pouvons faire ici pour terminer, ce que nous venons de créer jusqu' à présent, nous devons également le faire dans Git, nous devons télécharger le projet que nous venons de créer sur GitHub et ajouter un autre commit car nous avons installé de nouvelles dépendances. Je vais démarrer l' application. Vous pouvez voir que cela fonctionnait correctement et que l' URL était correcte. Quoi qu'il en soit, vous pouvez voir que Git est déjà dedans ici. Lorsque j'ai créé le modèle, lorsque j'exécute npx Create React App, il a automatiquement initialisé Git dans ce dossier. Si je tape git log, j'ai déjà un premier commit ici. Le commandement s'en est occupé. Cependant, puisque nous avons introduit nos propres modifications, nous allons les valider. Voyons voir ce que nous avons ici ? Nous avons App.js, index.js. Je vais simplement supprimer toutes les modifications que nous avons apportées ici, car nous n'en avons vraiment pas besoin. Nous allons tout faire dans la vidéo suivante. Nous ne sommes intéressés que par notre configuration ESLint que nous avons ajoutée et par la configuration Prettier à laquelle nous avons ajouté package lock et package.json parce que nous avons installé les dépendances de développement. Génial. Tout est à l'intérieur de la scène. Je vais juste tout valider et appeler installé et configuré Prettier et ESLint. Génial. Il est maintenant temps pour nous de télécharger ce projet sur GitHub. Allons-y. Sur mon compte GitHub, je vais créer un nouveau dépôt en haut à droite. Le nom de mon référentiel sera Box Office App. Je vais le rendre privé. Je ne veux pas ajouter de Read Me. J'ai déjà Gitignore. Si nous regardons dans gitignore, comme avant, nous avons des modules de nœuds et le dossier Build est ignoré. Si dans Tic-Tac-Toe, nous avions généré un build dans le dossier du disque, Create React App génère un build dans le dossier Build. En fait, créons le référentiel, puis exécutons la commande de construction. Ensuite, nous téléchargerons le tout. Je clique sur Créer un référentiel. Ensuite, suivez exactement la même procédure. Je copie git remote add origin dans l'URL de mon référentiel. Je le place dans mon terminal, j'exécute cette commande. Ensuite, je fais git remote minus v pour vérifier que origine de l' alias pointe vers mon référentiel GitHub. Génial. Je vais donc faire git push origin master. Et maintenant, si je rafraîchis mon dépôt GitHub, il est là. Génial. Essayons d' exécuter le script de construction à la fin juste pour voir s' il fonctionne réellement. Npm run build comme défini dans package.json. Où sont nos scripts ? Voici, et voyons voir, il est question de créer une version de production optimisée. Eh bien, nous avons défini React mais jamais utilisé. C'est exactement ce que nous avions en réalité. C'est assez ennuyeux qu' aucune variable inutilisée ne produise d'erreur. Parce que vous pouvez le voir, cela interrompt la construction car ESLint produit une erreur s'il n'y a pas de variables inutilisées. Allons-y et, en ce qui concerne cette règle, si je ne me trompe pas, nous avons fait exactement la même chose dans Tic-Tac-Toe pour éviter les variables inutilisées. Nous allons le dire, veuillez nous donner un avertissement au lieu d'une erreur. Un avertissement, c'est juste un avertissement. C'est juste un message pour t'avertir. Cela ne casse pas la construction ou quoi que ce soit d'autre. Vous pouvez voir maintenant qu'il est devenu jaune et que ma construction a été réussie. Je vais juste le garder tel quel, je ne vais pas modifier App.js. Permettez-moi de supprimer les modifications que j'ai apportées. Ici, vous pouvez voir maintenant le dossier Build est apparu. Si nous examinons le terminal, nous avons la sortie indiquant que le projet a été construit, supposant qu'il est hébergé la route, puis un ensemble de commandes différent, et si nous regardons dans la version de production, nous pouvons voir qu'il s'agit de notre version de production. Nous n'avons que des fichiers statiques. Nous avons du HTML, du CSS, du JavaScript, des images, des fichiers Json et même du TXT. Nous avons une licence pour un travailleur de service. Nous allons maintenant prendre le dossier Build et le télécharger pour l'héberger. Encore une fois, c'est ce que nous allons faire à la toute fin. Vous pouvez le voir fonctionner. Ça a l'air parfait, n'est-ce pas ? Maintenant, ajoutons cette modification d'ESLint à Git. Je vais donc le valider et le nommer, transformer aucune variable inutilisée en avertissement, puis tout télécharger sur GitHub. Génial. Dans la vidéo suivante, nous allons nettoyer tous ces fichiers dans la source. Après cela, nous allons commencer le développement. On se voit là-bas. 59. 03 Nettoyage des fichiers redunant: Bonjour. Dans la dernière vidéo, nous avons créé un nouveau projet à l'aide du modèle d'application Create React. Dans cette vidéo, nous allons simplement effectuer un petit nettoyage, qui va supprimer ces fichiers inutiles que nous n'allons pas utiliser de la source. À ce stade, nous allons commencer le développement. Allons-y. Tout d'abord, dans la dernière vidéo, je n'ai pas vraiment abordé tests d'installation et les packages de bibliothèque de tests que nous avons ici. Nous pouvons donc réellement tester les applications React. Nous pouvons écrire des tests programmatiques en utilisant ce que l'on appelle la bibliothèque de tests React. Nous n'allons pas faire ça ici au Box Office. C'est pourquoi nous le supprimons simplement car il ne sera pas utilisé. La première chose que je vais faire, supprimer « App.test.js ». Je vais supprimer « setup.tests.js » de « package.json » Je vais supprimer toutes ces dépendances comme ça. Voyons voir, et c'est tout. Maintenant, nous avons supprimé la bibliothèque de test du projet car nous n'allons pas en parler ici. Ensuite, nous avons « logo.svg ». Nous n'en avons pas vraiment besoin. Nous avons "index.css «, nous pouvons effectivement le conserver. Nous avons « App.css  », nous n'en avons pas vraiment besoin car « index.css » contient des styles globaux pour le corps, gardons-le là et ne le touchons pas. Ensuite, nous avons « reportWebvitals.js ». Il se peut que nous en ayons besoin pour mesurer performances si cela nous intéresse vraiment, afin de pouvoir le conserver, au cas où. « Service-worker.js » est quelque chose que nous pourrons joindre plus tard lorsque nous traiterons d' une application Web progressive. Et d'ailleurs, si vous regardez l'intérieur d'un employé de service, nous pouvons déjà voir que nous avons ici quelque chose qui est surligné en rouge. Encore une fois, ce sont nos adorables règles ESLint. Ce que nous pouvons faire à ce sujet, c' est simplement désactiver ESLint uniquement dans ces deux fichiers, dans "service-worker.js" et dans « serviceWorkerRegistration.js ». Encore une fois, nous parlerons de ces fichiers plus tard. Nous voulons simplement nous assurer que ces fichiers ne produisent aucune erreur ou aucun avertissement de la part d'ESLint. Nous allons simplement utiliser eslint-disable comme ça avec une barre oblique dans Astérix, pour désactiver ESLint uniquement pour ce fichier. Je vais copier cette ligne et la coller dans « serviceWorkerRegistration.js » tout en haut. Maintenant, nous n'avons aucun avertissement ou erreur ESLint ici. Génial. La prochaine chose que nous allons faire, c'est renommer « index.js » et « App.js  » pour avoir l' extension .jsx , juste pour différencier les fichiers avec balisage jsx des fichiers sans balisage jsx, juste des fichiers js normaux. Ceci est particulièrement important pour "service-worker.js" et "erviceWorkerRegistration.js ». Parce que ces fichiers ne concernent pas du tout React. Ce sont des fichiers qui ne concernent que le front-end. Ils ne peuvent pas être utilisés spécifiquement dans React. Nous renommons « index.js » pour avoir le balisage .jsx. Exactement la même chose, nous allons faire pour "App.js ». Dans App.jsx, nous n'avons pas besoin d' importer React depuis React car encore une fois, nous utilisons React 18. Et React 18 ne vous oblige pas à importer React dans le cadre de jsx. Nous avons supprimé "logo.svg «, nous avons donc supprimé la référence à un fichier inexistant. Nous avons supprimé "app.css «, nous supprimons à nouveau la référence à un fichier existant. Dans le composant App, nous pouvons simplement garder hello pour le moment sans aucun nom de classe ici. Assez simple. C'est assez simple ici aussi. « Index.css » est conservé, c'est pourquoi nous l'avons importé. Voyons voir quoi d'autre ici également. Tout ce que nous aurons en public à la fin, nous allons le remplacer par nos propres icônes, par nos propres images. Nous ne les supprimons pas pour l'instant, et je pense que c' est à peu près tout. La seule chose que nous devons faire, exécuter npm install pour refléter les modifications que nous avons apportées à « package.json ». Puisque nous avons supprimé les dépendances de cette bibliothèque de test ici, elles sont supprimées de « package.json », mais elles ne sont pas désinstallées de « node_modules ». Si j'exécute npm install, cela supprimera simplement les dépendances inexistantes et « package.json » du dossier « node_modules ». Vous pouvez voir «  71 packages supprimés ». Encore une fois, j'ai six vulnérabilités importantes. Je vous en prie, ne m'effrayez pas avec ça. Pour l'instant, validons, git add. C'est déjà en cours et « git commit » va être supprimé ou nettoyé du dossier source de l'application Create React initiale. configuration. Génial. Nous poussons tout à maîtriser, et c'est sur cette bonne note nous nous retrouvons dans la vidéo suivante. 60. Introduction du routeur v6: Hé, dans cette vidéo, nous allons enfin procéder au codage, et nous allons enfin commencer à construire quelque chose. Allons-y. Si vous vous souvenez de Tic-Tac-Toe, nous n'avions qu'une seule page sur notre application. Nous n'avions aucune navigation entre les pages, et le fait est que dans React, aucune navigation n' est intégrée à la bibliothèque. Cela signifie que si nous souhaitons naviguer entre les pages, nous devons le faire nous-mêmes. Eh bien, il existe un package pour cela, qui gère la navigation pour nous. En réalité, plusieurs packages peuvent fournir un routage dans l'application. Cette navigation entre les pages s'appelle le routage entre les pages. Il existe différents packages qui peuvent le faire, ils ont plus ou moins la même interface. Celui que nous allons utiliser est React Router. Si j'ouvre la documentation officielle ici, je peux choisir que je suis nouveau. Cependant, je peux convenir que leur dernière documentation n' est pas très claire. Je n'ai rien vu à exécuter pour installer React Router. De plus, ce tutoriel est très long et couvre tout, mais et si je voulais juste démarrer rapidement ? Pour commencer avec le routeur React, vous devez d' abord installer ce package et pour ce faire, nous devons exécuter npm install react-router-dom. Nous faisons cela, après cela, il apparaîtra dans le package json. Maintenant, je vais relancer le serveur de développement, et examinons la documentation. Ici, si nous passons en revue la configuration, cela nous invite à démarrer une nouvelle application React avec Vite. Nous allons sauter cette étape. Ensuite, nous voyons « Ajouter un routeur » et nous devons créer quelque chose comme ça. Mais personnellement, je trouve cela un peu confus en suivant cette documentation, car je connais React Router depuis les versions précédentes. Actuellement, il en est à la version 6 et à chaque version majeure, comme 5, 4, 3, change toujours d' API, d'interface, car maintenant il est complètement différent de ce qu' il était auparavant. Pour faire simple, nous allons aux concepts principaux sur la gauche et nous passons à la section intitulée Rendu, si je ne me trompe pas. Ici, vous pouvez trouver un très bon exemple qui montre clairement ce que fait exactement React Router et ce que nous allons faire ? Au lieu de suivre toute cette longue documentation, nous ne prendrons que ce dont nous avons besoin. Nous allons prendre cet exemple et comprendre exactement ce que React Router peut nous apporter. Nous pouvons voir un appel create root assez basique que nous avons déjà dans index.jsx et nous voyons que nous avons besoin de cet arbre de tri. Tout d'abord, nous avons besoin d'un routeur de navigateur. Nous allons importer cela et nous allons probablement faire tout cela dans App. Nous pouvons réellement importer routeur de navigateur et l' utiliser dans index.jsx, mais faisons-le dans App. Nous devons d'abord l'obtenir à partir de tous ces composants, ils sont tous importés de react-router-dom, et ils se trouvent quelque part dans cette longue documentation. Vous pouvez en fait les trouver là-bas. Nous avons besoin d'un routeur de navigateur et nous avons besoin de routes, et nous avons besoin d'une route. Nous allons donc importer quelque chose depuis react-router-dom, nous devons donc récupérer le routeur du navigateur et nous devons récupérer les routes, pas le routeur, et nous devons récupérer l'itinéraire. Ces trois composants. Maintenant, ce que je vais faire, est simplement copier ce balisage et c'est simplement copier ce balisage et le mettre dans l'application, juste comme ça. Mais ici, maintenant nous n' avons pas tous ces composants qui sont définis ici, c'est très bien. En fait, que se passe-t-il ici ? En utilisant cette structure arborescente, nous pouvons définir des itinéraires dans notre application React. Considérez les itinéraires comme des pages, sorte que chaque itinéraire est représenté par une page. La route n'est en fait qu'un segment d'URL. Si vous avez, par exemple, pour les équipes de chemin, chaque fois que l'URL est, disons, des équipes obliques, nous pouvons afficher ce composant d'équipes en utilisant la syntaxe. Mais nous n'allons pas le faire. Pour l'instant, il suffit d' afficher au moins quelque chose. Commentons ces composants de ces itinéraires, et en les examinant, voyons ce que nous pouvons apporter nous-mêmes. Nous allons simplement continuer et créer un itinéraire par chemin, un itinéraire et un index. Un élément va devenir quelque chose. Que devons-nous afficher ici ? Ici, nous devons afficher le composant qui représentera notre page. Ce que je suggère, c'est que dans Source, vous créeriez un nouveau dossier et l'appelleriez Pages, et ici nous allons créer des composants qui représentent nos pages. Je vais créer un nouveau fichier ici, appelons-le Home.jsx. À partir de là, je vais créer un composant d' accueil comme celui-ci, puis je l'exporterai par défaut comme ceci. À partir de maintenant, ce sera un simple div qui indiquera Page d'accueil. Donc, pour l'index du chemin, juste pour l'itinéraire, nous allons afficher le composant d'origine. D'ailleurs, vous pouvez voir que dès que je tape home et que mon curseur est placé à la fin, j'ai cet IntelliSense ici dans la liste déroulante. Si j'appuie sur « Tab », il sera importé automatiquement pour moi, plutôt cool, n'est-ce pas ? Maintenant, je le garde comme ça et si je retourne à mon application, regarde ce que j'ai. J'ai la page d'accueil ici et si je vais à une autre URL, j'ai une page vide. Si j'inspecte le balisage, j'ouvre le corps, j'ai un itinéraire. Mais en cours de route, je n'ai rien. C'est parce qu'ici, je n'ai défini aucun itinéraire, aucune page. React Router fonctionne de la manière dont il fait correspondre le segment d' URL ici, le nom du chemin par rapport au chemin que vous spécifiez ici lors du rendu, élément correspondant. Essayons maintenant de créer une autre page. Appelons-le Contact et voici le rendu. Juste pour donner un exemple, je vais créer div et dire contact. Maintenant, si je vais au contact, je vois le balisage, ce que j'ai transmis comme élément ici, juste comme ça. Nous savons maintenant comment fonctionne React Router. Le reste que vous voyez ici dans l'exemple sera abordé dans les prochaines vidéos, car il s' agit d'une question de mise en page Nous pouvons donc avoir une mise en page qui peut être partagée entre plusieurs pages. C'est alors que cette route sans chemin ni index entre en jeu. plus, nous aborderons cette colonne ici, qui sera la représentation d'une page dynamique, mais encore une fois, nous y reviendrons plus tard. Ce n'est pas le moment. Ce que nous allons faire pour l'instant, c'est peut-être créer nos premières pages. Ce que je peux vous dire ici, c'est que dans Box Office, nous aurons la page d'accueil, puis nous aurons la page d'accueil. Pour référence future, puisque nous avons déjà créé deux pages, ajoutons un autre composant de page, que nous appellerons Start Basics, et je vais simplement copier tout ce que j'ai à l'intérieur. Je vais le renommer en étoile. Ensuite, dans le composant de l'application, encore une fois, je vais importer le composant marqué d'une étoile, qui représente notre page. Au lieu de contact, je vais afficher les favoris et, au lieu de contact, chemin marqué comme favori, juste pour vérifier que si je passe en favori, j'ai ma page d'favoris. Super. Qu'en est-il de ces pages vides alors si nous empruntons un itinéraire indéfini ? Ce n'est pas 404 mais c'est une page qui n'a pas été trouvée. React Router explique comment gérer cela. Si nous allons dans la section FAQ ici, nous pouvons voir comment ajouter une route 404 sans correspondance dans React Router 6. Vous pouvez simplement l'utiliser. Nous allons le placer peut-être au bout ou en haut Si je ne me trompe pas, il peut être placé n'importe où. Au lieu de n'indiquer aucune correspondance importante pour le moment ou peut-être que nous ne la modifierons pas , nous allons simplement afficher données introuvables. Essayons. Nous accédons à l'application et chaque fois que nous empruntons itinéraire que nous n'avons pas défini, nous recevons un message introuvable. Mais si nous allons à la page d'accueil, nous avons une page d'accueil, si nous allons à la page d'accueil, nous avons marqué. Génial. Maintenant, comment pouvons-nous naviguer entre ces pages car nous avons des balises d'ancrage, mais nous ne pouvons pas vraiment utiliser de balises d'ancrage lorsque nous utilisons une bibliothèque de routage côté client comme React Router. Nous devons utiliser un composant spécifique pour cela. Rentrons à la maison et nous avons maintenant besoin de quelque chose appelé le composant link, que nous importons à nouveau à partir du composant dom link de React Router. Je vais juste afficher un composant de lien comme celui-ci, il s'agit essentiellement d'un wrapper autour de la balise d'ancrage, mais il est spécifique à React Router afin que React Router puisse comprendre que vous vouliez passer d'une route à une autre, puis nous allons l'appeler aller à la page d'étoiles. À ce composant de lien, nous devons transmettre message prop called, puis spécifier l'itinéraire que nous souhaitons suivre lorsque nous cliquons sur ce lien. Étant donné que notre composant marqué est défini sous le chemin marqué d'une étoile, lorsque nous cliquons sur Accéder à la page marquée d'un astérisque, nous accédons à l'itinéraire marqué d'une étoile. Revenons maintenant à la page d'accueil Si nous regardons le balisage, vous pouvez voir sous le capot qu'il s'agit en fait d'une balise d'ancrage qui mène à un itinéraire marqué d'étoiles. Si nous cliquons dessus, nous sommes maintenant sur la page des favoris. Cool, n'est-ce pas ? C'est ça. Eh bien, ce sont en fait les bases de React Router. Comme vous pouvez le constater, son objectif est de vous offrir cette expérience de navigation dans l'application React. Parce que, encore une fois, React ne dispose d'aucune solution intégrée pour cela, c'est pourquoi nous devons utiliser notre propre solution ou installer une bibliothèque qui nous fournit des fonctionnalités de routage. Je pense que c'est tout pour l'introduction à React Router. Dans la vidéo suivante, nous allons commencer à créer des mises en page et poursuivre avec notre application. À la fin, je voulais juste ajouter une note à propos de React Router, et pourquoi nous les appelons routes, pourquoi ne pas les appeler pages ? Le fait est que nous créons ce que l'on appelle une application d'une seule page. Une application d'une seule page n'est en fait qu'un seul fichier HTML d'index ici, c'est pourquoi elle est appelée application d'une seule page. Chaque fois que nous naviguons entre itinéraires ou que nous les appelons des pages, ce qui se passe réellement, c'est que React Router utilise JavaScript pour remplacer le balisage HTML , puis afficher les composants correspondants Nous appelons cela navigation, mais en gros, il prend simplement le code HTML existant, le supprime et insère un nouveau code HTML, puis il remplace l'URL par ce que nous faisons à spécifier comme itinéraire. Ici, tout est géré par JavaScript. Nous avons toujours la même page, cela ne change rien au fait que le HTML ne change pas ici, le squelette, le modèle, indexation ne changent pas, mais JavaScript imite en fait cette expérience de navigation. Ainsi, pour l'utilisateur final qui utilise l'application, il semble que nous naviguons sur des pages. Eh bien, nous pouvons dire que nous le sommes. Techniquement parlant, il s' agit simplement de supprimer le code HTML d'insérer un nouveau code HTML sur la page et de modifier le segment d'URL, c'est tout. Dans les applications traditionnelles, lorsque vous cliquez sur une autre page, la page est actualisée, et c'est à ce moment-là que vous pouvez naviguer comme dans la réalité, par exemple de page en page. Ici, dans ce que nous appelons la navigation côté client, la navigation côté client signifie que nous naviguons réellement dans les pages à l'aide de JavaScript. Maintenant, validons les modifications que nous avons apportées. Dans l'application, je vais peut-être la garder. Gardons-le pour référence future. Nous allons ajouter jsx, nous allons ajouter home, nous allons tout ajouter à stage, nous avons installé React Router, installé React Router, et finalement nous allons tout valider et dire Edit, React Router dom dans l'application ou peut-être installer React Router dom. Parfait. On se voit dans le prochain. 61. 05 Dispositions et navigation entre pages: Rebonjour. Dans cette vidéo, nous allons parler des mises en page, façon dont nous pouvons les gérer et de ce que sont les mises en page en premier lieu. Dans la dernière vidéo, nous avons installé et disons, configuré un routeur React. Il s'agit de la solution de routage que nous allons utiliser pour notre application. Maintenant, nous allons voir comment appliquer des mises en page, car nous avons mises en page, car nous avons une page marquée d'un astérisque et une page d'index, et supposons qu'elles partagent la même mise en page. Sur les deux pages, nous voulons voir la navigation. Ce que nous pouvons réellement faire, accéder à un composant d'accueil et mettre le lien ici. Ensuite, nous passons au composant marqué d'une étoile et mettons le lien ici, mais c'est beaucoup de répétitions. Nous voulons simplement avoir un balisage commun que nous placons au même endroit et qui soit affiché partout. En regardant cet exemple, si nous revenons à la documentation, si nous passons aux concepts principaux, au rendu, c'est à cet endroit que nous avons repris le balisage de la dernière vidéo. Nous pouvons voir quelque chose appelé Layout Routes. Si vous le lisez ici, cela indique essentiellement que cet élément de route qui entoure d'autres itinéraires n'est qu'un composant qui peut fournir une certaine mise en page aux itinéraires sous-jacents. Il ne représente pas la page elle-même. téléavertisseurs ne sont représentés que par des itinéraires qui définissent ici le chemin. Pour réaliser la mise en page, nous pouvons suivre cette approche. Si nous avons besoin de partager la mise en entre la page d'accueil et la page d'accueil, nous pouvons les intégrer, comme ici. Alors allons-y. Nous allons créer un composant d' itinéraire. Nous allons intégrer la page d'accueil et la page d'accueil aux favoris de cette manière. Nous pouvons spécifier un élément comme un seul accessoire sans aucun accessoire de chemin. Voici notre mise en page que nous aimerions voir pour ces pages. Comment allons-nous gérer cela ? Dans les tris, nous créerions un nouveau dossier et lui donnions le nom de composants. Ici, nous allons placer un nouveau composant, que nous appellerons MainPageLayout ou MainLayout. Ici, je vais créer la mise en page principale. Exportez-le ensuite à partir d'ici, exportez par défaut, MainLayout. Génial. Maintenant, nous allons importer cette mise en page à partir de composants, MainLayout. Ensuite, au lieu de la mise en page, nous allons utiliser la mise en page principale. Cependant, comment fonctionne-t-il exactement ? Parce que si j'ouvre ma mise en page principale, elle est complètement vide. n'y a rien là-dedans. Alors, qu'est-ce qui va être rendu ? Essayons de voir. Si nous revenons à l'application, maintenant, notre application est vide. Eh bien, que se passe-t-il ? Le fait est que, si vous vous en souvenez, dans React, nous avons quelque chose appelé accessoire pour enfants. Si nous définissons un composant et disons quelque chose comme ça, MainLayout et que nous lui transmettons quelque chose Tout ce que nous transmettons à l'intérieur de ce composant entre crochets d'ouverture et de fermeture deviendra disponible en . Tout ce que nous transmettons à l'intérieur de ce composant entre crochets d'ouverture et de fermeture deviendra disponible en tant qu'accessoire pour enfants que nous pouvons utiliser dans le balisage JSX à l'intérieur de ce composant. Cependant, avec le routeur React, cela ne ressemble pas à ça. Nous ne transmettons aucun enfant car nous le transmettons en tant que composant à fermeture automatique. Alors, comment fonctionne-t-il ? Si nous voulons regarder ici dans PageLayout, nous devons trouver quelque chose appelé outlet. Ici, sur la droite, il y a la section appelée outlet. Outlet est utilisé à l'intérieur ces composants qui représentent les mises en page. Ils représentent essentiellement les enfants, moins, le concept est très similaire à celui des enfants. Je passe pour cette série d'itinéraires. Cet élément possède la mise en page principale. Mais comme nous n'avons pas accès aux enfants ici, nous devons tout de même faire savoir à ce composant MainLayout que nous voulons afficher tout ce qui s'y trouve. Pour cela, le routeur React possède ce composant appelé outlet. Outlet fonctionne essentiellement comme les enfants, mais pour tous les itinéraires empruntés à l'intérieur de cette composante de l'itinéraire. Eh bien, c'est confus. Laisse-moi juste te montrer. Nous importons quelque chose de Reaction pour dom et ce quelque chose va devenir un exutoire. Au lieu d'écrire aux enfants, Outlet remplace. Nous n'utilisons pas d'enfants, nous utilisons juste une prise de courant. Juste comme ça. Ici, en haut de notre point de vente, nous allons dire qu'il s'agit d'un balisage partagé. Je l'enregistre. Je reviens en arrière et vous pouvez voir que ce qui est affiché ici est un balisage partagé , puis cette page est mise en favoris. En gros, la sortie représente ici tout ce que nous transmettons à l'intérieur de cette mise en page telle que définie par les composants de l' itinéraire. Maintenant, si nous rentrons chez nous, nous verrons exactement la même image. Nous avons ce balisage partagé. Nous allons maintenant ajouter une navigation qui sera partagée entre les pages. À l'intérieur des composants, je vais créer un nouveau composant, que je vais appeler Navs. Pour l'instant, comme toujours, ce sera div, qui dira quelque chose, puis exportera par défaut Navs. Super. Ensuite, dans le fichier principal, au lieu de celui-ci, se trouve un balisage partagé, nous allons afficher le composant Navs. Encore une fois, vous pouvez voir que j'ai commencé taper, mon curseur est à la fin. J'ai la liste déroulante avec l'intelligence et si j'appuie sur « Tab », maintenant, boum, elle est importée automatiquement. Cependant, faites attention à cela. C'est une fonctionnalité très importante, je dirais qu'elle permet d' importer facilement les autres fichiers, pas exactement ce à quoi vous vous attendez. Faites attention à cela et vérifiez toujours vos entrées. Nous sommes sous Navs ici. Dans Navs, nous aimerions afficher la navigation. Nous allons récupérer ce morceau de code que nous avons déjà sur la page d'accueil. Le composant de lien, vous vous souvenez, que nous utilisons pour naviguer entre les pages lorsque nous utilisons la bibliothèque côté client react-router-dom. Je vais copier le lien d'importation depuis react-router-dom. Je vais le placer dans Nav. Ici, nous devons afficher la navigation. Comment allons-nous nous y prendre ? Tout d'abord, nous devons définir boutons sur lesquels nous allons cliquer et passer d'une page à l'autre. Allons-y et définissons notre gamme de boutons, gamme d'éléments, qui seront nos liens. Ensuite, nous allons mapper ces liens au balisage JSX exactement de la même manière que nous l'avons fait avec l'historique dans Tic-tac-toe. Ici, en dehors de Navs, je vais créer un composant car nous connaissons un composant simplement une variable appelée liens. Il s'agira d'un ensemble d' objets et chaque objet aura la forme suivante. Il y aura du texte, et il le faudra. Ce sera quelque chose que nous transmettrons au composant lien et le texte sera le texte affiché. Le texte va arriver à la maison. Cela ira à l' itinéraire, à la page d'accueil. Ensuite, nous allons ajouter un autre objet ici. Nous allons l'appeler Starred. Cela nous mènera à l'itinéraire étoilé. Maintenant, nous devons prendre ce tableau et le marquer au balisage JSX. Donc ici, dans Navs, au lieu de div, nous pouvons afficher un élément UL, ou peut-être qu'à l'intérieur de div, nous allons afficher UL, restons comme ça. Maintenant, dans cette adresse URL, nous allons cartographier nos liens. Je vais donc ouvrir les crochets ici. Je vais le dire à Links.map. Maintenant, nous prenons l'objet. Nommons l'objet que nous mappons en tant qu'élément. Nous allons le mapper à l'élément li. À l'intérieur de cet élément li, nous allons le dire, veuillez afficher item.text et en tant que clé, parce que vous vous souvenez que lorsque nous mappons toujours des éléments selon le balisage JSX à l'élément d'encapsulation, nous devons transmettre une clé unique qui identifiera cet élément dans le balisage JSX en cours de mappage. Dans notre cas, le segment d'URL que nous utilisons ici est unique pour chaque élément, ou il peut s'agir de texte. Mais passons à la clé. L'article à va identifier notre élément. Nous devons également en faire un lien. Pour cela, nous utilisons le composant link, que nous importons depuis react-router-dom. Donc, au lieu du texte de l'élément, nous allons créer du texte de l'élément de lien. Pour l'accessoire de file d'attente à l'intérieur du lien adversaire, nous allons transmettre item.to. Ça va ressembler à ça. Maintenant, nous revenons à l'application et ce que nous voyons, nous voyons la navigation. Si nous cliquons sur Favoris, nous accédons à la page Favoris. Si nous cliquons sur Accueil, nous accédons à la page d'accueil. Cool, n'est-ce pas ? Félicitations, nous avons maintenant un composant de navigation, qui fonctionne plutôt bien, et nous avons utilisé des mises en page pour le gérer. Maintenant, nettoyons la page d'accueil et supprimons le lien ici et disons simplement Accueil. Maintenant, ça ressemble à ça. Génial, n'est-ce pas ? Peut-être, allons-y et ajoutons un titre. Créons un nouveau composant ici et appelons-le Title ou, disons, AppTitle. À partir de là, adoptons une autre approche, car nous avons toujours créé une fonction , puis nous l'exportions par défaut. Au lieu de cela, nous pouvons simplement dire export default, puis la fonction et ce qu'elle dit, let see component definition, n' pas de nom d'affichage, bien sûr. Donc, ce qu'elle veut que nous fassions, elle veut que nous fassions quelque chose comme ça. Fonction AppTitle. Parce qu'il veut que nous exportions une fonction qui porte réellement un nom, pas seulement une fonction anonyme comme celle-ci, mais avec le nom. C'est très bien. Cela rendra le code un peu plus déclaratif. Parfois, il est utile de détecter les erreurs qui peuvent provenir de différentes fonctions. Dans notre cas, ce ne sera pas le cas. Mais tout de même, explorons davantage la syntaxe JavaScript. Appelons-le ainsi. Donc, ici, au lieu de Navs et Outlet, nous pouvons afficher le titre h1. Le titre sera donc l'accessoire que nous allons recevoir. Encore une fois, puisque nous avons commencé à explorer davantage la syntaxe JavaScript, plutôt que de déstructurer, appliquons la déstructuration à un autre endroit. Nous recevons donc l'objet accessoire. Ici, sur la ligne suivante, nous allons appliquer la déstructuration, au lieu de l'intégrer directement dans les arguments. Nous allons donc récupérer le titre et le sous-titre. sous-titre se trouvera à l'intérieur du paragraphe, du sous-titre, et utilisons ce composant AppTitleComponent dans mise en page principale, juste en dessous de la navigation. AppTitle, encore une fois, IntelliSense et tab, et boum, il est importé. Voyons à quoi ça ressemble. Je ne vois rien ou ai-je oublié quelque chose ? Laisse-moi voir. Non, je ne l'ai pas fait. En fait, je l'ai fait. Si j'inspecte le balisage, je peux voir que j'ai mien mais qu'il est vide. Eh bien, que se passe-t-il là-bas ? Parce que, vous l'avez peut-être remarqué, mais j'ai lancé l'AppTitle sans qu' aucun accessoire n'ait été transmis. Cependant, AppTitle affiche le titre et le sous-titre. Comme nous ne les avons pas franchis, ils sont vides. Cela signifie qu'ils ne sont pas définis. Le titre n'est pas défini, le sous-titre n'est pas défini car encore une fois, nous ne les avons pas transmis. Dans ce cas, nous devons soit les transmettre, soit les saluer, soit autre chose. Boum, maintenant c'est ici, c'est affiché, tout fonctionne. Mais voici une alternative. Supposons que nous ayons des situations où nous ne transmettons aucun accessoire, juste pour une raison ou une autre. Peut-être que nous avons ce composant qui a été réutilisé à de nombreux endroits, de nombreuses fois, peu importe, et pas tout le temps que nous passons des accessoires. Pour cette raison, étant donné que les composants ne sont que des fonctions et que nous savons que nous pouvons appliquer arguments par défaut aux fonctions, nous pouvons faire exactement la même chose ici dans Components. Ainsi, à partir de l'objet props, l'objet props est toujours défini, il est au moins vide. De cet objet, nous détournons votre titre, sous-titre qui n'est pas défini sur cet objet parce que nous n'avons pas transmis d'accessoires. Mais nous pouvons leur appliquer des valeurs par défaut. Si nous ne transmettons aucun titre par défaut, ce sera Box Office and Subtitle, application de recherche de films, ou peut-être, appelons-le, recherchez-vous un film ou un acteur ? Juste une question, quelque chose comme ça. Notre structure finale ressemblera à cela. Si nous regardons à l'intérieur, vous pouvez voir qu'ils sont appliqués. Si je reviens à la mise en page principale, vous pouvez voir que je ne transmets rien, mais j'ai toujours mes valeurs par défaut. Si je veux les modifier ou les remplacer, je les transmettrais immédiatement et ils fonctionneront. Cependant, puisque nous les définissons ici dans AppTitle par défaut, nous n'allons rien transmettre ici aux accessoires. Mettons-le en fait au-dessus de Navs. Donc ça ressemble à ça. Génial. Je pense donc que c'est tout pour cette vidéo. En fait, nous avons fait beaucoup de choses et nous avons abordé de nombreux nouveaux concepts. Nous avons abordé les mises en page et la manière dont nous pouvons gérer les mises en page qui peuvent être partagées sur plusieurs pages. Si nous regardons à l'intérieur, nous utilisons ce composant de sortie, qui remplace les enfants, mais pour la définition de l'itinéraire que nous avons ici. Ensuite, nous avons également expliqué comment créer une navigation en utilisant le composant lien et en l'affichant dans un balisage partagé, ainsi que dans le titre et les arguments par défaut, ainsi que des valeurs par défaut pour les arguments ou pour les accessoires. Ça a l'air bien jusqu'à présent. Engageons-nous et terminons cette vidéo sur une bonne note. Je vais donc arrêter l'application. Je vais tout transmettre par un message. Je vais le nommer « navigation ajoutée et mise en page partagée pour les pages d'accueil et de démarrage ». Incroyable. On se voit dans le prochain. 62. 06 entrées: Rebonjour. Dans la dernière vidéo, nous avons géré les mises en page et la navigation au sein de notre application. Ça a l'air plutôt cool. Nous sommes maintenant en mesure de naviguer entre les différentes pages. Nous savons comment créer des itinéraires. La prochaine étape sera la zone de balises que nous avons sur la page d'accueil dans laquelle nous saisissons quelque chose, puis nous cliquons sur le bouton. Ensuite, nous prenons le texte de la zone de texte et l'envoyons à un backend, qui nous renvoie des données. Cependant, avant de pouvoir implémenter tout cela, nous devons comprendre comment gérer les entrées dans React. Dans cette vidéo, c'est exactement ce que nous allons faire. Passons donc au composant d' accueil et créons ici une entrée simple de type texte. Rien d'extraordinaire. Si nous allons à la page d'accueil, nous avons maintenant cet élément vide ici, une zone de texte vide. Nous ne pouvons pas faire grand-chose à ce sujet. Et si je voulais en tirer une certaine valeur ? Comment est-ce que je peux faire ça ? Parce que, dans le futur, nous allons ajouter un bouton ici et lorsque nous cliquerons sur ce bouton, nous devrons d'une manière ou d'une autre encapsuler la valeur de cette entrée. Grâce à Tic-Tac-Toe, vous savez que nous devons utiliser l'état chaque fois que la valeur change au cours du cycle de vie des composants. Chaque fois que nous saisissons quelque chose dans l'entrée, c'est la valeur qui change. C'est pourquoi, pour cette raison, nous allons utiliser React, utiliser State Hook. Alors allons-y. À partir de React, comme avant, nous allons en revenir à nouveau. Nous appelons donc usestate hook et à l'intérieur, nous devons transmettre une valeur par défaut qui sera la valeur de notre état initial lors du montage du composant. Comme ce sera un élément d'entrée et élément d'entrée est toujours une chaîne et si nous n'avons rien à l'intérieur, entrez uniquement des manuels vides, c'est toujours une chaîne mais vide. C'est pourquoi nous allons passer une chaîne vide ici. La raison en est que si nous ne spécifiez rien pour usstate, nous l'appelons simplement comme ça, par défaut, valeur d'état initiale ne sera pas définie. Donc, comme vous vous en souvenez, usstate renvoie un tableau contenant exactement deux éléments, où le premier élément est l'état lui-même. Nous allons donc appeler cet état valeur d'entrée. La valeur d'entrée de la fonction de mise à jour de l'état va être définie. Maintenant, comment pouvons-nous réellement écouter ces mises à jour où nous saisissons quelque chose dans la zone de texte ? Si vous vous en souvenez, nous avons des événements disponibles sur chaque élément HTML. Ils commencent donc par le préfixe on. Donc, si nous traitons des entrées, nous devons utiliser l'événement OnChange. Donc, pour cet événement OnChange, je vais transmettre un gestionnaire d'événements, et voyons ce que nous avons et quand cet événement se déclenche. Je vais créer une fonction ici , l'appeler OnInputChange. Si vous vous en souvenez, tous les gestionnaires événements reçoivent toujours un objet d'événement comme premier argument. Je vais simplement enregistrer l'objet d'événement sur la console , puis je vais transmettre OnInputChange en tant que gestionnaire d'événements OnChange. Maintenant, chaque fois que je tape dans l'entrée, je peux voir que quelque chose est enregistré sur la console chaque fois et si je développe cet objet, j'ai ici la propriété cible qui nous intéresse. cible de l'événement représente donc la cible de cet événement. Dans notre cas, il s'agira de l'élément d'entrée lui-même. Si je l'élargis ici, j'ai la propriété value, qui représente la valeur de cet élément d'entrée à la fois. C'est pourquoi nous pouvons continuer et enregistrer la cible des événements dans le journal de la console. Examinons d'abord la cible de l'événement, juste pour voir une fois de plus que chaque fois que nous tapons, cible d' événement représente notre élément HTML d'entrée. Sur cet élément HTML d'entrée, nous avons cette propriété de valeur, qui représente la valeur d'entrée à la fois. Chaque fois que je tape, vous voyez maintenant que nous pouvons accéder à la valeur que nous avons dans la zone de texte. C'est plutôt cool. Nous pouvons maintenant utiliser la valeur d'entrée définie, l'état des données. Dans cet état de données, nous pouvons transmettre la valeur cible de l'événement pour définir l'état. Désormais, chaque fois que nous saisissons, nous mettons à jour l'état avec la valeur cible de l' événement. Génial. Maintenant, la façon dont nous pouvons réellement voir que la valeur d'entrée est ce que nous écrivons dans les manuels. Comme vous vous en souvenez, nous pouvons simplement le mettre ici, enregistrer et vérifier sur la console, car la mise à jour de l'état déclenchera une nouvelle saisie du composant Lorsque les composants sont loués, . Lorsque les composants sont loués, JavaScript s'exécute à nouveau et à chaque nouvelle saisie, nous verrons le journal de la console. Essayons. Chaque fois que je tape, maintenant, je peux voir qu'en effet home.jsx6 à la ligne 6. Oui, j'ai ce journal de console, qui signifie que le composant entre à nouveau, notre état est mis à jour en fonction de l'entrée. Avec cette approche, nous avons un problème. Ce que vous voyez ici s'appelle la liaison de données unidirectionnelle. Ainsi, dans les frameworks de bibliothèques, vous aurez toujours ce concept de liaison de données unidirectionnelle ou de liaison de données bidirectionnelle. Qu'est-ce que cela signifie ? Ainsi, avec cette approche, nous avons introduit la liaison de données unidirectionnelle, écouterons les modifications dans la zone de texte et nous mettrons à jour l'état. Cependant, si nous mettons à jour l'état, nous ne mettons pas à jour la valeur de l'entrée. Essayons de voir ce que je veux dire. Donc, si nous voulions afficher cette valeur d'entrée quelque part sur la page, nous pouvons simplement utiliser l'interpolation. Juste comme ça. Nous savons déjà ce qu'il faut faire. Nous avons une valeur d'entrée ici. Faisons juste en sorte que cela fonctionne. Chaque fois que je tape, il est interpolé dans J6 et affiché. C'est plutôt cool. Comment pouvons-nous vérifier qu'il s'agit d'une liaison de données unidirectionnelle ? Je vais créer un bouton ici avec le bouton « Type », mis à jour au hasard. Pour le déclic, je vais dire, veuillez définir la valeur d'entrée sur quelque chose comme mon nom. Voyons ce que nous avons. Ainsi, chaque fois que je tape, mon état est mis à jour, mais si je clique sur « Mettre à jour de manière aléatoire », le texte saisi n'a pas été mis à jour. Alors, que se passe-t-il ici exactement ? En fait, jusqu'à ce que nous ayons une liaison de données unidirectionnelle, nous associons les modifications que nous apportons dans les manuels à l'état, mais nous n'avons pas lié l'état à la zone de texte, à l'entrée. Pour résoudre ce problème, nous devons transmettre un attribut de valeur à l' élément d'entrée afin que, quelle que soit la valeur dans l' état que nous avons, elle soit mappée liée à la valeur de la zone de texte. Donc, pour l'attribut value, je vais transmettre la valeur d'entrée. Voyons si je tape quelque chose ici, puis je clique sur « Mettre à jour au hasard ». Maintenant, le texte a été mis à jour non seulement ici, mais il a également été mis à jour dans l'élément d'entrée. Parce que nous avons désormais une liaison de données bidirectionnelle. Si nous mettons à jour l'état, cela met à jour la zone de texte, et si nous mettons à jour la zone de texte, cela met à jour l'état. Il fonctionne dans les deux sens, fonctionne dans les deux sens, contrairement à ce que nous faisions auparavant. Si nous passons au changement et que nous ne conservons que de la valeur ici, il en sera de même. Il s'agira d'une liaison de données unidirectionnelle. Nous avons cette erreur qui indique que vous avez fourni un accessoire de valeur sans gestionnaire OnChange. Même React vous indique que quelque chose ne va pas ici. Comme vous pouvez le constater, liaison de données unidirectionnelle peut être très délicate. Vous devez donc toujours vous rappeler ce qui vous convient le mieux. Je dirais que dans la plupart des cas, vous remarquerez peut-être même pas que liaison de données à sens unique peut potentiellement poser des problèmes, et dans la plupart des cas, ce n'est pas le cas. Cependant, la liaison bidirectionnelle des données est importante et vous devez comprendre la différence entre les et savoir comment en tirer parti. Jusqu'à présent, dans cette vidéo, nous avons appris à gérer l'état à l'aide d'entrées. Comment les utiliser pour modifier l' élément d'entrée et l'état de mise à jour. Nous avons également appris ce qu'est la liaison de données unidirectionnelle, qu'est-ce que la liaison de données bidirectionnelle, quelle est la différence entre les deux, et pourquoi la liaison de données unidirectionnelle peut être délicate. Il est toujours préférable d'utiliser liaison de données bidirectionnelle en cas de doute. Je pense que c'est ça. Vous savez maintenant tout ce dont nous avons besoin dans la vidéo suivante. Nous allons créer un bouton ici. Nous allons récupérer tout ce que nous écrivons dans la zone de texte et l'envoyer à l'API. Voyons comment ça va se passer. On se voit là-bas. 63. 07 Soumission de formulaire: Salut, voilà. Comme vous vous en souvenez, dans la dernière vidéo, nous avons parlé des entrées, façon dont nous pouvons gérer les entrées, manière dont nous pouvons lier la valeur d'entrée à l'état et de la différence entre liaison de données bidirectionnelle et unidirectionnelle. Dans cette vidéo, nous allons envoyer des données que nous écrivons dans une zone de texte à une API, et les résultats de l'API nous seront renvoyés afin de pouvoir afficher quelque chose dans notre application à l'utilisateur. Dans la dernière vidéo, nous avons fait tout cela dans Home.jsx. En fait, nous pouvons le garder, nous allons simplement placer ce bouton ici, juste en dessous de la saisie, afin de pouvoir taper du texte. Nous avons déjà InputValue et OnInputChange. Peut-être pouvons-nous le nommer quelque chose comme SearchString, car ce sera essentiellement notre chaîne de recherche pour les résultats de recherche. Nous pouvons renommer l'état en SearchString, Searchs-T-R et définir Searchs-T-R. Nous n'avons pas besoin de le sortir, la valeur sera SearchString, et onChange sera OnSearchString, ou OnSearchInputChange, et nous allons mettre à jour SearchString. Ensuite, pour ce bouton OnClick, nous allons le supprimer complètement. Nous allons intégrer ces deux éléments dans un formulaire, puis nous allons tirer parti de l'attribut Form OnSubmit. En fait, les formes React fonctionnent légèrement différemment. Dans les applications d'une seule page, vous utilisez des formulaires légèrement différents de ceux des applications traditionnelles. Dans les applications traditionnelles, lorsque vous cliquez sur « Soumettre » et que vous avez un formulaire, vous devez définir une action qui vous amènera à une autre page. Lorsque vous cliquez sur « Soumettre », l'utilisateur est redirigé et envoie des données vers une autre page. Dans les applications d'une seule page et les applications Web modernes, cela n'est pas géré de cette manière. Comment est-il géré alors ? Sur le formulaire, nous avons mis la méthode OnSubmit, et cette méthode OnSubmit sera la fonction que nous appellerons OnSearch. Encore une fois, puisqu'il s'agit d'un gestionnaire d'événements pour l'événement d'envoi, nous avons l'objet d'événement. Essayons de ne rien faire pour l'instant, ce qui passera pour OnSubmit OnSearch. Encore une fois, comme il s'agit d'un formulaire , et non d'un bouton saisie, pour que nous puissions soumettre le formulaire, nous devons spécifier que ce bouton sera du type Soumettre. Lorsque nous cliquons dessus, le formulaire est soumis et, au lieu de le mettre à jour au hasard, il s'agit d'une recherche. Quelque chose comme ça. Essayons de voir si je tape quelque chose ici et si j'appuie sur « Entrée » ou si je clique sur « Rechercher », laisse-moi appuyer sur « Entrée ». Voyez-vous que l'application a été actualisée ? Vous pouvez voir que la page a été actualisée. Maintenant, j'ai ce point d' interrogation en haut. Cela est dû au fait que nous n'avons pas géré le formulaire correctement, car il pense que le formulaire, l'action, doivent être gérés par une autre page. Il essaie de rediriger vers une autre page pour soumettre des données. Cependant, tout comme le fait un outil dans les applications Web modernes, ce n'est pas ainsi que les formulaires sont gérés. Pour que OnSubmit empêche l'actualisation de la page, nous devons empêcher l'action effectuée par l'événement d'envoi. Pour cela, nous appelons event-prevent default. En appelant cette méthode, nous empêchons le comportement par défaut de cet événement. Si je rafraîchis la page, permettez-moi de supprimer le point d' interrogation en haut. Maintenant, je tape quelque chose, je clique sur « Enter ». Tu vois que rien ne se passe. Dans notre cas, au lieu que rien ne se passe, nous devons réellement envoyer des données à l'API. Quelle sera l'API ? Comment allons-nous gérer cela ? Par où allons-nous commencer ? Si nous allons deviner ici, si nous faisons défiler la page vers les ressources, vous pouvez trouver l'API TVMaze ici. Ouvrons ce lien. L'API TVMaze est une API publique qui peut nous fournir des informations sur différents films et acteurs. Il est totalement gratuit et a un quota illimité, et il est public. Vous pouvez simplement ouvrir cette URL et suivre la documentation. Il est assez bien documenté avec bons exemples et de bonnes explications sur les paramètres qu'il possède. Ce qui nous intéresse, c'est en fait le tout premier paragraphe, qui dit « Afficher la recherche ». Il contient cette URL, et voici un exemple. Essayons de l'ouvrir dans un nouvel onglet. Comme vous pouvez le constater, nous avons des données ici. Nous y accédons et nous récupérons les données. Si vous regardez l'URL, nous fournissons ici le paramètre q, chaîne de requête, paramètre q, chaîne de requête, et si je le remplace par autre chose, cela me donnera résultats différents en fonction de la chaîne de recherche. Ce paramètre q est essentiellement la chaîne de recherche. Vous pouvez en savoir plus à ce sujet dans la description de ce que fait ce point de terminaison. Nous allons utiliser ce point de terminaison dans notre application. Revenons en arrière et mettons-le ici. Je vais juste le commenter. Maintenant, vous avez peut-être une question. Comment envoyer une demande à cette API ? Eh bien, nous pouvons y accéder dans le navigateur, mais comment pouvons-nous le faire dans l'application ? Eh bien, dans le navigateur, nous avons une API Web appelée Fetch. La fonction Fetch est disponible dans le monde entier dans l'environnement du navigateur, nous pouvons donc l'utiliser dans JavaScript. Ce que fait Fetch, c'est envoyer une requête à l'URL fournie. Nous pouvons prendre cette URL, nous pouvons appeler Fetch. Encore une fois, c'est une fonction qui envoie des requêtes et elle est disponible dans le monde entier dans le JavaScript du navigateur. Nous appelons cette fonction Fetch ici et nous transmettons l'URL à l'intérieur. Je clique sur « Enter » et comme vous pouvez le voir, cela nous renvoie une promesse, un objet de promesse. Cela signifie que nous avons commencé à travailler avec du JavaScript asynchrone. C'est là que les choses commencent à devenir intéressantes. Pour tirer parti de la promesse, nous devons attendre cette promesse ou la résoudre. Pour l'instant, nous allons utiliser la syntaxe .then ici. Cette fonction Fetch aboutit à l'objet de réponse. La promesse renvoyée par Fetch est renvoyée à l'objet de réponse, qui représente la réponse à cette demande. Appelons-le ainsi. Je vais l'appeler réponse, et essayons de répondre à console.log. C'est l' objet de réponse que nous avons. Il représente l' état de la réponse, l'URL utilisée, les en-têtes et quelques éléments différents. Cependant, cet objet de réponse possède également méthode .JSON disponible en réponse à JSON. C'est également une méthode qui renvoie une promesse. La promesse est transmise au corps de la réponse. Ce que vous voyez ici dans le navigateur est le corps de la réponse. C'est essentiellement ce qui est renvoyé par le serveur, la réponse, donc nous l' obtenons au format JSON. C'est pourquoi nous appelons la méthode .JSON. Encore une fois, cela renvoie une promesse qui s'adresse au corps. Qu'est-ce qu'on va faire ? Nous allons d' abord enchaîner plusieurs denses ici , puis nous allons appeler méthode .JSON sur l'objet de réponse. Ensuite, nous renvoyons cette promesse depuis .then callback, ce qui signifie que le prochain .then, elle sera résolue. Dans ce qui suit, nous aurons notre charge utile ou notre corps de réponse. Appelons-le body et console.log body. Maintenant, cette chaîne nous a donné ce tableau de 10 éléments. Si nous l'étendons, vous pouvez voir que ce sont les données que nous avons ici dans la fenêtre du navigateur. Cool. Mais maintenant, nous gérons cela par programmation à l'aide de l'API Fetch. Exactement la même chose, nous pouvons le faire non seulement ici, mais aussi dans notre code, car ce que nous écrivons ici sera du JavaScript du navigateur côté client et nous l'avons simplement joué ici directement dans le navigateur mais cela n'a pas d'importance. C'était juste pour vous donner un aperçu de la façon dont cela va se passer. Mais nous allons le faire ici, dans notre code. Dans OnSearch, nous allons appeler cette API Fetch tvmaze.com/search/shows. Maintenant, au lieu d'utiliser la syntaxe .then, nous pouvons utiliser async-await pour la rendre plus lisible. Pour utiliser wait, si vous voyez que je passe la souris dessus, cela indique que les expressions d' attente ne sont autorisées que dans les fonctions de synchronisation, expressions d' attente ne sont autorisées que dans les fonctions de synchronisation ce qui signifie que nous devons marquer cette fonction comme synchronisée, et maintenant le message disparaît. Nous attendons Fetch, puis nous obtenons une réponse. Ensuite, nous avons body by await Response.json. Ici, lorsque je tape la réponse et que j'appuie sur « Point », vous pouvez voir que j'ai maintenant l'IntelliSense, qui me donne la méthode .JSON. Si je l'appelle, vous pouvez voir la fenêtre apparaître, ce qui signifie qu'il est prometteur. Maintenant, nous avons un corps. Si nous essayons d'annuler le corps du journal ici, et que nous revenons à notre application, où se trouve-t-il ? Ici. En fait, peu importe. Si je tape quelque chose ici, je peux voir des données qui proviennent de la ligne 16 de Home.jsx, de notre journal de console ici, ce qui signifie que nous avons simplement effectué la recherche par programme. Nous envoyons une demande. Si nous ouvrons l'onglet réseau ici et si je clique sur « Rechercher », vous pouvez voir que nous envoyons une demande à l'URL que nous avons spécifiée dans Fetch, et si nous prévisualisons, nous obtenons les données. Génial. Maintenant, rendons cette demande dynamique car nous avons la chaîne de recherche ici, mais nous envoyons de la voix tout le temps. Nous avons indiqué ici SearchString, afin que nous puissions la transmettre au Fetch en remplaçant la chaîne statique par des backticks. Au lieu de garçons, ici, nous pouvons interpoler notre SearchString. Maintenant, essayons de créer le corps du journal de la console. Encore une fois, je rafraîchis. Je tape filles. Je clique sur « Rechercher ». Si je regarde dans l'onglet Réseau, je peux voir que j'envoie des requêtes de recherche à des filles. Si je tape autre chose, vous pouvez voir que ce sera autre chose. Si je tape du charabia, ce sera du charabia. Notre demande est dynamique. C'est cool, non ? Vous savez maintenant comment nous allons pouvoir récupérer les données. Vous pouvez voir que tout est maintenant connecté en un seul morceau de ces quelques lignes. Super. Nous utilisons l'API TVMaze. Tu peux le lire jusqu'au bout. C'est très simple avec de bons exemples, il suffit de parcourir rapidement la boîte. Dans la vidéo suivante, nous allons rendre cette fonction réutilisable et nous essaierons d'afficher les résultats que nous recevons ici de l'API. Ce corps, nous allons essayer de l' afficher dans notre balisage JSX. Permettez-moi de valider les modifications que nous avons apportées. Je vais cliquer sur le signe plus. Je vais arrêter l'application et je vais dire : laissez-moi voir quelles modifications j'ai apportées ? Supposons que vous recherchiez des films ou des émissions en cliquant sur un bouton. Disons qu'une zone de texte ou une recherche ont été ajoutées. Recherchez des émissions en cliquant sur le bouton. Quelque chose comme ça. Ensuite, téléchargez-le sur GitHub et passez au suivant . On se voit là-bas. 64. 08 Rendu des données d'exposition de TV Maze API: Rebonjour. Dans cette vidéo, nous allons enfin afficher les résultats que nous obtenons de l'API. Dans la dernière vidéo, nous avons appris comment interroger données en fonction de ce que nous saisissons dans l'élément d'entrée. Cette fois, nous allons essayer d'afficher les données que nous recevons de l'API TVMaze que nous utilisons pour interroger des données. Allons-y. Si nous revenons à notre code, nous avons la logique suivante pour récupérer les données. Cependant, nous allons également utiliser la même logique dans d'autres pages. Pourquoi ne pas créer un wrapper très simple autour de ces fonctions afin qu'il soit plus facile de les réutiliser dans d'autres fichiers ? Ce que je vais faire dans la source, c'est créer un nouveau dossier, que je vais appeler quelque chose comme API ou peut-être comme utils ou vous pouvez l' appeler comme vous le souhaitez. Il suffit de le séparer du reste de la logique du reste du fichier et il sera plus facile de le retrouver. Ici, je vais créer un fichier appelé tvmaze.js, et créer un fichier appelé tvmaze.js, à l'intérieur de ce fichier, que vais-je faire ? Je vais créer une fonction réutilisable que nous appellerons ApiGet. Cet APIget ne recevra que le nom du chemin de l'URL, comme vous le voyez dans la documentation. Nous ne transmettrons ce segment d'URL qu'à la fonction, et la fonction s'occupera du reste. Au lieu de cela, nous appellerons simplement ApiGet, puis nous allons transmettre émissions de recherche et une chaîne de requête, quelque chose comme ceci. Cependant, nous pouvons aller encore plus loin et créer un autre wrapper pour cela. Au lieu d'utiliser cette fonction comme ça, nous pouvons simplement appeler la fonction search for shows, puis nous transmettre la chaîne de recherche, et c'est tout et le reste, toute cette logique, sera géré à l'intérieur. Plutôt cool. Allons-y et mettons-le en œuvre. Tout d'abord, nous devons créer cet APIget afin de pouvoir l'utiliser comme ça. Cet APIget sera une fonction qui reviendra sous forme de promesse, qui sera le corps de la réponse, comme ici. Finalement, ça va ressembler à ça. Allons-y et faisons-le. Nous transmettons la QueryString ici. Le premier argument que cette fonction recevra sera QueryString. Cette fonction va utiliser fetch these two lines. Je vais les copier à partir d'ici. Puisque nous utilisons le mot clé await ici, nous avons l'intention d'utiliser async-await Je marque donc cette fonction comme asynchrone et, à partir de cette fonction, je renvoie un corps. Cependant, nous obtenons cette URL codée en dur ici. Nous pouvons le déplacer à l'extérieur juste pour le déclarer quelque part en haut afin savoir quelle est la BASE_URL ici. Ici, en haut, je vais juste créer une variable appelée BASE_URL et ce sera https://api.tvmaze.com sans barre oblique. Ensuite, je vais juste l'interpréter dans l' appel de récupération BASE_URL. Au lieu d'utiliser des barres obliques puis une chaîne de recherche, je vais simplement appliquer cette chaîne QueryString que nous passons comme argument, qui sera cette chaîne avec la barre oblique initiale. Au lieu de tout cela, je vais simplement utiliser QueryString. Finalement, notre URL ressemblera à ceci. Cela prendra BASE_URL et prendra la QueryString que nous transmettons à partir des arguments. Finalement, ce type d'URL sera créé. Maintenant, allons-y. Nous avons convenu que nous allions plus loin qu' ApiGet et que nous avons créé une autre fonction d' ApiGet, que nous appelons SearchForShows, afin de ne pas transmettre de barres obliques à la recherche et aux émissions de barres obliques. Si vous voulez gérer cela, il sera géré en un seul endroit, dans un seul fichier ici dans tvmaze.js. À partir de là, je vais exporter car nous allons l'utiliser plus tard dans la fonction d'accueil appelée export const searchForShows. Encore une fois, cette fonction ne recevra que la QueryString, tout ce que nous saisissons dans l'entrée. Ce sera une requête. Nommons-la simplement query. Cette fonction que nous appellerons ApiGet et qui transmettra la recherche, les affichages et la requête sera une requête que nous transmettrons. Nous appellerons cela ApiGet et tout ce qu'ApiGet retournera sera renvoyé par SearchForShows. J'utilise ici la syntaxe courte des fonctions de flèche. Cette syntaxe, qui n'utilise pas explicitement le corps de la fonction entre crochets renvoie tout ce qu'ApiGet renvoie. C'est la même chose que d'écrire return APIget. Pour le raccourcir, nous l'utilisons comme ceci. Je l'enregistre, et maintenant je peux utiliser ce SearchForShows dans mon fichier home.jsx. Je vais importer depuis, nous revenons en arrière pour le niveau supérieur. Nous récupérons api/tvmaze, et nous saisissons SearchForShows. Maintenant, nous pouvons supprimer tout cela et appeler SearchForShows avec la QueryString, qui sera notre SearchString. Comme ça. Si nous voyons les résultats, appelons-le ApiData et enregistrons ApiData, et nous revenons à l'application. Quoi que nous saisissions ici, inspectons l'onglet Réseau. On tape filles, on appuie sur « Entrée ». Vous pouvez voir que la demande est correctement formée l'URL de la demande est correcte. Tout a parfaitement fonctionné. Si nous regardons à l'intérieur de la console, nous pouvons voir que sur la ligne 15 de home.jsx, exactement là où se trouve le journal de notre console, c'est ce que nous recevons. Il s'agit de nos données API. Maintenant, que pouvons-nous faire ? Nous pouvons créer un autre état et toutes les données que nous recevons ici, nous pouvons les placer dans cet état, car encore une fois, les données API que nous recevons sont des données qui changent au cours du cycle de vie des composants car ce sont des données que nous recherchons. Il peut être vide, il ne peut pas être chargé, quelque chose pourrait s'y coincer. Je vais maintenant créer un nouvel état, que nous appellerons ShowsResult ou nommons-le simplement ApiData et SetApiData, et il sera utilisé comme état ici. Par défaut, ce sera un tableau vide, ou peut-être qu'il sera nul par défaut. Voici ce que je vais faire, cette variable de longueur 15, je l'appellerai résultat ou réponse. Oui, appelons-le résultat et je vais appeler SetApiData, et SetApiData sera le résultat. Quel que soit le tableau que nous recevons ici, nous le placerons dans notre état APIdata. Alors nous savons déjà quoi faire avec les tableaux. Vous vous en souvenez. Nous pouvons mapper chaque élément à un JSX Barker, puis l'afficher. Ce que nous allons faire juste en dessous du formulaire. Créons un div ici. Ce que nous allons faire, c'est créer une fonction ici. Au lieu d'intégrer la méthode de la carte à points ou commençons par intégrer cette méthode de carte à points. Il y a une chose à garder à l'esprit lors de la cartographie. Nous allons appeler APIdata map. Nous avons des données ici et pour l'instant, nous allons les mapper en un simple div. Examinons le type de données dont nous disposons ici. Quelle est la forme des données ? Nous avons une panoplie d'objets. Si nous inspectons cet objet de données qui représente cet objet que j'ai surligné, il possède une clé de score , puis une clé d'affichage. À l'intérieur de l'émission, nous avons un nom, nous avons une URL d'identification. Pour l'instant, affichons uniquement le nom. Nous devons accéder à data.show. J'interpole data.show.name. Vous devez toujours vous rappeler que vous devez transmettre l'accessoire clé. La clé doit être quelque chose unique puisque nous traitons des données d'API. Les données d' API, lorsqu'elles proviennent de Beckoned, ont généralement un identifiant, et l'ID représente de manière unique l'élément. ID est l'étui idéal pour le porte-clés. Les données affichent un identifiant permettant d' identifier de manière unique l'élément mappé. Essayons. Nous accédons à l'application et qu'avons-nous ici ? Nous avons déjà l' erreur qui dit qu'il impossible de lire les propriétés de null, en lisant la carte. Si je rafraîchis la page, je verrai toujours cette erreur. Que se passe-t-il ? Le fait est que notre état initial ici est nul. Cela signifie que lorsque le composant s'affiche, les données de l'API d'état seront nulles. Comme nous n'avons cliqué sur aucun bouton, nous n'avons obtenu aucun résultat. L'état est nul. Si nous essayons de mapper null, nous obtenons cette erreur car, en gros, notre code ressemble à ceci, null.map. Eh bien, c'est faux. C'est pourquoi nous voyons cette erreur. Il dit qu'il est impossible de lire les propriétés de null, en lisant la carte. qui signifie qu'il essaie de faire null.map. Comment pouvons-nous surmonter ce problème ? Nous pouvons le faire de plusieurs manières. Le moyen le plus simple de résoudre ce problème est de changer l'état initial de zéro à un tableau vide. Permettez-moi de revenir aux données de l'API. Si nous le changeons en tableau vide, chaque fois que nous n' avons pas de données, puisque le tableau est vide, nous ne verrons rien. Parce que bon, rien ne sera cartographié en fin de compte. Lorsque nous recherchons quelque chose comme « garçons et que nous obtenons les résultats de l'API, chaque élément de l'API est mappé au div correspondant avec le nom de l'émission. Cependant, ce que je veux également vous montrer, au lieu d'utiliser un tableau vide comme état par défaut, nous pouvons toujours utiliser null, mais nous pouvons gérer notre logique légèrement différemment. Allons plus loin et créons une fonction d'assistance que nous appellerons RenderRapidata. Au lieu d'intégrer directement la méthode .map ici, qui appellera comme vous vous en souvenez, nous l'avons déjà fait, RenderRapidata et nous allons gérer une logique de rendu de manière conditionnelle dans cette fonction. Ici, je vais créer RenderRapidata. Au lieu de l'utiliser, je dirais que notre état initial est nul, souvenez-vous. Lorsque nous essayons d'afficher des valeurs nulles, nous obtenons une erreur car nous ne pouvons pas mapper les valeurs nulles. Nous pouvons simplement vérifier si les données d'API sont nulles ou si nos données d'API sont fausses, nous renvoyons la valeur null. Sinon, nous savons que ce sera certainement un tableau une fois qu'il sera défini. Ou peut-être pouvons-nous inverser la logique pour qu'elle soit plus lisible et meilleure. Nous pouvons le dire. Si nous avons des données d'API, si les données sont véridiques, elles ne sont pas nulles. C'est quelque chose comme un tableau, par exemple. Dans ce cas, nous avons appelé la méthode .map pour renvoyer ApiData, carte, des données, puis la logique que nous avons. Sinon, par défaut, si cette condition échoue et que les données de notre API sont fausses, elles tomberont ici, passeront à côté de cette condition. Ensuite, par défaut, nous ne retournons rien. N'oubliez pas que les résultats nuls seront rendus dans le balisage JSX. Si nous revenons à l'application, vous pouvez voir que rien ne s'affiche. Cela est dû au fait que les données de notre API sont initialement définies sur null. C'est pourquoi nous rendons nul. Mais dès que je recherche l'API, j'ai mes données ici. Génial. Chaque fois que je change de requête, elle sera mise à jour. Il suffit de regarder ça, quoi ça ressemble ? Une autre chose que je voudrais ajouter ici est en fait le traitement des données. Je sais que nous avons déjà abordé beaucoup de choses et que c'est encore beaucoup. Mais qu'en est-il des erreurs ? Si la demande que nous avons envoyée ici, si nous examinons le réseau, si la demande que nous avons envoyée ici échoue pour une raison quelconque, elle générera une erreur. Que se passe-t-il dans ce cas ? Nous pouvons en fait émuler cette erreur dans la recherche d' émissions ou dans les données de l'API. Ainsi, au lieu de simplement faire une recherche dans l'API, nous pouvons simplement générer une erreur jusqu'à ce que quelque chose de grave se produise. C'est exactement ce qui se passera si cette demande échoue pour une raison quelconque, quelque chose de grave s'est produit. Essayons de voir. Nous avons du code inaccessible, qui provient à nouveau d'eslint. Eslint, tu m'as beaucoup sauvé. Pour l'instant, nous allons simplement commenter cela. Je vais chercher n'importe quoi, quelque chose comme bonjour. Si je clique, rien ne se passe. Mais vous pouvez le voir ici dans la console, nous n'avons pas été pris au piège erreur de promesse, quelque chose de grave s'est produit. Dans ce cas, nous devons toujours nous rappeler que lorsque nous avons affaire à du JavaScript asynchrone, lorsque nous avons affaire à des API, nous devons toujours détecter et gérer les erreurs, même si vous êtes sûr de cette API, et de la moindre erreur. Eh bien, tu dois changer d'état d'esprit. Quelque chose finira par entraîner une erreur, vous devez donc vous assurer de la gérer. Dans ce cas, dans cette attente de recherche d'émissions, nous pouvons l'encapsuler et essayer de détecter les erreurs. Je vais essayer de déplacer ces deux lignes à l'intérieur. Si quelque chose échoue à l'intérieur du bloc try, il affichera l'erreur à l'intérieur du bloc catch. Nous pouvons créer un autre état, et quelle que soit l'erreur que nous recevons ici, nous pouvons la placer dans cet état. Ici, en haut, je vais créer ApiDataError et l'état SetApidataError. Par défaut, il sera également nul. Je vais continuer et, dans Catch Block, je vais simplement appeler SetApidataError pour signaler l'erreur que nous avons ici. Maintenant, si nous essayons d' annuler l'erreur de journal, l'état, par défaut, est nul. Mais chaque fois que nous avons une erreur, nous pouvons voir que nous avons l'autre objet dans notre état. Nous pouvons l'utiliser dans RenderRapidata et afficher n'importe quel message d'erreur en cas d'erreur. Nous pouvons savoir si nous avons une erreur APIDataError. Dans ce cas, veuillez afficher div, qui indique qu'une erreur s'est produite, et nous pouvons interpoler ApiDataError.message puisque notre APIDataError sera l'objet de l'erreur. Essayons. Si vous vous en souvenez dans API Gateway, quelque chose de grave s'est produit. Nous disons que cela n'a pas d'importance. Nous cliquons sur Rechercher et nous voyons maintenant qu'une erreur s'est produite, quelque chose de grave s'est produit. Cool. Cependant, nous devons également nous rappeler que nous devons mettre à jour cet état si nous cliquons une fois sur Rechercher, nous constatons que cette erreur s'est produite. Ensuite, nous cliquons la prochaine fois sur Rechercher, puis la demande suivante est traitée. Cependant, les données de notre API dans notre État sont instables. Il a toujours son état antérieur, il sera donc affiché. Nous devons nous assurer de le nettoyer avant chaque demande que nous envoyons. Nous appelons SetApidataError pour connaître l'état initial. C'est ainsi que nous gérons le flux complet de nos demandes. Nous pouvons maintenant supprimer une nouvelle erreur et partager la logique. Revoyons tout en action. Je cherche des filles, j'ai des filles, j'ai des garçons, et j'ai tout ce que je tape ici. Tout fonctionne comme prévu. Au cas où nous aurions une erreur renvoyée par l'API, elle sera traitée ici. Comment pouvons-nous tester cela ? En fait, nous pouvons simplement taper du charabia en euro et voir ce que l' API nous donne. J'ai tapé « filles ». Je clique sur Rechercher. Vous pouvez voir dans l' onglet Réseau qu'il est maintenant rouge. Il indique 404, ce qui signifie que nous avons fait quelque chose de mal. Ce paramètre n'existe évidemment pas. Notre API vers l'API VMA a renvoyé une erreur. Dans notre cas, il a renvoyé une erreur. Il vient de renvoyer un message d'état 404. Fetch a compris qu' il s'agissait d'une erreur, mais aucun message d'erreur n'a été affiché. Il indique que la récupération a échoué par défaut. Maintenant, si nous essayons de le changer à nouveau. Si nous cherchons des garçons. Maintenant, tout est affiché. C'est cool, non ? Je pense que ça a l'air incroyable. Nous avons géré toutes les situations possibles qui pourraient mal tourner. Nous avons maintenant une logique assez robuste, non seulement pour créer des données, mais aussi pour gérer les erreurs, et pour afficher les données provenant de l'API, quelque chose comme ça. Je pense que nous avons en fait abordé beaucoup de choses ici. Nous avons parlé de différents états, de récupération de données, détection d'erreurs, affichage des données. C'est beaucoup. Finissons-en. Git add, git commit. Appelons-le fetch et affichons les données de l'API tvmaze. Créez une fonction réutilisable pour récupérer des données. Pour la fonction réutilisable, je fais référence à la recherche d'émissions. Génial. Engageons-nous et poussons tout à maîtriser. Je te verrai dans le prochain. 65. 09 Fix Prettier ne fonctionne pas: Bonjour. Cette vidéo va être rapide car je viens de remarquer un petit problème dans la configuration du projet. Le problème est ce fichier plus joli. J'ai donc mal orthographié le nom du fichier et à cause de cela, le conflit que nous avons spécifié ici n'a pas fonctionné. Cependant, vous avez peut-être remarqué que lorsque j'enregistrais des fichiers, ils n'étaient plus formatifs. En effet, l'extension Prettier est installée et, par défaut, lorsque cette extension ne trouve pas la configuration placée dans votre projet, elle reviendra à la configuration définie quelque part en interne dans cette extension. C'est pourquoi cela fonctionnait toujours. Cependant, il n'a pas utilisé ce conflit. Pour résoudre ce problème, permettez-moi de renommer ce fichier en prettierrc. Alors maintenant, il peut réellement être récupéré. Si je passe à, disons, au composant de l'application et que je l'enregistre, maintenant vous voyez que j'ai en fait guillemets simples tels que définis dans Prettier Conflict. Cependant, pour résoudre le petit problème, je dois parcourir chaque fichier dans la source. Cela peut être fastidieux et nous n'avons pas beaucoup de fichiers, nous pouvons donc le faire manuellement, mais voici un conseil. Nous pouvons utiliser une interface en ligne commune plus jolie et écrire un petit script qui formera source interne d'un ancien fichier. Si je vais dans Prettier Documentation, je clique sur Docs et, dans la section Utilisation, peux rechercher la CLI, je peux trouver cet extrait ici. En pratique, cela peut ressembler à ceci. Je peux juste copier celui-ci. Accédez au package JSON, définissez un nouveau script ici, que j'appellerai format, où j'écrirai un plus joli tiret, un point d'écriture. Dot formatera tous les fichiers du répertoire actuel, mais je ne veux pas le faire. C'est pourquoi je vais le changer source point blast streaks, astérix, point, puis crochets bouclés, JS, JSX. Pas de panique, c'est ce qu'on appelle modèle de glob ou une syntaxe de glob. Il est utilisé pour faire correspondre des fichiers et Prettier peut accepter ce modèle ou cette syntaxe comme argument. Il recherchera donc tous les fichiers contenus dans source et dans les anciens sous-dossiers et recherchera uniquement les fichiers avec les extensions dot JS et dot JS6. Je vais le sauvegarder. Je vais utiliser le format d'exécution NPM. Voyons ce que nous avons. Maintenant, nous pouvons voir le résultat. Ce sont donc tous les fichiers qui ont été formatés par le script de formatage par fonctionnalité. C'est plus joli ici que celui auquel je fais référence, il sera récupéré à partir des modules Node car nous l'avons installé en tant que dépendance de développement. Nous écrivons donc plus joli ici dans les scripts NPM et cela se transformera en plus joli installé à partir des modules Node, aussi simple que cela. Maintenant que tout est corrigé, validons tout et disons corriger une erreur de configuration plus jolie, ajoutons un script de format au package JSON. Génial. On se voit dans le prochain. 66. 10 boutons radio: Bonjour. Dans cette vidéo, nous allons poursuivre le développement de la page d'accueil, et cette fois, nous allons ajouter des boutons radio dans notre formulaire que nous utiliserons pour rechercher les résultats, et nous pourrons choisir si nous voulons rechercher des émissions ou des acteurs. Allons-y. Je vais revenir au composant d'accueil, à l'intérieur du composant d'accueil, juste en dessous de la saisie du texte, je vais créer une autre entrée ici, puisqu'il s' agira d'un bouton radio, je vais le placer dans l'élément d'étiquette, donc ce sera une entrée de type. L'étiquette radio sera affichée, le nom sera SearchOption, la valeur de ce bouton radio sera affichée. Ensuite, je vais créer une autre entrée, un autre bouton radio, cette fois pour les acteurs. Acteurs, tapez radio, nom reste le même car ces deux boutons radio partagent le même état, valeur sera celle des acteurs. Je reviens à mon balisage et je peux voir qu'il y a des cases à cocher, excusez-moi, des boutons radio. Maintenant, pour que nous puissions inclure d'une manière ou d'une autre la valeur, la sélection de nos cases à cocher dans la demande d'API, nous devons avoir un autre état pour ces boutons radio. En haut, je vais créer un autre état, que j'appellerai SearchOption, quelque chose comme ceci, définissez SearchOption par défaut, il sera affiché. Notre état SearchOption peut être soit des émissions, soit des acteurs, soit une chaîne d'acteurs, soit une chaîne d'acteurs. Sur cette base, nous enverrons demande pertinente à l'API TVMaze. Maintenant, nous devons associer cet état que nous venons de créer aux boutons radio que nous avons écrits précédemment. C'est à peu près la même chose que pour la saisie de texte de type nous allons effectuer une liaison de données bidirectionnelle, nous avons déjà de la valeur, maintenant nous devons écouter l'événement de changement sur ces entrées. logique est exactement la même, je vais vous présenter ici le gestionnaire d'événements on Change, que je nommerai sur Radio Change, et il en sera de même pour les deux éléments ici en haut à droite à côté de celui-ci. OnSearchInputChange, je vais écrire sur le changement radio, il reçoit également l'objet de l' événement, et maintenant, pour définir l'état de SearchOption, je peux me référer à l'attribut value que nous avons transmis à chaque bouton radio correspondant. Les boutons radio sont représentés par des valeurs afin que nous puissions réellement accéder à event.target, qui se traduira par l'élément HTML d'entrée. Ils ont un attribut value et cela nous donnera la valeur correspondante que nous avons associée à chacune des radios. SetSearchOption sera event.target.value, essentiellement comme nous l'avons fait avec OnSearchInputChange. Comme vous vous en souvenez, il s'agit d'une liaison de données unidirectionnelle, mais écoutez les modifications apportées à la radio, mais nous n'avons pas associé l'état SearchInput à l'élément d'entrée Nous avons donc déjà un attribut value ici, mais l'état du bouton radio est pas représenté par l'attribut value, mais par l'attribut vérifié, et notre bouton radio shows coché lorsque notre SearchOption est égale à shows, nous pouvons donc l'écrire comme ça. Recherchez des émissions égales à des émissions. Cette expression sera vraie lorsque la recherche émissions se fera sous forme de chaînes de caractères. C'est exactement la même logique que nous allons appliquer à la contribution des acteurs. Elle ne sera cochée que lorsque recherche d'émissions équivaut à des acteurs. Super. Maintenant, jetons un coup d'œil. Laissons SearchOption dans le journal de la console, et excusez-moi, on dit toujours que j'ai utilisé la recherche d'émissions ici. Désolé, je voulais utiliser SearchOption. Si l'état est égal à émissions, cette entrée sera vérifiée. Il en va de même pour les acteurs. Super. Essayons maintenant de consigner SearchOption dans le journal de la console juste pour nous assurer que nous avons tout fait correctement. Par défaut, il indique qu'il s'agit de l'état initial. Si je sélectionne des acteurs, maintenant, ce sont des acteurs, si je sélectionne à nouveau des émissions, ce sont toujours des émissions, ce qui signifie que tout fonctionne parfaitement bien. Maintenant, nous devons d'une manière ou d'une autre intégrer cet état SearchOption notre requête et placer la logique correspondante quelque part dans le gestionnaire de recherche. Pour le moment, nous allons le dire très simplement, mais dans la vidéo suivante, nous allons légèrement refactoriser ce composant et lui donner une apparence bien meilleure. Mais quelle en sera la logique au départ ? Si nous revenons à la documentation de l'API TVMaze, nous avons utilisé ce point final pour rechercher les émissions. Si nous regardons dans la table des matières, il y a un autre lien qui nous mène à la section de recherche de personnes ici, et c'est presque la même chose que pour les émissions. Vous pouvez voir que, en gros, le modèle est à peu près le même, mais cette fois, nous cherchons des personnes plutôt que des émissions, alors comment y parvenir dans notre code ? Si nous revenons à TVmaze.js, nous avons déjà cette fonction réutilisable appelée recherche d'émissions. Nous pouvons copier cette fonction et la renommer SearchForPeople, et au lieu de transmettre /search/shows à l'API get, nous allons transmettre /search/people, et tous les arguments restent les mêmes car nous avons également une chaîne de requête ici. Génial. Nous revenons à homejsx, cette fois nous importons SearchForPeople. La logique à l'intérieur du gestionnaire de recherche sera très simple. Si SearchOption est égal à shows, veuillez exécuter la logique que nous avons déjà, sinon, exécutez la même logique, mais appelez SearchForPeople. Vous pouvez voir que nous avons une petite répétition ici, mais nous l'ajusterons dans la vidéo suivante. Pour l'instant, n'y pensez pas trop. Voyons à quoi ça ressemble. Nous revenons à notre application, émissions sont sélectionnées par défaut, nous cherchons quelque chose et vous pouvez voir que tout fonctionne comme prévu. Si nous sélectionnons des acteurs puis que nous cliquons sur « Rechercher », nous avons un écran vide, que s'est-il passé ? Si nous regardons dans l'onglet Réseau, nous pouvons toujours voir que la requête a été traitée avec le bon point de terminaison /search/people, mais si nous regardons dans la console, nous avons cet en-tête qui indique qu'il est impossible de lire les propriétés d'un nom de lecture indéfini. Que s'est-il passé ? Si nous examinons le corps de la réponse que nous avons reçue de l'API, il s'agit de l'objet que nous avons, mais dans le code, nous écrivons que si nous avons l'état des données de l'API, nous allons afficher Data.show.id ou data.show.name, mais dans le résultat de nos acteurs, nous ne l'avons pas. Nous n'avons pas data.show, nous avons data.person. En fait, nous accédons à de mauvaises données. La console, ici, nous en parle. Impossible de lire les propriétés d'un nom de lecture non défini, car data.show n'est pas défini dans cet objet de réponse, puis nous essayons d' accéder à undefined.name, et voici ce que nous voyons, nous ne pouvons pas lire les propriétés d'un nom de lecture indéfini. C'est notre problème. La solution serait que, quelque part ici, nous devrons écrire : lorsque nous recherchons , quelque part ici, nous devrons écrire acteurs ou lorsque nous avons, disons, les résultats des acteurs, veuillez afficher les acteurs, veuillez afficher les acteurs, mais lorsque nous avons des résultats d'émissions, veuillez afficher des émissions, et nous ne pouvons pas suivre la même logique qu'ici. Nous ne pouvons pas compter sur notre État, nous devons nous fier à la forme des données dont nous disposons. Ici, dans la logique, nous pouvons simplement le faire, si, où se trouve-t-il ? Nous avons un tableau, nous allons nous demander si le premier élément des données de l'API possède la propriété show. Dans ce cas, nous pouvons dire que nous travaillons avec les shows, nous avons des données d'émissions provenant de l'API. Sinon, si nous n'avons pas de shows, si notre premier élément ce tableau ne possède pas la propriété show, nous pouvons dire que nous travaillons avec les personnes présentes, avec cet objet personne. Nous allons dire le contraire, veuillez exécuter ApiData.map et cette fois, les données ne seront pas affichées mais data.person. Personne chargée des données, voyons voir, identifiant également et personne chargée des données, disons nom, à peu près comme pour les émissions. Essayons maintenant. Cela semble un peu compliqué, pas de soucis, nous allons régler tout cela un peu plus tard. Faisons en sorte que tout fonctionne. Je cherche des émissions, j'obtiens des résultats grâce à l'API, elles sont rendues, parfaites. Je passe aux acteurs, et je cherche quelque chose comme Andrew. Vous pouvez voir maintenant que nous n'avons plus d'additionneur, console est claire, nous recevons une réponse dans l'onglet réseau et que les données sont affichées, donc nous pouvons voir que cela a fonctionné. Génial, n'est-ce pas ? Super. Je peux dire que nous avons obtenu ce que nous voulions pour le moment. Nous allons valider nos modifications et, dans la vidéo suivante, nous allons légèrement refactoriser ce composant et encapsuler logique que nous avons avec l'élément de formulaire ici dans un composant séparé. Mais pour l'instant, commettons tout, et nommons ce commit comme je le vois, ajoutant la recherche d'acteurs. Super. Passons à GitHub et à bientôt. 67. 11 déplacer la logique de formulaire de recherche vers son propre composant: Rebonjour. Dans cette vidéo, nous allons continuer à travailler avec la logique que nous avons présentée dans la vidéo précédente. Nous avons ajouté une option permettant de sélectionner des émissions ou acteurs, puis sur la base de cette sélection, nous envoyons la demande correspondante à l'API TV Maze. Vous pouvez voir qu'une fois que nous avons ajouté cette logique, notre composant domestique est devenu un peu surchargé avec de nombreuses logiques différentes. Nous pouvons réellement le simplifier et c'est exactement ce que nous allons faire maintenant. Pourquoi ne pas déplacer toute cette logique liée à l'élément de formulaire, tous ces états, pourquoi ne pas la déplacer vers un composant séparé et y placer la logique, puis nous n' exposerons que ce dont nous avons besoin à l'aide de sondes. Essayons de le faire. Dans le dossier des composants, je vais créer un nouveau composant, quelque chose comme searchformjsx. À partir de là, je vais exporter le composant du formulaire de recherche. Mais maintenant, ce ne sera qu'un div vide avec formulaire de recherche par défaut d'exportation. Ensuite, essayons maintenant une méthode importante et voyons dans quelle mesure nous voulons que ce composant se comporte approximativement afin de pouvoir écrire la logique en conséquence. Je vais importer le formulaire de recherche à partir du formulaire de recherche de composants. Au lieu de tout cela, qui va écrire un formulaire de recherche. De quoi avons-nous besoin ? Nous voulons effectuer la recherche quelque part dans ce composant, car c'est dans ce composant que nous rendons réellement les données. Si nous voulions tout gérer dans le formulaire de recherche, nous ne serions pas en mesure d' accéder à cette logique de l'extérieur. Nous allons gérer la logique d'état avec des entrées à l'intérieur du composant , mais la recherche se fera réellement ici. La logique de recherche sera écrite dans Home JSX. Nous devons trouver un moyen d' exposer une sonde qui nous permettrait de rechercher des émissions ici dans Home JSX. Nous pouvons simplement transmettre cette fonction de recherche au formulaire de recherche et au formulaire de recherche d'informations lorsque nous cliquons sur Soumettre, ce qui appellera la fonction définie ici dans la page d'accueil. Nous allons l'appeler quelque chose comme on search et nous allons utiliser fonction de concert que nous avons déjà , mais nous allons légèrement modifier la logique. Au lieu d'écrire tout cela, nous n' aurons qu'une seule ligne. Maintenant, copions ce balisage avec l'élément de formulaire que nous avons, et mettons-le dans un formulaire de recherche comme celui-ci. Maintenant, nous devons déplacer la logique que nous avons dans Home JSX à son état, comme lors changement d'entrée de recherche et lors du changement de radio. Nous allons déplacer tout cela vers le formulaire de recherche. Ici, également ces états, option de recherche et la chaîne de recherche. Copions ces deux. Mettons-les ici au-dessus. Nous devons maintenant importer l'état d'utilisation. Je vais également le copier. Maintenant, la seule chose qui nous a manqué , c'est le gestionnaire de recherche. Allons-y et définissons-le ici. Au lieu de l'appeler lors de la recherche, nous l'appellerons lors de la soumission, pour la raison suivante. Nous pouvons transmettre cela au gestionnaire de recherche ici directement en tant que sonde, puis spécifier directement en tant que gestionnaire d'envoi mais nous exposerons l'objet de l'événement, ce qui signifie que nous devrons écrire la logique pour empêcher l'événement de soumission. Cependant, le composant externe qu' est Home.jsx n'a pas vraiment besoin de le savoir. Pourquoi dois-je vraiment empêcher certaines logiques par défaut, certains comportements par défaut ? Nous pouvons déplacer une partie de cette logique depuis la recherche directement dans le composant du formulaire de recherche. Ici, je vais créer une fonction d' envoi et je transmettrai comme attribut d' envoi. Encore une fois, nous avons l' objet événement dans cette fonction. Nous empêchons l'action d' envoi par défaut en appelant event prevent default et, juste après, nous devons exécuter cette logique. Mais cette logique sera définie ici. Nous pouvons nous attendre à ce que l' accessoire de recherche soit une fonction et nous allons simplement l'appeler ici, comme ça. Essayons. Ici, au lieu d'écrire event prevent default, nous n'en avons pas besoin car c'est déjà fait dans le composant du formulaire de recherche, je vais le supprimer. heure actuelle, nous appelons recherche personnelle sans aucun argument, ce qui signifie que je ne reçois rien ici. Juste une fonction sans aucun argument. Cependant, nous avons perdu l'accès à option de recherche et nous avons perdu l'accès à la chaîne de recherche. Pour résoudre ce problème, chaque fois que nous appelons la fonction de recherche que nous avons définie dans home, nous pouvons transmettre des arguments ici car nous l'avons ici dans le formulaire de recherche. Pourquoi ne pas faire appel à une chaîne de recherche sur le Web et à une option de recherche ? Mais pour la rendre plus conviviale, l'API que nous exposons à partir du composant du formulaire de recherche pour la rendre conviviale ici peut être un objet, quelque chose comme des options. Query, que ce soit juste Q sera la chaîne de recherche et l'option de recherche, gardons-la telle quelle. Finalement, nous aurons un objet appelé options avec la propriété Q et la propriété de l'option de recherche. Nous allons transmettre cet objet à la fonction de recherche. Ici, nous recevons l'objet options et nous pouvons procéder à la déstructuration directement ici. Nous allons déstructurer la propriété Q et la propriété de l' option de recherche. Nous saisissons Q, nous saisissons l'option de recherche au lieu de la chaîne de recherche. Nous allons maintenant utiliser Q. Essayons de voir. Si je rafraîchis la page, rien ne se passe car je n'ai pas lancé le serveur de développement. Permettez-moi de le faire très rapidement. Attendons une seconde. C'est ici. Laisse-moi me rafraîchir. Voyons voir. Nos fonctionnalités ne devraient pas vraiment être modifiées, car nous ne faisons que réduire le facteur ici. Nous nous attendons à ce que tout se comporte exactement comme avant. Des filles, nous avons des filles, elles fonctionnent parfaitement, des actrices. Disons, Garry, que nous avons Garry. Vous pouvez constater que les fonctionnalités restent les mêmes, mais notre logique sein d'un JSX domestique a été considérablement simplifiée. Nous n'avons pratiquement rien ici, à part la logique liée à la recherche elle-même. La logique qui prend en charge la forme de toutes les entrées a été encapsulée dans le formulaire de recherche. Maintenant, nous avons séparé les préoccupations. C'est logique. Je pense que c'est le cas. C'est tout pour le moment. En fait, attends, ce n'est pas ça. Nous devons encore faire quelque chose à ce sujet, car vous pouvez constater qu'il y a encore une petite répétition. Nous pouvons en fait garder les choses comme ça et ne pas trop y penser. Il n'y a rien de mal à cela, mais nous pouvons le simplifier. Nous pouvons d'abord créer une variable appelée résultat. De cette manière, nous allons déplacer les données d'API définies ici et nous allons simplement faire quelque chose comme ça. Ou peut-être pouvons-nous même simplifier en incorporant à la logique des opérateurs ternaires, options de recherche s'affichent, veuillez attendre la recherche des émissions, sinon attendez des personnes. Mais je pense que cette déclaration suffira. Génial. Maintenant, c'est tout à fait ça. Engageons-nous dans tout ce que nous venons de faire. Comment pouvons-nous le nommer ? Nous pouvons le nommer très simplement. Nous l'appelons simplement logique de formulaire de recherche factoriée ou, disons , oscillée, et composant de formulaire de recherche. Parfait. Je te verrai dans le prochain. 68. 12 Affichage de cartes pour les salons et les acteurs: Bonjour. Dans cette vidéo, nous allons poursuivre le développement et nous allons procéder à l'affichage des données de l'API TV Maze. À l'heure actuelle, notre logique d' affichage des données est très simple. Nous cartographions simplement l'état des données de l' API , puis nous affichons l' acronyme ou le nom de l'émission. Faisons en sorte que ce soit réel cette fois. Donc, au lieu d'écrire cela, nous pouvons, encore une fois, osciller toute cette logique dans une composante distincte, spécifiquement pour les acteurs, et dans d'autres composantes, spécifiquement pour les spectacles. C'est ce que nous allons faire. Dans le dossier des composants, je vais créer deux autres dossiers ici, l'un pour les acteurs et l'autre pour les émissions. Dans ces dossiers, nous mettrons des composants spécifiques uniquement liés aux spectacles ou liés aux acteurs. À l'intérieur du dossier, je vais créer un nouveau composant, que je vais nommer ShowGridJSX. Cela va être y maintenant aussi simple, ShowGrid par défaut pour export div, et pour référence future, je vais copier cette logique et la placer également dans ActorsGrid. Mais je vais le renommer ActorsGrid cette fois. Maintenant, rentrons chez nous. Maintenant, au lieu de faire cela, au lieu de mapper directement les éléments ici, nous pouvons afficher ShowGrid ou ActorGrid. Lorsque nous aurons des émissions, nous afficherons ShowGrid. Vous pouvez à nouveau voir l'intellisense. Dans la liste déroulante, j'appuie sur « Tab » et j'ai vérifié qu'il a été importé correctement. Eh bien, c'était le cas, donc je peux continuer. Je ferai de même pour les acteurs, au lieu de cartographier les éléments ici, je vais afficher ActorsGrid. L'Intellisense, boom, importé. J'ai vérifié l'entrée. Ça a l'air super. C'est beaucoup plus simple maintenant, n'est-ce pas ? Pour que nous puissions afficher des données à l'intérieur de ces composants, nous devons transmettre des données afin qu'ils puissent les manipuler d'une manière ou d'une autre de l'intérieur. Pour ShowGrid, nous allons transmettre l'accessoire show, et ce seront des données d'API. Pour Actors Grid, il s'agira d' acteurs, encore une fois, de données API. Pour l'instant, nous en avons terminé avec le composant domestique. Toute la logique sera placée dans le composant de grille correspondant. Commençons d'abord par les émissions. Nous allons sur ShowGrid, ici, nous recevons l'accessoire de l'émission que nous transmettons ici de la part de homejsx. Génial. Maintenant, dans Afficher la grille, nous allons maintenant cartographier les données. Nous allons écrire showsgrid.map. Nous avons ici notre objet de données. Pour l'instant, rappelons-nous rapidement : qu'avons-nous ? Nous avons data show.name si je ne me trompe pas, et pour la clé, je vais transmettre les données, afficher l'identifiant. Vérifions-le rapidement. Revenons à l'application. Je tape quelque chose et j'ai une erreur qui indique que je ne peux pas traiter les propriétés indéfinies. Je pense que je vois maintenant. Le problème est que nous avons géré le cas où stage est égal à null. Mais nous n'avons pas vraiment traité le cas où la scène est un tableau vide. Comme vous l'avez vu, j'ai saisi du charabia maintenant, mais si je tape quelque chose de sensé et que nous avons réellement des résultats grâce à l' API, nous avons un tableau. Mais si je tape quelque chose de charabia, ce sera un tableau vide. Si nous regardons dans l'onglet réseau, vous pouvez voir dans l' API sur votre aperçu que nous avons un tableau vide et que nous ne le gérons pas ici. Mais dans la logique que nous écrivons, veuillez vérifier par rapport au premier élément du tableau. Mais comme le premier élément n'existe pas, il n'est pas défini, nous avons un .show indéfini, gros. Nous devons régler ce problème. Nous devons considérer le cas où nous avons un tableau vide. Ici, nous allons ajouter une autre condition if, si Apidata.length est égal à zéro. Vous pouvez voir ce que j'ai fait ici, j'ai en fait ajouté ce point d' interrogation ici. C'est ce qu'on appelle le chaînage facultatif car si les données de l' API sont nulles et si je dois taper null.length, j'obtiendrai une erreur. Pour éviter cette erreur et garantir la longueur d'accès à JavaScript uniquement lorsque les données de l'API sont véridiques, nous pouvons ajouter ce point d' interrogation ici. Si les données de l'API sont fausses, c'est-à-dire qu'elles sont nulles, cela ne générera pas d' erreur indiquant qu'il est impossible de lire la longueur de propriété nulle. Mais quand c'est vrai, cela se poursuivra et la propriété de longueur sera utilisée. Si ApiData.length est égal à zéro, si notre tableau est vide, nous n' afficherons aucun résultat. Essayons de voir que si je tape du charabia, nous obtenons un tableau vide provenant de l'API, et cette fois, nous n'avons aucun texte de résultat. Cela me semble bon. Tapons quelque chose qui a du sens. Nous avons des filles, la logique qui montre toutes les émissions les plus anciennes est écrite dans ShowGrid. Ça a l'air parfaitement bien. Maintenant, allons-y et créons le composant de carte pour l'émission. Le composant de la carte sera notre carte d'affichage de style, où nous verrons toutes les données relatives à l'émission au lieu de simplement les afficher dans un simple div. Dans le dossier Shows, je vais créer ShowCardJSX. Ce sera une carte de présentation. Encore une fois, simple div, et par défaut, nous exportons ShowCard. Nous allons maintenant utiliser cette carte d'affichage ici dans ShowGrid. Au lieu de mapper chaque élément, chaque objet d'affichage à ce simple div, nous allons mapper chaque élément au composant show card. Au lieu de le faire, je vais mapper chaque élément à ShowCard. Encore une fois, entrez Alto, et je devrai transmettre des accessoires au composant ShowCard. Cependant, tout est rouge car encore une fois, je dois passer l'accessoire clé. Peu importe que l'élément soit votre propre composant personnalisé ou qu'il s'agisse simplement d'un élément HTML, vous devez toujours transmettre la clé. La clé sera l'identifiant d'affichage des données. Maintenant, quelles données voulons-nous afficher dans ShowCard ? Commençons par quelque chose de simple. Donc, d'abord, nous allons recevoir un accessoire de nom, et probablement nous allons recevoir une image ou commençons par le nom d'abord. Dans le div, nous allons afficher cette balise h1. Nous allons interpoler le nom. Maintenant, nous devons transmettre ce nom d'accessoire ici. Lorsque je mappe le composant show card, je vais transmettre name, equals data, show.name, quelque chose comme ça. Essayons de voir. En effet, vous pouvez le voir maintenant, tout est grand et audacieux. Il s'agit de notre tag h1. Ensuite, nous allons transmettre l'image si nous inspectons les données de notre API. Essayons de voir. Nous avons montré l'image. Une image est un objet doté de touches médium et d'origine. Essayons de voir si ces données changent d'une manière ou d'une autre. Image, nous en avons encore mais je peux vous dire que l'image ici peut-être nulle car toutes les émissions que nous recevons de cette API ne contiennent pas d'images. Ils n'ont peut-être aucune donnée. Dans ce cas, l'image sera nulle. Comment allons-nous pouvoir afficher quelque chose ? Pour ces situations, ce que je suggère de faire. Si nous ne recevons aucune image de l'API, nous montrerons l' image d'espace réservé à l'utilisateur, quelque chose comme l'image introuvable. Pour cela, nous pouvons revenir à l'invité que vous avez partagé avec vous. Vous trouverez ici cet espace réservé aux émissions, acteurs sans image de couverture. Vous pouvez cliquer sur cette image, puis cliquer dessus avec le bouton droit de la souris, enregistrer l'image sous et la placer dans notre projet. Je vais le placer dans un dossier public et je vais l'appeler image.png introuvable. Génial. Si je regarde en public, elle apparaît maintenant ici et nous pouvons faire référence à cette image PNG dans notre code source. Voyons rapidement à quoi cela ressemble. La source de l'image ne sera pas une image liée car notre fichier est placé dans espace public et il est diffusé via l'application. Nous l'enregistrons, nous retournons à l'application et chaque fois que nous recherchons des émissions, nous l'avons, parfaite. C'est l'image que nous avons. Maintenant, dans show grid, nous allons transmettre l'image prop, mais nous allons spécifier si data.show.image est véridique. Dans ce cas, prenez cette image.medium, data.show.medium, sinon veuillez afficher introuvable. Comment l'avons-nous nommé ? image.png introuvable. Génial. Maintenant, dans la carte d'affichage, nous pouvons récupérer cet accessoire d'image et l'afficher quelque part en haut. Nous allons encapsuler l'image dans un div. Ensuite, la source sera l'image que nous transmettrons et le nom de l'émission. Voyons rapidement ce que nous avons. Il y a quelque chose qui ne va pas. Voyons voir, nous n' avons aucune source. Pourquoi ça ? Il doit s'agir de data.show.image.medium. Maintenant, vous pouvez voir qu'il a plutôt bien fonctionné. Essayons de trouver des acteurs, et vous pouvez voir que nous avons maintenant toutes ces images de couverture. Agréable. Allons-y et remplissons les données de l'application. Que devons-nous montrer d'autre ? Nous aimerions peut-être simplement afficher un résumé à l'intérieur de chaque carte, mais nous aurons également un bouton pour démarrer cette émission à l'avenir. Lorsque nous cliquons sur ce bouton, il démarre, et lorsque nous cliquons sur la carte, cela nous amène à la page d'affichage. Que nous allons créer dans le futur. À l'intérieur de la carte d'exposition, nous aurons besoin d'une pièce d'identité. Nous aurons également besoin d'un résumé. Voyons comment nous pouvons tout afficher ici. Nous allons créer un div ici. un div sera probablement un lien Pour le moment, un div sera probablement un lien que nous importons depuis le [inaudible]. Dans le lien, nous allons dire en savoir plus. Le lien nous amènera pour l'instant à l'itinéraire. Nous n'allons rien faire à ce sujet pour le moment. Ensuite, nous avons ici un bouton de type bouton, qui sera mis en étoile pour l'instant. Dans le futur, il sera remplacé par l'icône. À propos du résumé. Nous allons afficher le résumé quelque part ici et nous n'afficherons pas de résumé car cela n'affichera tout simplement pas l' accessoire que nous recevons, nous allons le transformer d'une manière ou d'une autre. La raison en est que si nous examinons la réponse de l'API, nous avons la chaîne de résumé. Mais comme vous pouvez le voir, il s'agit d'une chaîne HTML. Cela signifie que nous pouvons simplement prendre ce code HTML et l'utiliser. Le problème, c'est qu' il est assez long. Nous voulons que ce soit court. Nous ne voulons pas afficher des centaines de mots ici. Je suggère de transformer cette chaîne de résumé en quelque chose de très court. Nous allons supprimer toutes les balises HTML à partir d'ici, et nous allons probablement récupérer uniquement, disons, les 10 premiers mots disons, les 10 premiers mots. Comment pouvons-nous le faire ? Supposons que nous recevions cette chaîne ici. Écrivons la logique dans Browser Console ici. Nous avons cette chaîne ici. Sur cette chaîne, nous allons d' abord la transformer en tableau en appelant la méthode .split et nous allons diviser par des espaces vides. Maintenant, nous avons quelque chose comme ça. Ensuite, nous allons prendre uniquement les 10 premiers éléments de ce tableau, puis .split, nous allons passer de l' index zéro à l'indice 10. Nous nous retrouvons avec un tableau de 10 éléments. Ensuite, nous allons retransformer ce tableau en chaîne. Nous allons joindre tous les éléments avec une chaîne vide entre les deux. Cela ressemble à ça. Mais nous avons toujours des balises HTML ici, nous devons donc les remplacer. Je vais modifier la méthode .replace disponible sur toutes les chaînes. Ici, je vais transmettre ce que l' on appelle une expression régulière. Je vais faire correspondre tous les caractères inutiles , puis les remplacer par une chaîne vide. En gros, cela ne fera que les éliminer. Ne pensez pas à ce que cela corresponde. L'expression régulière que je vais écrire remplacera simplement toutes les balises HTML de notre chaîne actuelle. Cela ressemblera à ceci. Il suffit de ne pas y prêter beaucoup d' attention. Notre résultat final ressemblera à ceci. Nous avons pris cette chaîne HTML, nous l'avons raccourcie et nous avons supprimé toutes les balises HTML. Je peux simplement copier cette logique. Ils viennent d'écrire ici, et je vais faire quelque chose comme un résumé dépouillé. Si je ne me trompe pas, le résumé de l'émission peut également ne pas être présent, c'est pourquoi nous allons vérifier les valeurs erronées ici. Si nous avons un résumé, nous allons appeler la méthode split et toute cette logique pour transformer notre code HTML en chaîne simple, sinon nous n'allons donner aucune description. Ensuite, nous allons afficher le résumé dépouillé. carte d'identité n'est pas utilisée pour le moment, mais nous allons la garder comme ça. Nous enregistrons le fichier, retournons à la page Afficher la grille et nous transmettons l'identifiant, qui sera data.show.id et, pour le nom, nous l'avons déjà. À la fin, nous allons passer au résumé. Ce sera assez simple, juste data.show.summary. Je sais que cela semble beaucoup, mais croyez-moi, c'est une méthode normale lorsque vous travaillez avec des données provenant de l'API. Vous devez d'une manière ou d'une autre réfléchir manière dont vous souhaitez qu'il affiche les données. C'est tout à fait normal ici. Je le garde, je retourne ici, et si je cherche des garçons cette fois, où sont mes garçons ? Ils sont là. J'ai maintenant la chaîne de résumé que nous avons transformée avec le lien Lire ainsi que le bouton Star Me. Eh bien, ça a l'air génial, n'est-ce pas ? Maintenant, nous passons en fait beaucoup de temps à des émissions ici. Résumons rapidement les acteurs que nous avons. Dans Actor Grid, nous pouvons simplement copier cette logique à partir d'ici. Nous n'avons pas besoin du journal de la console. Je vais juste copier la logique de Show Grid, mettre dans Actors Grid. Je recevrai rapidement l'accessoire d' acteur que je passe ici. Données pop sur les acteurs. Je le fais dans Show Grid. Je dois le faire dans Actors Grid. Je reçois des acteurs ici. Je cartographie les acteurs et je les mappe sur des cartes d'acteurs. ActorCard.jsx. Je vais copier cette logique très rapidement à partir de la carte d'affichage, placer dans la carte des acteurs. Je vais renommer la carte show en carte acteur, et cette fois, quelles données vais-je recevoir ? Tout d'abord, les acteurs ont aussi des noms. Ils ont aussi des images, et ils ont aussi des identifiants, ou peut-être pas. Nous n'avons pas besoin de pièce d'identité car nous aurons une page distincte pour chaque émission, mais nous n'aurons pas de page séparée pour chaque acteur. Nous aurons besoin d'un nom, image, nous aurons probablement besoin de quelque chose comme le sexe, leur pays, peut-être leur anniversaire et leur jour de décès. Ensuite, dans la grille des acteurs, je vais utiliser cette carte d' acteur ici. Il a été importé automatiquement au lieu de passer tous ces accessoires. Laisse-moi l'enlever. Pour la clé, je vais transmettre un point de données, laissez-moi voir. Qu'est-ce que nous avons ici ? Afficher la carte n'est pas définie. Le résumé n'est pas défini. Allez. Laisse-moi chercher des acteurs. Montrez-moi la demande de réseau. Ici, j'ai une personne. C'est une personne, donc des données, une personne. En personne, j'ai une date d'anniversaire, pays nul, un jour de décès nul, un sexe nul, des femmes. Vous pouvez voir que nous avons déjà beaucoup de nuls. Eh bien, c'est pas mal. Nous allons transmettre un nom. Ce sera juste data person.name. Ensuite, ce sera la campagne. Si je ne suis pas soûl, la campagne peut être un objet. Il s'agit d'un objet dont le nom est ici. Je vais simplement transmettre les données, la personne, le pays, le nom. Cependant, le pays peut être nul, nous devons donc le vérifier. Si les données, la personne, le pays sont véridiques, veuillez prendre votre nom. Sinon, veuillez lui donner la valeur null. Ensuite, nous avons un anniversaire. Comme vous l'avez vu, l'anniversaire ne peut pas être nul, mais nous nous occuperons de cette carte d'acteur interne. Nous allons transmettre des données, une personne, une date de naissance. Ensuite, il y a aussi le jour du décès, qui est à peu près le même que l'anniversaire. Ensuite, il y a aussi le genre. Le genre sera une donnée, une personne, un genre. De plus, je pense que nous avons oublié l'image. Image, je pense que ce sera peu près la même chose que pour les émissions. Je vais juste le copier. Je vais demander si les données, les personnes, les images existent. Veuillez indiquer les données, la personne, l'image, le support, sinon image PNG introuvable. Génial. Maintenant, quel sera le balisage de la grille des acteurs ? Laisse-moi voir. L'image restera la même sans nom. Dans H1, nous allons toujours afficher le nom, mais à côté du nom, nous afficherons également sexe entre parenthèses, s'il y en a une. Nous pouvons intégrer notre logique ici. Rappelez-vous que nous pouvons effectuer un rendu conditionnel en ligne directement dans JSX si le genre est présent Veuillez afficher la chaîne, qui sera entre parenthèses et entre parenthèses, nous allons interpoler le genre, et ce genre peut être nul. Lorsque nous utilisons l'opérateur and pour rendre cette logique de manière conditionnelle, nous voulons toujours nous assurer que le genre est une valeur booléenne. C'est pourquoi nous allons soit le transformer en un booléen comme celui-ci pour le vérifier, soit appliquer une double négation, qui le transformera également en valeur booléenne. À côté du nom, je pense que nous allons afficher le pays dans la balise de paragraphe. Nous allons demander si le pays est connu, puis nous allons afficher une chaîne indiquant « provient du pays ». Sinon, nous n'allons le dire à aucun pays, à personne. Ensuite, nous avons le jour de l'anniversaire et le jour du décès. Nous allons suivre la même logique ici. Si nous avons un anniversaire, une valeur booléenne. Veuillez afficher la balise p avec la mention « né le jour de la naissance ». Probablement la même chose pour le jour du décès ou pour un jour de décès, au lieu de ne rien montrer quand c'est le cas maintenant, on peut quand même dire que cette personne est en vie. C'est pourquoi nous allons créer la balise p ici et nous allons demander si nous avons jour de décès, s'il vous plaît. Display est mort le jour de sa mort. Sinon, veuillez l'afficher en direct. Nous n'avons pas vraiment besoin de cette division en bas de page. Notre balisage final ressemble à ça. Nous n'avons pas besoin du composant de liaison sur le dessus. Eh bien, c'était beaucoup et je suis déjà fatiguée d'écrire toute cette logique assez ennuyeuse d'affichage des données. Mais nous devons quand même passer par là. Cherchons des émissions. Tout est affiché. Maintenant, nous sommes passés aux acteurs. Nous chercherons Harry cette fois, pas Gary mais Harry. Ici, nous avons une image. Vous pouvez voir si l'image n'existe pas, cela indique une image introuvable. Ensuite, nous avons le nom, le sexe entre parenthèses. Nous n'avons donc aucun pays, personne vivant ou non vivant, lorsque la personne est née. Toutes les données provenant de l'API s'afficheront de cette manière. Je pense que c'est ça. Engageons-nous et passons à autre chose. Je vais tout engager. Je sais que vous avez vu cet avertissement que nous avons reçu à cause de cette carte d'identité. C'est très bien. Gardons-le là pour le moment. Nous nous en occuperons plus tard. Nous allons tout engager et nous allons dire afficher les données des émissions et des acteurs. Mettons tout en œuvre pour le maîtriser et faisons une pause. Je te verrai dans le prochain. 69. 13 pages avec du contenu dynamique: Salut. Dans la dernière vidéo, nous avons créé cartes pour les spectacles et les acteurs. Cette fois, nous allons parler de pages dynamiques. Comme vous vous en souvenez, dans les cartes pour les émissions, nous avons ce lien pour en savoir plus. Si nous revenons au balisage, agit du composant de lien que nous avons utilisé depuis React Router dom. Pour l'instant, il revient à la page d'accueil à la racine. En gros, cela ne fait rien si on clique dessus. Maintenant, ce que nous voulons faire à la place, est que lorsque nous cliquons sur « Lire la suite », nous devrions être dirigés vers la page d'affichage spécifique. Tout d'abord, nous devons décider comment exactement notre page d' affichage sera représentée. Dans ce cas, et la plupart du temps, pages sont représentées par des identifiants. Nous avons ShowID. Il peut s'agir de notre identifiant unique pour la page. Ainsi, chaque fois que nous cliquons sur une page dans l'URL, nous verrons d'une manière ou d'une autre ShowID. Nous pouvons envisager deux options ici. Première option, notre URL ressemblera à une barre oblique, puis l'identifiant de l'émission sera fourni dans le cadre de la chaîne de requête. Quelque chose comme ça. Deuxième option que nous pouvons envisager, au lieu de fournir un identifiant dans la chaîne de requête, nous pouvons en fait transformer ShowId en segment d'URL. Finalement, la page d'affichage aura une URL, quelque chose comme une barre oblique, Slash ShowId, et cet identifiant sera modifié en fonction de l' émission sur laquelle nous cliquons. La question ici est de savoir comment cela peut être réalisé avec React Router. Si nous revenons au composant de l'application ici, comme vous vous en souvenez, j'ai commenté ce balisage que j'ai extrait de la documentation pour référence future. Ici, nous avons ces équipes de route et à l'intérieur, nous avons quelque chose avec deux points, nous avons un identifiant d'équipe à deux points. Tout ce que vous voyez ici est appelé paramètre d'URL dynamique ou segment d'URL dynamique, car c'est quelque chose qui change. Toutes les données que nous avons dans notre application sont dynamiques, car quoi que nous saisissions dans l'entrée, elles seront dynamiques. Nous ne pouvons pas vraiment prédire les données que nous devons attendre de l'API. Nous devons d'une manière ou d'une autre réfléchir à la manière dont nous pouvons écrire le squelette des données dynamiques. Ce que je suggère de faire, c'est de considérer la deuxième option que je viens de vous montrer, et notre URL ressemblera à une barre oblique, à une barre oblique, à ShowID. Ce paramètre d' URL ShowID dynamique est celui que vous voyez ici dans cet exemple avec deux points. Nous lui donnons un nom, disons TeamID. Nous précisons que ce paramètre nommé sera quelque chose de dynamique que nous pouvons extraire de l'URL. Dans notre cas, ce que nous pouvons faire ici, c'est créer un autre itinéraire et le créer en dehors de la mise en page principale, car pour la page d'affichage, nous n'utiliserons pas principalement l'itinéraire que nous avons créé précédemment. Cette route aura un chemin, une barre oblique, une barre oblique et deux points, ShowId. Ce segment d'URL dynamique ici, je lui ai donné le nom ShowID. J'aurai le paramètre URL, qui sera dynamique, et il aura le nom ShowId. Pour cet itinéraire, je voudrais afficher la page d'affichage. Allons-y et créons-en un. Sous les pages, je vais créer un autre composant appelé show, un autre fichier appelé show, et le balisage pour l'instant sera très simple : afficher la page dans l'application. Je vais importer ce composant de page d'affichage, et nous allons essayer. Si je navigue vers une barre oblique, barre oblique, vous verrez que j'ai une page d'affichage. Cela fonctionne réellement. React Router a pu correspondre à ce chemin et m'afficher le composant show. Si je choisis simplement d'afficher, je ne l'ai pas trouvé, car le simple fait d'afficher sans segment d'URL dynamique ne correspondra pas à cette définition d'itinéraire. C'est pourquoi il revient à, et non pas trouvé. Mais dès que je vais afficher quelque chose à slash, je vais afficher la page. Génial. Maintenant, la question est comment récupérer ce ShowId à partir de l'URL ici et l'utiliser dans notre composant show. Notre stratégie sera la suivante. Chaque fois que nous naviguons vers la page d'affichage et que nous avons ShowID dans le segment URL de notre composant, nous pouvons prendre ce segment d'URL, nous pouvons prendre ce ShowId, puis l'utiliser dans le composant pour interroger l' API TVMaze et obtenir des données d'affichage. Cette approche est très courante lorsque vous traitez des pages dynamiques. Vous aurez une partie dynamique à l'intérieur de l'URL, et chaque fois que vous accédez à cette page, vous prenez cette partie dynamique de l'URL et l' utilisez dans le composant pour interroger des données. Dans notre cas, ce sera ShowID. Maintenant, comment pouvons-nous extraire ce ShowID de l'URL ? Si nous revenons à la documentation de React Router, nous avons un menu sur la gauche. Nous pouvons faire défiler la page jusqu'à la section des crochets et ici, nous allons nous intéresser au crochet Use Params. Vous pouvez lire cette brève description ici. Use params hook renvoie un objet, des paires clé-valeur des paramètres dynamiques de des paires clé-valeur des paramètres dynamiques de l'URL actuelle qui correspondent au chemin de l'itinéraire. Essayons ça. Vous pouvez voir qu'il a été importé depuis React Router dom. Je vais faire exactement la même chose. Je vais juste le copier très rapidement. Je n'ai pas besoin de route, donc je n'ai qu'à utiliser paramètres et dans Show, je vais juste appeler use params. Je vais créer une nouvelle variable appelée params. Pour l'instant, je vais simplement annuler paramètres du journal et voir ce que j'ai. Je vais dans l'annulation du navigateur ici, et ici vous pouvez voir que j' ai un objet où showID est égal à tout ce que je fournis dans l'URL. Cette clé correspondra au nom de paramètre que nous avons donné à ce segment d'URL dans la définition de l'itinéraire. Si nous mettons ici quelque chose comme, je ne sais pas, très aléatoire, je rafraîchis la page, vous pouvez maintenant voir les principaux changements. Je lui ai spécifiquement donné quelque chose de significatif, comme ShowID, afin que plus tard, nous puissions accéder à ce ShowID dynamique en utilisant le hook use params. Comme il s'agira d'un objet, nous pouvons utiliser cette structuration. À partir de cet objet params, je vais récupérer ShowId. Essayons d'interpoler cela dans notre JSX ici. Afficher la page pour ShowID. Essayons et j'ai remarqué que mon application n'est pas enregistrée, laissez-moi l'enregistrer. Vous pouvez voir la page d'affichage pour afficher tout ce que j'ai mis dans l'URL. Si c'était affiché avec Id1, j'en ai pour, Show 1. C'est ainsi que nous avons créé une page dynamique qui représentera notre émission. Il y a encore une chose à cela. Nous n'allons pas changer l'URL dans le champ de recherche du navigateur manuellement tout le temps, n'est-ce pas ? Nous devons modifier le lien que nous avons dans la carte d'affichage. Cela nous amène en fait à cette page dynamique. Essayons de le faire. Dans show, nous savons que pour les attributs, pour les accessoires, nous pouvons fournir des valeurs dynamiques à l'aide de JavaScript. Au lieu de simplement transmettre une racine de chaîne statique, nous pouvons ouvrir des crochets. Nous pouvons dire, s'il vous plaît, passez à la barre oblique, affichez l'identifiant de la barre oblique et c'est tout. Essayons de voir ça. Si nous cherchons bonjour, et chaque fois que je passe la souris sur le lien dans le coin inférieur gauche, vous pouvez voir la barre oblique de l'URL, une barre oblique, quelque chose comme cinq. Ce sera toujours différent pour chaque émission. Si je clique dessus et que je navigue vers la page, permettez-moi de revenir en arrière et de cliquer sur autre chose . Vous verrez maintenant que c'est différent. que nous pouvons créer des pages dynamiques dans notre application avec React Router dom, et nous pouvons récupérer des paramètres dynamiques à partir de l'URL l' aide du hook use params, puis vous les utilisez dans le composant pour récupérer des données. que nous allons faire dans la vidéo suivante. Pour l'instant, reprenons tout ce que nous avons fait ici. Faisons un tour d'horizon. Dans l'application Insight, nous avons créé une nouvelle foule dynamique, basée sur le paramètre ShowID. Nous avons nommé ce paramètre ShowID. Dans le composant Show que nous avons créé et qui représente notre page, nous avons saisi le paramètre ShowID l'aide du crochet use params. À l'intérieur de la courte carte, nous avons modifié le lien pour nous rediriger vers la page d'affichage. Génial. Je vais tout nommer comme page d'affichage dynamique créée, et je pense que tout ira bien, envoyez le tout sur GitHub et je vous verrai dans la prochaine. 70. 14 Introduction à useEffect d'effet: Salut. Dans la dernière vidéo nous avons créé une page d'affichage dynamique. Il est maintenant temps pour nous de récupérer des données dynamiques sur cette page. Dans cette vidéo, nous allons parler des moyens et de la manière dont cela peut être réalisé. Pour comprendre comment cela fonctionne, nous devons connaître un autre hook React appelé UseEffect. Vous vous souvenez que j'ai parlé à l'un d'entre eux du cycle de vie des composants. Le cycle de vie du composant correspond à la période qui s' écoule entre le moment où le composant est monté et celui où il est démonté de la page. Examinons de plus près le cycle de vie des composants. Nous pouvons différencier trois moments différents lors du montage des composants. La deuxième est lorsque le composant est déjà monté et qu'il est rendu à chaque fois que son état change. Le rendu et le troisième point dans le temps seront démontés ou juste au moment du démontage du composant. Ces trois points dans le temps représentent le cycle de vie des composants. Pour notre stratégie de récupération de données, nous nous intéressons uniquement au moment où le composant est monté. Parce que notre logique sera la suivante. Dès que nous ouvrons la page dynamique à afficher, nous récupérons l'identifiant d'affichage à partir de l'URL, puis nous utilisons cet identifiant d' affichage pour récupérer données une seule fois lors du montage du composant. Nous ne voulons pas réexécuter cette logique de récupération de données à chaque fois que le composant est rendu à nouveau. Ceci est important pour comprendre que nous ne devons exécuter la logique qu'une seule fois. Essayons maintenant de voir comment le UseEffect Hook peut nous aider à y parvenir. Permettez-moi probablement de naviguer vers le formulaire de recherche. Dans ce composant, nous allons jouer avec ce Hook UseEffect et comprendre comment il fonctionne et comment il peut nous aider. Je vais mettre ces trois points sur le cycle de vie des composants ici. Ensuite, en haut de React, je vais importer UseEffect. Maintenant, essayons d' utiliser ce crochet. À l'intérieur du composant, je vais appeler ce hook, et ce hook reçoit deux arguments. Le premier argument est la fonction, le rappel qui exécutera la logique que nous voulons et le second, argument, est ce qu'on appelle un tableau de dépendances. Nous parlerons de la gamme de dépendances un peu plus tard. Pour l'instant, passons simplement un tableau vide. À présent, notre premier cas d'utilisation sera celui du montage de composants. Nous voulons exécuter la logique une seule fois lors du montage du composant. D'ailleurs, ce rappel s'appelle l'effet de UseEffect. Appelons ce rappel l'effet. Mon effet sera que je vais simplement exécuter le journal de la console et dire les montages de composants. Rien de compliqué. Revenons maintenant à notre application, ouvrez la console et à l'intérieur de la console, nous voyons des composants montés et imprimés deux fois. Il est imprimé deux fois car nous avons le mode React strict. Si vous vous en souvenez, lors du développement, cela revient intentionnellement à deux composants afin de détecter d' éventuelles erreurs. Nous ne voulons pas ce comportement lorsque nous travaillons avec UseEffect. Pour l'instant, je vais simplement supprimer le mode strict React. Revenons à notre application. Lorsque j'actualise la page et que le composant est monté, le composant du formulaire de recherche est monté, journal de ma console s'affiche ici. Si j'essaie de mettre à jour l'un de ces états, si je tape quelque chose en entrée, composant sera rendu à nouveau. Mais vous verrez que les montages de composants ne seront plus jamais exécutés. Laisse-moi essayer. Je tape quelque chose dans l'entrée, ce composant est rendu à nouveau. Toutefois, les montages de composants ne fonctionneront plus jamais. Pour que l'observation soit plus conviviale pour nous, je vais ajouter ici le journal de la console et dire le rendu des composants. Qu'est-ce que nous avons ici ? Supports de composants. Nous assistons à un nouveau rendu des composants. C'est bien, car c'est la première fois que le composant est monté. Ensuite, nous voyons réellement le message que nous utilisons dans UseEffect. Maintenant, si je mets à jour cet état, vous ne verrez que le composant restitué. Nous ne voyons jamais de supports de composants. De cette façon, nous ne pouvons exécuter la logique qu'une seule fois lors du montage du composant. Maintenant, observons le troisième cas d'utilisation ici. Lorsque le composant est démonté. Dans UseEffect, à l'intérieur de cet effet , dans le rappel, vous pouvez transmettre quelque chose appelé la fonction de nettoyage. Il s'agit essentiellement de la fonction renvoyée par le rappel. Fonction de retour. Cette fonction, ici, s' exécutera lorsque le composant sera démonté. Essayons de voir. Dans la fonction de nettoyage, je vais écrire les démontages des composants. Voyons voir. Tout d'abord, nous avons exactement le même comportement que précédemment. Mais dès qu'ils changeront de page, de navigation, si je passe à la page d'accueil, ce formulaire de recherche de composants sera démonté de la page. Voyons ce qui va se passer. Je vais commencer et vous voyez les démontages des composants. La logique définie dans la fonction de nettoyage sera exécutée juste avant que le composant soit démonté de la page. De cette façon, nous sommes en mesure de nous connecter au point dans le temps non monté. Jusqu'à présent, nous avons intégré deux moments dans le temps : le montage et le démontage du composant. le second cas d'utilisation, lorsque le composant est rendu à nouveau, cela devient un peu délicat avec useEffect. Disons que j'aimerais exécuter une certaine logique chaque fois que l'option de recherche change. UseEffect est capable d'exécuter une certaine logique lorsque quelque chose change. Ce deuxième argument, le tableau de dépendances, sert exactement à cela. Il définit, il demande à UseEffect d'exécuter cette logique à partir d'un rappel lorsque quelque chose change. Dans le tableau de dépendances, nous listons les valeurs que nous aimerions écouter, et lorsque cette valeur change, nous demandons à UseEffect réexécuter la logique. Essayons-le et voyons. Je vais commenter la fonction de nettoyage. Au lieu de monter des composants, Au lieu de monter des composants, je vais dire quelque chose comme les modifications des options de recherche. En tant que tableau de dépendance, en tant que valeur du tableau de dépendance, je transmettrai l' option de recherche. Voyons voir. Je rafraîchis la page, rien n'est imprimé car je suis actuellement sur la page d'accueil. Dès que je passe à la page d'accueil, nous voyons un nouveau rendu des composants et des modifications des options de recherche. Pourquoi voyons-nous des modifications des options de recherche lorsque nous spécifions quelque chose dans le taux de dépendance ? Le fait est que useEffect s'exécute toujours au moins une fois, quoi qu'il arrive. UseEffect s'exécute au moins une fois, quoi qu'il arrive. Maintenant, si j'essaie de taper quelque chose dans l'entrée, nous ne voyons que le rendu des composants, nous ne voyons jamais de modifications des options de recherche. Mais dès que je mets à jour l'état des options de recherche en appelant l'option set search, UseEffect sera réexécuté. Voyons voir. Nous constatons des modifications des options de recherche. Nous le modifions à nouveau, et chaque fois que la valeur est modifiée, l'effet est réactivé. est aussi simple que cela. Vous pouvez y répertorier autant de dépendances que vous le souhaitez. Si l'un d'entre eux change, l'effet sera réexécuté à chaque fois. En gros, nous écoutons les changements de valeur et si ce changement de valeur se produit, l'effet se reproduit. En utilisant cette méthode, nous sommes en mesure de nous connecter à la logique de rendu du composant et d'exécuter notre propre logique ici en utilisant, à nouveau, le hook UseEffect. Cependant, appelons-le cas d'utilisation 2.5, lorsque nous voulons exécuter la logique avant le prochain rendu. Cela peut sembler sophistiqué, et dans une certaine mesure c'est le cas, mais voyons comment cela fonctionne. Notre version 2.5 sera logique avant les trois prochains rendus. la fonction de nettoyage, je vous l'ai déjà dit : si vous voulez exécuter une logique avant que le composant ne soit trop élevé, vous pouvez renvoyer cette fonction à partir de l'effet et tout ce que vous y mettez sera exécuté avant que le composant ne soit démonté. Toutefois, cela ne fonctionne que lorsque le tableau de dépendances est vide. Si le tableau de dépendances contient des dépendances, la fonction de nettoyage s' exécutera pour chaque effet. Une fois l'effet en cours terminé, la logique sera exécutée pour cet effet avant l'exécution de l'effet suivant. Au lieu des quantités de composants, disons que les options de recherche changent, et ici, dans le même journal de console, nous allons également mettre une option de recherche. Nous serons en mesure de voir la valeur de l'État. Essayons. Je rafraîchis la page. Je constate des modifications des options de recherche. Cela se voit actuellement. Dès qu'ils changent d'option, voyons ce qui se passe. Nous voyons les composants se réafficher comme d'habitude, nous voyons des modifications des options de recherche. Disons une option de recherche, disons avant la prochaine modification de l'option de recherche, ou disons avant la prochaine exécution de UseEffect. Essayons encore une fois. Nous voyons des modifications des options de recherche, des émissions. Maintenant, nous changeons l'option, et ce que je vois avant la prochaine exécution de UseEffect, nous le voyons apparaître. Cette fonction de nettoyage s'exécute à chaque exécution d'effet. Notre utilisation actuelle de cet effet s'adresse aux acteurs de l'État. Comme notre état actuel est celui des acteurs, c'est à ce moment-là que le dernier effet se produit. La prochaine fois que l'effet sera exécuté, la fonction de nettoyage s' exécutera pour notre effet actuel pour les acteurs. Si je le change à nouveau en émissions, nous verrons avant la prochaine exécution de UseEffect avec des acteurs, puis nous verrons les modifications des options de recherche avec les émissions. Essayons. Nous verrons avant la prochaine exécution de UseEffect, en fait pour l'instant pour notre précédente exécution de UseEffect et notre nouvelle exécution de UseEffect. Eh bien, cela semble compliqué. En fait, à première vue, ça l'est. Cependant, cela a du sens. Il existe de nombreux cas d'utilisation dans lesquels vous souhaitez utiliser chacune de ces options. En utilisant UseEffect, nous sommes en mesure d'exécuter une certaine logique au cours cycle de vie compétent dans différentes conditions et circonstances. Nous pouvons utiliser le tableau de dépendances pour indiquer à useEffect lorsque nous voulons exécuter cette logique. heure actuelle, nous avons examiné UseEffect et la console a enregistré la valeur de l'état des options de recherche chaque fois qu' une option de recherche change. Vous vous demandez peut-être pourquoi utilisons-nous UseEffect ici si nous pouvons simplement placer le journal de la console directement ici sans UseEffect, comme nous l'avons fait pour le rendu des composants. Eh bien, le fait est qu' avec UseEffect à nouveau, vous avez le tableau de dépendances. Ce nouveau rendu du composant du journal de la console s'exécutera à chaque nouveau rendu compétent, quoi qu'il arrive. Le composant est rendu, vous verrez toujours ce journal de console. Cependant, avec UseEffect, vous écoutez uniquement les valeurs qui changent, et ces valeurs sont spécifiées dans le tableau de dépendances. Si vous spécifiez un tableau de dépendances vide, ces UseEffect ne s'exécuteront qu'une seule fois lors du montage du composant. Dans cette logique, la fonction de nettoyage s' exécutera lorsque le composant sera démonté. Même si vous avez la dépendance, lorsque le composant est démonté, vous verrez que la fonction de nettoyage s'exécute également. Observons cela. Nous changeons d'acteur et nous lançons notre prochain UseEffect. Lorsque le composant sera démonté, vous le verrez avant la prochaine exécution de UseEffect. En gros, la fonction de nettoyage, comme je vous l'ai dit, nettoie l'exécution actuelle de UseEffect. En utilisant cette approche, nous ne pouvons récupérer les données qu'une seule fois lors du montage du composant. Nous allons spécifier un tableau de dépendances vide à UseEffect de ne s'exécuter qu'une seule fois lors du montage du composant. Dans l'effet, nous allons récupérer la logique de l'API. est aussi simple que cela. Maintenant que nous en savons un peu plus sur le cycle de vie des compétences, maintenant que nous pouvons utiliser UseEffect pour manipuler une logique compétente pendant le cycle de vie des composants, nous sommes en mesure de récupérer des données et enfin d'afficher quelque chose. est exactement ce que nous ferons dans la vidéo suivante. Pour l'instant, revenons au mode React Strict et nous allons en reparler. Pour l'instant, c'est tout. Je te verrai dans le prochain. 71. 15 données d'API de Maze télé avec useEffect: Rebonjour. Dans la dernière vidéo, nous avons parlé du UseEffect Hook façon dont il peut nous aider à manipuler la logique à l'intérieur du composant pendant son cycle de vie. Essayons d'appliquer UseEffect dans notre page d'affichage dynamique pour récupérer des données. Allons-y. Je vais accéder aux pages, Show.jsx. Ici, comme vous vous en souvenez, nous récupérons le ShowID à partir de l'URL. Cherchons des émissions. Disons, les garçons. Nous allons lire la suite. Nous avons cette URL. Tout ce que nous avons dans l'URL, notre paramètre dynamique, nous le récupérons à l'aide du Hook UseParams. Maintenant, importons UseEffect à partir du package React, et maintenant à l'intérieur, qui va faire UseEffect. Comme nous ne voulons récupérer les données qu'une seule fois, nous ne voulons exécuter la logique qu'une seule fois lors du montage du composant. Pour cette raison, nous indiquons un tableau vide de dépendances. Dans cet UseEffect, nous allons récupérer des données. Voyons à quoi ressemblera le point final. Cela nous donnera des informations sur les émissions. Si nous accédons à l'API TVMaze et recherchons la section des émissions ici, nous avons ce endpoint/shows/id, et vous pouvez voir cet exemple. Ouvrons-le et voyons. En fournissant l'identifiant de l'émission, nous serons en mesure de récupérer toutes les données requises. Nous allons créer une autre fonction réutilisable dans le fichier tvmaze.js où nous interrogerons ce point de terminaison. partir de là, explorons une autre fonction que nous appellerons getShowById. Comme argument, nous allons spécifier ShowID, et à l'intérieur, nous allons appeler ApiGet, et nous appellerons cette URL, ce point final. Comme l'ID est un élément dynamique que nous fournissons par le biais de l'argument, nous allons utiliser des backticks afin pouvoir appliquer une interpolation de chaînes. Notre fonction ressemblera à ceci. Maintenant, dans show jsx, nous pouvons importer GetShowById depuis l'API TVMaze. Ensuite, dans UseEffect, nous pourrons appeler GetShowID et transmettre ShowID à l'intérieur. Nous aimerions utiliser une syntaxe sync wait car elle est plus conviviale, mais vous ne pouvez pas rendre le rappel de UseEffect asynchrone. Si je le fais, vous verrez cet avertissement ici, qui provient de cette règle ESLint Rules of Hooks. Cela indique que les rappels d'effets sont synchrones pour éviter les conditions de course, placer la fonction et le site asynchrones. Vous pouvez voir cet exemple ici. Eh bien, c'est exactement ce que nous allons faire. Nous allons créer une fonction asynchrone dans UseEffect, puis appeler cette fonction à l'intérieur. Essayons ça. Dans notre cas, cela ressemblera à FetchData. Nous ne marquons pas le rappel comme asynchrone, qui s'appelle FetchData. Dans FetchData, nous allons appeler un poids get show by ID, et nous allons fournir ShowId que nous avons récupéré à partir de l'URL. Maintenant, dès que j'utilise ShowID dans UseEffect, vous remarquerez que j' ai maintenant cet avertissement ici qui dit hook React UseEffect a une dépendance manquante, ShowID. Si vous avez défini quelque chose dans le composant et que vous utilisez cet élément, cette valeur dans UseEffect, idéalement, elle doit être spécifiée tant que dépendance de cet UseEffect. La raison en est que supposons notre ShowID ici soit également dynamique, par exemple, il peut s'agir de notre état, et nous voulons exécuter cet UseEffect chaque fois que cette valeur change. Si nous ne fournissons aucune dépendance ici, laissez notre tableau de dépendances vide, la logique ne s'exécutera qu'une seule fois lors du montage du composant. Mais que se passerait-il si ce ShowID changeait, disons de 1 à 2 ? Dans ce cas, il est logique pour nous de récupérer les données, récupérer la dernière émission avec un identifiant égal à deux. Mais si nous laissons le tableau de dépendances vide, l'effet ne sera plus jamais exécuté. Pour que nous puissions résoudre ce problème, peu importe ce que nous utilisons dans UseEffect, toutes les valeurs présentes ici qui peuvent être potentiellement dynamiques ou changer, nous devons le spécifier. C'est notre dépendance à l'égard de ce rappel UseEffect. C'est pourquoi je vais répertorier ShowID dans le cadre de useEffect. Maintenant, nous obtenons nos données ici. Essayons de consigner les données du journal de la console. Nous revenons ici. Maintenant, ce que nous voyons, deux journaux de console. Encore une fois, la raison en est le StrictMode que nous avons. StrictMode est problématique et il a été introduit dans la version 18 de React, mais vous pouvez voir maintenant que nous avons ce problème en cours de développement : le composant est rendu deux fois. Puisque nous récupérons des données dans useEffect, cela signifie que nous avons récupéré des données deux fois. Ce n'est pas vraiment ce que nous voulons. Dans ce cas, l'équipe React recommande qu'à partir de React 18, si vous souhaitez récupérer des données, vous utilisiez autre chose plutôt que UseEffect. Nous en reparlerons un peu plus tard, mais c'est très controversé. Avant React18, dans la version 17 et les versions antérieures, la méthode la plus simple et par défaut pour FetchData était exactement la même, en utilisant UseEffect. Eh bien, avec React 18, rien ne change beaucoup, sauf que nous avons maintenant React StrictMode. Pour l'instant, je suggère de supprimer React StrictMode, et nous l'activerons plus tard lorsque nous verrons une alternative à l'utilisation du crochet UseEffect pour FetchData. Pour l'instant, dans l'index jsx, je vais simplement supprimer React StrictMode. Notre UseEffect ne sera pas exécuté deux fois au cours du développement. Maintenant, nous le sauvegardons. J'ai actualisé la page et vous voyez, j'ai des données ici. Si j'ouvre l'onglet Réseau, j'actualise la page. Ici, je peux trouver cet appel à l' API TVMaze avec ShowID que nous recevons de l'URL. Si je prévisualise, ce sont les données dont nous disposons. Maintenant, créons un état et mettons ces données dans l'état. Appelons-le simplement ShowData et définissons show data. Il s'agira de l'appel UseState. Par défaut, les données seront nulles. Créons ensuite un autre état pour détecter toute erreur en cas d'échec de la demande. Je vais créer ShowError, SetShowError. Par défaut, les appels sont nuls. Je vais encapsuler un moyen de getShowID, getShowById dans try catch block. Dans le bloc de capture, je vais appeler set ShowError à null. Ensuite, lorsque je reçois des données, j'appelle SetShowData et je définis ces données dans le cadre de l'état. Maintenant, ici, nous pouvons utiliser le rendu conditionnel pour afficher les données que nous avons saisies, et nous pourrons utiliser l'état ShowData. Nous pouvons écrire la logique de rendu conditionnel directement dans le composant, pas seulement dans le balisage JSX, non seulement en utilisant, disons, une fonction d'assistance dans laquelle nous définissons la logique, nous pouvons également l'écrire directement dans le composant. Ici, je vais juste demander, si nous avons ShowError provenant de cette fonction, de notre composant, veuillez renvoyer div, qui indique que nous avons une erreur, qui sera ShowError.Message, car ShowError sera l'objet de l'erreur. Ici, je l'ai mis à zéro, désolé, il faut que ce soit l'autre objet que nous attrapons ici. Maintenant, en cas d'erreur, nous renvoyons le balisage JSX avec erreur. Si nous avons ShowData, dans ce cas, nous avons des données d'émission. Pour l'instant, annulons. Voyons voir. Qu'est-ce que nous avons ? Nous avons un nom, alors laissez-le être le nom ShowData. Par défaut, si aucune de ces deux conditions n'est respectée, nous pouvons dire que les données sont en cours de chargement. Je peux voir que je n'ai pas utilisé la recherche ShowError. Ici, je ne l'ai effectivement pas utilisé. Voyons voir. Je dois montrer les données, les gars. Lorsque je rafraîchis, vous pouvez voir que cela clignote ici, et ce clignotement indique que les données sont en cours de chargement. Les données se chargent si vite que nous ne pouvons même pas remarquer que les données chargent le message. Mais si cet appel d'API prenait, disons, 10 secondes, nous verrions que les données sont en cours de chargement. En utilisant cette approche, vous pouvez récupérer les données lors du montage du composant. Dans la vidéo suivante, nous allons nous présenter un nouveau terme , appelé React Hooks personnalisés. Par exemple, ici, nous utilisions UseState, et nous utilisions UseEffect ainsi que UseParams. Tout ce que vous importez directement depuis React, ces hooks sont appelés React Hooks intégrés. Mais vous pouvez voir depuis react-route-dom que nous importons quelque chose appelé useParams. C'est également un React Hook, mais il ne fait pas partie de la bibliothèque React. C'est quelque chose de personnalisé qui a été créé par react-router-dom. Dans la vidéo suivante, nous allons en parler, et nous allons créer notre propre crochet personnalisé. Mais avant de terminer cette vidéo, faisons le bilan de tout ce que nous avons fait. Tout d'abord, nous avons désactivé le StrictMode, donc lors du développement, notre UseEffect ne s'exécutera pas deux fois. Ensuite, nous créons une fonction GetShowById qui extrait les données et composant show à l' aide du crochet UseEffect, le FetchData. Git add point commit everything. Nous allons le dire à FetchData dans le composant show ou fetch show data dans le composant show, juste comme ça. Vidéo suivante, crochets personnalisés. On se voit là-bas. 72. 16 crochets à réaction personnalisés: Salut, voilà. Dans la dernière vidéo, nous récupérons des données dans le composant show à l' aide de UseEffect. La dernière fois, j'ai mentionné que dans cette vidéo, nous allons parler la différence entre les hooks React intégrés et les hooks personnalisés que nous pouvons importer depuis d'autres bibliothèques. Le fait est que ces hooks personnalisés ne sont en fait que plus logiques en plus des hooks React intégrés que vous avez déjà vus, comme useEffect ou useState. Quelle est la différence alors ? Ces hooks UseParams, par exemple, sont que des crochets avec une logique supplémentaire, nous n'avons donc pas besoin d'écrire cette logique dans le composant. La question est la pourquoi avons-nous besoin de crochets personnalisés ? Vous pouvez voir que dans la dernière vidéo, nous avons en fait utilisé trois crochets différents, en fait deux, mais nous les utilisons trois fois dans notre composant, useState, useState puis useEffect ici. Maintenant, supposons que je veuille réutiliser cette logique dans d'autres composants. Quelle est mon option alors ? Une approche très naïve consiste simplement à copier ce morceau de code et à l'utiliser quelque part dans d'autres composants. Mais vous pouvez voir que c'est beaucoup de répétitions. Si nous ne parlons pas spécifiquement de React, si nous pouvons prendre l' exemple de la programmation pour réutiliser la logique d'une manière ou d'une autre, nous utilisons des fonctions ou si nous voulons simplement extraire quelque chose de l'endroit, nous utiliserions également une fonction pour ne pas colorer l'espace où cette logique est présente. Il en va de même pour les crochets. Si vous souhaitez réutiliser la logique des hooks, ou si vous souhaitez simplement extraire la logique du composant, vous pouvez la placer dans un réacteur personnalisé. C'est la raison pour laquelle nous les utilisons. Ils sont utilisés pour réutiliser la logique des hooks et deuxième option est lorsque vous souhaitez extraire logique du composant afin qu'elle ne prenne pas beaucoup de place à l'intérieur de ce composant. Dans notre cas, cette logique ne sera réutilisée nulle part dans l'application car nous n'avons qu'un seul endroit où nous pouvons récupérer émission spécifique dans le composant show. Mais imaginons que nous ayons un autre endroit où nous voulions récupérer ces données d'émission. Au lieu de copier-coller la logique, nous aurions pu la placer dans un hook personnalisé à l'intérieur de tous les composants où nous devons récupérer cette émission. Laisse-moi te montrer ce que je veux dire. En haut du fichier, je vais créer une fonction hook personnalisée que je vais appeler quelque chose comme UseShowById. Tu peux lui donner le nom que tu veux. Mais tous les hooks React ont cette convention selon laquelle ils doivent commencer par le préfixe use. Si vous voulez nommer votre hook personnalisé, assurez-vous qu'il commence par use, useShowById Ce ne sera qu' une fonction simple et je vais simplement copier ma logique vers FetchData depuis le composant dans le hook UseShowById. Vous pouvez voir plusieurs choses ici. Tout d'abord, à l'intérieur du hook, nous n'avons pas accès à la variable showID. Mais comme il s'agit d'une fonction, nous pouvons la recevoir comme argument. C'est ce que nous allons faire. Vous pouvez voir qu'à l'intérieur du composant show, nous n'avons plus accès à ShowError ou à ShowData. Exactement la même approche. Si notre UseShowById n' est qu'une fonction, nous pouvons en renvoyer une valeur. Nous allons dire renvoyer un objet avec deux clés, ShowData et ShowError. Nous pouvons maintenant utiliser ce hook UseShowById dans le composant show. Nous appelons simplement ce hook à l'intérieur, nous transmettons ShowID et ce hook nous renvoie un objet avec deux clés, ShowData et ShowError. Déstructurons-les. Maintenant, regardez notre résultat final. Nous n'avons qu'une seule ligne et la logique est écrite ailleurs. Si je le cache, vous pouvez maintenant voir notre composant est beaucoup plus propre qu'auparavant, et que notre logique consistant à récupérer des données pour les récupérer existe ailleurs. Maintenant, si je voulais réutiliser cette logique dans d'autres composants, j' appellerais simplement useShowById, pass, showId comme argument, puis recevrais mon ShowData et mon ShowError, par exemple, copions cette ligne. Si je voulais récupérer show dans le composant de l'application, j'utiliserais simplement ce hook dans le passé, quel que soit le show que je veux, comme argument et j' aurai accès à ShowData et ShowError. La logique des crochets personnalisés, l'idée des crochets personnalisés, est la même que celle des fonctions de programmation, mais avec les crochets personnalisés, vous écrivez de la logique au-dessus de crochets intégrés ou d'autres crochets réactifs. est aussi simple que cela. Maintenant, c'est tout. Mais vous vous souvenez que dans la dernière vidéo, lorsque nous avons introduit le hook UseEffect, nous avions rencontré ce problème avec mode React Strict lors du développement mode React Strict affiche le composant deux fois. C'est pourquoi notre UseEffect s'exécute toujours au moins deux fois. Cela posait problème. La solution recommandée par Reating est utiliser autre chose au lieu de UseEffect. Dans la vidéo suivante, nous allons en parler. Nous allons parler de l'alternative à UseEffect pour récupérer des données. Nous pourrons enfin retrouver notre mode React strict, et nous n'aurons aucun problème à récupérer les données une seule fois lors du montage du composant. Pour l'instant, engageons-nous et terminons cette vidéo sur une bonne note, comme toujours. Mon message de validation sera très simple, extrayez la logique de traitement par lots de données dans un hook personnalisé UseShowById. Génial. On se voit dans le prochain. 73. 17 Récupération de données avec des bibliothèques: Rebonjour. Dans la dernière vidéo, nous avons parlé de la différence entre les hooks React intégrés et les hooks React personnalisés. En gros, les hooks React personnalisés sont les hooks que nous écrivons avec notre propre logique en plus des hooks React intégrés. La raison en est que nous voulons extraire une certaine logique, ou si nous voulons rendre la logique des hooks réutilisable. Dans ce cas, nous utilisons des crochets personnalisés. Nous ne récupérons également les données de l'API TVMaze qu'une seule fois lors du montage du composant. Nous le faisons à l'aide du hook UseEffect. Mais si vous vous en souvenez, nous avons désactivé React StrictMode car cela oblige le composant à afficher deux fois au cours du développement, ce qui signifie que UseEffect s' exécutera toujours au moins deux fois au lieu d'une seule. Cela pose problème pour notre situation spécifique et pour éviter cela, l'équipe React recommande de récupérer les données avec autre chose. Ils ne recommandent pas d'utiliser le hook UseEffect pour récupérer des données lorsque React StrictMode est activé. Ils parlent d'autre chose. Qu'est-ce que c'est ? Eh bien, en front-end, il y a le concept de ce que l'on appelle les bibliothèques de récupération de données. Deux exemples peuvent être React Query et utiliser SWR ; les deux sont très populaires et très similaires les uns aux autres. Mais ce qu'ils font réellement, par exemple sur la page d'utilisation du SWR, nous pouvons voir cet exemple très simple que nous appelons le hook use SWR, disons le chemin que nous voulons récupérer, puis la fonction qui extrait les données. Ensuite, le hook nous donne une erreur de données que nous pouvons utiliser dans notre application. Maintenant, si nous comparons cela à ce que nous avons écrit ici, vous pouvez trouver une note très similaire, cependant, notre crochet ici vise spécifiquement à récupérer des émissions depuis l' API TVMaze et à les récupérer par identifiant. C'est donc la logique spécifique qui est étroitement liée à l' API TVMaze pour récupérer les émissions spécifiquement par identifiant. Si nous avions, disons, beaucoup de logiques de récupération différentes sein de notre application pour, disons, des centaines de composants, dans ce cas, nous devrions trouver quelque chose de plus abstrait pour rendre notre logique de récupération plus réutilisable et ne pas étroitement liée à une implémentation spécifique. exactement ce que font les bibliothèques de récupération de données ; elles nous fournissent le crochet abstrait que nous pouvons utiliser pour récupérer des données à l'intérieur du composant. Il est donc plus facile pour nous de réutiliser cette logique dans l'application que nous écrivons et que nous avons créée. Par exemple, dans React Query , trouvons Quick Start. Vous pouvez voir que la logique est assez similaire ; nous avons quelque chose appelé clé de requête et fonction de requête, nous allons en parler dans une seconde, mais la logique est la suivante. Nous avons un crochet abstrait pour récupérer des données À ce crochet abstrait, nous fournissons notre logique pour récupérer des données, et ce crochet personnalisé nous donne des erreurs de données et charge des variables que nous pouvons utiliser à l'intérieur du composant. Ils existent pour rendre la récupération de données plus optimisée, plus réutilisable et plus facile à utiliser pour les développeurs. Essayons d'installer l'une de ces bibliothèques. Dans notre cas, nous allons utiliser la requête React, c'est simplement parce que j'ai décidé comme ça. Si vous le souhaitez, vous pouvez essayer UseSWR, la syntaxe est assez similaire. Dans la documentation, je vais accéder à la page d'installation. À partir de là, je vais simplement copier le fichier tanstack/react-query installé par NPM. Je vais ajouter cette dépendance à mon projet. Il apparaîtra dans le package Jason, ici en haut. Super. Je vais maintenant passer au démarrage rapide et suivre l'exemple. abord, nous devons créer un client, puis utiliser ce que l'on appelle fournisseur de clients de crédit et y transmettre ce client. Ensuite, à l'intérieur des composants, nous pouvons utiliser le hook UseQuery. Voyons comment cela peut nous aider. Je vais juste copier ces entrées à partir d'ici, je vais accéder au composant de l'application ici, tout en haut, je vais importer uniquement le je vais importer client de requête et le fournisseur client critique , comme ça, puis je vais créer un nouveau client de crédit en dehors du composant, puis j'utiliserai le fournisseur de client de crédit, disons quelque part ici et fermez-le à la fin. Finalement, mon application ressemble maintenant à ça. Super. Je peux maintenant accéder à la page d'affichage et au lieu d' utiliser le hook use show by ID, nous utiliserons le hook useQuery ici. Commentons ce que nous avons ici, appelons useQuery, qui peut également être importé depuis tanstack/react-query. Allons-y. Nous n'aurons besoin que useQuery et à l'intérieur du composant, nous allons appeler useQuery comme ceci. Nous devons maintenant transmettre des options ici. Les options sont simplement un objet avec différentes clés que nous fournissons. La clé de requête et la fonction de requête sont des options obligatoires que nous devons transmettre. La clé de requête identifiera de manière unique notre logique de requête, notre facteur tel que GetStodos dans l'ensemble de l'application. fonction de requête est la logique permettant de récupérer des données. Voyons comment nous pouvons l'utiliser. Nous devons d'abord transmettre la clé de requête, et vous pouvez voir maintenant qu'il s'agit d'un tableau. Dans notre cas, nous pouvons l'appeler quelque chose comme show maybe , puis notre émission est identifiée par un identifiant, comme vous vous en souvenez. Nous allons transmettre show et showID. Ensuite, nous devons passer Fetcher. Cependant, vous pouvez voir qu'à l' heure actuelle , dans l'exemple, la seule fonction de requête est GetStodos. Mais dans notre cas, nous devons d'une manière ou d'une autre accéder à ShowID dans notre récupérateur. Notre récupérateur est cette fonction que nous avons créée précédemment appelée GetShowById. Si nous regardons dans la documentation, elle est cachée quelque part à l'intérieur, je vais vous dire où. Il se trouve ici dans la section Query Keys. Si nous allons ici et si nous faisons défiler l'écran jusqu'en bas nous pouvons voir toute cette section ici, si votre fonction de requête dépend la variable incluse dans votre clé de requête. Nous allons simplement suivre ces exemples ici. Je vais juste le copier et le mettre comme ça. La clé de requête sera show au lieu de ToDoID, nous allons placer showId au lieu de FetchToDobyId, nous allons appeler getShowById. Nous allons passer ShowID. UseQuery nous renvoie le résultat. Si nous essayons d'utiliser IntelliSense à partir de cet objet de résultat, vous pouvez constater que nous avons beaucoup de choses ici, mais nous nous intéressons spécifiquement aux données et aux additifs. Essayons de le faire. À partir de l'objet de résultat, je vais récupérer des données et je vais récupérer l'erreur. Je vais les renommer. Nous pouvons utiliser des données à la place de ShowData, mais renommons-les Je vais mettre deux points à côté clé déstructurée et je l' appellerai ShowData. Par ici. La clé de données que j'ai déstructurée sera renommée ShowData. À partir de l'objet résultat, j'ai quand même déstructuré les données, mais je voulais juste avoir un autre nom, ShowData. Il en va de même pour l'erreur, ce sera ShowError. Maintenant, je peux retourner à mon application et voir comment elle fonctionne. Mais je dois redémarrer l'application, npm run start, je reviens ici. Allons nous rafraîchir. Vous pouvez voir que rien n'a changé, mais le moment, nous avons utilisé le hook useQuery. Il s'agit d'une logique de hook personnalisée dont la logique est écrite quelque part dans la bibliothèque tanstack/react-query. Nous l'utilisons simplement pour récupérer des données. Vous pouvez voir que ce hook nous donne interface abstraite qui nous permet d'encapsuler cette fonction dans un hook comme UseQuery et de récupérer les données une seule fois à l'intérieur du composant. Cette clé de requête ressemble un peu à ce tableau de dépendances dans UseEffect. Si quelque chose change dans la clé de requête, les données ici seront récupérées comme avec UseEffect, très similaire. L'équipe React nous conseille en fait d'utiliser quelque chose comme ça pour récupérer des données. C'est en fait une très bonne recommandation. Vous ne vouliez pas faire face à toute cette logique répétitive à chaque fois dans votre application. Ces bibliothèques proposent de nombreuses options, sont optimisées pour la récupération, elles possèdent ces clés de cache et peuvent faire bien plus que simplement récupérer des données et des montages de composants pointus. Dans les applications React modernes, bibliothèque de récupération de données est une très bonne solution. Nous allons utiliser useQuery pour notre exemple spécifique. Nous pouvons maintenant supprimer la logique que nous avons écrite plus tôt et, en fait nous pouvons réinclure React.strictMode, car notre logique de requête ne s'exécutera plus deux fois. Voyons voir ça. Si j'actualise la page, ici, je n'ai qu' un seul appel à l'API, ce qui signifie que notre logique que nous écrivons ici ne sera pas récupérée deux fois et que nous aurons toujours accès à React StrictMode. Avec cette approche, nous avons fait d'une pierre deux coups. J'espère que ce n'était pas trop compliqué ou sophistiqué pour comprendre comment fonctionne la récupération de données dans React. Nous avons commencé avec le strict minimum avec UseEffect, car UseEffect peut être utilisé pour manipuler des données et manipuler la logique du cycle de vie d'un composant Nous avons utilisé UseEffect pour récupérer les données une seule fois lors du montage du composant, mais nous avons dû désactiver React StrictMode, sinon nous devons React StrictMode, sinon nous devons écrire de la logique pour surmonter le double rendu en mode développement. Pour surmonter ce problème, nous avons utilisé une bibliothèque de récupération de données. Dans notre exemple, nous avons installé React Query. React Query nous donne ce hook abstrait UseQuery que nous pouvons utiliser pour récupérer des données à l'intérieur du composant. J'espère que cela a du sens. Ces bibliothèques de récupération sont une solution lorsque vous travaillez avec des applications React modernes. Validons les modifications que nous avons apportées. Ce que nous avons fait, nous avons simplement installé React Query, puis nous avons remplacé notre hook personnalisé à FetchShowById par le hook useQuery. Nous avons également renvoyé React StrictMode à l'application car nous n'avions plus aucun problème avec la récupération de données dans UseEffect. Maintenant, ajoutons tout à stage, validons et disons que la requête React a été installée, remplacée, useShowById par le hook useQuery. Génial. Jusqu'à la prochaine. 74. 18 Cession: Bonjour. Dans la dernière vidéo, nous avons parlé des bibliothèques de récupération de données. Nous avons parlé de React Query et nous avons intégré React Query dans notre application. Nous avons utilisé le crochet de requête use dans le composant show pour récupérer les données par show ID. Cependant, si nous revenons à Home jsx, votre composant personnel, vous pouvez voir nous récupérons également des données ici. C'est légèrement différent d'une simple requête GET lors du montage du composant. Comme nous avons essentiellement des filtres, nous tapons quelque chose dans le champ de recherche, puis nous pouvons choisir différents boutons radio, puis nous ne cliquons sur le bouton de recherche qu'après l'envoi de la demande. Cependant, les bibliothèques de requêtes et de récupération de données React peuvent également gérer ces scénarios. J'ai une mission pour toi. Pouvez-vous intégrer le crochet de requête Use la page d'accueil afin que nous puissions remplacer ces états d'utilisation ici par un seul crochet de requête Use. Allez-y, essayez d'intégrer le crochet de requête Use dans le composant d'accueil. Voici un conseil que je peux vous donner. Vous pouvez consulter la documentation de React Query spécifiquement pour répertorier les types et les concepts que vous pouvez rechercher. Laissez-moi voir les requêtes désactivables, les barres obliques qui mettent en pause, et en bas, ils ont cet exemple avec des requêtes paresseuses. Vous pouvez utiliser cet exemple ici pour intégrer le composant Use query inside home. La logique sera très similaire à celle de cet exemple, mais vous devez l'adapter à notre cas d'utilisation. Allez-y, essayez de le faire, puis nous comparerons le résultat dans la vidéo suivante. On se voit là-bas. 75. 19 Utiliser la requête React pour rechercher des données sur la page d'accueil: Bonjour Comment s'est passée ta mission ? Avez-vous réussi à obtenir ce que nous voulions ? Avez-vous réussi à intégrer le hook useQuery dans les composants domestiques ? Essayons de voir. Comme je vous l'ai dit, vous pouvez vous référer à cet exemple pour implémenter la logique avec le hook useQuery. Ce que je vais faire, c'est simplement copier ces deux-là, et les placer au-dessus. Nous devons également importer, UseQuery à partir de react-query. Mettons l'entrée en haut. , nous n'avons pas besoin d'utiliser React.useState car nous importons UseState directement depuis la bibliothèque, et nous devons maintenant adapter cela à notre cas d'utilisation. Tout d'abord, qu'est-ce que cette clé activée ici ? Le fait est qu'il existe des situations où nous voulons récupérer des données de manière conditionnelle, car cette logique s'exécute par défaut lors du montage du composant. Les données sont récupérées lors du montage du composant. Toutefois, cela n'est pas toujours vrai. Et si nous avons une bascule, et lorsque cette bascule est vraie, ou lorsque nous appliquons uniquement le filtre, nous voulons récupérer la logique. Dans ce cas, nous pouvons utiliser l'option activée ici pour faire comprendre à react-query que nous voulons exécuter ou ne pas exécuter cette logique. Dans notre cas, nous avons des filtres. Nos filtres sont la chaîne de requête, peu importe ce que nous saisissons dans le champ de recherche. Ensuite, nous avons également l'option de recherche, qui est la valeur pour lire votre bouton que nous sélectionnons, qu'il s' agisse d'émissions ou d'acteurs. Ce sont des filtres que nous avons. Puisque nous gérons toute la logique liée à la saisie de ces filtres pour sélectionner et lire vos boutons, nous gérons tout cela dans SearchForm. Ensuite, nous renvoyons les données à maison en utilisant la fonction OnSearch ici. Nous devons d'une manière ou d'une autre réfléchir à la manière de transmettre ces informations de filtre au hook useQuery. Nous pouvons utiliser, disons, l'état des assistants pour les filtres, puis nous pouvons transmettre ce filtre dans le cadre de la QueryKey. Si le filtre est nul ou vide, nous n'avons rien sélectionné, nous désactivons simplement la requête, car lorsque nous sommes entrés dans la page, nous ne voulons pas récupérer de données car bon, nous n'avons aucun filtre. Nous n'avons rien saisi. Dans notre cas, filtrez par défaut, au lieu d'une chaîne vide, elle sera nulle et nous la transmettons à l'option activée. Si le filtre est véridique uniquement, nous pouvons interroger les données. Dans ce cas, le hook sera activé. Ensuite, nous transmettons également le filtre dans le cadre de la QueryKey. Cela signifie que si le filtre change, si cette valeur change d'une manière ou d'une autre, dans notre cas, ce sera un objet. Si cet objet doit être modifié, ReactQuery le comprendra et le QueryKey changera, et le hook UseQuery revalidera la requête. Il réexécutera la requête avec la nouvelle QueryKey. Fondamentalement, la fonction QueryFunction que nous fournissons ici sera exécutée. Encore une fois, cela actualisera les données et remplira à nouveau la variable de données que nous avons ici. Assez de bavardage, faisons enfin quelque chose. Tout d'abord, nous devons définir ce filtre ici. Nous allons le faire dans la fonction Onsearch que nous avons ici. Nous n'avons pas besoin de tous ces blocs Try-Catch. Je vais juste faire un commentaire à ce sujet. Dans Onsearch, je vais simplement appeler setFilter, et je vais définir setFilter sur n' importe quelle chaîne de requête que nous avons et quelle que soit la SearchOption que nous avons. Ensuite, comme je vous l'ai dit, nous transmettons le filtre dans le cadre de la QueryKey au lieu de todos. Appelons-le quelque chose comme recherche, cela n'a vraiment pas d'importance. Dans QueryFunction, nous devons d'une manière ou d'une autre placer la logique que nous avons ici sur la base de la SearchOption. Dans cette fonction QueryFunction, nous allons demander si Filter.searchOption est ce que nous avons défini, et au moment où j' écrirai la logique à l'intérieur ce filtre QueryFunction, elle ne sera pas nulle. Parce que, comme vous vous en souvenez, la requête sera désactivée lorsque le filtre est nul dans notre cas. Cela signifie qu'il est prudent d'écrire ici Filter.searchOption sans craindre que le filtre soit potentiellement nul, et cela nous enverra une erreur. Quelque chose comme ça ne peut pas lire propriétés SearchOption de null. Si le filtre SearchOption = s'affiche, dans ce cas, veuillez SearchForShowsFilter.Q sinon, SearchForPeopleFilter.Q. C'est tout. Nous pouvons maintenant supprimer la logique que nous avions précédemment intégrée lors de la recherche. Nous pouvons supprimer ces deux hooks useState ici, des données que nous déstructurons à partir du hook useQuery, nous allons les nommer ApiData, une erreur que nous déstructurons, nous allons la nommer ApiDataError. C'est ça Je supprime ce commentaire indésirable et voyons ce que nous avons. Inspectons la console. Examinons l'onglet Réseau. Je vais taper quelque chose comme bonjour. Cliquez sur « Rechercher » et vous verrez que cela a fonctionné. Eh bien, le même comportement que nous avions auparavant. Si je passe à des acteurs et que je tape des garçons. Par exemple, nous avons ici la demande suivante si je repasse à des émissions et que je le refais, quelque chose d'autre, comme des filles, vous verrez que les données sont récupérées. Car encore une fois, le filtre change chaque fois que nous appuyons sur le bouton de recherche. Chaque fois que nous cliquons sur le bouton Rechercher, nous mettons à jour l'état du filtre. L'état des filtres est mis à jour, QueryKey est, disons, invalidé, il change. Cela signifie que ReactQuery va récupérer les données avec le dernier filtre, avec la dernière clé QueryKey que nous avons transmise. Juste comme ça. Vous avez probablement déjà remarqué ce comportement étrange, lorsque vous pouvez voir plusieurs demandes passer. Le fait est que ReactQuery propose ce que on appelle la récupération des données lors du recentrage. C'est l'une des fonctionnalités de ces bibliothèques de récupération de données. Chaque fois que vous essayez de recentrer la fenêtre, données sont actualisées. Vous pouvez voir que si je clique dans Network Job, puis que je clique à nouveau quelque part à l'intérieur de la page, la demande est toujours envoyée. Ce comportement, la plupart du temps, peut être souhaité, mais dans notre cas, ce comportement est définitivement indésirable. Nous pouvons désactiver cela. Dans les options, je vais transmettre RefetchOnWindowFocus, et si vous passez la souris, vous pouvez lire la description de ce que fait exactement cette option, qui la gardera fausse. Voyons voir. Cherchons quelque chose. Si j'essaie à nouveau de recentrer la fenêtre , rien ne se passera. Quelque chose comme ça. Maintenant, nous avons également useQuery dans le composant d' accueil, félicitations. J'espère vraiment que tu as réussi cette mission. Cela peut être assez difficile, et c'est certainement parce qu' il s'agit d'une nouvelle bibliothèque, d'une nouvelle logique. Mais vous pouvez voir qu'une fois que vous vous y êtes habitué, ce n'est rien de vraiment complexe au final. Validons les modifications que nous avons apportées. Ça va être assez simple. Nous allons simplement dire que modifier ou utiliser UseQuery sur la page d'accueil pour récupérer les données de recherche. Génial. Tout envoyer sur GitHub, et jusqu'au prochain. 76. 20 Affichage des informations sur la page: Bonjour encore une fois, dans la dernière vidéo nous avons ajouté le hook use query à la page d'accueil et nous avons maintenant le cycle complet de récupération de données dans nos composants. Mais puisque nous avons créé la page d'affichage, nous devons afficher les données d'affichage sur cette page. C'est exactement ce que nous allons faire dans cette vidéo, nous allons renseigner les données sur la page de l'émission à l'intérieur du composant émission, allons-y. Quelles données devons-nous afficher ? Si nous examinons la réponse de l'API, c'est ce que nous recevons dans nos données. Nous devons décider exactement ce que nous voulons afficher sur la page afin de créer quelques composants J'ai déjà une idée, alors allons-y. Tout d'abord, dans le dossier de show, je vais créer un nouveau fichier appelé ShowMainData.jsx. Ce sera un composant. Mais maintenant, il renverra une simple exportation div par défaut pour afficher les données principales. Ensuite, je vais également créer, laissez-moi voir un autre composant dont je nommerai les détails, les détails jsx, puis nous allons probablement ajouter quelque chose d'autre. Pour l'instant, cela suffit, revenons à la page d'affichage. Ici, nous avons ces données d' émission, ShowData.name. Au lieu de cela, nous allons utiliser le composant show main data que nous importons à partir de composants, show showMainData où nous le conservons maintenant comme ça. Ensuite, nous allons afficher les détails. Ici, nous pouvons donner les détails sous la balise h2 , puis afficher les détails et nous devons également les importer à partir des détails des émissions. Très bien, laissez-moi l' enregistrer, revenez à la page d' affichage et voici bonjour, bonjour, exactement ce que nous avons dans nos composants pour le moment. Qu'allons-nous afficher dans ShowMainData ? Je pense que nous aurons besoin d'un nom, quelque chose comme une grille, un résumé et une taxe, laissez-moi voir. Nous avons un nom ici, nous avons des genres, nous avons une moyenne ou pas de moyenne, une moyenne des notes. Nous allons donc afficher tout cela dans ShowMainData, transmettons-le là. Tout d'abord, nous avons également besoin d'une image et, si vous vous en souvenez nous avons ce support d'image original et il peut être nul. Nous allons gérer les cas nuls dans le composant cette fois . Passons simplement ShowData.image, puis nous transmettrons le nom qui sera ShowData.name, puis nous allons passer la note. L'évaluation va être juste laissez-moi la trouver, juste la moyenne, nous allons transmettre l'objet et gérer. La moyenne à l'intérieur du composant, la note ShowData, puis nous aurons besoin d'un résumé car nous nous souvenons que nous affichons version très courte du résumé dans la carte d'affichage. Cette fois, nous allons afficher un résumé complet sur la page d'affichage. Nous allons passer un résumé qui se trouve ici. Il s'agit de la chaîne HTML, vous vous souvenez résumé de ShowData, puis nous passerons les genres. Laissez-moi trouver les genres ici. ne s'agit que d'un éventail de genres de cette émission, les genres ShowData. Génial. Passons maintenant à ShowMainData et saisissons toutes ces instructions. Nous allons récupérer une image, nom, une note, un résumé et des genres. Maintenant, ce que nous allons écrire dans ce div, nous devons d' abord afficher l'image. La source sera Image.medium, comme vous vous en souvenez, mais cette fois, nous allons afficher l'image d'origine au lieu de l'aperçu en taille moyenne. Cependant, nous devons gérer les cas d'utilisation nuls, comme vous vous en souvenez Nous allons donc vous demander si l'image est véridique, si les images sont-elles définies ? Ensuite, veuillez utiliser l'image originale, sinon utilisez l'image introuvable. Si je reviens à la carte d'affichage ou à la grille d'affichage, j'ai une logique assez similaire ici, je vais simplement réutiliser cette image png introuvable et la mettre ici et si vous vous souvenez qu'elle est placée dans le dossier public, elle est servie sous la racine. À côté de l'image, ajoutons peut-être également un alt qui sera affiché comme nom, puis nous allons afficher les informations. Séparons donc ce bloc par un div. Ici, nous allons mettre quelque chose comme le nom comme titre, puis nous allons afficher ici la note afin que nous puissions mettre note comme moyenne, cet objet mais la note peut également être nulle ou si je ne me trompe, la moyenne peut être nulle ou non définie ou elle peut être nulle. Je n'en suis pas sûr peut être nulle ou non définie ou elle peut être nulle. Je n'en suis pas sûr mais la moyenne des évaluations cette structure sera toujours la même. Dans ce cas, nous pouvons faire quelque chose si la moyenne des notes est vraie ou disons qu'elle n'est pas nulle, nous pouvons utiliser l'opérateur ou. Ce que je veux dire, c'est que supposons que nous ayons une moyenne de notation nulle. Créons cette moyenne ici, elle est nulle. Nous allons donc afficher soit la moyenne, soit le bonjour Vous pouvez voir « bonjour » s'affiche, ce qui signifie que la moyenne n'a pas été transmise car elle est fausse et zéro est considéré comme une fausse valeur. Dans ce cas, veuillez afficher bonjour. Nous allons appliquer exactement la même logique ici, donc si la moyenne est nulle ou si c' faux dans ce cas, veuillez afficher N/A, est-ce logique ? Ensuite, nous allons afficher le résumé, mais voici le truc. Essayons de le faire, voyons ce que nous aurons. Revenons à notre application et nous avons une image assez grande ici. C'est bon, augmentons et faisons défiler la page vers le bas. Ici, vous pouvez voir que nous obtenons la chaîne HTML telle qu'elle est. La chaîne HTML la considère en fait comme une chaîne et non comme du HTML. Si nous examinons les données, il ne s'agit que d'une chaîne et React ne sait pas qu'il s'agit de HTML. Pour que nous puissions traiter le code HTML comme s'il s'agissait de code HTML, nous devons utiliser ce qui suit. Tout d'abord, nous allons transformer ce div en un composant à fermeture automatique et à ce div nous pouvons transmettre quelque chose appelé DangerouslySet InnerHTML. Il s'agit d'un accessoire React spécial, il doit s'agir d'un objet et cet objet possède une propriété HTML et nous transmettons un résumé à l'intérieur. Avec cette construction, React comprend que nous voulons réellement traiter le HTML comme du HTML. Essayons de voir. Vous pouvez maintenant voir que nous n'avons aucune balise HTML ici et si nous inspectons le balisage, le code HTML que nous avons reçu est en fait traité comme du HTML. Pourquoi est-ce défini comme DangerouslySetInnerHTML ? Le fait est que lorsque vous souhaitez, exemple, afficher du code HTML ou injecter du code HTML sur la page, cela peut contenir du JavaScript malveillant. Pour éviter cela, React vous avertit que si vous voulez vous assurer que vous souhaitez insérer code HTML sur la page, c'est entièrement décider et la précaution est à vous de décider et la précaution est d'utiliser DangerouslySetInnerHTML car c'est dangereux. À côté du résumé, nous allons afficher les genres. Nous pouvons distinguer les genres et pourquoi j' ai un point d'interrogation ici. Les genres vont être, laissez-moi voir, c'est un tableau, ce qui signifie que nous pouvons mapper chaque élément au balisage jsx. Nous allons utiliser la méthode .map, allons-y. Nous allons créer une autre division ici et les genres seront des genres. carte. Ici, nous aurons genre et nous allons peut-être afficher une balise span À l'intérieur, nous pouvons afficher le genre. Lorsque nous utilisons le .map pour mapper le balisage jsx, nous devons transmettre la clé unique à l'élément de la carte. Je dirais que les genres sont assez uniques, afin que nous puissions faire passer le genre lui-même comme la clé unique. Essayons de voir. Je zoome, nous avons des genres, une famille de comédies. Je pense que cette émission n' a qu'un seul genre. Il y a de la comédie et de la famille. Comme nous n'avons pas d'espace, il semble qu'il s'agisse d'une seule chaîne, mais ce n'est pas le cas. Ne faites pas attention, s'il vous plaît ce n'est pas stylé pour l'instant. Pour l'instant, nous ne nous occupons que de la logique au sein de notre application. Nous traiterons du style à la fin. Maintenant, laissez-moi voir Nous avons donc utilisé tous les problèmes que nous voulions. Pour l'instant, je pense que c'est ça. Allons plus loin et abordons les détails. Quels détails internes allons-nous afficher ? Laissez-moi voir quel type de données avons-nous ici ? Nous allons probablement afficher quelque chose comme l' état de l'émission, si elle est toujours en cours, terminée ou peut-être qu'elle vient de sortir et quand exactement cette émission a été diffusée, et peut-être le réseau, où exactement l' émission a été publiée. Dans quelle région, sur quelle chaîne de télévision, quelque chose comme ça. Pour détailler le composant, je vais d'abord transmettre le statut et ce sera juste ShowData.status, puis probablement lors de la première de l'émission, donc ce sera juste ShowData.Premiered puis network. Le réseau n'est qu'un objet, ShowData.Network. Cool. Je l'enregistre. Cette fois, je passe au composant Détails ici, je passe à l'état du réseau créé et je vais récupérer le statut du réseau créé ou peut-être utiliser une autre syntaxe, cette fois, juste pour créer à nouveau, disons, une utilisation occasionnelle de JavaScript. Au lieu de déstructurer les accessoires directement dans les arguments de la fonction, nous le ferons sur une ligne séparée simplement parce que nous voulons qu'il en soit ainsi, rien de spécial à cela. Ici, au lieu de « bonjour », je vais juste dire, peut-être ajouter une balise de paragraphe et dire « le statut, c'est le statut ». Ensuite, dans un autre paragraphe, je dirai « créé à cette date » , puis nous afficherons le réseau. Cependant, ce réseau peut également être nul car toutes les émissions ne contiennent pas ces informations Nous devons donc gérer ce cas. Nous devons partir du principe que c'est une bonne pratique lorsque vous travaillez avec quelque chose d'inconnu. Il est très bon de supposer que quelque chose peut être nul , Il est très bon de supposer que quelque chose peut être nul indéfini ou peut-être même ne pas être passé. Nous allons demander au réseau s'il est fiable, s'il existe ? Dans ce cas, nous allons afficher une chaîne, quelque chose comme la diffusion à cette date sur une chaîne ou un pays spécifique. Choisissons probablement juste le nom, publié pour la première fois à cette date sur network.name. J'ai utilisé des backticks pour spécifier que nous voulions utiliser l' interpolation de chaîne à l'intérieur la chaîne, puis j'ai interpolé le nom du réseau dans la chaîne de nom du réseau. Sinon, veuillez afficher null, ne rien afficher ou nous pouvons nous assurer d'utiliser la valeur booléenne ici. Nous pouvons transformer le réseau en une valeur booléenne et au lieu d'utiliser l'opérateur ternaire, nous pouvons utiliser la fin logique. Dans ce cas, le nom d' un réseau ne sera affiché que lorsque le réseau est véridique. Maintenant, voyons ce que nous avons et le statut a pris fin et a été diffusé à cette date sur CBC. Génial. Maintenant, il semble que nous ayons affiché presque tout ce que nous voulions. Cependant, nous pouvons aller plus loin et afficher plus de données, comme des informations sur les saisons et des informations sur les acteurs. De quoi avons-nous besoin dans ce cas ? Si nous examinons les données d'API que nous avons reçues, nous n'avons aucune information sur les castings ou les émissions. Mais si nous revenons à l'API TV Maze, nous avons ici cette section, laissez-moi voir, sur l'intégration. L'intégration nous permet de charger plus de données sur l'émission, et voici un exemple. Laisse-moi l'ouvrir. L'URL ressemble à ceci. Nous avons intégré des épisodes, des acteurs et si nous faisons défiler la page vers le bas, nous verrons cette section intégrée avec des épisodes et des acteurs. C'est exactement ce que nous allons faire, mais nous devons modifier notre fonction pour rechercher et afficher. Copions cette partie intégrée, puis utilisons cette fonction GetShowById pour obtenir des données. Ici, à l'URL, nous pouvons ajouter une intégration, épisodes et des acteurs. Mais au lieu d'épisodes, nous allons intégrer des saisons. Nous pouvons également obtenir des informations sur les saisons. Au lieu d'épisodes, nous allons spécifier des saisons. Nous l'enregistrons, nous revenons à l'émission, et maintenant elle a été revalidée car vous vous souvenez lorsque vous passez du focus d' une fenêtre à une autre, données seront actualisées car nous utilisons le hook UseQuery, et nous pouvons empêcher leur comportement en utilisant RefetchOnWindowFocus. Si vous ne voulez pas ce comportement, en fait, nous n'en avons probablement pas besoin, je vais le désactiver comme nous l'avons fait sur la page d'accueil. Voyons ce que nous avons dans ce cas. Vous pouvez voir que nous avons maintenant cette section de soulignement intégrée, ici nous avons des informations sur les acteurs et les saisons. Copions cette URL, ouvrez-la ici et inspectons la forme des données relatives aux saisons et à la diffusion. Tout d'abord, nous devons créer composants correspondants pour les saisons et les acteurs. Dans le dossier Shows, je vais créer cast.jsx et je vais créer seasons.jsx. Je vais rapidement copier le balisage, donc pour l'instant ce sera div, props, nous allons les déstructurer en ligne et je vais le nommer Cast. Je ferai de même pour Seasons. Nous allons maintenant utiliser ces composants dans le show here. Donc, dans la prochaine division, nous aurons à nouveau quelque chose comme div , une autre balise de titre qui indiquera Seasons. Ici, nous allons afficher le composant Seasons. Il a été importé automatiquement. Si je regarde le haut, il a été importé à partir de composants Show Seasons. Je vais le copier. Au lieu des saisons, je vais maintenant afficher le casting, puis je vais à nouveau importer le casting. Comment importer ? J'appuie sur « Tab », boum, importé en haut. Super. Quelles données vais-je transmettre ? Pour le composant Seasons, je vais passer à l'accessoire Seasons, et les saisons seront des saisons intégrées. C'est ce que nous recevons de l'API Je vais donc transmettre l'option Afficher le trait de soulignement des données intégré. Assurez-vous de ne pas le mal orthographier, .seasons, et exactement de la même manière que je ferai pour le casting, mais au lieu de passer des saisons, je vais passer l'accessoire du casting, ShowData embedded.cast. Maintenant, dans Seasons, je vais déstructurer l'accessoire de cette saison que nous avons hérité. Voyons ce que je vais afficher ici. Tout d'abord, nous voulons savoir combien de saisons nous avons au total. Si je reviens à l'application, j'ai ce problème avec un motif d'objet vide inattendu. Corrigons rapidement ce problème. Si nous passons à Cast, je vais simplement le supprimer. Donc, dans Seasons, ce que je vais exposer. Tout d'abord, dans la balise p, je vais afficher le total des saisons. Vérifions que nous avons ceci, Seasons au total. Ici, nous allons ajouter seasons.length. Si nous examinons nos données, les saisons ne sont qu'un tableau. Chaque saison est donc un élément de tableau, ce qui signifie que le nombre d' éléments est égal au nombre de saisons. Eh bien, cela semble logique, nous allons donc utiliser seasons.length. À côté des saisons au total, nous allons afficher les épisodes au total et nous allons dire, laissez-moi voir. Puisque nous avons des saisons sous forme de tableau et que chaque élément contient l' ordre des épisodes, et en gros, combien d'épisodes avons-nous au cours d'une seule saison ? Nous devons d'une manière ou d'une autre calculer le nombre total d'épisodes sur l'ensemble de la liste des saisons. Nous pouvons utiliser quelque chose de array.reduce pour le calculer. Nous allons donc dire saisons.reduce. La réduction des saisons se fera désormais par défaut. Nous allons donc réduire toutes nos saisons un nombre. Nous allons compresser ce tableau de saisons en un nombre. Nous allons simplement parcourir chaque élément du tableau et résumer l'ordre des épisodes. Ici, ce sera notre somme et le deuxième élément sera l' élément actuel du tableau qui fera une boucle. Ce sera la saison. Nous allons donc vous dire s'il vous plaît, renvoyez-nous un peu plus l'ordre des saisons et des épisodes. Essayons de voir si nous n'avons pas de commande. Nous avons une saison au total, 13 épisodes au total. Super, ça a marché. Maintenant, à côté du paragraphe, nous allons afficher les données de chaque saison, donc en gros, ces informations, ce qui signifie que nous devons mapper chaque élément de saison au balisage jsx. Nous allons utiliser la méthode de la carte par points. Nous allons indiquer seasons.map, season. Nous allons le mapper à une division ou maintenant laisser être bonjour ou clé, nous allons passer la saison. laissez-moi voir les données. La saison a un identifiant qui est représenté de manière unique afin que nous puissions l' utiliser en toute sécurité comme clé. Nous allons vous dire s' il vous plaît, afficher la saison, le numéro de saison, donc le numéro de saison. Super. Ensuite, nous allons afficher la balise p. Nous allons dire aux épisodes combien d'épisodes cette saison compte. Nous pouvons probablement utiliser l'ordre des épisodes de la saison, pourquoi pas ? Ensuite, nous allons afficher quand cette saison a été diffusée, et nous pouvons utiliser la date de première et la date de fin. Super. Alors laissez-moi le séparer en div séparé, puis je le dirai diffusé. Ce que je vais faire, je vais dire Season.PremiereDate, SeasonEndDate. Probablement ça, oui. Essayons de voir. Nous avons des saisons au total, épisodes au total, puis nous avons la saison 1 qui compte 13 épisodes et qui a été diffusée de cette date à cette date. Ça me va bien. Si nous devons ajouter quelque chose d'autre, nous le ferons plus tard, pour le moment, cela suffira. Travaillons sur le composant moulé cette fois. Au composant moulé, nous passons l'accessoire en fonte. Donc, ici, dans le composant Cast , je vais récupérer l'accessoire Cast, et réfléchissons aux données que nous allons afficher ici. Inspectons l'API. Le casting n'est également qu'un tableau et chaque tableau a cette personne, personnage, ce soi et cette voix Keith. Voyons ce que nous allons faire. Nous allons probablement simplement mapper chaque élément du tableau à des informations et les afficher ici. Allons-y. Nous allons donc simplement faire cast.map. Nommez-le élément et nous allons le mapper en div pour le moment. La clé sera, laissez-moi voir, item person.id, probablement celui-ci. Je pense que ce sera assez unique. À l'intérieur du div, tout d' abord, nous allons afficher, laissez-moi voir, probablement une image réelle. Essayons de le faire. Enveloppons cette image dans un div pour le moment. L'image sera item.person.image, mais vous vous souvenez que l'image peut être nulle, nous devons donc gérer cela. Si item.person.image existe, utilisez dans ce cas item.person.image.medium. Sinon, réutilisez-le , saisissons-le, utilisons l'image png introuvable. Super, sauvegardons-le. Ensuite, à côté de cette image, nous allons afficher, laissez-moi voir, nous avons item.person.name, puis nous allons afficher le personnage contenu dans cette émission dans cette émission. Le personnage sera le nom du personnage, donc cette personne a joué à item.character.name. Et tu sais quoi ? Il est assez répétitif de taper un point d' objet à chaque fois, donc à partir de cet objet nous allons déstructurer la personne et le personnage. Au lieu d'écrire un point à chaque fois, nous allons simplement écrire person.character. Donc character.name. Voyons comment nous pouvons utiliser autre chose. Nous avons ce moi et cette voix ici. voix indique probablement s'il s'agissait simplement de la voix off et si le rôle n'a pas été joué directement dans l'émission. C'était juste une voix off de cette personne, donc nous pouvons peut-être l'utiliser. Nous pouvons également déstructurer la voix à partir d'ici , car c'est la clé de notre objet et nous allons demander à cette personne si elle s' occupe de la voix off. Nous allons simplement afficher quelque chose comme un autre canal parce que c'est ce que nous avons utilisé ici et nous allons dire voix off, sinon une chaîne vide ou nous pouvons à off, sinon une chaîne vide ou nouveau utiliser l' opérateur and et et nous voulons nous assurer que ce sera un booléen, mais je pense que cette valeur ici sera toujours une valeur booléenne, donc nous n'avons pas besoin de transformer cette variable, cette valeur en une valeur booléenne en appliquant une double négation ou en utilisant un constructeur booléen. Je pense que ce sera suffisant. Essayons maintenant de voir notre résultat final. Nous avons la page d'émission suivante. Laisse-moi le réduire. instant, je sais que ce n'est pas stylé, mais nous allons nous en occuper, ne vous inquiétez pas. Nous avons tout ce que nous voulons de la série. Nous intégrons un résumé, nous affichons la note moyenne des émissions, nous affichons les genres, nous affichons les détails de la diffusion, peut-être de la fin, nous affichons des informations sur les saisons et nous affichons des informations sur les acteurs. Quelle était la personne qui a joué ce rôle et cette personne était-elle un personnage de voix off ou n' importe quel personnage de la série ? Je pense que c'est ça. En fait, c'était beaucoup. Nous avons travaillé avec des données d'API, nous avons créé les composants correspondants pour afficher les données. Où maintenant nous allons tout commettre. Passons rapidement en revue ce que nous avons ici. Nous avons modifié la fonction get show by id pour récupérer des données, nous avons intégré les saisons, nous avons intégré le cast, puis nous utilisons les informations que nous obtenons de l'API et affichons sur la page de l'émission. Nous avons créé les composants correspondants, nous avons transmis les accessoires correspondants puis nous avons tout géré à l'intérieur de chaque composant correspondant, quelque chose comme ça. Je vais tout ajouter à la scène et mon message de validation s' affichera avec les données détaillées de l'émission sur la page de l'émission. Cool. Une autre chose que je voudrais souligner ici est que, comme vous vous en souvenez, nous avons désactivé ce comportement RefetchOnWindowFocus de la requête use who. Maintenant, lorsque nous revaliderons, excusez-moi, laissez-moi redémarrer l'application. Où se trouve notre page d'émission ? Oups, je l'ai accidentellement fermé. Ce que je veux dire, c'est que lorsque nous refocalisons la fenêtre, les données ne sont pas récupérées tout le temps, mais que se passe-t-il si notre identifiant d'affichage n'existe pas ? Essayons de voir. Essayons quelque chose de charabia. Voyons voir ce que nous avons ? Nous voyons que les données sont en cours de chargement et nous pouvons voir ce comportement de nouvelle tentative. Vous pouvez voir que la demande a été envoyée trois fois en fait, et si, au moment de la troisième demande, nous avons toujours une erreur liée à notre demande uniquement, l'utilisation de la requête affichera une erreur. Vous pouvez voir que la bibliothèque de récupération de données est plus que simple. Veuillez récupérer mes données lorsque le composant est monté. Cette récupération de données suppose que les demandes peuvent potentiellement échouer et, en cas échec, elle la réessaie automatiquement à quelques reprises, avec ce que l' on appelle un arrêt exponentiel. Par exemple, si notre demande échoue pour la première fois sera réessayée au bout d'une seconde. En cas d'échec, elle sera réessayée au bout d'une seconde. En cas d'échec, le prochain essai aura lieu dans deux secondes et prochain essai aura lieu après trois secondes. Use query s'occupe de cela. Plutôt cool. C'est ça. On se voit dans le prochain. 77. 21 Ajouter le bouton Aller arrière sur la page d'exposition: Rebonjour. Dans la dernière vidéo, nous avons créé des composants dans lesquels nous affichons des données relatives à une émission spécifique sur la page de l'émission. Elle était assez longue. Nous devons maintenant réfléchir un peu plus à l'expérience utilisateur. Qu'est-ce que je veux dire par là ? Supposons que nous soyons sur la page d'accueil, nous recherchions une émission spécifique, puis que nous cliquons sur Lire la suite. Nous nous retrouvons sur la page de l'émission. Maintenant, nous n'avons pas de boutons supplémentaires pour la navigation ici, ce qui signifie que l'utilisateur doit cliquer sur Revenir à la page précédente, Revenir à la page précédente, et si nous revenons à cette page, nous voyons que toutes nos données ont disparu, nous devons recommencer la recherche. Ce que nous pouvons faire dans cette situation. Tout d'abord, nous devons ajouter sur la page d'affichage un bouton qui ramènera l' utilisateur à la page d'accueil. Ce sera juste un peu plus pratique pour l'utilisateur. Mais cela ne résout pas le problème que les données disparaissent lorsque l' utilisateur revient sur cette page et au box office Nous ne nous occupons pas de cela, mais idéalement, nous devons nous souvenir de la dernière recherche que nous avons effectuée. Ainsi, lorsque l'utilisateur revient sur cette page, elle y figure toujours. Nous n'allons pas aborder cela dans Box Office, nous allons présenter une alternative. Et si nous recherchions l'émission et que lorsque nous cliquons sur Lire la suite, l'utilisateur accède au nouvel onglet ? Cela ouvre cette page d'affichage dans le nouvel onglet. Allons-y et faisons-le. Si nous revenons au composant show card que nous avons, nous utilisons ce composant de lien ici. Nous utilisons le composant de lien parce que nous utilisons bibliothèque de routage côté client react-router, et afin de gérer correctement la navigation via les liens, nous utilisons ce composant de lien spécial importé de React router dom. Mais si nous voulons ouvrir quelque chose dans un nouvel onglet, cela n'a rien à voir avec le routage client-site. Dans ce cas, nous pouvons utiliser une simple balise d'ancrage au lieu d' utiliser le composant link du routeur React dom. Nous pouvons donc simplement le supprimer, et au lieu d'utiliser clink, nous allons afficher la balise d'ancrage. étiquette d'ancrage possède une propriété de creux. Nous pouvons maintenant fournir un autre attribut de la balise d'ancrage appelé cible et spécifier un trait de soulignement vide. Dès que je spécifie vide comme cible, j'obtiens cette erreur provenant du lien ES provenant de React JS x target blank qui indique que vous devez utiliser la relation non référencée. Je vais juste copier de manière non spécifiée. ne s'agit que d'une très petite mesure de sécurité. Je l'enregistre. Maintenant, essayons. Si je clique sur Lire la suite, ma page d'affichage s'ouvre dans un nouvel onglet. Plutôt cool. Cependant, encore une fois, comme nous avons convenu rendre l'expérience utilisateur un peu plus pratique, nous allons ajouter le bouton « Revenir à l' accueil » quelque part en haut. Nous allons passer au composant Afficher la page. Ici en haut, juste en haut de l'affichage des données principales. Nous pouvons ajouter deux choses ici. Nous pouvons soit ajouter un composant de lien qui nous ramène à la maison, quelque chose comme ça, soit retourner à la maison, et c'est une solution tout à fait correcte. Nous allons en fait utiliser celui-ci. Mais je veux juste que tu voies l'alternative. Parce que le routeur React est une bibliothèque de routage. Elle a quelque chose à offrir. Nous allons y jeter un œil. Mais nous pouvons quand même utiliser le composant link. Au lieu d'utiliser Clink pour le moment, nous allons ajouter un bouton, et nous allons dire « Retournez à la page d'accueil ». Sur ce bouton de saisie, nous allons activer le gestionnaire «  on click », « Revenir en arrière » et celui-ci, sur « Revenir en arrière », fera quelque chose pour nous. Si nous revenons à la documentation de react-router, elle contient quelque chose appelé use navigate. Utiliser le hook de navigation, en regardant cet exemple, nous permet de naviguer par programme entre les pages, toujours en utilisant le routeur React dom. Au lieu d'utiliser le composant lien, disons de manière plus déclarative, nous utilisons une fonction qui effectuera la navigation de manière essentiellement programmatique et de manière plus impérative. En regardant cet exemple, je peux récupérer et utiliser la navigation à partir du routeur React dom. En fait, j'ai déjà importé, donc je vais le faire comme ça. Excusez-moi, n'utilisez pas de paramètres, utilisez la navigation. Ensuite, je vais appeler Use Navigate ici. Cette utilisation de navigation nous renvoie une fonction que nous devons appeler pour accéder à une page spécifique. Naviguez jusqu'à, je vais l' appeler ainsi. Lorsque nous cliquons sur, revenons à la page d'accueil, nous appelons Navigate to, puis nous précisons, nous revenons à la page d'accueil. Revenons à l'application. En haut, nous avons ce bouton ici. Encore une fois, ce bouton ne lie pas un composant, c'est un bouton. Si nous cliquons, nous rentrons à la maison. Si vous devez naviguer par programme ou rediriger un utilisateur vers une page, vous pouvez utiliser le crochet de navigation. Mais dans notre cas, nous n'avons pas vraiment besoin transformer un bouton en lien par programme. Nous pouvons utiliser directement le composant de lien car cela a plus de sens. C'est pourquoi nous n'allons pas utiliser, utiliser navigate, qui s' en tiendra au composant de lien. est aussi simple que cela. Maintenant, essayons de voir. Si nous regardons le balisage intérieur. Maintenant, il s'agit en fait de la balise d'ancrage. Cool. Si nous cliquons dessus, nous retournerons toujours à la maison. Mais cela nous oblige à utiliser moins de code. C'est en fait mieux car il fait maintenant un balisage approprié, un balisage HTML approprié pour naviguer entre les pages puisqu'il s'agit d'une balise d'ancrage. Cool. Maintenant, nous avons légèrement amélioré l'expérience utilisateur. Maintenant, ça a l'air beaucoup mieux. C'est tout pour le moment. Validons les modifications. Nous avons ajouté le retour à la page d'accueil et nous ouvrons la page d'affichage dans un nouvel onglet. Je vais dire que dans mon message de validation le bouton Ouvrir ou Lire la suite amène l'utilisateur à un nouvel onglet maintenant, ajouté le lien Retourner à l'accueil sur la page d'accueil. C'est ça. Poussez tout pour vous lever. Je te verrai dans le prochain. 78. 22 Introduction à useReducer comme alternative à useState: Salut, dans la dernière vidéo, nous avons parlé un peu de l' expérience utilisateur. Maintenant, lorsque nous cliquons sur Lire la suite, la page s'ouvre dans un nouvel onglet, et nous avons ajouté le bouton « Revenir à l'accueil » . Tout cela est génial. Cependant, nous manquons de fonctionnalités pour le bouton « Star Me ». Chaque fois que nous cliquons sur ce bouton, nous voulons mettre cette émission en vedette. Plus tard, lorsque nous accédons à la page des favoris, nous pouvons voir notre liste de favoris ici. Comment pouvons-nous y parvenir ? Avant de pouvoir le faire, nous devons examiner l' alternative au recours à l'État. Revenons à notre composant. Disons probablement vers la page d'accueil. Ici, nous allons jouer avec le nouveau crochet. Comme vous le savez déjà, si nous voulons que la valeur change au cours du cycle de vie des composants, nous devons utiliser le hook useState. En gros, il s'agit simplement d'une valeur qui change. Il nous donne la variable d'état et la fonction que nous pouvons utiliser pour mettre à jour cet état. C'est notre façon de gérer l'état local d'un composant. Il existe une alternative à l'état d'utilisation appelée UseReducer. C'est une alternative, cela signifie qu'elle ne remplace pas useState, tout comme useState ne remplace pas useReducer. Vous pouvez utiliser ce que vous voulez et ce qui vous semble le plus approprié. Si nous avons useState et que nous avons, disons, une fonction de filtrage que nous pouvons appeler pour diriger l'État avec useReducer, nous avons ce que l'on appelle des actions. En fait, nous lançons une action, puis cette action est gérée par une fonction, et cette fonction décide comment mettre à jour l'état en fonction d'une action. Nous allons examiner l'exemple d'un compteur. Le hook dont je parlais est UseReducer. Nous allons définir ce qu' est un réducteur en une seconde. En haut de la page, je vais appeler UseReducer. Ce UseReducer en tant que premier argument reçoit quelque chose appelé réducteur. En plus, je vais créer une fonction de réduction. Maintenant, ce sera une fonction vide et je vais la transmettre à UseReducer. Comme deuxième argument, je dois passer à l'état initial. Tout comme dans le cas de UseState, notre état par défaut sera nul car nous allons implémenter un compteur. Lorsque nous cliquons sur un bouton, nous voulons soit l' incrémenter, soit le décrémenter. UseReducer, tout comme useState, nous renvoie un tableau d' exactement deux éléments. Nous allons déstructurer ces deux éléments. Le premier élément, encore une fois, sera l'état, tout comme avec UseState. Disons un compteur. Le deuxième élément sera ce que l'on appelle l'expédition. Maintenant, que dois-je faire pour mettre à jour l' état d'une manière ou d'une autre ? Le concept de réducteur, donc ce crochet useReducer est basé sur le concept de réducteurs. Laisse-moi ouvrir Paint et t'expliquer quelque chose. Visualisez simplement l'idée de UseReducer. Avec UseReducer, nous abordons les actions qui sont gérées par une seule fonction appelée réducteur. De multiples actions se produisent dans notre État. Par exemple, en cas de compteur, nous avons une incrémentation. Permettez-moi de l'agrandir un peu, puis nous procéderons à une réduction. Disons que nous avons une autre action appelée quelque chose comme réinitialiser le compteur, réinitialiser. Toutes ces actions sont ensuite envoyées par cette fonction de répartition à la logique interne de React. Ensuite, nous avons une seule fonction appelée le réducteur, qui gère toutes ces actions entrantes. Chaque fois qu'une action est envoyée, elle est gérée par la fonction de réduction et tout ce que la fonction de réduction renvoie sera le nouvel état. ensemble de ce flux remplace le hook useState et est basé sur le concept du réducteur. Maintenant, qu'est-ce que le réducteur ? Comme je l'ai mentionné précédemment, réducteur n'est qu'une fonction qui gère d'une manière ou d'une autre ces actions. Mais quelles sont ces actions ? C'est le but. Nous devons définir nous-mêmes les actions. Une action, dans ce cas, n'est qu'un objet qui transmet des données. Par exemple, nous pouvons définir une action pour incrémenter les données. Habituellement, lorsque nous parlons de réducteurs, lorsque nous parlons tout ce concept, une action est toujours un objet. Avec le type, disons incrémentation et une charge utile supplémentaire. Ça peut être n'importe quoi. Il peut s'agir d'une nouvelle valeur, peu importe. Cet objet peut prendre n'importe quelle forme. Mais généralement, il possède ce type, cette clé et cette charge utile juste pour le rendre plus cohérent. Nous devons définir ces actions nous-mêmes. Ils sont ensuite manipulés à l'intérieur du réducteur. Je vais y aller. Dans le balisage JSX, je vais dire que le compteur va être un compteur, interpeller l'État. Ensuite, j'ajouterai deux boutons ici. L'une sera incrémentée, la seconde sera décrémentée et la troisième sera réinitialisée. Chaque fonction aura ce OnClick et nommons ces gestionnaires OnIncrement, puis OnDecrement et OnReset. Nous devons maintenant créer ces fonctions. Faisons-le ici en haut. Nous avons OnIncrement, puis OnDecrement et OnReset. Il faut qu'il se passe quelque chose. Nous devons envoyer des actions afin de mettre à jour l'état d' une manière ou d'une autre. Nous pouvons appeler le service de répartition. Ici, nous devons passer une action. Par exemple, lorsque des incréments se produisent, nous envoyons une action. Encore une fois, une action n' est qu'un objet. Prenons celui-ci en fait. Nous n'avons pas besoin de charge utile ici pour le moment. Nous allons simplement envoyer une action et ce sera un objet de type INCREMENT. Lorsque nous décrémentons, nous voulons envoyer une action DECREMENT. Si nous n'avons pas de réinitialisation, nous pouvons envoyer une action de type RESET. Encore une fois, ce sont les objets que nous définissons pour nous. Il nous sera plus facile de les comprendre. Chaque fois que cette expédition est appelée cette action sera gérée par la fonction de réduction. Cette fonction de réduction doit renvoyer un nouvel état. Pour l'instant, retournons à zéro. Cette fonction de réduction reçoit deux arguments. Tout d'abord, il reçoit CurrentState. Tout comme dans le cas d'une fonction de mise à jour d'état avec useState lorsque nous passons un rappel. Nous avons accès à CurrentState comme premier argument. La même idée se trouve ici à l'intérieur du réducteur. Nous avons CurrentState, appelons-le CurrentCounter. Le deuxième argument est l' action que nous avons envoyée. Je vais enregistrer CurrentCunter et son action. Revenons ici. Nous avons quelque chose comme ça. Inspectons la console. Chaque fois que je clique sur Incrémenter, je vois deux choses se consoler. Je vois que CurrentCounter est égal à zéro. C'est notre état actuel. Nous avons de l'action. L'action est exactement ce que nous transmettons lorsque nous avons appelé la fonction de répartition, ce sera cette action ici. Sur la base de ce que nous transmettons, ce que nous envoyons, nous pouvons écrire notre logique dans une seule fonction. Habituellement, lorsque vous travaillez avec des réducteurs, vous travaillez avec un boîtier de commutation. Nous allons changer d'action.type. Dans le cas où nous aurions, tapez INCREMENT. Dans ce cas, à partir du réducteur, nous renvoyons CurrentCounter plus 1. Nous augmentons le compteur. Encore une fois, tout ce qui est renvoyé par le réducteur sera défini comme le nouvel état. Dans le cas d'une décrémentation, nous disons CurrentCounter moins 1. Si nous appelons RESET, veuillez renvoyer 0. Si aucune de ces valeurs ne correspond par défaut, nous allons renvoyer 0. Sauvegardons-le et voyons voir. Si je clique sur Incrémenter, le compteur est incrémenté. Si je clique sur Réinitialiser, il est remis à zéro. Si je décrémente, c'est en train d'être décrémenté. Comme vous pouvez le constater, en utilisant cette fonction de réduction et en utilisant les actions que nous avons définies nous-mêmes puis gérées dans la fonction de registre. Nous pouvons appliquer cette logique pour gérer l'état en fonction des actions. Et encore une fois, il s'agit d'une alternative à l'utilisation du hook UseState. Utilisez le réducteur comme votre État gère l'état, mais avec le concept de réducteurs et d'actions de répartition, laquelle utiliser. Cela dépend du cas d'utilisation et de ce que vous préférez. plus courante consiste à utiliser useState, mais supposons que si votre logique de mise à jour de l'état inclut de nombreuses actions, disons différentes, par exemple l' incrémentation , la décrémentation, la réinitialisation , la définition d'une valeur spécifique, disons l'incrémentation de 10. Ainsi, vous pouvez utiliser le hook useReducer l'incrémentation de 10. Ainsi, vous pouvez utiliser le hook useReducer . je vous dis tout cela, c'est parce que pour implémenter Start Shows, nous allons utiliser le hook de réduction des utilisateurs, car nous aurons quelques actions telles que Start Show et OnStart Show. J'ai déjà mentionné que vous pouvez transmettre toutes les données à cette action ici. Voyons ce que je veux dire par là. Comme je vous l'ai dit, nous avons un endroit unique où nous gérons la logique et tout ce qui est renvoyé par la fonction de réduction sera défini comme le nouvel état. Pourquoi n'avons-nous pas défini ici une autre action appelée SET_VALUE, quelque chose comme ça. Ensuite, je vais simplement créer un autre bouton ici et dire à Set de dire 500. Ensuite, cliquez sur SetToValue. Je vais créer cette fonction ici et envoyer le type SET_VALUE afin qu'elle puisse être gérée par le réducteur. Je vais transmettre la valeur, ou disons NewCounterValue 500. Maintenant que nous avons accès à l'objet d'action dans le réducteur et que nous savons que l'objet d'action est exactement ce que nous envoyons, et que nous savons que l'objet d'action est exactement ce que nous pouvons lui indiquer de renvoyer Action.NewCounterValue. Tout ce que nous transmettons comme NewCounterValue sera renvoyé par la fonction de réduction, et ce sera le nouvel état. Essayons de voir Increment, Decrement, Set to 500, c'est 500, quelque chose comme ça. Toutes les données que vous transmettez ici sont disponibles dans la fonction de réduction. En gros, c'est ça. Rien d'autre à ajouter à propos des réducteurs c'est peut-être si vous avez probablement entendu parler de redux, une bibliothèque permettant de gérer l'état global des applications React. Redux est basé sur le concept du réducteur. Dans un redux, vous distribuez des actions de ce type , puis vous les gérez toutes dans des réducteurs. Cool. Débarrassons-nous de tout ça. J'espère que la raison pour laquelle useReducer pourrait être utile comme alternative à useState est claire raison pour laquelle useReducer pourrait être . En fait, j' ajouterais peut-être que toutes ces actions, incrémentées décrémentées, peuvent être facilement remplacées par le hook useState. Au lieu de gérer toute la logique à l'intérieur du réducteur, vous pouvez simplement faire quelque chose comme SetCounter, disons CurrentCounter plus 1. Vous pouvez faire la même chose à l'intérieur en cas de décrémentation. Excusez-moi, ce sera comme ça, CurrentCounter moins 1. Vous écririez essentiellement la même logique que dans le réducteur. Lorsque vous utilisez, useState hook et en cas de réinitialisation, il suffira de SetCounter pour le savoir et cela pourrait être plus facile. Ça dépend. C'est pourquoi on l' appelle une alternative. C'est à vous de décider de ce qui convient à vos besoins. Maintenant que nous connaissons UseReducer, nous pouvons l'utiliser pour implémenter notre logique de démarrage d'émissions. Cool. On se voit dans le prochain. 79. 23 salons étoilés p1: Salut, voilà. Dans la dernière vidéo, nous avons parlé useReducer comme alternative au hook useState. Il peut être utilisé pour gérer l'état lorsque plusieurs actions sont définies et que nous souhaitons mettre à jour l'état en fonction de certaines actions. Nous allons utiliser UseReducer pour implémenter notre logique d'étude des émissions. Allons-y Tout d'abord, comment allons-nous gérer la logique qui sous-tend les émissions vedettes ? Chaque fois que nous cliquons sur le bouton « Démarrer », nous ajoutons show ID au tableau, qui sera notre état. L'état des émissions de départ sera simplement un tableau d'identifiants d'émissions. Si nous cliquons sur une émission, identifiant sera ajouté au tableau. Si nous cliquons dessus deux fois, il sera supprimé de ce tableau. Ensuite, chaque fois que nous accédons à la page d'accueil, nous prenons ce tableau d' émissions étoilées, puis l'utilisons pour interroger les données de l'API TV Maze. C'est assez simple. La question est de où allons-nous écrire cette logique ? Nous avons un composant domestique. Cependant, dans le composant entier, qui est affiché, affiche soit la grille, soit grille réelle en fonction des données dont nous disposons. Nous allons écrire la logique dans show grid pour le moment, et plus tard, nous allons extraire cette logique dans un autre fichier. Il sera plus facile d'y accéder à l'intérieur d'autres composants, par exemple le composant de démarrage, car notre logique sera éventuellement partagée entre plusieurs fichiers. Nous allons commencer simplement. Dans show grid, je vais importer useReducer depuis React. Ensuite, je vais vous appeler avec, pour l'instant, émissions réducteur d'émissions vedettes que nous allons créer dans une seconde. Notre état initial sera un tableau vide. useReducer renvoie un tableau de deux éléments où premier élément sera l'état lui-même, donc marqué d'un astérisque, puis la fonction de répartition, disons dispatch start. Nous devons maintenant créer un réducteur d'émissions étoilées, une fonction qui gérera la logique de mise à jour de l'état et qui définira les actions. En gros, nous n'aurons que deux actions ici. Pour mettre en vedette une émission et ne pas la mettre en vedette. Définissons-les. Chaque fois que nous cliquons sur Star me, nous lançons une action de type Star me ou, disons, étoile, et les données qui seront transmises seront affichées. La deuxième action sera Unstar. Encore une fois, nous allons transmettre l'identifiant au réducteur. À l'intérieur du réducteur, le premier argument est notre état actuel. Nommez-le comme point de départ actuel. Le deuxième argument sera un objet, l'action qui est envoyée. Ensuite, en utilisant à nouveau le boîtier du commutateur, nous écrirons la logique permettant de gérer actions qui sont envoyées. Nous écrivons la logique en fonction du type d'action. Nous changeons de type d'action. Si nous avons une étoile, dans ce cas, veuillez renvoyer CurrentStarred.concat action ShowID. Quel que soit l'identifiant d'émission que nous transmettons par le biais de l'action, veuillez ajouter cette valeur à notre tableau d'étoiles actuel. La deuxième action se déroulera sur Star que nous allons gérer. Dans ce cas, nous devons supprimer cet identifiant d'émission de notre tableau d'états actuel. Nous pouvons utiliser la méthode du filtre par points , disponible sur le tableau. Pour les éléments, tout d'abord, la méthode de filtrage attend un rappel dans lequel nous écrivons la logique pour filtrer les éléments à l'intérieur du tableau. Cette méthode de filtrage par points, tout comme la carte noire, reçoit exactement les mêmes arguments. premier élément est la valeur, l'élément actuel que nous parcourons en boucle l'index de cet élément et la référence au tableau lui-même, nous n'avons besoin que de la valeur qui sera affichée. Quelle que soit la valeur renvoyée par ce filtre à points, elle peut être vraie ou fausse. Si ce rappel renvoie la valeur true pour cet élément, alors cet élément restera dans ce tableau Si le rappel renvoie la valeur false pour l'élément que nous parcourons en boucle, il ne sera pas inclus dans le tableau final. Nous allons simplement dire si show ID n'est pas égal à action show ID. Avec cette logique, nous pouvons filtrer tous les éléments qui ne remplissent pas cette condition. Par défaut, si nous transmettons quelque chose d'inconnu dans ce cas, veuillez renvoyer le même modèle avec astérisque. Allons-y et créons une fonction qui gérera la logique lorsque nous cliquons sur le bouton « Star Me ». Nous allons dire à Const on Star, à moi de cliquer. Dans cette fonction, nous allons écrire la logique. Tout d'abord, si vous me mettez en vedette , cliquez sur une fonction qui recevra show ID comme argument. Ce sera l'identifiant d'affichage, l'identifiant d'affichage correspondant avec le bouton Star Me. Cela fera référence à l'identifiant d'affichage sur lequel nous cliquons essentiellement. Ensuite, à l'intérieur, nous allons devoir déterminer si l' émission est déjà en vedette. Si l'émission n'est pas mise en favori, nous allons envoyer l'action de démarrage, sinon, nous allons envoyer l'action UnStar. Nous pouvons créer une variable appelée étoile et nous allons simplement demander si le tableau des émissions favorites inclut l'identifiant de l' émission sur laquelle nous avons cliqué. Si cette émission est mise en vedette, nous la diffuserons en tant qu'étoile. L'action sera de type OnStar, et show ID, nous devons transmettre l'identifiant d'affichage ici, sera ce que nous appelons OnStar me click width. Sinon, nous allons appeler Dispatch Started de type star Maintenant, nous devons utiliser ce OnStarmeClick d'une manière ou d'une autre. Eh bien, nous pouvons utiliser cette fonction dans ShowCard. Nous pouvons, disons, transmettre un argument, transmettre un accessoire appelé OnStarClick, et nous pouvons transmettre le répertoire OnStarmeClick ici, comme ceci, ou disons que OnStartMeClick sera OnStarmeClick. Dans ShowCard, nous allons récupérer la sonde OnStarmeClick que nous passons maintenant. Vous pouvez voir que cet OnStarmeClick est appelé avec l'argument ShowID, ce qui signifie que chaque fois que nous appelons OnStarmeClick, nous devons transmettre ShowID. Sur ce bouton, OnStarMe, nous allons dire à OnClick appeler OnStartMeClick et de transmettre l'identifiant de l'émission. Cool. Maintenant que nous avons le flux complet, essayons d'annuler journal StarredShows pour voir ce que nous avons exactement dans notre état. À présent, il s'agit initialement d'un tableau vide, c'est ce que nous avons défini. Si je clique sur OnStarMe, je vois maintenant que ce ShowID a été ajouté à cet état. C'est plutôt cool. Essayons d'en ajouter un autre. Nous pouvons voir maintenant que nous avons trois éléments. Si je clique deux fois sur la même émission, elle est supprimée du tarif national. Notre logique de base pour mettre en vedette une émission non vedette fonctionne très bien. Cependant, comme ce hook trouve à l'intérieur du composant ShowGrid, chaque fois que nous accédons à Start , puis que nous revenons à la page d'accueil , notre état revient à l'état initial , car cet état est local à ce composant, lorsque le composant est démonté, l'état disparaît. Nous devons réfléchir à la manière dont nous pouvons réellement conserver ces données. Nous pouvons le faire, par exemple, en enregistrant StarredShows dans la mémoire du navigateur afin de pouvoir le récupérer plus tard. Cela va être un peu avancé car la première chose qui me vient à l'esprit lorsque nous devons partager l'état entre plusieurs pages, entre plusieurs composants, nous pouvons augmenter cet état, disons quelque part vers une application. Si notre État est géré ici, cet état peut alors être transmis en tant qu'accessoire à, disons, aux composants pour enfants, aux étoiles et à la maison. Mais dans ce cas, nous soulevons tout vers le haut, sorte que tout le monde, notre composant racine, sache quelque chose à propos de cet état. Ce n'est pas mal, et c' est une méthode assez standard pour gérer l'état de partage entre les composants dans React. Mais nous allons introduire une alternative à cela. Pourquoi allons-nous le faire de cette façon au lieu passer de la composante État à l'application ? Parce que même si nous partageons l'état entre les pages de l'application, cet état disparaîtra lorsque nous actualiserons la page . Mais nous ne voulons pas le faire. Au lieu de cela, nous voulons conserver l'état d' une manière ou d'une autre, sorte que chaque fois que nous actualisons la page, nos StarredShows sont toujours là. Même si nous fermons le navigateur ou fermons cet onglet, nos StarredShows ne disparaîtront pas. Ce que nous allons faire dans ce cas, utiliser ce que l' on appelle le stockage du navigateur. Nous pouvons utiliser spécifiquement le stockage local ou le stockage de session. Cela ressemble à une petite base de données qui se trouve dans le navigateur, et vous pouvez l'utiliser pour stocker des données temporaires dans le navigateur. Il s'agit d'une base de données de type clé-valeur, ce qui signifie que sous une clé spécifique , vous pouvez enregistrer une valeur spécifique , et lorsque vous actualisez la page, ou disons que vous fermez le navigateur et revenez à cette page, pour cette URL spécifique, pour ce site Web spécifique, ce stockage est persistant. Les valeurs sont toujours présentes, à moins qu'elles ne soient nettoyées par l'application elle-même ou manuellement par vous, par l'utilisateur. Nous allons stocker notre page d'accueil dans le stockage local. Allons-y et réfléchissons à la manière dont nous pouvons y parvenir. Nous devons réfléchir à la manière dont nous pouvons écrire l'état que nous avons dans notre application sur le stockage local. Nous devons le synchroniser, car chaque fois que nous modifions cet état, nous voulons également l'enregistrer dans le stockage local, enregistrer dans la base de données, puis lorsque nous actualiserons la page, nous aimerions récupérer les données de ce stockage, puis les utiliser dans notre application. Avec cela, nous pouvons écrire, disons, logique supplémentaire au-dessus de useReducer. Pour cela, nous pouvons créer un hook personnalisé au-dessus de useReducer avec une logique supplémentaire qui conserve l'état dans le stockage local. C'est un peu avancé, mais il n'y a rien, disons, de confus à ce sujet. Allons-y et essayons de le faire. Nous avons déjà le hook useReducer, et nous voulons écrire la logique qui fait tout exactement de la même manière que useReducer, mais qui synchronise également l' état avec le stockage local. Nous pouvons peut-être créer un hook personnalisé appelé quelque chose comme UsePersistedReducer. Allons-y et créons ce crochet personnalisé par-dessus, nous allons l'appeler UsePersistedReducer. Nous voulons conserver l'API du hook intégré, ce qui signifie que nous voulons utiliser exactement les mêmes arguments, nous voulons renvoyer exactement les mêmes éléments, donc tout sera à peu près identique. Allons-y et essayons de le faire. Dans UsePersistedReducer, nous allons utiliser UseReducer. Comme ce hook sera, disons, réutilisable, nous ne voulons pas, disons, étroitement la logique à StarredShows. Ce sera quelque chose, disons, abstrait et réutilisable pour gérer de multiples cas d'utilisation. Nous allons simplement appeler ce patch dispatch, et au lieu de StarredShows, nous allons simplement l' appeler state. Ensuite, dans ce UseReducer, nous devons transmettre le réducteur car nous allons conserver l'API de UsePersistedReducer. En fait, nous allons l' utiliser comme useReducer, usePersistedReducer, nous allons transmettre , disons, un réducteur, puis nous voulons transmettre la clé initiale, puis nous voulons également transmettre la clé de stockage locale sous laquelle les valeurs seront enregistrées ici. Maintenant que nous devons transmettre trois arguments, nous devons les recevoir dans UsePersistedReducer Nous recevons donc reducer, InitialState recevrons InitialState et LocalStorageKey. Nous passons à UseReducer. Nous transmettons au réducteur InitialState et nous transmettons quelque chose appelé initialiseur. Qu'est-ce que c'est ? Lorsque nous avons actualisé la page, nous voulions récupérer les données du stockage local et les utiliser comme état initial. Nous voulons exécuter cette logique une seule fois lors du montage du composant, afin de pouvoir utiliser la fonction d'initialisation. Il s'agit du troisième argument qui ne s'exécute qu' une seule fois pour initialiser InitialState. Cet initialiseur reçoit un argument, InitialState. En gros, tout ce que nous transmettons ici sera disponible en tant qu'argument dans l'initialiseur. Ceci est fait dans ce cas si l'initialiseur est créé en tant que fonction distincte quelque part à l'extérieur. Dans ce cas, nous n'allons pas le faire, nous allons simplement intégrer l'initialiseur directement ici, qui l'appellera initial. Cet argument initial sera essentiellement l'état initial que nous transmettons ici. Maintenant, la logique sera la suivante. Nous devons d'abord vérifier si nous avons déjà des données dans le stockage local. stockage local est disponible sur l'objet window, il s'agit, disons, d'une variable globale ce qui signifie que nous pouvons simplement démarrer stockage local , puis le faire fonctionner. Ici, nous allons demander PersistedValue. Si le stockage local est GetItem sous une clé spécifique, nous devons d'abord comprendre si cette valeur existe ou non dans la couche de base. Jouons peut-être un peu avec localStorage pour vous faire une idée. LocalStorage, nous pouvons définir un élément sous des informations clés spécifiques. Disons que sous clé faible, je peux dire valeur haute. J'exécute cette logique, je reviens à localStorage. Ici, juste au cas où je l'actualiserais, vous pouvez voir que sous la touche faible, j'ai maintenant la valeur haute. Je peux stocker autant de valeurs ici je peux les réécrire. Maintenant que cette valeur est stockée dans la mémoire du navigateur, je peux simplement appeler GetItem, puis spécifier la clé sous laquelle je voulais obtenir ma valeur. Je spécifie getItem low, j'ai reçu ma valeur haute. Le truc avec localStorage, c'est qu'il ne peut fonctionner qu'avec des chaînes. Dans notre cas, l' état avec lequel nous travaillons sera un tableau, ce qui signifie que avec lequel nous travaillons sera un tableau, ce qui signifie lorsque nous allons écrire localStorage, nous allons convertir notre tableau en chaîne et lorsque nous allons le récupérer depuis le stockage local, nous devons le reconvertir de chaîne en tableau. Comment pouvons-nous y parvenir ? Tout d'abord, à partir de localStorage nous obtenons un article sous localStorageKey. Notre valeur persistante sera soit nulle, soit une chaîne. Null si cette valeur n' existe pas dans le stockage local, sinon ce sera toujours une chaîne car localStorage ne fonctionne à nouveau qu'avec des chaînes. Ici, tout ce que nous renverrons de l'initialiseur sera défini comme état initial final. Tout ce que nous spécifions ici est l'argument de l' initialiseur , puis l'initialiseur décide quel sera le InitialState final. Si nous n'avions pas cet initialiseur, nous pouvons simplement transmettre InitialState et cela fonctionnera. Mais si nous avons travaillé avec l' initialiseur et que nous travaillons avec l'initialiseur parce que nous avons travaillé avec localStorage, nous ajoutons toute cette logique par-dessus. Ici, nous allons demander si la valeur persistante est vraie, dans ce cas, veuillez appliquer la méthode JSON.parse. Qu'est-ce que JSON.parse ? Nous avons un tableau d'éléments, disons, 1, 2. Nous le convertissons en chaîne en utilisant la méthode appelée JSON.stringify. Maintenant, notre tableau s'est transformé en chaîne et lorsque nous le récupérerons à partir de localStorage, cette valeur persistante sera cette chaîne. Nous devons maintenant reconvertir cette chaîne en objet, en tableau. Nous pouvons utiliser JSON.parse au lieu de JSON.stringify pour désérialiser notre valeur à partir de localStorage et nous pouvons constater que nous avons une valeur inattendue et non blanche. Comme il s'agit déjà d'un objet, il doit s'agir d'une chaîne Supposons que nous transmettions une chaîne qui est ce tableau et que nous ayons toujours ce problème ; ce n'est pas un JSON valide. Qu'est-ce qui se passe ? Il veut probablement que je l'utilise. Voyons voir. Maintenant, je passe la chaîne valide et vous pouvez voir qu'elle a analysé la chaîne dans le tableau. Maintenant, cette structure de données a le type de tableau et pas seulement une chaîne. J'espère que c'est logique. Ici, nous analysons PersistedValue, sinon si PersistedValue est nulle, si la valeur n'existe pas, veuillez utiliser la valeur initiale, qui sera le InitialState. Nous en avons enfin terminé avec la logique permettant d'initialiser l'état lorsque la page est actualisée ou lorsque nous revenons à la page. Cool. Maintenant, nous devons également synchroniser les mises à jour d'état dans le hook UsePersistedReducer sur lequel nous avons travaillé. Nous pouvons utiliser UserEffect parce que vous vous en souvenez, UserEffect nous permet de nous connecter au cycle de vie des composants et exécuter la logique lorsque quelque chose change. Je vais importer UserEffect, et à partir de là, j'appellerai UserEffect et je vais transmettre le tableau de dépendances dans lequel je vais spécifier. Si notre état change ainsi que si notre clé, LocalStorageKey , change, dans ce cas, veuillez exécuter ce rappel. Encore une fois, si les états changent ou si LocalStorageKey change, nous appelons cette fonction. Cette fonction synchronisera l'état avec localStorage, nous allons donc en informer LocalStorage.set. La clé de l'élément sera LocalStorageKey et la valeur sera state. Cependant, nous devons le transformer en chaîne avant de pouvoir écrire dans LocalStorage. Nous allons appeler JSON.stringify state. À la fin de ce hook, nous voulons qu' il renvoie un tableau contenant exactement deux éléments afin que notre hook UsePersisted Reducer ressemble au hook useReducer d'origine. Nous allons le dire [inaudible]. Énoncez et retournez ces paquets et c'est tout. Ce sera notre dernier crochet. Il s'agit essentiellement d'une logique supplémentaire en plus de useReducer intégré qui synchronise l'état avec localStorage. Comme je vous l'ai dit, c' est un peu avancé, mais si vous y jetez un œil, ce n'est en fait rien de compliqué ici. Maintenant, au lieu d'utiliser UseReducer, dans ShowGrid, nous allons appeler UsePersistedReducer et comme clé comme troisième argument, nous allons dire StarredShows. Essayons maintenant de voir. Si nous revenons à l'application, ouvrons le stockage local de l'application. Mettons-le de côté pour le moment, cherchons des émissions. Vous pouvez voir que dès que le composant est monté sur la page, ce hook UsePersistedReducer s'exécute, l'état est initialisé puisque notre état change et que UseEffect s'exécute au moins une fois. Il a déjà commencé à synchroniser l'état avec localStorage ici. Sous les touches de démarrage, nous plaçons notre tableau vide, notre InitialState. Si j'essaie de démarrer quelque chose de boum, afficher c'est modifier ici. Il est synchronisé. Si je clique sur « Star me » pour autre chose, cela a toujours été synchronisé avec localStorage, ce qui signifie que cela a fonctionné. Génial. Pour l'instant, je pense que ce sera une bonne chose parce que bon, je pense que c'est suffisant pour le moment. Dans la vidéo suivante, nous allons expliquer comment procéder avec cette logique, afin de pouvoir d'une manière ou d'une autre indiquer si cette émission est en vedette ou non. D'une manière ou d'une autre, dites visuellement à l'utilisateur que cette émission a déjà commencé , puis nous allons probablement récupérer toutes ces données dans la page mise en favoris. Pour l'instant, validons ce que nous avons déjà, afin de ne pas perdre les modifications. Ici, je vais dire que ajouté une logique initiale aux émissions vedettes avec useReducer. Créé avec UsePersistedReducer pour synchroniser l'état avec LocalStorage. Dans la vidéo suivante, nous allons poursuivre avec cela. On se voit là-bas. 80. 24 salons étoilés p2: Salut. Dans la dernière vidéo, nous avons commencé à travailler sur les fonctionnalités mises en favoris. Nous avons créé un hook personnalisé utilisant un réducteur persistant, qui a synchronisé notre état StarredShows avec le stockage local afin que chaque fois que nous l' actualisons, nous puissions réinitialiser l'état à partir du stockage local. Je ne l'ai pas montré dans la vidéo précédente, mais si nous essayons d'annuler journal StarredShows, si je rafraîchis la page, laissez-moi revenir à la page d'accueil. Si j'actualise la page et que le composant est monté, notre état initial est extrait du stockage local, quel que soit ce que nous avons ici. Si nous le nettoyons, si nous supprimons tout du stockage local, actualisons la page et recherchons des émissions, notre état par défaut est un tableau vide. Cool. Nous devons maintenant réfléchir à la manière dont nous pouvons réellement, disons, réutiliser ce crochet sur plusieurs pages, sur la page d'accueil et au début. Mais d'abord, nous allons dire à l'utilisateur si cette émission est lancée ou non. Nous allons revenir à ShowGrid ici et à la ShowCard, nous pouvons passer un autre accessoire appelé IsStarred. C'est IsStarred qui sera assez simple, nous allons juste demander si StarredShows. Indiquez que nous avons inclus ces données, affichez l'identifiant. Ce IsStarred sera donc un booléen qui indiquera si cette émission est déjà présente dans le tableau StarredShows. Ensuite, dans ShowCard, nous allons simplement utiliser IsStarred comme accessoire. Pour l'instant, nous allons juste vous demander si cette émission est déjà en vedette, veuillez l'afficher sur Star me please, ou simplement Unstar me ou Star me. Essayons de voir. Chaque fois que je clique ici, cela se transforme en Unstar me. Si nous cliquons sur « Bonjour demain » , c'est toujours Unstar me. Maintenant, si je rafraîchis la page, je cherche à nouveau bonjour. Si je fais défiler la page, vous pouvez voir que les valeurs sont persistantes. Même si je ferme mon navigateur, ferme cet onglet et que je reviens à cette page pour accéder aux émissions spécifiques, elles afficheront toujours Unstar me car nous avons nouveau synchronisé l' état avec le stockage local. Cool. Passons maintenant à l'extraction logique que nous avons écrite ici à partir de ShowGrid dans un fichier séparé, afin que nous puissions réutiliser la même logique plus tard dans la page de démarrage. Allons-y. Probablement dans la source ou peut-être créons-nous un nouveau dossier appelé library, lib en abrégé. Ici, nous allons créer un fichier appelé UseStarredShows. Dans ce fichier, je vais mettre toute cette logique liée aux hooks que nous avons écrits précédemment. Ce sera UsePersistedReducer, ce sera StarredShowsReducer, ce sera cet appel UsePersistedReducer et l'importation de UseReducer et UseEffect. Donc, si nous voulions, disons, utiliser exactement le même crochet dans un autre composant, disons dans les pages marquées d'un astérisque, nous le copierions simplement comme ça. Nous devons appeler UsePersistedReducer à nouveau, nous devons transmettre à nouveau StarredShowsReducer, spécifier la même clé, mais nous pouvons aller plus loin, nous pouvons créer un autre hook personnalisé en plus de cela, et disons y cacher la logique. Dans UseStarredShows, nous allons créer un nouveau hook appelé UseStarredShows et ce hook nous appellerons UsePersistedReducer . Au lieu de nous contenter de valeurs de destruction ici, nous allons renvoyer valeur que UsePersistedReducer renvoie ici. Ici, nous n' allons probablement rien transmettre parce que nous voulons, disons, dissimuler la logique qui se cache derrière ce hook. Ainsi, dans notre composant, nous pouvons simplement appeler UseStarredShows et l'enregistrer, puis l'exporter depuis UseStarredShows, puis l'importer depuis la bibliothèque, UseStarredShows et le hook sera UseStarredShows. Nous l'appelons et nous obtenons simplement StarredShows et DispatchStarred. Vous pouvez voir maintenant qu'il a l'air beaucoup, beaucoup plus propre qu'avant. Maintenant, il est également réutilisable, ce qui signifie qu'à l'intérieur du composant étoilé , nous pouvons faire exactement la même chose, nous pouvons simplement appeler UseStarredShows et supprimer les mêmes données. Allons-y. Dans StarredShows, je vais importer UseStarredShows et ici, nous n'aurons probablement pas besoin de DispatchStarred, nous n'aurons pas besoin de la fonction d' expédition, donc nous n'allons pas la déstructurer, nous allons récupérer uniquement le premier élément, les StarredShows. Maintenant, nous pouvons écrire la logique pour créditer les données, nous allons le faire dans la vidéo suivante. Pour l'instant, nous allons probablement accéder à la page mise en favoris, StarredShows.length, qui affichera le nombre d'émissions que nous avons mises en vedette jusqu'à présent. Essayons de voir si cela a fonctionné. Si nous accédons à la page d'accueil, nous pouvons voir que deux émissions sont en vedette C'est ce que nous voyons dans notre état qui est conservé dans le stockage local. Si nous essayons de nettoyer le stockage local, et si nous actualisons la page , les favoris seront nuls car nous avons tout supprimé, l'état a été réinitialisé, quelque chose comme ça. Pour l'instant, reprenons tout ce que nous avons fait ici. Nous avons extrait la logique du hook dans un fichier séparé dans lequel nous avons créé un autre hook personnalisé en plus de notre UsePersistedReducer pour StarredShows en particulier et l'avons appelé UseStarredShows. Ensuite, nous utilisons ce crochet personnalisé intégré au composant étoilé pour afficher, pour l' au composant étoilé pour afficher, pour instant, le nombre total d'émissions que nous avons ajoutées. Nous utilisons ce crochet dans ShowGrid, UseStarredShows ainsi que pour l'utilisateur averti visuellement en affichant les textes Star me ou Unstar me en fonction de l'identifiant de l'émission, ce soit dans le tableau d'états ou non. En fait, cela semblait beaucoup. Mais ce n'était pas tant que ça, n'est-ce pas ? J'ajoute donc tout à la scène et je dis que j'ai créé UseStarredShows, hook personnalisé a placé toute la logique du hook ou, disons placé la logique du hook UseStarredShows dans un fichier séparé. Dites à l'utilisateur si l' émission est démarrée ou non. Dites à l'utilisateur si l'émission est démarrée ou non. C'est ça. Passons à GitHub et à bientôt. Dans la vidéo suivante, nous allons récupérer toutes ces émissions auxquelles nous avons accès dans le composant de démarrage. Maintenant, nous allons les récupérer depuis l' API TV Makes et les afficher enfin. À bientôt. 81. 25 salons étoilés p3: Salut. Dans cette vidéo, nous allons enfin terminer la page de l'émission en vedette. Dans la vidéo précédente, nous avons créé un hook personnalisé appelé User Started Shows, qui est un crochet au-dessus du réducteur persistant d' utilisation, qui est également un crochet personnalisé au-dessus du réducteur d'utilisation mais doté d'une logique supplémentaire qui synchronise l'état avec le stockage local. Dans cette vidéo, nous prenons les émissions favorites que nous avons dans le composant favori, puis les récupérons depuis l'API TVMaze. Tout d'abord, nous avons un ensemble d'identifiants d'affichage. Si nous examinons documentation de TVMaze, nous n'avons aucun point de terminaison. Essaie de le chercher où nous pouvons plusieurs émissions à la fois. Donc, dans notre cas, nous allons envoyer plusieurs requêtes à l'API. Passons au composant favori. Ici, par défaut, nous utiliserions use effect pour récupérer des données de l'API uniquement lorsque le composant est monté, mais maintenant que nous utilisons une bibliothèque de récupération de données, requête, nous pouvons l'utiliser pour récupérer des données. Permettez-moi de copier cela depuis le composant d'accueil, je vais ici, dans les étoiles, j'importe une requête à partir de la bibliothèque de requêtes React. Maintenant, notre clé de requête va être mise en étoile et nous allons transmettre le tableau d' émissions étoilées que nous avons comme clé de requête. Ensuite, dans la fonction de requête, nous devons obtenir toutes nos émissions. Comment pouvons-nous le faire ? La première approche, naïve, est que nous pouvons utiliser la simple boucle for, puis parcourir en boucle chaque émission que nous avons dans le tableau des émissions étoilées, nous prenons chaque identifiant d'émission, puis nous envoyons la demande. Cependant, vous pouvez constater que toutes ces demandes que nous pouvons envoyer, supposons que nous ayons deux pièces d'identité à l'intérieur de l'État et que nous allons envoyer deux demandes. Lorsque nous pouvons parcourir chaque élément en boucle il enverra la première demande, puis ce n'est que lorsqu'elle sera terminée qu'il enverra la deuxième demande. Ce n'est pas efficace car les demandes que nous allons envoyer pour des émissions ne dépendent pas les unes des autres. Nous voulons que cela se produise le plus rapidement possible. C'est pourquoi nous devons envoyer plusieurs demandes en même temps. Pour obtenir ce comportement, nous allons utiliser promise.all. Laissez-moi vous montrer ce que je veux dire. Dans la fonction de requête, nous allons écrire la logique suivante. Avant de le faire, désactivons et nous allons continuer à récupérer les données sur Window Focus. Ici, la logique sera la suivante. Que ce soit juste une fonction et une fonction de synchronisation. Ici, nous allons d'abord cartographier notre, où se trouve-t-il ? API TVMaze. Cette fonction Get Show by ID. Nous allons mapper cette fonction qui renvoie une promesse dans un tableau. Cela semble déjà compliqué, mais laissez-moi vous montrer ce que je veux dire. Ce que nous allons faire ici. Nous dirons, disons, des promesses de requêtes d'API. Nous allons créer starredshows.map. Nous allons associer show ID à API pour obtenir show by ID comme ça. Nous allons spécifier l'identifiant d'affichage ici. Avec cette approche, nous allons nous retrouver avec une série de promesses. Parce que nous mappons chaque identifiant d'émission pour obtenir un identifiant par identifiant, ce qui renvoie une promesse. Finalement, nous nous retrouvons avec une panoplie de promesses. Pour gérer un ensemble de promesses et s'assurer que ces demandes seront traitées, disons en parallèle en même temps, nous pouvons utiliser la méthode promise.all. Nous allons raconter Await Promise.all. Nous pouvons en fait, vous savez quoi, déplacer toute cette logique d'ici vers une fonction réutilisable dans TVMaze.gs. nous allons simplement vous dire comment obtenir des émissions par Cette fois, nous allons simplement vous dire comment obtenir des émissions par identifiant et nous recevrons des émissions ici. Au lieu de simplement utiliser API Get Here, nous allons transformer cette fonction en fonction synchronisation et nous allons placer la logique que nous avons écrite ici dans get show by IDs. Nous allons associer chaque identifiant d' émission à une promesse, puis à l'intérieur de promise.all, et nous voyons déjà que la promesse n'est pas définie et provient d' ES lint en fait. Eh bien, c'est intéressant. Je suppose que c'est parce que dans ES lint RC, nous devons indiquer à ES lint que nous utilisons la dernière syntaxe JavaScript , la plus moderne, donc nous allons dire qu' ES6 sera vraie. ES6 signifie ECMAScript version 6 et supérieure. Maintenant, je pense que nous n'avons aucune erreur, c'est vrai. Pour promettre .all, nous allons transmettre promesses de requêtes d' API ou appelons-les simplement promesses pour simplifier les choses. Ce que fait promise.all, c'est résoudre un ensemble de promesses en parallèle, et elles sont toutes résolues en même temps et traitées en parallèle. Sous le capot, cela ressemble à la promesse 1, promesse 2, à la promesse 3. Encore une fois, une série de promesses. Promise.all les résout tous en même temps. Promettez ensuite les résultats de .all à un tableau de valeurs résolues. Si nous avons un éventail de promesses, disons que la promesse 1, promesse 2, la promesse .all les résout toutes en même temps. Promise.all renvoie un tableau de valeurs résolues. Si la promesse 1 se résout en, disons, la valeur 1, nous recevrons un tableau avec, disons, la valeur résolue 1. Ils ont promis de passer à autre chose, nous recevrons la valeur 2 de résolution et de résolution. Si la promesse n' aboutit à rien, peut-être nulle, valeur indéfinie serait indéfinie ou nulle. Mais l'ordre est conservé. Quel que soit l'ordre présent ici dans le même ordre, les promesses sont résolues lors de l'utilisation de promise.all. Un point ici, Promise.all renvoie également une promesse, nous devons donc y échapper. C'est important. Maintenant, nous pouvons l'appeler comme résultat. Ici, nous faisons des promesses et nous donnons des résultats. Parce que dans notre cas, chaque promesse se résoudra à afficher des données, nous finirons par recevoir une série de promesses résolues, ce qui signifie que nous allons recevoir une gamme d'émissions. Nous allons l'enregistrer sur la console juste pour voir avec quoi nous travaillons exactement. Dans start J6, nous allons appeler cela get show by IDs. Peut-être, tu sais quoi ? Dans get show by ID, nous intégrons des données. Mais dans la page de démarrage, nous n'en avons pas besoin. Au lieu d'appeler get show by ID, nous allons simplement appeler ApiGet sans la partie intégrée. Quelque chose comme ça. Maintenant, dans la page des favoris, nous allons spécifier, veuillez appeler Get Shows by IDs. Fonction de requête intérieure et émission étoilée de passe intérieure , que nous avons. Nous aurons maintenant une erreur marquée et une erreur marquée d'une étoile. Ne vous confondez pas avec la dénomination. Disons probablement que c'est une émission étoilée, un identifiant d'émissions étoilées. Ici, seuls StarredShows et StarredShows seront protégés contre les erreurs. Nous allons maintenant appliquer rendu conditionnel simple ici, comme nous le faisions précédemment dans show page avec if and if you turn. Nous allons vous demander si StarredShows est vraiment vrai. Dans ce cas, veuillez renvoyer ShowGrid car nous utilisons show grid pour afficher toutes les émissions que nous avons utiliserons donc ShowGrid mais nous devons d'abord l'importer. Importez ShowGrid. Il se complète déjà automatiquement pour moi à partir des composants, montre ShowGrid. Si nous avons commencé des émissions, nous allons renvoyer ShowGrid et ShowGrid s'attend à ce que nous passions des émissions ici. Essayons de le faire, les émissions sont égales à celles choisies par StarredShows et, par défaut, le week-end et l'affichage du bonjour. Essayons d'abord de voir ce que nous avons. Notre application ne fonctionne pas parce que nous n'avons pas démarré le serveur div Maintenant que nous avons nos émissions essayons d'ajouter quelque chose, mets-moi en vedette. Maintenant, nous allons à la page de démarrage et boum, nous avons un écran vide et si nous regardons dans la console, nous voyons que les propriétés d'un identifiant de lecture indéfini ne peuvent pas être lues. Que se passe-t-il si nous regardons dans ShowGrid ? C'est où ? Nous recevons des shows, qui sont censés être un tableau et à l'intérieur de ce tableau, chaque élément possède la clé .show property.show mais il examinera notre résultat et c'est ce dans quoi nous nous connectons en console et qui est affiché par identifiant ici. Vous pouvez voir que nous avons un tableau d' éléments et que chaque élément du tableau n'a pas le. Afficher la propriété. Nous devons y remédier d'une manière ou d'une autre. Nous devons ajuster cette forme de données à la forme de données qui devrait être utilisée à l'intérieur du composant. La question est de savoir où exactement nous devons le faire. C'est une bonne question. Eh bien, si nous voulons rendre cette fonction, disons, aussi réutilisable que possible dans notre cas, dans notre application, ce n'est pas vrai, mais c'est quand même une bonne pratique qui consiste à apporter les modifications nécessaires uniquement là où elles sont nécessaires et si nous voulons la rendre réutilisable, nous ne voulons pas dire, modifier d'une manière ou d'une autre la forme des données ici. Nous allons faire cette logique dans la fonction de requête. Ici, dans GetShowsByIds, je n'ai plus besoin d'enregistrer le résultat sur la console ou, en fait, gardons-le pour le moment, et plus tard, nous nous en débarrasserons. Mais dans la fonction de requête ici, nous allons faire ce qui suit. Lorsque la promesse sera résolue avec GetShowsByIds, nous allons maintenant utiliser la syntaxe point nous allons maintenant utiliser la syntaxe point, car elle conviendra mieux Voyons la syntaxe que nous avons ici. Au lieu d'utiliser l'attente asynchrone, nous pouvons supprimer l'async d'ici Ainsi, lorsque cette requête GetShowsByIds se terminera lorsque la promesse sera résolue avec ce résultat, nous allons cartographier chaque élément du tableau et imbriquer toutes les données que nous avons ici sous la clé show , sous la propriété show, afin de faire correspondre la structure qui est censée être utilisé par le ShowGrid car nous avons besoin d'un tableau d'éléments dans lequel chaque élément contient la propriété show. Ce que nous allons faire, nous allons en dire le résultat. sur la carte, nous obtiendrons les données d'affichage ici et à partir de ce rappel, qui renverra ShowData pour simplifier les choses. Au lieu d'utiliser une syntaxe plus longue avec return, nous allons indiquer return showData entre crochets. Maintenant, si nous essayons d'annuler le journal StarredShows ici, nous avons toujours ce problème. Laisse-moi voir. Nous avons ShowData. Cela est dû au fait que nous avons mappé, vous pouvez voir chaque élément du tableau comme ayant la clé ShowData, mais nous nous attendons à ce qu'elle soit simplement affichée. Ici, au lieu d'afficher les données, nous pouvons utiliser show and show. Maintenant, essayons de nous rafraîchir et boum, tout fonctionne comme par magie maintenant. Si nous examinons les résultats, nous avons ces données que nous recevons des GetShowsByIds , puis nous les avons mappées. En fait, nous imbriquons ces données sous la clé show à l'intérieur de chaque élément du tableau, quelque chose comme ça. Maintenant, nous pouvons enfin supprimer ce résultat d'ici et simplement renvoyer promise.allpromises. Ici, nous n'avons rien à changer, c' est notre logique. Nous devons maintenant gérer le cas où nous n'avons aucune émission vedette. Disons que je nettoie le stockage local, je rafraîchis la page, que rien ne s'affiche, mais idéalement, nous voulons dire à l'utilisateur que nous n'avons pas de StarredShows. Nous écrivons déjà cette condition if, qui fonctionnera à la fois si nous avons des émissions et si nous n'en avons pas, car un tableau vide est également une valeur vraie. Nous pouvons donc simplement savoir si StarredShows.length est supérieur à zéro si nous avons au moins une émission et nous utilisons le chaînage facultatif ici car notre état initial ne sera pas défini par use query. Eh bien, la demande ne se produit pas immédiatement, donc ce StarredShows peut être indéfini et ne générer aucune erreur. Par exemple, laissez-moi le supprimer, je l'actualise, je vais sur la console et je vois qu' il est impossible de lire les propriétés de undefined, car au départ, cet état est à nouveau indéfini, la demande ne se produit pas immédiatement. Nous pouvons soit utiliser un chaînage facultatif ici, soit demander si StarredShows est vrai. En utilisant l'opérateur add, ce StarredShows, sera alors ce StarredShows, défini, nous pouvons taper StarredShows.length en toute sécurité , mais pour simplifier cela, nous utilisons un chaînage facultatif. Si la longueur de StarredShows est supérieure à zéro, nous affichons ShowGrid, puis nous ajoutons une autre condition haut. Si la longueur de StarredShows est égale à zéro. Dans ce cas, nous affichons div, quelque chose comme si aucune émission n'avait été mise en étoile. Ensuite, nous allons ajouter une autre condition au cas où nous aurions une erreur. Si nous avons lancé Shows Adder, nous allons dire qu'une erreur s'est produite et nous allons dire StarredShowsError.message. Par défaut, si aucune de ces conditions n'est respectée dans ce cas, cela signifie que les émissions sont immobiles ou que seules les émissions sont en cours de chargement. C'est notre marché final, pour l'instant, essayons de voir. Si je rafraîchis rapidement, vous pouvez voir un clignotement rapide car, au départ, cet état n'est pas défini, cela signifie que juste pour une courte période, ces conditions ne correspondront pas et nous verrons des émissions se charger si la demande prend plus de temps que prévu, nous verrons des émissions se charger puis aucune émission n'a été mise en favori. Si nous rentrons chez nous, nous cherchons des émissions, nous avons joué certaines émissions ici, puis nous cherchons autre chose, comme, hé mec, hé, nous revenons aux vous pouvez voir maintenant que nous avons ces émissions ici. Même si nous actualisons la page, les émissions sont toujours là. Plutôt cool. Nous avons maintenant le cycle complet de cette fonctionnalité mise en vedette. Félicitations. Pour l'instant, ça y est, nous allons ajouter toutes les modifications à la scène. Nous avons d'abord indiqué à ES link que nous utilisions du JavaScript moderne afin qu'il ne nous donne aucune erreur lorsque nous écrivons un constructeur de promesses comme celui-ci. Nous avons ajouté une autre fonction ici pour récupérer toutes les émissions, en connaissant les identifiants des émissions. Nous utilisons la méthode promise.all pour traiter toutes les demandes même temps, car ces demandes ne dépendent pas les unes des autres, elles doivent être traitées en parallèle, puis résolues en une seule fois C'est exactement ce que fait promise.all. Ensuite, dans le composant étoilé, nous avons utilisé le crochet de requête use pour récupérer des données. Nous savons déjà à quoi il et pourquoi nous l'utilisons, puis nous appliquons un rendu conditionnel pour afficher les données. C'est ça. Super. Validons tout et disons que les données et les affichages ont été récupérés et marqués d'un astérisque. ShowGrid pour eux. Cool. Je mets tout sur GitHub et sur cette bonne note, je vous verrai dans le prochain. 82. 26 Cession: Bonjour encore une fois, j'ai une autre petite mission à vous rappeler que pour implémenter Start, vous devez conserver les données dans le navigateur. Lorsque nous actualisons la page, notre état est toujours là. Nous avons utilisé un stockage local, un stockage dans le navigateur qui peut conserver les données. Ne serait-il pas bien si nous pouvions également conserver tout ce que nous tapons dans le champ de recherche, dans le composant d'accueil. Donc, si je rafraîchis la page, tout ce qui se trouve dans la zone de texte est toujours là. L'idée ici est à peu près la même. Donc, si pour démarrer, nous avons créé notre propre hook qui synchronise l'état appelé fusible persisted reducer. Nous pouvons créer un cercle très similaire, appelé état persistant de Hughes, au-dessus de l'État américain cette fois, puis utiliser cet état pour implémenter cette date dans le champ de recherche. C'est la mission qu'il vous faut. Allez-y et essayez ça. Et cette fois, au lieu du stockage local, vous pouvez peut-être utiliser le stockage de session. La différence entre le stockage local et le stockage session réside dans le fait que le stockage local conserve les données Même si vous fermez l'onglet et fermez le navigateur, le stockage de session ne données que jusqu'à ce que vous fermiez le robinet, fermiez l'onglet, puis que vous reveniez à la page. Encore une fois, le stockage des sessions sera vide, ce qui pourrait être mieux adapté à la zone de texte, pourrait être mieux adapté car ce n'est pas quelque chose que nous aimerions enregistrer lorsque nous fermons l'onglet ou que nous fermons le navigateur. L'API n'est donc pas la même, ce qui signifie qu'au lieu du stockage local, vous allez écrire le stockage de session et le reste reste le même, obtenir un élément et un élément de site. Alors allez-y et essayez de créer cet état d'utilisation persistant , puis de l'implémenter pour conserver l'état du champ de recherche. Bonne chance avec celui-ci. On se voit dans le prochain. 83. 27 Implémentation d'utilisation de crochets personnalisés: Rebonjour, comment s'est passée votre mission ? Avez-vous réussi à obtenir ce que nous voulions ? Avez-vous réussi à conserver des données dans le stockage de session ? Voyons voir. Si nous revenons au formulaire de recherche, nous avons ici cet appel d'état pour avoir l'état de la chaîne de recherche. Maintenant, si nous voulons le conserver dans le stockage local ou le stockage de session, nous devons écrire une logique supplémentaire. Nous pouvons extraire toute cette logique quelque part dans un autre fichier, puis ici, dans le formulaire de recherche, nous allions simplement appeler use persisted ou peut-être utiliser search string, ce qui nous renvoie à nouveau un tableau de deux éléments, chaîne et une chaîne de recherche afin de ne pas modifier l'API du hook use state. Ce sera à peu près pareil. Allons-y et mettons en œuvre tout cela. Dans le dossier de bibliothèque que j'ai ici où se trouve use start chose, je vais créer un nouveau fichier appelé use search, STR, search string. Ici, je vais exporter const, utiliser la chaîne de recherche. Notre hook ne prendra aucun argument, nous allons tout gérer à l'intérieur, donc l'état initial sera défini par le hook qu'il contient. Nous ne voulons pas nous en soucier chaque fois que nous utilisons ce crochet. Alors je le garde pour le moment. Ensuite, à partir de là, je vais importer depuis la bibliothèque en utilisant une chaîne de recherche. Le look final sera le suivant. peu près la même chose qu' auparavant, mais nous allons maintenant entrer dans le vif du sujet avec toute la logique. En cas d'utilisation, start affiche chaque semaine ce hook personnalisé appelé Use Persisted Reducer. Nous pouvons faire exactement la même chose avec l'état d' utilisation, mais au lieu du réducteur d'utilisation, nous allons utiliser l'état d'utilisation. Je vais le commenter à titre de référence. Utilisez à nouveau un factorable, nécessaire pour synchroniser cet état avec le stockage de session. J'aurai besoin de votre état et ici je vais créer un état persistant. Utiliser l'état persistant recevra l'état initial comme argument. Ici, je vais appeler use state et passer l'état initial ici. Mais contrairement à use reducer, use state peut recevoir soit l'état initial en tant qu'argument soit la fonction d'initialisation, qui ne s'exécutera qu'une seule fois pour initialiser l'état. En cas d'utilisation du réducteur, c'était le troisième argument, dans le cas de quelques états, c'est toujours le même argument, mais il suffit de passer le rappel ici. Ici, la logique sera peu près la même que celle que nous avons utilisée avec le stockage local. Tout d'abord, nous nous référons au stockage de session, à obtention de la clé de stockage locale de l'article. Nous devons obtenir cette clé de stockage local ici. Dans notre cas, il s'agira d'une clé de stockage de session. Nous allons le récupérer en utilisant des arguments d'état persistants. À côté de l'état initial, nous pouvons transmettre la clé de stockage de session. Là encore, nous avons une valeur persistante. Si la valeur existe, nous la désoralisons de la chaîne, sinon nous utilisons la valeur initiale que nous avons transmise, qui sera l'argument d'état initial. Génial. Nous recevons ici l'état et la fonction de mise à jour de l'état. Ensuite, exactement la même logique avec effet d'utilisation. À partir de là, nous allons simplement dire que chaque fois que l'état change ou chaque fois que la clé de stockage de session change, veuillez appeler élément de stockage de session point, clé de stockage de session JSON, stringify, state. Ensuite, à partir de l'étape persistante, toujours pour conserver exactement la même API que pour use state hook, nous allons renvoyer un tableau de deux éléments où le premier élément est l'état et le second est la fonction de mise à jour de l' état. Maintenant, nous pouvons supprimer ces commentaires ici et utiliser la chaîne de recherche à l'intérieur. Nous pouvons appeler use persistent state, à l'intérieur duquel nous passons l'état initial, ce sera une chaîne vide et la clé de stockage de session sera une chaîne de recherche. Génial. Maintenant, quel que soit le résultat de cette utilisation, l'état persistant renvoie un tableau de deux éléments où le premier élément est l'état, le second est la fonction de mise à jour de l'état, exactement la même API que pour le hook use state. Au lieu d'écrire ceci, puis d'écrire l'état de retour et l'état défini, nous pouvons simplement renvoyer ce que renvoie la fonction d'état persistant d'utilisation. Revenez, utilisez l'état persistant. Maintenant, ça y est. Nous pouvons maintenant utiliser ce crochet que nous avons créé dans le formulaire de recherche et cela fonctionnera comme par magie. Essayons de voir. Si j'actualise la page, vous pouvez voir que dans le stockage de session, j'ai une chaîne de recherche clé, tout ce que nous spécifions ici comme clé de stockage de session. L'état est donc initialisé avec la valeur que nous transmettons ici par défaut, une chaîne vide. Maintenant, quoi que nous saisissions dans le champ de recherche, il sera dévié en tant que valeur dans la clé de stockage de session sous chaîne de recherche, car nous utilisons un effet pour synchroniser l'état. Si je rafraîchis, vous pouvez voir que tout ce que nous avons dans le stockage de session est maintenant affiché en tant qu'état initial dans la zone de texte si je l'actualise. C'est très pratique, par exemple, si je rafraîchis accidentellement la page, j'espère que cela aura du sens. n'est pas trop complexe comme vous pouvez le constater, et j'espère sincèrement que vous avez mis en œuvre à peu près la même logique. Pour l'instant, nous allons tout valider et dire qu'il s'agit de l'utilisation d'un crochet de chaîne de recherche, message de validation sera conservé au troisième formulaire, valeur de la zone de texte dans le stockage de session. Toute la logique utilisée, recherche, chaîne, crochet. Je mets tout sur GitHub. On se voit dans le prochain. 84. 28 Introduction aux composants coiffés: Bonjour. Dans la dernière vidéo, je dirais que nous avons terminé toute notre logique dans l'application. Le moment est venu pour nous de parler de styles. Comment allons-nous styliser l'application ? Dans cette vidéo, nous allons parler de l'approche que nous allons adopter et voici un spoiler pour vous l'approche portera sur les composants stylisés. Dans cette vidéo, nous allons voir comment fonctionnent les composants stylisés. Pourquoi les choisissons-nous exactement ? À la fin, nous comparerons les composants stylisés à la manière traditionnelle de vendre des applications avec des styles CSS classiques. Allons-y. Qu'est-ce que les composants stylisés ? s'agit simplement d'une bibliothèque pour styliser ou réagir des applications avec une approche appelée CSS-IN-JS. CSS en JavaScript est une approche qui nous permet d' écrire du balisage CSS à l'aide de JavaScript. ce moment, je suis sur le site officiel des composants de style, de la documentation officielle. Ce que nous allons faire maintenant dans cette vidéo, passer en revue les bases pour comprendre comment exactement nous pourrons utiliser cette bibliothèque. Si je fais défiler la page un peu vers le bas, je vais suivre le processus d'installation simple. Je vais revenir à ma candidature. Je vais ouvrir une nouvelle instance de terminal ici et exécuter les composants de style npm install. Une fois qu'elle sera installée, je fermerai simplement l'instance. Je l'ai fait uniquement pour ne pas arrêter l'application elle-même. Nous avons maintenant des composants stylisés qui sont apparus dans le package Jason. Dépendances : dans la documentation, nous pouvons voir votre premier composant stylisé. Nous devons importer des styles à partir de composants stylisés , puis utiliser quelque chose comme ça. Passons au composant d'accueil et nous pouvons postuler avec des composants stylisés ici sur la page d'accueil. En haut, je vais importer des styles à partir de composants stylisés. Ensuite, je vais faire styled.button et à la fin je laisserai des coches inverses vides. Maintenant, c'est quoi ça ? En appelant style, élément style.HTML que vous avez dans cette très longue liste, vous pouvez créer, disons, l'élément sous-jacent que vous souhaitez styliser, par exemple un bouton stylisé. À partir de cet élément, les composants stylisés créeront un composant et ce composant aura des styles. Si nous revenons à la documentation et que nous faisons défiler la page un peu vers le bas, nous trouverons ici cet exemple de base, style.button, puis balisage CSS Comme vous pouvez le voir, balisage CSS est écrit à l'intérieur de coches arrières. D'ailleurs, le point fort de la syntaxe que vous pouvez voir ici provient de l'extension VS Code, appelée composants de style VS Code. Si vous souhaitez que votre syntaxe soit surlignée et complétée automatiquement, installez cette extension. Nous pouvons écrire du CSS ici à l'aide de backticks. composant stylisé utilisera un élément de bouton et il se contentera essentiellement de prendre cet élément de bouton HTML natif et d' appliquer les styles que nous écrivons ici par-dessus et, à la fin, il produira le composant de bouton que nous pouvons utiliser dans notre balisage. Allons-y et essayons. Dans le balisage, je vais utiliser ce composant de style de bouton qui a été créé et dire bonjour ici. Je l'enregistre. Je retourne à mon application et qu'est-ce que nous avons ici ? Si nous examinons le balisage interne, nous avons ici ce joli bouton stylisé avec ce nom de classe unique. Tous les styles ont été fusionnés et analysons ce que nous avons ici. Tout d'abord, ce composant de bouton affiche élément de bouton HTML exactement comme nous l'avons spécifié ici comme élément de base auquel appliquer les styles, ce qui signifie que ce composant de bouton affiche essentiellement un élément de bouton HTML natif, qui signifie que tous les accessoires de ce style.something possède peuvent être transmis directement à ce composant. Si l'élément du bouton possède un attribut appelé type, nous pouvons transmettre le type ici. Si je l'enregistre, vous verrez qu'il sera reflété. J'ai maintenant un bouton de saisie, exactement de la même manière que vous ferez avec n'importe quel attribut HTML normal, disons natif sur l'élément bouton si vous voulez qu'il transmette quelque chose comme un clic, ou si vous vouliez transmettre quelque chose comme des attributs de données , un attribut personnalisé, vous le feriez, alors cela fonctionnera. Cool. Maintenant, nous avons ce nom de classe unique ici. Qu'est-ce que c'est et pourquoi cela semble si étrange ? Le fait est que ces vignettes que vous écrivez ici spécifiquement pour élément sont limitées à cet élément uniquement, qui signifie que ces styles sont uniques. Ce nom de classe est unique et il a été généré automatiquement par des composants stylisés. composants stylisés garantissent l'unicité des classes que vous écrivez pour cet élément. Si je crée un autre composant stylisé, qui a exactement la même apparence, mais qui porte un nom différent, cela n'a pas d'importance. Cela peut être, disons, n'importe quoi, puis j'utilise ce composant à côté de ce bouton, qui a exactement les mêmes styles. Visuellement, ils se ressemblent. Mais si vous comparez leurs noms de classe, ils sont différents. Comme les composants stylisés l'ont fait, ils ont généré un nom de classe unique basé sur ces styles. Encore une fois, les composants stylisés créent des styles uniques à portée locale , spécifiquement pour l'élément. C'est logique ? Je pense que c'est le cas. Nous avons également ici un style dynamique à notre disposition. Si nous revenons à la documentation, si nous faisons défiler la page vers le bas, nous pouvons trouver un autre exemple, exemple étendu avec interpolation de chaînes ici. Copions cette interpolation de chaîne. Revenons à notre bouton, et ici, je vais simplement utiliser cette interpolation de chaînes. J'ai également besoin d'importer CSS nommé export à partir de composants stylisés. Maintenant, si nous revenons à l'application, rien ne sera changé. Mais à quoi sert exactement cette interpolation de chaînes ? Tout d'abord, nous pouvons utiliser l'interpolation de chaînes ici parce que nous écrivons du CSS ici dans des backticks. À l'intérieur des backticks, nous pouvons interpoler JavaScript en utilisant le $ et des crochets. Nous passons ici une fonction qui renvoie ce CSS, disons, un autre balisage CSS ici. Qu'est-ce qui se passe ? Ici, nous utilisons ce que l' on appelle l'argument des accessoires. Cet argument sera un objet qui possède la propriété de clé primaire, mais rien ne changera. Ces accessoires font ici référence aux accessoires que nous transmettons réellement au composant. Si je passe le paramètre primaire ici, ce sera un accessoire personnalisé pour ce composant de bouton, ce qui signifie qu'il sera disponible ici sous cet objet d'accessoires. Si je reviens à l'application, vous verrez maintenant que ces styles ont changé. Si je regarde le balisage, sont les styles qui ont été appliqués lorsque nous avons transmis l'accessoire principal. Ils remplacent nos styles de base. Pour être plus clair, nous allons créer un autre bouton appelé également bonjour, mais sans transmettre l'attribut principal, sans transmettre l'accessoire principal. Vous pouvez voir maintenant qu'ils sont différents. Ils ont ici la même classe de base, générée de manière unique, mais la deuxième classe est unique. De cette façon, nous sommes en mesure d'appliquer styles dynamiques à l'aide de composants stylisés. Vous pouvez pratiquement passer n'importe quel accessoire ici. Cela peut être n'importe quoi qui n'est pas primaire. Disons que cela peut être similaire la taille de police et que vous pouvez spécifier le nombre de pixels souhaités , par exemple 20. Ensuite, dans l' interpolation de chaînes , en utilisant cette fonction, vous pouvez renvoyer du CSS en fonction des accessoires que vous transmettez au composant. Par exemple, supposons que nous voulions spécifier la taille de police de manière dynamique pour chaque bouton, nous appellerions à nouveau une autre interpolation de chaîne à l'intérieur ce composant de style, et ici nous passerions simplement. En ce qui concerne la taille, si nous transmettons la taille de police, veuillez inclure du CSS, qui possède une propriété de taille de police avec contre pixels d' interpolation props.fontsize que nous transmettons. Nous interpolons essentiellement le JavaScript dans le balisage CSS. Maintenant, si nous revenons ici et que nous inspectons l'élément, nous avons une taille de police de 20 pixels. Je viens de remarquer que cet attribut de taille de police est également cet attribut de taille de police attaché à l'élément bouton. Cela n'est peut-être pas nécessaire et ce n'est peut-être pas du tout souhaité. Je pense que lorsque nous transmettons quelque chose de manière aléatoire aux composants de départ et que nous voulons le rendre disponible uniquement tant qu'argument dans le cadre de cet objet d'accessoires, nous voulons le préfixer avec le $ pour permettre aux composants stylisés de comprendre cela, s'il vous plaît, ne le laissez pas interpoler. Ne transmettez pas cette taille de police comme attribut réel de l'élément sous-jacent. Rendez-le disponible uniquement dans cette interpolation de chaîne lorsque nous appliquons des styles. Maintenant, nous ferions référence à la taille de police props ici, à la taille de police props avec le préfixe $ si je ne me trompe pas. Oui, pour le moment, vous pouvez voir que nous avons toujours les styles et que cela fonctionne toujours. De cette façon, nous pouvons appliquer des styles dynamiques. Si nous revenons à la documentation ici, nous pouvons trouver un autre exemple de composants stylisés. Nous créons un autre composant stylisé appelé conteneur. Allons-y et faisons-le au sommet. Je vais créer cette fois le style, le div, le composant à la fin que nous aurons sera un conteneur. Nous pouvons maintenant enrouler nos boutons dans le composant conteneur. Si nous inspectons, encore une fois, vous verrez un nom de classe unique qui identifie spécifiquement ce composant qui possède les styles correspondants. Je dirais que c'est une bonne introduction aux composants de style. Vous pouvez constater qu'il est très facile de styliser l'application en utilisant cette approche car tout ici est un composant. Disons qu'il peut être difficile de faire la différence entre les composants ordinaires et les composants installés, mais voici les inconvénients. Vous devez trouver le juste milieu où vous voulez avoir vos styles ou où vous voulez avoir vos composants habituels. Mais les composants de style sont une solution très populaire. Je dirais. En outre, il fournit également ce que l' on appelle un thème global ou une configuration globale. Si nous revenons à la documentation sur les composants stylisés, et si nous recherchons un thème dans le coin supérieur droit, nous pouvons trouver cette référence de fournisseur de thème, et la référence au fournisseur de thème est quelque chose que nous allons essayer dès maintenant. Importons le fournisseur de thèmes à partir de composants stylisés ici en haut. Ensuite, en suivant cet exemple, nous allons transmettre l'accessoire du thème au composant fournisseur de thèmes. Le thème que nous devons transmettre ici doit être un objet. Définissons-le quelque part en haut. Nous allons l'appeler thème. Ce ne sera qu'un objet et cet objet, quel que soit ce que vous spécifiez ici, sera disponible dans l' interpolation de chaînes à l'intérieur de chaque composant stylisé. Cela signifie que vous pouvez définir ici n'importe quelle configuration globale que vous souhaitez utiliser dans des composants stylisés. Cela peut être des couleurs, disons des tailles de police, cela peut être une famille de polices, au box office. Lorsque nous allons personnaliser l'application, nous allons utiliser des couleurs et une famille de polices. Par exemple, nous pouvons spécifier des couleurs ici. Disons que le plat principal sera juste rouge. Ensuite, nous transmettons l'objet du thème via le fournisseur de thème ici. Maintenant, dans l'interpolation, où que vous souhaitiez utiliser ce conflit de thème global que vous avez ici, il vous suffit d'écrire la couleur pour rouvrir l'interpolation. Nous transmettons une fonction qui doit renvoyer un balisage CSS sous forme de chaîne. Ce seront, disons, des accessoires. Props.theme et props.theme feront référence à cet objet ici. Props.Theme.Colors.Main. Maintenant, si nous revenons à l'application et voyons, la couleur sera rouge. Maintenant, au lieu d'écrire du rouge partout dans chaque composant stylisé, vous pouvez simplement vous référer à props.theme.colors.main. Ensuite, au lieu de changer cette couleur à tous les endroits, vous n'aurez qu'un seul endroit où cette couleur est définie. Par exemple, j'ai maintenant décidé de changer ma couleur principale du rouge au bleu. Je voudrais simplement taper du bleu ici et cela se reflétera dans tous les composants où il est fait référence à prompts.theme colors main. Nous allons adopter cette approche pour créer, disons, une configuration globale au box office. Il s'agissait maintenant d'une introduction aux composants stylisés. Comparons maintenant ce que cela nous donne exactement, quels sont exactement les inconvénients et quelle est la différence entre, disons, l'utilisation de composants cellulaires et une utilisation traditionnelle du CSS. Je vais ouvrir Paint. Sur la gauche, nous aurons quelque chose appelé CSS statique et dans le coin droit, nous aurons quelque chose appelé CSS d'exécution. composants stylisés font partie du CSS d'exécution, mais nous allons commencer par les composants statiques. Qu'est-ce que le CSS statique ? De manière traditionnelle, lorsque nous écrivons du CSS, nous les écrivons dans des fichiers CSS, puis les fichiers CSS sont importés dans l'application. Par exemple, si nous examinons GitHub, ils utilisent du CSS statique pour styliser leur site Web. Ce que je veux dire par là, c'est que si nous regardons dans leur balisage, dans le hashtag, ils chargent des fichiers CSS, et si nous ouvrons l'un de ces styles, l' un des CSS, nous en ouvrirons peut-être un autre. Il y en a un mondial. Il a ces noms de classe, comme Color Border Inverse, peut-être comme BG Gray. Ils importent des fichiers CSS statiques qui ont été définis lors de la construction, puis ils utilisent les noms de classe qui proviennent de ces fichiers CSS dans le balisage. Ouvrons Body Tag. Vous pouvez voir ici des noms de classe réguliers, compréhensibles et complets. Mais si nous examinons l'intérieur des composants stylisés, c'est légèrement différent. Noms de classe statiques, peu importe ce qui est défini au moment de la construction. Si nous voulions appliquer des noms de classe dynamiques ou si nous voulons appliquer des styles dynamiques avec des noms de classe CSS statiques, adoptez une approche avec du CSS statique. Supposons que nous ayons ici un bouton qui peut être principal, nous créerions, disons, avec une classe de boutons à points CSS normale, puis nous créerions une classe primaire à points, et puis lorsque nous allons styliser ce bouton, nous allons simplement changer les noms de classe. Par défaut, supposons qu'il s'agisse d'un élément de bouton que vous auriez ici, comme un point, disons une classe de bouton, puis lorsque vous cliquez sur quelque chose, ce bouton possède un nom de classe supplémentaire appelé primaire. De cette façon, vous pouvez utiliser des noms de classe statiques, des styles CSS statiques pour créer des noms de classe dynamiques spécifiquement pour les éléments. Avec des composants stylisés ou avec du CSS d'exécution, c'est différent. Le CSS est, disons, intégré à Defly. Ce que je veux dire par là. Si nous regardons dans notre application ici, aucun fichier CSS n'est connecté au hashtag. La question est de savoir d'où viennent exactement ces styles. Ils viennent de. Laisse-moi voir. Si on ouvre le chapeau. Nous avons ici la balise de style. Le truc, c'est le CSS d'exécution, c'est que les composants de style bibliothèque injectent des styles dynamiquement sur la page en utilisant la balise style. Si nous ouvrons des composants , du balisage, de la documentation officielle , ils les contiennent, laissez-moi voir, ils ont exactement la même balise de style ici où ces styles sont injectés. C'est vide, je ne sais pas pourquoi. Voyons voir celui-ci, c'est un amalgame mondial. Ce ne sont pas des styles dynamiques. Tous ces styles que vous voyez ici sont injectés dans la balise de style. C'est vide ici. Laissez-moi essayer avec la source de la page. Ici, il n'est pas vide. Tous ces styles sont injectés ici dans la technologie de style. Le fait est que ces fichiers sont injectés sur defly. Ils n'étaient pas définis au moment de la construction. qui signifie que lorsque j'ai accédé à cette page, la balise de style était d' abord vide. Mais quand je me rends sur cette page, composants stylisés, les parties, quel que soit le JavaScript, se trouvaient juste ici, dans des backticks. Ensuite, il faut un certain temps pour traiter cela, pour analyser tout ce que nous écrivons ici, puis cela crée ce balisage CSS et ensuite il injecte ce balisage CSS ici dans la balise de style. De cette façon, les styles sont injectés lors de l' exécution, lors des interactions avec l'utilisateur. Le problème avec cette approche est que lorsque vous passez d'une page à l'autre, elle n'injecte que les styles nécessaires pour afficher le contenu de cette page spécifique. Cela signifie qu'il charge les styles uniquement nécessaires au contenu actuel. Il n'injectera jamais de styles qui ne sont pas requis par cette page spécifique. Contrairement aux applications traditionnelles, vous importez ce très gros fichier CSS, qui fichier CSS contient de nombreux noms de classe différents, mais il se peut qu'ils ne soient pas utilisés sur la page. Les composants stylisés, tout d'abord, injectent des styles dynamiquement lors de l'exécution et si, par exemple, nous avons modifié la sonde ici, ces styles seront également injectés dynamiquement, ajoutés aux balises de style afin qu'ils soient disponibles sur la page. Avec les applications traditionnelles, ce n'est pas correct. Tout doit être prédéfini à l'avance et chargé via des fichiers CSS. Le problème avec cette solution CSS NGS, particulier avec JavaScript d'exécution, est qu'elle prend du temps. Il faut du temps pour analyser ce code JavaScript pour le traduire en CSS et l'injecter dans la page. C'est de l'informatique, cela prend du temps. Cela signifie que si vous avez une très grande arborescence d'éléments sur la page, disons , qui est un composant stylisé, cela peut devenir un goulot d'étranglement à cause du JavaScript, prend du temps à le traiter. Si vous avez des millions de centaines de composants sur la page, cela peut prendre une seconde, quelques secondes, que les styles soient injectés sur la page. Mais dans la plupart des applications, ce n'est pas le cas. Mais vous devriez vraiment envisager cette option si vous travaillez sur des applications plus volumineuses et que c'est vous qui prenez les décisions. Mais encore une fois, la plupart du temps, je ne suis pas là pour t'effrayer. La plupart du temps, c' est tout à fait correct et les utilisateurs finaux ne verront même pas la différence. Pour le box office, nous allons utiliser des composants stylisés. Nous allons essayer cette option. L'avantage des composants stylisés est qu'ils nous permettent facilement de définir d'abord une configuration globale avec JavaScript. Nous créons l'objet thème et il fournit tout grâce à l'interpolation au sein des composants stylisés. deuxième avantage est que nous pouvons facilement appliquer des noms de classes dynamiques en utilisant, encore une fois, la même interpolation de chaînes, et troisièmement, tout est en JavaScript. Vous n'avez pas du tout besoin de créer de fichiers CSS. Tout est écrit ici directement. L'inconvénient est que, tout d'abord , comme il s'agit de JavaScript, cela prend du temps de calcul. Encore une fois, dans les applications très volumineuses, il peut s'agir d'un goulot d'étranglement. Dans les applications plus petites, cela ne sera même pas visible du tout. Deuxième inconvénient, cela peut prêter à confusion car maintenant tout est un composant et il est facile de confondre les composants ordinaires et les composants stylisés. Je pense que c'est ça. Pour l'instant, nous allons simplement supprimer toutes les modifications que nous avons apportées à Home GS6. Je vais continuer à installer les composants stylisés, puis dans la vidéo suivante, nous allons enfin styliser ensemble de l'application en utilisant des composants stylisés. voit là-bas. 85. 29 Styler l'application p1: Bonjour. Dans cette vidéo, nous continuerons à parler de styles. Dans cette vidéo, nous allons styliser notre application, pas entièrement, mais nous allons faire la majeure partie séparément. Allons-y. Dans la vidéo précédente, j'ai déjà installé des composants stylisés, je lance simplement npm install styled-components, je peux réexécuter cette commande au cas où pour m'assurer que le package est définitivement installé. Juste après, je vais démarrer le serveur de développement local et voir où exactement nous allons commencer à styliser notre application. Les styles que je vais utiliser dans cette vidéo seront partagés avec vous par l'intermédiaire de l'invité auquel vous avez déjà accès. Commençons par là. Tout d'abord, nous allons connecter la police Google, particulier Roboto, à notre application et peut-être modifier le titre. Parce que pour le moment, il ne s' agit que d'une application React. Je vais juste aller ici, StylingPart1.md et copier l'index HTML que j'ai ici. Ensuite, je vais accéder à index.HTML. Ici, au lieu du titre, je vais connecter cette police, charger cette feuille de style et changer le titre en Box Office. Maintenant, il apparaîtra sous Box Office. Mon application apparaît sur le Box Office et j'ai connecté cette police Roboto ici. Génial. Maintenant, dans la vidéo précédente, vous vous souvenez que j'ai parlé thème des composants stylisés, nous avons utilisé un fournisseur de thèmes. Allons-y et créons ce thème. Si je reviens à l'invité, j'ai cet objet ici. Cet objet ici va être la configuration globale de notre thème. Juste quelques couleurs plus la police globale que nous allons utiliser, le Roboto que nous venons de connecter à l'index HTML. Je vais prendre cet objet thématique, je vais accéder, laissez-moi voir, à l'application JS6. Ici, je vais ajouter cet objet de thème, et maintenant je dois utiliser le fournisseur de thème et transmettre cet objet de thème aux composants sous-jacents. Tout d'abord, débarrassons-nous de ce balisage ici, nous n'en avons plus besoin, il a été commenté. Ensuite, à partir de composants stylisés, je vais importer le fournisseur de thèmes. Ci-dessous, interrogez le fournisseur du client, ou en haut de celui-ci. Peu importe, je vais appeler le fournisseur de thèmes, je vais intégrer le routeur de mon navigateur au fournisseur de thèmes et, en tant qu'objet thématique, je vais transmettre l' objet thématique que nous avons ici et que nous l'avons copié par l'invité. Maintenant, vous pouvez voir que c' était en fait cette nouvelle édition, disons qu'avec ce nouvel objet thématique, notre application j6 est devenue un peu polluée. Ce que nous pouvons faire dans ce cas, peut-être osciller partiellement ou extraire la logique que nous avons écrite jusqu'ici dans un fichier séparé. Par exemple, nous pouvons d'une manière ou d'une autre extraire ce fournisseur de thème et l'objet du thème dans un fichier séparé et tout gérer à partir de là. Ce que je veux dire par là, c'est que dans le dossier source, nous pouvons créer un nouveau fichier appelé theme.jsx. Maintenant, ici, nous pouvons déplacer l'objet du thème, et ici nous pouvons créer notre propre composant, qui s'appellera peut-être un thème global. Essayons de créer cela, const, GlobalTheme. Nous allons utiliser ce GlobalTheme dans appjsx au lieu du fournisseur de thèmes. Nous n'aurons pas besoin d'importer le fournisseur de thèmes à partir de composants stylisés, gérer l' objet du thème ici à l'intérieur, puis d'utiliser le fournisseur de thèmes pour transmettre l'objet d'équipe, nous pouvons extraire toute cette logique dans le thème jsx, tout gérer à partir d'ici. Pour cela, nous pouvons créer simplement un composant appelé thème global, et nous ne pouvons pas encapsuler le routeur du navigateur dans un composant de thème global, comme ça. Que nous allons importer depuis jsx réputé. Laisse-moi le faire. Je vais juste importer à partir du thème global. Ce GlobalTheme doit être exporté vers, je vais appeler export const, GlobalTheme. Maintenant, ça a l'air beaucoup plus propre. Ce GlobalTheme doit abandonner tous ses enfants qui lui sont transmis. Cela signifie qu'à l'intérieur du composant GlobalTheme, je vais déstructurer l'accessoire pour enfants, et à partir de ce composant, je vais simplement renvoyer le fournisseur de thème, qui est importé à partir de composants stylisés, et les enfants plus âgés y accèderont. Pour l'accessoire du thème, je vais transmettre l'objet du thème ici. Maintenant, nous avons créé le thème, nous avons géré la logique du thème jsx, mais nous devons également appliquer des styles globaux. heure actuelle, nous avons quelques styles globaux définis ici dans le CSS d' index, mais pour notre solution de style, nous utilisons des composants stylisés. Nous pouvons en fait utiliser des composants stylisés pour créer un thème global, qui n'est pas, disons, limité à un composant spécifique. Certains styles sont donc définis par composants stylisés disponibles dans le monde entier. Au lieu d'utiliser un index CSS, nous pouvons supprimer ce fichier. Dans l'index jsx, nous pouvons désormais supprimer la référence à un index CSS existant. Maintenant, nous devons d'une manière ou d'une autre créer des styles globaux. Dans le composant stylisé, nous avons une chose appelée créer un style global. Nous pouvons le rechercher dans la documentation. Laisse-moi voir. Créez un style global, une référence APA, créez un style global, Web uniquement. C'est juste une fonction que vous appelez. Encore une fois, vous écrivez des styles globaux, du CSS global, puis vous les utilisez simplement comme composant. En gros, c'est la même chose que l'utilisation de composants de style normal, mais cette fois, elle ne sera pas limitée à des composants spécifiques. Les styles seront appliqués à l'échelle mondiale. Nous allons appeler Create Global Styles ici, mais nous avons cet appel interne à un invité qui est partagé avec nous. Nous pouvons donc simplement le prendre à partir d'ici, copions-collons-le. J'appelle simplement créer un style global importé à partir de composants stylisés, puis je spécifie certains styles globaux, particulier ici pour le deck budgétaire. Ici, j'utilise l' interpolation de chaînes pour interpoler cet objet de thème et récupérer famille de polices définie ici. Vous vous souvenez que parce que nous utilisons le backtest ici, nous sommes autorisés à utiliser l'interpolation de chaînes, nous devons transmettre une fonction qui renvoie CSS qui sera directement interpolé ici. Dans la vidéo précédente, j'ai utilisé des accessoires, puis j'ai utilisé props.theme. Mais comme le premier argument est un objet qui contient la clé de thème, nous pouvons déstructurer la clé de thème directement dans les arguments. Ceci est totalement facultatif. C'est juste pour, disons, simplifier et raccourcir cette syntaxe. Je vais juste déstructurer le thème à partir d' ici et utiliser la famille de polices du thème. Encore une fois, l' objet du thème fait référence à cet objet, à l'objet que nous avons défini ici et que nous transmettons ensuite au fournisseur du thème. C'est pourquoi il est disponible dans notre définition de composants stylisés. Ensuite, nous utilisons simplement ces styles globaux dans notre balisage, comme un composant irrégulier. Maintenant, tout cela devient magiquement disponible. Si nous retournons dans notre application, et si nous cherchons un body tag, laissez-moi le trouver, vous pourrez voir que les styles ont été appliqués. Nous avons une famille de polices, Roboto sans-serif, comme nous l'avons définie dans le thème et le reste du CSS que nous avons placé ici. Super. Maintenant, quelle sera notre prochaine étape ? Je pense que nous allons d'abord commencer par la navigation car nous avons une petite chose à aborder. Ce que je veux dire par cette petite chose, c'est lorsque nous naviguons entre les pages, nous voulons indiquer quelle page est actuellement active. Par exemple, si je suis sur la page d'accueil, j'aimerais montrer à l'utilisateur que ce lien est actif. Si je navigue pour démarrer, je veux indiquer que le lien de démarrage est actif en ce moment. Comment puis-je faire ça ? Si nous revenons aux composants, Nav.sjsx, nous avons ici ce balisage simple, nous mappons simplement notre tableau de liens à un élément LI avec un composant de lien importé depuis react-router-dom. Comment pouvons-nous vérifier d'une manière ou d'une autre que ce lien que nous affichons ici est actif. Mais ce routeur React possède un composant spécifique et si nous consultons la documentation et si vous recherchez les composants de NavLink, nous pouvons lire dans la description qu'un NavLink est un type spécial de lien qui sait s'il est actif ou non. Si nous lisons plus loin, cela indique que par défaut, une classe active est ajoutée à un composant NavLink lorsqu' il est actif, donc en bref, au lieu d'utiliser un lien, nous pouvons utiliser un composant appelé NavLink et lorsqu' il est actif , la classe active sera attachée à ce lien par défaut. Essayons de voir. J'ai remplacé le lien par le lien de navigation de React-Router-Dom, je reviens à mon application, j'inspecte le balisage. Je regarde la balise [inaudible] ici, et vous pouvez voir que je suis actuellement sur la page d'accueil, et je vois que plus active a été ajouté à ce lien. Si je navigue vers la page d'accueil, Now Plus Active est rattachée à la page d'accueil. Juste comme ça, le routeur React nous a donné la possibilité de styliser notre lien actif en remplaçant simplement le lien par navlink. est aussi simple que cela. Vous pouvez en savoir plus sur la personnalisation de ce NavLink, peut-être en fonction de certaines conditions, mais dans notre cas, il souhaite être modifié d'une manière ou d'une autre L'interface, par exemple, si nous regardons la documentation, nous pouvons utiliser cette balise de style, qui peut être une fonction qui reçoit cette clé active dès le premier argument. Nous n'irons pas plus loin, nous allons simplement en parler à notre invité et j' ai déjà préparé les styles pour nous. Permettez-moi de vous expliquer ce que nous avons ici. Tout d'abord, nous allons copier ce composant de style liste de navigation, et nous allons le placer quelque part en bas. Tout d'abord, nous devons importer le style. En haut, nous allons appeler le style d'importation à partir de composants stylisés. Nous créons ici un élément UL simple, celui-ci avec des styles. Maintenant, nous allons simplement remplacer UL par novelist, et tout ce qui se trouve à l' intérieur du balisage sera stylisé. Encore une fois, nous créons des styles parsemant un élément de liste ordonnée de styles , puis nous précisons que chaque élément LI à l'intérieur aura une marge de 10 pixels. Essayons-le et voyons. Nous revenons à l'application, vous pouvez voir que la mise en page a été modifiée. Si nous examinons la classe L, comme auparavant, nous avons une classe générée de manière unique spécifiquement pour cet élément de la liste de navigation, particulier pour cet élément UL, nous pouvons voir les styles. Si nous inspectons l'élément LI, il possède également des styles. Super, ça a marché. Mais qu'en est-il des liens ? Parce que nous n'avons touché aucun composant NavLink. Si nous revenons ici à l'invité, nous avons également un style de lien ici. Permettez-moi de le copier et je vais vous expliquer ce que nous avons. composants stylisés sont, disons, suffisamment polyvalents pour ne pas nous permettre de styliser des éléments HTML basiques, disons natifs. Cela nous permet également de personnaliser d'autres composants. Ici, j'appelle styled en tant que fonction et je passe le composant NavLink à l'intérieur comme argument. De cette façon, nous étendons le composant NavLink avec les styles que nous avons ici. De cette façon, à la fin, ce style de lien ne sera qu'un composant NavLink, mais avec cette feuille de style CSS, est aussi simple que cela. Maintenant, au lieu d' utiliser NavLink ici, je peux utiliser le style Link en toute sécurité ou peut-être pouvons-nous même l'appeler style NavLink si vous le souhaitez, gardons-le en style de lien. Ce que nous faisons à l'intérieur, c'est de spécifier à nouveau la couleur à partir de l'objet du thème, puis nous avons l'esperluette , puis nous avons .active qui signifie quand cet élément, donc cette esperluette fait référence à lui-même, qui signifie que l' esperluette fait référence au composant NavLink lui-même, et puis quand ce composant, lorsque cet élément, lorsque ce NavLink a la classe active, nous avons précisé qu'il aurait coloré ce balisage puis l' autre pour obtenir l'effet souhaité. Essayons de voir. Qu'est-ce que nous avons ? Nous revenons ici et vous voyez maintenant que nous avons cette jolie navigation. Lorsque nous naviguons, la page actuellement active est maintenant indiquée. Super, passons à autre chose. Pour en revenir à l'invité, il nous reste encore un moment intitulé Radio personnalisée. Pour ces boutons radio que nous avons ici, disons que nous allons créer des boutons radio personnalisés. Lorsqu'il s'agit de styliser des entrées telles que des cases à cocher ou des radios personnalisées, c'est un peu compliqué, mais rien de vraiment compliqué. Si nous accédons au composant du formulaire de recherche que nous avons ici, nous voyons que nous avons deux étiquettes. À l'intérieur de chaque étiquette, nous avons une entrée de type radio. Si nous devons créer un élément radio personnalisé dont nous voulons qu'il soit entièrement stylisé, nous devons adopter une approche légèrement différente pour rendre, disons, réutilisable. Ce que je veux dire par là, c'est que je suggère de créer un composant que nous appellerons Custom radio. Sous composants, je vais créer un nouveau fichier appelé Custom radio.jsx, donc ici je vais créer une radio personnalisée. Ici, pour l'instant, ce ne sera qu'une étiquette. Je vais le mettre de côté et voir ce que nous avons. Nous avons une étiquette, et à l'intérieur, nous avons du texte, puis nous avons une entrée. Nous pouvons donc simplement copier ce balisage ici et le mettre dans une radio personnalisée. Maintenant, que voulons-nous faire et quelle interface voulons-nous donner à cet élément radio personnalisé ? Essayons simplement d'évaluer exactement comment nous aimerions l'utiliser. Donc, pour le moment, nous créons une étiquette, nous transmettons des entrées à l'intérieur à la place. partir de maintenant, ce sera un composant appelé radio personnalisée. Nous allons appeler radio personnalisée, et idéalement, à cette radio personnalisée, nous aimerions transmettre tous les accessoires, tous les attributs que nous transmettons à l'élément d'entrée de type radio. Je vais donc simplement copier tout cela, peut-être sans taper radio, car ce composant traite déjà de la radio. Nous allons transmettre le nom, le contrôle de la valeur reste inchangé. Mais qu'en est-il du label ? Quelles sont nos options ? La première option est que nous puissions peut-être transmettre cette étiquette en tant qu'enfants, par exemple comme ceci. C'est peut-être une option, mais personnellement, je préfère la transmettre en tant qu'attribut. Nous allons donc définir un attribut supplémentaire, un accessoire de plus, que nous allons appeler label et nous allons passer des émissions ici. Au lieu d'utiliser des enfants, il s'agira d'un composant à fermeture automatique doté d' un accessoire supplémentaire appelé étiquette. Maintenant, comment pouvons-nous gérer tout cela dans une radio personnalisée ? Tout d'abord, nous allons spécifier les accessoires ici et, à partir des accessoires, nous allons les déstructurer. Tout d'abord, nous allons prendre cet attribut d'étiquette, accessoires étiquetés que nous allons transmettre à l'étiquette, puis dans le balisage, nous allons interpoler cette étiquette, et maintenant notre objectif est de prendre tous ces accessoires, le reste des accessoires que nous transmettons, quels que soient ces accessoires, quels que soient ces accessoires, nous savons qu'ils seront tous redirigés d' une manière ou d'une autre vers l'élément d'entrée ici. La question est donc de savoir comment y parvenir. Nous n'allons pas déstructurer tous les accessoires un par un, n' est-ce pas ? Nous ne voulons pas le faire. Nous savons que nous prenons l'étiquette et le reste ira certainement à l'élément d'entrée. Dans React, étant donné que l'objet props n'est toujours qu'un objet JavaScript, les mêmes règles s'appliquent. Nous pouvons utiliser cette structuration, nous pouvons utiliser l'opérateur de propagation, nous pouvons utiliser l'opérateur rest. Toutes ces règles s'appliquent donc. Ce que je suggère, c'est que nous puissions réellement utiliser l'opérateur de propagation. Nous pouvons appeler trois points ici et spécifier les accessoires d'entrée. En utilisant cette syntaxe ici, je peux peut-être l'intégrer directement ici. Nous ne récupérons donc que l' étiquette prop ici, puis quoi que nous transmettions, le reste des accessoires sera disponible sous l'objet props d'entrée. Nous pouvons maintenant prendre cet objet accessoire d'entrée et répartir tous ces accessoires que nous transmettons en utilisant l' opérateur de propagation comme ça. Tout d'abord, nous utilisons l'opérateur rest pour, par exemple, accumuler tous les accessoires que nous transmettons à une radio personnalisée seront tous disponibles sous accessoires d'entrée, objet, puis nous répartissons tous les accessoires, toutes les touches à l'intérieur des accessoires de saisie, tant qu'accessoires, en tant qu'attributs de l'élément d'entrée. Maintenant, à partir de la radio personnalisée, nous allons exporter la radio personnalisée par défaut, et maintenant nous devons d'une manière ou d'une autre styliser tout cela. Donc, pour en revenir à l'invité, nous avons une radio stylisée. Copions tout cela , puis plaçons-le en bas. Maintenant, nous devons d'abord importer des styles à partir de composants stylisés. Ici, nous créons une étiquette à points stylisée, et j'appelle le composant renvoyé une radio stylisée. Au lieu d'une étiquette, nous pouvons simplement utiliser une radio stylisée, et maintenant tout fonctionnera comme par magie. Donc, tout ce balisage CSS ne sert qu'à créer un bouton radio personnalisé entièrement stylisé avec le thème que nous avons et les couleurs que nous définissons dans ce thème. Maintenant, sauvegardons-le. De plus, nous devons ajouter un balisage supplémentaire ici, juste un élément de portée vide. Juste comme ça. Il sera utilisé à l'intérieur du balisage, il sera stylisé. Maintenant, revenons en arrière et dans le formulaire de recherche, utilisons cette radio personnalisée. Alors maintenant, au lieu d'utiliser une étiquette et juste comme ça, nous allons d'abord importer une radio personnalisée. Importez des composants de ROM radio personnalisés à partir d'une radio personnalisée, de la même manière, et la radio personnalisée est exportée par défaut Je n'ai donc pas besoin d' utiliser named export, name import. C'est faux. Maintenant, je vais juste utiliser une radio personnalisée, je vais transmettre l'accessoire étiqueté et le reste des accessoires sera redirigé, disons vers l'élément d'entrée sous-jacent. Je ferai donc la même chose aux acteurs. Je n'ai plus besoin de cette étiquette ici. Je vais juste copier que le label de radio personnalisé sera composé acteurs et que les accessoires se chargeront du reste. Encore une chose que j'ai remarquée ici, nous avons précisé que cette entrée sera de type radio. Cependant, nous ne précisons nulle part que notre entrée sous-jacente est également de type radio. abord, disons tous ces accessoires que nous transmettons à radio personnalisée redirigent vers l'élément d'entrée sous-jacent, mais quoi que nous transmettions, nous pouvons le remplacer par les accessoires que nous définissons ici en les incluant, par exemple, après avoir fait la diffusion. Notre entrée sera donc de type radio. Lorsque nous spécifierons des accessoires après cette diffusion, tout ce que nous spécifierons sera remplacé par cela. Par exemple, si ici à une radio personnalisée, je vais transmettre du texte, disons du texte, celui-ci sera remplacé par ce que je spécifie après cette diffusion. Mais si je précise ici dans une radio personnalisée, tapez radio avant la diffusion, la diffusion prévaudra, disons, sur les accessoires par défaut que je transmets ici. Mais s'il est défini par la suite, il sera remplacé. Exactement les mêmes règles que celles que vous appliqueriez à l'intérieur d'un objet simple. Donc, vous diffusez quelque chose ici, disons des accessoires de saisie, puis vous le spécifiez. Le type sera radio. En gros, tout ce que nous avons à la ligne 12 est traduit grossièrement. Ce que vous voyez à l'intérieur de ces lignes trois à six, c'est à peu près la même chose. Nous spécifions le type radio, nous n'avons pas besoin de spécifier le type de texte ici. Maintenant, nous pouvons tout enregistrer. Nous pouvons revenir à notre application, et nous voyons que nous avons maintenant des éléments stylisés, mais nous avons oublié de supprimer l'étiquette ici et vous pouvez maintenant voir que cela fonctionne. Si je précise, recherchez des garçons, maintenant, il cherche en fait des acteurs. Ensuite, je suis passé aux émissions et ça marche. Donc tout va bien ici, et je pense que ce sera spécialement pour cette vidéo. Nous avons abordé, disons, les éléments essentiels du style. Je pense que nous avons réussi à faire beaucoup de choses. Pour l'instant, limitons-nous cela et engageons-nous à tout mettre en œuvre. Passons rapidement en revue ce que nous avons fait. Tout d'abord, dans index.HTML, nous avons ajouté ce lien vers la police Roberta, nous avons défini le titre sur Box office, dans app.jsx, nous utilisons le composant de thème global que nous avons créé dans le jsx. Nous avons donc créé ce composant global qui n'est qu' une enveloppe au-dessus du fournisseur de thèmes et des styles globaux à partir de composants stylisés. La logique est gérée dans le thème jsx. Nous avons créé cet objet thématique global que nous utilisons dans les composants stylisés de l'application. Ensuite, dans navs.jsx, nous avons utilisé le composant de lien de navigation car ce n'est pas un composant qui nous fournit le lien actif. Le lien actif reçoit donc la classe active, puis nous utilisons cette classe active dans notre balisage CSS pour styliser le lien actif. Ensuite, nous avons créé et utilisé un composant radio personnalisé, qui est un bouton radio personnalisé que nous avons créé à nouveau, à l' aide de composants de style. Nous avons également découvert cette nouvelle petite astuce ici lorsque nous devons rediriger, disons, ou transmettre les accessoires à un élément sous-jacent en utilisant les opérateurs rest et spread. Nous pouvons donc répartir un objet dans un élément et quelles que soient ses valeurs clés, elles seront toutes considérées comme des accessoires, comme des attributs de l'élément. Cela semblait beaucoup. Validons tout, disons les composants stylisés installés, puis nous dirons que cela a créé un faisceau global avec SC. Simplifions-nous avec des composants stylisés. Radio personnalisée créée. Lien de navigation utilisé depuis le routeur React pour personnaliser le lien actif. Ça a l'air génial. Transmettons le tout à GitHub et dans la vidéo suivante, nous allons continuer avec les styles. On se voit là-bas. 86. 30 Styler l'application p2: Rebonjour. Dans la dernière vidéo, nous avons commencé à styliser l'application à l'aide de composants stylisés. Dans cette vidéo, nous allons continuer. Si nous revenons à l' invité que vous avez partagé avec vous, vous trouverez stylingpart2.empty. C'est le fichier auquel nous pouvons nous référer. Nous avons beaucoup de balisage CSS, et écrire tout cela va être très long et ennuyeux. Pour éviter cela, nous allons simplement utiliser la feuille de style existante, afin que vous et moi n' ayons pas à écrire tout cela nous-mêmes. Allons-y un par un. Ce que nous avons dans StylingPart2.md. Nous avons d'abord AppTittle.jsx et nous avons ici un composant de style Titlewrapper. Reproduisons-le. Revenons à notre application. Allons où se trouve-t-il ? Quel était le dossier ? AppTitle.jsx ? Passons à AppTittle.jsx, et ici, en bas, nous allons utiliser ce titlewrapper et importer des styles à partir de composants stylisés. Maintenant, au lieu du div ici, nous allons utiliser Titlewrapper, et tout ce texte h1 et p qu'il contient sera stylisé selon nos styles dans le div stylisé ici. Sauvegardons-le. Revenons à l'application et voyons. Maintenant, boum, nous avons ce titre assez centré. Génial. Continuons. Ensuite, nous avons un formulaire de recherche dans la liste. Copions tout cela et naviguons pour rechercher. Dans la dernière vidéo, nous avons déjà créé ce composant CustomRadio. Nous allons maintenant ajouter des styles supplémentaires pour que l' ensemble de notre formulaire soit beau. Tous ces composants stylisés, je vais les mettre tout en bas. Cependant, juste pour mentionner que vous pouvez placer ces composants stylisés n'importe où. Vous pouvez créer searchform.style.jsx, placer tous les composants stylisés y placer tous les composants stylisés, puis les importer dans le formulaire de recherche. C'est au cas où vous ne voudriez pas polluer le fichier du formulaire de recherche lui-même. Parce que les composants stylisés, le CSS, prennent beaucoup de place. Juste au cas où vous ne voudriez pas tout écrire ici, vous pouvez l'écrire dans un fichier séparé, puis l' importer ici sur le site. Dans notre cas, nous écrirons tout en bas. Nous devons d'abord importer des styles, j'appuie sur l'intelligence pour ouvrir le menu déroulant. Ici, j'importe des styles à partir de composants stylisés, comme toujours. Maintenant, utilisons ces composants. Nous avons d'abord stylé l'élément d'entrée. Nous avons cette entrée de type texte, donc au lieu d'utiliser une entrée, nous allons utiliser le composant de saisie de recherche, un composant stylisé que nous avons créé. Ensuite, nous avons ce RadioWrapper de style div. Ce sera une division supplémentaire ici, stylisée ou comment l'ai-je appelée ? C'était RadioSwrapper. Ce sera juste un div qui enveloppera nos deux radios personnalisées comme ça. À la fin, nous avons également un wrapper de boutons de recherche, qui sera un autre wrapper div supplémentaire pour cet élément de bouton. Nous pouvons utiliser un wrapper de boutons de recherche, et nous allons y placer un bouton de type submit. C'est ce que nous écrivons dans les styles. Sauvegardons-le. Revenons au formulaire et regardons-le maintenant. Ça a l'air tellement bien jusqu'à présent. Essayons de chercher des garçons. Vous pouvez voir que notre carte n'est pas encore stylisée. Nous allons régler ce problème sur le moment. Mais le formulaire est superbe. D'ailleurs, nous n'avons aucun espace réservé dans ce champ de recherche. Ajoutons-le peut-être. Je vais passer invite d' espace réservé au composant d'entrée de recherche, qui n'est en fait pas comme un composant. C'est toujours l'élément d'entrée. espace réservé recherchera quelque chose. Essayons de voir. Maintenant, ça a l'air mieux. Génial. Allons plus loin. De plus, nous avons un ensemble de fichiers qui sont préfixés par common. Il s'agit de composants stylisés qui seront partagés entre plusieurs fichiers au sein de notre application. Ils seront importés dans plusieurs autres composants. C'est pourquoi ils sont préfixés par commun. Cela signifie qu'à l'intérieur des composants, nous allons probablement créer un dossier appelé common, et nous allons y placer ces composants stylisés. Nous avons d'abord flexgrid.jsx. Copions cela. Créons ici un nouveau fichier appelé Flex Grid. Dans ce fichier, nous exportons simplement le composant flexgrid. Rien de spécial. Ensuite, nous avons la carte de recherche. Ce sera un ensemble de composants que nous allons utiliser pour styliser la carte de recherche. Tant pour les émissions que pour les acteurs, nous copions ce balisage. Nous allons le mettre ici. À partir de là, nous exportons deux éléments rechercher une enveloppe d'images, puis rechercher des composants de la carte. Nous utiliserons ces deux éléments pour personnaliser les cartes de recherche. Allons maintenant plus loin. Ici, nous avons StarIcone jsx. Créons celui-ci, StarIcone, jsx. Ce sera intéressant. C'est juste un div stylisé. Cependant, nous allons utiliser ici un accessoire appelé actif. Nous allons passer un accessoire actif pour changer la couleur de cette StarIcone. Nous y reviendrons dans un moment lorsque nous reviendrons à ce composant, lorsque nous l'utiliserons. Maintenant, nous avons encore une chose appelée centre de texte. Rien de spécial ici. Juste un div qui centrera le texte à l'intérieur. La prochaine chose que nous avons s'appelle Pages Show.jsx. Copions tout cela. Passons à Pages Show.jsx. Comme avant, nous allons utiliser tous nos composants de style. En bas, nous allons importer des styles à partir de composants stylisés. Voyons comment utiliser ces composants. Emballage Back Home. Il s'intitule div et, à l'intérieur, il stylise la balise d'ancrage. Voici ce lien qui nous mène à la page d'accueil. Nous allons l'emballer dans un composant d'emballage de retour à la maison. Finalement, ça ressemble à quelque chose comme ça. Ensuite, nous avons show page wrapper, qui sera l'enveloppe pour l'ensemble du balisage ici. Je vais juste m'en servir comme ça. Des booms. Afficher l'enveloppe de la page et la balise de fermeture affiche l'enveloppe de la page. Ensuite, nous avons également InfoBlock, InfoBlock est ce div réutilisable pour nos informations supplémentaires pour l'émission. Vous y trouverez les détails d' InfoBlock, les saisons d' InfoBlock et le casting d'InfoBlock. Ici, nous avons également ceci. Une erreur s'est produite, les données sont en cours de chargement. Au lieu de simplement utiliser div, nous pouvons réutiliser ce composant de style centre de texte que nous avons créé dans le dossier actuel. Je vais importer à partir de composants, centre de texte commun, et je vais importer un centre de texte, et au lieu d'utiliser ces divs ici, je vais appliquer le centre de texte. Génial. Essayons maintenant de voir si je clique sur l'une des émissions pour en savoir plus. Voici à quoi ressemble notre page en ce moment. Cependant, nous avons toujours des données principales de l'émission non stylée, nous avons encore des détails, des saisons et des acteurs non stylés. Si nous revenons en tant qu'invités, nous avons le casting des émissions, détails des émissions, les saisons, la carte des émissions. Nous allons personnaliser tout cela dès maintenant. Commençons par le casting. Je vais copier tout ça et le mettre dans le casting des émissions. Au. En bas, le style sera importé à partir des composants stylisés et la liste des acteurs servira d' enveloppe au casting. À l'intérieur, nous avons des éléments qui seront présentés sous la forme d'une liste de noms de classe. Nous pouvons en fait utiliser ces noms de classe dans notre balisage et ils seront stylisés car c'est ce que nous indiquons pour le div, les styles. À l'intérieur de la liste des acteurs, nous avons ce div, qui portera le nom de la classe cast item. Ensuite, nous avons Pic Wrapper, qui sera en fait notre wrapper d'images, je l'appelle ainsi, et puis nous avons Actor, qui sera ce nom de classe actor. Génial. Maintenant, si nous revenons ici, aucun casting n'est disponible pour cette émission. Essayons autre chose. Nous avons une très grande image. Sachez ce qu'il y a ici. Nous allons y faire face dans un instant, mais vous pouvez voir que maintenant, notre casting est stylé. Ça a l'air plutôt cool. Maintenant, allons plus loin. Passons à la partie détaillée ici. Les détails seront affichés dans ce DetailsWrapper. Rien de vraiment spécial ici dans le composant details, au lieu de div, nous pouvons simplement appliquer DetailsWrapper. Revenons en arrière et voyons les détails. Rien de vraiment spécial, juste une marge supplémentaire. Revenons aux plongées. Maintenant, nous avons des saisons ici. Copions tout cela. Passons aux saisons. En bas, je vais importer, encore une fois, le style à partir de composants stylisés. Nous avons SeasonSwrapper. Il s'agit du style div, SeasonSwrapper. Utilisons-le comme ça. Alors à l'intérieur, qu'est-ce qu'on a ? Pourquoi n'a-t-il pas été utilisé ? Parce que j'ai oublié le S. Nous avons aussi SeasonList ici. Utilisons cela pour ce div lorsque nous cartographions le balisage. Ici, nous décorons également des articles de saison. Ensuite, nous passons la classe de gauche, puis nous passons la classe de droite. Notre objet de saison sera cette division que nous cartographions. Le nom de famille sera un élément de saison tel que défini dans le composant du fichier. Article de saison Ensuite, nous avons quitté la classe et la classe d'écriture. Mais ici, nous avons le balisage suivant, ce qui signifie que nous voulons afficher les saisons et les épisodes. Voyons voir sur le côté gauche et le reste sur le côté droit. Nous pouvons emballer les saisons et les épisodes en div. Directement dans le div, nous pouvons donner le nom de la classe left. Ensuite, au div, nous donnerons le nom de classe de droite. de la première et la date de fin de la saison de cette saison, nous pouvons peut-être les mettre dans une étiquette forte pour la rendre audacieuse. Essayons de voir ce que nous avons à la fin. Maintenant, nous l'avons, voyons voir. côté gauche et le côté droit sont exactement comme nous l'avons défini ici. Nous ne voyons aucune audace ici, mais maintenant, nous voyons parce que nous l'avons. Inspectons le balisage. Génial. Nos dates sont désormais gras car elles figurent à l'intérieur de l'étiquette forte. Parfait. Maintenant, allons-y. Nous avons également ShowCard ici. Cela va enfin être intéressant. Dans ShowCard, en bas, je vais placer cette section d'action et la section StarBTN. Permettez-moi d'importer le style à partir de composants stylisés comme d'habitude. La première chose que je voudrais faire ici est la suivante. Si nous revenons à notre application, et si nous examinons le résumé que nous supprimons ici, comme vous vous en souvenez, nous recevons du HTML brut. Nous remplaçons toutes les balises HTML, les caractères HTML. Mais on dirait qu'il a été supprimé sans raison. À la fin, nous pouvons simplement ajouter trois points pour le rendre plus convivial, disons. Nous pouvons soit appliquer un modèle de chaîne comme celui-ci, soit ajouter trois points à la fin . Mais pour le rendre, disons, moins détaillé, nous pouvons simplement le concaténer en utilisant l' opérateur plus et cela nous donnera exactement le même résultat, mais ça a l'air beaucoup mieux, je pense. C'est mieux adapté dans ce cas. Si nous regardons, maintenant, nous voyons trois points à la fin, ce qui est génial. Maintenant, utilisons les composants stylisés que nous avons ici. Tout d'abord, nous n'avons aucun composant, disons stylisé qui envelopperait notre marqueur, qui fournirait, disons, des styles pour la carte, uniquement pour quelque chose de spécifique, comme section Action et StarBTN. Mais nous avons créé ce fichier de composants de style commun appelé SearchCard.jsx et à l'intérieur, nous avons une carte de recherche et un wrapper d'images de recherche. Utilisons ces deux cartes dans ShowCard et nous utiliserons ces deux cartes d' acteur plus tard. Je vais importer à partir de la SearchCard commune à l'intérieur. Je préciserai que j'importe SearchCard et j'importe SearchImageWrapper. Maintenant, SearchCard sera le div d'encapsulation. Ensuite, le div qui enveloppe l'image sera en fait SearchImageWrapper. Cette section ActionSection sera la division qui définira notre section d'actions. Pour en savoir plus, consultez les boutons StartMe. Ensuite, nous avons également StarBtn ici, qui est un élément de bouton stylisé, qui est celui-ci. Maintenant, essayons de l'utiliser. Voyons à quoi ressemblent nos cartes en ce moment. Vous pouvez voir qu'ils n'ont pas l'air mal. Tout semble valide, mais nous n'avons, disons, aucune icône ici. L'icône que nous avons créée précédemment est cette StarIcone. Il s'agit simplement d'un div stylisé avec cet attribut CSS spécifique, disons clip-path. Essayons de l'utiliser et voyons à quoi cela va ressembler. Au lieu d'utiliser les textes IsStarred UnStar me et Star me. Je vais faire un commentaire à ce sujet. À l'intérieur, je vais transmettre le composant StarIcone, mais je dois également l'importer depuis StarIcone commun. Génial. Maintenant, voyons voir. Nous avons maintenant l'étoile, obtenue grâce à la propriété CSS clip path. Mais vous pouvez voir si je clique dessus, si j'essaie de démarrer l' émission, rien ne se passe. Nous devons le rendre actif d' une manière ou d'une autre. Nous devons informer les utilisateurs que cette émission est en cours. Auparavant, nous utilisions le rendu conditionnel, Star me et Unstar me. Mais maintenant, puisque nous avons des composants stylisés, nous pouvons appliquer des styles dynamiques très facilement en utilisant l' interpolation de chaînes à l'intérieur des composants stylisés. Je passe simplement cette fonction et je précise. Si props.active est passé au composant icône en forme d'étoile, veuillez appliquer cette couleur jaune. Sinon, veuillez appliquer cette couleur gris-blanc. Ce que nous devons faire ici, c'est simplement transmettre l'accessoire actif au composant icône étoile, qui sera IsStarred. Lorsque IsStarred prend la valeur true, accessoire actif devient vrai, ce qui signifie qu'il sera utilisé dans le composant de style pour choisir la couleur jaune. Quand c'est faux, ce sera la couleur grise ici. Essayons-le et voyons. Je sauvegarde tout. Maintenant, vous pouvez voir qu'elle est en fait jaune car cette émission est maintenant en vedette. Si je clique dessus, les styles seront modifiés. Je clique à nouveau dessus, boum, l'émission est en vedette. C'est plutôt génial. Cool. Nous en avons terminé avec ShowCard. Passons maintenant à notre invité. Ici, nous avons également notre dernier composant dans guests ShowMainData. Copions en fait tout à partir d'ici. C'est où ? Il s'est simplement envolé. Revenons à ShowMainData. En bas, nous avons en fait beaucoup de composants. Passons au sommet et voyons voir. Nous avons d'abord MainDataWrapper. Ce sera la division qui encapsule tout, donc ouverture du support, fermeture du support. Boom, nous l'avons. Ensuite, nous avons l'encapsulation de l' image, puis à l'intérieur, nous avons le style du texte de l'image, ce qui signifie que nous devons légèrement modifier le balisage ici. Nous allons ajouter un wrapper div supplémentaire pour la balise image et className pour le div sera image-wrap. Cool. Maintenant, cette division qui englobe le reste du balisage sera cette section de données que nous avons ici. Utilisons-le. Génial. Maintenant, nous avons aussi le titre et nous avons aussi le résumé et les genres. Notre titre sera le wrapper du div et du span h1. C'est un peu trop abstrait, mais le titre ne sera que la balise h1 ici, cette div et peut-être l'icône de démarrage que nous n'avons pas utilisée ici auparavant. Laissez-moi encapsuler h1 et div ici. Nous avons Headline dont le titre comporte maintenant le div avec notation, mais à l'intérieur du div, nous pouvons également ajouter, disons, StarIcone. Permettez-moi d'utiliser Rating.average ici et, selon nos styles, nous avons l'élément span dans Dive, afin de pouvoir l'intégrer dans une période. Ensuite, nous pouvons utiliser le StarIcone que nous allons importer à partir du StarIcone commun. Nous allons simplement appeler composant StarIcone et nous disons qu'il sera toujours actif. Nous aurons toujours la couleur jaune. Finalement, le balisage ressemblera à ça. Essayons-le et voyons le résultat. À la fin, nous avons cette étoile jaune qui sera toujours jaune à côté de la note. Cool. Ça a l'air pas mal. Ici, nous avons également un résumé et des genres. Le résumé sera juste ce style div et les genres seront également stylés div ; utilisons-le, ou cet encapsulant div ou peut-être pas. Les genres seront simplement le div qui supprime la méthode .map. Essayons de voir, et maintenant, regardez notre page à quel point elle est belle. Il est entièrement réactif. Vous pouvez essayer de redimensionner la fenêtre, y accéder sur votre téléphone portable. Il s'affichera parfaitement sur tous les appareils. Retournez à l'accueil, nous avons mis en forme cette page. Nous avons presque tout stylisé, mais il nous manque certaines choses. Par exemple, vous pouvez voir que cette liste de cartes n'est, disons, pas du tout stylisée. Nous voulons avoir un réseau. Voyons quelles sont les choses que nous n'avons pas stylisées ici. Nous n'avons pas stylisé la grille d'affichage, nous revenons donc à ShowGrid. Ici, pour ce div, nous allons utiliser ce composant stylisé réutilisable que nous avons créé, appelé FlexGrid. Je vais simplement utiliser ce FlexGrid dans ShowGrid et me laisser fermer tous ces composants car de nombreux fichiers sont ouverts. Je reviens à ShowGrid. Ici, j'utilise FlexGrid et je l'importe depuis /Common/FlexGrid. Génial. Je reviens à la page et vous voyez que tout semble bien. Il est entièrement réactif et a l'air bien. Maintenant, qu'en est-il des acteurs ? Laisse-moi chercher des acteurs. Vous pouvez voir que les acteurs ne sont pas stylés parce que nous les avons complètement oubliés. Réglons ça. Nous allons voir les acteurs ici. Pour ActorCard, nous allons importer ce composant SearchCard commun à importer ce composant SearchCard commun partir de SearchCard, qui sera SearchCard et tout envelopper dans une SearchCard si nous regardons à l'intérieur du fichier SearchCard. Nous avons également SearchImageWrapper ici, donc pour le div qui enveloppe la balise d' image, nous allons utiliser SearchImageWrapper qui est également importé de Common SearchCard. Voyons voir, peut-être devons-nous changer quoi que ce soit à partir d' ici en fonction des styles, mais je ne pense pas que nous ayons besoin de le faire. Nous devons également utiliser le FlexGrid pour créer une grille à partir de nos cartes. Nous allons accéder à ActorsGrid et, comme avant, nous allons simplement utiliser FlexGrid qui a été importé de FlexGrid commun. Maintenant, regardez ça. Ça a l'air incroyable. Les acteurs sont stylés, les émissions sont stylées, tout a l'air génial. Nous avons cette StarIcone, mais si nous accédons à la page Favorisée, nous constatons également que tout semble correct car dans le composant Started de la page Started, nous utilisons le composant ShowGrid réutilisable. Voyons le reste. Qu'est-ce que nous avons ici ? Dans d'autres pages, nous n'avons également utilisé que quelques éléments. Par exemple, dans Starred, nous utilisons ces divs vides sans aucun style. Nous pouvons les remplacer par un composant sensoriel de texte situé dans un dossier commun. C'est sur la page des favoris. Au lieu de simplement afficher div, aucune émission n'a été mise en favori. Nous allons utiliser TextCenter et ce TextCenter doit être importé depuis «  components/Common/TextCenter ». Juste comme ça. Au lieu de ce div, nous allons utiliser TextCenter, il montre notre TextCenter en cours de chargement. TextCenter se trouve partout. Nous allons probablement faire la même chose. Laisse-moi voir. Dans home JSX, au lieu d' afficher ces div et div sans résultats, nous allons simplement afficher TextCenter IntelliSense importé depuis le TextCenter commun, aucun résultat TextCenter, et je pense que c'est tout. Laisse-moi voir. Si je rentre chez moi et que je tape quelque chose de complètement stupide, nous n' aurons certainement aucun résultat. Nous aurons ce message ici, aucun résultat. Si nous passons en favoris , si nous voulons effacer l'espace de stockage ici et actualiser la page, nous verrons le message Aucune émission n'a été ajoutée aux favoris. Enfin, notre application est désormais entièrement stylisée. Nous avons tout et nous avons pris soin de chaque page de l'application. Génial. Maintenant, commettons tout ici. Cela le permettrait-il ? Dans cette vidéo, le voyage a été long. Le message de validation va être stylisé, l'ensemble de l'application utilisant des composants stylisés. Génial. Dans la vidéo suivante, nous ajouterons quelques éléments de style, disons , plus petits, à l'application. Pour le rendre encore plus interactif, cela va être intéressant. On se voit là-bas. 87. 31 Styler l'application p3: Salut, félicitations pour le style de l'ensemble de l'application. Maintenant, tout est en place. Cependant, nous pouvons améliorer quelques parties, donc l'apparence sera un peu plus belle, à mon avis. Tout d'abord, la première chose je voudrais mentionner est que, chaque fois que nous recherchons des cartes, elles apparaissent simplement sur nous. Ne serait-il pas intéressant de fournir une animation lorsque ces éléments apparaissent, par exemple une animation en fondu ? le registre NPM, vous pouvez trouver ce package appelé react fade in, qui n'est qu'un composant que vous importez. Vous le spécifiez comme nous utilisons des composants stylisés. Très similaire à cela, puis il fournit des éléments d'animation à ses enfants. Ils s'estompent et s'estompent avec le retard. Ce package est très simple à utiliser, mais il reste un package. Je veux dire que pour un cas d'utilisation aussi simple, nous n'aurons peut-être pas du tout besoin d'un package. Vous pouvez simplement l' installer penser à écrire du CSS, mais moins vous avez de packages, mieux c'est, car il y a moins de dépendances dans votre application. J'ai d'abord voulu utiliser ce package, puis j'ai décidé que nous pouvions en fait écrire un tout petit balisage CSS qui produira un effet très similaire. Si nous revenons à l'essentiel, ici, mise en forme du fichier MD à trois points, vous pouvez trouver ici cette grille de drapeaux améliorée que nous avons déjà dans Common Flex Grid jsx avec cette animation et ces images clés. Permettez-moi de copier tout cela et de le remplacer. Désormais, chaque fois qu' un composant Flex Grid est monté, son animation s' estompe, telle que définie par ces images clés. Cela fera simplement passer la capacité de zéro à un et nous obtiendrons un effet très similaire à celui React Fading, mais sans délai. Essayons de voir. Maintenant, chaque fois que je cherche des acteurs ou des émissions, comme chaque fois que j' utilise le composant Flex Grid quelque part, vous pouvez constater que l' animation s'estompe, ce soit pour les émissions, pour les acteurs, ce soit sur la page d'accueil. Effet très similaire, mais sans aucune dépendance. Vous devez également tenir compte du fait qu'à l'avenir, lorsque vous allez installer quelque chose à partir de npm, posez-vous d' abord une question. Avez-vous vraiment besoin cette dépendance ou pouvez-vous la créer vous-même ? C'est très important lorsque vous allez travailler sur de vrais projets. Génial. Maintenant, la prochaine chose que j' aimerais ajouter, c'est que, chaque fois que nous commençons une émission, en ce moment, notre étoile devient jaune. Ce n'est pas mal, mais nous pouvons le rendre plus convivial et nous pouvons fournir, disons, une animation lorsque nous commençons par un bouton, lorsque nous démarrons cette émission, l'étoile en fait, disons, est animée d'une manière ou d'une autre. Si nous y revenons ici, nous pouvons également le trouver dans la troisième partie MD du style qui montre la carte JSX avec un composant de style StarBTN amélioré. Allons aux spectacles, montrez la carte. Voici ce StarBTN, si nous le comparons. Nous définissons ici une autre classe appelée Animate et nous avons quelque chose de nouveau ici. Copions-le et examinons ce que nous avons. Tout d'abord, nous définissons cette classe animée, qui contient également une animation telle que définie par ces images-clés, mais nous avons également ici cette interpolation et nous avons une icône en forme d'étoile ici, ce qu'elle fait. Vous savez qu'à l'intérieur du balisage CSS, à l'intérieur du composant stylisé, nous pouvons spécifier, de la même manière que SAS, l'imbrication d'éléments. Ici, j'ai interpolé l'icône de démarrage et cela signifie que tout ce que j'ai interpolé ici se résoudra en fait à composants stylisés existants en tant qu'équipement de référence. À l'intérieur de cette classe animée, chaque fois que cet élément StarBtn possède une classe animée, à l'intérieur de cet élément StarBtn, nous avons déplacé notre icône. Chaque fois qu'il y aura StarBtn, vous aurez une classe active, une classe animée, veuillez styliser le composant d' icône en forme d'étoile, qui est utilisé à l'intérieur de celui-ci. De cette façon, nous pouvons résoudre le style de l'icône de démarrage spécifique. Cet élément, chaque fois que StarBtn a une classe. Essayons de voir. Nous aimerions animer le nom de classe du composant StarBtn chaque fois que l' émission démarre. Ce qui va juste spécifier, s'il vous plaît, quand l'émission démarre, veuillez ajouter la classe d'animation. Essayons de voir. Revenons à notre application et vous venez de voir cette animation. Chaque fois que je clique sur l'émission, augmente et sa taille augmente et diminue. Cela fonctionne. Ça a l'air bien jusqu'à présent, mais si nous allons sur la page d'accueil et si je rafraîchis la page vous verrez toujours la même animation et je n'ai rien fait. En effet, lorsque le composant est monté, cette classe d'animation est ajoutée car notre émission a déjà commencé et nous voyons l'animation. Ce n'est pas mal, mais ce n'est pas exactement le comportement que nous voulons atteindre. Nous ne voulons exécuter l'animation que lorsque le composant est réellement démarré, et non lors du montage du composant. Pour obtenir le résultat souhaité, nous allons introduire un nouveau hook appelé use ref. C'est quoi ça ? Tout d'abord, importons-le depuis React. C'est l'un des crochets intégrés dont vous aurez besoin au cours de votre future carrière de développeur. est quoi ce crochet ? Use ref est juste un hook que vous appelez comme ça et ce hook vous renvoie une référence. Une référence que vous spécifiez ensuite, ou que vous associez, disons, à un élément. Essayons de voir. Par exemple, nous voulons donner une référence à ce StarBTN. Appelons cette référence StarBtn ref, juste comme ça. Maintenant, pour associer cette référence, nous avons donc simplement appelé le hook, nous avons obtenu notre variable de référence StarBtn, mais elle n'est encore associée à aucun de ces éléments. Pour ce faire, nous devons transmettre à StarBtn, un accessoire, en fait un attribut appelé ref et à cette référence, nous précisons, StarBtn ref. Vous pouvez simplement transmettre la référence à vos composants personnalisés, par exemple. Si j'ai ceci, laissez-moi voir par exemple titre de l'application que j'utilise dans la mise en page principale, je ne peux pas simplement transmettre la référence et spécifier autre chose. La référence est transmise uniquement aux éléments HTML natifs sous-jacents. Si vous souhaitez transmettre une référence à vos composants personnalisés, cela doit être géré correctement, et nous en reparlerons dans le futur. Mais pour l'instant, nous allons nous limiter aux éléments natifs, puisque StarBtn n'est en fait qu'un élément HTML natif, car sous le crochet, il ne s'agit toujours que d'un bouton. Il s'agit d'un composant créé par bibliothèque de composants stylisés et gère correctement les références. En gros, quoi que nous transmettions ici, nous serons redirigés vers l' élément natif HTML du bouton sous-jacent. Nous transmettons la référence sous la forme StarBtnRef. Maintenant, qu'est-ce qu'on peut faire avec ça ? Pourquoi ferions-nous cela ? Essayons de refactoriser ce gestionnaire OnClick que nous transmettons à StarBTN. Au lieu de transmettre une fonction qui appelle OnStarmeClick, créons une fonction appelée HandleStarClick que nous allons créer ici. HandleStarClick inside, qui va appeler OnStarmeClick et transmettre un identifiant à l'intérieur. Mais aussi, enregistrons StarBtnRef sur console et voyons ce que nous avons. Si nous ouvrons une console, chaque fois que je clique ici, nous verrons l'objet avec une seule propriété appelée current. Chaque fois que vous créez une telle référence, vous avez toujours un objet, quoi qu'il arrive, avec la clé actuelle. Vous pouvez voir que la propriété actuelle pointe vers l'élément bouton, vers l'élément HTML appelé bouton, non vers le bouton 2, uniquement vers l'élément bouton sous-jacent. Cela équivaut en fait à écrire Document.getElementById, par exemple. Lorsque vous saisissez un élément par identifiant, c'est l'équivalent. Dans React, chaque fois que vous devez accéder à l'élément sous-jacent directement avec l'API DOM, au lieu d'utiliser Document.getElementById, Document.getElementByClassName, par autre chose, vous utiliseriez des références, puis vous utiliseriez StarBtnRef.Current, puis vous obteniez votre élément. Je l'enregistre, StarBtnRef.Current. Encore une fois, je clique sur le bouton, vous verrez maintenant que j' ai cet élément, qui signifie que je peux simplement utiliser ce que je veux ici et jouer avec lui en utilisant l'API DOM. Mais il est important d' associer des éléments et de transmettre la référence. Parce que si je ne le fais pas, ma référence sera vide. Laisse-moi essayer de voir. Je rafraîchis la page. Je clique, maintenant mon StarBtnRef.current me donne une valeur indéfinie car maintenant ma référence est vide. Il n'était associé à rien. Chaque fois que vous utilisez ref, n' oubliez pas de transmettre l'attribut ref. Puisque StarBtnRef.current pointe vers l'élément DOM sous-jacent, nous pouvons utiliser l'API DOM pour manipuler notre liste de noms de classes. Ici, je vais simplement créer une variable appelée, disons, StarBtnElement. Ce sera StarBtnRef.Current. Tout d'abord, comme vous venez de le voir, notre courant peut être indéfini, nous allons donc simplement faire une vérification en toute sécurité ici. Si StarBtnRef.Element est faux, veuillez simplement quitter cette fonction. Sinon, nous continuons en disant que si l'émission est mise en vedette, dans ce cas, veuillez procéder comme suit. Je viens de remarquer que cela s'appelle start au lieu de star. Permettez-moi de le renommer StarBtnElement. StarbtnElement.ClassList.Remove (animé). Sinon, nous appelons Star.BtnElement.ClassList.Add (animate). Tout d'abord, la logique ne tient pas la route. Tout d'abord, voyons si cela fonctionne, puis nous en discuterons. Chaque fois que je clique, vous pouvez voir que mon émission est en vedette et je ne vois l'animation que lorsque je clique ici. Mais si je reviens aux étoiles, j'ai toujours cette animation. C'est parce que j'utilise ce ClassName ici. Laisse-moi l'enlever. Essayons maintenant de voir. Aucune animation n'est en cours pour le moment. Permettez-moi de revenir à la page d'accueil. Mais quand j'essaie de jouer le rôle principal, vous pouvez voir que l' animation est là. Pourquoi utilisons-nous cette logique ici ? Au moment où cette fonction s'exécute, IsStarred sera toujours à l'état précédent. Il suffit de le lire car le code est écrit ici. Notre émission est actuellement en vedette. Lorsque nous cliquons dessus, nous ne voulons lancer aucune animation. Lorsque notre émission est actuellement mise en vedette et que nous la désactivons, nous supprimons la classe d'animation. Nous ne voulions pas diffuser d'animation ici. Mais si notre émission n'est actuellement pas mise en vedette, cette autre condition se déclenche. Dans ce cas, nous ajoutons la classe animate pour fournir l'animation. De cette façon, en utilisant l'API DOM, en utilisant le cerceau UseRef, nous pouvons manipuler directement les noms de classe, disons impérativement en utilisant l'API DOM au lieu d' utiliser l'interface ClassName que nous fournit React. que nous avons pu ajouter de l'animation et nous avons découvert le nouveau hook appelé UseRef. Encore une fois, pour résumer rapidement, useRef peut être utilisé comme référence pour les éléments HTML natifs sous-jacents au cas où vous souhaiteriez accéder à l'interface DOM de cet élément, quelque chose comme ça. Ajoutons tout à la scène et engageons-nous. Tout d'abord, nous n'avons pas utilisé le package React Fade-In. Nous utilisons notre CSS simple pour obtenir un effet de fondu très similaire. Ensuite, au lieu d'utiliser uniquement ClassName pour animer l'élément étoile, nous utilisons le hook UseRef pour accéder à l'élément DOM sous-jacent. Ensuite, nous utilisons cette API DOM, la propriété ClassList de l'élément DOM pour ajouter et supprimer impérativement la classe d'animation afin d'ajouter ou de supprimer une animation, qui est définie dans notre composant stylisé. Maintenant, nous pouvons valider cela et, par exemple, ajouter une animation à FlexGrid. Supposons que vous ayez ajouté une animation en fondu à FlexGrid. Ajout d'une animation StarBtn, ou disons d'une animation d'échelle ajoutée à StarBtn. Génial. C'est tout pour le moment. Je te verrai dans le prochain. 88. 32 Déploiement sur les pages Github: Bonjour. Dans cette vidéo, nous allons enfin déployer Box Office. À la fin, nous aurons une URL accessible au public que nous pourrons partager avec nos amis. Dans le projet précédent, dans Tic Tac Toe, nous avons utilisé un service appelé Search.SH. Cette fois, nous allons essayer quelque chose de nouveau. L'hébergement que nous allons utiliser sera GitHub Pages. Pourquoi des pages GitHub et non une recherche ? Tout d'abord, ils sont très similaires, ils sont tous deux utilisés pour héberger des fichiers statiques, mais nous voulons explorer , essayer de nouvelles choses, voir des alternatives. À la fin, vous pourrez comparer ce que vous préférez, pages GitHub, la recherche, ou peut-être même autre chose. Allons-y. Tout d'abord, nous allons accéder à la documentation de Create React App. Si nous cliquons sur « Commencer », sur la gauche, nous pouvons rechercher la section des déploiements. Dans la section de déploiement nous pouvons rechercher des pages GitHub. Ce que nous allons faire, nous allons simplement suivre ce simple tutoriel étape par étape. La première chose qu'il nous demande faire est d'ouvrir package.json et d'ajouter un champ de page d'accueil pour votre projet. C'est ce que nous allons faire. Je vais simplement copier la page d'accueil, ouvrir package.json, n'importe où dans package.json, nous allons ajouter la page d'accueil. Mais ici, nous devons modifier certaines choses. Tout d'abord, mon nom d'utilisateur.github.io. Mon nom d'utilisateur doit être remplacé par votre nom d'utilisateur sur GitHub. Je vais prendre le mien. Mon application doit être remplacée par le nom de votre dépôt sur GitHub. Dans mon cas, ce sera une application de box office. Finalement, l'URL pour moi ressemblera à ça. Très similaire, cela doit être pour vous aussi. Je sauvegarde package.json, je reviens au tutoriel. Voyons l'étape numéro 2. Ensuite, nous devons installer un package appelé gh-pages, puis ajouter un script de déploiement à package.json. Commençons par installer la dépendance. Je vais simplement copier la commande. Je vais arrêter mon application , puis exécuter la commande d'installation. Pendant l'installation, voyons ce dont nous avons besoin pour empaqueter .json. Nous devons ajouter deux scripts supplémentaires, le déploiement et le pré-déploiement. Copions-les. Revenons à package.json. À présent, la dépendance est déjà installée. Passons aux scripts et, à la fin, ajoutons le prédéploiement et le déploiement. Nous n'avons pas besoin d'avantages copiés, nous les enregistrons et voici ce que nous voyons. Nous avons défini le script de déploiement , puis nous avons le prédéploiement. Disons que Npm est suffisamment intelligent pour comprendre que prédéploiement doit être exécuté avant le script de déploiement. Ainsi, chaque fois que nous exécuterons le script de déploiement, le prédéploiement sera exécuté. Predeploy créera l'application, la application sera produite dans le dossier de construction, puis nous précisons que déployer le dossier de construction ici, sorte que la version que vous voyez à la ligne 35 puis nous précisons que vous devez déployer le dossier de construction ici, de sorte que la version que vous voyez à la ligne 35 fasse référence à ce dossier de construction à la racine de notre projet. Ensuite, si nous allons plus loin dans le tutoriel, si vous déployez plutôt sur une page utilisateur GitHub, notez que ce n'est pas notre cas. La troisième étape consiste simplement à exécuter npm run deploy. Essayons de le faire. Nous pouvons maintenant faire npm run deploy. Voyons le résultat. Nous voyons d'abord npm run build, qui provient du script de prédéploiement, puis nous avons les gh-pages moins la commande build, et maintenant c'est publié, mais nous n'avons aucune URL, où devons-nous aller ? La page d'accueil que nous avons spécifiée dans package.json est en fait l'URL que nous devons visiter pour accéder à notre application. Copions cette URL. Ouvrons-le dans un nouvel onglet. Mais dès que nous naviguerons ici, nous verrons qu' il est introuvable, il s'agit de 404. Alors, que se passe-t-il ? Enquêtons. Si nous revenons à notre référentiel, voici une chose que je n'ai pas mentionnée précédemment, c'est que GitHub Pages n' est disponible gratuitement que pour les référentiels publics. Dans mon cas, le référentiel est privé. Il est marqué ici dans le coin supérieur gauche, Privé, donc pour utiliser GitHub Pages gratuitement, je dois m'assurer que ce référentiel est public. Passons aux paramètres, et dans les paramètres, nous allons modifier visibilité de notre référentiel de privé à public. Nous allons sur la page Paramètres, nous faisons défiler la page vers le bas, et ici, sous Zone de danger, nous modifions la visibilité du référentiel, nous le rendons public. Oui, je veux le rendre public. Oui, j'en suis sûr. Il peut également vous demander votre mot de passe, c'est très bien. Maintenant, mon référentiel est devenu public. Toutefois, si nous essayons à nouveau d'accéder à l'URL, elle sera toujours la même, introuvable. Nous devons indiquer à l'hébergement, nous devons indiquer à GitHub Pages que nous voulons publier notre application maintenant. Tout d'abord, comment fonctionne-t-il ? Si nous accédons à la page principale du référentiel ici, nous verrons deux branches désormais disponibles. Auparavant, il n'en était qu'un. heure actuelle, si nous cliquons sur ces deux branches, nous verrons la branche gh-pages ici. Si nous cliquons sur cette branche, vous verrez tous les fichiers que nous avons dans le dossier de construction. En gros, la commande de déploiement ici, ce qu'elle a fait, a utilisé ce dossier de construction, elle a créé une nouvelle branche dans notre référentiel et elle a téléchargé tous les fichiers du dossier de construction vers la branche gh-pages sur GitHub. L'hébergement de pages GitHub fonctionne de la manière suivante : il prend l'une de vos branches sur votre référentiel et tous les fichiers qui s' y trouvent sont hébergés sur les serveurs GitHub. De cette façon, nous sommes en mesure d'héberger des fichiers situés dans notre référentiel. Pour configurer correctement GitHub Pages afin de diriger hébergement vers cette branche gh-pages spécifique vers ces fichiers, nous devons à nouveau accéder à la page Paramètres de notre référentiel. Sur la gauche, nous recherchons la section Pages, la page Pages, et nous précisons ici que, d'accord, source de notre déploiement sera déployée à partir d'une branche. C'est par défaut, c'est ce que vous devriez avoir pour le moment, et pour la branche, vous spécifiez qu'il héberger nos fichiers depuis la branche gh-pages. Nous cliquons sur « Enregistrer », et juste après le déclenchement du déploiement. Il vous faudra maintenant quelques minutes, une minute ou deux pour déployer tous vos fichiers depuis la branche gh de votre référentiel vers l'hébergement. Si nous accédons à Actions ici, dans l'onglet Actions de votre référentiel, vous verrez maintenant ce flux de travail s'exécuter. Si vous cliquez dessus, vous verrez la progression de votre déploiement. Une fois l'opération terminée, vous verrez une marque verte ici, cela signifie que votre application sera publiée ici, sous cette URL. Attendons que ce soit fait , puis je vous recontacterai. Il semble maintenant que notre application ait été déployée. Vous pouvez voir que tout est vert. Maintenant, cette URL est également apparue ici. Si je clique dessus, voici ce que je vois. Tout d'abord, mon application telle qu' elle était auparavant est disponible sous la même URL que celle que vous spécifiez dans la page d'accueil, sous la clé de la page d'accueil dans package.json. Mais si nous y accédons, nous voyons Not Found. Pourquoi ça ? Le fait est qu'il a été déployé mais pour une raison quelconque, il est indiqué qu'il est introuvable, et il provient certainement de notre application, car si nous inspectons le balisage, cela ressemble à notre application, ce que nous avons dans index.html, notre squelette. En public, nous avons ce squelette. C'est à nous. Nous avons la même tête, tout est pareil. Mais que s'est-il passé ? Le fait est que si nous revenons au tutoriel contenu dans la documentation de Create React App, il contient cette note intitulée Notes, sur le routage côté client. Le problème est que l'hébergement GitHub n'est pas vraiment configuré pour gérer les applications côté client, pour ne pas gérer les applications d'une seule page qui utilisent le routage côté client. Vous pouvez lire plus d'informations ici dans la documentation officielle. Nous allons utiliser quelque chose appelé HashRouter, de React Router. C'est l'une des solutions proposées ici. C'est ce que nous allons faire. Nous revenons à l'application, nous ouvrons le code source, App.jsx. Ici, nous utilisons BrowserRouter, qui est importé depuis React Router dom. Au lieu de cela, nous pouvons utiliser quelque chose appelé HashRouter, et c'est tout. Le reste se trouvera sur React Router dom. Nous n'aurons pas besoin de mesures supplémentaires pour cela. Pour comprendre ce qu'il fait, réexécutons d'abord le serveur de développement local, npm run start. C'est ce que nous avons maintenant. Tout d'abord, notre application est désormais préfixe /box-office-app, disponible sous le préfixe /box-office-app, quel que soit le préfixe que nous indiquons sur la page d'accueil du package JASON. L'application Create React est suffisamment intelligente pour comprendre que nous pouvons déployer sous le préfixe de l'application box office. C'est pourquoi il est conservé ici. Mais lorsque vous diffusez des applications sous préfixe, vous devez le considérer comme votre URL de base. Ce que je veux dire par là, si nous cherchons, émissions par exemple, ici, si nous passons la souris sur lire la suite, nous accédons à cette page /show/show ID. Lorsque nous pourrons être hébergés sur GitHub, notre URL ressemblera ceci, /box-office-app/show/show ID. Mais nous n' aurons pas ce préfixe, tout comme nous l'avons ici sur l'hôte local. Cela posera problème car sinon notre page ne sera pas trouvée. Ce que je veux dire par là, c'est que nous allons abord déployer l'application et vous la verrez vous-même, puis nous allons corriger cela en ajoutant un tout petit ajout à notre code existant. Je viens de réexécuter le script de déploiement. Il crée à nouveau mon application , puis publie à nouveau sur GitHub Pages. Si nous revenons au référentiel sous l'onglet Actions, nous verrons à nouveau un autre flux de travail s'exécuter. Nous attendons juste qu'il soit déployé, puis nous allons partir. Il est maintenant déployé. Revenons à l'application. Si nous revenons à notre application, nous verrons toujours « Non trouvé ». Mais si je rafraîchis, nous avons maintenant l'application. Ça a l'air parfaitement bien. Cependant, si vous regardez l'URL, nous avons maintenant ce hachage ici. Il sera utilisé pour gérer correctement routage côté client lors du déploiement sur GitHub Pages. Mais nous avons encore un problème que je viens de mentionner précédemment à propos du lien, propos de ce bouton Lire la suite. Si je clique sur ce bouton, vous voyez que nous naviguons vers /show/show ID. Nous n'avons pas le préfixe de l'application Box Office, et à cause de cela, nous avons 404. Pour résoudre le problème, nous devons d'abord comprendre pourquoi cela se produit. Passons à la lecture et au balisage. Ce seront des composants, des émissions, des cartes d'exposition. Ici, nous utilisons une simple balise d'ancrage qui pointe vers /show/show ID. C'est très bien, et cela fonctionnera. Cela fonctionnerait si notre application était diffusée sous l'itinéraire et non sous le préfixe. Nous devons régler ce problème d'une manière ou d'une autre. Une solution naïve consiste simplement à saisir manuellement le préfixe que vous avez ici. Cela fonctionnera, mais ce n' est pas une bonne solution. Nous devons d'une manière ou d'une autre résoudre automatiquement le préfixe que nous avons ici. React Router s'en charge. Dans le passé, nous avons remplacé le composant de lien que nous utilisions depuis React Router par cette vérification d'ancrage car nous n'avions pas vraiment besoin de ce composant de lien. Cependant, nous allons maintenant le récupérer à nouveau. Je vais importer le lien depuis React Router dom. Ensuite, au lieu d'une balise d'ancrage, je vais utiliser à nouveau un lien, une fois de plus. Au lieu de href, je vais spécifier to, et je vais laisser la cible vide et les attributs de relation. De cette façon, nous aurons toujours le même lien comme avant, mais cette fois, le composant lien de React Router dom s' occupera du préfixe. Il sera automatiquement renvoyé à l'URL correcte. Maintenant, réessayons d'exécuter le script de déploiement, redéployons l'application et voyons le résultat final. Je vous verrai une fois qu'il sera déployé. J'ai attendu encore une minute. Voici mon troisième déploiement qui vient d'être publié il y a une minute. Je vais revenir à mon application. Je vais me rafraîchir. Je cherche des émissions et maintenant, si je clique sur Lire la suite, mon URL a été correctement résolue car elle était maintenant gérée par la bibliothèque React Router. C'est ainsi que nous avons pu déployer notre application. Félicitations. Maintenant, revenons à notre code et validons tout. Tout d'abord, nous avons installé bibliothèque gh pages afin de la déployer sur GitHub Pages Le champ de page d'accueil du package JSON indique où exactement l' application sera déployée. Encore une fois, nous déployons le dossier de construction produit par la commande npm run build. Désormais, nous remplaçons également le routeur du navigateur par un routeur de hachage, car GitHub Pages ne gère pas correctement le routage côté client. Une façon de résoudre ce problème consiste à utiliser un routeur de hachage comme suggéré dans la documentation de l'application Create React. Ensuite, nous avons également remplacé une simple balise d'ancrage par le composant link depuis React Router dom, car nous devons résoudre le préfixe une fois notre application déployée sur GitHub Pages. Ajoutons le tout à scène et validons et, disons, déployons l'application sur GitHub Pages, utilisons HashRouter, utilisons un lien au lieu d'une balise d'ancrage native. Cool. Je pousse tout au master, je retourne dans mon référentiel au cas où pour m'assurer que tout est déployé. Ma dernière modification, il y a 10 secondes. J'ai une deuxième branche appelée gh pages. Chaque fois que vous exécutez npm run deploy, il met à jour les pages GitHub et les fichiers hébergés sur votre URL que vous pouvez utiliser pour les partager avec vos amis. Une autre chose simple que j'ajouterais ici est que nous pouvons réellement utiliser cette URL là où se trouve notre application. Visitons-le encore une fois. Oui, c'est bel et bien ici. Nous pouvons ajouter cette URL à la section À propos de la page du référentiel. Je clique sur le signe Paramètres ici. Sous site Web, j'ajoute le lien, je clique sur Enregistrer les modifications. Maintenant boum, il apparaît ici. C'est juste pour que vous puissiez accéder facilement à votre application à l'avenir. C'est tout pour le moment , à la prochaine. 89. 33 PWA (application Web progressive): Rebonjour. Dans la dernière vidéo, nous avons finalement intégré le box office à l'environnement réel. Cette fois, nous allons parler des travailleurs des services. Comme vous vous en souvenez, dans la toute première vidéo, lorsque nous avons créé ce projet , nous avions l' enregistrement des travailleurs des services, ainsi enregistrement des travailleurs des services, ainsi que le point d'enregistrement des travailleurs des services sur le registre et je vous ai dit que nous en reparlerons plus tard. Maintenant, c'est le moment. Ce technicien de service est nécessaire pour créer notre application, pour créer du box office sur une application Web progressive. Qu'est-ce qu'une application Web progressive ? Une application Web progressive est n'importe quelle autre application Web, tout autre site Web qui suit une liste de choses spécifiques et lorsque l' application DevUp du site Web remplit cette liste d' options, ce site Web devient une application Web progressive. Cela signifie que l'application est disponible hors connexion. L'application peut être installée comme véritable application de type mobile, vous soyez sur un ordinateur de bureau ou sur un appareil mobile. La question qui se pose est la suivante : quelles sont ces options qui font d'un site Web une application Web progressive ? Dans le navigateur Chrome, si vous accédez aux outils de développement Chrome, si vous développez cette section sur la droite, vous pouvez accéder à la section Lighthouse. Lighthouse est un outil intégré au navigateur Chrome. Cela nous permet d'évaluer les performances du site Web en mesurant sa vitesse, sa durée et quelques indicateurs différents. Ici, sous catégories, nous avons cette vérification progressive des applications Web. Allons-y, puis cliquez sur Analyser le chargement de la page, et voyons ce qui va se passer. Il ne faudra que quelques secondes pour auditer le site Web. Maintenant, nous avons presque tout vert, mais aucun de ces éléments ne nous intéresse vraiment. Si c'est le cas, vous pouvez facilement y aller une par une, développer différentes sections et lire ce qui peut être amélioré, ce qui peut être modifié. Peut-être n'avez-vous pas besoin de changer quoi que ce soit, mais tout en bas, vous aurez la section PWA, une application Web progressive. Une liste de choses que vous voyez ici est essentiellement ce que le site Web doit suivre pour devenir une application Web progressive. Tout d'abord, nous n' avons pas certaines choses ici. Notre application n'est pas installable, donc pour rendre notre application installable, nous devons introduire un technicien de service. Qu'est-ce qu'un travailleur de service ? Travailleur de service en fait, c' est plus facile quand je le visualise. Nous avons le site Web ici. Notre site Web ici sur la gauche. Ensuite, sur la droite, nous avons les demandes à venir. Juste comme ça. allons peut-être l'inspecter nous-mêmes. Nous allons donc accéder à l'onglet réseau et lorsque nous actualisons la page, nous voyons une liste de demandes. C'est donc notre navigateur qui demande au serveur de pages GitHub d'obtenir un index HTML, pour obtenir des fichiers CSS JavaScript depuis le serveur d'hébergement. Un employé de service n' est qu'un script. Il se trouve à l'intérieur du navigateur, quelque part à l'intérieur du navigateur, en dehors de notre agent de service d'application et, dans ce qu'il fait, il intercepte simplement toutes ces demandes, demandes sortantes et en fait quelque chose. Dans notre cas, le service worker ne sera qu'un proxy qui interceptera toutes ces demandes sortantes et les placera dans la mémoire cache du navigateur. Ainsi , lors de la prochaine consultation de ces fichiers, au lieu de les laisser passer, service worker utilisera le stockage en cache récupérera toutes ces demandes, tous les fichiers récupérés précédemment à partir du stockage en cache, et les diffuser sur notre page Web. De cette manière, notre application peut être disponible hors ligne, ce qui signifie que quelle que soit la demande envoyée, technicien les interceptera. Il vérifiera le cache et si ces demandes sont présentes dans le cache, elles seront traitées à partir du cache par un technicien de service. Pour résumer rapidement, un technicien de service n'est qu'un script installé quelque part dans le navigateur. Il s'agit simplement d'un proxy qui intercepte les demandes sortantes du navigateur. Quelque chose comme ça. Si nous revenons à notre application, nous voyons que nous avons un fichier JS de service worker ici. agit du script lui-même, du service worker lui-même, qui sera exécuté dans le navigateur, en dehors de notre application. Ce fichier que vous voyez ici se trouvera quelque part dans le navigateur. Mais la question est de savoir comment y faire face. Comment pouvons-nous réellement faire quelque chose avec ça ? Avant de pouvoir répondre à cette question, nous avons une boîte de travail ici. Quels sont-ils et si nous regardons dans le package Json, nous avons de nombreuses dépendances entre les boîtes de travail. Ce ne sont essentiellement que des bibliothèques qui nous permettent d' écrire facilement de la logique dans un script de service worker. Vous pouvez voir que ce script a été généré automatiquement par Create React et que la logique qui est écrite ici intercepte simplement toutes les demandes et les place dans le stockage en cache. Nous n'avons pas vraiment besoin d' y penser beaucoup. Nous n'allons pas écrire ici notre propre logique pour le service worker, nous allons utiliser la logique existante, et cela suffira à tout mettre en cache . La boîte de mots n'est qu'un ensemble de fonctions que nous importons et utilisons pour y parvenir. Comme ce fichier a été généré par l'application Create React, nous n'allons pas le modifier, il ne nous intéresse pas. Encore une fois, ce sera suffisant. Maintenant, nous avons également un enregistrement des travailleurs des services. Pour faire comprendre au navigateur que nous voulons utiliser ce service worker JS d'une manière ou d'une autre, nous devons l'enregistrer dans le navigateur, car si nous voulons simplement placer dans notre application, rien ne se passera. Nous devons donc enregistrer ce technicien dans notre application et cet enregistrement du technicien a deux fonctions ici. La première fonction s' appelle register, qui a été exportée à partir d'ici, et la seconde fonction s'appelle unregister. Encore une fois, toute cette logique est générée automatiquement par Create React, et elle sera à nouveau suffisante pour notre cas d'utilisation. La fonction d'enregistrement enregistrera le service worker JS lorsque notre application s'exécute et la fonction de désenregistrement annule l'enregistrement du service worker existant dans notre application. Si nous regardons dans l'index jsx, nous avons ici tout saisi en tant qu' travailleurs des services à partir de l'enregistrement des travailleurs des services. Cela signifie que sous objet d' importation d'enregistrement des travailleurs des services, nous avons deux fonctions : enregistrer et désenregistrer et tout le temps, c' était en fait une désinscription pour nous parce que nous n'étions pas intéressés par un travailleur de service. Pour enregistrer un technicien de service, nous devons appeler la fonction d'enregistrement. Cependant, si vous utilisez register, il fonctionnera à la fois dans les environnements où vous allez développer en local et lorsqu'il sera déployé en direct exemple pour l'hébergement de pages GitHub. Mais comme elle utilisera la mise en cache et que la stratégie de mise en cache est agressive, cela signifie qu'elle mettra tout en cache . Je suggère donc vérifier d'abord si nous sommes actuellement dans le développement local, nous ne voulons pas appeler cette fonction point et registre. Mais si nous sommes dans un environnement réel, alors oui, s'il vous plaît, en appelant la fonction de registre. Comment pouvons-nous vérifier cela et comment pouvons-nous enfin voir comment cela fonctionne ? À l'intérieur de l'application, nous avons accès à quelque chose appelé process.env. Il s'agit simplement d'un ensemble de variables d' environnement auxquelles nous avons accès. Les variables d'environnement sont des variables définies globalement par l'environnement dans lequel notre code s'exécute. Essayons d' enregistrer le fichier de console process.env, et si je tape point, j' ai intellisense ici, j'ai node ENV. Si je passe la souris dessus, vous pouvez voir qu'il a trois valeurs potentiellement différentes : développement, production et test. Mais dans notre cas, nous allons quand même annuler, connectez-vous pour voir. Disons l'ENV actuel, et pour l'instant, nous allons toujours le désenregistrer. Je vais exécuter un serveur de développement local, et je vais également corriger ce problème non défini provenant ESLint, car la protestation s' exécute du côté JS du nœud, non du JavaScript qui s'exécute dans le navigateur. Nous devons donc faire comprendre à ESLint que nous exécutons comprendre à ESLint que nous également dans l'environnement node.JS, pas seulement dans le navigateur. Node true, ce nœud vrai, nous ferons comprendre à ESLint que nous sommes actuellement dans un environnement Node JS. Cela ne fera rien sauf que cela supprimera simplement cette erreur. C'est ça J'exécute mon application localement. Si je passe à la console, je constate que l'environnement actuel est synonyme de développement. Ce que je vais exécuter la commande de construction ici pour créer une version de production ce nœud variable ENV sera défini au moment de la construction. Ainsi, lorsque nous utilisons un serveur de développement local, s'agit d'une version de développement. L'application est construite, mais juste sous le capot, on ne le voit pas. C'est pourquoi nous voyons le nœud ENV réglé sur développement, car il s'agit notre version de développement et, encore une fois, cette variable est définie pendant la construction. Lorsque nous exécuterons la commande de construction, le nœud ENV de notre application sera réglé production et nous pouvons réellement utiliser cette variable pour enregistrer ou désenregistrer le service worker. Essayons de le faire. Nous allons ajouter une condition simple ici. Si process.env.node ENV est égal à la production, dans ce cas, veuillez appeler service d' enregistrement et vous enregistrer. Cool. Essayons maintenant de redéployer l'application. Une fois qu'il sera déployé, nous verrons comment tout a changé. On se voit là-bas dans une seconde. Rebonjour. Notre application est maintenant déployée. Voici mon premier flux de travail de déploiement. Maintenant, nous revenons à notre application, et si nous l' actualisons, quelque chose a changé. Tout d'abord, nous avons cette icône d'installation dans la barre de recherche, mais nous allons la toucher dans une seconde. Nous sommes intéressés par l'onglet Application ici. Si nous allons dans la section Service Worker ici, nous avons maintenant service-worker.js. Ce fichier service-worker.js a de nouveau été enregistré par cette fonction de registre importée à partir du fichier ServiceWorkerRegistration. C'est la fonction de registre, cliquez sur « service-worker.js », qui est disponible sur le box-office-apps/service-worker.js. C'est Register, ce technicien de service dans le navigateur lorsque l'on a accédé à notre application, et maintenant ce service worker est en cours d'exécution, ce qui signifie qu'il est actif, qu'il intercepte toutes les demandes sortantes et les met en cache dans le navigateur. Vous pouvez voir que si je l'actualise à nouveau, mes fichiers, par exemple, cet index HTML, sont servis par ServiceWorker, tout comme le reste des fichiers ici. Laissez-moi « Videz le cache et rechargez le matériel ». Fais-le encore. En fait, rien n'a changé, mais l'application est toujours diffusée par ServiceWorker. Si je ne me trompe pas, c'est quelque part dans le stockage en cache ici. Vous pouvez le voir dans la section cache sous l'onglet Application. Sous Stockage en cache, vous pouvez maintenant voir où se trouve la zone de précache, les fichiers qui sont stockés dans le cache. Juste comme ça, on peut faire fonctionner le phare. Commandez à nouveau et voyez ce que nous avons actuellement pour la liste de contrôle progressive des applications Web. Allons-y Nous sommes en train d'auditer mon application. quelques secondes, nous allons tout en bas, et nous voyons maintenant que l'application Web progressive est désormais installable et n'est pas vraiment optimisée. Eh bien, c'est en fait optimisé, mais nous n'avons qu'un point ici. Manifest n'a pas d'icône masquable, mais nous allons corriger ce problème dans la vidéo suivante lorsque nous allons personnaliser l'icône, le nom de notre application et le reste de quelques éléments. Pour l'instant, nous pouvons voir que notre application est installable. Cette icône que nous voyons ici dans le coin supérieur de la barre de recherche, nous pouvons cliquer dessus et installer notre application comme s' il s'agissait d'une application native. Si vous utilisiez un appareil mobile, la fenêtre contextuelle s'affichera également une fois que vous aurez accédé à votre application pour appareil mobile. Vous aurez la fenêtre contextuelle indiquant que vous pouvez réellement installer ce site Web en tant qu'application. Si vous cliquez sur « Installer », le site Web sera ajouté à votre écran d'accueil comme s'il s'agissait d'une application native. Maintenant, si je reviens à mon bureau, j'ai cette application appelée Create React App Sample. heure actuelle, il porte un nom étrange car c'est ce qui est spécifié dans le fichier manifeste que nous allons personnaliser dans la vidéo suivante. Mais le fait est que maintenant c'est une application, elle est installable. Si je clique dessus, vous pouvez voir que maintenant il ne s'ouvre pas dans un navigateur. Il s'ouvre dans sa propre fenêtre comme s'il s'agissait d'une véritable application native. Cela fonctionnera très bien comme cela fonctionnait auparavant. C'est plutôt cool. Vous pouvez voir qu'il a effectivement ouvert ce nouvel onglet dans le navigateur. C'est le problème avec les applications Web progressives. Idéalement, vous ne devriez rien ouvrir dans de nouveaux onglets, mais vous devriez utiliser l'onglet actuel et utiliser uniquement, disons, une page pour la navigation sans utiliser de nouveaux onglets. Mais encore, nous avons maintenant l'application qui fonctionne comme une application native. Tout cela a été réalisé en utilisant ServiceWorker, qui nous a donné la liste de contrôle verte pour une application Web progressive. Pour résumer, une application Web progressive n' est qu'une application Web qui suit une liste d'éléments spécifique. Par exemple, elle doit disposer d'un service worker, l'application doit utiliser une certaine mise en cache pour pouvoir être disponible hors connexion. Ensuite, il doit également être diffusé à partir du protocole HTTPS et quelques autres éléments que vous pouvez trouver dans Lighthouse. Essayons de voir à nouveau. Qu'est-ce qu'on a d'autre ici ? Plusieurs onglets sont en cours d'ouverture. Laisse-moi le rafraîchir. Qu'est-ce que tu veux ? Analysez le chargement de la page. Revoyons rapidement la liste. Dans la liste, nous avons, laissez-moi voir, la couleur du thème, écran de démarrage personnalisé configuré, une icône tactile cette balise d' affichage spécifique et ce manifeste dont nous allons nous occuper très bientôt, un employé de service. Toutes ces choses rendent un site Web, application Web progressive, aussi simple que cela. Une fois de plus, un technicien de service enregistré en tant que proxy dans le navigateur pour intercepter la demande est au cœur de tout cela. Ce n'est que grâce à un technicien que nous avons pu réaliser cette section installable ici. Notre application est désormais installable et est désormais disponible hors ligne. Je pense qu'il était assez clair ce qu'est exactement une application Web progressive, ce qu'est un service worker et comment tout fonctionne approximativement. Enfin, revenons à notre application et validons les modifications que nous avons apportées. abord, nous avons édité Eslintrc, afin de pouvoir utiliser le process.env sans avertissement ni erreur, et nous avons vérifié. Si nous sommes au stade de la construction, veuillez utiliser ServiceWorkerRegistration.register. Cela enregistrera ce fichier service-worker.js dans le contexte du navigateur. Cool. Validons ces modifications. Activez le technicien de maintenance dans l'environnement de production. Je mets à jour mon dépôt GitHub, et c'est tout pour le moment. Dans la vidéo suivante, nous allons aborder problème que nous avons vu dans Lighthouse Il sera donc 100 % vert. On se voit là-bas. 90. 34 Fixer l'URL de base pour résoudre correctement les images sur les pages Github: Salut. Dans la dernière vidéo, nous avons créé cette super application Web progressive appelée Box Office. Mais voici un problème que j'ai oublié et il s' agit à nouveau de l' URL de base de notre application. Si vous l'avez remarqué lorsque vous recherchez des émissions spécifiques et qu'elles n'ont pas d'image, nous essayons d'afficher cette image introuvable au format PNG. Cependant, tous nos fichiers sont diffusés sous le préfixe de l'application Box Office sur l'hébergement de GitHub Pages. Mais cette image ne peut pas être chargée car vous pouvez voir qu'elle est toujours 404 car elle n' existe pas sur le chemin que nous avons essayé de charger. Nous n'avons pas précisé le préfixe. Comment pouvons-nous réellement résoudre ce problème ? Si nous revenons à notre application et que nous cherchons une image introuvable, nous la spécifierons comme ça. Juste un chemin spécifique statique. Mais puisque nous avons le préfixe, nous devons le comprendre d'une manière ou d'une autre. Une façon de résoudre ce problème est qu'au lieu d' utiliser l'image dans le dossier public, nous pouvons la placer dans le dossier source, puis l'utiliser comme s'il s'agissait, exemple, d'un module. Ensuite, il sera traité par configuration Webpack sous-jacente et le chemin de base sera automatiquement résolu. La même chose que nous l'avons fait avec balise d'ancrage et le composant de lien. Au moins, l' idée est la même. Je vais juste déplacer l'image introuvable quelque part vers, disons, le dossier de la bibliothèque, l'image PNG introuvable. Maintenant, au lieu de référencer l'image PNG introuvable partout, je vais simplement importer une image introuvable de la bibliothèque, une image PNG introuvable. Peut-être que je vais la nommer source d'image introuvable et je vais juste la spécifier comme ça. Ensuite, je copierai cette importation et effectuerai la même importation partout. Voici également ce que je viens de faire à l'intérieur du casting. Ici, laissez-moi voir le bon chemin. Nous revenons en arrière d'un dossier, second dossier, d'une bibliothèque, d'une image PNG introuvable. Nous spécifions la source d'image introuvable, la même manière que nous le ferons dans la grille d'affichage. Importer une source d'image introuvable à partir de. Nous revenons en arrière, bibliothèque, image PNG introuvable, source introuvable, et pareil. Enfin, nous allons le faire dans ShowMainData. Source d'image introuvable dans la bibliothèque, image PNG introuvable. Maintenant, essayons de redéployer l'application et voyons comment cela se reflétera exactement dans notre code final. Je vous verrai dans une minute une fois ce code déployé. L'application a maintenant été déployée avec succès. Revenons à notre application. Maintenant, actualisons la page. Notre dernière recherche était « Bonjour ». Nous le cherchons à nouveau. Cette fois, nous voyons également «  non trouvé ». Pourquoi ça ? Le problème est que notre image actuelle, notre image précédente, est fournie par Service Worker. Il n'a pas été mis à jour. Il est servi à partir du cache, ce qui signifie que nous devons vider le cache pour voir les mises à jour. Je vais cliquer avec le bouton droit sur le bouton Actualiser dans le coin supérieur gauche et cliquer sur « Vider le cache » et « Recharger ». Je peux également accéder à l'onglet Application, accéder à Stockage et cliquer sur « Effacer les données du site ». Cela effacera tout le cache du navigateur spécifiquement pour ce site Web. Permettez-moi de cliquer sur « Effacer les données du site ». Ensuite, je me rafraîchis. Ensuite, je cherche « Bonjour ». Cette fois, notre demande a été résolue avec succès. Vous pouvez voir qu'au lieu de l'URL réelle, nous voyons cette image de données en base 64. Qu'est-ce que c'est ? Encore une fois, comme notre image nous a été présentée par l'application Create React, la configuration Webpack sous-jacente s'en est chargée. Dans la documentation de l' application Create React, il était mentionné quelque part que si la taille de l'image est inférieure au seuil spécifique, au lieu de traiter le fichier et de le diffuser dans le dossier public, par exemple traiter le fichier et . L'image est convertie au format base 64, puis disons en ligne, cette longue chaîne représente notre image, non pas sous forme de fichier, mais sous forme de chaîne. C'est plutôt cool. Maintenant, tout semble bon jusqu'à présent. Dans la vidéo suivante, comme promis, nous allons apporter une touche finale à l' application. Nous allons utiliser des icônes personnalisées, des noms personnalisés, donc notre application sera parfaite. On se voit là-bas. 91. 35 touche finale: Salut. Dans cette vidéo, nous allons enfin apporter la touche finale à notre application. Nous allons créer des icônes, nous allons modifier les titres pour que l'application soit enfin parfaite. Allons-y Mais avant de le faire, validons les modifications que nous avons apportées dans la vidéo précédente. Dans la vidéo précédente, comme vous vous en souvenez, nous avons résolu notre problème avec l'image. Ajoutons rapidement tout à scène, puis validons le tout en disant « image introuvable déplacée du public » ou simplement en déplaçant l'image introuvable vers la source, puis en l' important au lieu de la diffuser depuis un dossier public. C'est long, mais ça vaut le coup. Ensuite, je pousse le tout à maîtriser, et revenons enfin à nos icônes. Tout d'abord, nous devons choisir une icône que nous allons utiliser dans l'onglet ici. Si nous revenons à l'invité que nous avons pour le Box Office, nous avons ici cette icône en forme d'argent que j'ai préparée pour nous. Nous pouvons simplement télécharger cette icône ici. Je vais le placer dans le dossier Téléchargements. Ensuite, nous devons générer un ensemble d'icônes que nous allons placer dans le dossier public. heure actuelle, nous avons ces icônes React de base que nous pouvons désormais remplacer, mais nous devons d'abord générer cet ensemble d'icônes. Habituellement, ce que vous feriez, vous choisissez d' abord l'icône que vous souhaitez utiliser. Cela peut être le vôtre, par exemple. Il n'est pas obligatoire d' utiliser celui-ci en particulier. Si vous avez le vôtre, n'hésitez pas à l'utiliser. Nous allons sur RESOURCES.md. Ici, en bas, on retrouve ce générateur de favicon que je nous ai laissé. Nous allons sur cette page. Nous cliquons ici, nous téléchargeons l'image que nous voulons utiliser pour le jeu d' icônes. Nous téléchargeons. Dans le dossier Téléchargements, nous avons maintenant ce favicon_io. Il est archivé. instant, je vais tout extraire dans un dossier. C'est l'ensemble d'icônes que j'ai finalement. Nous n'allons pas utiliser tout cela. Nous allons réutiliser ceux qui se trouvent déjà dans le dossier public. Je vais juste ouvrir ce dossier public ici. Au lieu du logo192 de React, je vais simplement utiliser celui que j'ai ici. Je le copie. Je change le nom. Je supprime le précédent. Je renomme celui-ci. Alors je ferai de même avec ce logo. Je le supprime. Je déplace celui-ci ici, de la même taille. Je lui donne le même nom. favicon sera complètement remplacé. C'est ça Tout est prêt maintenant. Si nous allons sur manifest.json, nous référençons ici toutes ces icônes. Ces icônes seront utilisées lors installation de votre application sur l'écran d'accueil. Quoi que vous spécifiiez ici, ce fichier manifeste indiquera à Progressive Web App d' utiliser ces informations. Par exemple, si nous spécifions ici l'application React comme nom abrégé, c'est ce que les utilisateurs verront lorsqu'ils ajouteront votre application sur l'écran d'accueil. Nous n'avons pas de nom long pour notre application. Nous allons simplement utiliser Box Office pour nom abrégé et Box Office pour le nom normal. Les icônes restent ici, mais si nous revenons à notre application et si nous nous souvenons notre précédente exécution pour Lighthouse, nous avons eu ce problème avec l'icône masquable. Voyons une fois de plus ce que nous avions exactement là. Encore une fois, je lance Lighthouse Outdate. Cela prend quelques secondes ici. Nous allons tout en bas et nous voyons que notre application est installable. Tout va bien, mais nous n'avons pas d'icône masquable. Nous allons ici. savoir plus sur les icônes masquables, cliquez ici. Il s'agit d'un nouveau format. En gros, il suffit d'ajouter une autre icône à manifest.json et spécifier qu'elle aura pour but d'être une icône masquable. Nous pouvons utiliser cet éditeur Maskable.app pour convertir une icône existante en icône masquable. Peut-être allons-nous le faire rapidement. Dans le coin droit, je clique sur le bouton Télécharger, je spécifie notre icône. Maintenant, ça ressemble à ça, mais je voulais avoir, disons, un fond blanc, pour que notre icône masquable ressemble à ça. Cool. Ce sera notre icône masquable. Cela réglera notre problème avec cette liste de contrôle dans Lighthouse. Nous cliquons sur Exporter. Disons que ce sera la taille maximale. Nous téléchargeons. Afficher dans le dossier. Ce sera une icône masquable que nous allons placer dans le dossier public. Je le déplace ici, et maintenant nous devons spécifier cette icône masquable. Celui-ci se trouve dans mon manifest.json et dit que maskable_icon.png, les noms doivent correspondre, sera de type, laissez-moi voir. C'est où ? Où se trouvent ces informations sur les icônes masquables ? Ici. Il aura un but masquable. Nous revenons ici, nous précisons le but masquable. Nous économisons. Ça y est. Désormais, notre application sera incroyablement belle partout, avec nos propres titres, avec nos propres icônes. Déployons tout à nouveau. Attends, excuse-moi. Je me suis trompé de chemin. Au début, je voulais tout déployer. Npm run deploy. Attendons maintenant quelques minutes, et je vous verrai une fois l' application déployée. L'application a été déployée avec succès. Revenons à l'application et voyons le résultat final. Avant de le faire, avant d' actualiser la page, nous allons simplement vider à nouveau l'espace de stockage pour effacer tous les caches, ce que nous avons enregistré dans le navigateur, vider le cache et actualiser. Maintenant, vous pouvez voir que nous avons notre icône personnalisée ici, des titres personnalisés. Tout est maintenant utilisé comme nous l'avons spécifié dans le fichier manifeste. Vous pouvez en fait cliquer sous l'onglet de l'application ici sur Manifest et voir différentes informations sur votre application. Maintenant, voyons à quoi cela ressemblera lorsqu' il sera ajouté à l'écran d'accueil. Dans l'une des vidéos précédentes, lorsque nous avons ajouté l'un des techniciens de service, lorsque nous l'avons enregistré, nous avons ajouté notre application à l'écran d'accueil. Cependant, vous pouvez voir qu'il n'a pas été mis à jour ici. Exécutons-le et d' abord, désinstallez-le et réinstallez-le. Ce que je vais faire, c'est juste cliquer sur trois points ici. Cliquez sur Désinstaller Créer un exemple d'application React. Vérifiez la marque. Effacez également les données de Chrome. Maintenant c'est fini. Je vais retourner à mon application dans le navigateur, et je vais l' installer une fois de plus. Installez Box Office. Installer. Maintenant, boum. Je reviens à mon écran d' accueil, dans mon cas, c'est un ordinateur de bureau. Maintenant, j'ai mon application Box Office, qui ressemble à n'importe quelle autre application sur mon ordinateur. Si je clique dessus, tout est pareil. Je dirais que c'est ça. Maintenant, vous créez cette incroyable application qui fonctionne hors ligne, qui est installable, qui fonctionne avec les différentes données dynamiques des API. Tu as appris beaucoup de concepts. Je dirais que vous avez considérablement amélioré vos connaissances sur React avec celui-ci, mais maintenant c'est tout. Mais avant de terminer celui-ci, validons toutes les icônes que nous avons ajoutées. Je vais tout ajouter à la scène. Je vais tout engager. Disons que des icônes personnalisées ont été ajoutées et que le fichier manifest.json a été mis à jour. Transmettons le tout à la branche principale afin que les modifications soient reflétées dans le référentiel GitHub. Ça y est. Félicitations pour celui-ci. Dans la vidéo suivante, nous résumerons exactement ce que nous avons appris grâce au Box Office. On se voit là-bas. 92. 36 Résumé: Hé, ouais. Dans cette vidéo, nous allons résumer tout ce que nous avons appris jusqu'à présent dans Box Office. Nous avons maintenant cette incroyable application Web progressive, qui fonctionne hors ligne, qui est installable, qui fonctionne avec une API, et qui a l'air cool, n'est-ce pas ? Passons peut-être à l'historique de nos validations et parcourez-le rapidement. Tout d'abord, en tant qu'outil, disons un standard pour créer du box office, nous utilisons Create React App, qui utilise la configuration sous-jacente du pack Web, que nous consommons en utilisant le package react-scripts. Vous savez maintenant ce que sont les scripts de réaction. Vous savez maintenant ce qu'est l'application Create React, ce qui signifie que vous savez comment travailler avec Create React Boilerplate. Nous avons également utilisé Prettier et ESLint, mais ce n'est pas nouveau. Vous connaissez déjà ces outils. Voyons voir. Nous avons découvert React Router car, comme vous le savez, par défaut et React, nous n'avons aucune solution intégrée pour le routage dans notre application. React est une question de rendu, mais il ne s'agit pas d'une navigation aussi simple que cela. C'est pourquoi nous avons utilisé une bibliothèque appelée React Router pour naviguer dans notre application. Voyons voir. Ensuite, après React Router, nous avons ajouté différentes fonctions pour travailler avec des données dynamiques, pour travailler avec des API. Nous avons utilisé l'API de navigateur intégrée appelée « Fetch ». Pour récupérer des données depuis l'API, nous avons créé de nombreuses fonctions réutilisables que nous utilisons dans notre application, et elles semblent très simples. Nous gérons tous les additifs potentiels à l'intérieur des composants en cas de problème Nous gérons correctement les erreurs en utilisant blocs try-catch à l'intérieur de nos composants. Nous avons également appris que si nous voulons récupérer des données lors du montage du composant, lorsque nous effectuons des interactions sur la page, au lieu d'utiliser « UseEffect », nous pouvons utiliser une bibliothèque de récupération de données. Dans notre cas, nous avons découvert la bibliothèque React Query, qui nous aide à interroger des données lorsque le composant monté ou lorsque nous effectuons une recherche sur la page. Vous connaissez maintenant les bibliothèques de récupération de données. bibliothèques de récupération de données sont une solution dans les applications React modernes. Il existe des méthodes recommandées pour travailler avec les données, car à mesure que votre application se développe, vous aurez de plus en plus d'exigences. bibliothèques de récupération de données nous aideront à gérer tout cela facilement. Maintenant que j'ai également mentionné « useEffect », vous savez maintenant ce que fait « useEffect ». « UseEffect » nous permet d'exécuter fonction d'effet secondaire Lorsque quelque chose change à l'intérieur d'un composant, nous avons un tableau de dépendances dans useEffect. Laissez-moi le trouver ici dans le code. Nous avons ici toute une série de dépendances, et lorsque quelque chose change dans le taux, si la valeur change, nous exécutons cette fonction d'effet secondaire. Sans oublier que nous avons également créé nos propres crochets personnalisés en plus de « useState », « useReducer » et « useEffect ». Ces crochets personnalisés sont comme tous les autres crochets, mais avec une logique supplémentaire. Vous savez maintenant que si vous devez créer une logique réutilisable pour les Hooks intégrés, il vous suffit de créer un Hook personnalisé et y placer toute la logique. Finalement, il devient réutilisable. Nous avons également travaillé avec le stockage des navigateurs, nous avons travaillé avec le stockage de session, nous travaillerons avec le stockage local. Vous savez que vous pouvez désormais conserver les données dans le navigateur. Bien entendu, cela ne remplace pas une base de données. Mais si vous devez conserver d'une manière ou d'une autre des informations telles que l' entrée de recherche ou les préférences de l'utilisateur, vous pouvez très bien utiliser ce stockage. Voyons voir ce que nous avons d'autre ici ? Revenons à l'historique des validations. Ici, nous avons également créé ces pages dynamiques. Cela fait également partie de React Router mais vous connaissez maintenant le concept de pages dynamiques. Vous créez un modèle ou un squelette, puis vous récupérez un paramètre dynamique à partir de l'URL Dans notre cas, il s'agissait d'un identifiant d'affichage. Donc, si je cherche une émission, je vais afficher la page à l'intérieur de l'URL. Nous avons un identifiant d'affichage que nous saisissons dans le composant, Nous avons un identifiant d'affichage que nous saisissons dans puis nous utilisons cet identifiant d'affichage pour récupérer des données. De cette façon, nous pouvons obtenir des pages dynamiques. Vous connaissez maintenant ce concept. Voyons voir ce que nous avons également ici ? Encore une fois, « UseQuery » à propos des données de requête, logique initiale différente avec des crochets personnalisés, c'est ce dont nous avons discuté, nous avons également installé des composants stylisés. Une solution d'exécution CSS et JS pour styliser les composants. Vous pouvez maintenant décider ce qui vous convient le mieux. Utilisez des composants stylisés ou quelque chose de très similaire, ou utilisez une méthode traditionnelle avec des fichiers CSS. Parce que maintenant vous connaissez les inconvénients, vous savez maintenant quels sont les avantages et c'est vous qui déciderez de ce que vous allez utiliser. Personnellement, je préfère la manière traditionnelle de styliser les applications et je ne suis pas vraiment un grand fan du CSS et du JS. Nous ajoutons également cette animation qui s'estompe en remplacement du package que j'ai mentionné, React-Fade-in. Je n'en ai parlé qu'une seule fois, mais je n'y ai pas beaucoup insisté. Nous avons besoin de moins de dépendances dans nos applications. Moins de dépendances, mieux c' est, car vous devez gérer moins de choses. Je pense que c'est logique, et vous vous en tiendrez à cette règle à l'avenir, car ce sera pour votre bien. Nous avons également découvert les applications Web progressives. Qu'est-ce que la Progressive Web App ? Il s'agit simplement d'une application Web qui suit liste d' éléments spécifiques. Par exemple l' application doit disposer d'un fichier de service, elle doit être diffusée via HTTPS, elle doit disposer de ce fichier manifeste, et lorsque l'application, le site Web, répond à toutes ces exigences, elle devient une application Web progressive. C'est comme un site Web titré dont le titre est Progressive Web App. L'application est devenue disponible hors connexion grâce à un technicien de maintenance. Vous savez maintenant que Service Worker est un script qui s'exécute quelque part dans le navigateur, en dehors des contextes de nos applications, et qui transmet par proxy toutes les demandes, toutes les demandes sortantes, et fait quelque chose avec elles. Dans notre cas, nous utilisons Service Worker pour mettre en cache toutes les demandes sortantes. L'application fonctionnera hors connexion une fois installée quelque part sur l'écran d'accueil. À la toute fin, nous avons ajouté nos propres icônes personnalisées en utilisant le [inaudible] que je génère et que j'ai partagé avec vous, mais cela n'a pas vraiment d'importance Vous pouvez utiliser n'importe quel générateur, mais le est que vous pouvez maintenant voir le flux complet, la façon dont l'application créée de zéro au déploiement, en passant fait est que vous pouvez maintenant voir le flux complet, la façon dont l'application est créée de zéro au déploiement, en passant par le style et les modifications futures. Quelque chose comme ça. Félicitations, vous avez fait du très bon travail. Pour l'instant, c'est tout. Je te verrai dans le prochain. 93. Qu'est-ce est la base: Bienvenue dans la nouvelle section. Nous allons parler de retour en solution pour notre projet final. Chaque fois que nous construisons une application d'une seule page afin de communiquer avec la base de données, nous créons normalement notre propre serveur AP I ou utilisions un serveur existant. modernes, applicationsmodernes,de petite ou moyenne taille ne sont pas nécessairement en arrière et à partir d'os nus eux-mêmes la plupart du temps, mais cela dépend du type d'application. Ce ne serait pas bien si on avait une sorte de couche d'obstruction autour de l'arrière ? Et donc nous n'avons pas besoin de le configurer nous-mêmes et de se concentrer davantage sur l'application ? La base de feu peut nous aider à y arriver. Il est appelé comme une solution de service qui nous donne la couche d'abstraction autour du dos et il le fait. Encore plus Firebase est Emma Bile et Web Platform, qui est construit sur Google Cloud Platform. Cela signifie qu'il peut être utilisé avec n'importe quel service cloud Google. A partir de maintenant, nous n'avons pas besoin de nous soucier de créer notre propre fichier de maintenance de base de données AP I hébergeant tout est déjà là et nous attendons. Donc, dans notre code, au lieu d'envoyer une demande à un A P I pour récupérer des données. Nous utiliserions juste une bibliothèque qui a déjà des fonctions assez bien pour nous. Comme obtenir ce document par I t. Et cette fonction interagira avec la base de données. Il a vraiment le temps de chanter le soutien et des requêtes plus rapides. Et il est également bien documenté, ce qui est vraiment important à comprendre. Bachir. Qu' est-ce que la base de feu est dans la prochaine vidéo, mais passera par les services de base de pompiers et nous allons essayer les évaluer. On se voit là-bas. 94. Aperçu des services Firebase: Hey, explorons rapidement Fire Base et ses services. Pour cette vidéo, j'ai ouvert le tableau de bord basé sur le feu de notre projet final Ici. Nous pouvons surveiller et gérer tous les services que nous utilisons dans un projet Firebase. Nous pourrions gérer plusieurs APS. Il peut y avoir plusieurs AP tour, et qui partageront la même base de données. Ou si nous avions des applications Android, IOS et Web, nous pourrions tous les gérer à partir d'un seul tableau de bord sur la gauche. Barre latérale à l'intérieur. En cours de développement, vous pouvez voir une liste des services principaux Firebase. Allons-y un par un. Une syndication. Grâce au service, nous sommes en mesure de nous connecter et d'authentifier les utilisateurs à travers nos applications. C' est vraiment cool parce que, disons que si nous regardons avec Google sur le site Web et plus tard, nous regardons dans l'application Android avec le même compte, les données seront les mêmes. Il y a beaucoup de signes et de méthodes différents disponibles pour nous, et le fait est que tous sont configurables. C' était juste quelques clics. Ce service est terminé. Il a intégré un système de messagerie qui gère toutes les vérifications et les résignations de courriels. Nous avons seulement besoin que vous personnalisiez le modèle à partir de l'e-mail. En outre, il prend en charge la vérification SMS, ce qui est également vraiment cool. Puis va la base de données. Firebase a à base de données demandé pour maintenant magasin Fire et Riel base de données temps. Ils sont tous deux basés sur Jason aucune base de données sans suite avec prise en charge des mises à jour en temps réel. Quelle est la différence et laquelle utiliser ? Cela dépend de nombreux facteurs, mais voici trois différences clés. Tout d'abord, modèle de tarification Fire store est facturé par opération. Lire, écrire, supprimer ou mettre à jour. Ce n'est pas bon pour les écritures de données à haute fréquence La base de données en temps réel a plus adapté pour cela car il est chargé pour le stockage et la bande passante, ce qui est le cas d'utilisation parfait pour quelque chose comme une application enfant. Deuxième requête. Fire Story nous donne des requêtes plus avancées et composées par rapport à la base de données en temps réel Donc la base de données en temps réel a vraiment mauvais constructeur de requêtes, mais il est assez bon pour ne pas gérer les structures de base de données compliquées. Troisième structure, ils sont tous les deux basés sur Jason Fire Store a des documents, des collections et des sous-collections, qui rendent la base de données plus robuste. La base de données en temps réel n'est qu'un grand objet Jason. C' est pourquoi il a un soutien très bizarré et la plupart du temps nous avons besoin de normaliser un k une donnée en double pour notre projet. Nous allons utiliser la base de données en temps réel parce que nous aurons beaucoup d'opérations Faried et d'écriture. Et nous n'avons pas besoin de requêtes complexes. Si ce n'était pas une application de chat, j'aurais culminé le magasin Fire car il a des requêtes plus sophistiquées et une structure de base de données . En outre, nous ne sommes pas limités à utiliser sur Lee une base de données. Nous pouvons combiner à la fois le magasin incendie et la base de données en temps réel en une seule application. Ensuite, nous avons du stockage. Rien de trop spécial. Par ici. Ici bulle Porter, images utilisateur et fichiers audio Firebase hébergement ici. Nous allons déployer notre site web. Il ne prend en charge que les fichiers statiques. Donc, si nous avons une application de rendu côté serveur, cet hébergement ne fonctionnera pas. fonctions cloud dans notre application ont également été en mesure d'écrire personnalisé retour et d'informer hors serveur dernières fonctions cloud qui peuvent être appelées à partir de l'intérieur de la couche. Nous allons en déployer un seul qui enverra des notifications aux utilisateurs. Nous parlerons plus de serveur dernier quand nous entrerons dans la machine sujet. Lauren, obtenez un outil incroyable qui fournit des utilitaires d'apprentissage automatique tels que la reconnaissance d'image et les autres. Mais malheureusement, il n'est disponible que pour IOS et Android APS en bas. Nous avons d'autres services. Elles sont toutes complémentaires et utilisées pour la surveillance et l'analyse des applications déployées. Nous pouvons gérer les performances de notre site Web, vitesse à laquelle il baisse et d'autres mesures. Nous pouvons même intégrer Firebase Analytics, qui est essentiellement Google Analytics, mais enveloppé comme un service Firebase et au fond nous avons limité les services pour engager les utilisateurs pour notre projet. Nous n'utiliserons que la messagerie cloud Firebase qui nous permettra d'envoyer des notifications en temps réel aux utilisateurs si le navigateur a pris en charge. Et c'est fondamentalement tout. C' était un aperçu de haut niveau au large de la cheminée. Mais qu'en est-il de la sécurité ? Est-ce assez sûr ? Nous allons découvrir que dans les prochains médias vous voir là-bas. 95. Sécurité Firebase: Hé, voyons comment Firebase est sécurisée. Puisque nous n'avons pas de code côté serveur, nous allons accéder à la base de données du côté client. Comment on va exposer des données sensibles ? Oui et non. Dans les bases de données de cheminée sont accessibles via l'euro public. C' est une partie du conflit. Disons que nous avons des données dans la base de données. Nous avons public votre el Non. Un aussi. Et si Random Person essaie d'accéder à l'Ural et que nous n'avons pas protégé la base de données, cette personne peut obtenir toutes les données, qu' elles soient publiques ou non, pour empêcher l'accès non autorisé, leurs règles de sécurité. Ces règles définissent comment les données peuvent être consultées et par qui. Cela signifie que le niveau de sécurité dépend de la façon dont les règles de sécurité sont rédigées. C' est une bonne pratique de regarder vers le bas la base de données par défaut, puis il suffit de règles. Comme nous écrivons des règles de sécurité de code s'appliquent sur Lee à vos clients. I Si nous écrivons backend personnalisé avec des fonctions cloud, ces règles ne s'appliqueront pas lorsque l'application grandit. Certaines personnes ont du mal à écrire des rituels de recherche. Pour cette raison, ils utilisent des fonctions cloud et effectuent eux-mêmes des serveurs lors de la validation. Il en va de même pour le stockage en nuage. Nous avons des gens qui sont malades et des règles par défaut. stockage est accessible uniquement par les utilisateurs connectés. la plupart des cas, cela fonctionne bien. Mais cela ne signifie pas que si nous téléchargeons une image que nous voulons partager, cette image sera verrouillée. Chaque fichier téléchargé peut avoir une Europe publique. tout C' est toutpour la sécurité. J' espère qu'il a été complet et concis. Maintenant, qu'en est-il des prix ? Firebase est-elle gratuite ? Je vais le découvrir dans la prochaine vidéo. On se voit là-bas. 96. Tarification de Firebase: Voyons si on a besoin de payer quelque chose pour utiliser la base de pompiers. Quant à l'extérieur, il y a deux plantes disponibles. Spark and Blaze plan étincelé est complètement gratuit et il est livré avec quelques limitations. Le plan de la police est un modèle payant comme vous allez. Les deux ont des généraux très bizarres et même si vous êtes abonné au plan Blaze, à moins que votre application ait beaucoup d'utilisateurs actifs, vous ne paierez rien pour nous pour vous assurer que nous ne serons pas facturés plan Spark est correct. Cependant, avec les dernières mises à jour de votre Fire Base et Google Cloud afin d'utiliser les fonctions cloud , nous devons avoir un plan de flamme activé pour notre projet. Mais ne vous inquiétez pas, mais nous y reviendrons quand nous commencerons avec les fonctions cloud. Jusque-là, plan déclenché est notre choix Pour plus de détails, s'il vous plaît naviguer à la page de prix pour Avala tout vous-même. D' accord, je suppose que c'est tout ce que je voulais couvrir pour Firebase en production. Dans la vidéo suivante, nous finaliste a commencé à construire notre projet. On se voit là 97. Aperçu du projet: Bienvenue dans la nouvelle section. Tu as fait une pause ? Parce que maintenant je vais vous montrer à quoi ressemblera notre projet final quand nous nous engageons pour la première fois sur le site. Mais nous verrons la page de connexion. D' ici. Nous pouvons continuer soit avec Facebook ou Google. Choisissons Google. Ensuite, je vais choisir par deuxième compte et puis je suis dans l'application. Donc, à gauche, je peux voir que le conseil crée de nouveaux fonds de chat et liste des salons de chat disponibles sur la droite. Si je clique sur l'un ou l'autre des salons de discussion, je verrai ses messages et quelques autres choses que nous couvrirons juste dans une seconde. Commençons par le tableau de bord, donc si je clique dessus à partir d'ici, je peux gérer mon compte. Donc, en haut, je peux voir que maintenant je suis connecté à Google, et je peux également associer mon compte à Facebook. Donc, si je clique sur un lien vers Facebook, il m'invitera à entrer mes identifiants de phrasebook si nécessaire. Et en ce moment, je suis connecté à Phrasebook. Cela signifie que la prochaine fois que je regarderai avec Facebook pour acheter l'application, je serai lié à ce compte. Je vais finir avec le même compte, alors j'ai un surnom et je peux éditer à partir d'ici. Donc, si je clique sur le bouton Modifier, je pourrai le changer. Donc, changeons-le un peu, et si je clique sur sûr, il sera mis à jour. En outre, je peux éditer mon compteur si je clique sur Sélectionner un nouvel avatar, et si je choisis cette image, je pourrai l'ajouter un peu sur l'état de développement. Et puis je vais cliquer sur un uploadé et mon Al Atar sera mis à jour. Et à partir d'ici, je peux aussi me déconnecter. Ensuite, nous avons créé un nouveau bouton de chat. Donc, nous allons spécifier dans le nom de l'Europe, disons whoa et la description va être Whoa ! Si je clique dessus, il apparaîtra ici, et la salle de chat sera complètement vide pour l'instant. Donc, sélectionnons le premier salon de chat car il est déjà rempli avec certains messages. Alors qu'est-ce qu'on a ici ? Donc, à chaque message, si on l'a dessus, on peut voir ça comme bouton. Il vous montrera combien aime ce message particulier moitié. Donc, si je clique dessus, je vais supprimer orteil comme si je clique à nouveau comme sera ajouté à ce message. Et aussi, nous pouvons voir si cet utilisateur est en ligne ou hors ligne. Donc, si nous l'avons sur ce cercle, nous pouvons voir que cet utilisateur était hors ligne ce jour particulier à ce moment particulier. Et voici mon compte. C' est pourquoi je suis actuellement en ligne. Aussi, auriez-vous ici si nous cliquons sur le pseudo utilisateur Global Sea Motile fenêtre avec son d'une voiture . C' est le nom complet Membre depuis cette date. Donc, quand cet utilisateur a rejoint l'application et aussi nous pouvons contrôler l'autorisation d'administrateur de cet utilisateur si nous sommes actuellement un administrateur de ce groupe, nous allons jeter un oeil à l'autorisation d'administrateur juste dans un instant. Alors qu'est-ce qu'on a d'autre ? Donc, tous les messages sont divisés en dates. Ils sont regroupés par dates. Donc, vous pouvez voir aujourd'hui j'envoie ce message est hier il y avait ces messages et donc un aussi nous avons pagination off. Le message est que cela signifie que nous ne réduisons pas tous nos messages de la base de données. Lorsque nous voyons le chat une charge seulement, disons 15 messages. Et puis lorsque nous cliquerons sur charger plus, nous verrons plus de messages en cours de chargement dans notre application. Bon, donc nous pouvons envoyer des SMS normaux à notre Tchad. Ensuite, nous sommes également en mesure d'envoyer des fichiers. Donc, si je clique sur le bouton de la pièce jointe, je verrai ce mortel. Ensuite, je clique sur télécharger. Je peux également sélectionner des fichiers normaux. Assim démange. Donc je vais sélectionner ce fichier, cette image, que je vais l'ouvrir. Il apparaîtra ici que je vais cliquer, envoyer au chat. Et comme vous pouvez le voir, si j'envoie un fichier normal, je tolère le charger en cliquant simplement sur ce votre sortie. Si c'est une image, elle sera affichée ici. Et si je clique dessus, je verrai l'aperçu. Et aussi, je vais avoir cette vue en bas d'origine. Et si je clique dessus, l'original sera ouvert dans le nouveau robinet. En outre, nous sommes en mesure d'envoyer des fichiers audio. Donc, si je clique sur ce bouton ici, l'enregistrement sera commencé et je peux le voir. Ici, cela signifie qu'il est actuellement enregistré dans mon micro. Donc, si je clique sur ce bouton une fois de plus, il va enregistrer mon message odio. C' était l'enregistrement juste en ce moment. Et je serai en mesure de le jouer si elle est supportée par le navigateur. D' accord, qu'est-ce qu'on a d'autre ? Donc, en haut, nous pouvons voir le nom de la chambre, nous pouvons voir le message diffusé. Et ce bouton bleu ici, ils sont liés, mais nous allons jeter un coup d'oeil juste dans un instant. Sur cela, nous pouvons cliquer sur les informations de la chambre pour voir la description de ce salon de chat. Et aussi, si nous sommes un administrateur de ce groupe, nous pouvons voir cet Aiken. Donc, si nous cliquons dessus, nous pouvons l'ajouter. Informations sur les chambres telles que le nom et la description. Donc, si je clique à nouveau sur le bouton d'édition, je peux pour n'importe quel nom que je veux. Et puis je suis capable de l'enregistrer, et il sera mis à jour avec succès. Bon, maintenant, Bon, maintenant, propos des messages diffusés. Qu' est-ce que c'est ? Laissez-moi d'abord vous montrer comment la permission d'admettre peut être contrôlée. Donc, laissez-moi réellement regarder dans ces applications à partir de mon téléphone, et je vais supprimer l'autorisation d'administrateur. Donc, en ce moment, je suis à l'intérieur de l'application, et vous pouvez voir que le statut a été changé. Et maintenant, je peux voir le noir vert. Bon, donc je vais supprimer l'autorisation d'administrateur pour ce compte que vous pouvez voir en ce moment. Alors, qu'est-ce que je vais faire ? Je vais cliquer sur mon profil et je vais cliquer sur la chambre de l'autorisation Admit, mais à partir de mon téléphone. Donc maintenant, j'ai supprimé la permission d'administrateur. Et maintenant, je ne peux avoir que ce bouton de notification et les informations de chambre. Bon, maintenant, je vais me donner une autorisation supplémentaire, et vous pouvez voir maintenant qu'il est mis à jour et tout est en temps réel. Alors que se passe-t-il ici ? Donc, tout d'abord ce bouton de notification, Donc, cela signifie que je veux m'abonner ou me désabonner des notifications que je recevrai de admet hors de ce salon de chat. Donc maintenant, je suis abonné. Et si je change d'avis, je serai sur abonnement, et je ne recevrai aucun message du tout. Alors, quelles sont ces notifications ? Ce sont des notifications en temps réel qui sont affichées par le navigateur sur l'appareil. Donc, ce sont ces autorisations ou notifications que si je clique sur ce fond, je peux voir les notifications ici et en ce moment elles sont autorisées. Alors que va-t-il se passer ? Permettez-moi d'envoyer une notification depuis mon téléphone à tous les utilisateurs de ce salon de chat. Donc maintenant, à partir de mon téléphone, je vais cliquer sur le message de diffusion ici. Je vais spécifier le titre et le message, puis je vais publier le message. Alors voyons ce qui va se passer. Donc je Steidl, je vais sélectionner, Disons sourds Web et pour le message, je vais taper bonjour du téléphone et puis publier un message. Et comme vous pouvez le voir maintenant, j'ai cette moitié web de cette pièce. J' aide bonjour de mon téléphone. Et aussi j'ai cette notification à l'intérieur des fenêtres. Alors quoi ? Cela signifie que si je suis actuellement sur le site, je recevrai ce type de notification que je peux fermer si je disais en dehors du navigateur ou si je ferme simplement le navigateur complètement. Et si je reçois une notification, laissez-moi en envoyer une autre et oui, je peux voir que j'aurai toujours une notification à l'intérieur des fenêtres ou à l'intérieur de votre système d'exploitation si elle est prise en charge. Donc, c'est ce que nos messages de temps riel de cette façon, vous ne pouvez pas si je vos utilisateurs de les engager . Donc, c'est à peu près tout sur notre application, beaucoup de choses à couvrir et je vais le rendre aussi complet que possible. Je pense que vous allez l'apprécier. Et je vais te voir dans la prochaine vidéo. Nous allons commencer. On se voit là-bas. 98. Des mises à jour d'application de chat se terminent ! !: Salut, les gars. Dans cette vidéo, je voudrais faire référence aux prochaines mises à jour de l'application de chat. Les deux projets, Tic-tac-toe et Box Office, ont été mis à jour, mais les mises à jour des applications de chat n'ont pas encore été publiées. Pour faciliter au maximum la transition entre les mises à jour de Box Office et l' ancienne version de l'application de chat , cette vidéo existe. Ce que nous allons faire, nous allons utiliser le modèle que j' ai préparé pour nous. Nous avons ce démarreur d'application de chat dans le référentiel. Le lien sera partagé avec vous dans les ressources, afin que vous puissiez y accéder. Vous vous retrouvez sur cette page, vous allez sur cette page, puis ce que vous devez faire, vous devez cliquer sur le bouton de code vert, puis vous cliquez sur « Télécharger le fichier Zip ». Ensuite, vous allez à l' endroit où vous avez téléchargé ce fichier zip, vous le décompressez. Je viens de récupérer ce dossier. Je l'ai mis en téléchargement, et voici le projet. Ensuite, je passe à VS Code. J'ouvre ce dossier en tant que projet dans VS Code. Tiens, celui-ci et je vois ça. Vous trouverez ici le projet de démarrage. Vous avez installé toutes les dépendances nécessaires , telles que le compilateur Sass, bibliothèque rsuite, les diversions sont importantes. Ensuite, nous avons installé le routeur React et la bibliothèque Firebase. ESLint et Prettier sont tous deux configurés ici. Tu n'as pas à t'inquiéter à ce sujet. Dans la source, vous avez des styles ici. Application de base avec React Router de l' ancienne version utilisée dans les vidéos des applications de chat. Tout est configuré, les styles ont été importés, tout est prêt. La seule chose que vous devez faire est d' abord d'initialiser Git ici. Vous tapez git init, puis vous ajoutez tout à stage, puis vous le validez. Juste après, vous devez associer ce nouveau projet Git à votre dépôt GitHub. Vous allez dans le référentiel GitHub, vous créez un nouveau référentiel, puis vous obtenez l'URL du référentiel, puis vous utilisez git remote, ajoutez l'origine et l'URL du référentiel que vous copierez lorsque vous créerez un nouveau référentiel ici sur GitHub. Juste après cela, vous devez installer des dépendances. Comme vous pouvez le constater, il n'y a pas de dossier de modules de nœuds. La seule chose que vous devez faire est de taper npm install, et toutes les dépendances répertoriées dans le package Jason seront installées. Après cela, vous êtes prêt. Vous devrez utiliser le script de démarrage en exécutant npm run start et poursuivre le développement. Le reste reste le même. Continuez simplement à regarder l'application Chat, et tout ira bien. C'est ça On se voit là-bas. 99. Échantillonnage du projet: Salut, bienvenue. moment, nous allons utiliser scuffled notre protection comme avant, nous allons utiliser Create Reactor app et pour créer dans votre projet, nous devons ouvrir le dossier de tout le monde pour mettre notre projet dans le terminal. Donc, à partir de mon terminal, je vais exécuter et p x créer réagir, puis le nom du dossier, qui va être l'application Tchad. Et puis je vais mettre utiliser NPM parce que j'ai filé installé sur mon système. Et maintenant, le projet de l'UE va être créé pour nous. Attendons que tout soit fait. D' accord ? On dirait qu'on a fini. Maintenant, ouvrons le code V. Et à partir d'ici, ouvrons notre nouveau dossier. Alors qu'est-ce qu'on a à l'intérieur comme avant ? Sous source, nous avons nos fichiers initiaux pour le paquet Jason. Nous avons nos scripts et ainsi de suite. Alors effectuons notre nettoyage initial afin que nous n'ayons pas besoin d'ap CSS. Ensuite, nous n'avons pas besoin de tout cela dans notre composant d'application. Donc, nettoyons comme ceci conduit à supprimer ce nom de classe, nous allons mettre juste Bonjour. Nous allons Tillett logo et importer pour nous. Oui. A déposé alors nous n'avons pas besoin AP Test GS que quatre index CSS. Eh bien, en fait, on n'en a pas besoin aussi, alors pour l'index ? Oui, supprimons le mode rue car nous recevrons des erreurs lorsque nous utiliserons d'autres bibliothèques. C' est tout à fait normal. Ensuite, supprimons Index CSS et commentons Service worker pour l'instant, juste comme ça, alors nous n'avons pas besoin de logo SVG. Nous n'avons pas besoin de mettre en place des tests et nous avons fini ici. Maintenant, qu'est-ce qu'on fait ? Nous allons installer d'autres dépendances, et nous les obtiendrons à partir du dossier Assets. Alors ouvrons ce dossier et ouvrons l'échafaudage. Doug Jason. Donc, à partir d'ici, nous allons copier des commentaires pour installer des dépendances. Copions donc la première ligne et mettons-la dans notre terminal intégré comme ça . Maintenant, pendant qu'il est en train d'installer, créons preacher et d'excellents fichiers de configuration. Donc, pour excellent, il va être, oui, la terre RC. Et pour le prédicateur, ça va être plus joli, RC, et nous allons aussi les copier de notre échafaudage au fichier Jason. Donc pour oui, penché nous avons celui-là. Mettons-le ici et sauvegardons-le. Et pour chaque année, nous avons celui-là. Alors, oui, peluches et les prédicateurs sont Don, ajustons notre script NPM. Alors copions tout ça et mettons-le à l'intérieur. Paquet Jason, à l'intérieur de cette section de script en bas, juste comme ça. Et nous avons aussi le script clair pour effacer le dossier de la facture. Alors juste avant que nous produisions notre bâti Let's Run et PM, Ron Clear comme un mort. D' accord, donc on en a fini avec les scripts. Quoi d'autre avons-nous à l'intérieur du fichier de dépliage de disque ? Nous avons une autre ligne pour les dépendances d'installation, ce qui est des notes. Ass sont costume réagir routeur et réacteur pour stupide. Copions-le. Et laissez-moi vous expliquer ce qui va se passer. Donc, pour notre système de style, nous utiliserons SAS avec vous. La bibliothèque nommée est ici, et nous pouvons jeter un oeil à notre costume si nous ne sommes pas à la hauteur de sa documentation officielle. Alors qu'est-ce qu'une bibliothèque Y ? C' est une bibliothèque qui nous donne déjà assez trouver des composants que nous pouvons utiliser. Et c'est fondamentalement tout. Nous verrons que lorsque nous commencerons à l'utiliser est assez simple, et cela augmente notre vitesse de développement. Tu verras ça. D' accord. Et chaque fois que nous voyons que notre costume n'est pas suffisant pour nos cas, nous allons utiliser dit Ok. Aussi, nous installons, réagissons routeur et réagissons Rotterdam Tout droit, donc c'est fondamentalement tout. Mais une chose à faire est également de copier ce dossier de styles pour notre projet. Alors, quel est ce dossier Styles ? Donc, il est livré avec Assad hors classes pré-définies. Donc, copions ce dossier. Donc je vais copier ce dossier. Ensuite, je vais ouvrir ce fichier dans ah, révéler dans l'Explorateur de fichiers, puis à l'intérieur des plaies. Je vais coller ce dossier de styles et jetons un coup d'oeil. Qu' est-ce qu'on a à l'intérieur ? Donc, nous avons notre fichier principal, qui est fondamentalement notre index CSS ou juste notre fichier principal pour les styles ici définirait , disons, vraiment quelques classes hors que nous allons utiliser. Il vous faudra regarder et eux Ils sont vraiment simples. Rien de trop compliqué. Ensuite, nous avons l'utilité et vous les couleurs d'installation que nous importons dans le Maine CSS. Maintenant, nous pouvons gérer nos fichiers. Donc, pour l'utilité ici, nous avons des classes qui sont un peu similaires aux classes d'utilitaires bootstrap, donc nous les utiliserons beaucoup dans notre code. Alors s'il vous plaît jetez-les un coup d'oeil. Ils ne sont pas si difficiles à gérer. Je n'ai pas de couleurs utilitaires. Ce sont essentiellement des classes pour les couleurs. Rien de trop spécial ici. Et puis nous avons override comme il SS. Donc, cette année, je bibliothèque sont sûrs qu'il est destiné aux applications de bureau. Donc, certains hors de leurs composants ne sont pas vraiment bon à afficher sur les appareils mobiles et de les ajuster pour les écrans mobiles. J' ai un peu modifié leur CSS, je remplace un peu leurs classes. Donc maintenant, ils ont l'air bien sur les appareils mobiles aussi. C' est juste pour faire tout bon. La police jette un coup d'oeil sur tout ça. C' est très simple. Assurez-vous juste de savoir ce qui se passe. Donc, à l'intérieur d'Abdel Gs, ce que nous devons faire, nous devons l'importer. Alors nous allons importer. Ah, nous sommes des styles CSS principaux juste comme ça. Et aussi, nous devons configurer notre costume et avancer. Donc, si nous naviguons vers leur site officiel et si nous allons commencer et si nous cliquons sur l'utilisation en Crète, réagir application d'ici, nous pouvons voir que nous devons également importer leurs solutions CSS par défaut copier cette ligne de code et mettez-le avant d'importer nos styles principaux comme ça. Alors maintenant, nous sommes prêts à aller avec notre conflit pour vous. Je Une chose à faire ici est de connecter notre projet pour obtenir de l'aide. Alors ouvrons le terminal intégré et engageons tous nos fichiers. Donc d'abord, on va tout ajouter à l'état de scène, et ensuite on va se faire engager. Disons que l'échafaudage est quelque chose comme ça. ce moment, nous allons ouvrir Teoh. On lui a un compte. Ensuite, nous allons créer un dépôt. Ensuite, nous nommerons son application de chat. Rendons-le privé, et nous allons créer un nouveau dépôt Juste après cela, nous pouvons copier cette commande en bas. Remettre à distance à l'origine. Copions celui-là et lançons dans notre terminal. Maintenant, nos fichiers locaux vont l'associer à ce dépôt distant et nous devons pousser nos modifications locales en ligne pour l'obtenir. Utilisons la moutarde d'origine push. Et maintenant regardons pour que tout soit déployé. Si nous actualisons la page, notre projet sera en ligne. Donc on a tout. Chraidi. Et dans la prochaine vidéo, nous allons commencer à construire. On se voit là 100. Créer et configurer et configurer le projet Firebase: Hé, dans cette vidéo, nous allons créer un nouveau projet Firebase et éditer notre application. Allons-y. Alors ouvrons Google. Et voici, tapons la base de feu. Alors ouvrons d'abord votre L et nous finirons sur la base de feu. Page web officielle. Puisque Fire Base fait partie de Google Cloud plate-forme, Google gère tout. Cela signifie que nous n'avons pas besoin de créer un nouveau compte. Si nous avons un compte Google, ce que tout le monde fait, alors nous allons associer notre compte Google à Firebase Project. Alors, cliquez sur Get Started et ici, nous cliquons sur Ajouter un nouveau projet. Ensuite, nous allons spécifier le nouveau nom du projet, qui va être chat application Web. Disons alors que nous allons cliquer sur Continuer. Désactivons ensuite Google Analytics. On n'en a pas vraiment besoin. Et attendons quelques minutes jusqu'à ce que notre projet soit créé. Ok, bien. On dirait que le projet est prêt. Continuons. Ensuite, nous finissons sur le tableau de bord de la base incendie. Donc, à partir d'ici, nous allons tout gérer. Et comme vous pouvez le voir, nous sommes actuellement sur le plan d'étincelle, donc cela signifie que nous ne serons pas facturés pour quoi que ce soit. Bon, maintenant nous devons ajouter notre application Web à notre projet Firebase. Cliquez donc sur ce bouton de paramètres, puis choisissez les paramètres du projet. Ensuite, ici en bas, nous verrons notre APS d'ici. Cliquez sur cette application de laboratoire, puis nous allons entrer le nom de notre application, qui va être, Disons, juste discuter et ne pas configurer l'hébergement firebase. Cliquez sur S'inscrire. Cela prendra également quelques secondes, et en ce moment notre application est prête. Cliquez sur, Continuer à conseiller. Maintenant, nous devons mettre en place des services que nous allons utiliser dans notre application. Donc d'abord, nous allons mettre en place la base de données. Alors, nous allons cliquer dessus. Et sur cette page, nous sommes en mesure de configurer soit le cloud fire Store ou la base de données en temps réel, alors assurez-vous de ne pas utiliser le cloud Fire Store. Vous utilisez une base de données en temps réel ici en bas, alors nous allons cliquer, créer une base de données et sélectionnons démarrer en mode verrouillé pour que toutes nos règles soient examinées vers le bas. OK, alors allons l'activer, et cela prendra quelques secondes juste pour créer une nouvelle base de données pour nous. Très bien, c'est fait. Maintenant, nous devons également configurer le stockage pour notre application. Alors, nous allons cliquer dessus et puis commençons. Il nous demandera des règles. Cliquez sur suivant. Ensuite, nous devons sélectionner l'emplacement pour notre stockage. C' est très important et cela influence vraiment cette vitesse, alors il suffit de sélectionner le plus proche de vous. Pour moi, c'est quelque chose, je suppose, avec l'Europe. Donc, je sélectionne Europe Ouest trois. Ensuite, je clique sur Dung et il faudra quelques secondes pour créer une nouvelle histoire pour nous. Attendons. Ok, parfait. On dirait que le stockage est prêt. Notre dernière chose est de configurer l'authentification pour notre application. Donc, nous allons cliquer sur l'authentification ici. Nous n'avons pas d'utilisateurs inscrits. Pour l' instant, cliquez sur Sign and Method, et à partir de là, nous pouvons voir tous les fournisseurs de signature que nous pouvons utiliser. Nous n'utiliserons pas d'e-mail, et le mot de passe utilisera uniquement Google et Facebook. Alors d'abord, nous allons cliquer dessus. Et puis nous allons juste cliquer sur activer juste comme ça. Donc, sélectionnons le support et l'e-mail, puis projetons le nom public face. Nous allons peut-être dire quelque chose comme le chat, l'application et nous allons cliquer en toute sécurité, et après cela, il va tout configurer automatiquement. On n'a pas besoin de s'inquiéter de quoi que ce soit. Google Sinan est déjà activé. Maintenant, qu'en est-il de Facebook ? Connectez-vous Donc, cliquez dessus. Et à partir de là, nous n'aurons aucune configuration automatique. Nous devons le faire manuellement. Donc, cliquez sur activer ici. Nous devons remplir APP, Idée app secret. Et nous devons l'utiliser. Rediriger votre l Alors que devons-nous faire à l'intérieur de Google ? Nous devons taper le développeur Facebook. Ensuite, on va aller sur Facebook pour les développeurs. Et ici sur cette page en haut, nous allons cliquer sur mon APS et à partir de là, nous allons cliquer sur Créer APP, permet sélectionné. Et ce nom de jeu va être quelque chose comme des graphiques juste tiré pleuré. Tout droit puis nous allons cliquer sur Créer l'application I d. Ensuite, nous allons effectuer la vérification de sécurité soumis et ah ont été application Facebook sera créé. Donc à partir d'ici ce que nous devons faire, nous devons aller aux paramètres, puis aller à base Et ici, nous allons trouver notre application I d et up secret. Appelons p app I d et puis le rythme ici. Ensuite, nous devons également obtenir notre secret d'application. Cliquons sur show et appelons-le ainsi et collez-le ici à l'intérieur de la base de feu. Et aussi nous devons ajouter ceci. Redirigez votre I ici, copions-le. Alors sauvegardons nos changements. Et ici, sous Prokes, cliquez sur plus Sign. Donc, quand nous cliquons dessus, nous devons sélectionner Facebook. Regardez et cliquez sur Configurer. Et puis nous devons sélectionner que nous pourrons nous connecter sur le Web, puis site votre l. Je ne sais pas. Mettez juste quelque chose qui n'a vraiment pas d'importance. En fait, non, on n'a pas besoin de ça. Cliquez sur les paramètres car nous avons déjà Facebook. Logan à elle C'était juste début rapide de l'équipe Facebook. Donc ici pour ces valides Rediriger votre autre nous devons ajouter ceci votre l que nous avons sur la base de feu . Alors assurez-vous juste qu'il est ici. Donc maintenant, il est édité. Cliquez sur enregistrer les modifications. Et maintenant notre application Facebook est prête. Alors sauvegardons ça. Et maintenant notre Facebook dans le configurer et nous configurons tout à l'intérieur du site Firebase . Maintenant, nous pouvons réellement l'ajouter à notre code. Revenons donc au code V et d'ici. Ouvrons d'abord notre terminal. On doit installer Global Seelye depuis la base des pompiers. Donc, pour cela, tapez NPM installer les outils Firebase Dash G et installez-les. Je l'ai déjà sur ma machine, donc je ne vais pas l'installer deux fois après ça. Quand nous avons ces outils de base de feu, nous devons taper la base de feu dedans et c'est tout. Après cela, il vous invitera. Autorisez-vous, veuillez remplir les instructions. Et après cela, quand j'exécuterai cette commande, je verrai cela voir la lumière dans le travail. Donc je suis prêt à continuer. Oui. Ensuite, j'ai besoin de sélectionner les services que je veux initialiser. Donc je n'ai besoin que de base de données. Donc, je navigue avec des flèches et je sélectionne avec de l'espace et aussi j'ai besoin d'hébergement Onley. Ces deux-là ne sélectionnent pas le stockage. Alors j'appuie sur Entrée puis je vais choisir d'utiliser un projet existant, puis je vais sélectionner l' application Web de chat que je viens de créer. J' ai sélectionné le fichier à utiliser pour les rouleaux de déchets ultérieurs. Faisons simplement entrer que ce répertoire public que je veux utiliser au lieu de public. Tapons construit et puis je veux configurer mon application en tant qu'application d'une seule page. C' est vrai. Alors, nous allons cliquer. Oui, et le HTML de l'index construit existe déjà, est-ce pas ? Oui. Je veux que tu l'écroules. D' accord, maintenant. La base de feu est associative. Disons que notre projet distant que nous venons de créer celui associé à notre projet local , nous pouvons voir Firebase Jason Fire Besar See qui contient notre projet I d que dans règles de base de données. Nous avons nos règles de base de données et à l'intérieur de Firebase Jason, nous avons notre description de projet, disons. Donc, pour les règles de base de données sont déployées à partir de ce fichier pour l'hébergement, nous avons le dossier public, qui est construit. Ensuite, nous avons ignoré les fichiers que nous ne déploierons pas sur l'hébergement firebase et réécrit également. Tu te souviens quand on a essayé de télécharger notre projet sur le hip-hop ? Donc, quand nous actualisons la page, nous n'avons pas été trouvés. Donc, c'est parce que nous avons une application d'une seule page et Firebase résout ce problème en écrivant simplement toutes les routes et en le configurant pour le rap d'une seule page. Nous n'aurons donc aucun problème avec cela. Bon, donc c'est tout. Maintenant, nous pouvons réellement installer la bibliothèque dans notre projet. Donc, pour cela, nous allons simplement taper PM install firebase. Et attendons que ce soit fait. Bon, nous avons Firebase installé comme bibliothèque. Maintenant, ce que nous devons faire sous le dossier source créons dans votre dossier que nous allons nommer MISC et ici nous allons créer un nouveau fichier firebase dot gs. Ici, nous allons configurer notre base de feu à l'intérieur de notre application. Donc, d'abord penser que nous devons faire nous devons retourner sur le site Web, puis revenir à nouveau aux paramètres du projet. Et si nous faisons défiler vers le bas, nous pouvons trouver ce conflit de base de feu. Alors copions ça. Et ici, nous allons créer un nouveau précieux disons, juste conflit constant et nous allons coller juste comme ça maintenant capable. Importez également les bibliothèques Firebase. Donc nous allons taper import fire base à partir de l'application Firebase. Il est important de ne pas importer à partir de firebase car il va importer toute la bibliothèque et toute la bibliothèque est vraiment, vraiment grande, et il ajoutera tous les fichiers à partir de lui. Donc, nous nous assurons que nous avons seulement importé l'application Firebase que ce que nous devons faire, nous devons appeler fire base dar initialize app et à l'intérieur Nous avons besoin de voter notre fichier de conflit Alors mettons venir épais. Et maintenant cela pour initialiser l'application retourne comme une application basée sur le feu d'instance. Donc, mettons-le dans un précieux nous allons l'assigner à, disons, juste l'application juste comme ça. Et nous sommes prêts à partir maintenant. En utilisant cette application précieuse, nous sommes prêts à accéder aux services Firebase comme jusqu'à ab abeilles natives, Fire store fonction, messagerie tout cela. Donc, mais c'est ce que nous allons faire dans la prochaine vidéo pour la façon dont nous sommes faits. La seule chose que je veux faire avant de terminer cette vidéo, je veux engager nos changements pour obtenir de l'aide. Alors oublions au point Ensuite, nous allons mettre, obtenir commit et nous dirons que le projet Firebase initialisé Quelque chose comme ça. D' accord, parfait. se voit dans la prochaine. 101. Créer des pages - Des routes privées et publiques: Hey, maintenant nous avons firebase initialisé dans notre projet. Commençons à construire le projet lui-même. La première chose que je vais faire, je vais ouvrir mon terminal et je vais exécuter et PM Run commencer à développer le serveur. Mais juste avant d'exécuter ce commentaire, je vais créer un nouveau fichier, qui est dot e n v point local et je vais le mettre dans le répertoire racine et ici rivales pacifier navigateur à aucun. Ceci est pour empêcher et PM Ron commencer à démarrer l'application instantanément à l'intérieur de mon navigateur. Donc je déteste vraiment ce comportement. Si vous aimez ça, ne faites pas ce navigateur. Rien. Donc maintenant je vais exécuter cette commande et j'ai besoin d'aller manuellement au navigateur et d'accéder à l' hôte local 3000. Donc ici, je vais voir le message bonjour que j'ai spécifié à l'intérieur d'Abdel Gs lorsque le risque a déplié le projet. Maintenant, ce que nous devons faire, nous devons définir nos pages au début. Mais nous n'avons pas initialisé réaction rotor lorsque le risque a déplié l'application afin permet de naviguer vers les togs d'index et ici pour initialiser le réacteur importera le rotor du navigateur de réagir routeur stupide et puis nous avons besoin d'envelopper notre composant d'application autour du navigateur, composant rotatif. Et maintenant, nous sommes en mesure de l'utiliser. Ok, bien. Allons-y. Teoh Abdel Gs et entendre quelles routes nous allons définir. Utilisons d'abord switch à la place. Hors de ça, Def. Donc je vais mettre l'interrupteur de réagir plus brutalement qu'à l'intérieur de l'interrupteur. Les gens définissent l'itinéraire. Et quelles routes devrions-nous mettre ici ? Eh bien, nous aurons quelques itinéraires à trouver, et l'un d'eux est la page de signature et la page d'accueil. Et le fait est que nous ne serons pas en mesure d'accéder à la page d'accueil tant que nous ne serons pas connectés à l'APP. Nous devons donc définir une sorte de truite privée qui ne peut être accessible que si nous sommes connectés . Donc, ce que nous allons faire la première chose que les gens font cela va créer un nouveau dossier sur les pages de nom accessibles aux ressources. Ici, nous allons créer deux nouveaux composants et qui représenteront nos pages. D' abord, ça va être un signe de page et elle est là. Je vais échafaudage et vous composant avec l'extension snipper. Et nous allons juste pour vous connecter comme ça. Ensuite, je vais créer un autre composant, Holmdel Gs et je ferai exactement la même chose. Et je vais nommer une maison juste maintenant Comment pouvons-nous définir ces lignes ici ? Nous pouvons mettre la route et ensuite nous pouvons mettre le premier signe pour que cette route soit définie. Mais qu'en est-il de la maison ? Comment pouvons-nous le rendre privé pour cela va créer un autre composant. Nous allons le nommer route privée et il imitera ce composant de route qui vient de réaction Router. Mais il sera amélioré et il vérifiera contre une certaine condition. Donc, sous plaies, créons de nouveaux composants de dossier Ici, nous allons mettre un nouveau fichier route privée juste comme ça. Donc, il imitera ce composant de route. Alors, comment est pacifier ce composant de route ? Quels problèmes avons-nous tracés ? Ce que les enfants font un chemin. Nous devons donc spécifier le chemin. Donc, pour la signature, ça va être juste la signature. Maintenant, à propos du soldat Rauer. Alors définissons comment nous allons l'utiliser. Donc, ce sera une route privée à l'intérieur. Nous devons verser un composant ou juste des enfants que nous voulons rendre. Ce sera notre page d'accueil comme ça et pour les accessoires. Nous devons également spécifier que nous allons rendre ce composant à juste slash. Ok, maintenant à l'intérieur de la route privée. Nous savons que tout ce que nous passons à ce composant voyagé privé en tant qu'accessoires sera en fait redirigé vers ce composant de route. Donc on va tout structurer et le mettre à l'intérieur. Disons les accessoires de route. Le seul bon que nous avons besoin d'en tirer est les enfants réels que nous voulons rendre. Donc, nous allons d structurer les enfants et tout le reste sera disponible sous les accessoires de route. Et nous devons verser une condition simple ici. Disons-le pour l'instant. Puisque nous n'avons pas de profil, créons simplement le taureau inestimable, disons le profil et mettez-le à faux. Et maintenant ce qu'on va faire, on va demander si notre profil est imbécile. Si nous n'avons pas de profil, alors nous allons revenir et vous composant que nous n'avons pas utilisé avant qu'il ne soit redirigé , qui provient également du paquet de rotor réactif. Et cette redirection sera essentiellement redirigée pour spécifier pass. Donc, il ne reçoit qu'un seul accessoire, qui est à et pour cela à spécifier. Donc, si nous n'avons pas de signe et de données. Si nous n'avons pas de profil, nous redirigerons vers la signature. D' accord. Assez simple. Maintenant, si cette condition n'a pas sa place, alors nous utiliserions normalement notre composant que nous passons en tant qu'enfants. Donc, au lieu de retourner ce def, nous allons simplement retourner la route du rotor réactif que quatre accessoires. Nous allons spécifier tous les accessoires que nous recueillons ici. Donc nous allons les étaler sur ce composant de route avec juste cette syntaxe et à l'intérieur des enfants passés verbaux comme ça. Et si nous le gardons, vérifions. Si cela a réellement fonctionné maintenant, si je vais essayer d'accéder à une barre oblique page d'accueil, je serai instantanément redirigé parce que nous avons toujours une fausse condition. Cela signifie donc que nous sommes toujours redirigés vers la page de connexion. Donc, si je dis que c'est trop vrai maintenant si je vais essayer d'accéder à la page d'accueil, je serai là. Alors, c'est ça. C' est comme ça que nous pouvons faire la route privée. De plus, lorsque nous sommes connectés, nous ne voulons pas voir la page de connexion. Nous voulons être redirigés aussi vers, disons, disons notre tableau de bord ou vers la page d'accueil. Donc ce qu'on peut faire, on va créer un autre composant que l'on nommera public public. Alors créons une route publique. Ne pas Oui, et nous allons en fait copier tout de la route privée. Et ici, renommons route privée en route publique. Et ici, la chose sera la prochaine. Donc, si nous avons un profil, alors nous allons être redirigés vers la page d'accueil. De cette façon, si nous sommes connectés, nous ne serons pas en mesure de voir la page de connexion où sera immédiatement redirigé vers la maison. Donc, la logique est un peu la même. Mais il est inversé maintenant comment nous pouvons réellement est jetable foule en fait de la même manière que nous avons utilisé notre privé je vais. Donc ici, au lieu de juste route sera pauvre Rauer public que nous importons à partir du dossier Components. Maintenant, nous n'avons pas besoin de cette importation à partir du routeur de réaction. Sauvegardons ça. Et en fait rien ne sera changé parce que nous n'avons pas de données pour le profil. Donc, c'est fondamentalement tout. C' est ainsi que nous sommes en mesure de gérer nos foules privées et publiques dans le routeur de réaction. Maintenant, engageons nos changements et finissons cette vidéo, donc nous allons tout mettre, puis nous allons envoyer notre message créé des routes publiques et privées pour le bon. Dans la vidéo suivante, nous allons commencer à construire la page de connexion. On se voit là-bas. 102. Page de déconnexion - Interaction avec Firebase: Hé, bienvenue dans cette vidéo, nous allons commencer à construire la page de conception. Allons-y. Avant de commencer. Je veux juste dire que nous allons utiliser le costume de réaction. Toi. Pourquoi la bibliothèque que nous avons installée ? On va l'utiliser beaucoup. Veuillez donc ouvrir cette documentation à l'étape suivante, afin que vous y ayez toujours accès. Alors allez à la page d'accueil, puis cliquez sur les composants. Et ici, sur cette page, vous pouvez trouver tous les composants que cette bibliothèque nous fournit à l'ouest. Il est très simple à utiliser, et ils sont tous pour la plupart intuitifs. Donc, disons que si nous allons au composant bouton à partir d'ici sur chaque page de l'entreprise, vous pouvez trouver beaucoup d'exemples et de cas d'utilisation différents. Et aussi, si vous cliquez sur montré la source, vous confiez comment ce composant peut être utilisé dans votre manteau. Vous pouvez toujours le copier et le coller. Et aussi, si vous avez seulement besoin de savoir quel composant reçoit comme accessoires, vous pouvez faire défiler vers le bas et vous confiez tous les accessoires possibles qui peuvent être transmis à ce composant particulier. Très bien, donc à l'intérieur de notre code, quand j'écrirai ce truc, je ne ferai pas référence Il peut être quelques fois, mais la plupart du temps, parce que c'est mieux intuitif. Je ne vais pas l'expliquer. Donc, si vous ne savez toujours pas ce qui va se passer, veuillez naviguer vers cette documentation. Bon, alors commençons. Donc, naviguons vers notre code et ouvrons la page de connexion. Et ici, nous allons commencer en premier, nous allons supprimer ce def, et nous allons mettre le composant conteneur de notre costume. Vous pourriez penser qu'il est très similaire à contester de bootstrap car il est conteneur ont jamais dans cette bibliothèque. Ce n'est pas le cas. Il nous donne juste l'affichage de Flex. Alors on va utiliser du grain. Et dans cette bibliothèque, grand est à peu près le même que dans Bootstrap. Mais contrairement à Bootstrap, il a un système de 24 colonnes. Contrairement aux bottes, laissez tomber avec 12 peignes. Bon, donc à l'intérieur de la grille, nous avons grandi et à l'intérieur de la rangée, nous avons une colonne juste comme ça. Donc, notre côlon va être santé hors de son maximum avec les appareils moyens. Donc, sur de très petits appareils, nous allons à pauvres vieilles 24 colonnes sur moyen et au-dessus. Nous allons mettre 12 maintenant, l'intérieur de cette colonne, nous allons mettre le composant de panneau, et cela nous donnera un peu de tapoter. OK, donc à l'intérieur on va mettre def. Et à l'intérieur de cette difficile définir âge à étiqueter qui dira, Bienvenue pour discuter en dessous, nous allons mettre Pitak qui dira, plate-forme de chat progressive quatre combats de repas, quelque chose comme ça. Bon, vérifions ça. Si je rafraîchis la page, je peux voir cet étrange arrière-plan bizarre. C' est parce que j'ai importé une colonne de notre costume Leap Carrousel. Je ne voulais pas ça. C' est un peu délicate lorsque vous utilisez Intel Essence externe assurez-vous d'être importé à partir de notre costume. Si je le garde maintenant, je peux voir que cela a réellement fonctionné. Cependant, notre texte n'est pas centré. Nous voulons le faire centrer afin que nous puissions utiliser l'une de nos classes d'utilitaires que nous pauvres à l'intérieur de l' utilitaire, comme le dit ici, et ils sont presque comme bootstrap, donc nous pouvons définir le nom de la classe, le centre de texte et il travail. Cependant, nous pouvons voir que si nous avons inspecté, notre composant n'est pas complètement centré sur de gros appareils. Cependant, sur mobile, c'est OK. C' est parce que lorsque nous appliquons ce système de 12 colonnes, notre élément n'est pas, disons tendre. Nous devons postuler. Décalage. Il est encore très similaire, comme dans Bootstrap. Donc, pour 12 colonnes, nous devons appliquer Décalage sur six colonnes avant. Donc on va mettre un décalage vide sur six colonnes. Et en ce moment, notre grand élément sera centré, Comme vous pouvez le voir de ce rembourrage ici. D' accord. Ça a l'air bien maintenant sous un Disney, si on veut mettre un autre def. Et ici, nous allons définir nos boutons, signer avec Google et se connecter avec Facebook. Donc d'abord, je vais mettre le bouton. Puis, comme accessoires, je passerai. Ce sera un bouton de bloc. Il enlèvera tout avec son parent. Ensuite, je mettrai la couleur, et je la mettrai en bleu. Et c'est tout pour l'instant. Donc à l'intérieur de ce fond, je vais verser le composant Aiken de notre costume, et comme je peux, je vais spécifier que je peux soutenir quatre Facebook comme ça. Et puis je vais mettre un texte simple, continuer avec Facebook, mais en majuscule et la même chose que je vais faire pour signer avec Google. Je vais spécifier une couleur verte. Et au lieu de phrasebook, je peux spécifier Google Aiken et ensuite continuer avec Google comme ça. Maintenant qu'est-ce qu'il y a de jeter un oeil ? Ok, ça semble bien, mais on veut ajouter une marge. Donc pour Disney, si nous allons mettre le nom de classe et la marge en haut trois, quelque chose comme ça. OK, ça a l'air bien. Maintenant, nous devons le rendre centré verticalement. Ou peut-être à une certaine marge aux éléments supérieurs. Donc ça a l'air plus agréable. Donc, pour ce grand composant, nous allons définir le nom de la classe, et nous allons mettre la marge en haut de la page. Donc, c'est la classe que j'ai définie dans un des fichiers utilitaires, donc elle donne juste beaucoup de marge aux éléments. Donc, si nous l'inspectons comme vous pouvez le voir, marge supérieure nous donne 150 pics d'autre. Bon, donc ça a l'air bien. Maintenant, qu'en est-il de la fonctionnalité ? Comment nous pouvons réellement gérer notre signature et enfin commencer à ajouter cette science Facebook et Google . Alors, que devons-nous faire à l'intérieur de Firebase gs où nous avons initialisé notre application ? Nous devons importer hors bibliothèque de la base de feu. Donc nous allons importer la base de feu comme ça. Ensuite, ici sous application, nous allons exporter const in available, qui va nommer juste au point et nous appellerons app dot off et cela nous donnera l'objet que nous pouvons utiliser pour interagir avec la base de feu. Alors gardons ça à l'intérieur de la signature. Nous allons définir nos gestionnaires pour l'événement sur clic pour les boutons. Donc, nous allons mettre d'abord, disons que Facebook se connecter, et puis je vais faire la même chose pour Google sur la signature Google et leur fonctionnalité est presque la même. Donc, je vais créer une fonction 1/3 que j'appellerai à l'intérieur sur la signature Facebook et à l'intérieur sur la signature Google. Donc, nous allons le nommer quelque chose comme se connecter avec le fournisseur et le fournisseur comme Facebook ou Google. Très bien, donc en tant qu'argument, il recevra ce fournisseur et ensuite nous ferons un peu de réflexion. Alors à l'intérieur sur Facebook, connectez-vous. Nous allons appeler, connecter avec le fournisseur et Rubble passer un fournisseur parlera un fournisseur de combat dans un instant et ici aussi signer avec le fournisseur maintenant comment nous pouvons réellement signer donc à l'intérieur de la signature avec fournisseur, nous peut simplement taper et importé à partir de notre fichier firebase divers cet objet hors que nous avons obtenu d'ici Si nous mettons juste point de l'intelligence. On peut voir beaucoup de choses qui se passent ici. Nous pouvons accéder à l'utilisateur actuel. Nous pouvons confirmer réinitialiser le mot de passe et différent. Si on tape la signature, on peut avoir différentes choses ici. Nous consignons avec e-mail et mot de passe avec numéro de téléphone avec pape jusqu'à redirection. Donc, beaucoup de choses qui se passent ici, nous sommes intéressés à signer avec pop-up et si nous appelons cela monté à l'intérieur, nous devons passer le fournisseur et il va être fourni que nous recevrons comme un argument. Donc, nous allons le mettre ici. Alors, quel est ce fournisseur ? Donc, cet objet fournisseur que nous devons importer à partir de, disons, bibliothèque firebase et il est statique. Donc, ce que nous devons faire ici, nous devons importer la base de feu à partir de Firebase slash AP à nouveau, il est important d'importer à partir de Firebase slash ap Donc ici, tant que fournisseur, nous allons passer le nouveau point d'authentification de point firebase facebook hors fournisseur et nous devons l'appeler il nous retournera et votre objet fournisseur que nous allons passer comme non documenté à dysfonctionnement et le même rebelle faire pour la signature Google. Nous allons mettre une nouvelle base de feu hors, mais cette fois Google off fournisseur juste comme ça. Qu' est-ce qui est vraiment associer ça ? Des gestionnaires avec des boutons. Donc, pour l'événement clic pour le modèle Facebook, nous allons mettre sur la signature Facebook et pour Google, nous allons mettre sur le clic sur Google, Se connecter comme ça. Très bien, ça a l'air bien. Maintenant, cette signature avec pop up si nous cependant, c'est une promesse. Donc nous devons l'attendre. Permet de convertir notre signature avec fournisseur dans une fonction de lavabo et d'attendre cette signature avec Pope up. Et puis mettons les résultats en résultat viable. Et consul regardons et voyons. Qu' est-ce que nous recevons, cependant, si je rafraîchis la page que j'ai ouvert conseil, alors je peux voir qui a répondu avec 400 Arkwright. C' est très bien. Cliquez sur Continuer avec Google, par exemple. D' accord, vous pouvez voir qu'il fait quelque chose, et maintenant je peux sélectionner un de mes comptes Google. Bon, choisissons l'esprit de mes comptes. Et maintenant, vous pouvez voir que j'ai des résultats ici. Donc, il est un objet qui a trois objets différents informations utilisateur supplémentaires afin que nous puissions voir que c'est notre nouvel utilisateur. Nous pouvons obtenir un email prénom, des idées différentes. Nous pouvons obtenir une photo si notre email est vérifié. Donc, ces données proviennent de Google et vous pouvez voir fournisseur. Je le calme à Google. Ensuite, nous avons des informations d'identification, différents jetons d'accès et ensuite nous avons un objet utilisateur. Donc, cet objet utilisateur représente l'utilisateur actuellement connecté. C' est général. Et à partir de là, nous pouvons comprendre si notre utilisateur s'est connecté. Nous ne le sommes pas. Nous parlerons de cet objet utilisateur en détail dans les prochaines vidéos. Donc maintenant ce que nous pouvons faire, nous pouvons réellement retourner à Firebase Weaken, Aller à l'authentification. Ici, nous pouvons recharger notre authentification. Disons de se connecter à la base de données. Et ici, nous limitons notre e-mail avec le fournisseur quand il a été créé et créé Utilisateur I d. Donc, tout d' abord, ce n'est pas une base de données. C' est comme une petite base de données à l'intérieur de cette bibliothèque d'authentification. Nous avons encore besoin de stocker nos utilisateurs dans la base de données. C' est juste pour suivre. Combien d'utilisateurs avons-nous connectés dans notre application ou quelque chose ? Très bien, alors maintenant modifions notre code légèrement et stockons notre utilisateur dans la base de données. Donc, tout d'abord, permettez-moi de mettre, essayer, attraper, de regarder par ici parce que nous travaillons avec des promesses et nous voulons nous assurer que nous gérons toujours les autres. Et en passant, juste pour avertir l'utilisateur que nous nous sommes actuellement connectés ou si nous avons des erreurs, nous pouvons utiliser le composant d'alerte qui vient de nouveau de notre combinaison. Donc si on a une erreur, on appellera alerte, et si on met un point, on verra qu'on peut avoir accès à des informations et des messages de succès et d'avertissement . Alors mettons-nous pour le message. Donc, comme un premier argument, nous allons mettre l'erreur ce message, et ensuite nous devons mettre la durée de ce message hors de ce message d'alerte. Donc, laissons médiocre pendant des secondes en millisecondes spécifiées. Et si on est connecté, on va mettre alerte. Disons le succès. Et puis nous allons mettre connecté avec nouveau temps éteint quatre secondes. D' accord. Ça semble bien. Maintenant, ce que nous pouvons faire avec ce résultat. Comme vous vous en souvenez, nous avons reçu un objet. Nous avons reçu des informations utilisateur supplémentaires et également reçu objet utilisateur. Maintenant, en vérifiant si des informations utilisateur supplémentaires sont votre utilisateur, donc si notre utilisateur est qui est actuellement en cours de signature, c'est un nouvel utilisateur va le stocker dans la base de données. Alors, comment peut-on faire ça ? Revenons à Firebase Thaci s ici. Nous allons importer une autre bibliothèque, qui va être Firebase base base de données slash pour interagir avec la base de données et similaire à off. Nous allons exporter la base de données const ap dot juste comme ça. Donc, sous cette base de données, précieux nous pouvons interagir avec la base de données. Savourez donc de l'intérieur de la signature, nous allons référencer la base de données, que nous importons de divers firebase. Alors on va mettre le point ici. Nous devons spécifier la référence, qui est fondamentalement chemin dans notre base de données sur le magasin rituel nos données. Donc, nous allons stocker nos informations utilisateur sous les profils barre oblique utilisateur i d. Donc, ouvrons l'interpolation de chaîne. Et en tant qu'utilisateur je d. Nous allons référencer point utilisateur Nous pouvons avoir l'affichage des e-mails, le nom retardé et beaucoup d'autres choses liées à cet utilisateur. Mais nous sommes intéressés par l'utilisateur I d. Donc cet utilisateur je vais être le même que cet utilisateur. Je suis à l'intérieur de la bibliothèque d'authentification. Donc, ce sera comme si nous créons un nouvel utilisateur. Il a été ajouté à l'authentification l'utilisateur I d est automatiquement généré, puis nous allons utiliser cet utilisateur I d pour stocker l'utilisateur dans la base de données. Bon, alors maintenant quand on a la référence, on peut mettre un autre point et à partir d'ici, on doit appeler la méthode SAT. Et comme vous pouvez le voir dans la description, il écrit des données dans cet emplacement de base de données. Donc, si je l'appelle ici, nous stockerons un objet parce que nous avons des méthodes de données adjacentes. Donc notre objet va ressembler à ceci. Nous aurons le nom et le nom va être le nom d'affichage de point utilisateur. Ensuite, nous aurons également créé à laquelle dira, lorsque le compte a été créé. Donc, pour mettre un horodatage approprié à notre base de données doit à nouveau utiliser un peu statique. Voyons la propriété qui vient de la bibliothèque Firebase. Donc, nous obtenons un rapport firebase dot base de données dot dot dot server l'horodatage, et il mettra l'horodatage désinfecté à notre base de données. Très bien, donc ce point dit renvoie aussi cette promesse. Donc, chaque fois que nous faisons quelque chose avec une base de données ou autre, nous interagissons avec n'importe quoi Très probablement, nous allons interagir avec les promesses. C' est pourquoi nous devons l'attendre et tout sera attrapé par ce bloc catch et l'utilisateur sera averti. D' accord, gardons tout ça parce que ça semble, vraiment beaucoup. Maintenant, nous allons cliquer sur, Continuer avec Google. Sélectionnez mon e-mail et maintenant je suis connecté. Mais il est en fait un vraiment étrange. C' est probablement parce que j'ai ce compte déjà ajouté ici, peut-être que vous me laissez traiter ce compte. Et maintenant, essayons encore une fois parce que nous avons besoin de recevoir une affaire. Bon, alors nous cliquons sur, continuons avec Google, puis nous allons sélectionner notre compte à nouveau. Et maintenant nous avons la permission refusée ce soir. Et nous n'avons pas ça pour mettre un point à son message. Mais la chose est que nous avons l'autorisation refusée et c'est parce que si nous ouvrons notre base de données, d' accord, allons cliquer, créer une base de données. , d' accord, allons cliquer, Ensuite, nous allons aux règles. Et ici, nous avons créé la base de données verrouillée par défaut. Donc, quoi que nous ayons essayé de faire avec la base de données, nous aurons cette autorisation ce soir parce que, comme vous pouvez le voir, nous avons lu et les droits ont été définis pour tomber pour tout ce qui est de notre base de données. Donc, pour éviter ce que nous pouvons faire ici juste avant de dire ces règles, nous allons dire ça pour les profils, et nous devons défier disons, esque EBA pour nos règles de sécurité. Et ce n'est pas cette façon standard de définir quelque chose avec la sécurité, mais il faut juste du temps pour s'habituer à. Croyez-moi, il est très facile de travailler avec. Nous avons donc notre chemin de profils. On a juste besoin de suivre le passé. Donc nous stockons nos données sous profils slash utilisateur i d. Donc nous allons les mettre comme un objet. Donc on a des profils, alors on va devoir mettre une clé. Et parce que ça va être quelque chose de dynamique qui va changer, nous allons mettre un signe de dollar, et ensuite nous pouvons mettre quelque chose comme utilisateur, i d. Ceci est juste pour le référencer à l'intérieur de l'objet imbriqué. Laissez-moi vous expliquer ce que je veux dire. Donc, sous ce passé, on va ouvrir à nouveau un autre objet, et à l'intérieur, on va mettre une autre clé qui va être dot treat et dot right ? Exactement la même chose que nous avons ici. Donc pour point Lisez ce que nous allons faire. Nous allons faire référence à cet utilisateur que nous avons reçu d'ici. Maintenant, il va comme disponible. Nous pouvons le référencer à l'intérieur de cette portée. Disons que je viens de mettre en évidence. Donc, si l'utilisateur I d qui est que l'on est égal à off et off ici dans ce contexte, disons que les règles hors contexte est une valeur globale que nous pouvons accéder afin que nous puissions lire les données des profils utilisateur slash i d. i d. nous pourrions essayer d'accéder égal à nous point utilisateur i d. Donc, cela signifie, en fait, seulement le propriétaire de ce document. Seul l'utilisateur réel peut lire ses propres données. Toute autre personne, tout autre utilisateur se verra refuser l'accès. C' est comme ça que nous définissons les règles pour ne pas traiter. Alors copions-le et nous appliquerons la même chose pour le point droit ? Qu' est-ce qui va se passer ici ? Comment il comprendra les deux ans signés dans Well, revenons au code quand nous appelons ce signe avec pop Pop. Maintenant, notre utilisateur est connecté en interne aux services Firebase. Donc, quand nous essayons d'accéder à la base de données par la suite, firebase le ramènera et cet utilisateur que je d sera connu de la base de données et ce sera cet utilisateur point d'authentification i d. Et puis nous le vérifierons par rapport au chemin vers lequel nous écrivons. Maintenant, nous allons cliquer sur Publier. Ok, les règles sont publiées. Maintenant, revenons à la base de données et en fait, copions, Visitez ALS et collons-les, aussi. Règles de base de données à Jason. Donc ils sont toujours là. Droit ? Revenez ensuite à l'authentification. Supprimons cet utilisateur et recommençons. Donc, je vais cliquer sur, Continuer avec Google. Je vais sélectionner mon compte, et maintenant je n'ai aucune erreur. Maintenant, je suis connecté. Donc maintenant, si je retourne à la base de données, je peux voir que j'ai des données. J' ai des profils et que j'ai utilisateur je d exactement le même que nous avons ici. C' est ainsi que cela fonctionne avec la base de feu. Bon, donc si on l'agrandit, on peut voir que nous avons notre nom, qui est froid 16 qui est mon nom sur le compte Google. Et puis nous avons créé à laquelle est stocké des millisecondes en interne par base de feu. Bon, alors maintenant nous avons créé l'utilisateur et nous avons géré notre page de signature. Félicitations. Je suppose que ce n'était pas trop compliqué pour toi. parce qu'il y a beaucoup de choses à couvrir ici. Envoi de signatures que cette base de données que les règles de sécurité. Et tout se passe à la fois. Je sais que c'est dur, mais crois-moi, laisse tomber après une heure ou peut-être un jour quand tu regarderas tout ça une fois de plus. Ce ne sera pas si compliqué. Bon, alors engageons nos changements et finissons cette vidéo, donc on va tirer, on va tout, et ensuite on va commettre quelque chose comme modifier la page de connexion et signer et avec Facebook Slash Go girl. D' accord. Parfait. Dans la prochaine vidéo, nous poursuivrons notre discussion avec l'authentification, et nous commencerons notre gestion des utilisateurs. On se voit ça. 103. Créer du contexte de profil - API de contexte et de l'état en tout état de l'état mondial: Hé, dans cette vidéo, j'aimerais parler du contexte, un p I et de la gestion globale de l'état. Quand il s'agit de gérer le profil utilisateur comment nous pouvons aborder cela, nous savons qu'il doit être accessible globalement la plupart du temps à l'intérieur de chaque composant. Imaginez un composant très moins dans l'APP. Ce composant doit afficher le nom d'utilisateur qui est actuellement signé en question est où nous gérons cet utilisateur exactement. Supposons que dans le composant APP. Donc, pour obtenir le nom d'utilisateur, nous devons le passer à travers les accessoires à chaque composant suivant tout le long de l'arbre. Mais ce n'est pas cool. Nous avons, genre, 10 composants ci-dessus, et chaque composant joue un rôle dans ce que c'est ce qu'on appelle le forage d'hélice. Quand une certaine valeur est transmise vers le bas, les accessoires sur beaucoup hors niveaux profonds, ce n'est pas bon et devrait être évité pour éviter les problèmes de s'agenouiller. Il y a un contexte, un P I en réaction. Il introduit le concept hors fournisseur et fournisseur consommateur est un composant qui fournit tous ses enfants une certaine valeur ou un contexte. Consumer est un composant qui consomme le contexte et obtient la valeur en utilisant le contexte. AP I. Nous pouvons facilement gérer notre utilisateur dans le composant fournisseur, puis les consommateurs. Dans n'importe quel composant. Nous voulons éviter le forage de sonde et les composants intermédiaires. Nous créerions un contexte utilisateur et mettrions le nom d'utilisateur comme sa valeur. Ensuite, nous enroulerons le composant autour du fournisseur d'utilisateur. Donc, fondamentalement, tous les composants ont accès au contexte utilisateur pour le consommer à l'intérieur du composant où nous devons obtenir la valeur de contexte que nous appellerions utiliser le hook de contexte. De cette façon, nous sommes en mesure d'obtenir le nom d'utilisateur de n'importe quel endroit dans notre application. n'y a aucune limitation de l'utilisation du contexte. Nous sommes en mesure de le mettre n'importe où dans le composant APP autour de la page d'accueil autour de la forme de plusieurs pages et ainsi de suite. Très bien, voyons en fait comment le contexte AP je travaille sur l'exemple de notre application de chat. Allons-y. Donc, sur le dossier de ressources, créons un autre dossier que nous appellerons contexte. Et ici, nous allons mettre tout notre contexte créé. Nous allons créer un nouveau fichier et nommez le mobile pas peut-être le contexte de l'utilisateur, mais le contexte de profil. Je pense qu'il est plus approprié dans notre cas, Alors mettons le profil point doggy s. Alors quelle est notre stratégie ? Nous allons créer ce contexte et nous le mettrons dans notre composant APP, sorte que tout autre composant de notre application puisse y accéder. Alors, de quoi avons-nous besoin de dio pour créer un contexte ? Nous avons simplement besoin d'appeler create context qui vient du paquet de réaction. Alors mettons-le disponible. Et disons que ce sera un contexte de profil comme ça. Maintenant, nous devons créer un fournisseur, un composant, et qui fournira à tous ses enfants ce contexte de profil. Donc, nous allons pauvre exportation CONST. Fournisseur de profil. Et ça va être un composant. Donc, ce sera une fonction juste comme ça. Bon, qu'est-ce qu'on a besoin d'embarquer ici ? Qu' est-ce qui va revenir ? Il va retourner le fournisseur de points de contexte de profil Et puis à l'intérieur de ce fournisseur, nous avons besoin de soutien tous nos composants, tout ce que nous passons à l'intérieur. Ce sera donc nos enfants. Ce fournisseur de profil est juste un rappeur, Donc, nous allons le détruire comme un accessoire ici et le mettre dans le composant du fournisseur juste comme ça . Bon, maintenant, maintenant, si nous avons ou que nous pouvons voir réagir doit être dans la portée. D' accord, laissez-moi importer réagir. Et certaines personnes se débarrassent de cet avertissement maintenant comment nous sommes capables de faire quoi que ce soit. Donc, parce que c'est un composant, nous pouvons faire notre gestion d'Etat directement ici. Parcouvrons Teoh notre route privée, et ici nous savons que nous mettons ça pour le moment. Nous avons mis ce taureau en valeur. Cela tombe juste par défaut. Alors traitons ça et il va consommer notre contexte. Alors mettons-nous ça. Disons, lingots. Dans ce contexte, nous allons créer, Voyons le profil et ledit profil comme état utilisé, qui va être, disons, disons, Abul en valeur pour l'instant, juste pour montrer comment le contexte fonctionne afin de passer à valeur dans ce contexte, nous devons le mettre comme un accessoire pour fournir leur composant ici. Et nous devons passer notre profil juste comme ça et allons rencontrer le profil défini. Ne le détruisons pas comme ça. D' accord, on est prêts à partir. C' est ça. C' est ainsi que nous pouvons gérer notre contexte maintenant pour l'utiliser réellement dans notre application à l'intérieur de notre composant. Nous devons le mettre ici dans le composant d'application juste autour du commutateur. Donc, nous allons taper ce que nous l'avons appelé fournisseur de fichiers bruts. Et c'est tout. Et ils vont penser au contexte qu'il peut être très personnalisable parce que ce n'est qu'un composant. Disons que si nous avons besoin d'obtenir l'utilisateur avec I d. spécifique Nous pouvons simplement passer cet utilisateur i D comme un accessoire, puis nous pouvons l'attraper à partir des accessoires ici et ensuite mettre notre appel A P I ou toute autre gestion d'état liée à cet utilisateur particulier i C'est vraiment, vraiment cool, accord, maintenant que nous avons fourni tous nos composants avec le fournisseur de profil sans peut le consommer. Alors comment on peut faire ça ? Comme vous vous souvenez, j'ai mentionné utiliser le crochet de contexte. Donc, à l'intérieur de notre route privée, Au lieu de faire cela, nous pouvons simplement faire un profil constant égal à utiliser le contexte qui vient du paquet de réaction et puis à l'intérieur des enregistrements à l'intérieur du parent est que nous avons besoin de spécifier le contexte que nous avons créé. Ce sera ce contexte de profil, et il est vraiment fastidieux de référencer le contexte de profil chaque fois que nous l'appelons avec le contexte d'utilisation . Donc, pour éviter cela, nous pouvons créer un autre hook, un rappeur pour le contexte de profil pour le rendre plus accessible. Donc, à partir des contacts de profil Oui, fichier, nous pourrions exporter Const. Disons utiliser le crochet de profil, qui va être utilisé contexte, contexte de profil juste comme ça. Et maintenant, il dit que cela ne peut pas être appelé. Oh, excusez-moi. Ce sera une fonction qui retourne tout ce que ce contexte d'utilisation retourne. Et ce contexte d'utilisation nous renvoie une valeur. Donc, à partir de notre code, nous pouvons simplement appeler le profil d'utilisation et supprimons le contexte d'utilisation d'ici. Et en ce moment, ce profil va être cette valeur que nous avons passée ici. Donc maintenant, nous pouvons vérifier si pas de profil, alors nous allons rediriger donc et faisons exactement la même chose pour le profil public. Donc à partir d'ici, au lieu de faux, on va mettre le profil d'utilisation, et c'est fondamentalement tout. Maintenant, j'ai déjà lancé l'application, Donc, si j'avais un frais, rien n'a changé. Comme vous pouvez le voir, si j'essaie d'accéder à la page d'accueil, je suis redirigé pour me connecter, donc rien n'a été changé. Cependant, maintenant, nous gérons notre profil comme un état global auquel nous pouvons accéder à partir de n'importe quel composant, pas seulement de la foule publique. Ainsi, chaque composant qui se trouve à l'intérieur du fournisseur de profil peut accéder à son contexte. Très bien, avec le contexte d'utilisation, Hook et nous avons créé un wrapper autour du contexte d'utilisation avec le contexte de profil, qui est utilisé profil. Donc maintenant, il est encore plus convivial pour nous d'accéder. En outre, il est très important de mentionner que nous avons créé ce contexte de profil. Ou peut-être imaginons que nous avons défilé quelque chose comme le contexte du contre-contexte. Disons 12345 tout droit, et à l'intérieur de notre application. Au lieu de l'utiliser comme ça, nous l'utilisons plusieurs fois. Donc, disons pour la page de connexion que nous avons, disons que le fournisseur de compteur de contexte de compteur comme ça va bien, et la même chose vaut pour la maison. Donc on l'a comme ça. Nous avons maintenant deux contacts différents. Leur définition est la même, mais elles sont différentes. Donc, si à l'intérieur de la page de connexion, nous allons dire essayer d'accéder au contexte hors compteur, alors nous en arriverons à un. Eh bien, vous, si nous essayons d'accéder au même contexte avec le contexte d'utilisation, crochet dans la page d'accueil mais obtiendra une autre valeur car eux aussi, ont des états différents. Très bien, donc c'est comme si on parvenait à séparer les états, mais avec une définition ne fait que souligner que c'est différent. Donc c'est fondamentalement tout dans la prochaine vidéo, ce que nous allons faire, nous allons continuer à travailler avec notre fournisseur de profils et les gens ont finalement géré notre utilisateur Firebase connecté . On se voit là-bas. 104. Gestion d'état du profil mondial avec le contexte: Salut, bienvenue dans cette vidéo. Nous allons gérer notre utilisateur Firebase connecté avec le contexte. AP I Allons Dans la vidéo précédente quand nous avons appris à connaître le contexte AP I nous avons créé fournisseur de profil . Donc maintenant, nous allons utiliser l'état réel au lieu de juste un taureau en valeur. Donc, remplacons false par null. Et appelons aussi, Définissons la fonction de mise à jour du profil défini. D' accord, alors nous allons utiliser Yousef Act pour obtenir l'utilisateur de la base de feu quand le composant se monte. Alors utilisons-nous votre fait et écoutons ce que nous allons faire. On va appeler l'État a changé. Donc, à partir de firebase gs, nous allons utiliser notre objet. Et si nous mettons point si nous tapons sur, nous voyons que nous pouvons utiliser sur les deux état changé. Donc, cela sur l'état américain a changé. Permettez-nous de nous abonner à l'utilisateur actuellement connecté à l'intérieur de la base de feu. Et à l'intérieur de cet abonnement, nous sommes en mesure d'accéder à l'objet. Donc, disons-le comme ça et pour l'analyse. Consul, déconnectez l'objet. Maintenant, si nous revenons à l'application si nous ouvrons notre conseil, nous verrons cet objet hors champ. Et si nous avons élargi, c'est exactement le même objet lorsque nous nous sommes connectés avec Facebook ou Google. C' est donc à quel point il peut être facile de le gérer. Si nous étions signés à l'application, nous ne verrions pas cet objet. Ce serait le cas maintenant. Donc, le truc est pourquoi on le voit actuellement ? Parce que les sessions de gestionnaires de Firebase pour nous, nous n'avons pas besoin de tout mettre en œuvre. Une fois que nous sommes connectés, auteur, objet sera automatiquement renseigné pour nous et géré pour nous. Nous n'avons pas besoin de faire tout ce dont nous avons besoin pour seulement se connecter ou se déconnecter, puis l'objet utilisateur sera ici. D' accord, donc en utilisant cette information, ce qu'on peut faire au lieu de juste Consul, on va demander si les deux objets existent. Si elle est remplie avec une certaine valeur, alors nous allons faire quelque chose. Sinon, si cet objet Earth n'est pas l'objet, s'il l'est encore, l'utilisateur n'est pas connecté. Donc, cet état désactivé a changé, appelé au moins une fois lorsque le composant monte et si nous ne sommes pas connectés, alors il va être réglé pour savoir aussi si nous nous déconnectons de l'application parce que c'est l'abonnement. Il sera récupéré par cet appel. Retour et hors objet sera tel de savoir. Donc, à l'intérieur de ceci, nous allons définir le profil à maintenant et ici quand nous avons l'objet que nous pouvons appeler, définir le profil et mettre des données de profil que nous allons définir ici. Donc, nos données de profil va être le prochain, il va être le premier utilisateur I d. que nous allons obtenir à partir des deux points d'objet votre i d Ce que nous pouvons voir ici. Et il reflétera notre utilisateur que j'ai ddansla bibliothèque de nombreuses que nous avons vu sur la base de feu. Et aussi j'étais utilisateur I d à l'intérieur de la base de données en temps réel. Ensuite, nous voulons aussi peut-être email. Donc on va passer les emails de points d'objet, et aussi, nous avons besoin de nos données de base de données en temps réel, donc nous devons vraiment les obtenir ici. Donc, ce que nous allons faire comme nous pouvons le voir, profil est déjà déclaré. Ok, peut-être moins. Il suffit de nommer les données et lesdites données de profil. Ok, donc ici pour obtenir les données réelles de la base de données pour cet utilisateur, nous devons appeler à nouveau la base de données de MISC Firebase. Ensuite, on va remettre la référence, on va faire des profils. Ensuite, nous allons verser l'objet point de votre i d Ensuite, nous changeons les guillemets pour la population de contar de chaîne et ensuite nous voulons verser l'abonnement de temps aérien pour notre chef d'utilisateur. Donc si quelque chose a changé, alors nous voulons être avertis à ce sujet. Nous ne voulons pas tout gérer manuellement. Donc, avec la base de données en temps réel et avec n'importe quelle base de données et base de feu, c'est très facile. Donc, pour obtenir des données seulement une fois que nous appelons dot une méthode pour mettre un abonnement en temps réel sur ces données, nous devons mettre, alors nous devons l'appeler comme une fonction et le premier argument. Nous devons spécifier la cible, l'événement. Disons ainsi sur la valeur. Nous voulons exécuter ce Colback. Donc, chaque fois que nos données sur ces chemins dans la base de données changent comme n'importe quoi, ces Colback seront déclenchés comme à chaque fois et nous recevrons un instantané. Donc, nous allons Consul Luck instantané juste comme ça. Donc maintenant, nous sommes à l'intérieur de la maison parce que nous avons effectivement des données de profil. Et comme vous vous en souvenez, à l'intérieur de la route privée, nous vérifions par rapport au profil afin de ne pas voir la page de connexion. Ok, c'est bien. Donc, notre instantané de données a une référence de nœud clé et quelques autres choses et méta données liées à cet instantané à ces chemins dans la base de données. Eh bien, à l'intérieur de l'instantané, nous avons cette méthode. Il est appelé snapshot dot value snap shirt, valeur sombre. Et il nous donnera les données de la base de données, Informer off JavaScript objet. Donc, disons que les données de profil sont égales à snapshot, pas valeur. Et maintenant, venons les données de profil de Salak comme ça. Vérifions ça. Maintenant. Si je rafraîchis la page, je peux voir avoir un objet avec l'annonce créée et le nom, qui est qu'elle a l'air 16. Exactement les mêmes données que nous avons dans la base de données. Maintenant, qu'est-ce qu'on a besoin de faire ? On peut détruire ce profil. Les données affaiblissent la structure D, le nom et créé cela comme ceci. Et ici, nous pouvons déplacer cet objet de données à cet abonnement comme celui-ci, et ensuite ce que nous pouvons faire. Nous pouvons également déplacer cela sur les données de profil ici. Et pour ces données, nous pouvons mettre le nom et créé à juste comme ça. Donc, notre profil à la fin, nous aurons nommé créé à votre email i D. Droit ? Alors, c'est ça. Et maintenant, nous avons passé cet état de profil de données dans le contexte. Donc, à l'intérieur de notre privé, nous devons aussi garder une trace si nous sommes actuellement connectés. Nous devons donc mettre l'état de chargement afin de mettre un spinner ou autre chose. Donc, mettons un autre état que nous nommerons est le chargement et set se charge par défaut. Il va être réglé sur vrai. Et juste après que nous ayons dit que le profil que nous allons appeler set est en train de charger et de le mettre à faux. Ou si nous n'avons pas de profil, nous allons appeler Set est chargé et mettre des chutes aussi bien. Bon, maintenant c'est en train de se charger. On va passer avec notre contexte. Donc, au lieu de simplement passer le profil à l'intérieur, nous allons passer un objet avec l'état de chargement et aussi le profil. Donc maintenant, à l'intérieur de notre route privée, lorsque nous utilisons le profil, nous recevons un objet avec son profil et ses objets de profil à l'intérieur. Donc nous allons structurer notre profil à partir de lui et le même profil mobile faire quatre utilisations. Donc maintenant ce que nous pouvons faire ici, à l'intérieur privé, nous pouvons réellement utiliser Ceci est en baisse. Alors, la structure est en train de charger et ce qu'on va demander. Donc nous allons en mettre un autre si ici, et nous allons demander si nos données sont en train de se charger et nous n'avons toujours pas de données de profil. Ensuite, on va retourner le conteneur de notre costume et à l'intérieur, on va mettre l'ordre de la loi. Il va être un spinner, aussi un composant de notre costume, et il va être centré. Il va être centré Vertical e loup taille whoops. Off size est égal à M d. Ensuite, le contenu va se charger, et la vitesse va être lente. Et nous allons le déplacer pour éviter qu'il lui soit prêté. Déplaçons ça juste au sommet comme ça. Très bien, donc c'est notre première condition, et ensuite nous devons aussi modifier celle-ci. On va demander si on n'a pas de profil, et si on n'a pas d'état de chargement seulement, alors on va rediriger. Bon, alors vérifions ça. Maintenant. Quand on rafraîchit la page, on peut voir le spinner assez cool, non ? Et seulement quand nous obtenons les données, nous voyons réellement la page d'accueil. Très bien, faisons exactement la même chose pour la foule publique. Copions cette logique et mettons-la ici. allons Destructor charger et nous allons demander si nous avons est en train de charger et nous n'avons pas de profil puis nous allons remettre l'état de chargement comme celui-ci si nous avons un profil et, eh bien, ça pourrait être un peu délicat. Donc si nous avons le profil et que le chargement est défini sur false, alors nous allons rediriger. Très bien, c'est fondamentalement ça. Je veux seulement que Teoh fasse une étape de plus importante ici parce que nous travaillons avec les abonnements en réaction. Chaque fois que nous travaillons avec des auditeurs en temps réel des données, nous utilisons un abonnement. Donc, chaque fois que nous avons un abonnement, nous devons nous désabonner lorsque nous n'en avons pas besoin. Donc, sur la scène américaine a changé. Si vous pouvez voir, il renvoie la base de feu désabonné. Donc, il nous renvoie une fonction que nous devons appeler pour se désabonner de cet abonnement sur l'état hors changé. Mettons-le, disons sur le sous-marin et on annulera ça sur le sous-marin et notre fonction de nettoyage sur Yousef Act. Donc on va retourner une fonction et on va annuler. Donc, juste comme ça et la même chose s'applique en fait pour notre référence de base de données ici. Donc, dans ce passé, nous mettons un auditeur en temps réel qui est sur la valeur, et c'est notre Colback. Nous voulons donc nous assurer que nous nous désabonnions de celui-ci aussi. Donc ici, disons, à l'intérieur de cette utilisation des faits, nous allons verser, laisse une référence utilisateur. Ensuite, nous allons affecter Utiliser une référence à la référence de base de données à ce chemin comme celui-ci , puis l'utilisateur rugueux sur la valeur. Nous allons exécuter ce rappel chaque fois que nous n'avons pas de données. Si notre utilisateur n'est pas connecté, Si nous n'avons pas d'autre objet, nous allons demander si l'utilisateur ref est défini. Ensuite, nous allons appeler, utiliser point rugueux off parce que si je mets point ici, je peux mettre sur je pourrais mettre une fois et aussi je peux mettre hors et cela comme vous pouvez le voir détache Un rappel précédemment attaché avec pour que nous puissions le faire. De cette façon, nous pouvons nous désabonner de ces appels à partir de ces chemins à l'intérieur de la base de données. En fait, la même chose que nous ferons à l'intérieur de notre nettoyage pour l'effet d'utilisation. Donc celui-ci chaque fois que nous avons signé et celui-ci chaque fois que nous sommes le composant, donc ici nous allons demander si l'utilisateur Raph, alors nous allons utiliser un point de référence hors désabonnement de cette référence utilisateur. Très bien, donc c'est fondamentalement ça. J' espère que ce n'était pas une cause trop déroutante pour moi. Quand ? Pour la première fois. Quand je l'ai vu, c' était le cas, mais à la fin, ça a du sens. Bon, engageons nos changements et finissons cette vidéo. On va tout mettre. Ensuite, on va tout engager avec le message. Quelque chose comme l'utilisateur de l'âge de l'homme avec le contexte de profil Mettez riel subs temporel quelque chose comme ça. Très bien, on se voit dans la prochaine vidéo. 105. Commencer à créer la barre d'ordre: Salut, bienvenue. Maintenant que nous avons un flux de signature complet, commençons enfin à construire notre page d'accueil. Nous allons commencer à partir du site de gauche. Donc d'abord, nous allons construire nos boutons plutôt que la liste des chatroom et ensuite nous irons dans le Maine. Fenêtre Shatt. Allons donc à l'intérieur des pages au lieu de ce def. Définissons notre grain. Donc, il va être grand composant, qui va être fluide et le nom de classe va être un Chuan 100. Nous allons le faire pleine hauteur. Puis à l'intérieur, nous allons contrôler l'élément et puis nous allons verser l'élément de colonne de notre costume. Donc, pour les petits appareils, il faudra toutes les colonnes, qui sont 24 colonnes et à partir des périphériques intermédiaires. On va le mettre quelque chose comme huit. Pas de santé, mais huit. Et à l'intérieur de cette colonne, nous allons utiliser le composant de barre latérale, mais pas celui qui vient de notre costume. Celui que nous créerons nous-mêmes. Sauvegardons ça. Et sous les composants, créons un nouveau fichier, que nous nommerons Sidebar doggy s. Ouvrons-le et demandons un dossier pour un rapping. Dave, je vais mettre le nom de classe en pleine hauteur et puis un peu en tapotant en haut. Donc à l'intérieur, on va le diviser en deux éléments. Donc, nous aurons la partie supérieure avec nos boutons et en bas nous aurons une liste de salon de chat . Donc, nous allons d'abord créer def pour notre partie supérieure et en bas parce que nous n'avons pas encore de bavardage sur la liste. Allons juste texte en bas comme ça. Donc, à l'intérieur de ce différent versera tableau de bord jongler qui va créer dans un moment et l'enregistrer . Donc, d'autres composants. Créons un nouveau dossier, que nous nommerons le rapport ici. Bubble a défini deux fichiers. Le premier va être indexé togs, qui va être notre composant de tableau de bord, mais nous allons tout gérer, mais pour l'instant nous allons le garder vide. Alors appelons-le, Papa rapport et juste mettre bonjour perspicacité et le deuxième élément va être tableau de bord jongler. Donc, ici, nous allons définir notre bouton et le drover lui-même. Donc d'abord, nous voulons nous débarrasser de l'emballage Div. Ensuite, je vais définir un bouton ici, qui va être notre Tobler. Disons que ce sera un élément de bloc. Il aura col bleu et à l'intérieur allaient mettre Aiken que nous importons de notre costume. Aiken va être ce mot. Et puis le texte va être tableau de bord comme ça. Maintenant, disons avec et voyons, qu'est-ce qu'on a ? Donc, si nous actualisons la page à l'intérieur de la barre latérale, nous n'avons pas de tableau de bord avant d'aller, allons importer. Et aussi à l'intérieur de la maison Nous n'avons pas de barre latérale. Importons aussi. Bon, vérifions ça. Droit. Donc on a un bouton. Mais quand on clique, rien ne se passe. Donc, définissons notre composant Drover sur ou Drover, élément ici à côté de Button. Je vais mettre Drover qui vient de notre paquet de costume et ce n'est pas si fermant élément à l'intérieur. Nous avons réellement besoin de verser des éléments drover, mais nous allons les définir à l'intérieur de ce fichier NGS adulte index. Donc, pour cette lutte, nous avons seulement besoin de définir cette propriété show et il va être Il doit être une valeur bowline qui indiquera quand ce drover est ouvert. Ensuite, nous devons définir sur l'événement de hauteur et ensuite nous devons également définir le placement. Dans notre cas, il va être à gauche ou maintenant nous devons réellement définir nos gestionnaires ou état pour notre drover. Nous devons garder une trace de son état par nous-mêmes. Et puisque nous allons avoir beaucoup de motels ou de drovers dans notre application, et nous allons utiliser beaucoup de la même logique, j'ai proposé de créer un espoir personnalisé que nous nommerons l'état du modèle d'utilisation et il n'exposera que trois éléments est ouvert en hauteur et en exposition. Donc, sous MISC, créons de nouveaux crochets personnalisés de fichier GS. Ici, nous allons définir une nouvelle fonction, qui va être notre crochet, nommerons utiliser l'état du modèle. Il recevra la valeur par défaut. Disons la valeur par défaut, qui sera définie sur false si elle n'est pas définie. A l'intérieur, nous allons définir l'état, et par défaut cet état sera notre valeur par défaut que nous passons en argument et aussi ici nous allons définir quelques fonctions d'aide. Disons-le. La première fonction va être ouverte et ce sera un enroulé autour de l'utilisation froide à l'avance pour le faire optimiser, et il appellera, dit ST, et nous allons le mettre à vrai et le même nous appliquerons à fermer. Mais au lieu de vrai, nous allons verser du faux ici et à partir de ce crochet, nous allons retourner notre état. Peut-être que nous allons renommer aussi est ouvert, et l'ensemble ici est ouvert. Donc, à partir de ce crochet, nous allons retourner est ouvert, ouvrir et fermer les fonctions d'aide. Et n'oubliez pas d'exporter l'état du modèle de cette année à partir de crochets personnalisés. Très bien, donc à l'intérieur d'Arab ou bascule, nous allons utiliser cet état de modèle d'utilisation qui nous renvoie est ouvert. Ensuite, il nous renvoie fermer et ouvrir. Donc maintenant, nous pouvons l'utiliser. Donc, sur la hauteur, nous allons spécifier avec notre propre fonction de vêtements que nous définissons dans le crochet show. C' est un taureau en valeur, donc peu de spécification est ouvert et aussi pour notre bouton. Lorsque nous cliquons dessus, nous voulons montrer le Drover. Donc, pour ce bouton pour l'événement sur clic, nous allons spécifier Juste ouvrir. D' accord. Et maintenant, nous devons mettre quelque chose à l'intérieur de Rover. Ce sera cet élément. Donc, définissons tableau de bord et vous verrez qu'il sera importé à partir du point Cela signifie qu' il sera importé à partir de notre dossier actuel. Alors pourquoi on a mis Index Gs comme ça ? Donc, si nous l'utilisons dans un autre composant, disons à l'intérieur des pages et la façon dont nous l'importons, ce sera comme ça. Nous allons importer des composants. Ce rapport ne spécifiera pas Dashboard Index GS car il est nommé comme index. Oui, nous pouvons spécifier uniquement le nom du dossier où cet index points gs re sites et cela fonctionnera. Bon, maintenant, sauvegardons tout et jetons un coup d'oeil. Maintenant, si je clique sur le tableau de bord, cela a parfaitement fonctionné. Donc je suppose que c'est tout pour cette vidéo. Dans la prochaine vidéo, nous continuerons et rendrons notre mortel un peu plus réactif. Parce que si je dois juste cliquer dessus, si je dois, vous savez, juste redimensionner la fenêtre, vous pouvez voir qu'elle reste statique. Ce n'est pas un comportement convivial, donc nous allons le corriger plus tard. Mais pour l'instant, engageons nos changements, et nous dirons, commençant ou en commençant à construire le composant de la barre latérale. D' accord. Parfait. se voit dans la prochaine. 106. Sidebar réactif à l'aide de l'interrogatoire des médias: Hé, bienvenue ici. Nous allons rendre notre travail, euh, euh, que nous avons créé dans la vidéo précédente responsive. Ce que je veux dire, c'est que maintenant, si nous essayons d'inspecter notre élément et si nous ouvrons Drover, si nous redimensionnons la fenêtre, elle reste statique. Eh bien, ce n'est pas réactif du tout ce que nous pouvons faire pour réparer ça pour Drover. Il y a cette sonde disponible, qui est pleine, ce qui signifie que Drover sera disponible en plein écran. Vérifions cette propriété complète et voyons, qu'est-ce qu'on a ? Donc, en ce moment, lorsque nous l'ouvrons lorsque nous sommes sur des appareils de bureau, nous pouvons voir qu'il est plein écran. Cependant, si nous sommes sur des appareils mobiles, il semble bon. Alors quoi ? Affaiblir Dio ? Idéalement, nous voudrions activer cette propriété plein écran uniquement lorsque nous sommes sur des appareils mobiles . Donc, nous devons certains l'ont déterminé par programme bien, nous pouvons réellement utiliser des requêtes de médias, mais ils ne sont disponibles et CSS Mais avec des hooks, nous pouvons obtenir le même résultat par programme. Donc, nous allons ouvrir le fichier assets le dossier assets et ici confiné utiliser la requête média gs. Ouvrons-le et copions ce crochet maintenant Allons accélérer ce crochet à nos porcs personnalisés dgs et importons utiliser un fait de réagir. Alors maintenant ce que ce crochet fait-il accroche dans la fenêtre beaucoup de médias un p I, et il nous permet de manipuler les requêtes des médias. Par programme, je ne vais pas plonger dans les détails ici. Voyons comment ça marche. Donc, je vais enregistrer le fichier. Revenons ensuite à Dashboard Tugle. Et ici on va appeler ça utiliser le crochet de requête média et à l'intérieur on doit passer un point de pause média . Donc, disons que nous allons ouvrir nos faciles parents et que nous allons passer Max avec 1992 pixels. Et maintenant ce crochet revient à Bullen qui indiquera si c'est vrai ou faux. Donc, en utilisant cela, nous pouvons vérifier si nous sommes actuellement sur l'appareil avec 992 pixels. Donc, nous sommes pauvres est mobile et ce Bullen nous allons passer dentée, pleine prop. Donc, lorsque nous sommes sur des appareils mobiles, nous aurons la propriété complète activée. Lorsque nous sommes sur des appareils de bureau, cela sera réglé sur des chutes et nous n'aurons pas cette propriété complète si nous l'enregistrons. Revenons à l'application maintenant si nous sommes sur des appareils mobiles. Si la taille de notre écran est inférieure à 992 pixels, nous avons notre Drover complet et cela fonctionne parfaitement. Et si nous sommes sur les appareils de bureau, nous avons ce Drover statique qui n'est pas changé. Eh bien, c'est exactement le comportement que nous voulions. Donc, nous en avons fini avec notre réactivité. Finissons cette vidéo et engageons nos changements. Mettons tout à l'get et nous nommerons notre commit comme edit utiliser media query hook et rendre Drover responsive. Ok, parfait. se voit dans la prochaine. 107. Créer un tableau de bord - Partie 1: Salut, bienvenue dans ce racheter. Continuez à construire notre barre latérale et nous allons commencer à construire exactement tableau de bord. Allons-y. Donc d'abord, ouvrons les togs d'index et ici au lieu de visiter si nous allons utiliser des éléments Drover. Donc, puisque nous n'avons pas de rappeur parce que nous l'avons défini à l'intérieur de l'aéroport bascule ces Drover, nous allons utiliser la perspicacité des fragments de réaction comme ceci. Donc, notre travail, er éléments seront drover point non titré sur point Heather Inside en-tête. Nous allons obtenir le titre de point de drover et parce que off V s code écorce avec fragment de réaction Maintenant, j'ai cette duplication de données, mais c'est très bien. Donc ensuite, vous avez eu er nous aurons le corps de points drover et ensuite nous aurons le pied de page de points drover juste comme ça. Donc, à l'intérieur du corps allaient afficher les données de l'utilisateur. Donc, on va se porter. Disons h trois élément et puis nous dirons, Hey, utilisateur ou nous avons profil. Nous avons un nom de point profilé. Donc, ce profil sera notre profil que nous obtenons de l'utilisation du crochet de profil. C' est là notre contexte. Donc on va appeler le profil d'utilisation et je n'ai pas d'intelligence. Alors, ouvrons le contexte de profil. Et maintenant, si je mets l'intelligence, ce sera important pour moi. D' accord. Bien. Donc, à l'intérieur du corps, nous avons du texte affiché à l'intérieur du titre. Nous allons tirer juste tableau de bord et à l'intérieur du pied de page, nous allons ajouter le bouton de déconnexion. Alors ajoutons l'élément de bouton. Ça va être un élément de type. Il aura la couleur rouge et pour déclipped, nous allons spécifier sur Sign out et nous allons verser Sign out comme texte. Très bien, alors peut-être supprimons juste un clic pour l'instant et supprimons cette touche H 3 en bas . Vérifions ça. Qu' est-ce que nous avons en conséquence ? On a raison. Parfait. Maintenant, nous avons de la haine. Elle a l'air 16, ce qui est notre nom d'utilisateur. Et puis nous avons déconnecté le bouton, mais il n'a pas encore de fonctionnalité, alors ajoutons-le. Eh bien, quand nous nous déconnectons de l'application, nous voulons que vous fermiez également cette fenêtre de modèle. Mais cette fonction étroite récite à l'intérieur du Data Board Togo. J' ai donc proposé de définir une déconnexion, fonctionner à l'intérieur du tableau de bord togo, puis de le transmettre au composant de tableau de bord. Donc, on va mettre const sur le signe. Et parce que nous avons cet état est ouvert ici, chaque fois que nous l'ouvrons et le fermons à chaque fois. Nous aurons une nouvelle copie de cette fonction sur déconnexion. Donc, nous voulons garder cette copie. Nous voulons que vous le mémorisiez. Donc on va utiliser le rappel à l'avance et à l'intérieur on allait mettre la logique suivante. Nous devons appeler Déconnexion, qui est disponible sur le serment. L' objet ? Oh, pas déconnecter. Il suffit de déconnecter. Et c'est tout. Ça va complètement se déconnecter. Notre utilisateur actuel. Tout est géré par la base de feu. Ensuite, nous devons mettre alerte, ce qui va être une alerte. Nous dirons, dédicacés. Cela durera quatre secondes, puis nous fermerons aussi le Drover. Donc, parce qu'il vient de notre crochet personnalisé, nous devions le passer comme une dépendance. Mais c'est très bien. La fonction Vêtements est mémorisée à l'intérieur de l'état du modèle d'utilisation parce que nous l'avons mis à l'intérieur Utilisez CLO comme vous vous en souvenez. Non, passons. Déconnectez-vous au tableau de bord et au tableau de bord. Allons le consommer sur. Déconnectez-vous. Est-il capitalisé ? Oui, c'est le cas. Alors quatre sur. Déconnectez-vous. Cliquez sur. On va mettre la fonction de déconnexion. D' accord ? Ça semble bien. Maintenant, vérifions ça. Si nous ouvrons notre tableau, si nous cliquons sur déconnexion en ce moment, nous sommes déconnectés. Et la question potentielle pourrait être pourquoi nous sommes redirigés vers la page de connexion. C' est parce qu'à l'intérieur de notre contexte, cela a changé. Donc, lorsque nous nous déconnectons parce qu'il s'agit d'un abonnement en temps réel, firebase va le récupérer. Il déconnectera l'utilisateur, et ce Colback sera déclenché. Donc, quand nous n'avons pas d'objet, nous appelons le profil défini pour savoir. Et quand nous avons défini le profil maintenant ou indéfini, si nous regardons à l'intérieur de la route privée, nous redirigeons l'utilisateur pour se connecter. Donc, c'est exactement ce qui se passe. Donc, maintenant, nous avons le système complet de signature et de déconnexion, qui fonctionne parfaitement. Bon, donc pour vérifier que tout fonctionne. Très bien. Connectez-vous une fois de plus et je vais à nouveau sélectionner exactement le même compte. Maintenant, je suis redirigé. Je suis inscrit et encore une fois, j'ai de la haine. Elle a l'air 16 ans. Tellement parfait. Il fonctionne comme il doit fonctionner. Maintenant, engageons nos changements et finissons cette vidéo. On va porter, tout chercher, puis on s'engage. Commencé à construire un tableau de bord et il se déconnecte bouton et affiche le nom d'utilisateur. Très bien, on se voit dans la prochaine. 108. Créer un tableau de bord - Composants réutilisables et modifiables (partie 2): Hey, bienvenue dans ce leader ont été continuer à construire ce porc et verbal créer un composant que nous allons réutiliser plusieurs fois à travers notre application dans quelques endroits. Donc, il va être une entrée avec les deux boutons que pendant que j'étais trop édité. Donc, lorsque nous l'enregistrons, nous mettons à jour les données à l'intérieur de la base de données. Allons-y. Donc, d'abord, ce que je propose est de créer le composant réel. Donc, sous les composants, créons un nouveau fichier créditable dans le port pour l'instant. Qu' il soit vide. Mettons bonjour ici. Définissons d'abord comment nous allons l'utiliser. Ouvrons ce fichier mot ici sous Hey, nom de profil. Mettons le séparateur de notre costume. Et puis définissons Edita ble import. Alors quoi ? Les accessoires devraient re passer perspicacité. Donc, tout d'abord, nous allons passer la valeur initiale, ce qui sera triste pour l'entrée. Alors mettons la valeur initiale, qui va être le nom sombre du profil. Très bien, alors nous devons également définir sur la fonction sûre et qui sera déclenché lorsque nous allons enregistrer l' entrée. Alors mettons-le en sécurité et définissons-le par ici. Donc, nous allons mettre en sécurité et cette fonction de rappel, elle recevra la même valeur qu'un argument. Alors mettons de nouvelles données et pour notre laisser cette fonction vide. En outre, nous voulions signaler peut-être une étiquette en face de l'entrée, donc nous aurons une option pour passer un composant réactif comme accessoire à la composante ample comestible . Alors définissons quelque chose comme l'âge de six ans. Peut-être, disons que ce sera le nom de Nick et le nom de la classe va être la marge inférieure à parce que nous voulons ajouter un peu d'espace entre notre étiquette et entre l'entrée réelle. Et aussi, nous pouvons passer d'autres accessoires qui seront redirigés élément Judy Input. Donc peut-être que nous pouvons aussi passer quelque chose comme le nom, qui va être, dans notre cas, surnom. Alors, qu'est-ce qui va être entré avec notre surnom que nous serons en mesure de l'ajouter ? Bon, Cool. Alors ouvrons notre composant et commençons à construire. Donc, d'abord, nous avons une valeur initiale. J' ai travaillé un des accessoires principaux. Ensuite, nous allons destructeur sur sûr vénérable ont également étiquette, qui va être cet âge six ans, et il y a une chance et que cette étiquette ne sera pas passé. Alors mettons maintenant VT pli et ensuite aussi d'autres choses, comme l'espace réservé. Peut-être. Pauvre espace réservé. Et par défaut, il sera dit, Choisissez quelque chose comme bon, Votre valeur. D' accord. Et puis aussi, ce que je propose est de verser un accessoire qui représentera notre message vide quand quelqu'un essaie de sauvegarder notre entrée et il est vide afin que nous puissions mettre comme une valeur globale qui dira que entrée est vide. Mais que se passe-t-il si nous voulons le personnaliser ? Donc passons-le aussi comme un message vide d'accessoire. Et par défaut, si ce n'est pas spécifié dans les accessoires, nous dirons qu'il va être au tribunal, son vide tout droit, et tout autre accessoire va être nos accessoires d'entrée. Bon, donc pour ce live ce que nous allons faire Donc ici, juste avant l'élément d'importation réel, nous allons porter l'étiquette. D' accord, alors nous verserons l'entrée qui vient de notre costume. Donc, pour cette entrée, au tout premier accessoire, nous allons passer nos cultures d'entrée, et nous allons les écraser quelques-unes d'entre elles. Donc nous allons écraser l'espace réservé, qui va être ce détenteur d'accessoires. Ensuite, nous aurons également d'autres choses que nous allons gérer à l'intérieur de ce composant, telles que son état interne. Donc, quand nous allons le modifier, nous allons tout gérer à partir d'ici. Mettons-le ici à l'avance. Donc, nous allons définir un nouvel état, qui va être, disons, disons, juste entrée et ensuite définie dans le port par la valeur initiale par défaut. Ce sera notre valeur initiale que nous transmettions ici. Alors mettons la valeur initiale. Bon, alors nous avons notre propre gestionnaire de changement que nous devons spécifier. Alors versons sur le changement d'entrée. Donc normalement, comme vous vous en souvenez, il reçoit un objet d'événement. Mais sur notre costume, il est légèrement différent comme le premier argument pour sur l'événement de changement. Donc, si je mets inchangé ici, si je survole dessus, vous pouvez voir que le premier argument va valeur. Donc, il est juste fait pour nous d'être plus convivial, donc nous aurons de la valeur à la place, sans référencer même la valeur de point cible. Donc, ici, nous allons mettre aussi utiliser le rappel parce que nous n'aurons aucune dépendance et nous voulons l' optimiser à l'avance à partir d'ici. Bubble call ne définit que l'entrée à sa valeur comme ceci. Et pour ces changements, nous allons verser sur le changement d'importation, accord. Et aussi, n'oubliez pas d'associer la valeur réelle à notre entrée, et nous avons presque fini ici. Maintenant, nous voulons également faire notre entrée edit à base de plantes. Donc, ce sera juste une valeur d'investissement qui indiquera donc que nous allons créer son état créditable est un souhaitable et par défaut, il sera défini sur false. Très bien, donc cette entrée sera désactivée quand nous avons est créditable, définie sur false. Alors, quand est-ce comestible le vrai ? Nous serons en mesure de gérer notre demande. Donc, nous allons créer un bouton réel qui indiquera que Donc, nous allons mauvais groupe d'entrée ne mettra pas juste bouton parce que nous aurons les deux boutons à l'intérieur de notre importation soit fermer ou modifier . Donc on va mettre un groupe d'entrée pour qu'il ait l'air tâtonné, tu vois ? Donc groupe d'entrée dans le bouton et à l'intérieur de ce bouton, nous allons mettre je peux et ce que je viens sera le prochain. Donc, si notre entrée va être comestible, vénérable affichage bouton de fermeture. Donc, sinon, quand nous voyons l'entrée réelle et que nous n'avons pas l'intention de l'éditer, nous recevrons ajouté à Donc c'est juste une icône avec, comme crayons, donc nous pouvons voir que nous pouvons l'ajouter. Très bien, donc pour cela sur le bouton de clic, nous allons verser sur edit click et ce clic non édité que nous allons définir ici. Donc, sur éditer Cliquez également le citer autour, utilisez le rappel à l'avance parce que nous n'aurons pas de dépendances ou réellement avec vous. Mais ça n'a pas d'importance, Corneau. Donc on va mettre Set est crédible pour inverser la valeur de notre état actuel. Donc, nous allons appeler cette fonction qui va inverser la valeur de bowling. Et puis aussi, nous voulons nous assurer que si nous cliquons sur annuler, nous revenons à l'état initial. Donc, nous voulons également appeler l'entrée set et juste au cas où, remettre à la valeur initiale. Donc maintenant, il apparaît comme une dépendance. Alors mettons-le ici. Et disons en fait avec et voyons ce qui se passe ici. Bon, Cool. Donc maintenant on l'a comme ça, et ça a l'air presque cool, mais on dirait que je suis quelque chose. Oh, ouais, en fait, parce qu'on utilise le groupe d'entrée, on doit l'envelopper autour du groupe d'entrée. C' est ma mauvaise. Groupe si important. Et je vais mettre ça à la fin comme ça. Maintenant, jetons un oeil. Bon, maintenant ça a l'air bien. Je ne peux pas ajouter l'entrée en ce moment, car est comestible tel à tomber. Donc, quand je clique sur ce bouton maintenant, je pourrai l'ajouter. Ce bouton. Et comme vous pouvez le voir, lorsque je clique sur ce bouton, la fonction de clic sur l'édition sera déclenchée. Donc, si nous n'avons pas cette valeur initiale d'entrée définie lorsque je clique sur ce bouton, il ne sera pas à nouveau réglé à la valeur par défaut. Nous voulons donc nous assurer qu'il est toujours initial si nous l'annulons. D' accord. Que devons-nous faire d'autre ? Nous devons définir une autre bouteille qui sera affichée lorsque nous cliquerons sur éditer. Nous sommes donc en mesure de savourer ici. Quoi ? On va verser. On va verser. Si notre importation est créditable, alors nous allons rendre un autre groupe d'entrée en bas. Copions-le et mettons-le ici. Donc, pour le clic, nous allons mettre sur le clic sûr. Ce ne sera pas la même chose sur Sauvegarder ça. Nous passons comme un accessoire. On va en définir un autre sur un clic sûr ici. Pour l'instant. Que ce soit comme ça. Donc, pour ce bouton, ce que nous allons à son changement passif incendiable. Je peux je peux va être un Aiken statique. Et ce que je peux, c'est si je me souviens que c'est un chèque. Jetons un coup d'oeil. D' accord, Go. Oui, ça l'est. Vérifie. On dirait qu'on a le balisage. Définissons réellement la fonctionnalité pour le clic sécurisé. Alors qu'est-ce qu'on va faire ici ? D' abord, on va faire une validation très primitive. abord, nous allons obtenir la valeur ajustée pour éviter les espaces inutiles autour de notre texte. Donc, mettons la valeur ajustée et il va être la garniture de point d'entrée. OK, alors on va vérifier si notre valeur ajustée va être juste un espace vide. Ensuite, nous allons alerter a été pacifié. Message vide en tant qu'accessoire. On peut mettre ce message vide ici et mettre le temps hors quatre secondes. D' accord. Ensuite, à la fin, nous allons mettre Set est créditable aux chutes parce que lorsque nous cliquons sur coffre-fort, nous voulons le rendre pas créditable comme il l'était avant. Et maintenant, on va vérifier contre un de plus. Pensez que ce sera si coupé ne sera pas notre valeur initiale. Donc nous allons vérifier si nous éditons quelque chose et que notre valeur est différente Onley, alors nous allons appeler notre propre rappel sûr que nous spécifions ici dans le tableau de bord. Donc, il va être dans une fonction d'évier. Donc, nous allons le pacifier, car il va faire face à ça va être une promesse, donc nous devons l'attendre. Alors versons un évier et versons un poids sur coffre-fort que nous passons ici. Et comme vous vous en souvenez, ce rappel recevra de nouvelles données en tant qu'argument. Donc ici, nous devons passer notre entrée réelle. Donc, laissons mauvais pas entrer ou peut-être coupé à la valeur, parce que nous ne voulons pas le mettre avec les juste espaces inutiles autour d'elle. Bon, alors maintenant, voyons ça. Et ici, venons à vendre. Regarde, nouvelles données pour voir si ça a vraiment fonctionné. Maintenant, il semble assez fini. Peut-être qu'à l'avenir nous allons l'ajuster un peu pour répondre à nos exigences. Mais pour l'instant, ça a l'air bien. Ouvrons notre tableau de bord. Ouvrons, consul, et jetons un coup d'oeil. Donc maintenant, si je l'édite, si j'annule, tout va bien. Donc, si je clique à nouveau sur coffre-fort, rien ne change. Et nous n'avons pas cet appel sur le coffre-fort tiré. Donc, si je le change et si je l'sauvegarde maintenant, j'ai la nouvelle valeur qui est verrouillée par le consul sur le gestionnaire sécurisé. Donc, en fait, ça a marché. Et je suppose que nous avons fini ici dans la prochaine vidéo. Nous allons effectivement appliquer certaines fonctionnalités à ce composant, ou peut-être autour de ce composant. Nous mettons à jour notre surnom de Riel. Mais pour l'instant, terminons cette vidéo et engageons nos changements. Donc, je vais mettre créé réutilisable, entrée créditable. D' accord, parfait. se voit dans la prochaine. 109. Créer un Dashboard - Déjour d'utilisateur (partie 3): Salut, bienvenue dans cette vidéo. Nous allons continuer à construire notre tableau de bord comestible mise à jour notre vrai surnom à l'intérieur de la base de données riel Time. Allons-y. Dans la dernière vidéo, nous avons créé une entrée créditable. Et nous définissons cela sur la fonction sûre que nous avons transmise pour éditer l'entrée à base de plantes. Donc, cette fonction de rappel va recevoir notre entrée finale lorsque nous cliquons sur le bouton Enregistrer Donc, nous allons maintenant utiliser ces données et mettre à jour notre base de données. . Donc, comme avant, nous allons utiliser notre base de données, objet pour accéder à la base de données. Ensuite, nous devons choisir pacify référence à la base de données. Donc on va mettre des profils slash. On va utiliser une chaîne de leur police ici. Nous allons mettre le profil. Ne pas utiliser, je d. Maintenant, nous avons besoin de mettre à jour seulement le surnom. Nous ne voulons pas avoir créé ça. Nous devons donc être plus précis quand il s'agit de référencer quelque chose dans la base de données en temps réel . Nous devons donc référencer ce nom ici. Ce que nous pouvons faire, nous pouvons en fait le référencer de deux façons. On peut mettre votre barre oblique ici et mettre le nom ou je préfère un autre moyen juste pour le rendre plus convivial. Je mettrais enfant ici et ici. J' ai également besoin de spécifier le chemin, mais ce chemin sera un relatif au chemin que nous avons spécifié dans la première référence. Alors poussons ce nom. Donc on va spécifier l'enfant hors de ce chemin dans la base de données, accord. Ou en fait, mettons-le dans un précieux mettons-le, disons, nom de l'utilisateur Nick, réf. Ensuite, nous allons définir un bloc try catch parce que nous allons travailler avec des données asynchrones et des promesses. Donc, nous allons verser, attendre, attendre, et ensuite nous appelons simplement le nom d'utilisateur Ralf dot sat, qui va écrire des données dans la base de données. Et ici, nous allons mettre de nouvelles données que nous recevons comme argument. Après cela, nous ne serons pas Si je l'utilisateur avec message de succès et nous dirons surnom a Bean mis à jour et encore pendant des secondes et pour tout autre, nous allons mettre à son message où nous allons mettre notre message comme son texte et aussi quatre secondes. Très bien, ça a l' air sympa. Vérifions ça. Revenons à l'application quand je clique sur éditer permettez-moi de changer mon surnom pour entrer Be que je clique sûr et le surnom a été mis à jour Et si nous revenons à la base plus tard. Vous pouvez voir que les données réelles sont modifiées. Essayons encore une fois. Mettons juste que je sais et je clique en sécurité. Le surnom a été mis à jour. Base de données mise à jour. Tout semblait bien loin. Si vous avez encore une question. Pourquoi exactement ça ? Hey, Andy est mis à jour quand on met à jour les données réelles dans la base de données. Ok, encore une fois pour une explication. Dans le contexte de notre fournisseur, nous avons utilisé des abonnements, des écouteurs en temps réel pour nos données. Donc, pour utiliser une référence, qui est notre chemin de base de données sous les profils, utilisateur I d. Nous mettons écouteur en temps réel ces rappels. Donc, ce froid a déclenché chaque fois que quelque chose change sous ce chemin dans la base de données. Donc, si disons que les changements de nom sous l'utilisateur I d que ces appels seront déclenchés et nous à jour l'état du profil avec cet objet de données, qui sera nouveau au moment où ces Colback sont déclenchés. Donc, la même chose s'applique pour créé à ou pour tout autre rempli. Donc si nous avions quelque chose comme l'âge ici, et si l'âge a été changé que ces Colback seront virés et donc un bon, je suppose que c'est bon. Et tu l'as compris. Maintenant, engageons nos changements et finissons la vidéo. Alors, allons bien aller à tout. Ensuite, mettons Pete commit, disons surnom mis à jour dans la base de données. D' accord. Ça a l'air bien. se voit dans la prochaine. 110. Créer un tableau de bord - Relier des réseaux sociaux (partie 4): Hé, dans cette vidéo, nous allons continuer à construire le composant de l'aéroport et nous allons associer le compte utilisateur plusieurs fournisseurs de signature ou plusieurs méthodes Sinan. Donc, par exemple, si je me connecte ou si je regarde avec Facebook, puis si je regarde et regarde avec Google, je me retrouve sur le même compte. Je n'aurai pas deux comptes distincts différents. Bon, alors faisons-le. Tout d' abord, revenons à notre code. Et ici, sous tableau de bord, créons votre fichier, que nous nommerons Provider Block pour l'instant. Que ce soit un composant vide et modifions notre tableau de bord dans Index GS juste après Hey Profile Name Profile Block. Parfait. Maintenant, pour continuer, nous devons savoir comment nous pouvons réellement accéder à nos données utilisateur actuelles où les données utilisateur objet sont plus spécifiques. Donc, au lieu d'utiliser notre crochet de profil d'utilisation pour obtenir les données, nous pouvons réellement utiliser hors objet, et ensuite nous pouvons accéder à l'utilisateur actuel. Alors, allons le frapper et voir ce que vous recevez ? Donc, si je vais maintenant à ce tableau, si je regarde à l'intérieur du Consul maintenant, j'ai l'objet utilisateur désactivé actuellement connecté à l'utilisateur, donc il est géré par la base de feu. Ici, nous limitons différents jetons d'accès, jetons d' actualisation, nom d' affichage, e-mail et autres données. Mais nous sommes intéressés en ce moment par les données des fournisseurs que nous avons ici. Donc, il s'agit essentiellement d'un tableau de fournisseurs ou d'un tableau de méthodes Simon que nous utilisons en moment. Donc, comme vous pouvez le voir, ce moment, nous n'avons qu'un seul élément, qui est google dot com. Nous allons donc utiliser ces informations pour afficher que nous sommes actuellement connectés n'étaient pas à ce fournisseur spécifique. Et le fait est que si vous vous souvenez, nous mettons des auditeurs en temps réel pour nos données de profil. Donc, chaque fois que nous mettons à jour quelque chose, il se met à jour dans tous les endroits avec les fournisseurs. Cela ne fonctionne pas en temps réel, donc nous devons le gérer en utilisant l'état de réaction. Donc, d'accord, revenons au bloc fournisseur. Et ici, nous allons définir un nouvel état, que nous allons nommer est connecté, et ce ne sera pas une valeur de bowling. Ce sera un objet qui indiquera si nous sommes connectés à Facebook ou Google. Donc, nous aurons un objet avec deux clés, google dot com et facebook dot com, qui est fournisseur i d peut être trouvé que dans ce tableau, sorte que vous pouvez le voir pour Google, il est google dot com. Bon, donc pour Google dot com, nous allons vérifier si nous sommes connectés. Donc nous allons accéder aux données actuelles du fournisseur de points utilisateur. Donc, il est un tableau, et sous la pluie, nous pouvons en appliquer un pour vérifier si un élément est réellement justifie la condition. Donc, nous allons avoir ici nos données, et nous allons vérifier si certains de nos éléments de tableau où a le fournisseur I D ou google dot com. Si le fournisseur de données je d égale google dot com et la même chose que nous ferons pour Facebook. Alors copions-le. Et remplacons google dot com par facebook dot com. D' accord, bien. De cette façon, maintenant nous aurons disponible est connecté. Cela indiquera ce que nous sommes connectés à Google ou Facebook. Maintenant, définissons réellement notre marqueur. Donc, à l'intérieur de ce def, nous allons verser nos boutons ou nos attaques qui l'indiqueront. Et ici, nous aurons une charge hors rendu conditionnel. Mais pour l'instant, écoutez. Défiance, balisage esthétique. Donc, d'abord va être tacked élément. Donc, l'élément de pile sera proche, plantes, et il aura la couleur verte parce qu'il va être quatre Google à l'intérieur, nous aurons Aiken. Et ce que je peux avoir je peux hors de Google et il dira connecté. D' accord. Et maintenant, nous avons ce matin. Mettons-le ici en haut de la même façon. Nous allons postuler pour Facebook. Alors copions-le. Et remplacons la couleur par le bleu et je peux avec Facebook. D' accord. Ça a l'air bien. Maintenant, vérifions ça. Si nous allons au tableau de bord maintenant, nous sommes connectés. Donc, cela sera affiché lorsque nous serons réellement connectés à nos fournisseurs. D' accord, alors on va définir d'autres choses qui seront nos boutons pour se connecter à tel ou tel fournisseur. Alors mettons-nous un peu, fusionnons dans ce bloc, et ensuite nous allons définir nos fonds. Donc, le premier bouton va être pour Google. Donc, ce sera un élément de bloc. Il aura la couleur verte et à l'intérieur à nouveau. Nous allons voir et je viens et je peux être, Disons, aussi Google et nous allons nommer X lié à Google. La même chose sera pour Facebook. Copions-le. Et remplacons la couleur par le bleu Lynn à Facebook. Et je peux être Facebook. Bon, vérifions ça. D' accord. Ça a l'air bien. Donc, nous aurons ceci en bas boutons pour réellement se connecter au fournisseur. Et ces deux-là au dit que les gens ont quand nous sommes connectés. D' accord. Donc, nous allons d'abord verser notre rendu conditionnel pour le cas lorsque nous sommes déjà connectés. Donc, pour ces balises, nous allons mettre si est connecté, alors parce que c'est un objet, nous pouvons accéder à ses propriétés. Donc, si je suis connecté à google dot com sur Lee, alors je vais rendre cet élément de tag et la même chose en fait, nous le ferons pour Facebook. Donc maintenant, nous allons avoir un affiché sur Lee quand nous sommes connectés. D' accord. Ça a l'air bien. Et pour ces boutons, nous appliquerons le suivant. Donc, si nous ne sommes pas connectés à Google qui viennent, alors nous allons afficher ce bouton et la même chose fera quatre facebook. Donc, si nous ne sommes pas connectés à votre Facebook, alors nous afficherons ce type de bouton. Bon, vérifions ça. Si j'ouvre mon tableau de bord, je suis connecté à Google et je ne suis pas connecté à Facebook. Bon, donc maintenant la chose est en fait de faire quelques fonctionnalités pour appliquer tout avec un état. D' accord, donc d'abord nous devons définir étaient des gestionnaires. Donc, nous aurons au total pour les gestionnaires, pour les gestionnaires à UNL Inc de Google et Facebook, et deux gestionnaires à un lien vers Facebook et Google. Donc, nous allons les définir d'abord va être sur un lien sur le lien Facebook comme ceci. Ensuite, nous aurons Google non lié. Ensuite, nous aurons lié Facebook et LinkedIn Google et lien Google comme ceci. , D' abord, faisons peut-être des fonctionnalités non liées, donc ce sera un peu la même chose, et c'est très facile à faire. Donc nous allons créer une autre, comme, comme, une fonction commune que nous appellerons à l'intérieur sur le lien Facebook et permettant à Google qu'on appellera, vous savez, juste sur le lien, et puis nous allez recevoir ici fournisseur I d fournisseur. J' aime ça. Bon, donc on va appeler ça non lié de Facebook non lié comme ça, et ensuite on va mettre Facebook dot com et la même chose que nous ferons pour Gogol. On va mettre sur le lien Google dot com comme ça. D' accord, alors vous avez dissocié le fournisseur réel. Nous allons faire la prochaine chose que nous allons mettre d'abord, catch block, et nous allons demander en premier lieu s'il ne reste qu'une seule méthode de connexion pour l'utilisateur. Donc, il est possible que nous nous déconnections de Google, et puis nous nous retrouvons avec aucun fournisseur de connexion du tout de cette façon, compte sera abandonné et il n'aura aucune méthode de connexion, donc cela signifie que ce sera une sorte de cela. Nous voulons donc éviter cela. Et nous allons vérifier si la longueur des points de données du fournisseur de points utilisateur actuel est égale à un. Et nous voulions le lier. Nous n'avons donc qu'une seule méthode de connexion et nous cliquons sur non lié. Nous recevrons un avertissement. Nous allons lancer un nouvel éditeur, et nous allons dire que vous ne pouvez pas vous déconnecter pour, hum fournisseur I d. que nous recevons comme argument ici. Et maintenant nous allons attraper cette affaire que nous jetons ici, et nous allons la mettre alerte et éditeur d'art, nous dirons un meilleur message pendant quatre secondes. D' accord, donc si tout est cool ici et si nous disons aux fournisseurs connectés et que nous voulons nous déconnecter de l'un d'eux, c'est sûr. Donc, nous allons annuler point utilisateur actuel point non lié cette méthode, si je l'appelle, vous pouvez voir sur les liens un fournisseur du compte d'utilisateur et j'ai besoin de passer le fournisseur I D, qui va être fournisseur I d de nos arguments. Donc c'est une promesse ce qu'on va faire, on va attendre. Et parce que c'est un indice de réflexion attend, nous devons mettre un chant en face de la fonction. Donc, après que nous attendions, nous devons mettre à jour notre ensemble est connecté. Nous devons mettre à jour notre état local. Alors, qu'est-ce qu'on peut faire ? Nous pouvons réellement créer une autre fonction juste pour mettre à jour notre état afin que nous puissions l'appeler quelque chose comme cette mise à jour est connectée, et à l'intérieur nous pouvons passer le fournisseur I d et ensuite juste la valeur si c'est vrai ou tombe. Donc ici, fournisseur de rapports i d. Et quand nous nous dissocions, nous voulons le mettre à force. Donc, nous allons créer cette mise à jour est connecté nous allons recevoir le fournisseur I d. en argument. Et puis nous recevrons en fait, la valeur, quelque chose comme ça. Donc, à l'intérieur de cette fonction, nous allons appeler set est connecté ici, nous allons recevoir la valeur précédente à l'intérieur du rappel. Et ici, nous devons retourner et vous valoriser parce que c'est un objet. Nous voulons nous assurer que nous maintenons la structure. Donc on va revenir. Très bien, allons peut-être le mettre plus explicitement de cette semaine de rappel en retour et Alba Jet ici, nous allons fusionner l'état précédent comme ça et ensuite mettre à jour le fournisseur réel i d. Nous devons ouvrir ce type de parenthèses. Ensuite, nous devons citer le fournisseur I d comme une clé, puis révèle pacifier la valeur. Très bien, donc de cette façon, il mettra à jour l'objet avec le spécifié à partir de i d et de la valeur. D' accord. Bien. Ça a l'air très bien. Peut-être aussi, et une autre alerte ici avec alerte, peut-être juste info, et nous dirons, déconnecté du fournisseur déconnecté du fournisseur que j'aime ça à moins de mettre quatre secondes ici . D' accord. Maintenant, nous allons en fait lier ces gestionnaires à nos boutons, donc nous devons dissocier Facebook. Nous devons le mettre ici à l'élément de sac. Donc ici, nous pouvons avoir cela sur l'événement rapproché. Donc, pour cet événement unclos, croquer spécifier sur le lien Google, en fait, et la même chose pour Facebook. On va mettre des vêtements et on va mettre en lien Facebook cette fois. D' accord. Maintenant, il a suffisamment de fonctionnalités pour le tester. Alors ouvrons le tableau de bord. Cliquez sur cet élément proche. Donc, quand nous cliquons dessus, vous ne pouvez pas vous déconnecter de google dot com que parce que nous avons seulement la méthode de signature Google qu'un seul d'entre eux. Donc, si nous nous déconnectons de lui, nous ferons notre compte que tout droit pour aller maintenant c'est en fait et notre fonctionnalité de lien . Donc encore une fois, ce sera presque la même chose. Donc, nous allons créer une fonction commune comme UNL Inc. Donc, disons-le, peut-être par ici et nous allons le nommer. Laissons le lien. Très bien, Donc, il ne va pas recevoir un fournisseur i d. Mais l'objet fournisseur le même que nous avons utilisé à l'intérieur. Page de connexion. Voyons ce nouveau fournisseur Firebase Auth Firebase. Bon, donc je l'ai copié. Permettez-moi donc de le commenter. Et on va appeler ce lien et signer. Nous devons passer l'objet fournisseur que nous recevrons en argument. Donc pour Facebook, on va appeler la nouvelle Firebase de Facebook hors fournisseur. Importons d'abord la base de feu de firebase vers le haut. Très bien, regardez, l'entraîneur et la même chose fera pour Link Google. Alors copions-le. Et ici, nous allons appeler le fournisseur d'authentification Google. Très bien, ça a l'air bien. Maintenant, associons ces gestionnaires à l'avance avec nos boutons. Donc, sur clic, nous allons lier Google Et pour ce bouton sur cliquez sur un lien Facebook. D' accord. Ça a l'air bien. Alors, quelle sera notre stratégie ? Donc, il est en fait très, très simple avec la base de feu à nouveau, nous devons utiliser notre objet auth. Et ici, nous allons appeler notre utilisateur actuel et ensuite lier avec le lien pop-up avec pop up. Nous devons spécifier juste l'objet fournisseur que nous recevons comme un argument qui va être l'un d'entre eux, accord. Donc, encore une fois, c'est une promesse que nous devons attendre. Et une fois qu'il est mis à jour avec succès, ce qui est converti en fonction de course après qu'il est mis à jour avec succès, nous avertirons les utilisateurs avec alerte dans quatre. Disons connecté ou peut-être lié deux. Fournisseur. Utilisons la préparation de Rincon. Et parce qu'il est à l'objet fournisseur. Cette fois, cet objet fournisseur a le fournisseur I d comme clé. Et encore une fois, nous allons spécifier quatre secondes dans le cas d'un autre. On va mettre son message en alerte et on mettra notre message ici comme ça. Et à la fin de la journée, nous devons également mettre à jour notre état local. Donc nous allons appeler la même chose qu'avant la mise à jour est connectée. Et cette fois, nous allons tirer le fournisseur de points I D. Et puis nous allons mettre vrai parce que nous lions notre compte. Bon maintenant, ça semble bien. Vérifions ça. Il semble que nous ayons toutes les fonctionnalités. Laisse-moi vérifier. Ok, regarde bien. Maintenant, allons au tableau de bord. Si je clique sur le lien vers Facebook, voyons ce qui va se passer maintenant. me demandera de regarder dans mon buste Facebook parce que je me suis déjà connecté. Maintenant, j'ai lié à Facebook. Si je vais à l'authentification et si j'avais un nouveau, je peux voir que je dois me connecter fournisseurs associés à cet utilisateur. Donc, ça a vraiment fonctionné. Maintenant, si je Let's un clic sur Déconnecter de Facebook Maintenant, Je me suis déconnecté de facebook dot com. Si je clique sur Google, vous ne pouvez pas vous déconnecter de Google car c'est le seul qui reste. Et si je me rafraîchis à nouveau, vous pouvez voir Facebook disparaître. Donc, en fait, tout fonctionne. Très bien, donc c'était beaucoup, en fait, je suppose que c'est le bon moment pour finir cette vidéo. Donc on va tout ajouter à l'état de la scène, et ensuite on va mettre Facebook et Google en lien avec un compte créé fournisseur Block Who ? Très bien, on se voit dans la prochaine. 111. Créer des dashboard - Créer Avatar (partie 5): Hé, dans cette vidéo, nous allons continuer à construire un tableau de bord, et nous allons commencer notre gestion avec des avatars de profil utilisateur. Donc, dans cette vidéo, nous allons créer un bouton et nous serons en mesure de sélectionner une image de notre PC que nous allons ensuite télécharger sur la base de feu et utiliser comme image d'avatar. Allons-y. Donc, d'abord, créons un nouveau fichier sur leur tableau de bord. Le nom d'une voiture applaudit Bt. Ensuite, créons un composant vide. Pour l'instant, mettons bonjour à l'intérieur que dans Index GS, qui est notre tableau de bord juste après l'entrée comestible. Référençons le téléchargement d'avatar Bt comme ça. Ok, bien. Maintenant, commençons à construire notre composant. Donc, notre élément supérieur va être un développement pour le nom de classe. Nous allons lui donner un peu de marge à la côtelette, qui va être vide trois. Et puis nous voulons garder tout centré. C' est pour ça que nous avons mis le centre fiscal. Très bien, alors nous devons spécifier l'entrée hors type de fichier, mais nous ne voulons pas utiliser le type natif parce que ce n'est pas le meilleur moyen. Donc pour l'instant, gardons le texte et peut-être que si vous le voulez, vous pouvez le changer. Pour le faire. On doit mettre un dif ici. Ensuite, nous allons spécifier l'aperçu de l'étiquette. Et à l'intérieur de cette étiquette, nous allons mettre sélectionner un nouvel Avatar et aussi à côté de ce texte à l'intérieur de l'étiquette. On va mettre dans le fichier de type reporté, mais on va lui donner l'affichage d'aucun. Donc, nous cliquons réellement sur ce texte. Cependant, en même temps, nous cliquons sur cette entrée. Donc, nous allons verser le fichier de type port off comme ça. Et aussi, donnons-lui le nom de classe désactivé, n' affichez aucun. Et nous avons cet avertissement sur l'étiquette disant qu'il doit être associé au contrôle. Donc, pour cette entrée, définissons une idée quelque chose comme le téléchargement d'Al Atar. Et donnons cette idée à html quatre pour dis label. Donc HTM de quatre va être avatar. Applaudissez. D' accord. Aussi pour ce label, on va donner le nom de classe sur ce bloc de jeu. En outre, il va être pointeur plus grossier, et il va être un peu rembourré comme ça. Bon, vérifions ça. Maintenant. Si je vais au tableau de bord, ça a l'air sympa. Maintenant, nous avons ce bouton. Donc, lorsque nous cliquons dessus, nous pouvons réellement sélectionner des fichiers. Faisons en sorte que nous ne puissions sélectionner que des images ici. Donc, pour cette entrée, nous allons mettre un autre accessoire, qui est, sauf et ce sera une chaîne de types de fichiers acceptés. Mais spécifions ce type de fichier en dehors du composant. Donc, à l'avenir, il est plus facile de naviguer à l'intérieur de ce composant. Nous allons lier les types d'importation de fichiers, et il va être aussi boire des types de fichiers référencés par des virgules. Donc d'abord, nous allons accepter les fichiers PNG que les fichiers J PAC et aussi J pack de cette extension. Très bien, donc pour cela sauf prop, nous allons passer les types d'importation de fichiers et nous sommes prêts à y aller maintenant vérifions. Si nous cliquons dessus ici, nous pouvons voir les fichiers P et G et J. D' accord. Ça a l'air bien. Maintenant, quelle sera notre prochaine étape ? Donc, quand nous sélectionnons une image, nous voulons qu'un nouveau modèle soit ouvert, et à l'intérieur de ce mortel, nous allons voir l'aperçu. Nous devons donc définir le moteur d'Indo. Donc ici, à côté de l'étiquette, nous allons utiliser l'élément modèle de notre costume. Et à l'intérieur de ce modèle, nous allons mettre le modèle point Heather qu'à côté de lui. Nous aurons corps et aussi pied de page comme ça. Donc, pour le modèle, nous devons spécifier la propriété show. Il s'agit d'une puce qui indique si elle est ouverte ou non que sur le gestionnaire de hauteur lorsque ce modèle est fermé. Nous devons donc utiliser notre propre coutume. Espérons que nous avons créé plus tôt utiliser l'état mortel pour réellement obtenir ces valeurs. Alors nous allons l'importer. Et la structure D est ouverte, ouverte et fermée. Donc, pour l'événement de hauteur, nous allons appeler Close Handler et pour show, nous allons spécifier est ouvert. Donc, à l'intérieur de Moto Heather, nous allons porter le modèle de point de titre Donc ce titre va être juste et applaudir Peut-être comme ça, applaudir nouvel avatar et nous allons supprimer ce titre en bas ici. Puis à l'intérieur du corps. Nous allons spécifier autre chose. Et à l'intérieur du pied de page, nous allons mettre un fond qui va réellement télécharger notre avatar. Donc, tapez applaud Nouvel Avatar et pour ces boutons spécifieront l'apparence. Disons fantôme, et aussi nous allons le donner avec off 100 en spécifiant qu'il va être un élément de bloc . Bon, donc maintenant, comme vous pouvez le voir, nous n'avons pas de déclencheur pour ouvrir notre moto. Nous devons déterminer en quelque sorte quand nous sélectionnons le fichier. Donc, pour cela, nous allons utiliser sur l'événement de modification disponible sur l'importation hors fichier de type. Alors apaisons notre propre changement. Et pour ce changement, nous allons créer une fonction que nous nommerons sur le changement d'entrée de fichier. Très bien, maintenant, nous allons créer ici en haut et cette fonction parce que c'est un gestionnaire pour un événement. Cette fonction reçoit un objet d'événement. Très bien, donc cet objet d'événement aura cible et sous cible. Nous serons en mesure d'accéder aux fichiers réels que nous sélectionnons, et il vient toujours sous forme de tableau de fichiers. Alors mettons les fichiers actuels sous même les fichiers cibles. Donc, puisque ce sera toujours un tableau, nous devons vérifier que nous sélectionnons un seul fichier. Alors vérifions. Si les fichiers actuels de cette longueur est égale à un, alors nous allons appliquer notre logique. Donc, prenons d'abord notre premier élément du tableau. Alors mettons le fichier, et nous allons mettre les fichiers actuels et référencer le premier élément. Ensuite, nous devons réellement vérifier si le fichier que nous sélectionnons est le fichier valide, car peu importe ce que nous spécifions. Par ici. Je peux chercher n'importe quel fichier et le changer à tous les fichiers, puis je peux acheter May steak upload, Disons adjacent. Donc, nous voulons vérifier si ce fichier est en fait une image. Donc, ici en haut, allons spécifier les types moyens qui sont accessibles par nous. Pour cela, spécifions tous les types de fichiers disponibles, disons, acceptés. Donc, ici, nous allions spécifier un tableau hors chaînes. Donc d'abord, notre type de faisceau va être l'image slash p et G. Ensuite, nous aurons l'image slash j pack. Donc si je ne me trompe pas, c'est la bonne. Et aussi, nous allons avoir une image slash p j pack. D' accord, bien. Maintenant, nous devons créer une fonction d'aide qui vérifiera si ce fichier satisfait les types moyens de tableau . Donc, si notre type de fichier est l'un d'entre eux, nous allons donc créer une nouvelle fonction d'aide qui nommera est le fichier valide et il recevra le fichier comme un argument, et il va vérifier le type de fichier par rapport à ces valeurs. Donc, nous allons simplement vérifier les types de fichiers acceptés Inclut le type fille de fichier. Très bien, donc il retournera une valeur booléenne. Bon, maintenant ici, à l'intérieur. Ah, étaient le gestionnaire. On peut demander si on va demander si c'est valide, classer notre dossier, puis on fera quelque chose. Sinon, nous allons montrer une erreur à l'utilisateur qui. Oh, mon garçon, tu as choisi la mauvaise heure de fichier. Alors mettons-nous alerte. Ensuite, nous allons mettre un avertissement, pas une erreur, et nous allons spécifier, peut-être un type de fichier incorrect, et ensuite nous allons pauvre type de fille de fichier comme ça, et nous allons spécifier quatre secondes. Bon, alors qu'est-ce qu'on va faire quand on aura le dossier valide ? Tout d'abord, on va ouvrir notre fenêtre mobile. Mais juste avant de l'ouvrir, nous devons définir notre image que nous applaudissons. Donc, pour cela, nous allons créer un nouvel état. Donc, créons un nouvel état avec l'état d'utilisation, que nous nommerons. Disons juste l'image et définir l'image par défaut. Il sera réglé sur maintenant. Mais quand nous avons développé l'image sélectionnée. On va appeler set image, et on va mettre le fichier comme notre état comme ça. Bon, maintenant, vérifions ça. Donc, si je vais au tableau de bord, si je sélectionne un nouvel avatar, si je télécharge une image, accord, Motile s'ouvre. Maintenant, faisons la même chose. Mais sélectionnons le fichier Jason. Si je clique sur ouvrir, j'ai une application de type de fichier incorrecte, Jason. Donc, ça a vraiment fonctionné. D' accord ? Maintenant, quelle sera notre prochaine étape ? Notre prochaine étape consiste à afficher l'aperçu et à ajuster l'image. Alors comment nous sommes en mesure de faire cela, nous allons utiliser le paquet d'éditeur d'avatar de réaction qui vient d'un PM J'aime vraiment ce mini paquet. Cela nous donne l'occasion de personnaliser l'image téléchargée. Nous n'allons pas plonger dans trop de détails, mais nous allons juste en mesure de mettre à l'échelle notre image pour en avoir besoin. Alors d'abord, installons-le. Donc je vais ouvrir mon terminal et d'ici, que j'en ai un autre, c'est bon. Je vais npm installer l'avatar de réaction, éditeur et attendons qu'il soit réellement installé ou correct. On dirait que notre paquet a été installé. Réexécutons l'AP et P. M Run , commençons et voyons comment nous pouvons réellement utiliser ce paquet. Laissez-moi donc copier la commande d'importation. Laisse-moi le mettre en haut. Et comme vous pouvez le voir, j'ai besoin d'utiliser ce composant comme ça. Alors copions ceci. Copions ce composant que dans notre code pour le corps du modèle. Nous allons spécifier ce composant, mais d'abord, nous allons vérifier si notre image est définie à l'intérieur de l'état. Alors, laissons la mauvaise image. Si nous avons une image, nous allons afficher ceci à propos de notre composant d'éditeur et pour l'image. Nous allons spécifier notre fichier que nous avons l'état US pour With and Height Mobile limité à 200. Ensuite, pour la frontière, nous allons mettre disons, seulement 10. Et c'est cette bordure par bords que nous n'avons pas besoin de couleur. Nous n'avons pas besoin d'échelle, mais nous avons besoin d'un rayon de frontière. Nous voulons le faire encerclé. Donc, nous allons spécifier les radios frontière 100. Bon, maintenant, allons vérifier. Si je rafraîchis la page que je clique sur le modèle Sélectionnez un nouvel avatar. Si je clique sur cette voiture et frappe ouverte maintenant, je peux voir que j'ai cet élément Converse, qui est ce paquet. Et maintenant, je suis capable de l'ajouter un peu mon image. Très bien, donc ça a l'air bien, mais ça ne se centre pas. Cela signifie que nous devons ajouter un marché supplémentaire pour cette image pour cet éditeur d'avatar. Mettons un autre def autour de ça comme ça. Et pour ce def. Spécifions le flex d'affichage. Donc on va mettre le flex d'affichage. Justifier, disons, centrer, aligner les éléments au centre et mettons-le en pleine hauteur comme ceci. Maintenant, si j'avais un frais, vérifions ça. Permettez-moi de sélectionner une image à nouveau. Mais quand même, ça n'a pas l'air bien parce que ce n'est pas justifié. Au centre. C' est justifié Centre de contenu. Maintenant, laisse-moi essayer. Sélectionnez Nouvel avatar. Bon, maintenant a l'air bien. Il est centré. Ok, donc je suppose que c'est tout pour cette vidéo, et notre prochaine étape sera de télécharger l'image. Mais ce sera le sujet de notre prochaine vidéo sur cette étape. Envisageons nos changements et finissons cette vidéo. Donc nous allons ajouter tout à cet état de scène que nous allons nous engager, et nous allons mettre, disons, ont commencé à travailler avec l'avatar de l'utilisateur. Applaudissez. D' accord. Ça a l'air bien. se voit dans la prochaine. 112. Créer un tableau de bord - Téléchargez l'Avatar vers Firebase (partie 6): Hey, dans cette vidéo, nous allons continuer à travailler sur le téléchargement d'avatar entre le composant, et nous allons terminer le téléchargement des eaux que sera. Allons-y. La première chose quibbled vous alliez définir un gestionnaire pour un événement de clic pour applaudir votre bouton avatar. Donc, pacifions sur l'événement click et créons une nouvelle fonction que nous nommerons lors du téléchargement . Cliquez sur. Ensuite, nous allons mettre ce gestionnaire juste après le changement d'importation de fichier, et maintenant nous devons en quelque sorte obtenir l'accès à l'image réelle. Cette fois, cette image est éditée. Nous devons donc avoir accès à cet élément inverse. Donc, si nous l'inspectons, c' est une conversation à l'intérieur de Dom car il s'agit de notre composant d'éditeur que nous utilisons à partir du paquet. Bon, Donc, afin de comprendre ce qui se passe réellement, comment nous pouvons obtenir l'image dont nous avons besoin pour naviguer vers leur documentation que si nous faisons défiler vers le bas , nous avons limité un exemple d'accès à l'image résultante. Ici, nous avons confiné cette méthode obtenir l'image mise à l'échelle pour converser. Mais comme nous pouvons le voir dans cet exemple, il utilise un composant basé sur la classe, et aussi il utilise quelque chose appelé références. Donc, les références en réaction sont la façon d'accéder directement aux éléments Dom ou de réagir directement aux éléments là où il serait plus approprié de dire par programme. Voyons donc comment nous pouvons réellement mettre une référence sur notre composant éditeur d'avatar à l'intérieur d'un composant basé sur la fonction. Donc, d'abord, nous devons importer un crochet que nous n'avons pas vu auparavant de réaction, qui est utilisé ref, qui signifie référence d'utilisation. Maintenant, nous devons créer une nouvelle référence, et nous allons nommer ce graphique de l'éditeur d'avatar de référence, et nous allons appeler ce crochet comme ceci. Maintenant, nous devons passer cette référence à ce composant. Donc nous allons spécifier Raph, et ensuite nous allons verser l'éditeur d'avatar rude. Donc maintenant, nous sommes en mesure d'accéder à ce, disons, avatar, composant éditeur en utilisant cette référence, qui est notre eau que j'ai fait trop rugueuse. Donc, sur le téléchargement cliquez. On va jeter un oeil. On doit accéder à cet éditeur. Obtenez la compétence d'image à rechercher pour accéder à la valeur réelle de cette référence. Nous devons mettre le prochain alors mettons la conversation, et nous allons dire que nous allons accéder à l'avatar edita Ralf dot current. Donc, il est l'élément courant de cette référence car il peut également être indéfini. Nous nous assurons donc que nous accédons à l'élément actuel. Ensuite, nous pouvons accéder à la méthode réelle, qui va être mise à l'échelle de l'image, deux caméras. Alors appelons-le. Et maintenant, nous pouvons réellement avoir notre élément inverse. Mais le fait est que nous ne pouvons pas travailler avec l'inverse. Nous ne pouvons pas le télécharger. On ne peut rien faire avec ça. Donc, nous devons d'abord le convertir en un ancien que nous pouvons applaudir à la base de feu afin que nous puissions réellement convertir Converse en un fichier blob. Et un fichier bloke est juste un morceau hors fichier représenté au format binaire. Donc, en utilisant ce format, nous pouvons applaudir. Donc, sur chaque élément inverse, nous avons cette méthode qui est appelée à bloquer, et la chose avec cela pour bloquer la méthode qu'elle n'accepte que les rappels. On ne peut pas utiliser de promesses. Donc, pour cela, je veux convertir cette méthode basée sur Colback en une promesse. Donc, pour ce faire, nous allons faire la prochaine ici en haut. Nous allons définir une nouvelle fonction que nous nommons get block, et cette fonction recevra une conversation comme celle-ci et cette fonction va retourner et vous promettez l'objet. Alors mettons le retour nouveau, je te le promets. Donc on ne l'a pas vu avant. Donc, pour créer une promesse réelle, nous devons mettre un aperçu de rappel qui reçoit deux arguments, résultat et rejet. Nous appellerons donc cette méthode pour réellement résoudre ou rejeter la promesse. Alors ici, à l'intérieur, qu'est-ce qu'on va faire ? On va appeler Converse à Bluff. Ensuite, nous allons spécifier ce rappel avec le avec le résultat qui sera le bluff réel. Et à l'intérieur de ce dos froid, on va vérifier. Si notre sang existe et que tout va bien, alors nous allons résulter de cette promesse que nous allons la résoudre. Donc le résultat et la valeur vont être le véritable conseil de explosion. Si nous n'avons pas d'éléments de bloc allaient rejeter avec une nouvelle erreur et pour un message d'erreur , nous allons dire quelque chose comme des protestations de fichiers jamais. D' accord, donc en utilisant cette façon maintenant, on a converti une méthode froide, en une promesse. Donc maintenant on peut utiliser ça exploser et ce qu'on peut faire, on va mettre pour essayer le bloc de capture ici et maintenant ce qu'on va faire, on appellera ça exploser comme ça. Ensuite, on va mettre de la toile à l'intérieur. Et parce que c'est une promesse, maintenant nous devons attendre. Et au cas où nous aurions une erreur, il sera attrapé par ces blocs ici. Donc, parce que nous utilisons awaits, Index, nous devons convertir cette fonction en fonction n'importe quoi. Très bien, Donc le résultat va être notre explosion que nous pouvons applaudir au stockage de fichiers maintenant sur le stockage . Comment on peut faire ça. Nous n'avons encore rien téléchargé. Revenons à Firebase Doggy s. Et ici, nous allons importer une autre bibliothèque à partir de Firebase. Revenons à Firebase Doggy s. Et ici, Cette fois, il va être Firebase slash stockage maintenant pour accéder au stockage exactement de la même manière que nous allons exporter, const stockage point app de stockage tout droit. Et le stockage A pie est très similaire au stockage de base de données. Nous devons spécifier la référence qui est en fait le chemin vers le fichier, et ensuite nous devons l'applaudir. Alors maintenant, ici. abord, nous allons spécifier le chemin sous lequel nous allons stocker notre image. Il va être, disons, une référence de fichier d' avatar comme celle-ci afin que nous allions accéder à notre objet de stockage à partir de base de feu divers. Ensuite, on va mettre point et ensuite on appellera référence. Donc nous allons stocker nos fichiers sur leur passé, qui est slash profil utilisateur i d. donc nous devons vous y rendre. I d Donc, nous allons utiliser le crochet de profil, Donc profil const, nous allons obtenir du profil d'utilisation. Ensuite, nous allons spécifier le point de profil votre i d et nous allons le convertir en interpolation de chaîne . Et puis, en fait, nous allons accéder enfant et enfant va être avatar. Bon, donc ce que nous faisons ici, nous spécifions ces chemins dans notre stockage, donc il représentera notre dossier et cet enfant, ce sera un fichier nommé Avatar. Nous ne mettrons aucune extension car elle sera automatiquement prise en charge par la base de pompiers. Bon, maintenant, prochaine chose que vous allez télécharger le fichier. Alors mettons le résultat de l'avatar de téléchargement const. Ensuite, on va mettre un fichier d'avatar de poids Arraf dot mettre. Et puis si nous l'appelons, nous pouvons voir que nous pouvons réellement mettre soit blob ou tableau tampon. Donc, mettons notre blub ici, et ensuite nous allons aussi deuxième argument. Nous pouvons spécifier des méta données. Donc, pour les données de matière, spécifions l'en-tête de contrôle de trésorerie. Nous pouvons donc encaisser nos images à l'intérieur du navigateur. Alors mettons un contrôle de trésorerie. Et pour le contrôle de la trésorerie, nous allons spécifier public que Marx Age. On va au port 3600, ce qui représente une heure en secondes. Ensuite, on va multiplier par 24 pour obtenir la valeur réelle d'un jour, puis on multipliera par trois. Donc maintenant, nous avons des marques d'âge. Trois jours spécifiés en secondes. Bon, maintenant que nous avons ah, Petar, Petar, résultat de téléchargement laisse-moi supprimer cette colonne Sammy d'ici. Maintenant que nous avons un résultat d'avatar Plourde, nous devons obtenir le Ne pas charger votre l hors de notre fichier afin de pouvoir l'enregistrer dans notre base de données. Donc nous allons mettre un téléchargement constant, Ural. Donc nous allons appeler télécharger notre référence de point de résultat de l'eau. Ne vous trompez pas, et n'appelez pas directement télécharger votre l Parce que, comme vous pouvez le voir, il est obsolète ID d'utiliser référence qui obtiennent ne pas charger euro. Donc on va appeler Ralf, et ensuite seulement on appellera. Ne chargez pas l'euro. Il renvoie une promesse. Alors attendons ça. Et maintenant on peut le stocker à l'intérieur. Notre base de données permet aux utilisateurs pauvres avatar Raff qui représentera notre référence à l'intérieur de la base de données en temps réel . Alors, quelle sera la base de données Daut Ralf que ce ne sera ? Profils slash profil point votre i d et ensuite on va mettre enfant d'une voiture. Et maintenant on va appeler l'utilisateur Avatar Raff, set, ne charge pas d'euro. Et juste après ça, on va appeler les infos sur les points d'alerte d'une voiture a applaudi. Et mettons-nous quatre secondes. Et au cas où n'importe quel éditeur, nous allons alerter n'importe quoi et nous dirons notre message en quatre secondes aussi. Et aussi juste avant d'enregistrer ce fichier, spécifions également l'état de chargement. Donc, ici, nous allons simplement créer est le chargement et set est le chargement qui par défaut, sera défini votre faux. Donc, lorsque nous effectuons toutes les opérations juste avant cela, nous appelons set est le chargement à true. Et puis quand nous avons fini, nous appelons set est en train de charger à false Et au cas où nous avons échoué, nous appelons aussi Set est chargement à false maintenant quand nous l'utilisons réellement, nous l'utilisons réellement pour ce bouton pour le rendre désactivé. Donc désactivé ne sera que lorsque nous aurons son état de chargement activé. Très bien, donc c'était beaucoup. Maintenant, essayons-le en fait. Alors laissez-moi rafraîchir la page. Laisse-moi ouvrir, tableau de bord. Laissez-moi sélectionner Nouvel Avatar. Je vais cliquer sur cette voiture. Je vais cliquer sur Applaud nouvel Avatar, et je peux voir Avatar a été applaudi. Bon, maintenant vérifions d'abord dans notre base de données. On dirait qu'on a un avatar ici. Comme vous pouvez le voir maintenant, nous avons ce public qui est malade, qui conduit au stockage Firebase. Vérifions ça. Notre rangement. Et ici, nous pouvons voir un dossier. Cliquons dessus. Ensuite, nous avons l'utilisateur I d. et à l'intérieur nous avons un fichier avatar. Donc, quand nous cliquons dessus, vous pouvez voir que nous avons votre l que nous pouvons cliquer, et il nous ouvrira l'image dans vous appuyez sur. Mais la chose est que maintenant nous avons téléchargé avec succès le fichier pour le stockage de base de feu. Bon, alors maintenant comment pouvons-nous réellement afficher cette image ? Eh bien, je suppose que c'est le sujet de notre prochaine vidéo, parce qu'en ce moment, ça devient trop long. Bon, alors sauvegardons tout pour avoir le système. Venons-y nos changements et disons que l'utilisateur a téléchargé Avatar. Très bien, à la prochaine. 113. Créer un dashboard - Afficher des initiales des utilisateurs et des noms d'utilisateur (partie 7): Hé, dans cette vidéo, nous allons afficher l'image de l'avatar téléchargée dans notre tableau de bord. Allons-y. Tout d'abord, je veux montrer le composant de notre costume, qui est le goudron d'Allah. Donc, j'ai navigué vers sa documentation, et j'ai ouvert Alit sont sous affichage de données. Donc, voici la chose cool à propos de ce composant qu'il peut réellement afficher les initiales de nom si nous n'avons pas d'image. Alors ouvrons un exemple. Et voyons comment nous pouvons mettre des initiales de nom si nous n'avons pas de fichier source. Nous devons donc simplement passer ces initiales au composant Avatar. Donc, ce que j'ai proposé de faire, j'ai proposé de créer un wrapper autour de ce composant. Donc, chaque fois que nous n'avons pas d'image rebelle les initiales de nom d'affichage. Donc, sous les composants, créons un nouveau fichier, que nous nommerons profil Avatar. Alors que ce soit un composant qui renvoie ce Ah, quels sont les composants qui viennent de notre costume comme ça ? Alors, quels accessoires devrions-nous spécifier pour ces Avatar ? Donc on va avoir besoin du nom de l'utilisateur, donc on va le passer comme accessoires. Donc, nous allons nom destructeur et tout ce qui va à ces composants, il sera redirigé vers le composant avatar de notre série. Donc, disons-le, les accessoires de Teoh Avatar. Et puis répartissons sur tout l'élément. D' accord, bien. Maintenant, à l'intérieur de cet avatar, nous devons porter les initiales du nom. Mais disons que notre nom est quelque chose comme Andrew, et quelque chose se passe après. Alors, comment nous pouvons obtenir les initiales de nom réel, nous allons créer une fonction d'aide. Donc supprimons ceci. Et sous MISC, créons un nouveau fichier que nous appellerons helpers doggy s et hittable définir toutes nos fonctions raisonnables qui nous aideront pendant le code. Donc, nous allons créer une nouvelle fonction que nous nommerons, disons, obtenir des initiales de nom. Il recevra le nom d'utilisateur comme argument, et notre logique sera la suivante. D' abord, on va le diviser en récompenses, et ensuite on va vérifier si on a deux mots ou plus dans notre surnom, puis on enverra les premières lettres aux paroisses. Alors prenons d'abord la zone réelle. On va le nommer, disons le nom partagé. Ensuite, on va donner le nom de point à l'opéra. Le cas sera converti en majuscules à l'avance, et ensuite nous allons le diviser par des espaces vides. Donc, de cette façon, nous finirons avec un tableau de mots. Et puis nous allons vérifier si la longueur du document du tableau de noms partagés est supérieure à un. Donc si on a deux récompenses, au moins on va retourner le nom de Split, premier mot. Et puis à partir du premier mot, nous avons besoin de la première lettre. Donc on va ouvrir les deuxième crochets, et on va mettre le premier élément. Ensuite, on va mettre le signe plus pour venir couper dans un quartier. Ensuite, nous allons mettre contre le nom de Bleidt cette fois la référence Hubble. Le deuxième élément. Le deuxième mot. Donc on va en mettre une et encore, on va faire référence à la première lettre. On a mis zéro. Très bien, au cas où nous n'aurions qu'un mot par défaut, nous reviendrons. Il suffit de diviser le nom zéro, qui est Premier mot. Et puis premier élément première lettre. D' accord. Et nous allons également explorer cette fonction à partir d'ici. Maintenant, à l'intérieur de notre avatar de profil ici à l'intérieur de crochets bouclés, nous pouvons appeler, obtenir le nom et il montre, et nous pouvons passer le nom que nous recevons des accessoires. Bon, maintenant, allons à Avatar. Applaud Bt et composant. Et ici, utilisons ce composant. Donc on va mettre le profil de la voiture d'Allah comme source. Nous allons spécifier l'avatar de point de profil, puis pour le nom. Nous allons spécifier le nom du point de profil. Ainsi, lorsque nous avons un fichier source, le fichier source sera affiché. Si nous ne l'avons pas, nos initiales seront là. D' accord, sauvegardons ça et jetons un coup d'oeil. Qu' est-ce qu'on a ? Revenons à notre tableau de bord et maintenant je vois que je n'ai pas d' image d'avatar . Ok, peut-être un Let's uploader un. Allons l'ouvrir. Nous allons télécharger New Avatar Avatar a été téléchargé, et encore je peux voir toutes les données. D' accord, c'est parce qu'en fait, on n'a pas modifié nos contacts. Nos contacts de profil. Allons au contexte de profil et les données que nous transmettons ici n'ont pas Ah, ce qui sont mais à l'intérieur d'Al Atar Applaud BT dans la source américaine. J' ai spécifié le profil Avatar. Ce profil provient du contexte de profil d'utilisation. Alors, qu'avons-nous besoin de faire maintenant que nous re les données de la base de données ? On peut le détruire d'ici à partir de notre instantané, n'est-ce pas ? Aussi simple que ça. Alors, nous allons aussi le transmettre à nos contacts . Et maintenant, jetons un coup d'oeil. Si je vais à mon tableau de bord maintenant, j'ai cette image. Mais tout d'abord, ça a l'air vraiment bizarre, alors modifions-le un peu. Allons au profil Avatar et par défaut, juste avant d'étaler tous les accessoires. Mettons cercle pour qu'il soit encerclé par défaut. Vérifions ça. Maintenant, il est encerclé, mais la taille est vraiment, vraiment petite. Alors quoi, nous pouvons dio à l'intérieur du bouton de téléchargement d'avatar ? Nous pouvons appliquer des noms de classe et cela va le corriger. Nous savons que notre image, notre inverse que nous avons spécifié pour notre éditeur de tar est de 200 par 200. Donc, nous allons appliquer avec 200 pixels de hauteur, ces classes que vous avez confinées dans les classes utilitaires. Alors sauvegardons ça. Et si nous allons au tableau de bord maintenant, nous avons la bonne taille pour le compte-gouttes M A. Mais l'image elle-même est vraiment petite, donc nous devons réciter l'image réelle. Pour ça. J' ai créé ce nom plus que vous pouvez également trouver à l'intérieur des utilitaires, qui est l'image pleine taille, et il donnera avec une hauteur 100% à l'image. Donc maintenant, ça a l'air bien. Cependant, il y a un petit problème. Si j'ai retardé cette image, nous allons la livrer d'ici maintenant. Comme vous pouvez le voir, si nous n'avons pas d'image, je reçois des initiales de nom, mais elles sont trop petites aussi, donc nous devons également ajuster la taille du téléphone. Donc, pour cela, mettons devant une énorme taille et tout ira bien. Vérifions ça. Maintenant. J' ai aussi la taille correcte pour mon texte. Alors maintenant, peut-être que nous allons changer le surnom et mettre deux mots. Mettons et être. Et vérifions si nous avons deux lettres comme initiales et dans Avons-nous un affiché ici  ? Joli. Essayons d'applaudir la voiture du Nouvel Allah. Sélectionnons-le. Et Avatar a été téléchargé, l'air agréable et fonctionne parfaitement. Ok, bien. Je suppose que c'est le bon moment pour finir cette vidéo. Alors engageons nos changements avec le message. Quelque chose comme affiché ont un avatar utilisateur tar. Ok, parfait. se voit dans la prochaine. 114. Ajouter le bouton de créer et la fonctionnalité de créer des pièces en pièce: Salut, bienvenue dans cette vidéo. Nous allons ajouter un nouveau tableau de bord bas de billow qui nous aimera pour créer un nouveau salon de chat . Allons-y. Revenons au code et aux autres composants. Nous allons créer un nouveau fichier que nous nommerons Create room bt n motile Don't. Oui, Allons compléter Ce composant pour l'instant. Que ce soit juste bonjour et utilisons-le à l'intérieur. A l'intérieur de notre barre latérale Ouvrons la barre latérale. Et ici ci-dessous tableau de bord Tugle, nous allons mettre créer la salle Bt et Moto. Bon, maintenant, ne nous engageons pas à l'adversaire du disque. Et ici, nous allons définir un bouton qui ouvrira une fenêtre modèle avec formulaire à l'intérieur que nous allons remplir pour créer réellement un salon de chat. Donc, tout va bien se passer, peut-être un composant diff. Donc à l'intérieur, on va mettre le bouton qui sera notre tireur pour ouvrir la fenêtre de la bouteille. Donc on va mettre je peux en vue. Donc, ce que je peux avoir icône off peut être créatif, et le texte va créer un nouveau salon de chat. Bon, donc ce bouton va être un élément de bloc il aura la couleur verte et sur clic on va , Teoh, ouvrir notre moto. Donc, nous allons réellement utiliser notre crochet personnalisé pour gérer l'état mortel. Donc, ce crochet est utilisé État du modèle à partir d'ici commencé, l'infrastructure est ouverte, ouverte, puis fermée. Et pour un clic sur le bouton, Nous allons verser ouvert. Bon, maintenant, définissons notre fenêtre mobile. Alors mettons l'élément de modèle de notre costume. Nous aurons, comme toujours, Heather mortelle. Alors on va avoir le corps et la falter. D' accord, bien. Donc à l'intérieur de Heather, on va mettre le titre plus. Ils vont pointer le titre et à l'intérieur. On va mettre quelque chose comme une nouvelle salle de chat et enlever cette idole d'ici. Bon, à l'intérieur du corps, on va définir la forme et l'intérieur du pied, ou on va mettre un bouton pour soumettre le formulaire. Alors créons d'abord le bouton. Donc, ce sera un élément bouton. Il va être bloqué. Le composant et l'apparence vont être primaires. Ok, je suppose. Apparence définie sur primaire par défaut. Mais gardons-le tel qu'il est. D' accord ? Créer un nouveau salon de chat. Maintenant, sauvegardons ça et voyons, Qu'est-ce qu'on a ? Donc maintenant, nous avons ce créer nouveau salon de chat, ont jamais. On n'a pas la marge, alors allons-y. Donc, pour cette raideur, mettons le nom de la classe et ajoutons la marge supérieure deux. D' accord. L' air bien maintenant à l'intérieur de ce corps allait définir notre forme. Donc, nous allons pauvre élément de forme de notre costume. Et à l'intérieur de ce né, nous allons définir nos éléments d'entrée, et ils sont regroupés sous des composants de groupe formés. Donc, nous allons pauvre groupe de formulaire et à l'intérieur de ce formulaire. Mais ouvert aura la première étiquette de contrôle. Et puis nous allons mettre le contrôle des formulaires, qui sera l'importation réelle elle-même. Faisons comme ça. Donc, à l'intérieur de l'étiquette de contrôle, nous allons au nom de la salle de port au premier abord et le contrôle de formulaire va être le nom, le nom, et l'espace réservé va être un espace réservé va être quelque chose comme entrer le nom du salon de chat et trois canards, et il va être un composant auto-fermé parce qu'il est une entrée. Bon, donc si je survole dans ce groupe de formulaires, il dit que c'est qu'il ne définit pas, alors nous allons l'importer de notre costume. Bon, alors définissons notre deuxième entrée. Disons serait en fait et voir, qu'est-ce que nous avons. Donc, si nous allons cliquer sur créer une nouvelle salle de chat, rien ne va se passer parce que nous n'avons pas spécifié show prop pour la fenêtre mobile. Donc, nous allons mettre est ouvert et sur la hauteur, nous allons mettre un maître de vêtements. Très bien, ça a l'air bien. Maintenant, vérifions ça et je vois que nous avons ajouté beaucoup d'espace ici. Donc, laissons une marge médiocre en haut tout maintenant il l'est. Ok, ouvrons ça. Et ici, nous pouvons voir que nous avons notre contribution, mais c'est un peu off, pas plein avec. Alors réparons rapidement. Et quatre jours forment des éléments. Nous le ferons pour qu'il le fasse prendre tout avec l'élément wrapper. Très bien, ça a l'air bien. Maintenant, passons à présent et créons un deuxième groupe étranger, qui va être la description de la chambre. Donc, pour ce groupe de réforme, aussi, nous allons copier l'étiquette de contrôle sur le contrôle de formulaire comme celui-ci Pour cette étiquette de contrôle, nous allons spécifier la description, et pour ce contrôle de formulaire, nous allons verser un composant zone de texte. Donc, laissons une mauvaise propriété de classe de composant. Ça va être une zone de texte que sa Rose. Par défaut sera égal à cinq. Le nom va être une description. Et l'espace réservé sera Disons entrer à Rome. Description. D' accord. Ça a l'air bien. Maintenant, jetons un coup d'oeil si je clique dessus. D' accord. J' ai une description. J' ai un vrai nom. Ok, maintenant, peut-être définissons notre état pour les données réelles. Alors quoi ? Nous allons Ford, nous allons définir votre état que nous allons nommer, forme, forme, valeur et définir la valeur étrangère comme fonction de mise à jour. Votre État sera donc le prochain objet, et j'ai suggéré de le mettre en dehors de la composante parce que nous allons le réciter à la valeur initiale quand nous le soumettrons. Mais nous allons soumettre le formulaire. Alors mettons dans le formulaire de spectacle. Et ce sera un objet avec un aperçu de nom et de description. D' accord. La même chose que nous avons le nom prop pour notre entrée. D' accord, donc tu es restée près. La forme par défaut sera la forme initiale. D' accord ? En outre, les gens ont besoin de l'état de chargement. Définissons à l'avance. Nous l'utiliserons quand nous soumettrons le formulaire. Donc votre état va être faux. Bon, maintenant, nous devons d' abord gérer quand nous devons prendre les données. Donc, quand nous utilisons notre propre événement de changement Donc, nous allons quatre const sur le changement de formulaire Et la chose avec notre costume, lorsque nous utilisons sur l'événement de changement, il nous donne automatiquement la valeur comme premier argument, pas l'objet d'événement. Nous aurons donc de la valeur ici. Donc, nous allons verser la valeur de formulaire CET comme valeur. Et en fait, c'est légèrement différent avec nos formes de costume. Lorsque nous avons un composant de formulaire dans notre certitude, il vous donne automatiquement pas la valeur de l'entrée réelle que vous l'ajoutez. Mais il vous donne la valeur de l'ensemble du formulaire, il est donc vraiment pratique de l'utiliser avec l'état d'utilisation. Très bien, donc sur ce changement de formulaire, nous allons au port pour notre composant de formulaire. Donc, sur le gestionnaire de modifications va être sur le changement de formulaire. Maintenant. Nous devons également valider nos données et d'abord, nous allons associer l'état réel au formulaire. Donc, il a cette propriété appelée valeur de formulaire. Donc, il doit être un objet qui interagit avec la forme juste notre état. Bon, donc on va faire une mauvaise valeur de forme. Et cet événement sur change nous donnera la nouvelle valeur de formulaire lorsque nous mettons à jour n'importe quel élément de ce formulaire. Alors, quel sera notre objet à la fin ? D' accord. Donc, comme je l'ai déjà dit, nous devons maintenant valider d'une manière ou d'une autre les données, le formulaire quand nous avons soumis. Eh bien, notre costume nous fournit si avec des méthodes d'aide pour atteindre cela, nous pouvons définir un schéma que nous pouvons soumettre à notre joint, puis notre costume vérifiera par rapport à ce schéma. Alors définissons notre schéma. Je suis ici en haut pour notre formulaire, Définissons le modèle. Et ici, nous allons utiliser le schéma que nous importons de notre costume que nous allons mettre le modèle. Et à l'intérieur de ce modèle, nous devons mettre un objet qui représentera notre état. Donc nous aurons un nom. Elle doit avoir la même forme que notre état. Donc le nom va être de type chaîne, qui vient en fait de types de schéma. Donc, nous allons structurer la chaîne ou peut-être les types de points de schéma de cet objet, nous allons d type de chaîne de structure. Ensuite, nous allons utiliser le type de chaîne pour définir ce nom va être un rétractable. Donc type de chaîne, alors nous allons mettre est nécessaire pour effectuer la validation et un autre message va être tourné. Le nom est requis tout droit, et la même fera l'affaire. Quatre descriptions. Copions-le. Renommons en description et disons que la description est nécessaire le cool Pensez à cette validation de schéma moral qu'il sera validé en temps réel. Maintenant, nous devons soumettre ce schéma à notre formulaire. Donc, nous allons trouver ce composant de formulaire. Et ici comme motile, nous allons spécifier notre schéma Moto, notre objet modèle ici. Bon, maintenant nous devons réellement créer la fonction de soumission. Donc, tout d'abord, nous allons en fait sur le changement de formulaire. Il n'est pas optimisé ici parce que nous avons beaucoup hors états qui changent constamment, par exemple, est ouvert et valeur étrangère. Donc, chaque fois que nous aurons sur le changement de formulaire en cours de création et vous copiez cette fonction. Alors mémorisons-le à l'avance pour le rendre plus optimisé. Très bien, Et maintenant, créons notre fonction on submit. Donc, nous allons l'appeler disons sur soumettre et ce sera une fonction de puits à l'avance et ici la première étape sera de valider réellement les données. Alors, comment peut-on faire ça ? Comment il peut valider nos données par rapport au schéma que nous définissons ici. Nous devons réellement utiliser une référence pour référencer notre composant de formulaire, puis en utilisant cette référence, nous pouvons appeler ses méthodes internes pour le valider. Qu' est-ce qu'on peut faire maintenant ? Nous savons que nous pouvons utiliser l'utilisation ref de act. Alors mettons-le ici. Appelons la forme, ref, et ensuite nous allons appeler use ref de act. Ensuite, nous allons passer ce formulaire ref à ce composant de formulaire. Si rude va être forme, souffle et entendre. La première étape sera si la forme ref point courant contrôle point. Donc cette méthode de vérification est disponible sur ce composant de formulaire auquel nous accédons directement ici , donc cette vérification validera ces données validera notre valeur de formulaire, qui est notre état par rapport au schéma que nous définissons ici. Donc, si tout va bien, il reviendra à vraie valeur Bullen. Si ce n'est pas le cas, ce sera faux. Nous allons donc vérifier si notre vérification de la valeur du formulaire n'a pas réussi. Donc si nous avons une fausse valeur, alors nous allons simplement revenir de cette fonction comme conseil. Nous allons mettre à jour notre base de données avec la nouvelle salle. Donc, versons CET se charge à true avant toute tâche asynchrone. Et ici, nous allons créer un nouvel objet que nous allons enregistrer dans la base de données. Donc, disons de nouvelles données de chambre. Il va en fait être, ah, ah, où notre forme d'état valeur. Mais aussi nous allons modifier une autre propriété qui va être créée à donc ici nous allons répandre toute la valeur de forme que nous avons, et puis nous allons mettre créé à et puis nous allons importer la base de feu de Firebase vers le haut et puis ici a créé à nous allons verser firebase dot base de données dot dot server valeur horodatage point. Maintenant, nous avons les données neuronales complexes que nous devons enregistrer dans la base de données. Alors mettons try catch blawg avant toute tâche asynchrone. Et au cas où mieux, on va verser. CET se charge à false, et nous allons tuer le point d'alerte Meilleur message d'erreur avec quatre secondes. D' accord. Ça a l'air bien. Maintenant, nous allons appeler la base de données d'attente pour Project de Firebase. Ensuite, on va mettre le Dr Ralf pour cette réf. Nous allons spécifier seulement les chambres afin de garder nos chambres sous les chambres, chemin à l'intérieur de la base de données et de pousser. Et vous, disons la valeur deux base de données de sorte que la clé est automatiquement générée. On va appeler la méthode push, donc à l'intérieur des écoles, on allait passer de nouvelles données de chambre. Donc, une fois que nous avons des données dans notre base de données, allons définir le chargement de deux chutes et nous allons réinitialiser notre état initial. Alors appelons la valeur de forme sat. Ce sera la forme initiale, et après cela, nous devons nous assurer que nous sommes également près de la fenêtre du motel. Alors appelons aussi des vêtements. Et puis mettons une autre alerte avec des infos et on va dire valeur étrangère. Laisse-moi ouvrir des citations. On va dire un nom de point de valeur étrangère ou en fait, laissez-moi l'appeler avant ça comme ça. Donc la valeur de formulaire va être nous dirons a été créé. Et encore une fois, quatre secondes comme toujours. D' accord, donc ça a l'air bien. Maintenant, nous avons réellement besoin d'utiliser est le chargement et sur le formulaire soumettre. On va le mettre pour ce bouton qu'on va mettre sur un clic ici et on transmettra la soumission comme ça. Et maintenant utiliser ceci est l'état de chargement. Nous allons l'utiliser pour ce bouton. Nous allons le rendre désactivé lorsque nous avons est le chargement défini sur true. Très bien, c'était beaucoup. Maintenant, essayons de le tester. Alors maintenant, laissez-moi me rafraîchir juste pour m'en assurer. Laissez-moi entrer. Bonjour, alors je vais mettre autre chose. Et ici, si je le laisse vide, vous pouvez voir que la description est requise. Le formulaire est en train d'être validé en temps réel. C' est parce que nous avons défini le schéma. Très bien, pauvre bonjour. Et mettons la description de cette pièce. Cliquez sur Créer un nouveau salon de chat et nous pouvons voir que l'alerte n'est pas une fonction. Ok, peut-être qu'on le bouge comme cette alerte. D' accord. erreur du point d'alerte a été le problème réel. J' ai appelé juste e r R, mais c'est une erreur. Alors c'est mon pari. Bon, maintenant, essayons encore une fois. Créer un nouveau salon de chat. Mettons bonjour description. Hé, trois nouvelles autorisations de chat ce soir. C' est très bien, car nous devons également définir des règles de sécurité pour notre base de données. Alors ouvrons les règles et nous allons définir notre prochain schéma. Donc les deux prochains profils, copions ceci. On va porter aussi des chambres et des chambres que nous allons spécifier. Donc, pour lire et écrire pour tout ce qui est à l'intérieur ici, nous allons l'autoriser seulement lorsque l'utilisateur est authentifié. Donc, à la place, en utilisant cette vérification, nous allons dire que la permission de lecture et d'écriture est seulement autorisée quand elle est éteinte, pas égale maintenant et la même chose que nous ferons pour fondamentalement tout ici, nous allons le mettre ici au lieu de l'idée future, nous aurons, Disons, salle I d. Et puis aussi pour lire. Nous allons apaiser l'auteur, pas égale neige et hors, pas égale maintenant. D' accord. Ça a l'air bien. Copions-le. Et nous allons aussi le synchroniser avec notre fichier local, qui est des règles de base de données. Jason. Sauvons ça. Et jetons un oeil. Maintenant, nos règles sont publiées. Si je clique sur créer un nouveau salon de chat maintenant, bonjour a été créé. Et si vous regardez à l'intérieur de la base de données maintenant sous les chambres, nous avons une nouvelle clé qui a été automatiquement générée par la base de données. Et puis nous avons nos données créées à la description et le nom. D' accord. Ça a l'air parfait. Je suppose que c'est le bon moment pour finir cette vidéo. Laisse-moi tout engager. Et puis nous allons spécifier le bouton de création pour créer un nouveau salon de chat. Ou peut-être à nouveau bouton en bas pour créer un nouveau salon de chat. Très bien, on se voit dans la prochaine. 115. Créer des listes de chat - Partie 1: Hey, Dans cette vidéo, nous allons commencer à créer Chatham List Inside bar latéral Ici en bas. Allons-y. Espérons à l'intérieur de Bardo GS en premier lieu. Et ici, juste après une créature sur Bt et Moto, on va mettre un composant de séparation de notre costume et à l'intérieur du passé bulle. Joindre le texte de conversation. Et aussi, déplacons cette importation vers le haut pour éviter un excellent avertissement. Vérifions ça. Ça a l'air bien. Maintenant, nous devons réellement définir les composants. Donc, sous le dossier Composants, créons un nouveau dossier que les gens nomment des chambres ici. Nous allons mettre deux nouveaux fichiers liste de chat point GS et article de chambre. Ne pas oui, donc l'article de la chambre va être vide maintenant. Et en fait, la même chose s'applique pour la liste de chat à l'intérieur du côté Bardo Gs Ici en bas. Au lieu de ce texte que nous avons utilisé comme espace réservé, utilisons la liste des salons de discussion. Bon, sauvegardons ça. Jetons un coup d'oeil. Nous pouvons réellement voir le texte Hello donc cela a fonctionné. Parfait. Maintenant, définissons le marché. Espérons que dans Chatham List et ici nous allons mettre assez de composant de notre costume pour que les accessoires passeront l'apparence Satel. Ensuite, il va être vertical et inversé. Et pour le nom de classe, nous allons passer le suivant. Nous devons donc faire de ce composant que ces éléments rampent un ble. Donc on va passer le débordement sur Pourquoi ? Défilement d'accès. Donc, nous verrons toujours la barre de défilement. Et aussi on va passer le Corbeau des douanes pour le faire coiffer. D' accord, et puis à l'intérieur de la bulle passé assez de points itim et puis élément de chambre comme ça. Bon, jetons un coup d'oeil. D' accord. Ça a l'air parfait. On peut saisir le pied-de-biche, et on peut voir qu'il est un peu stylé. Ok, bien. Maintenant, définissons notre balisage pour l'article de la pièce. Donc nous allons le diviser en deux. Dave est à l'intérieur, en haut, en bas, en partie à l'intérieur. En bas, nous allons définir notre texte. Donc nous allons mettre un élément filé, et nous ne mettrons aucun message pour l'instant et pour le nom de la classe. Nous allons spécifier qu'il va être affichage flex aligner les éléments centre, et nous allons appliquer le texte noir off 70% capacité. D' accord. Pour la partie supérieure, on va mettre ici le nom de la chambre et combien de temps il y a ? Le dernier message a été publié. Alors définissons la classe. Nommez le flex d'affichage, puis justifiez le contenu entre deux espaces publicitaires entre nos éléments, puis alignez le centre des éléments . Bon, donc notre premier élément va être âgé de trois titres avec le nom de la chambre à l'intérieur. Donc nous allons d'abord définir le texte statique, et quand nous aurons les valeurs dynamiques réelles, nous allons les tamponner. Donc pour H 3, nous allons spécifier le texte disparaître pour éviter le débordement. Et le second élément va en fait être un nouveau composant que les gens installent. Donc, pour l'instant, mettons span et regardons d'abord le navigateur. Vérifions ça. Comment ça ressemble Ok, ça a l'air bien. Mais au lieu de ce x X, nous allons utiliser le temps React pour montrer qu'un temps relatif comme celui-ci a été publié il y a cinq minutes. deux heures. Un jour, partez. Alors installons ça. Je vais ouvrir les chiens et copier cette recommandation. Ensuite, je vais arrêter mon application et installer ce paquet. Attendons et puis nous continuerons. Ok, le paquet a été installé. Redémarrez le haut et utilisons ces paquets. Donc, à partir de la documentation, je vais copier cette importation. Ensuite, je vais importer dans l'article de la chambre et nous allons copier la société elle-même. Et plaçons ça au lieu de cette plage pour que nous n'ayons pas besoin de la localiser. Alors on va utiliser un nouveau rendez-vous pour l'instant. Au lieu de cela, hors de ces dates boire pour juste montrer l'heure actuelle. Bon, alors actualisons l'application et jetons un coup d'oeil. Ok, donc maintenant nous sommes parfaits. Et ils vont penser à cette bibliothèque qu'il va mettre à jour cette minuterie, disons en temps réel, mais je n'aime pas l'apparition de ce texte. Donc je vais changer le nom de classe il y a temps, composant un peu. Donc, il va être formé normal. Et aussi du texte noir. Disons 45 opacité. Jetons un coup d'oeil maintenant. D' accord. Ça a l'air beaucoup mieux. Ok, passons à autre chose. Et notre dernière pensée ici sera de faire en sorte que ce composant fasse cette liste de chat pleine hauteur. Donc, pour cela, nous devons le calculer parce que notre chat est pleine page. Alors, comment peut-on faire ça ? Comment pouvons-nous aborder cela ? Nous savons que notre page complète est 100%. Nous pouvons retirer la hauteur de la partie supérieure de la barre latérale, et ensuite nous pouvons soustraire cette partie supérieure de 100 puis nous allons apprendre à connaître la hauteur de repos, qui est notre liste de chat. Allons-y. Donc, ne faisons pas grand âge pour glisser Bardoczky s Et notre partie supérieure est cet élément Def. Pour obtenir la hauteur réelle de cela, def, nous devons utiliser des références. Alors créons une nouvelle référence, que nous nommerons Topside, Bar Arraf et nous allons utiliser le crochet de référence. Ensuite, on va passer ce haut dépourvu à ce souffle qui va être supérieur par référence , et on va mettre la hauteur à l'état pour garder une trace de ça. Donc, définissons vous stage, qui nommera la hauteur et assis serré pour l'instant, par défaut, ce sera tel à maintenant ou 20 cela n'a pas d'importance à l'intérieur de l'effet d'utilisation. Nous allons obtenir la hauteur réelle de ce def et ensuite dire à l'état. Alors mettons l'effet d'utilisation. Et à l'intérieur de cet effet d'utilisation, demandons la suivante. Donc, si nous avons topside par ref dot current parce qu'il peut être indéfini à certains moments, donc nous allons vérifier si c'est réellement défini, alors nous allons définir la hauteur à dessus par Ralf, pas la hauteur de défilement du point actuel. Donc, quand nous essayons d'accéder au dessus sans courant, c'est comme si nous essayons d'accéder à l'élément quand nous l'obtenons avec le document. Obtenir élément par i t. Donc, il est très utile dans certains cas comme celui-ci. Nous voulons également exécuter cette fonction de rappel d'effet chaque fois que nous étions topside. Changements de la barre F. Bon, maintenant passons cet état à la liste de Chatham pour qu'on puisse calculer la hauteur réelle . Donc passons au-dessus de la hauteur de l'élément que la hauteur et la liste intérieure de la salle de jet sera d structure au-dessus de la hauteur de l'élément et ensuite ce que nous allons faire. Nous allons appliquer le style dans le style Lyons, qui va être la hauteur, incurable, utiliser la fonction de calcul CSS. Alors, on va au porc alc. Ensuite, nous allons utiliser 100% age moins au-dessus de l'élément au-dessus de la hauteur de l'élément et à la fin, nous allons mettre des pixels parce que cette hauteur se calme en pixels. Maintenant, jetons un oeil. Si l'application est actualisée, rien ne se passe réellement. C' est parce que nous n'avons pas cascade étaient pleine hauteur de page. Alors, qu'est-ce qui se passe à l'intérieur de la maison ? Qui a dit h 100 sur Lee au grand composant, mais pour le faire fonctionner pour un composants imbriqués aussi bien. Nous devons définir la hauteur de 104 enfants pour tous les composants imbriqués. Donc, pour la ligne, nous allons spécifier l'âge 100 et pour la colonne fera la même chose Maintenant. A l'intérieur du fil latéral, nous appliquons déjà H 100 à leur élément d'éducation, sorte que cela fonctionnera. Maintenant, regardons et inspectons le composant. Comme vous pouvez le voir, nous avons déjà pleine hauteur et il est calculé automatiquement et nous n'aurons pas débordement. Il s'adaptera toujours à pleine hauteur de page. Donc, si nous inspectons cet élément, nous pouvons voir que la hauteur est calculée automatiquement pour nous. Nous avons donc 138 pixels, qui est la hauteur de la partie supérieure. Hors de la barre latérale. D' accord, donc ça a l'air sympa. Et je suppose que c'est tout pour cette vidéo et la prochaine nous allons continuer. Alors ajoutons tout à l'état de la scène et nous allons nous engager a commencé à travailler avec la liste des salons de chat . Rendez-vous dans la prochaine 116. Créer des chambres de chat - contexte des pièces (partie 2): Hé, là. Dans cette vidéo, nous allons continuer à travailler sur Chatham List. La dernière fois qu'on a défini Mark up. Cette fois, nous allons créer et gérer l'état. Allons-y avant d'entrer dans le code. Je veux définir comment nous allons accéder à cet état. Alors les salles de chat. C' est une dette que nous allons accéder globalement à l'intérieur de la page d'accueil. Donc, nous allons utiliser le contexte a p I pour pouvoir y accéder à partir du composant de la barre latérale, mais aussi à partir de la fenêtre de chat à l'intérieur que nous n'avons pas encore créée. Naviguons vers le dossier Contacts et ici nous allons créer votre contexte de salles de fichiers. Le G. s. Ici, nous allons créer un nouveau contexte inateable chambres dame contexte avec créer fonction de contexte qui vient de réagir. Ensuite, nous devons définir un composant, un fournisseur qui fournira à tous ses enfants le contexte. Donc, exportons le fournisseur de chambres const en tant qu'argument. Il recevra Enfants et il va retourner le fournisseur de points de contexte chambres, et nous mettrons Enfants à l'intérieur comme une valeur. Pour l'instant, mettons juste une ficelle. Et si nous l'avons sur ce composant, il est dit, réagir doit être dans la portée. Nous allons donc importer réagir à partir de réagir. D' accord. Bien. Maintenant, définissons l'état. Donc, ça va être simple. C' est pourquoi nous pouvons utiliser l'état d'utilisation. Donc, définissons les salles et les salles de repos par défaut. Il sera réglé pour monter, et nous obtiendrons nos données à l'intérieur de l'effet d'utilisation lorsque le composant monte. Donc, nous allons pour l'effet d'utilisation et à l'intérieur d'abord, nous allons stocker notre référence aux moyens de données. Donc, si nous ouvrons la base de données, nous nous souvenons que nous stockons nos données dans les pièces, salle I d. dans lasalle I d. Donc, ce que nous allons faire, nous allons mettre un auditeur en temps réel sur les pièces afin que nous puissions obtenir des mises à jour en temps réel. allons vous créer précieux que nous nommerons la liste des chambres rugueuses et il va être la base de données points ref chambres. Maintenant, nous avons la référence. Ensuite, nous allons mettre un écouteur en temps réel en utilisant point sur méthode. Alors appelons la liste de la salle. Ralf a pensé à la valeur, puis pour le rappel. Comme pour l'instant, il reçoit chemise à pression. Pour l'instant, nous allons regarder Consul, valeur du point instantané droit. Et comme il s'agit d'un auditeur en temps réel, nous devons nous désabonner car il s'agit d'un abonnement. Donc, nous allons le faire à l'intérieur de la fonction de nettoyage. Effet hors utilisation ici. Nous allons mettre la liste de chambre point rugueux, il détachera tous les auditeurs en temps réel de cette référence à l'intérieur de la base de données. D' accord, sauvegardons ça. Et nous allons réellement utiliser ce contexte. Naviguons vers la page d'accueil. Et ici, nous allons envelopper tout autour fournisseur de chambres. Ok, disons avec et jetons un coup d'oeil. Si je vais à la console, je peux voir que j'ai une valeur d'instantané, qui est un objet où chaque clé est idée de pièce, puis va des données. Donc nous avons ce contremaître parce que nous avons une base de données basée sur Jason. Mais ce n'est pas exactement les quatre mois avec lesquels nous voulions travailler. On a besoin d'une voie respiratoire. Donc, créons une fonction d'aide qui transformera ce type d'objet en un tableau. Donc nous allons définir une nouvelle fonction à l'intérieur des helpers togs que nous nommerons. Nous allons un tableau de transformation de deux avec I d. Il recevra la valeur d'instantané comme un argument et il retournera. La prochaine chose consiste d'abord à vérifier si la valeur de l'instantané existe. Si nos données ne sont pas maintenant, si nous avons des données. Donc si c'est le cas, alors on va mettre la logique. Sinon, nous reviendrons et vider. droite. Alors, quelle sera notre stratégie ? On va appeler l'objet la méthode du baiser pour verser toutes les idées de chambre dans un tableau. Et puis nous allons cartographier chaque valeur, chaque pièce que je d à ces données. Allons-y. Donc, mettons les touches point objet hors valeur de snapshot pour obtenir tous les enfants en tant que tableau. Ensuite, nous allons cartographier chaque valeur de cette zone où chaque élément est la pièce que je d à un objet qui sera toutes les données de notre pièce. Nous pouvons y accéder avec une valeur instantanée hors chambre I D. Et puis nous allons attacher i d une autre propriété, qui va être la chambre I d. Ok, naviguons dans le contexte de deux chambres et ici à la place, off en utilisant la valeur de point d'instantané, transformons-le en fait moins de nouvelles données précieuses ici. Nous allons mettre transformée en tableau avec i d. et nous allons passer un aperçu de la valeur des points instantanés. D' accord. Et nous allons le CTA consulaire plus tard pour voir ce que nous recevons réellement. Maintenant, Comme je peux le voir, j'ai un tableau hors chambres et j'ai des données et aussi j'ai je d comme une propriété. Bon, donc c'est ce que je veux. Maintenant, mettons à jour l'état. Appelons les salles et mettons les données à l'intérieur. Et puis passons cet état au contexte comme notre valeur est les chambres. D' accord, c'est tout pour l'instant. Je suppose que dans la prochaine vidéo, nous allons finir ça et nous allons afficher nos salles à partir de la base de données. Mais pour l'instant, finissons cette vidéo en engageant nos changements. Obtenir les validations tiret M et pour le rapport de message créé le contexte des chambres. Ok, on se voit dans la prochaine. 117. Créer une liste de Chat - Montrez des pièces et utilisez-les comme liens (partie 3): Hé, là. Dans cette vidéo, nous allons afficher les salons de chat que nous stockons dans la base de données, en utilisant le balisage et le contexte que nous avons créés dans les vidéos précédentes. Allons-y, ouvrons notre code. Et voici, ouvrons le composant de liste de salle de chat. Ici, les gens consomment notre contexte. Et encore une fois comme avant, au lieu d'utiliser le contexte de repères, puis de spécifier le contexte en important le fichier, nous allons créer un crochet d'aide à l'intérieur des pièces, des contacts. Exportons. Const. Va le nommer. Utilisez des salles, et ce sera une fonction qui nous renvoie la valeur des contacts. Mettons donc à utiliser le contexte et pacifions le contexte des chambres. De cette façon, nous éviterons d'appeler des indices contexte avec des chambres, contexte à chaque fois mais utiliser des chambres. Très bien, donc à l'intérieur des composants de liste briser. Appelons ce crochet de salles d'utilisation et maintenant nous obtenons la valeur de contexte. Maintenant, la chose est que ces chambres peuvent être nulles au moment où nous essayons d'y accéder, parce que notre état initial est terne et que lorsque le composant monte, nous obtenons les données réelles. Donc nous devons mettre une course conditionnelle, boire et vérifier contre elle ici à l'intérieur. Assez. Mettons si nous n'avons pas de chambres. Ensuite, nous allons afficher le composant Lauder qui vient de notre costume. Il sera centré, et il sera centré. Vertical E. En outre, il aura du contenu, ce qui dira le chargement et il aura une faible vitesse. D' accord. Et aussi, spécifions la taille à la taille moyenne. Très bien, citation. Maintenant, affichons le second rendu conditionnel pour montrer les données que nous allons mapper chaque élément du tableau, qui sont des pièces que nous transformons avec transformation pour arriver avec I d à un élément j six. Donc nous allons demander si nous avons des chambres et des chambres dot terrain est supérieur à zéro Onley. Ensuite, on va appeler la salle, commencer la carte à l'intérieur, on aura petit mon Tim et on a une carte. Cette pièce, je tente d'aimer élément comme ça. Et n'oubliez pas, quand nous avons utilisé cette carte de points, nous devons spécifier l'accessoire clé. Alors mettons de la place sombre. Et puis on va passer tout l'objet de la pièce comme une pièce, propriété à pièce comme ça. Et puis on va passer tout l'objet de la pièce comme une pièce, D' accord. Ça a l'air bien. Maintenant, ouvrons l'élément de pièce le suivant ici, nous allons détruire chur ou propre propriété, et à l'intérieur du composant, nous allons retrouver notre équilibre en structurant l'objet de la pièce cette fois. Donc, nous aurons créé à et aussi nous aurons le nom de la chambre. Donc, au lieu de cette statique taxée, nous allons afficher le nom de la pièce que nous D structure et aussi il y a quatre fois composant. Si nous n'avons pas de messages, nous allons afficher l'heure où cette pièce a été créée. Alors passons juste Nouvelle date créée du tout droit, Sauvegardons et jetons un coup d'oeil. Parfait. Maintenant, nous pouvons voir que la chambre a été créée il y a un jour et le nom de la chambre est Bonjour, Peut-être essayons de créer une chambre de plus. Alors, cliquez sur notre Moto. Passons si je connaissais le nom du rouleau et n'importe quel rapport pour la description. Si vous cliquez dessus, nous pouvons voir que les données sont mises à jour en temps réel, sorte que tout fonctionne parfaitement. Cependant, je veux également transformer ce composant en lien. Donc, quand nous cliquons dessus, nous allons réellement à la page de chat. Très bien, nous allons revenir au code et allons à la liste du salon de chat ici pour cet article à priser. D' abord. Pensez que je veux le faire, je veux spécifier la classe de composant afin qu'il rendra cet élément assez en utilisant cet élément fourni pour une classe compétente. Il va être un composant lié qui vient du routeur de réacteur stupide pour ce composant de liaison , nous allons pacifier sa propriété, ce qui l'est aussi. Alors mettons-nous deux. Et utilisons l'interpolation de chaîne pour spécifier quel chemin il y aura si nous cliquons dessus. Donc, il va être chats salle slash I d. Alors ouvrons la population de contar de chaîne et mettons idée de chambre. D' accord, cool. Vérifions ça. Maintenant. Si je clique dessus, vous pouvez voir que l'Ural change et nous avons réellement la fonctionnalité. Mais je veux aussi rendre cet élément actif chaque fois que nous avons le chemin correct correspondant au lien. Donc ce que nous devons faire comme avant avec le box-office, nous devons trouver notre emplacement actuel. Donc, nous allons utiliser le crochet de localisation qui vient de réagir Router vers le bas paquet. Maintenant, pour ce tabac à priser, nous allons passer une autre propriété, qui va être la clé active, donc la clé active va être l'emplacement, pas le nom du chemin. Ensuite, nous devons pacifier ou, disons, associer chaque élément d'amour à son courant. Allons une clé. Donc, pour cela, nous devons passer une propriété de plus, qui va être la clé d'événement. Et il doit correspondre à la clé active, qui est le nom du chemin de point d'emplacement. Donc,pour la clé d'événement, d' pour la clé d'événement, nous allons spécifier exactement la même chose que pour la propriété. Et maintenant, ça va marcher. Vérifions ça. Et en ce moment, quand notre emplacement correspond, nous avons l'animation cool et nous avons la clé active. Donc, ça fonctionne parfaitement. Mais je veux en modifier un. Pensez au lieu de chats, je veux utiliser juste chat comme ça. Bon, vérifions encore une fois. Si je passe à la page de chat, j'ai cet élément actif. D' accord. Bien. Donc c'est ça. Finissons notre vidéo. Mettons tout à l'état de la scène, puis appelons, engagez-vous avec les salons de chat affichés. D' accord, cool. C' est tout pour cette vidéo. La prochaine fois, nous allons construire notre partie droite sur le site et nous allons commencer à construire une fenêtre de chat. On se voit là 118. Créer des mises en page Nested pour la page d'accueil: Hey, Dans cette vidéo, nous allons créer Lee notre pour la page d'accueil. Donc pour l'instant, nous avons déjà construit la partie gauche, quelle barre latérale ? ce moment, nous allons définir notre bon rôle, et nous allons voir comment ils vont jouer un réactif allons-y. Alors ouvrons le fichier togs à la maison. Et ici, nous aurons un nid, une sécheresse. Donc, quand on clique sur un salon de chat, on peut voir qu'on va à la salle de discussion slash i d. Pour cela, on doit créer une acidulée parce qu'on va le montrer sur la page d'accueil. Donc, ce que j'ai proposé de dio ici au lieu de simplement utiliser un fichier directement, créons pas le dossier d'accueil. Et là, nous allons mettre toutes les sécheresses de Nestor et la maison DGS va être à l'intérieur de l'index . Donc, nous allons créer un nouveau dossier à l'intérieur, nous allons mettre à la maison que nous allons le renommer en index points gs. Et ici notre nid, la sécheresse va être la page de discussion. Donc, créons un nouveau fichier que nous allons nommer Chat Doggy s. Et pour l'instant, il va être vide. Port sollicité. Allô ? Bon, donc à l'intérieur de cet index Si nous l' enregistrons, actualisons Impossible d'ouvrir le répertoire. D' accord, peut-être redémarrez l'application et cela fonctionnera. Laisse-moi me rafraîchir. Bon, maintenant ça semble bien. Bien. Continuons. Donc, notre première étape va être définie. Ah, où ? sécheresse de Nestor. Donc ici, à côté de cette colonne, définissons l'instruction switch et ici nous allons verser la route du chat et la barre latérale Il sera persistant parce que c'est notre mise en page. Donc, à l'intérieur de cela, qui coulons et parce que notre page d'accueil est déjà privée, nous n'avons pas besoin de verser des sécheresses de nid. Aussi des routes privées. Nous pouvons les utiliser en public parce que nos parents sont privés. Cela signifie que ceux-ci sont déjà protégés. Donc, il va être la route exacte et le chemin va être slash tchad slash chat I d suivre la grille. Nous devons aussi mettre une colonne ici. Alors mettons la colonne et à l'intérieur, nous allons verser le chat et nous allons également importer de ce dossier. Laisse-moi préciser le chat et on va utiliser le chat. Bon, maintenant ça a l'air bien. Définissons comment les colonnes Maney prennent la page de chat. Donc, sur les petits appareils, il faudra toutes les 24 colonnes et sur les appareils moyens. On va enlever le reste de ça pour qu'il soit 16 ans et ensuite le nom de la classe sera aussi une église 100. Maintenant, jetons un coup d'oeil et voyons. Bon, est-ce qu'on a Bonjour, inspectons et essayons de refaire de la glace. Bon, donc on voit que quand on est sur de petits appareils, on a ça, disons, de haut en bas, Lee dehors. Ce n'est pas ce qu'on veut. Nous voulons cacher ce bonjour sur les petits appareils et parce que nous devons non seulement cacher cela, nous voulons également nous assurer que chaque fois que nous allons dans le salon de chat, nous ne voyons pas la barre de navigation. La barre latérale. C' est pourquoi nous devons mettre une sorte de ah, disons condition compliquée. Donc, tout d'abord, nous devons définir notre point de rupture lorsque nous sommes sur le bureau, et c'est quand nous avons 992 pixels. Donc, d'abord, nous allons définir est le bureau, et il va être le résultat hors utiliser le crochet de requête média que nous avons défini plus tôt. Et ici, on va demander si les hommes avec IHS 992 pixels, non ? Donc, dans ce cas, nous aurons le bureau. En outre, nous devons prendre notre deuxième condition lorsque nous sommes exactement sur la page d'accueil afin que nous puissions afficher barre latérale sur les petits appareils, pas la page de chat, sorte qu'elle devienne cachée. Donc, définissons est exacte comme ça. Discutez-le de l'utilisation, pas de l'utiliser. Media Query utilisé route beaucoup. C' est un autre crochet qui vient de réagir routeur, le même que l'emplacement d'utilisation. Mais ce cuisinier nous donne, disons, pensées liées à notre route actuelle et à notre match de sécheresse. Donc, l'un de ces accessoires est exact et il dira si nous sommes actuellement sur cette route définie , qui est la page d'accueil. Donc, chaque fois que nous serons sur juste barre oblique, il nous donnera est exactement égal à la vérité. Bon, alors maintenant, définissons notre condition. Donc, nous allons pauvre peut rendre la barre latérale et nous allons demander si c'est bureau pour si elle est exactement transmise sur Lee, alors nous serons en mesure de rendre la barre latérale. Alors maintenant, versons la logique suivante. Donc, si nous pouvons rendre la barre latérale, alors nous allons mettre cette colonne et maintenant nous devons aussi définir, disons, un quatre à quatre heures ou si quelqu'un ouvre une page de chat cassée, nous pouvons la vivre vide et ça ira. Mais rendons ça fantaisie et sortons ici et ici. On va demander si c'est le bureau seulement. Ensuite, nous voulons montrer la colonne, et il aura, je suppose, le même lee dehors qu'ici. Alors, copions-le. Et à l'intérieur, on va le tirer. Disons juste texte qui dira S'il vous plaît sélectionner le chat et le nom de la classe va être taxé centre et marge haut droits Fage. Maintenant, jetons un coup d'oeil. Donc, chaque fois que maintenant nous sommes sur des chats slash moins de chambre I d. Nous pouvons voir seulement bavardage sur la page. Si je supprime cela et navigue vers la page d'accueil, je ne peux voir que la barre latérale, donc il semble bon. Si je le redimensionne, je peux les voir tous les deux afin que je puisse voir mon salon de chat, mais à la place hors du chat réel. Chaque fois qu'il n'est pas sélectionné, je peux voir la police sélectionner tir à plein retour pour sortir, donc cela fonctionne comme 404 et si je sélectionne l'un des chats, je peux voir la fenêtre de chat réelle. Je suppose que c'est tout pour cette vidéo. La prochaine fois, nous continuerons. Mais pour l'instant, engageons nos changements. Mettons, mettons-toi à tout. Obtenir commit et disons que nous avons créé notre pour la page d'accueil et créé la page Shat pour le droit. Impressionnant. se voit dans la prochaine. 119. Créer des pages de chat ou des composants: Hé là, dans cette vidéo, on va créer Lee pour bavarder une page qu'on peut voir sur la droite au lieu de ça . Allô ? Allons-y. Revenons au décodage. Et ici, sous le dossier Composants, saluons et votre dossier et que nous nommerons Shatt Window à l'intérieur. Nous allons créer trois nouveaux dossiers supplémentaires et chacun représentera chaque partie de cette page. Donc nous allons avoir le premier dossier va être des messages. Ensuite, on va verser le haut et le bas comme ça, un intérieur dans une bulle, tous les composants correspondants. Donc, à l'intérieur du fond, mettons des togs d'index et il sera vide pour l'instant que la même chose que nous ferons pour le reste. Donc nous allons mettre des togs d'index, mais un nom il messages que nous allons mettre des messages à l'intérieur, sauvegardons et fermons. Et notre dernière composante sera cette conférence. Donc, créons un autre index togs. Et mettons le haut avec l'aperçu du texte supérieur. D' accord, sauvegardons et naviguons vers la page de chat. Donc ici, à l'intérieur de ce def, versons un autre def. Ce sera un rappeur pour Chat Top, et nous l'importerons juste dans une seconde. Alors on va verser un autre Dave. Et à l'intérieur, nous mettrons des messages et la même chose. Nous allons postuler pour le Tchad fond, tous les droits et pour chacun de ces Daves. Si nous ouvrons la fille principale un CSS. Ici, nous avons des classes graphique top, Tchad bas et tir milieu. Alors utilisons-les pour les quatre meilleurs messages de chat Porter de niveau supérieur. On va mettre un gars au milieu et pour mais, euh, euh, on va mettre le nom de classe Chad en bas. Très bien, maintenant, importons ces composants. Donc, d'abord, importons le chat. Dites up à partir de Naviguons deux composants, fenêtre de chat et haut. Alors je vais copier trois fois. Ensuite, je vais utiliser le bas et les messages, puis je vais les remplacer par le fond de chat et les messages. Très bien, ça a l'air bien. Jetons un coup d'oeil. Donc maintenant, si avec un frais, nous pouvons voir, nous avons des messages haut et bas et nous allons enlever cet emballage, def. Et jetons un coup d'oeil une fois de plus. Maintenant, nous avons des messages haut et bas tout en bas. D' accord, bien. Maintenant, définissons notre logique initiale pour la page de chat. Donc, tout d'abord, allons saisir ce Tchad I D. De nos périmètres que vous vous souvenez à l'intérieur de la page d'accueil avec pacifié comme juste chat je d. Donc, nous allons saisir de l'utilisation des programmes crochet que nous pouvons utiliser en utilisant paquet de rotor réaction. Et puis nous pouvons arracher toutes nos chambres que nous avons dans le contexte comme vous vous en souvenez. Donc, utilisons le crochet des chambres que nous avons créé plus tôt. Et maintenant, obtenons nos données de chambre actuelles. Alors, qu'avons-nous besoin de faire ? Tout d'abord, nous devons vérifier par rapport à cette pièce parce que ce peut être non par défaut, comme vous vous en souvenez. Alors nous allons demander si les chambres n'existent pas ou si cette valeur est maintenant, alors nous allons verser la composante de l'ordre de loi qui vient de notre costume. Et encore une fois, il sera centré verticalement comme avant. Il aura de taille moyenne. Il aura le chargement du contenu et la vitesse va être lente. D' accord. Notre prochaine étape est d'obtenir notre chambre actuelle de cette chambre est un tarif. Donc, portons const La chambre actuelle va être des chambres point trouver nous allons obtenir article de la chambre. Ensuite, on va demander à Id Equals Chat. Je suis d' accord. Et à la fin, si on n'a pas de place. Donc, si nous mettons un aléatoire votre l qui n'existe pas dans le tableau de cette pièce, alors nous allons retourner H six élément avec le nom de la classe, le centre du texte et la page supérieure de la marge. Cela dira, Tchad, je n'ai pas trouvé. D' accord. Ça a l'air bien. Enlève ça, Lauder. Déplaçons cette importation vers le haut. Sauvons. Jetons un coup d'oeil. Si carbonisé, celui-ci n'a pas été trouvé. D' accord, je suis ici. Laisse-moi mettre la négation en face. Alors maintenant, ça va marcher. Bon, donc on a parlé des messages en bas. Et si on met un psy au hasard par ici, mais on ne trouvera pas de balle. Ok, parfait. Donc c'est tout pour cette vidéo dans la prochaine vidéo, je voudrais parler des problèmes de contexte et pourquoi il est une mauvaise idée d'utiliser directement les salles d'utilisation , crochet. Engagons nos changements et finissons celui-là. Donc, à tout ce que vous obtenez système que nous allons envoyer notre message et nous dirons créé Klay, notre quatre page carbonisée. D' accord, bien. se voit dans la prochaine. 120. Problème d'API de context et une solution potentielle: Salut contexte. AP est incroyable, n'est-ce pas ? Mais toujours avec un bon outil, il y a aussi un côté négatif. Le problème avec le contexte est que nous pouvons sélectionner une partie de sa valeur. Nous ne pouvons pas définir un sélecteur pour cette raison. Chaque fois que le contexte est consommé avec le hook use contacts, même si la valeur n'est pas utilisée et qu'elle change, le composant est rendu. Imaginez le contexte qui passe et objet avec la structure suivante. Dans un composant où Title est affiché, nous aimerions obtenir uniquement la taxe de titre, juste pour que nous puissions détruire votre texte de titre à partir de la valeur contextuelle et cela semble correct. Cependant, pour le contexte, peu importe s' il s'agit d'un destructeur ou si vous essayez de sélectionner partiellement des éléments. Il vous donne toujours la valeur de contexte entière à partir de maintenant, puisque le composant title obtient la valeur chaque fois que quelque chose dans notre objet change. Par exemple, recherche put, le composant title sera à rendre, et c'est mauvais. Pour résoudre cela, nous pouvons réellement diviser le contexte en deux fournisseurs de contexte distincts un par clé d'objet. De cette façon, nous partageons les responsabilités et le rendu ne sera pas déclenché parce que nous allons consommer seulement ce dont nous avons besoin à l'intérieur d'un composant fournisseur n'était pas limité à vous. Un seul contexte peut combiner plusieurs contextes sous un seul fournisseur. Il est très utile lorsque nous passons à travers les contacts, exemple, le résultat de l'état d'utilisation, l' état et sa fonction de mise à jour pour eux. Il s'agira de deux contextes distincts regroupés sous un seul fournisseur. Donc maintenant, si à l'intérieur d'un composant nous consommons le contexte qui fournit le composant de fonction de mise à jour ne sera pas rendu. Lorsque cet état change, il ne sera rendu que si la valeur réelle hors contexte consommé est modifiée, qui est la fonction de mise à jour. Dans ce cas, cela fonctionnera dans la plupart des cas. Cependant, il y a des situations où nous aimerions passer un grand objet à travers le contexte, et la création d'un nouveau contexte pour chaque clé sera une overkill. Pour ces situations. Il existe un sélecteur de contexte d'utilisation de package qui nous fournit une fonctionnalité pour sélectionner partiellement la valeur du contexte. Il est livré avec les quelques limitations, mais lorsqu'il est utilisé à bon escient, les rendus peuvent être évités du tout. Juste pour souligner, tout cela est prévenant lorsque l'on utilise des canards de croyance au lieu d'un contexte P I. Pour la gestion de l'État, cependant, Redox a une courbe d'apprentissage et apporte plus de complexité, en fonction de la application. Tu n'en as probablement pas besoin. C' est pourquoi nous utilisons le contexte. Un p i dans la prochaine vidéo, nous allons installer utiliser le sélecteur de contexte et nous verrons comment il peut nous aider à vous voir que 121. Problème de l'API de contexte en pratique - Créer du contexte actuel: salut dans ce média va créer un contexte pour la salle de chat actuellement ouverte en utilisant des indices paquet Context Lecter. Avant de commencer, explorons comment tout va être géré. En ce moment, il y a le contexte des chambres qui vole toute la page d'accueil. Les données contextuelles sont une liste de chatroom avec abonnement en temps réel. Cela signifie que si quelque chose change dans un contexte hors salle, la valeur sera mise à jour à l'intérieur des chambres GS d'ombre. Le contexte est consommé. Donc, toute mise à jour de n'importe quelle pièce provoquera une reddition. Deux pages de chat actuellement ouvertes, même si la date AB n'a pas été liée à elle. Par conséquent, à l'intérieur de Chad Ogea s, nous allons fournir un nouveau contexte que nous nommerons le contexte actuel de la pièce et nous allons passer données de chambre actuellement ouvertes pour ces contextes. On va utiliser le sélecteur de contexte. Imaginez une situation lorsque le nom de la salle actuellement ouverte est mis à jour. Cela créera une reddition pour la salle actuellement ouverte et les valeurs que nous transmettrons au contexte actuel de la pièce seront également évitées. Il existe un composant qui consomme le contexte d'espace actuel et affiche uniquement la description, pas le nom, car le sélecteur de contexte hors utilisation, ce composant ne sera pas rendu. Les modifications affecteront sur Lee le composant qui affiche le nom. Ok, mettons tout en pratique. J' ai déjà ouvert officiel get happy page pour utiliser le package Selector de contexte Et si je fais défiler vers le bas de la partie d'installation, je peux voir que j'ai besoin de copier cette commande. Alors faisons-le. Revenons au code et à l'intérieur du terminal intégré, je vais l'exécuter et attendons jusqu'à ce qu'il soit installé. Perfectionnez les paquets là-bas. Maintenant, exécutons l'application et ne revenons pas à la documentation. Donc, à partir de la partie utilisation, nous pouvons voir que ce n'est en fait pas différent de la façon dont nous utilisons le contexte de création normal. Donc, revenons au code. Et ici sur leur contexte, dossier moins grand nouveau fichier que nous nommerons le contexte actuel de la salle. Dodgy. Oui, ici. Nous allons créer le contexte actuel de la pièce et nous allons utiliser créer le contexte, celui qui vient de ne pas réagir. Nous allons convertir Teoh un bijou de six mo et de l'utilisation du sélecteur de contexte. Très bien, donc la partie suivante va être de créer le composant fournisseur. Mettons donc export const fournisseur de salle actuel afin qu'il reçoive des enfants et ensuite aussi il recevra des données afin qu'il transporte des données que nous transmettrons à ce fournisseur. Donc, ici, nous allons retourner courant du fournisseur Context Dar. Et nous allons pauvres enfants là-bas et pour de la valeur. On va mettre les données en pause, donc le composant du fournisseur va être comme un intermédiaire. Bon, donc si nous avons notre réaction, doit commencer la portée. Donc, importons réagir de réaction ou je vais. Voyons maintenant comment pouvons-nous sélectionner quelques données à partir d'ici ? Nous devons donc utiliser le contexte d'utilisation, le sélecteur. Ensuite, nous devons fournir le contexte que nous voulons consommer. Et puis nous fournissons le Colback qui va piquer notre valeur où l'argument est notre état actuel . Donc, naviguons un peu vers le bas d'ici. Nous pouvons voir que nous pouvons réellement l'utiliser comme ça. Copions ceci et mettons-le ici dans le contexte actuel de la pièce. Donc, ce que nous allons faire, nous allons le transformer en notre propre crochet personnalisé. Importons le sélecteur de contexte d'utilisation du paquet lui-même, et ensuite nous allons le transformer en crochet. Donc, convertisons-le en fonction. Et au lieu du prénom, on va utiliser la chambre actuelle et on va aussi l'exporter. Et pour cette utilisation salle actuelle, nous ne passerons que le sélecteur. Alors passons le sélecteur ici. Et au lieu du contexte de personne, on va verser le contexte actuel de la pièce et pour le sélecteur, on va fournir le sélecteur. On est déjà là. Maintenant, revenons pas à notre page de discussion. Et ici, au lieu de ce parenthèses vides au lieu de fragment de réaction, utilisons ce fournisseur. Donc nous allons mettre le fournisseur de chambre actuel, et nous devons transmettre des données que nous mettrons dans ce contexte. Alors mettons des données Et pour les données, nous allons créer un objet que nous nommerons, disons les données actuelles de la pièce. Donc nous allons créer cet objet, et ici nous allons passer les valeurs suivantes. Donc, de notre chambre actuelle, nous allons pointer le nom et la description en détruisant les valeurs. Et puis nous allons passer le nom et la description au courant à partir des données qui passeront au contexte D. Bon, donc si nous le gardons et si nous sauvegardons tout ici maintenant, si nous retournons à notre application, rien ne sera réellement changé. Cependant, si nous allons au chat haut ici, nous allons utiliser le crochet de chambre actuel que nous avons créé. Alors choisissons peut-être un nom et pour le sélecteur, nous allons passer l'État et de l'État, nous allons choisir le nom ou peut-être pas, état. Mettons l'envie de valeur comme celle-ci. Et maintenant, au lieu de haut, affichons ce nom à partir du contexte. Bon, donc si je dis que, si je me rafraîchis, je peux voir Bonjour le nom de la chambre que nous avons passé aux contacts et si je change, il sera changé. Donc c'est ça. C' est ainsi que nous pouvons réellement maximiser les valeurs à partir du contexte. Et il est également très important de noter que ces valeurs que nous choisissons dans l'état que nous choisissons dans le contexte, il est important de comprendre que nous pouvons sélectionner des objets parce les objets sont comparés par des références. Et si nous avons ouvert la documentation pour ce paquet, si nous faisons défiler jusqu'aux limitations, nous pouvons voir que le déclencheur du fournisseur rend Onley si la valeur du contexte est modifiée de préférence , donc les objets sont préférentiellement changé. Nous devons donc faire attention à cela. Nous devons sélectionner uniquement les types primitifs dont l'objet ne l'est pas. Et aussi, si nous voulons regarder à l'intérieur des limites, nous devons envelopper notre composant autour de réagir, maman. Donc, nous allons aussi importer des mammifères de réagir et nous allons l'envelopper comme ceci. Donc maintenant notre valeur est mémorisée. Et si quelque chose change pour ce courant à partir des données, nous allons une description. Et à l'intérieur de ce composant supérieur, nous ne consommons que le nom. Ce composant ne sera pas mis à jour lorsque la description sera modifiée. Donc c'est ça. Une chose à souligner ici est que, comme je l'ai mentionné précédemment, si nous consommons le contexte des pièces à l'intérieur de ce composant, et si quelque chose change, le composant entier sera rendu. Donc, y compris ce chat meilleurs messages et le bas de chat. Mais parce que nous utilisons des mammifères ici, Teoh, mémorisez nos composants. Nous avons considérablement réduit l'arborescence de mise à jour, de sorte que seuls ces dips d'emballage seront mis à jour à chaque changement. Les composants sous-jacents chatter les messages dans le fond de chat ne seront pas rendus. Donc c'est ça. C' est la grotte. C' est hors contexte. AP I Terminons cette vidéo. Donc, nous allons tout valider et mettons le prochain message créé contexte de salle actuelle avec le sélecteur de contexte d' utilisation. Très bien, à la prochaine 122. Créer des chat initiales - Partie supérieure: Bonjour. Dans cette vidéo, nous allons commencer une page de bâtiment chattel. Allons-y, Revenons au code et ouvrons les togs d'index qui représente dans la partie supérieure ici. Au lieu de ce nom, nous allons verser un autre def. Ce sera une autre partie supérieure. Donc, pour ce nom de classe difficile quitter sur l'affichage flex, justifier le contenu entre les éléments de ligne centre à l'intérieur, nous allons tirer l'âge quatre tack et à l'intérieur de l'affichage rebelle Ah, étaient nom de chat. Donc ici d'un nom vocal et le nom de classe pour ce pan sera le texte disparaître et aussi nous allons mettre et je peux ici en face de ce texte quand nous sommes sur les appareils mobiles afin que nous ne pouvons pas revenir à la page d'accueil. Donc ici, nous allons tableau et je peux et la classe compétente va être un lien qui vient de réaction Routeur stupide que l'Eiken lui-même va être cercle Arrow. La taille gauche va être double X Et parce que c'est un composant de lien, nous devons également fournir à la propriété qui mènera à la page d'accueil, non ? Et aussi nous allons verser le nom de classe conditionnelle pour cet Aiken. Donc on va demander si on est sur des appareils mobiles. Ensuite, on va mettre un nom de classe. Et si on est sur le bureau, on va mettre d'autres noms de classe pour ça. Nous allons utiliser le crochet de requête média que nous utilisons plus tôt, et nous allons créer le Bullen, qui est mobile. Et puis nous allons utiliser Media Query à partir de crochets personnalisés et à l'intérieur d'une bulle marques de port avec 992 pixels off. Bon, donc quand on est sur les appareils mobiles, on va tirer l'affichage dans le bloc de ligne que le batting va être zéro marge droite pour texte Blue et Lincoln style pour rendre notre élément de lien entièrement sur styled. Et si nous sommes sur les appareils de bureau, alors nous n'affichons pas cet Aiken. Alors sauvegardons et inspectons. Qu' est-ce qu'on a ? Maintenant, nous avons le nom de la chambre. Si j'inspecte et redimensionne la fenêtre, je peux voir ce bouton ici. Quand je clique dessus, je retourne à la page d'accueil pour voir celle de Chatham. D' accord, ça a l'air bien. Continuons. Donc ici, à côté de cette h 4, mettons la barre d'outils bouton qui vient de notre costume, et ça allait être notre à faire Donc aussi, mettons le nom de classe hors Ws No rap. Très bien, unifié un frais. Bon, donc c'est à faire à côté de ce jour si on va mettre un autre def et ça va être notre partie inférieure. Donc, pour cette partie inférieure, nous allons mettre, afficher, flex, flex, justifier le contenu entre et aligner les éléments centrés à l'intérieur. Nous allons verser comme élément amusant qui sera aussi notre à faire. Et aussi, on va mettre un bouton ici, donc quand on clique dessus , une fenêtre de modèle s'ouvre et on peut voir la description de la chambre. Donc ce sera un autre composant que nous allons créer et nous allons le nommer Groom Info, BT et Moto Dar g s d'accord. Pour l'instant, il va être vide. Utilisons-le à l'intérieur. Index des togs ici. On va verser des infos BT et Moto, non ? Disons avec et maintenant définissons notre composant. Tout d'abord, nous allons afficher la description de la chambre et le nom de la chambre aussi. Donc pour ça, on va utiliser le contexte d'utilisation, Elector. Donc, tout d'abord, nous allons mauvaise description ici, et il va être utilisé voiture et jeté crochet. Donc, nous obtenons notre valeur et de la valeur nous grandissons description. Et vous rappelez-vous que je vous ai dit qu'il est important de ne pas sélectionner les objets car ils sont comparés e e référentielle Donc, cela signifie que si nous avons besoin de sélectionner plusieurs valeurs à partir d'un objet , nous devons les sélectionner séparément. , Donc, ils deviennent une valeur primitive parce que la description est une chaîne. C' est donc un type primitif. Donc, nous avons également besoin d'afficher le nom. Donc on va faire exactement la même chose. Utilisez la chambre actuelle, et nous allons pointer le nom du point de la pièce. Bon, maintenant, maintenant, à l'intérieur de notre balisage, on va verser un élément de bouton de notre costume à l'intérieur. Nous allons verser des informations de chambre et l'apparence va être clignotant et le nom de la classe va tapoter sur l'accès X est zéro maintenant, parce que nous avons un mobile nous allons utiliser à nouveau notre propre crochet personnalisé, qui est utilisé état mortel. Laisse-moi l'importer. Et de ce crochet que nous allons attraper est ouvert, fermé et ouvert. Maintenant, à côté de ces éléments de bouton, nous pouvons nous permettre une composante morale que pour la propriété de spectacle que nous allons mettre est ouverte pour en hauteur. On va mettre des vêtements. Et à l'intérieur de ce mortel, comme toujours, nous aurons un point mortel Heather. Ensuite, on aura le corps et le pied de page. Alors remplacons ces valeurs, Littlefoot elle. Ok, donc pour Model Heather, on va verser le titre de point de modèle et pour le titre, on versera plus qu'à propos de ce nom de pièce que pour le pied de page. On va verser un autre bouton qui va fermer la moto. Alors mettons des vêtements alors nous allons spécifier sur Click va être des vêtements et aussi ça va être un élément de bloc, accord ? Et nous sommes corps, ce qui va spécifier quelque chose de simple, ce qui va être un six tack. Et nous allons mettre la description et le nom de la classe va être la marge inférieure sur puis va aller la description elle-même. Alors mettons la description. Et maintenant, sauvegardons Et supprimons ce def et remplacons-le par le contexte de réaction . Déplaçons également l'importation vers le haut. Et aussi nous n'avons pas utilisé ce gestionnaire ouvert. Mettons-le pendant des jours. Le bouton sur le clic va être ouvert. D' accord, sauvegardons ça et jetons un coup d'oeil. Maintenant, nous avons le bouton d'informations de chambre qui ressemble à un lien. Et quand nous cliquons dessus, nous avons une fenêtre morale qui dit à propos de Bonjour. Description de la description. Hé, proche. Essayons-le à nouveau en ton propre nom. Nous avons cette description étrange et tout fonctionne bien. Donc c'est tout pour cette vidéo. Engageons nos changements. Laissez les gens obtenir à tout peut alors obtenir engagement. Disons, a commencé à construire Chat Top Créé une description de la chambre. Modoff. D' accord, parfait. se voit dans la prochaine. 123. Denormalizing des données - Créer des mots de chat: bonjour. Dans cette vidéo, nous allons commencer à créer du fond carbonisé. Allons-y avant de commencer. Je veux mentionner que dans la vidéo précédente, quand nous avons commencé à créer Top chat, j'ai oublié de mentionner quelques détails. Tout d'abord, nous devons ajouter quelques noms de classe supplémentaires et ce sera cet âge pour Element. Alors mettons le nom de la classe et nous allons mettre le texte disparaître pour éviter que les impôts ne débordent si c'est trop long. Et puis nous allons ajouter les drapeaux d'affichage et aligner le Centre d'objets pour nous assurer que lorsque nous sommes sur des appareils mobiles, cet Aiken et le texte sont centrés verticalement, droit et aussi un détail supplémentaire. Si nous ouvrons la salle pour Betty Inamoto, nous avons utilisé le sélecteur de contexte, Donc pour le faire fonctionner, nous devons aussi frotter l'élément autour du mammifère. C' est ce qu'on a oublié de dio. Donc, mettons mémo ici en bas et importons aussi du contexte de réaction Maintenant utiliser. Le sélecteur fonctionnera comme prévu. D' accord, passons à autre chose et commençons par Chad Bottom. Naviguons dans Teoh Index Dodgy s à l'intérieur du dossier inférieur. Et ici, définissons notre marché. Tout d'abord, on va verser pour le groupe et à l'intérieur de ce groupe d'entrée, on va mettre l'entrée réelle avec l'espace réservé, non ? Et vous envoyez un message ici et trois points à la fin. À côté de cette importation, on va verser un élément bouton. Donc, nous allons définir importer le bouton Groupe Dar. Et ce bouton aura la couleur bleue et l'apparence primaire à l'intérieur de ce groupe de grange, on va verser. Je viens et je peux va être envoyé. Très bien, disons attendre et voyons, qu'est-ce qu'on a ? Donc maintenant, nous avons cette importation et nous avons le fond. Donc, lorsque nous cliquerons sur ce bouton, le message sera envoyé. Bon, maintenant, définissons notre fonctionnalité. Donc, tout d'abord, nous avons besoin d'état. Donc, nous allons créer l'importation et dit en pauvre, et par défaut, il sera réglé sur un rétrécissement vide. Ensuite, nous devons spécifier sur le gestionnaire de modifications pour l'événement de modification pour notre importation. Et nous devons aussi associer notre contribution à l'état réel. Alors définissons la valeur. Il va être importateur. Et pour un événement de modification, nous allons spécifier la modification à l'importation. Heller. Définissons cela sur le changement d'importation et nous pouvons l'optimiser à l'avance où ils utilisent rappel parce que nous avons l'état d'entrée qui change fréquemment et sur le changement d'importation n' aura aucune dépendance. Donc, cet événement inchangé nous donne de la valeur comme premier argument et événement. Donc, nous devons obtenir la valeur réelle d'ici, et ensuite nous appellerons ledit, importer avec valeur. Et juste pour mentionner que parce que nous utilisons cette entrée qui vient de notre costume comme un composant , c'est pourquoi nous recevons la valeur comme premier argument. Dans tous les autres cas, nous ne recevrons que l'objet de l'événement. Maintenant, nous devons ajouter des fonctionnalités à notre bouton pour réellement envoyer le message. C' est pourquoi nous allons spécifier une nouvelle fonction que nous nommerons sur Send Click. Il va être notre gestionnaire pour sur clic Événement sur ce bouton. Alors apaisons. Donc foran clic, nous allons verser sur envoyer clic Et tout d'abord, ici nous allons faire un simple contrôle Si j'étais dans le port. Si notre message n'est pas vide, nous allons spécifier la garniture de point d'importation égale message vide. Si c'est le cas, alors il sortira simplement du dysfonctionnement. Ensuite, nous devons assembler le message. Et à l'avenir, nous aurons également déposé des messages. Donc, pour cela, nous allons créer une fonction commune qui sera appelée pour assembler le message afin qu'il attachera des propriétés communes à notre message. Donc, ici en haut, nous allons créer une nouvelle fonction que nous allons nommer, assembler, message, et comme argument, il recevra le profil utilisateur. Et disons Chad, je d ok, et puis il nous donnera un objet avec la pièce i d qui va être vérifié, I d. Ensuite, nous aurons l'objet auteur et ici nous allons définir des données normalisées avant de continuer. Permettez-moi d'expliquer la structure que nous aurons. Donc, si nous ouvrons notre base de données dès maintenant, nous avons des salles et des profils et nos données sont maintenant plates et vraiment faciles à gérer. Cependant, maintenant, nous avons des chambres et nous devons créer des messages. Comment pouvons-nous aborder cela ? Nous pouvons évidemment mettre des messages à l'intérieur de cet objet, Cependant, avec des données en temps réel basées parce que nous sommes des demandes limitées, nous devons décider judicieusement de notre structure. Donc, avec la base de données en temps réel, il est vraiment important de garder la structure aussi plate que possible. Cela signifie qu'idéalement, nous ne voulons pas créer d'objet imbriqué. C' est pourquoi nous allons créer un autre objet Voyons voir, route que nous nommerons les messages et la perspicacité. On va mettre nos données de message et ensuite faire référence au fait que ce message appartient à cette pièce. Nous allons spécifier la pièce à l'intérieur de ce message. Et aussi nous allons de Normalized Data de Normalizing signifie que nous allons copier et dupliquer nos données. Ceci est pour empêcher d'effectuer plusieurs requêtes sur notre base de données lorsque nous avons besoin d'afficher quelque chose. Par exemple, chat avec message de chat. Nous voulons également afficher le nom du profil utilisateur, Avatar et d'autres choses. Donc, lorsque nous affichons un message, si nous ne dupliquons pas les données, nous devons envoyer une deuxième demande à notre base de données et obtenir l'indicateur de profil réel. Donc, pour éviter d'effectuer plusieurs demandes, nous allons le dupliquer. C' est donc normal dans aucune base de données SQL. Allons-y. Donc, pour assembler le message pour l'auteur, nous allons verser le nom qui va être profilé le nom puis nous allons verser aussi votre i d , qui va être le profil que votre i d alors créé à va être créé au profil, et aussi nous avons besoin de verser avatar conditionnel. Donc, si vous n'avez pas d'arbitre, nous ne le mettons pas à l'intérieur de cet objet pour cela. On va verser trois points. Ensuite, on va faire un mauvais profil sur Avatar, et on va demander si le cadeau existe. Ensuite, on versera la clé de l'avatar avec l'avatar de la porte de profil. Donc, sinon, nous allons verser un objet vide. Donc, quand l'avatar de profil existe, nous allons spécifier cet objet. Et parce que sur trois points, nous ne pouvons pas étendre cet objet à cet objet global. Donc, de cette façon, il attachera cette propriété à cet objet. Sinon, nous allons étaler l'objet vide, ce qui n'ajoutera rien. Ok, donc votre auteur suivant, nous allons ajouter, créé à et ici nous allons spécifier Firebase. Mais importons en premier lieu. Laissez-moi mettre import fire base de l'application firebase, et ce sera la valeur du serveur de base de données firebase. Horodatage. Bon, maintenant, utilisons ce message d'assemblage et mettons-le ici. Nous allons donc créer un nouveau disponible qui nommera les données des messages. Ensuite, on va appeler, assembler un message avec profil et Chad I d. Donc on va obtenir le profil de notre contexte. Donc, nous allons mauvais profil de l'utilisation de profil Crochet que nous avons du contexte de profil, utiliser profil. Et aussi, nous avons besoin de discuter Idée. Et nous pouvons l'obtenir avec l'aide sur l'utilisation de Paramus qui vient de réagir programmes jeunesse Router . D' accord, bien. Maintenant, à ces données de message, nous devons joindre le texte du message réel. Alors voilà, apaisons le message. Le texte de données va être notre entrée. D' accord. Et maintenant, la chose est que nous devons effectuer une opération atomique pour mettre à jour les données à plusieurs endroits à l'intérieur de la base de données avec une base de données en temps réel. C' est vraiment facile à faire, et j'adore ça. Attendez. Alors, qu'est-ce qu'on va faire ? Nous allons créer un nouveau message à l'intérieur du chemin des messages. Et aussi, nous allons mettre à jour les chambres. Et on va mettre un autre accessoire, nom de légume, dernier message. Ceci est pour afficher le dernier message ici à l'intérieur de cette liste de chat. Bon, alors ce qu'on va faire, on va créer un nouvel objet. Ce sera un objet vide par défaut, qui sera mis à jour. Et la logique sera la prochaine à l'intérieur de cet objet, nous modélisons nos données de mise à jour dans la base de données liée Lee à la route hors de la base de données. Nous aurons donc la passe de mise à jour comme clé. Et pour cette clé, nous aurons les données mises à jour réelles, puis nous appellerons ces mises à jour à la route hors de la base de données, et il l'effectuera comme une opération atomique. J' aime vraiment ça. Ce que je veux dire, c'est que nous devons d'abord définir un nouveau message que j'ai d'avance. Donc, pour cela, créons un nouveau message variable I d. Ici. On va mettre la base de données. Cette fois, ce sera la base de données qui vient de Laissez-moi à nouveau, comment l'importer, n'est-ce pas ? Ça ne marche pas. Faisons-le manuellement. Donc nous allons importer la base de données de MISC. Bon, revenons aux dossiers. Ok, encore un niveau. Misc Firebase. D' accord, parfait. Donc, base de données, alors nous allons devoir spécifier une référence à nos messages. Ensuite, nous allons pousser au sol, et ensuite nous obtiendrons garder de cette façon nous pouvons obtenir une clé unique de Riel Time Database sans créer le document réel. Ok, Maintenant, nous devons mettre à jour cet objet de mises à jour. Alors mettons des mises à jour et notre première propriété va être des messages. Ensuite, nous allons spécifier le message que j'ai par ici. Et pour ce message, je d. Nous allons apaiser les données de message que le deuxième objet va être des chambres, slash chat I D et slash dernier message et pour le dernier message, nous allons pacifier toutes nos données de message et aussi En plus, nous allons joindre le message i d. Donc le message I d va être un message que j'aime ça. Maintenant, nous devons mettre à jour la base de données réelle. Donc ici, on va mettre pour essayer, attraper bloc, et ici on va appeler une attente et on va convertir le dysfonctionnement Teoh une fonction d'évier. On va appeler notre base de données avec Treff. Donc, nous obtenons une référence à la route hors de notre base de données sans spécifier le chemin, alors qui va appeler la mise à jour et nous allons passer notre objet de mises à jour, et il sera pic Toutes les mises à jour passées de Keys, et il mettra à jour ces passé à l'intérieur la base de données juste après la mise à jour de nos données. On va appeler l'entrée set à une chaîne vide, et aussi on va mettre une erreur de porte d'alerte et on va spécifier un message d'ancrage, ok ? Et aussi peut-être définissons l'état de chargement. Donc, à côté de cette importation, créons est le chargement et triste est prêt, qui sera défini sur false par défaut. Ensuite, nous allons appeler dit se charger juste avant de faire une tâche asynchrone. Au cas où on échouerait, on l'appellerait Satya Falls. Et quand on aura fini, , on appellera Faux. Maintenant, nous allons utiliser l'état de chargement dis pour ce bouton. Alors mettons Onley désactivé lorsque nos données sont en train de se charger en ce moment, peut-être sauvegardons et jetons un coup d'oeil. Qu' est-ce que tu as ? Donc, si j'envoie un message à la base de données, j'ai la permission ce soir et c'est parce que nous n'avons pas spécifié de règles de sécurité. Passons aux règles. Et puis copions tout ça. Collons-le ici en bas. Renommez-le à vos messages et spécifions le message I d Enregistrez-le et synchronisons-le avec nos règles locales. Et maintenant, essayons d'envoyer un nouveau message. Donc, si je clique maintenant, ouvrons notre base de données et ici je peux voir un nouveau chemin, qui est des messages que j'ai nouvellement généré clé, qui est en fait ce message que j'ai créé avec cette ligne de code. Si nous l'ouvrons ici, nous avons créé à l'appartenance compote Cette chambre I, d auteur de texte, est la personne suivante et à l'intérieur des chambres. Si nous ouvrons maintenant, nous avons aussi perdu un message, qui est ce message que nous avons envoyé. Donc ça a l'air très bien. La seule chose que je veux faire ici est en fait que je veux peut-être à un nouveau gestionnaire pour l'événement key down. Donc, lorsque nous cliquons aussi sur le bouton Entrée, le message est envoyé. Donc, pour cette importation, mettons également sur l'événement key down et nous allons spécifier sur le gestionnaire key down, Mettons ensuite, Teoh sur le changement d'entrée. Et cela sur Qi vers le bas va être Ou peut-être nous allons le mettre ici en bas, à côté de sur envoyé clic à l'intérieur sur la touche vers le bas. Nous recevrons un objet d'événement cette fois, et nous allons demander si l'événement Kiko ou est égal à 13. Si notre bouton que nous appuyons est entrée, alors nous allons d'abord appeler événement prévenir par défaut pour empêcher toute fonctionnalité par défaut définie pour ce bouton. Ensuite, nous allons appeler sur le clic envoyé. Bon, maintenant, maintenant, essayons encore une fois si je dis bonjour à nouveau. Si je clique, entrez le message droit a été envoyé et la base de données a été mise à jour. Donc je suppose que c'est tout. Finissons cette vidéo. Engageons tous nos changements en appelant bon à tout. Ensuite, obtenez commit et, nous allons spécifier créé en bas carbonisé Envoyé messages à de chat. Splendide. se voit dans la prochaine. 124. Affichage du dernier message dans la liste de pièce: Bonjour. Maintenant que nous avons des messages à l'intérieur de notre base de données et que nous avons la propriété de message de luxure disponible sur les données du salon de chat, nous pouvons afficher ce dernier message à l'intérieur de la liste de chatroom élément de la salle de chat. Faisons-le. Revenons au code et ouvrons le composant d'élément de pièce ici en haut, où nous d structurer autour des propriétés. Nous allons aussi d structurer le dernier message que le premier ici à l'intérieur du temps au lieu de vous afficher la date créée à Let's ask, si nous avons perdu des données de message, alors nous allons afficher la nouvelle date hors dernier message créé à si quand ce message a été créé. Sinon, nous allons le garder tel qu'il était avant d'afficher quand la pièce a été créée, puis ici ci-dessous, où nous n'affichons aucun message. Pourtant, au lieu de cela, laissons un mauvais rendu conditionnel. Donc si nous avons le dernier message, alors nous allons afficher le dernier message. Sinon, ce sera comme avant. On va afficher la portée. Pas encore de messages. Donc, à l'intérieur de ce fragment de réaction, nous allons mettre Avatar premier utilisateur et ensuite le message réel. Donc, ce def va être rappeur pour le composant avatar de profil que nous avons créé plus tôt comme vous vous en souvenez. Nous allons donc l'importer et pour les accessoires. Spécifions que la source sera le dernier message. Jetons un coup d'oeil. Dernier message Auteur fille Nora al atar dot auteur Lord Avatar Nom au cas où si Avatar n'est pas défini va être le dernier message Auteur nom point et taille va être fumée. Et pour ce sourd nous allons verser pour afficher Flex et un centre d'élément de ligne. Vous vous assurez que l'élément avatar est 10 à lire verticalement. Ensuite, vous décidez si nous allons nous débarrasser de cette écorce pour réagir fragment à côté de cet avatar de profil . Affichons un autre sourd avec des balises de nom de classe disparaissent pour empêcher les attaques de débordement et de marge à gauche. Mettons-toi à l'intérieur. On va mettre Def. Cela dira le dernier message point auteur nom point point. Et l'année prochaine, après son nom, on va pauvre travée. Dernier message, texte de chien et vers ce nom d'auteur, nous allons afficher du texte italique juste pour distinguer entre le nom de l'auteur et le dernier message. Bon, sauvegardons tout. Ne revenons pas à notre application. Je vois ça inattendu. Très bien, donc encore une fois, ce fragment de réaction buck. Maintenant, si je dis ce que je peux voir, j'ai le message réel. Je peux voir le nom de l'auteur. Je vois mon message et je vois ma portée Ah. Maintenant peut-être. Essayons un nouveau message. Laisse-moi te dire bonjour du futur. Si j'envoie ce message, je peux voir que ce message a été envoyé. Encore une fois, mon avatar, mon nom et bonjour du futur. D' accord, donc c'est tout. C' était assez facile, non ? Engageons nos changements. Mettons tout pour obtenir le système et nous allons nous engager en disant afficher le dernier message à l'intérieur élément de la pièce, pour fait. se voit dans la prochaine. 125. Travailler avec des données Denormalized: Hey, maintenant nous avons un message de convoitise dans la liste brisée. Mais voici le problème parce que nous dupliquons les données maintenant. Si disons que je vais à mon tableau de bord et que je mets à jour mon surnom à autre chose, sauvegardons pour afficher le look 16. Ensuite, ils mettent aussi à jour mon avatar. Si je le télécharge, il est en cours de téléchargement. Mais le dernier message n'est pas mis à jour car ces données sont dupliquées dans la base de données. Nous devons donc prendre soin de cela lorsque nous mettons à jour les données réelles. Si nous faisons quelques modifications, nous veillerons à mettre à jour toutes les références que nous avons dupliquées. revenons pas au code et naviguons vers le tableau de bord, Allons à Dashboard Togo, puis allez au tableau de bord. Et ici, au lieu de ce surnom utilisateur rugueux ensemble de nouvelles données. Nous devons trouver un moyen de mettre à jour toutes les références. Donc, ce que j'ai proposé de faire, je veux proposer de créer une fonction d'aide qui obtiendra toutes les références à l'intérieur de notre base de données, et ensuite nous pouvons mettre à jour notre base de données avec cette ancienne référence. En fait, ce sera le même que nous l'avons fait à l'intérieur du bas de Tchad quand nous avons créé cet objet de mises à jour et nous avons spécifié multiple passé pour effectuer une opération atomique, donc ce sera fondamentalement le même. Donc, nous pouvons appeler cette fonction comme ça. Définissons comment nous allons le faire. Donc, au lieu d'un surnom d'utilisateur de poids Raff set, nous allons appeler, Disons que nous allons recevoir des mises à jour et parce que nous allons accéder à notre base de données, ce sera dans une opération de phrase. Nous allons le nommer. Disons obtenir des mises à jour utilisateur à l'intérieur. Nous allons passer l'utilisateur I d qui va être le profil adore votre i d. Ensuite, nous allons passer la clé que nous avons besoin de mettre à jour. Donc, dans notre cas, ce sera le nom et ensuite nous allons passer la valeur réelle, qui va être de nouvelles données comme celle-ci. Donc maintenant, nous devons créer un dysfonctionnement. Naviguons deux aides, elle s et ici en bas, nous allons exporter la fonction de nom de problème obtenir des mises à jour de l'utilisateur. Donc, il va être quelque chose de fonction et il recevra l'utilisateur i d. Ensuite, il recevra la clé à mettre à jour et aussi il recevra de la valeur. Et peut-être passons aussi l'objet de base de données avec notre fonction. Donc, ici, nous allons passer aussi cet objet de base de données que nous avons à l'intérieur de divers foyers juste pour commodité comme celui-ci. Donc maintenant, à l'intérieur des aides, nous pouvons aussi avoir une base de données ici. Maintenant, nous allons créer un objet vide. Mises à jour indéfinissables de charbon que notre première mise à jour sera la valeur réelle que nous essayons mettre à jour afin de mettre à jour les mises à jour. Ensuite, ira profils slash utilisateur i d que barre oblique pour mettre à jour, et il sera défini sur valeur. Maintenant, nous devons obtenir les références réelles. Donc, nos références sont Let's prendre un message de regard I D. Than auteur que avatar créé à dans Also chambres. Dernier message. Alors, qu'est-ce qu'on va faire ? Nous définirons quelques promesses parce qu'il y a de multiples promesses. On ne veut pas les faire un par un. Nous voulons les exécuter tout de suite. C' est pourquoi nous définirons nos promesses. Et puis nous les attendrons tous avec un point de promesse. Toute notre première promesse va être obtenir des messages et il va être db dot Ralf dar messages, puis pour obtenir des messages où Disons que cet auteur, je vous égale notre utilisateur, Je d. Nous avons besoin d'abord de l'ordre complet par enfant. Ensuite, nous devons spécifier quel enfant. Nous sommes allés à la référence. Donc, dans notre cas, les messages de référence Donc, nous avons l'objet message. Ensuite, nous avons l'auteur slash utilisateur i D. Donc mettons l'ordre par l'utilisateur slash auteur i d. Et puis cette clé sera égale à l'utilisateur i d. que nous recevons comme un argument et ensuite nous allons mettre sa valeur pour obtenir la valeur réelle . Ensuite, notre deuxième promesse va être d'obtenir des salles d'utilisateurs, qui va être des salles de slash de référence DB. Encore une fois, nous devons mettre de l'ordre par enfant. Et cette fois, si nous ouvrons les salles, nous avons moins de message slash auteur slash utilisateur i d. Donc nous allons garçon dernier message Auteur, utilisateur I d. Et puis égal à l'utilisateur i d. Et encore une fois valeur. Maintenant que nous avons ces deux promesses non résolues, nous devons les résoudre. Pour cette raison, nous allons créer une promesse de poids que tout à l'intérieur nous avons besoin de passer un tableau de promesses qui va être obtenir des messages et obtenir des chambres comme ça et obtenir des messages nous retournera instantané des messages et obtenir des chambres sera nous renvoyer un instantané des chambres. Donc on va les structurer. Le premier élément est obtenir des messages. Donc, nous allons d'abord recevoir des messages, instantanés ou des messages. Chemise boutonnée. Une seconde va être chambres,chemise à pression, chemise à pression, que nous nommerons correspondant Klay am snatcher et Air Snapshot. Ensuite, pour chaque message que nous avons avec idée d'utilisateur, nous allons appeler pour chaque instantané de message pour chaque message que nous recevons, nous obtenons un instantané de message, et ici nous allons appeler des mises à jour. Ensuite, nous allons pauvres messages slash clé point snapshot message, qui représente le message i d. Donc nous aurons un objet avec tous ces messages, et la clé va être ce message idee off. Très bien, donc la clé de message barre oblique auteur touche barre oblique à mettre à jour. Donc, de cette façon, nous référons les messages auteur et l'enfant que nous voulons mettre à jour, ce soit Allah nom de voiture votre I d ou créé à. Et puis pour que cette clé soit mise à jour, nous allons mettre de la valeur et exactement la même chose que nous ferons pour notre instantané. Alors, copions-le. Et au lieu de m snapshot, allons pauvre cliché d'air, qui est de la chambre, chemise et puis pour les mises à jour, nous allons mettre des chambres, puis nous aurons un instantané de la pièce clé point, qui va être la salle i d. Alors ici, nous aurons le dernier message. Ensuite, nous aurons auteur, puis clé pour mettre à jour avec la valeur. D' accord. Et juste après cela, nous allons retourner l'objet updates que nous avons créé. Maintenant, disons ce que nous allons naviguer vers vous tableau de bord laisse et commenté, et nous allons réellement important cet objet des aides, mais il semble qu'il peut être automatiquement importé. Donc, nous allons importer obtenir les mises à jour des utilisateurs à partir de référençons nos aides misc helpers et il semble ne pas être trouvé juste, donc vous y aller. Mise à jour. Très bien, amène-toi là. Des mises à jour comme ça. Ok, parfait. Maintenant que nous avons des mises à jour, au lieu d'appeler cette fonction ici et au lieu de référencer les données réelles, nous pouvons réellement appeler juste la mise à jour de la porte de référence point de base de données avec des mises à jour. Ensuite, nous attendrons et nous supprimerons tout cela et aussi tout cela. Maintenant, sauvegardons et ouvrons également. Applaud Bt, dans lequel télécharge notre avatar et nous allons trouver la logique. Donc, ici encore, comme nous l'avons entendu à l'intérieur du tableau de bord permet de le copier et à la place, nouveau le référencement de l'élément enfant, puis la mise à jour comme ceci. Mettons les mises à jour obtiendraient vos mises à jour que pour le profil i d. Nous allons mettre à jour avatar cette fois et Avatar va être Ne pas charger l'euro comme ça. Maintenant, supprimons cette référence. Supprimons ce jeu d'avatar utilisateur. Soyons attrapés cette logique. Mettons-le ici et maintenant jetons un coup d'oeil. Si cela a réellement fonctionné, revenons au code. Laissez-moi le frais juste au cas où si je vais au tableau de bord, si je clique sur le changement, mon surnom Ok, peut-être que je vais dire bonjour. Nouveau nom. Si je clique sur le pseudonyme sécurisé a été mis à jour et j'ai toujours et d'être ici. Ok, peut-être que tu me laisses vérifier le tableau de bord 1. Mon temps. J' ai un nom ici. Consul les mises à jour du journal et jetons un coup d'oeil. Qu' est-ce qui ne va pas ici ? Si j'inspecte, je vais à la console je mets à jour mon surnom. J' ai reçu ce type de mises à jour, de messages , de profils , mais je ne mets pas à jour mon dernier message. Donc c'est bizarre. Naviguons dans les aides de Teoh. Et voici, jetons un coup d'oeil. Clé auteur à mettre à jour. Ok, chemise à pression perdue. Auteur, votre I D Vérifions notre base de données. Dernier message. Auteur, Votre I D Qui est utilisateur I d que nous passons. Oh, excusez-moi. Ici ne doit pas être le dernier ici. Ça doit être moins de message. Sauvegardons ça. Et maintenant une fois de plus. Changeons notre surnom. Tiu. Disons qu'elle a 22 ans. Si je mets à jour mon surnom, il est mis à jour ici. Parfait. Maintenant, vérifions Al Atar Si je télécharge une nouvelle image, Avatar a été évité. Regardons à l'intérieur. Dernier message. Oui. Ah, qu'est-ce qui a été mis à jour ? Ok, juste au cas où une fois de plus. Applaudissez. Avatar a été mis à jour. Parfait. Jetons un coup d'oeil. Oui, il a été mis à jour, donc cela a réellement fonctionné. D' accord. Parfait. Maintenant, supprimons cette chance Consul que nous avons mise ici et engageons nos changements. C' est ça. Embarquons tout à l'état de scène et nous allons nous engager. Mettre à jour toutes les références utilisateur si les données sont mises à jour. D' accord. Parfait. se voit dans la prochaine. 126. Affichage de messages de chat: Hé, là. Dans cette vidéo, nous allons afficher les messages de chat ici au milieu de la page de chat. Allons-y, Revenons au code et nous allons trouver nos messages de fenêtre de chat de dossier. Et ici, nous avons des togs d'index déjà moins grands, et vous fichier qui nommera l'élément de message. Pour l'instant, il sera vide. Alors mettons bonjour à l'intérieur. Et laissons ça comme ça dans les messages ici en premier lieu, nous allons définir notre état que nous allons gérer avec l'état d'utilisation. Donc, nous allons lui nommer des messages et des messages sat. Et par défaut, il sera tel de savoir. Ensuite, nous avons également besoin de saisir notre chat I d que nous avons actuellement ouvert. Donc, pour cela, nous allons utiliser Paramus Hook qui vient du rotor de réaction et nous allons obtenir enfant, Je d maintenant à enfant, l'intérieur de l'effet d'utilisation. On va appeler notre base de données. D' abord, nous allons saisir notre référence au chemin de chat dans la base de données, qui est des messages. Alors, laissons les mauvais messages rugueux. Ensuite, nous allons appeler la base de données, mais pas celle qui vient du paquet Firebase un qui vient des RG basés sur le feu. Alors importons celui-là. Ensuite, nous allons spécifier les messages barre oblique de référence. Maintenant, nous allons mettre un écouteur en temps réel en attente des messages qui sont liés au bavardage ouvert . Donc on va voir des messages pacifier, Ralf, commande de porte par enfant. Et ici, nous allons pacifier la chambre I D. Et c'est une propriété que nous avons sur chaque message, qui est la chambre I. D. Donc cette idée sera égale à discuter i d que nous recevons de Paramus. Maintenant, il est apparu comme une dépendance, Alors modifions. Et juste après ça, mettons un auditeur en temps réel donc nous allons mettre de la valeur et honorables pacifier le rappel qui recevra un instantané. Maintenant, comme vous vous en souvenez, cet instantané sera un objet où chaque clé est un message I d. Et puis nous obtenons les données réelles. Nous devons donc le transformer. Et nous l'avons déjà fait avec la transformation en tableau avec la fonction I d. On l'appellera une fois de plus. Donc, laissons de mauvaises données et ensuite nous allons mettre transformée en tableau avec i d. Ensuite, nous allons appeler la valeur de point instantané et la passer à cette fonction. Et puis nous allons mettre à jour l'état avec des données comme ça et parce que c'est un écouteur en temps réel . Il s'agit d'un abonnement que nous devons nous désabonner. Donc, nous allons utiliser Ah, nous sommes la fonction de nettoyage pour l'effet d'utilisation. Et là, nous allons verser des messages, radeau et chien, et nous pouvons spécifier la valeur. Donc, de cette façon, nous allons nous désabonner de tous les auditeurs en temps réel sur ce chemin. Bon, maintenant, notre prochaine étape est d'afficher les données. Et d'abord, nous devons obtenir en fait quelques valeurs d'intimidation qui nous aideront à rendre conditionnellement nos messages. Donc notre premier sera abattu vide et carbonisé. Vide ne sera que lorsque nous avons des messages définis et que la longueur des messages est égale 20 Donc, nous avons chargé tous les messages, mais il n'y a pas de messages du tout. Bon, alors nous pouvons également avoir peut montrer des messages qui indiqueront si nous pouvons rendre notre élément de message que nous avons créé. Donc, si nous avons des messages et des messages, la longueur des points est supérieure à zéro. Donc on pourrait mettre cette condition directement ici à l'intérieur de notre balisage, mais juste pour être plus soigné, tu sais, on les a mis ici. Donc à l'intérieur de ce déf, on va mettre la prochaine logique. Tout d'abord, ce ne sera pas un diff. Il va être un u L. Alors le nom de classe va être liste de messages et aussi les coutumes poussent qu'à l'intérieur nous allons verser est carbonisé vide. Ensuite, on va afficher un élément allié parce qu'on vous a, moi et on va dire pas encore de messages. Et puis si on peut montrer des messages, on va verser des messages, une carte Doc et on mappera chaque message à message. Ouvrons l'élément de message d'intelligence. Il va être la porte de message i d. Et puis nous allons passer un message avec un message comme ça Maintenant à l'intérieur du message nous devons structurer cette propriété. Alors mettons les messages et ici à la structure D de niveau inférieur à partir des messages, mais pas à partir des messages. Excusez-moi du message. Renommons le en message. Sauvegardons ce qui est également des changements dans le message. Et à partir de ce message, nous allons destructeur auteur trouble structure D créé à et nous allons détruire le texte. Maintenant, il va être un élément l i et il aura le nom de la classe hors parted et la marge inférieure. Alors nous mettrons Dave ici. Ce sera la partie supérieure de notre message. Et puis nous allons mettre un autre def. Et à l'intérieur de ce différent mettra span qui affichera notre message lui-même détecte et nom de la classe va être Ward break tout pour empêcher le texte de débordement si elle est trop longue. Donc, pour notre partie supérieure, nous allons spécifier le nom de classe hors drapeaux d'affichage aligner les éléments police centre va être plus audacieux et marge inférieure un, puis ici nous allons verser Premier profil Avatar, Allons l'ouvrir. Profile tous Matar. Et maintenant, nous allons utiliser l'intelligence pour importer. Donc, en tant que source, on va moins cher. Avatar de point auteur pour le nom. On va nous verser ou Doc Nom 4 nom de classe. Ce sera la marge à gauche. Une taille va être excédentaire. Et puis à côté de cet avatar, nous allons mettre Spawn Element si nous allons afficher le nom et le nom de la classe va être marge à gauche et après que la colonne vertébrale s'affichera lorsque ce message a été créé. Donc on va mettre le temps il y a. Alors ouvrons l'article de la pièce. Soyons pris cette importation il y a temps libre. Mettons-le à la côtelette. Appelons p il y a la même heure et mettons-le ici au lieu de cette date. Temps que nous allons afficher. Juste créé à et pour le nom de classe pour normal et texte noir. Nous allons le garder tel qu'il est, mais nous allons également afficher la marge à gauche à qui ? C' était beaucoup. Maintenant, jetons un oeil. Comme vous pouvez le voir, nous avons nos messages. Et maintenant, si je disais, exécutant votre message, disons bonjour là. Vous pouvez voir qu'il est apparu ici. Et aussi il est apparu ici à l'intérieur du dernier message. Donc maintenant, nos messages sont affichés. Et cela fonctionnera aussi pour n'importe quel autre salon de chat. Disons bonjour d'ici. Maintenant, nous avons un message ici. D' accord. Parfait. Donc, c'est un nous allons engager nos changements. Oublions tout. Mettons, engagez-vous. Et le nom des personnes affiché des messages dans la page de chat. Très bien, à la prochaine. 127. Affichage des données de profil utilisateur: Bonjour. Dans cette vidéo, nous allons ajouter une nouvelle fenêtre de modèle. Ainsi, lorsque nous cliquons sur le nom d'utilisateur de quelqu'un, nous pouvons observer le profil d'utilisateur. Ne revenons pas au code. Et ici, sous le dossier Messages, saluons votre fichier. Nom du légume Info profil. BT et Moto GS. Créons un nouveau composant. Et pour l'instant, gardons-le vide. Ouvrons l'élément de message. Et ici, au lieu de l'élément span où nous affichons le nom de l'auteur, Afficher le profil dans pour BT et Moto et pour ce composant parce que nous avons besoin d'obtenir des données utilisateur , nous devons l'afficher à l'intérieur. On va passer le profil Prop et on va passer. Juste auteur et tout le reste sera géré à partir de l'intérieur du composant. Donc à partir d'ici, on va détruire ton profil pour l'instant et définir le marché. Donc, tout d'abord, nous allons mettre le bouton et ce bouton dira le nom court de notre utilisateur. Alors créons de nouveaux viables ici que nous nommerons le nom court et il va juste jouer sur Lee le premier paroisse hors surnom. Donc, si c'est un nom complet comme le prénom second, nous n'afficherons que le prénom. Mettons donc le nom du poste de profil. Ensuite, nous allons le diviser avec des espaces vides et ensuite nous prendrons le premier élément. Maintenant, nous allons afficher seulement le prénom parce qu'il va être modèle. Nous avons aussi besoin d'avoir un état mortel. Donc, nous allons utiliser notre crochet, qui est utilisé état du modèle. Ici, nous recevrons est ouvert, fermé et ouvert. Bon, maintenant à côté de ce corps et nous allons verser le modèle. Et à l'intérieur de ce modèle, nous allons d'abord définir la propriété show qui va être ouverte et sur la peau va être des vêtements qu'à l'intérieur de cette moto. Nous aurons une fille mortelle, Heather comme toujours. Ensuite, nous aurons un corps et nous aurons un pied de page comme ça. Donc, à l'intérieur de Heather, nous aurons le titre de la porte mortelle et à l'intérieur du titre moral, nous allons afficher le profil court du nom, puis à l'intérieur du corps ou peut-être à l'intérieur du pied de page, affichage des bulles en bas qui va être un élément de bloc sur le clic Il va fermer notre moto et il sera sur le point juste pour fermer ce mortel que l'intérieur du corps. D' abord, nous allons mettre le nom de classe hors centre de texte Donc à l'intérieur d'une bulle pauvre exactement la même image d'avatar que nous le faisons dans Avatar. Un Bt de sang dans lequel est oui, ce profil avatar. Alors copions-le et mettons-le ici. Maintenant, nous allons importer le profil Avatar. Et à côté, nous allons afficher H 4 où nous afficherons le nom complet de cet utilisateur. Alors attrapons d'abord. CONST. Le nom va être saisi du profil. Et peut-être que nous allons aussi attraper Avatar et disons créé à Donc maintenant, nous n'avons pas besoin de Teoh la structure ou nous n'avons pas besoin de spécifier le profil ici. Donc, pour cet âge, car nous allons verser la marge parler à ajouter une certaine marge au sommet. Et puis nous allons afficher membre depuis et puis nous allons verser membre depuis variable que nous allons créer. Donc, nous allons pauvre membre const depuis et nous allons mettre une nouvelle date créée à et puis nous allons simplement appeler à la chaîne de jour locale à l'ancienne notre date. Non. Donc on n'a pas utilisé Open. Alors mettons-le pour cela sur clic. Ok, bien. Maintenant, ouvrons l'élément de message. Ça a l'air bien. Ça a l'air bien. Maintenant, jetons un coup d'oeil. Donc, comme vous pouvez le voir maintenant, nous avons le bouton. Quand on clique dessus, on peut voir qu'elle a l'air 22. Profilez notre image, nom complet, scènes de membres et fermer Perfect. Mais je ne veux pas qu'on l'affiche comme ça. Donc on va juste quelques choses. Donc, tout le reste qui sera passé à ce composant en tant que prop sera redirigé vers les accessoires de bouton. Et aussi, nous allons nous débarrasser de ce def comme un élément de rapping. Que ce soit juste un bouton à la fin, de sorte que tous ces accessoires seront passés à ce bouton. Donc, répandons Bt et props objet sur ce composant comme ça. Donc, pour ce profil en quatre temps et modèle, nous pouvons passer l'apparence, qui va être lien. Et aussi nous pouvons passer le nom de classe. Ajoutons du rembourrage. Zito Dan. Ajoutons une marge à gauche et aussi du texte noir. Sauvegardons ça et jetons un coup d'oeil maintenant. Ça a l'air bien. Si j'ai ou je peux voir que c'est quelque chose que cliquable. Si je clique dessus, je peux obtenir des données utilisateur. Ok, parfait. Alors, c'est ça. Maintenant, engageons nos changements. Obtenez tout, faites des commits. Disons que les données utilisateur affichées avec la fenêtre maro. Très bien, à la prochaine 128. Ajouter la présence en temps réel - Partie 1: bonjour. Dans cette vidéo, nous allons gérer la présence de temps rial dans notre application avec feu Base. C' est assez facile à faire. Voyons comment on peut gérer ça. Allons à Google et nous allons simplement taper firebase riel présence temporelle. Ensuite, nous pouvons aller au premier lien construit présence et magasin de feu de nuage. Et ici, nous avons déjà une solution utilisant la présence dans la base de données en temps réel. Donc, nous devons juste attraper être cet extrait de code et ensuite l'utiliser dans notre application. Donc, la première copie est hors ligne et en ligne pour les objets de valeur de base de données et nous allons naviguer vers le contexte de profil. C' est l'endroit où nous allons tout gérer, car ici nous pouvons avoir accès à l'authentification. Objet avec abonnement en temps réel. Très bien, alors mettons-nous malgré un bules ici en haut, et remplacons Var par Constant. Maintenant, jetons un coup d'oeil. Que devons-nous faire ensuite ? Donc, nous devons deviner radeau de base de données pour info connecté. Donc, c'est comme une manière générale dans le chemin de base de données que nous pouvons accéder et nous pouvons obtenir la présence en temps réel hors utilisateur actuellement connecté. Alors, copions-le. Ou peut-être copions tout ça comme ça, et mettons-le ici à l'intérieur. Si l'objet d'authentification, Denver effectuera notre gestion de présence en temps réel. Donc, ici, nous devons obtenir une référence à interconnecté au lieu de la base de données Firebase. Utilisons la base plus tard que nous avons eu à l'intérieur misc. Base de feu. Donc, nous obtenons une référence pour déduire connecté sur la valeur ce qui est converti en une fonction étroite que nous recevons. Snap. Bien sûr, si l'instantané, cette valeur est fausse. Laissons pauvres et trois personnes égalité que le statut d'utilisateur. Référence de la base de données Alors jetons un coup d'oeil. C' est si précieux que nous pouvons copier. Et c'est l'endroit où stocker notre statut dans notre base de données en temps réel. Donc, ce que nous devons faire, parce que ce sera un abonnement en temps réel, nous devons également nous désabonner de celui-ci à l'avenir. Alors mettons-le ici à l'intérieur de Yousef agir comme un nouveau viable, nous allons le nommer utilisateur startles base de données rugueuse. Supprimons la base de données et mettons simplement le statut de l'utilisateur, ref. Ensuite, nous allons assigner les démarreurs utilisateur ref au statut de base de données Ralf et vous idée, Mettons ici en haut, juste comme ça, et au lieu de vous idée. Utilisons votre i d et remplacons-le par l'interpolation de chaîne. Donc, nous allons obtenir les deux objets point votre i d comme ceci alors, parce que c'est un abonnement. Quand on nous regarde. Vérifions si nous avons le statut de l'utilisateur. Réf, si on l'a fait, on va se désabonner. Et la même chose que nous ferons pour notre fonction de nettoyage sur les études d'utilisateurs de héros. Raugueux. Ok, parfait. Maintenant, nous allons gérer cette partie. Supprimons donc tous les commentaires. Supprimons tout ça. Et ici, nous allons verser l'utilisateur démarré sangle sur. déconnexion est hors ligne pour la base de données, puis la fonction. Convertissons en fonction adulte. Ensuite, remplacons-le par votre statut. Réf. Sad est en ligne pour la base de données, donc c'est fondamentalement tout. Maintenant, jetons un coup d'oeil. On a du feu. La base n'est pas définie. Jetons un coup d'oeil. Base de données Firebase. D' accord. Moins importer la base de feu de l'application Firebase afin que nous puissions avoir accès à la valeur du serveur. Temps temp. Sauvegardons ça et jetons un coup d'oeil. Maintenant, si on est à l'intérieur, on se voit refuser la permission. C' est intéressant. C' est probablement quelque chose avec des règles de sécurité. Jetons donc un coup d'oeil où nous écrivons nos données. Euh, hein. exactement. Donc, nous écrivons nos données pour réduire l'état de vous I d. Donc, nous allons à nouveau corriger les règles de sécurité pour ce passé à l'intérieur de la base de données. Donc nous avons un statut. Alors appelons ça ce chemin. On va le faire comme ça. Donc ici, nous aurons l'utilisateur I d. et puis nous serons en mesure d'écrire à ces endroits sur Lee. Si nous avons off, je d égal à utiliser leurs idées si licious Copiez cette logique et collez-la ici comme ceci. Maintenant, sauvegardons et jetons un coup d'oeil si cela a réellement fonctionné. Si je dois rafraîchir mon application, je peux voir maintenant je n'ai pas d'avertissements. Alors appelons ça les vaisseaux P et chantons les pleure avec nos données locales comme ça. Maintenant, revenons aux données et vérifions ici. Dans notre base de données, nous avons New Path, qui est des études que j'ai mon utilisateur, je d. Et puis j'ai moins de changement et je suis resté en ligne. Maintenant, jetons un coup d'oeil. Si je me déconnecte de l'application, je suis resté en ligne, donc c'est parce que lorsque nous nous déconnectons, nous n'avons pas mis de géologie pour notre base de données, donc Onley quand nous nous connectons. Permettez-moi de continuer avec Google et de sélectionner mon compte. D' accord ? Je suis connecté. Vous pouvez voir que la dernière modification a été modifiée. Vous avez vu cette flotte tirer, non ? Alors que se passe-t-il ? Que cela fonctionne réellement quand nous nous connectons, mais pas quand nous nous déconnectons. Et le fait est que nous définissons nos règles de sécurité de cette façon, nous pouvons écrire et lire sur Lee quand nous avons hors de vous. Donc , quand nous nous connectons à partir de notre application quand nous nous déconnectons, cet objet auteur sera réglé sur maintenant, donc cela sera viré. Et si nous mettons notre logique ici quand nous nous déconnectons de cette façon, nous obtiendrons la permission ce soir parce qu'à l'époque, quand nous allons essayer de droit à la base de données de l'objet sera réglé à maintenant. La solution ici est juste d'aller au tableau de bord. Allons à Dashboard Tugle ici. Nous devons verser cette logique. Donc, juste avant de déconnecter Mobile droit à la base de données. Nous avons donc toujours accès à nos règles de sécurité. Donc, nous pouvons toujours avoir accès à l'objet auteur. Et seulement alors nous allons déconnecter notre utilisateur. Alors quelle logique devrait être mise ici exactement la même que nous versons ici à l'intérieur des démarreurs utilisateur. Refs, c'est ça. Ah, voler pour des moyens de données. Donc ce que je t'ai proposé à partir de maintenant, on va exporter CONST. Est un vol pour la base de données. Ensuite, nous allons copier cette logique. Alors juste avant de nous déconnecter de notre application, nous allons coller cette logique. Ensuite, nous allons importer est hors ligne pour la base de données. Ensuite, on va verser la base de données Dodds Ralf, puis on va mettre le statut plutôt que la barre oblique. Ensuite, changeons les devis et piquons notre utilisateur actuel. Je puis on va verser le set, et ensuite on va mettre est un vol pour la base de données quelque chose comme ça sur Lee, alors parce que c'est une promesse. Donc, on pourrait faire ici. C' est seulement alors que nous déconnecterons notre utilisateur. On va alerter notre utilisateur, et on va fermer notre application. Et en cas d'erreur, nous allons aussi avertir notre utilisateur, mais mieux. Et on va dire un meilleur message. Bon, maintenant, jetons un coup d'oeil. Alors laissez-moi rafraîchir l'application juste au cas où. Jetons un oeil à l'intérieur de la base de données. Maintenant, nous avons un statut en ligne, et si je vais me déconnecter, je suis déconnecté. Et maintenant, je suis resté hors ligne. Donc assez cool en ce moment si je me connecte à nouveau, je suis connecté et le statut a été changé. Et maintenant, si je ferme mon application, si je ferme mon onglet, je peux voir que l'état est un vol, donc cela fonctionne réellement. Et c'est ça. Donc, c'est comme ça qu'il peut être manipulé avec le feu lever. C' était assez facile, non ? La seule chose ici que je veux faire est que je veux réellement me désabonner aussi de référencé ou info dot connect quand nous sommes signés. Donc nous allons nous déverser quand nous serons signés notre Et aussi nous allons mettre la même fonction pour le nettoyage juste au cas où. Donc, de cette façon, nous gérons tous les abonnements en temps réel et tout fonctionne bien. Eh bien, c'est tout pour cette vidéo. Alors nous allons nous engager. Notre changement va tout ajouter à l'état de scène. Et puis je vais tout engager avec un message. Je dirai une présence de Riel dans le temps, écouteur pour un utilisateur. Parfait. Dans la vidéo suivante, nous allons afficher une présence en temps réel pour les utilisateurs à l'intérieur de la fenêtre de chat. On se voit là 129. Ajouter la présence en temps réel - Partie 2: Hé, là. Dans cette vidéo, nous allons afficher la présence en temps réel pour chaque utilisateur que nous voyons dans le chat. Il sera affiché sous la forme d'un dar devant l'utilisateur Avatar. Allons-y avant de commencer avec ça. Je tiens à souligner que dans la vidéo précédente, lorsque nous avons géré la présence en temps réel pour chaque utilisateur ici, nous avons fait cette comparaison. Si la valeur d'instantané que triple égalité est égale à false, ce n'est donc pas tout à fait correct car cette valeur peut ne pas être un bowling. Donc, pour éviter cela, mettons en fait une double négation pour le convertir en une ligne de bowline. Et maintenant tout ira bien. Bon, maintenant, commençons. Alors, qu'avons-nous besoin d'aller en premier ? Nous allons créer un crochet personnalisé qui nous donnera la présence des utilisateurs particuliers. Donc, permet de naviguer vers des crochets personnalisés. Et ici en bas, exportons et vous fonctionnez, qui va être utiliser la présence. Et ce crochet recevra l'utilisateur I D. que nous voulons obtenir la présence off. Alors créons notre état de présence. On va le nommer « présence » et « présence ». Ce sera un état d'utilisation simple, qui par défaut, sera dit savoir. Puis à l'intérieur de vous le fait que nous allons extraire nos données utilisateur. Donc nous devons d'abord obtenir des références. Donc, nous allons grand graphique d'état de l'utilisateur const allait être la base de données de firebase dot treff puis a commencé un mauvais état slash votre I d que nous obtenons comme un argument, alors nous devons verser un tableau de dépendances que nous avons besoin de passer votre i d à l'intérieur. Ensuite, nous allons mauvais état de l'utilisateur Rough dar sur la valeur. Ensuite, on va faire court, et juste après ça, on va vérifier si l'instantané existe. Donc, s'il y a un enregistrement dans la base de données pour ce chemin, alors nous allons verser des données const égale valeur de point instantané. Et puis on va mettre la présence aux données, accord. Et à l'intérieur de la fonction de nettoyage, nous allons nous désabonner de l'état de l'utilisateur Raft, démarrage de l'utilisateur. C' est rude. Et à partir de ce crochet, on va revenir en présence, non ? Parfait. Ça a l'air bien. Maintenant, nous allons créer un composant qui sera un point où nous allons afficher la présence de l'utilisateur. Alors passons aux composants. Et ici moins grand. Vous déposez le nom de légumes présence point les g s. Donc, à l'intérieur de ce composant, nous allons appeler notre cuisinier personnalisé, qui est la présence d'utilisation. Donc, nous allons pauvre présence const égale utilisation présence. Et nous allons passer votre I d. qui recevra comme accessoire à ce composant comme celui-ci. Ensuite, à l'intérieur du balisage, on va mettre le prochain, ouvrons notre documentation de costume. Ensuite, nous allons chercher une astuce d'outil. Allons l'ouvrir. Trouvons un exemple de désactivation des événements survolent. Nous avons donc besoin exactement de cette fonctionnalité. Allons aux exemples et copions celui-ci. Alors, à l'intérieur de notre cour, on va le placer comme ça. Importons murmure de notre voyant et au lieu de bouton, nous afficherons un lot et l'info-bulle ne sera pas cette info-bulle. Ce sera cette composante. Copions-le et fondons-le comme ça. Maintenant, nous devons également importer la pointe de l'outil et la pointe de l'outil à l'intérieur. On ne placera rien. Pour l'instant, cependant, il dit que le composant vide nous-même se fermant et vous êtes juste à l'intérieur. On va mettre l'insigne aussi de notre costume et à l'intérieur du lot bien, en fait, ne rien mettre. Ce sera juste une fléchette de couleur. Donc maintenant, nous devons obtenir ce que nous allons mettre à l'intérieur de la pointe de l'outil. Et ce que nous allons mettre à l'intérieur du lot quelle couleur va afficher ? Eh bien, nous avons réellement besoin d'effectuer une certaine logique, et le meilleur endroit pour gérer cela est en fait de créer une fonction personnalisée que nous appellerons à partir d'ici. Donc, pour ce badge, nous allons afficher le nom de la classe hors voiture, monsieur. Pointez elle et la couleur de fond de style va être obtenir la couleur que nous allons créer dans un moment et à l'intérieur, nous allons passer la présence comme ceci et pour l'astuce d'outil pour notre texte. On va passer, obtenir un texto. Et aussi on va l'appeler présence comme ça. Donc maintenant, nous avons besoin de créer ces deux fonctions, Donc, permet de naviguer ici vers le haut. Et d'abord, on va créer de la couleur. Nous recevrons la présence. Et d'abord, si la présence n'est pas définie ou si elle l'est maintenant. Donc si ce n'est pas défini, alors on va retourner une belle couleur, non ? Ensuite, nous allons mettre la déclaration switch et ensuite nous allons passer entre la présence dar. Ouvrons notre état de point de présence de base de données. Ensuite, si nous avons affaire en ligne, alors nous allons retourner la couleur verte. Si nous avons affaire à mentir, alors nous allons afficher la couleur rady et par défaut, nous allons afficher aussi super comme ça. Donc, pour la couleur, nous avons déjà maintenant nous allons créer ceci pour le texte. Donc, définissons obtenir du texte avec la présence aussi bien. Et encore une fois, nous vérifions contre aucune valeur. Donc si on n'a pas de présence, alors on ne s'affichera sur aucun état. Ensuite, nous allons rendre la présence aux États-Unis. Si cela équivaut à deux en ligne, alors nous allons revenir en ligne. Sinon, nous allons retourner la convoitise en ligne que nous allons ouvrir l'interpolation de chaîne plutôt que de mettre nouvelle présence de date. La luxure a changé. Deux dates locales boivent comme ça. Ok, parfait. Maintenant, nous allons réellement utiliser ce composant. Naviguons vers l'élément de message. Et juste avant d'afficher le profil Avatar, utilisons la présence pas. Et nous allons vous passer idee en tant qu'auteur point votre I d. ce moment, jetons un coup d'oeil. Et en fait, si mon application est fraîche maintenant en face de mon profil, je peux voir point vert Et si je survol, je peux voir en ligne. Alors, comment pouvons-nous maintenant tester contre plusieurs utilisateurs ? Eh bien, laissez-moi me déconnecter et laissez-moi regarder avec Facebook pour qu'il crée moi et vous profil utilisateur et nous le verrons donc maintenant vous pouvez voir papa. C' est un état inconnu Et c'est parce que, comme vous vous en souvenez, dans la vidéo précédente, nous avons établi des règles de sécurité pour l'utilisateur slash de statut I d. Nous pouvons donc lire Onley notre utilisateur actuel. I d égale deux utilisateurs I d que nous essayons d'accéder à l'intérieur de huit toujours. Maintenant, nous avons la permission ce soir. Eh bien, pour réparer ça pour bien, on va le garder tel qu'il est. Mais pour les Régionales, nous allons ajuster et nous dirons, si la neige n'est pas égale sur Lee, alors nous pourrons lire les données des utilisateurs. OK, maintenant, copions-le et synchronisons-la avec nos données locales. Disons où et maintenant jetons un oeil. Si je rafraîchis mon application maintenant, ça semble bien. Et si je survol, je peux voir le dernier en ligne à cette date donc cela fonctionne réellement. Et si je dis bonjour, je peux voir que je suis actuellement en ligne et un autre utilisateur est hors ligne. Donc c'est ça et ça marche assez génial. Engageons nos changements. Versons, arrivons à tout atterrir, engageons et versons cette pièce pour une présence en temps réel pour un fait. Rendez-vous dans la prochaine 130. Ajouter des tiroirs de pièce: Bonjour. Dans cette vidéo, nous allons ajouter Drover pour discuter à l'endroit où nous serons en mesure d'ajouter des informations de chambre telles que chambre, le nom et la description. Allons-y. revenons pas au code et trouvons notre dossier supérieur. Et ici à l'intérieur de l'index togs était juste l'ouvrir à côté de ce fichier. Créons n'importe qui que nous nommerons Edit Room BTM Drover Inside nous allons mettre le prochain marché. Donc, tout d'abord, nous allons utiliser l'élément bouton et à l'intérieur nous allons mettre juste une lettre qui signifie admin. Ensuite, le nom de la classe va être la bordure radios cercle que la taille va être petite couleur rouge et sur clic. Nous allons mettre un gestionnaire ouvert que les gens prennent à utiliser le modèle State Hook qu'on a utilisé beaucoup de fois. Comme pour l'instant, alors nous allons grub est ouvert, ouvert et fermé. Maintenant, nous devons créer la fenêtre morale. Alors saluons Drover. allons importer de RC ou plus à l'intérieur de ce rover, nous allons verser la propriété show qui va être ouverte que sur. Hyde va être des vêtements et le placement va être juste et le même que pour les mannequins. Drover a Drover Header corps et donc créons ces composants. A l'intérieur pied de page, nous allons verser un autre bouton qui sera juste pour fermer le Drover donc ce sera un élément de bloc et sur clic, nous allons fermer notre Drover à l'intérieur Heather, nous allons verser, ou titre et pour le titre Drover, nous allons verser la salle d'édition tout de suite, en fait, pour Drover Body avant de le définir. Utilisons réellement ce composant à l'intérieur des composants supérieurs. Alors ouvrons des rouages d'index dans le dossier supérieur et ici à l'intérieur. Mais dans la barre d'outils Utilisons à cette salle VT et Drover, c'est tout. Maintenant à l'intérieur de notre corps allait définir pour importer des éléments un pour le nom de la chambre et 14 description de la chambre et nous allons utiliser notre entrée edita ble que nous utilisons plus tôt. Alors, ouvrons ce composant et puis sommes importants. Donc, pour l'entrée Ed Izabal, nous devons passer la valeur initiale. Donc on va l'attraper dans le contexte actuel de la pièce. Donc ici au tableau supérieur des Noirs, nom égal utiliser la chambre actuelle et nous allons sélectionner le nom du point de valeur et la même chose que nous ferons pour la description. Alors attrapons-le. Et aussi, enveloppons ce composant autour, mammifère. Laisse-moi mettre un mémo ici et laisse-moi l'importer comme ça. D' accord ? Maintenant, nous devons réellement définir nos composants. Donc, pour modifier l'importation Herbal pour la première entrée, qui va être sur le nom, nous allons passer le nom de la valeur initiale que nous devons fournir sur la fonction sûre et le laisser être sur le nom sûr. Pour l'instant, alors on va mettre l'étiquette et l'étiquette va être Ahh, six élément avec la classe. Nom hors marge, deux en bas. Alors ce sera le nom. Et aussi le message vide va être nommé Peut être vide. D' accord. Notre deuxième pauvre sera une zone de texte dans le port. Alors apaisons la classe compétente. Il va être zone de texte rose par défaut sera cinq. Ensuite, nous allons verser aussi la valeur initiale comme description que nous allons mettre dangereux, qui va être sur la description sûr et aussi le message vide va être description ne peut pas être vide. Bon, maintenant, sauvegardons et définissons ces fonctions. Donc, tout d'abord, nous allons créer sur le nom sûr, et ensuite nous allons créer propre coffre-fort de description. Et parce que notre fonctionnalité est très similaire, nous allons créer une fonction commune qui sera appelée à l'intérieur de chacune de ces fonctions. Donc, il va être, disons, disons, mettre à jour les données des données du jour, et il recevra la clé. Ou disons champ ce que nous devons mettre à jour et aussi la valeur réelle qui sera triste pour cette clé. Bon, maintenant, maintenant, à l'intérieur de son propre nom Save. Nous allons appeler les données de mise à jour avec le nom comme une clé et aussi un nouveau nom, qui va être passé comme un argument à cette fonction parce que nous avons passé ce gestionnaire à une entrée créditable. Et comme vous vous en souvenez, si nous l'ouvrons, cela nous donne la valeur finale. Bon, donc la même chose que nous ferons pour la description ici, nous allons mettre la description et le nouveau. Disons que le bureau va être nouveau bureau. Donc, à l'intérieur des données, nous allons appeler l'objet de base de données. Ensuite, nous allons spécifier la référence aux chambres slash salle I D ou chat i d. Donc, nous allons prendre celui-ci de l'utilisation de Haram. Donc, prenons part i d des programmes d'utilisation. Importons mal vers le haut. Et puis pour cette référence, nous allons spécifier Child va être l'ensemble de clés va être valeur. Après ça. Lorsque nous avons fini d'écrire des données dans la base de données, nous allons appeler alerte, et nous allons spécifier le succès mis à jour avec succès et nous allons le mettre pendant quatre secondes. Et au cas où nous aurions une erreur, nous allons aussi dire alerte, mais cette fois mieux. Et on va mettre notre message comme ça. Très bien, ça a l'air bien. Supprimons cet espace vide. Sauvons et jetons un coup d'oeil. Maintenant, nous avons ce bouton A en haut à droite. Cliquons dessus. Nous avons Drover, et le premier problème. Je vois que nous n'avons pas de marge ici, donc si nous inspectons, nous pouvons voir que si nous ouvrons un groupe d'importation et que nous devons le faire, Dave est là et ils n'ont pas de marge. Alors ouvrons notre importation créditable. Donc, nous devons verser un peu d'espace pour ce def, ou cela peut être une option. Donc, ce que j'ai proposé de faire, nous pouvons passer un autre argument à l'entrée créditable, qui va être le nom de la classe voleur et par défaut il sera vide. Alors nous allons passer ce nom de classe de rappeur à ce nom de classe de voleur et ce que nous allons faire Cela dira avec damnable naviguer, vous êtes une entrée créditable. Et pour la zone de texte a commencé un nom de fermeture rappeur spécifie va être la marge top trois pour ajouter peu d'espace en plus de cela, jetons un oeil. Maintenant, je peux voir que ça a l'air bien. Maintenant, nous allons réellement éditer certaines données. Peut-être un nouveau nom de Rome. Et si je dis où je peux voir avec succès, mis à jour et le nom de la chambre a été mis à jour. En effet. Ok, froid. Mais il y a un problème nous. Rappelez-vous, avec les voleurs, ils ne sont pas vraiment réactifs. Alors, qu'est-ce qu'on doit faire ? Nous devons passer la propriété complète à ce robur lorsque nous sommes sur des appareils mobiles. Donc, on va utiliser le crochet Media Query ici en haut. On va préciser que son portable va être utilisé. Requête média. Et ici, nous allons spécifier des marques avec 99 2 pixels. Alors on va passer. C' est plus bile à la propriété complète et il ne sera activé que lorsque nous sommes sur les appareils mobiles . Donc maintenant, si nous l'ouvrons et nous précisons la fenêtre, elle a toujours l'air bien. Ok, donc c'est tout, je suppose. Maintenant, engageons nos changements. Laissez les gens tout à la scène. Etat est toujours et ensuite se mettre à contribution. Ajout de la salle d'édition Drover. D' accord. Dans la vidéo suivante, nous allons ajouter plus de sécurité à notre chambre parce que, comme vous pouvez le voir, pour l'instant, nous sommes en mesure de l'ajouter. Cette salle, même si nous ne sommes pas admet parce que nous n'avons pas d'autorisations d'utilisateur. C' est donc notre sujet pour la prochaine vidéo. On se voit là-bas. 131. Règles de sécurité en fonction des rôles et de sécurité: Hé, là. Dans cette vidéo, les gens gèrent notre sécurité basée sur le rôle sur des remplissages particuliers. Quand nous essayons de l'ajouter. Information sur la chambre, Allons-y. Donc, tout d' abord, comment nous allons définir nos rôles. Si nous ouvrons notre structure à l'intérieur des chambres, nous pouvons voir que nous avons créé à la description, dernier message et le nom. Donc, ici, nous allons également ajouter une autre propriété, qui va être admet. Et avec une base de données en temps réel, nous pouvons détourner une course ou nous le pouvons. Mais ils sont vraiment mal gérés parce que hors de son mauvais système de générateur de requêtes, parce que hors de ses mauvaises requêtes sur la base de données en temps réel, nous allons mettre nos Edmonds en tant que tableau hors ID utilisateur. Donc, si l'utilisateur appartient à ce tableau, cela signifie que l'utilisateur est un administrateur et ne le mettra pas comme un tableau. Nous allons créer un objet à l'intérieur de notre base de données, et chaque clé va être utilisateur i d. Et si cet utilisateur est un administrateur, alors il sera défini sur vrai conseil. Cet utilisateur ne sera pas dans la base de données. Bon, Donc tout d'abord, ce que nous devons faire, nous devons ajouter un utilisateur à nos données. Allons à, disons le nouveau nom de la chambre. Ou peut-être que nous allons le renommer en quelque chose de plus spécifique. Disons cool, sauvegardons ça. Et maintenant, naviguons dans cette base de données ici. Nous allons ajouter un nouveau champ que nous allons créer des aveux que nous allons cliquer sur le signe plus ici. Ensuite, nous devons mettre notre utilisateur I d Ce que nous pouvons faire, nous pouvons aller au contexte de profil. Et puis quand nous sortons de l'objet, allons Consul Accuser i d pour obtenir notre utilisateur i d. Donc maintenant je peux m'attraper par l'utilisateur I d et le mettre dans la base de données, puis la valeur sat à true puis éditer dans les données de la pièce Donc il ressemble à ceci. Maintenant, afin de restreindre l'accès, nous devons définir des règles de sécurité, donc naviguons vers les règles. Et ici, nous allons faire la prochaine chose pour notre chemin de chambres. Nous allons enlever la bonne propriété pour qu'il soit ramassé d'ici afin que personne ne puisse réellement le chemin de deux chambres, mais ils sont capables de lire les chambres que pour la chambre I d. Au lieu de cela, écrire comme ça. Nous ne pouvons pas recréer la règle, mais aussi pour la propriété du dernier message, qui est comme ceci. On nous fait pacifier, non ? Règle dit à off n'est pas égal non, Laissez-moi bouer comme ça. Cela est dû au fait que si vous vous souvenez, lorsque nous mettons à jour les données à plusieurs endroits, nous mettons également à jour le dernier message à l'intérieur de notre salle. Donc, fondamentalement, tout le monde qui écrit sur le chat peut mettre à jour le dernier message à l'intérieur de la salle, mais pas d'autres champs comme la chambre, le nom et la description. Ici, nous allons définir des modèles pour exactement ces sensations donc pour l'idée de la pièce, nous sommes en mesure d'écrire des données d'abord lorsque les données n'existent pas. Quand nous essayons de créer et que vous avez de la place, nous allons spécifier si les données. Donc, ces données sont à nouveau un objet global dans les règles de sécurité et elles représentent les données actuelles auxquelles nous essayons d'accéder. Donc, si les données existent donc c'est un bowline ont pu écrire à ces passé quand les données n' existent pas . Très bien, Donc, quand nous essayons de créer une nouvelle pièce avec la pièce spécifique I d, ou si nous sommes un administrateur, seulement alors nous serons en mesure d'écrire et de modifier cette information. Alors, comment pouvons-nous faire ça ? Donc, nous savons que nous le stockons sous ajouter des hommes alors nous avons l'utilisateur I d et vrai. Donc, avec la base de données avec des règles de sécurité, cela fonctionne comme ça. J' ai ouvert la documentation pour les données en temps réel, essentiellement des rituels. Et ici, j'ai confiné cette information. Si je fais défiler un peu vers le bas, je peux trouver cette information que je peux accéder à certaines remplies en utilisant cette approche. Donc je vais juste utiliser exactement le même modèle et ce que je vais faire. Je vais demander si les données auxquelles nous essayons d'accéder ont des admissions d'enfants. Ensuite, à l'intérieur de Mons Child, nous avons un autre enfant qui va être notre utilisateur. Et on peut l'obtenir des deux objets. Donc nous allons demander si l'enfant hors point votre valeur de point i d est égal à deux. Vrai. Donc, si nous avons un enregistrement pour notre utilisateur dans Edmunds rempli, alors nous serons en mesure d'écrire sur ce chemin. Maintenant, sauvegardons ça et jetons un coup d'oeil. Maintenant, si je suis un administrateur de ce groupe froid, je vais cliquer dessus. Je serai en mesure de l'éditer parce que nous éditons notre utilisateur I d dans la base de données. Disons que quelque chose de aléatoire maintenant mettre à jour avec succès. OK, maintenant naviguons vers une autre pièce Quand nous ne sommes pas un administrateur, Laissez-moi essayer de le modifier. Bonjour le monde. Maintenant, si je veux essayer de savourer, j'aurai la permission ce soir, donc nos règles de sécurité fonctionnent et c'est plutôt cool. Et à cause de cela maintenant, nous avons restreint l'accès à notre base de données. Mais aussi nous devons le gérer par programme, nous devons ajouter des hommes etcetera. Alors faisons ça aussi. Alors naviguons pour créer une pièce, modèle à la main de plage. Et ici, l'eau fera l'affaire. Lorsque nous allons créer une nouvelle pièce, nous allons nous ajouter pour ajouter des hommes. Donc ici, quand nous définissons dans vos, um, données, nous allons également ajouter un nouvel objet ajouté beans. Et nous allons nous préciser. Importons en premier lieu. Ouais, il a été importé de l'utilisateur actuel, votre I d est défini sur true. Maintenant, chaque fois que nous ajoutons dans votre chambre, nous nous posions comme administrateur. Ensuite, quand on lit les données de la chambre, on doit savoir qui est exactement à Adnan. Donc, permet de naviguer vers Chatel gs et ici pour une pièce actuelle. Nous allons faire la prochaine chose parce que c'est un objet et nous devons travailler avec je soulève Idéalement, quand nous travaillons à l'intérieur de notre code, nous devons transformer cet objet en un tableau. Alors créons ici. Nouvelles annonces précieuses et aides à l'intérieur. Nous allons définir une nouvelle fonction qui transformera notre objet en un tableau. Donc, nous allons le nommer exactement de la même manière que nous l'avons fait avec cette fonction. Mais nous allons dire, juste transformer en tableau ici. Nous allons recevoir une valeur d'instantané à nouveau et me laisser définir le clavier de fonction, et cette fonction sera assez simple. Donc, si Snapshot 12 existe, alors nous allons retourner les clés d'objet de cette valeur de snapshot afin que nous obtenions un tableau l'ID utilisateur. Sinon, commencez un retour et vide Right Now disons ces aides et utilisons-les à l'intérieur. Chatterjee est là. On va se transformer en tableau. Disons que la porte de la chambre actuelle Adnan et maintenant nous avons l'administration. Mais aussi, nous voulons savoir si nous sommes actuellement connecté à l'utilisateur est un administrateur. Alors quoi ? Nous sommes venus à vous. Nous pouvons créer un nouveau précieux est admin et nous allons simplement demander si les admissions inclut hors de ce point utilisateur actuel votre i d et comment nous pouvons lui transmettre ces données avec le contexte. Alors passons, admet et est administrateur. A partir de maintenant, nous serons en mesure d'afficher ce drover Onley quand nous l'avouerons. Alors maintenant, naviguons sur Teoh notre partie supérieure. Naviguons vers les togs d'index à l'intérieur du dossier supérieur et écoutons le contexte. Nous allons attraper son administrateur utiliser la valeur actuelle de la chambre. La valeur est admin comme ça. Et maintenant nous allons demander si nous sommes un administrateur Onley, puis nous allons afficher dans sa chambre Bt et Drover. Jetons un coup d'oeil à l'intérieur de cette première pièce où nous sommes l'administrateur. On peut voir ce Drover, et on peut l'ajouter. Informations de chambre mises à jour avec succès. Mais dans la pièce où nous ne sommes pas admet, nous ne serons pas en mesure de voir ce Drover. Et aussi, nous ne serons pas en mesure de le mettre à jour parce que nous avons dit les règles de sécurité. Copions les règles de sécurité. Et synchronisons-les avec les habitants de la guerre. Ouvrons les règles de base de données et collez-les ici. D' accord. Ça a l'air bien. Avoir ça là où il y a une chose de plus dans nos règles de sécurité. Si nous inspectons notre conseil, nous pouvons voir que nous avons cette base de feu avertissant que vos données seront plus faibles et les filtreront en déclin. Envisagez de mettre fin à l'index sur l'idée de la chambre aux messages. Alors faisons ça. C' est pour rendre nos requêtes encore plus performantes. Donc, naviguons vers les règles. Et, voyons, envisagez d'ajouter un index sur la salle I d. aux messages. Copions ça. Et ce message est Ajoutons-le ici comme ça. Maintenant savourons et jetons un coup d'oeil si on peut encore avoir cet avertissement, ok ? En ce moment, notre conseil est clair. Je ne vois aucun avertissement. Copions à nouveau nos règles et collons-les. Teoh, nos règles de base de données, Jason comme ça. Ok, donc c'est tout pour cette vidéo. C' est ainsi que nous allons gérer notre sécurité. Maintenant, engageons nos changements. Allons à tout à l'état de scène. Ensuite, nous allons valider les modifications avec les règles de sécurité de mise à jour pour l'autorisation basée sur le rôle. Et c'est tout. Très bien, on se voit dans la prochaine. 132. Gestion d'accès basé sur un rôle: Hé, là. Dans cette vidéo, nous allons ajouter un bouton afin de pouvoir gérer l'autorisation basée sur le rôle. Donc, quand nous cliquons sur le profil d'utilisateur de quelqu'un, si nous sommes actuellement et avait été hors de ce groupe, nous sommes en mesure de créer cet utilisateur et avait été à Ne revenons pas au code. Et ouvrons, je suppose. Élément de message. Donc, ici, nous allons faire une petite modification aux informations de profil, BT et modèle. Alors ouvrons ça. Et ici, nous voulons afficher ce bouton ici en bas. Comment peut-on faire ça ? Eh bien, c'est en fait facile. Nous pouvons passer quelques enfants à ce composant et ils seront affichés ici. Donc ici dans le profil de côté dans le modèle de quatre milliards, nous allons aussi d structurer les enfants et ensuite ces enfants que nous allons afficher en pied de page juste avant notre bouton de fermeture. Maintenant, sauvegardons ça. Ne nous engageons pas à un élément de message. Et ici pour le profil dans Betty Anne Morrow, passons un autre fond afin que ce bas soit un élément de bloc, et sur clic va être quelque chose qui va définir dans quelques secondes. En outre, il aura la couleur bleue et le texte sera le prochain. Donc, tout d' abord, nous devons définir quand ce bouton sera affiché. Peut-être, commentons. Et voici, créons quelques mauvaises pommes et passons d'abord à la conversation comme ça. Ok, donc d'abord nous devons définir si nous pouvons accorder la permission d'administrateur. Donc, pour cela, nous devons obtenir nos données contactées. Donc, nous allons obtenir est admin de l'utilisation de la chambre actuelle. Laissez-moi ouvrir la voiture dans le contexte de la pièce, puis laissez-moi importer le crochet et de la valeur Commencer un pic est admin. Et aussi nous avons besoin d'autres admets aussi. Utilisez donc la valeur actuelle de la pièce. La valeur admet comme ça. Ensuite, nous allons envelopper notre élément de message autour de mémo parce que nous utilisons le sélecteur de contexte et ici nous allons faire le suivant. Nous devons d'abord savoir si l'auteur du message est un administrateur. Donc nous allons créer son administrateur de message auteur et nous allons demander Edmunds Inclut auteur, porte auteur vous I d. Ensuite, nous avons besoin de savoir si nous sommes l'auteur du message afin que nous puissions créer son auteur de comestible et nous pouvons nous demander actuel. Importons hors point de l'utilisateur actuel votre I d égal auteur intérieur vous j'aime ceci. Et puis nous pouvons créer un autre comestible qui nommera, disons peut accorder l'accès ou peut accorder admin. Et nous sommes en mesure d'accorder la permission d'administrateur si nous ajoutons Mons nous-mêmes. Et aussi, si nous ne sommes pas des auteurs de messages donc maintenant, nous pouvons utiliser tous ces objets de valeur pour afficher notre bouton conditionnellement. Donc d'abord, on va pauvre. Si nous pouvons accorder admin seulement fait, nous allons afficher ce bas et aussi pour le message Nous allons mettre son message, administrateur auteur. Ensuite, on va dire supprimer la permission de l'administrateur. Sinon, on va dire, donner à l'administrateur dans cette pièce quelque chose comme ça. Ok, maintenant, en fait, voyons ce qu'on a fait. Laisse-moi me rafraîchir. Juste au cas où si j'ai ouvert ce profil, je peux voir donner admin dans cette salle. Donc, quand je clique, rien ne se passe parce que nous n'avons pas défini de fonctionnalité. Donc, naviguons ici et toutes les fonctionnalités que nous allons verser à l'intérieur du composant de messages , et ensuite nous allons passer cette fonctionnalité à l'élément de message. Ok, donc pour l'élément de message ici, nous allons avoir disons gérer la fonction d'administration que nous allons passer que nous obtiendrons. Et pour cette poignée admin. On va passer. Disons, auteur point votre I d. Ok, maintenant nous devons obtenir ce handle admin des accessoires et nous allons naviguer vers les messages. Et ici, nous allons définir l'admin de handle constant, et nous allons l'optimiser à l'avance avec l'utilisation rappel parce que nous le transmettons à l' élément enfant . OK, donc cet administrateur de handle recevra votre i d. Et puis nous allons d'abord définir notre référence Edmunds à l'intérieur de la base de données afin que nous puissions un objet de base de données d'appel . Ensuite, la référence va être des chambres que ce sera Chat I d. que nous avons déjà de l'utilisation perms, puis slash avance. Bon, maintenant nous devons ajouter des idées de chat une dépendance et entendre ce que nous devons faire. Nous devons réellement obtenir notre valeur précédente afin de le déclencher. Donc, si nous cliquons sur ce bouton et que nous voulons accorder la permission, alors ce sera à lui. Sinon, si cet utilisateur dispose déjà de l'autorisation, nous voulons la révoquer. Donc, en fait, pour le faire avec la base de données en temps réel, si nous ouvrons sa documentation, nous pouvons voir cette section sous la lecture droite des données enregistrer les sections Estrin. Donc, en utilisant cette façon, nous sommes en mesure d'accéder à la valeur précédente et nous pouvons la mettre à jour. Et le plus important, c'est une transaction. Cela signifie que les données ne seront pas corrompues. Donc, utilisons exactement la même approche. Donc, laissez-moi copier tout cela et ce que je vais dire dio que je vais appeler attente ce qui est convertir cette fonction de course de problème. Appelons la transaction Ralf Dar pour hommes. Ensuite, nous recevons notre valeur actuelle ou précédente, qui va être l'admission et entendre ce que nous allons dire. Je vais coller le même code que j'ai coopéré et ici je vais demander si les admissions existent . Seulement alors j'exécuterai ma logique. Donc si les aveux existent, alors je veux demander si admet, vous j'existerai. Ensuite, je veux révoquer l'accès. Donc je vais mettre admet votre je dois savoir. Et lorsque nous définissons la valeur à savoir pour la base de données en temps réel, elle sera supprimée de la base de données parce que vous pouvez réellement y stocker aucune valeur. Si on n'a pas la permission, on va grogner. Alors avancez votre i d sera réglé sur True. Maintenant, supprimons le reste du code. Et à la fin, on va revenir admet, et il fera son truc. droite ? Appelez. Maintenant, nous devons informer l'utilisateur si nous avons révoqué ou accordé l'accès. Donc on va mettre la porte d'alerte et qu'est-ce qui devrait signaler ici ? Comment pouvons-nous préciser si nous avons révoqué ou accordé l'accès pour cela ? Nous pouvons créer disponible ici que nous allons démissionner. Disons un message d'alerte. Donc, quand nous aurons révoqué l'accès, nous allons mettre en alerte. Message à l'administrateur. Autorisation supprimée. Et pour vrai, commencez un message Miller spécifié. Autorisation d'administrateur accordée, quelque chose comme ça. Ensuite, on va passer ce message d'alerte aux infos d'alerte, et je dois passer cet administrateur à l'élément de message. Donc, nous allons gérer l'administrateur. Gérer l'administrateur. Maintenant, jetons un coup d'oeil. Revenons à notre application. Si je clique sur cet utilisateur, donnez admin dans cette salle. Autorisation d'administration accordée. Maintenant, j'ai supprimer l'autorisation d'administrateur. Si je clique dessus, je peux voir l'autorisation d'administrateur supprimée. Naviguons dans notre base de données. Trouvons cette pièce, qui est de la place pour cette pièce. Maintenant. Si j'accorde l'accès, vous pouvez voir une nouvelle valeur dans la base de données. Et si je supprime l'accès, je peux voir qu'il a été supprimé de la base de données. Très bien, je suppose que c'est tout au sujet de la sécurité et de la gestion basée sur les rôles. Engagons nos changements et finissons cette vidéo. Mais avant de le faire, déplacons cette importation vers le haut, puis validons les modifications. Donc, obtenez à tout, puis obtenez commit et nous allons dire ajouté bouton pour accorder ou révoquer l'accès administrateur. D' accord, parfait. se voit dans la prochaine. 133. Ajouter des Hover programmations à des crochets: Bonjour. Dans cette vidéo, nous allons ajouter le survol grammatical pro aux éléments du graphique, et il servira de base pour les vidéos à venir. Commençons. Notre grammatical pro, cependant, sera géré par un crochet personnalisé, et nous avons confiné ce crochet sur Internet. Alors, ouvrons Google et tapons simplement utiliser les crochets, puis utilisez le hover. Ensuite, ouvrons le premier lien qui permet d'obtenir l'extrait de code et copions ce crochet. Je vais copier toute cette fonction. Ensuite, je vais revenir au code qu'à l'intérieur des crochets personnalisés à la fin. Je vais modifier cette fonction, et je vais l'exporter d'ici. Et aussi j'ai besoin d'utiliser le brouillon pour celui-là. Alors laissez-moi importer. Et comme je peux le voir, j'ai cette dépendance inutile. Mais ce n'est pas exactement vrai. Alors ajoutons Oui, Lind, avertissement pour cette ligne. Et aussi modifions ce crochet un peu au lieu de retourner conditionnellement la fonction de nettoyage. Déplaçons ce retour jusqu'à la fin. Bon, maintenant on est prêts avec le crochet. Naviguons vers l'élément de message et ici nous allons utiliser ce crochet. Donc au sommet. Nous allons créer un nouveau précieux, et nous allons appeler usage, cependant, cependant, Hook. Donc, utilisez Howard Howard Hook. Il nous renvoie un tableau de exactement deux éléments où le premier élément est la référence que nous devons assigner à l'élément. Donc, nommons lui-même référence et puis en fait la puce valeur qui indique si cet élément est actuellement planté ou non. Alors appelons-le le le self-ref et passons-le à cet élément L I. Donc la référence va être auto réf. Maintenant, nous pouvons réellement utiliser cette valeur d'investissement et nous pouvons faire quelque chose, mais que pour l'instant ce que je propose de faire, je veux juste que Teoh change la couleur de fond chaque fois que nous sommes en survol. Donc, nous allons pauvre clustering dynamique pour cet élément allié. Alors volons ce psy entre parenthèses et utilisons l'exaltation du voyage Rincon. Et d'abord, je vais ajouter que les voitures sont un pointeur vers cet élément allié. Donc, nous savons que chaque fois que nous planons, quelque chose va se passer. Et puis je vais demander si notre allié est Howard, laissez-moi changer pour Harvard. Ensuite, je vais afficher le fond noir de 0.2% chacun. Sinon, aucun nom de classe du tout. Maintenant, si je retourne au code, je peux voir que chaque fois que je peux cependant obtenir mon arrière-plan. Donc c'est ça. Et c'est la fin de cette vidéo. Engageons nos changements. Mettons tout sur la scène est resté. Ensuite, nous allons nous engager avec le hover grammatical edit pro. Très bien, à la prochaine. 134. Créer des éléments de contrôle d'icônes - Ajoute (partie 1): bonjour dans ces deux vidéos, nous allons gérer les likes dans notre application. Dans cette vidéo, nous allons créer un composant qui va être un wrapper autour du contrôle. Je viens que nous allons ajouter à l'élément de message. Revenons au code et définissons d'abord comment nous allons utiliser ce composant. Alors ouvrons un message moi, Tim, et on le placera juste après il y a un temps. Donc ici aura un composant, quelque chose comme je peux VT et contrôler. Et puis ce composant Eh bien, sauf dans les accessoires suivants. Donc d'abord, nous allons définir si ça va être visible ou non. Pour l'instant, qu'il soit visible. Ensuite, nous allons mettre que je peux nommer et pour l'instant, que ce soit dur pour nos goûts. Ensuite aussi, nous aurons une astuce d'outil qui dira quelque chose comme ce message. En outre, il aura un gestionnaire sur le gestionnaire de clics. Donc, pour l' instant, que ce soit une fonction vide et aussi qu'il aura deux accessoires conditionnels. Donc, d'abord va être la couleur et ensuite ce sera le contenu du banc. Finalement, il faudra Aikens fermer Aiken et, comme je confère comme je peux, nous voulons afficher incliné avec du contenu. C' est pourquoi nous allons mettre le contenu des lots comme un problème supplémentaire. Et pour l'instant, disons que cela aura cinq aime quelque chose comme ça. D' accord. Maintenant, nous allons réellement créer ce composant et voyons à quoi il ressemblera donc ici Sous messages, Créons Aiken, VT. Et Contrôle. Et définissons à quoi cela ressemblera avant de faire un balisage. Prenons d'abord les accessoires pour que nous ayons est visible. Ensuite, nous avons aussi que je peux nommer. Nous avons une astuce d'outil que nous avons sur Click, et nous avons moyen de contenu de badge. D' autres accessoires que nous stockerons sous des accessoires. Objet. Ok, donc ça va être un diff avec la classe Nom de la marge à gauche pour disons que le style sera le prochain. Donc on va mettre l'accessoire de visibilité, et il sera visible sur Lee quand il sera visible, réglé sur vrai. Donc, si est visible, alors visible, sinon caché. Bon, bien à l'intérieur de ce déf. On a besoin de verser. Disons qu'un contenu de lot conditionnel est un composant conditionnel, et voici un petit truc. Comment vous pouvez faire ça. Ce n'est pas vraiment un vraiment primitif ou évident. Disons approche. Comment créer un composant de rendu conditionnel à l'intérieur d'un composant. C' est donc l'astuce. D' abord nous avons versé ici, et vous composant, disons badge conditionnel comme celui-ci, il recevra une propriété, qui va être, disons, condition où une valeur que nous voulait afficher. Ensuite, nous allons verser un badge conditionnel et comme accessoire, nous allons passer la condition et cette condition sera notre contenu de badge. Et ici, nous allons demander si nous avons une condition, puis nous allons à la guerre avec le contenu hors condition, ce qui va être notre valeur réelle. Et puis on va rapper dans Children comme ça. Sinon, nous allons juste retourner Enfants. Donc, oui, c'est le truc. Et nous devons prendre les enfants de nos accessoires aussi. Donc ça ressemblera à ça, mais je peux voir que quelque chose ne va pas. Alors que se passe-t-il ici ? J' ai oublié le support. D' accord, donc c'est tout. Maintenant, si nous avons beaucoup de contenu, ce lot conditionnel sera rendu autrement, nous avons Children, qui est tout le contenu que nous passons à l'intérieur. D' accord, mais à l'intérieur on va mourir. Spur et chuchotement est le composant de notre combinaison qu'ils ont utilisé pour quelque chose comme la pointe de l'outil . Donc, pour un murmure, on va passer. Faisons une côtelette de placement. Alors on va passer DeLay. Il a également un retard de zéro que dilly. Cacher aussi va être Zito. DeLay show va être aussi zéro déclencheur va être hurler et haut-parleur. On va passer la pointe de l'outil et le message de la pointe de l'outil. On va passer des biens coupables comme ça à l'intérieur de ce murmure ou pour une gâchette, on va afficher le composant normal du bouton icône de notre costume. Et pour le moins Aiken, bouton, on va verser toutes les cultures qu'on a reçues ici, et ensuite on aura sur le gestionnaire de clic et on va passer le clic que nous recevons. Alors on va le mettre comme un cercle va être très petit. Et aussi je peux lui-même va être je peux laisser importé. Et pour l'ICANN, on va mettre l'icône. Je peux nommer que nous recevons également en tant que propriété. Maintenant, il semble prêt à l'intérieur de l'élément de message. Nous pouvons voir que je pratique n'est pas défini. Importons et voyons vraiment à quoi ça ressemble. Donc maintenant, si nous ouvrons notre application maintenant, nous avons des goûts. Cependant, nous n'avons pas de couleur. Donc ce que j'ai proposé de faire ici, on va verser un collier conditionnel. Alors, à quel point portable pour faire ça ? On l'a déjà fait. Pour que nous puissions verser quelque chose comme ça. Nous pouvons répandre notre objet si notre condition est vraie ou si nous pouvons répandre un objet vide. Dans ce cas, nous ne passerons aucune propriété. Donc on va mettre quelque chose comme si notre état est vrai, alors on versera la couleur rouge. Et sinon, nous allons mettre un objet vide pour que ça marche, et il fera sa réflexion. Maintenant, si j'avais un frais, vous pouvez voir que j'ai la couleur rouge quand la condition est vraie. Sinon, j'ai faux. Ok, bien. Donc ça marche. Et au fait, si vous vous demandez où ça ira, ça ira ici pour ces accessoires. Et ces accessoires seront passés au bouton Aiken. Donc fondamentalement, nous avons dit couleur pour ce bouton Aiken. Ok, Donc c'est tout pour cette vidéo dans la prochaine vidéo, nous allons afficher les likes et mobile à la fonctionnalité. Mais pour l'instant, finissons cette vidéo en engageant nos changements. Mene à tout à l'état de la scène, puis obtenez commit. Créateur, je peux VT dans le composant de contrôle comme celui-ci. Ok, parfait. se voit dans la prochaine. 135. Likes des fonctions (partie 2): Hé là, dans cette bulle vidéo, ajoutez des fonctionnalités au bouton similaire. Allons-y. Naviguons d'abord à la base de données et voyons comment nous allons gérer notre structure de données . Donc, à l'intérieur de chaque élément de message, nous allons créer deux nouvelles propriétés supplémentaires. First Property va être comme Count qui indiquera le nombre total de likes sur ce message particulier. Et puis nous aurons, disons, aime que ce sera un tableau de valeurs avec l'ID d'utilisateur qui a aimé ce message. Mais au lieu de stocker et Ray allait utiliser un objet de la même manière que nous l'avons fait avec Rooms admet, naviguons vers l'application. Et voici, ouvrons le premier élément de message. Ici, nous recevrons poignée comme fonction et cette poignée comme fonction. Nous allons le passer à ce propre gestionnaire de clics ici. Nous allons appeler cette poignée comme et pour poignée, comme nous allons passer le message point i d. Okay, maintenant allons naviguer vers le bas dans textile gs Et ici quand nous créons et vous message, nous allons attacher une nouvelle propriété comme count, et par défaut, il sera mis à zéro. Ok, maintenant passons aux messages pour indexer les s. Et ici, définissons le handle Const comme le gestionnaire permet rapper. Il a été rappelé à l'avance. Et maintenant, définissons notre logique. Nous allons le passer à l'élément de message sur la bougie comme, donc il recevra le message I d. Et la logique sera en fait tout à fait la même qu'avec l'administrateur de la poignée parce que nous allons utiliser une transaction. Donc, nous allons vraiment attraper être tout d'ici et mettons-le à l'intérieur de la poignée comme mais au lieu de l'avance, ref, nous allons à mauvais message, ref et message Ref va être la base de données Ralf que les messages. Et puis au lieu d'idée de chat, nous allons utiliser le message I d. Ok, alors nous devons également convertir cette fonction en une fonction de puits pour la transaction au lieu d' admettre que nous recevrons un message. Ensuite, nous allons demander si le message existe alors si le point de message aime et le message Dar vous aime , j'ai désactivé notre utilisateur actuel. Alors attrapons-le d'un autre objet. Utilisons l'utilisateur actuel et nous allons vous obtenir i d. Donc, si nous avons, comme par cet utilisateur particulier, alors nous allons d'abord supprimer ceci comme et aussi nous voulons diminuer notre comme Joan. Alors corrigeons ça au message Dog aime. Alors on va diminuer, genre, compter par un. Alors, mon nez est égal à un. Un message d'alerte va être, comme supprimé. D' accord ? Sinon, quand nous voulons verser et que vous aimez, nous allons mettre un message comme Conan Plus égal à un et parce que nous pouvons avoir cet objet aime dit, vous savez, vous savez, il peut être inexistant dans les bases de données la communauté s'est également occupée de cela. Et si nous essayons d'ajouter quelque chose à l'objet non existen, nous aurons une erreur. D' abord, on va demander si aucun message n'aime. Donc, si nous n'avons pas cet objet, alors nous l'initialiserons comme un objet vide. Donc, le message aime va être un objet vide. Et alors seulement, nous serons en mesure de définir le message. DOT aime votre i d égal à la vérité. Et puis le message va être comme ça. Ok, parfait. Maintenant, disons attendre et jetons un coup d'oeil. Si nous allons essayer de cliquer sur ce message, nous aurons la transaction a échoué, et c'est parce qu'il essaie de mettre à jour comme, compter, propriété inexistante pour les messages existants. Donc ce que j'ai proposé de faire, je veux village tout ce passage est juste pour nettoyer un peu la base de données. Donc maintenant, nous sommes en mesure de mettre un nouveau message avec les nouvelles propriétés. Alors mettons un nouveau message. Et maintenant il en a cinq comme Count et on peut vraiment réparer ça. Mais pour l'instant, si nous cliquons dessus et nous pouvons voir, comme, éditer si nous allons à la base de données, si nous ouvrons notre message, nous pouvons voir, comme compter un et aime contient notre utilisateur i d. Et si nous cliquons dessus une fois de plus, nous pouvons voir les goûts est dilué et, comme, compter tel à Zito. Ok, parfait. Maintenant, nous allons réellement réparer notre vous je n'oublions pas de message élément ici. On doit passer des accessoires, Teoh, je peux avoir le contrôle. Donc, tout d'abord, quand nous avons la couleur rouge quand notre message est aimé, droit, Donc, nous allons pauvre est la lumière précieuse qui va créer ici au sommet const sa vie et comment nous pouvons définir cela. Donc, nous devons d'abord voir si ce message a des goûts. Donc, prenons, aime et aime compter de notre message. Et ici, nous allons demander si notre message a des goûts. Ensuite, on va éteindre les clés d'objet. Ces aime obtenir tableau des idées de l'utilisateur et ensuite nous pouvons pauvres inclut, Disons l'utilisateur actuel de Dar, n'est-ce pas ? Je d Donc, de cette façon, nous pouvons détecter si notre message est aimé par cet utilisateur particulier. Ok, alors on va passer. Ceci est aimé affaiblir affiché ici. On va le mettre dans la condition, et ensuite on va mettre la couleur rouge. Ok, alors nous avons cette propriété visible. Et c'est pour réelle pour la réactivité de nos messages. Donc, si on récite notre fenêtre, on finit sur des appareils mobiles. Donc, sur les appareils mobiles, nous ne voulons pas cacher nos icônes. Nous voulons les afficher toujours. Donc, pour cela, nous pouvons utiliser la requête média pour détecter cela. Donc d'abord, mettons-le ici juste en dessous de l'utilisation que nous allons mettre est mobile. Et puis on va utiliser Media Query, et on va demander si on a des marques avec 992 pixels. Donc, si nous avons est mobile, créons réellement de nouveaux viables. Que nous dirons peut montrer Aiken Donc si nous avons est mobile ou si notre élément actuel est plané afin que nous les verrons seulement quand nous l'avons sur le message Seulement alors nous pouvons afficher Aikens donc pour est visible Nous allons tirer peut montrer que je viens pour cliquer Nous Et pour le contenu du banc au lieu de cinq, nous allons mettre notre courant comme le comte Ok, bon. Maintenant, nous allons jeter un oeil Si nous avons où nous pouvons voir, nous avons icône Si nous redimensionnons la fenêtre Et si nous sommes sur les appareils mobiles ont pu voir l' Eiken. Ok, parfait. Maintenant, si je clique sur ce message comme, je peux voir comme compter et aussi il est affiché en couleur rouge off. C' est ça. Et ça a l'air cool. Encore une taille de feu ? Retour à ma bile. Je le vois toujours. C' est ça. Et je suppose que nous allons engager nos changements. Laisse-moi ouvrir mon plomb de terminal Pauvre obtenir à tout ce qui pourrait commettre le message Handle aime Ok, Parfait. Rendez-vous dans la prochaine 136. Effacer l'opération: Hé, là. Dans cette vidéo, nous allons gérer les messages delish in off chap pour ces décombres à un autre Aiken Bt dans le contrôle de l'élément message. Allons-y. Accédez à l'élément de message Dodgy ? Oui. Et ici à côté d'aimer, je peux commencer le contrôle. Laissez un autre Aiken entre contrôle pour supprimer le message et il sera visible sur Lee pour le message. Auteur. Donc l'auteur du message Onley peut le faire. Alors copions ceci et rendons conditionnellement notre prochain Aiken est devenu le contrôle. Donc, si nous sommes l'auteur du message, alors seulement nous serons en mesure de le voir. Donc on n'a pas besoin de couleur. Brad, nous avons besoin est visible. Je peux nommer va être proche. L' info-bulle va être retardé Ce message Nous n'avons pas besoin de contenu veg. Et pour déclipser nous ajouterons la poignée aneth que nous recevrons des accessoires. Ok, je suppose qu'on a fini ici. Maintenant nous allons jeter un oeil si je, cependant je peux voir livré ce message, ok, assez cool. Maintenant, ne nous engageons pas deux messages dans les togs de texte. Et voici, définissons cette fonction. Tirons la poignée const aneth et rapide dans l'utilisation rappeler à l'avance. N' oublions pas non plus les dépendances et passons à l'avance à l'élément de message. Ok, bien. Donc, cette suppression de handle reçoit une idée de message en tant qu'argument. Alors attrapons ça et je vais définir notre logique en premier lieu. Nous vous demanderons si vous avez vraiment l'intention de livrer ce message. Peut-être qu'il a juste cliqué dessus. Donc on va demander si fenêtre confirme, délivre ce message. Donc, si l'utilisateur clique sur non, alors nous allons simplement revenir de dysfonctionnement. Ensuite, nous devons effectuer quelques opérations ici lorsque nous mettons à jour la base de données. Parce que, comme vous vous en souvenez, lorsque nous délibérément le message ici, nous devons également considérer notre dernière propriété de message à l'intérieur de l'élément de la pièce. Nous devons donc aussi le mettre à jour, et nous devons effectuer une opération atomique. Pour cela, nous allons créer un objet de mise à jour, puis nous allons mettre à jour notre base de données à partir de la racine, comme nous l'avons fait auparavant. Ok, alors créons de nouvelles mises à jour, objet, qui est vide pour l'instant. Et puis nous allons mettre les mises à jour d'abord que les messages de mise à jour des gens. Ensuite, nous mettrons à jour le message. Je d Annable a dit qu'il va supprimer le message original que lorsque notre message est dernier, nous voulons mettre à jour nos informations de chambre. Donc nous devons d'abord détecter quand notre message est perdu. Pour cela, nous allons créer un nouveau précieux ici, que nous nommerons est le dernier, Mettons ci-dessus mises à jour. Et ça va être une comparaison entre notre état actuel et le message I D. Nous allons donc nous référer aux messages. Ensuite, les messages de longueur de point moins un. Nous allons prendre le dernier message de notre tableau d'état que je d égale deux messages I d. Donc si c'est vrai, alors nos messages convoitent Ok, donc ici nous allons demander si notre message est convoitise que pour ces mises à jour. Objet. On va spécifier les salles slash, chat I D. et le dernier message est égal au suivant. Donc, ce sera l'objet précédent à côté de notre objet dilaté actuel. Donc, nous devons saisir des messages longueur de point moins deux, l'objet précédent, non ? Donc on va l'étaler sur le dernier message. Donc, nous allons transférer les messages que les messages longueur point moins deux. Et aussi, nous devons spécifier le message i d. pour se souvenir pour le dernier message. Donc, nous allons aussi mettre des messages, des messages sur la longueur moins deux points i d. Et parce que nous essayons d'accéder aux messages longueur point moins deux, cela pourrait être maintenant ou cet objet ne peut pas exister. Donc nous devons vérifier contre ça. Donc, nous pouvons le faire en mettant simplement ici. Si notre message est le dernier et que la longueur des messages est supérieure à un Onley, alors nous nous assurons que cet objet existe. Ok, alors notre prochain cas à considérer quand nous n'avons plus qu'un message dans le salon de discussion. Et quand on l'a retardé, on veut supprimer le dernier message à l'intérieur, hum, des informations pour ça. On va vérifier si notre message est perdu et si la longueur des messages est égale à un sur Lee. Ensuite, nous allons tirer pour le dernier message Mel Value pour le livrer. Et à la fin, nous mettrons à jour notre base de données. Alors essayons Kage. Regarde par ici. Ensuite, nous allons appeler, attendre la mise à jour de la porte de projet de point de base de données avec des objets et nous allons convertir en fonction n'importe quoi . Et spécifions également un tableau de dépendances. Nous devons donc pâturer des idées et des messages. Et aussi pour éviter cet avertissement, le suppresseur de Colette comme ça. Et nous allons également mettre alerte ici pour avertir l'utilisateur que nous avons supprimé le message. Donc, le message a un bean dilaté et non un message de messages. Et pour toute erreur, nous allons mettre la porte d'alerte, entrer erreur, mais message. OK, ça a l'air bien. Maintenant, jetons un oeil. Permettez-moi d'ajouter quelques nouveaux messages. Allô ? Ils sont défoncés. Ok, Donc si je supprime le tout dernier message dans la base de données, je peux voir maintenant les informations de chambre sont en cours de mise à jour. Et maintenant, j'ai le dernier message réglé là, ce qui est correct. Maintenant, si je le fais pas le dernier message, mais l'un de ceux-ci. Disons bonjour. Je peux voir que le dernier message à l'intérieur de la pièce n'a pas été mis à jour. C' est exact. Maintenant, si je supprime le dernier message, j'ai de nouveaux messages. Et si je n'ai qu'un seul message dans la base de données et si je le supprime, je n'ai pas encore de messages aux deux endroits. OK, donc c'est bien. Et c'est ainsi que nous allons gérer ça. Bon, engageons nos changements et finissons cette vidéo. Oublions tout et ensuite nous engageons. Gestion de la coopération de messages dilatés. Très bien, on se voit dans la prochaine. 137. Ajouter le composant de Adding - Partie 1: sanctifié. Dans cette vidéo, nous allons commencer à dans la fonctionnalité pour le téléchargement de fichiers. Allons-y, Naviguons vers le dossier Bas et ouvrons les togs d'index. Ici, nous allons ajouter une nouvelle icône, en bas de notre importation. Ici, sur la gauche, il ouvrira la fenêtre du modèle et à partir de là, nous allons télécharger nos fichiers. Donc, créons un nouveau fichier à l'intérieur. Ce dossier le nommera Attachement BT et Moto Gs. Pauvre bonjour à l'intérieur et utilisons-le ici à l'intérieur des togs d'index juste avant que les éléments d'entrée n'allaient afficher Attachment Bt et Moto. Ok, maintenant définissons notre marché. Donc, ici, nous avons besoin de verser dans le groupe pauvre Dar fond parce que lorsque nous utilisons le groupe d'importation à l'intérieur, nous devons verser dans le bouton de groupe de port afin de travailler et bien paraître. Donc, pour ce bouton important de groupe, nous allons spécifier Aiken, qui va être l'attachement maintenant nous avons besoin de vous gérer l'état moral. Donc, nous allons utiliser le crochet Moto State et grandissons son ouvert près et ouvert. Donc quand on cliquera sur ce fond, on ouvrira notre fenêtre mobile. Ok, parfait. À côté de ce bouton, définissons la fenêtre réelle du mortel. Donc, nous allons importer le modèle. Et à l'intérieur de Moto, nous allons spécifier Mortal Heather, corps et pied de page. Bon, c' est bon pour ce modèle. Nous allons spécifier la propriété du spectacle, qui est ouverte et aussi sur la hauteur, va être proche pour Heather. Élément à l'intérieur, nous allons verser le titre Moto à l'intérieur du titre mortel que nous allons afficher sont des fichiers plantés. Et retirons cet argent d'ici pour un pied de page de modèle. On va calmer un fond pour applaudir nos dossiers. Alors versons un nouvel élément de bouton et à l'intérieur on va verser un Plourde. Ou peut-être, disons, envoyé pour discuter. Donc, pour l'instant, il n'aura qu'une propriété de clic. Et à côté de ce bas, nous allons afficher un petit élément et à l'intérieur dira que les fichiers Onley moins de cinq mégaoctets sont autorisés. Et alignons ce petit élément par le bon site. Et aussi, donnons-lui un peu hors marge haut. Ok, sauvegardons ça. Et pour le corps, spécifions bonjour pour l'instant. Et prenons un local pour être à moitié. Donc maintenant nous pouvons voir que nous avons ce marché étrange à cause de cette déf. On n'en a pas besoin. Nous devons réagir. Fragment. Ok, encore une fois. Maintenant, nous avons en bas Lorsque nous cliquons dessus, nous avons ce genre de moto envoyer au Tchad et où seuls les fichiers de moins de cinq mégaoctets sont autorisés. Nos éléments applaud sont téléchargés. Composant va provenir de réactif. Alors, cherchons un plodder et passons à manuellement. Donc, c'est le type de composant que nous allons prendre de notre costume. Si nous ouvrons un extrait de code, appelons P tout cela et utilisons-le à l'intérieur. Ah, portez du corps au lieu de bonjour. Importons un portier. Et là, nous allons verser de l'étage équivaut à deux. False que l'action va être juste une chaîne vide car nous allons la gérer manuellement pour un événement inchangé. Nous allons spécifier sur le changement, Heller, qui va créer. Nous n'utiliserons aucune référence car nous allons tout gérer manuellement. Ensuite, nous serons en mesure de télécharger plusieurs fichiers et aussi moins de taper. On va spécifier le texte de l'image. Ok, maintenant nous devons traiter notre état pour les fichiers téléchargés. Donc, nous allons créer un nouvel état ici que nous allons nommer, fichier, fichier, liste et définir la liste de fichiers par défaut. Ce sera un taux vide et cette liste de fichiers. Nous devons le passer à ce composant applaud er er. Donc passons la liste de fichiers en tant qu'état de liste de fichiers. Maintenant, nous devons définir cela sur le changement, gestionnaire. Donc, créons cette fonction ici et cet événement de changement si nous avons nous donne la liste de feu , qui est classé type. Donc, nous avons fondamentalement des fichiers de tableau que nous devons applaudir. Mais à partir de ce rayon, nous avons besoin d'un filtre quelques choses. Donc, tout d'abord, nous devons autoriser les fichiers Onley de moins de cinq mégaoctets de données. Et aussi, nous voulons limiter le nombre maximum de fichiers téléchargés. Disons 25 Donc, nous devons d'abord définir notre taille en octets pour la restreindre. On a besoin de cinq mégaoctets en morsures pour faire ça. Donc ici en haut, créons la taille de fichier Max précieux, et ici nous allons mettre Donc d'abord nous allons prendre 1000 qui représente une bouchée. Ensuite, on va multiplier par 1024 pour obtenir un mégaoctet dans les piqûres, puis multiplié par cinq pour obtenir cinq mégaoctets dans les morsures. Très bien, donc à l'intérieur de ce gestionnaire inchangé laisse pauvre le filtrer, disons valeur ou valeur. Ensuite, nous allons appeler le filtre de point de tableau de fichiers Ici, nous allons recevoir l'élément. Et pour cet élément, nous allons demander si cet élément blob taille point de fichier il nous donnera la taille du fichier actuel inférieure ou égale à la taille maximale du fichier Onley. Ensuite, il sera ajouté à notre viol filtré. De plus, à partir de ce tableau filtré, nous voulons Onley saisir cinq éléments. Alors mettons tranche et à partir de la tranche nous allons spécifier Onley 1er 5 éléments comme ça. Alors juste après ça, on va appeler la liste des feux et on versera des informations filtrées comme ça. Ok, si on dit que c'est maintenant, on a ce signe égal en bas. Sauvons tout. Revenons à l'APP Cliquez sur ce bouton et nous pouvons voir qu'il n'est pas plein avec. Alors nous allons réparer cela rapidement pour l'applaudir. Nous allons spécifier le nom de classe avec 100. Maintenant, quel économiseur ? Et jetons un coup d'oeil une fois de plus. Donc, quand je clique sur ce bouton, je vais télécharger, je peux voir qu'il est plein avec je peux sélectionner plusieurs fichiers. Disons que je vais les sélectionner tous. Mais seuls les 5 premiers fichiers seront sélectionnés. 12345 Je peux voir que cela fonctionne réellement. Maintenant, j'ai besoin d'ajouter des fonctionnalités pour envoyer au bouton de chat afin de les télécharger tous. Je peux aussi les gérer à partir d'ici. Ok, cool. Donc, nous allons créer Et vous, gestionnaire, qui va être notre gestionnaire pour cela sur le bouton envoyé au chat. Alors créons, disons, disons, sur un Plourde, il va être dans un évier, une fonction et un aperçu. Tout d'abord, nous allons définir, disons, l'état de chargement. Ok, donc nous allons créer est le chargement et set se charge par défaut. Ce sera faux. Et c'est le chargement. On va verser ce fond. Donc, pour handicapés, nous allons mettre est le chargement pour sur clic. On va préciser sur un Plourde. Et nous allons aussi faire notre applaudi ou désactivé. Si on peut le faire, ils sont désactivés. Quand est le chargement ? Ok, parfait. Donc, pour un Plourde, nous ferons la prochaine chose. Allons tirer, essayez attraper bloc en premier lieu. Donc, nous savons que nous avons la liste de fichiers comme un tableau hors types de fichiers. Cela signifie que nous allons applaudir plusieurs fichiers dans notre base de données. Donc, afin de gérer plusieurs promesses, nous allons utiliser le point de promesse All But d'abord, nous devons obtenir un tableau de promesses pour cela. Créons des promesses d'applaud précieuses et nous allons mapper notre tableau de liste de fichiers à promettre afin de recevoir un tableau de promesses. Donc, la liste de fichiers liste de points va être classée. Ensuite, nous avons besoin d'accéder à notre stockage. Alors mettons-nous un rangement. Ensuite, nous allons utiliser l'objet de stockage de la base de feu MISC. Ensuite, on va tirer la référence, et on va la mettre. Teoh, allons discuter avec les heures. Ok, comme ça. Ok, Maintenant, nous devons saisir le graphique I D. Mais c'est très simple. On peut l'obtenir en utilisant des indices, des programmes d'utilisation de paramus Hook. De là, nous allons obtenir le graphique I d React routeur. Déplaçons le vers le haut. Et pour cette référence de stockage, alors nous allons spécifier laisse un enfant. Ensuite, nous allons verser un nom de fichier et pour trouver le nom aléatoire, nous pouvons simplement mettre la date de temps en temps, disons le nom sombre du fichier plice pour le rendre plus ou moins aléatoire. Ok, alors que votre Plourde, on va verser le port et on peut utiliser ce fichier bloc que nous avons à partir d' objets de fichier . Ça marchera. OK, donc c'est presque ça. Mais pour ce dossier, je veux spécifier le contrôle de trésorerie. Heather, pour l'encaisser dans notre navigateur pour le port, nous allons spécifier le second périmètre. Il va être objet hors, fait une donnée. Donc ici, nous allons spécifier le contrôle de la trésorerie et nous allons faire le suivant Donc ça va être public et puis marque l'âge. Il faut préciser ici, Max, l'âge en secondes. Donc, spécifions trois jours en secondes. Alors mettons-le pour renforcer l'exaltation du voyage. Et maintenant, faisons notre logique. Donc d'abord, on va avoir une heure en secondes, soit 3600. Ensuite, on va multiplier par 24 pour obtenir un jour en secondes, puis multiplié par trois pour obtenir trois jours en secondes. Ok, bien. Juste après ça. En fait, n'oubliez pas de revenir de ces fonctions de rappel. Ensuite, nous aurons la prochaine chose. Ensuite, on va mettre un instantané de Plourde, un instantané de Plourde qu'on appellera « wait promise dot ». Toutes les promesses applaudissent. Donc, les fichiers d'une heure sont téléchargés. Nous allons recevoir un tableau de snapshots applaud. Alors, comme vous vous souvenez d'obtenir votre fichier 4 téléchargé pour être disponible au public, vous savez, c'est aussi une promesse que nous devons appeler Gedo et abaisser l'aura. C' est donc une promesse. Encore une fois, nous nous retrouverons avec un autre domaine de promesses. C' est pourquoi, encore une fois, nous devons cartographier un nouveau tableau de promesses. C' est pourquoi, disons que ce sera des promesses de forme. Et là, nous allons appeler applaud snapshots dot map et de là, nous allons recevoir une chemise à pression, et cette chemise à pression nous donnera la prochaine. Donc, nous allons retourner un objet qui va être type de contenu de métadonnées snap shore type de contenu. Ensuite, nous aurons le nom, qui va être arraché. Nom de point des méta-données Shore. Il va être le nom de fichier téléchargé, le nom de fichier, et puis le vôtre va être un poids que nous pouvons attraper la porte de référence de point court obtenir Ne pas charger l'Europe comme ça. Donc, ce sera nos données que nous allons stocker à l'intérieur de la base de données maintenant à cette rue promet que nous allons créer de nouveaux précieux, que nous allons nommer des fichiers. Ensuite, nous allons appeler une fille de promesse de poids toute forme de promesses, et j'aurais nos fichiers que nous devons dire à notre base de données. Donc, pour cette chirurgie à l'intérieur de l'index, oui, nous allons créer une nouvelle fonction que nous allons gérer dans la prochaine vidéo pour sortir. Appelons ça à l'avance. Donc, à partir des accessoires ici, nous allons recevoir une fonction après un Plourde, et cela après le téléchargement va gérer les fichiers téléchargés et les a dit à la base de données. Donc on va appeler, attendre un Plourde et pour un dysfonctionnement, on va passer nos fichiers de cette structure. Puis après ce rappel, on va mettre le chargement à faux. Et aussi on va fermer notre fenêtre mobile comme ça. Et au cas où nous avons une erreur, nous allons appeler dit est le chargement. Et puis on va mieux alerter la porte avec un message d'erreur. Bon, donc c'est tout pour cette vidéo. Malheureusement, nous ne pouvons pas encore le tester. Nous pouvons, mais il va juste télécharger des fichiers sur ce stockage. Donc, dans la prochaine vidéo, nous allons continuer à travailler là-dedans. Et nous allons créer ceci après la fonction de téléchargement. Mais pour l'instant, engageons nos changements et finissons la vidéo. Alors, allez à tout et puis vous engagez. Pièce jointe créée, en bas avec un composant flotteur. Très bien, à la prochaine. 138. Enregistrez des fichiers chargés dans une base de données - Partie 2: Hé, là. Dans cette vidéo, nous allons définir après la fonction de téléchargement que nous avons mentionnée dans la vidéo précédente Naviguer vers l' index Togs à l'intérieur du dossier inférieur et ici en bas à droite avant de définir le balisage. Créons après une fonction de rappel Plourde enveloppé dans l'utilisation. Et aussi, spécifions les dépendances comme vides chaque Donc passons ceci après un Plourde à l'avance . Teoh Attachment Bt et mortel. Et cela après téléchargement reçoit des fichiers que nous devons verser à l'intérieur d'un débat afin de se souvenir de cette pièce jointe battant Moto a son propre état de chargement, et c'est Onley à l'intérieur du modèle. Mais à l'intérieur en exulte. Oui, nous avons également l'état de chargement cette fois pour l'entrée réelle. Donc, juste avant de faire une opération sur la base de données, appelons aussi dit, applaudissons à true in index togs. Ok, alors, le même que pour le clic envoyé. Nous devons définir une opération atomique, donc nous allons créer des mises à jour comme un objet vide. Et nous allons copier cette logique pour Disons, quatre données de message ici et cette touche push maintenant parce que nous avons plusieurs fichiers que nous devons télécharger et que ces fichiers sont dans le taux que nous allons appeler des fichiers pour que chacun regarde chaque fichier à l'intérieur ce droit recevra le fichier. Et pour chaque fichier, on a un mauvais message que j'ai et aussi, on va définir les données de message. Donc, nous allons attraper cette logique à partir d'envoyer Cliquez et mettez-le pour chaque fichier. Alors assemblez le message. Et au lieu du texte, nous allons spécifier le fichier et pour le fichier, nous allons spécifier l'objet de fichier que nous avons créé dans la pièce jointe modèle BT, qui est cet objet. Ok, maintenant nous avons le message I d. Nous avons des mises à jour avec les données des messages. Ça a l'air sympa. Maintenant, nous devons également dépasser si je convoite message comme nous le faisons ici, donc à l'intérieur sur un clic, c'est assez facile. Cependant, maintenant que nous avons, disons que cet objet de mises à jour rempli avec ces données, comment pouvons-nous saisir le tout dernier message ? Bien que ce soit en fait assez facile, il faut juste un certain temps pour comprendre la logique. Donc, d'abord, nous allons saisir dernière idée de message, qui va être des clés de points d'objet à partir des mises à jour, puis à partir de ce tableau, disons l'idée de messages. On va sortir le dernier élément qui va être le dernier message. D' accord, alors on va mettre des mises à jour, des chambres, discuter dernier message. Et au lieu des données de message, on va appeler les mises à jour le dernier message idee. Et pour le message I d. nous allons spécifier le dernier message. D' accord, et on va copier ça. Essaie de prendre le bloc d'ici, et on va le mettre juste ici. Et convertissons cette fonction à n'importe quoi. Fonction. Ainsi, une référence de base de données met à jour. Ok, Said est en baisse Nous n'avons pas besoin de pauvres et il semble tout maintenant, allons réellement spécifier tableau de dépendance est avec chat I D et profil et maintenant nous sommes prêts à le tester. Maintenant, revenons pas à l'APP. Laissez-moi cliquer sur le téléchargement de fichier. Je vais sélectionner tous ces fichiers qu'ouvrir. Ensuite, je vais les envoyer au Tchad et je peux voir des messages vides. Cependant, si nous regardons à l'intérieur de la base de données, je peux voir quatre nouveaux messages et nous avons déposé, comme, nombre créé à nous avons auteur. Et si nous ouvrons le fichier, nous pouvons avoir le contenu, type, le nom et la référence euro à notre stockage. Donc c'est ça. Et ça a vraiment fonctionné. Félicitations dans la prochaine vidéo. Nous allons afficher tous les fichiers que nous avons chargés. Mais pour l'instant, venons dans nos changements. Oublions tout. Obtenir commit et, disons stocker les fichiers applaudis dans D Data Maze. Très bien, à la prochaine. 139. Affichage et télécharger des fichiers téléchargés - Partie 3: Hé là, dans cette vidéo, nous allons afficher tous nos fichiers téléchargés. Allons-y, Revenons au code et ouvrons le message Bytom composant l'endroit où nos éléments sont rendus. Et ici en bas au lieu de ce pan avec juste du texte à l'intérieur, nous allons mettre le rendu conditionnel. Mais d'abord, prenons non seulement du texte pour le message, mais aussi, disons le fichier Maintenant, à l'intérieur de ce différent, nous sommes capables de faire le rendu conditionnel. Donc, si nous avons un texte dans notre message sur Lee, alors nous afficherons le message fiscal. Car si nous avons un fichier dans notre message, alors nous allons créer une fonction personnalisée pour rendre les fichiers. Alors appelons-le, rendons le message de fichier et à l'intérieur, nous allons passer notre fichier, puis ici en haut de ce composant, nous allons définir cette fonction, rendre le message classé afin qu'il reçoive le fichier et cette fonction, par défaut nous retournera juste un lien. Et à l'intérieur de ce lien, nous allons verser le nom du point de fichier de téléchargement. Si notre fichier n'est pas une image et pour un treff, nous allons verser le fichier porte Europe. Ok, bien. Maintenant, si notre fichier est une image, nous stockons le type de contenu dans la base de données afin que nous puissions vérifier cette propriété. Donc, si le type de contenu de fichier inclut l'image, alors nous allons retourner l'élément dif à l'intérieur de ce def, nous allons verser une image comme un bouton. Donc, quand nous cliquons dessus, nous ouvrons la fenêtre Moto. Et aussi, nous aurons cette vue de fond original pour nous amener à l'autre robinet et voir la pleine taille. Donc pour ce jour, si on doit spécifier le nom de classe hors hauteur à 20, puis à l'intérieur, on va créer une image Bt dans Moto et pour ça en majeur entre les modèles, on va passer des plaies, qui vont être classées. Votre nom de fichier l et aussi va être déposé. Nom de canard. Maintenant, nous avons réellement besoin de créer cette image, la beauté et Moto. Donc à l'intérieur des messages. Créons un nouveau fichier image VT dans Moto Don't Yes. Et comme toujours, on va verser un mannequin. Mais on va l'enrouler autour du fragment de réaction qu'à l'intérieur. Au lieu de bouton, nous allons mettre en port hors image de type. Il fait cette importation agir comme un bouton même si c'est une image. Donc, pour alternative, commencer un spécifiez ce fichier et pour les propriétés, nous allons spécifier la source et le nom du fichier. Donc, nous allons pauvre source et nom de fichier. Et comme je peux le voir, j'ai eu le mauvais nom de fichier. Alors laissez-moi le remplacer par Image Bt dans mortel. Et laissez-moi le renommer avec l'image Bt et Moto. Ok, donc importez l'image de type pour la source. Nous allons spécifier la source pour sur clic. Nous allons spécifier la dette ouverte va prendre de l'utilisation de l'état modèle utiliser l'état mortel donc est ouvert, ouvert et fermé. Et aussi nous allons spécifier si vous noms de classe ici, qui est Max avec 100 max, cacher 100. Et avec va être alpha. Bon, c'est bon pour l'entrée. C' est ça. Maintenant, définissons réellement le motile. Donc, pauvre composant mortel que Mortal Door Heather, corps et pied de page, corps et pied de page. Donc à l'intérieur de Heather, nous allons afficher le titre de la porte modèle mortel et nous allons verser le nom de fichier à l'intérieur et allons aussi faire des morts. Et ce maintenant à l'intérieur de la nourriture er nous allons spécifier juste un lien vers un robinet externe. Donc nous allons mettre un et un treff va être source et nous allons spécifier tar, devenir vide pour le nouvel onglet. Et aussi nous devons spécifier la relation. Pas d'ouverture, pas de rap Ferrer. Oui, comme ça, je suppose. Et ce composant ne se ferme pas automatiquement. Nous allons mettre la vue originale à l'intérieur et à l'intérieur de la vue Le corps du modèle allait afficher l' image réelle. Alors mettons une étiquette d'image Dan, pour les plaies. Nous allons spécifier les plaies. Et pour la hauteur, disons, 104 avec, disons, aussi 100 sur va être laisse le fichier. Ok, maintenant nous allons utiliser Ceci est ouvert pour montrer la propriété sur la hauteur va être proche et il semble OK maintenant nous allons déplacer cette importation vers le haut et l'intérieur de l'élément de message. Importons ce composant. Bon, maintenant jetons un oeil. Si je rafraîchis l'application, je peux voir ne pas charger le fichier, le nom, le téléchargement, téléchargement, le nom du fichier et je peux voir les images. Donc, nous allons rapidement réparer dit Au lieu de ces supports, nous allons les deux crochets bouclés. Et maintenant, jetons un coup d'oeil pour que nous ayons charger ce fichier. Je ne connais pas ce dossier. Si nous cliquons dessus, nous commencerons à télécharger, et je vois toujours que nous avons des images et quand nous cliquons dessus. Nous avons cette vue originale, et quand nous cliquons dessus, nous arrivons au nouveau robinet. Ok, ça a l'air plutôt bien. Cependant, dans les messages de convoitise, nous avons de l'espace vide, alors réparons-le rapidement. Naviguons vers votre élément de chambre et ici à l'intérieur du dernier message texte. Mettons le suivant. Donc, si nous n'avons pas le texte du dernier message, alors nous allons spécifier le nom du point du dernier message et c'est tout. Maintenant, jetons un oeil. On a un nom de fichier, Ok, plutôt cool. Et c'est fondamentalement ça. Maintenant, finissons cette vidéo et engageons nos changements. Oublions tout. Obtenir commit et disons afficher les fichiers téléchargés pour les faits. se voit dans la prochaine. 140. Enregistrez et téléchargez des messages audio - Partie 4: Bonjour. Dans cette vidéo, nous allons ajouter une option à un enregistrement utilisateur Plourde directement depuis le navigateur, afin que nous puissions envoyer des messages audio au chat. Allons-y. Alors comment ils vont gérer ça ? Eh bien, puisque nous avons déjà le code pour le téléchargement de fichiers, ce sera relativement facile. Nous devons seulement trouver un moyen d'enregistrer la voix de l'utilisateur. Pour ça. On va utiliser React, Mike Library. C' est une bibliothèque qui propose d'enregistrer la voix de l'utilisateur, puis de la visualiser. Mais nous n'allons pas utiliser cette option de visualisation. Nous avons seulement besoin de l'enregistrement. Laissez-moi installer cette bibliothèque. Je vais juste copier cette recommandation que dans plus de terminal. Je vais l'exécuter. Et pendant qu'il s'exécute sous le dossier Bottom, créons un nouveau nom de légume de fichier. Disons le message audio Bt dans l'esque doggy. Pour l'instant, ce sera juste une Deve vide. Et nous allons utiliser ceci à l'intérieur de l'index togs en bas. Donc ici, juste après la pièce jointe, Beat et Moto Utilisons rodéo mon dit que vous êtes TTN et aussi passons après le téléchargement parce que nous allons télécharger des messages audio. Donc, à l'intérieur de ce composant, nous recevrons après le téléchargement. Et maintenant, définissons bien notre marché. Il va être presque la même chose que pour l'attachement battant Moto. Donc, nous allons copier le groupe d'entrée en bas d'ici et collé comme notre marché. Alors, nous allons importer le bouton de groupe d'importation pour déclipsé. Nous aurons notre propre gestionnaire et nous allons également importer l'icône. Et je peux utiliser mon téléphone corbeau ? Ok, bien. Maintenant, comment nous sommes en mesure d'utiliser cette réaction mon Kleiber Allons à l'utilisation et à l'exemple. Copions donc la partie d'importation et placez-la ici en haut. Ensuite, nous allons réellement utiliser le composant. Et regardons quel genre d'accessoires nous devons passer. Donc, d'abord, nous avons ce dossier et si je planque sur la propriété, dit trop vrai pour commencer l'enregistrement ing. Donc nous avons besoin de l'Etat pour contrôler. Quand nous voulons commencer notre enregistrement, créons un. Donc, il va être est record dans. Bullen enregistre par défaut, il sera défini sur false et nous allons passer cet état pour enregistrer la propriété que pour le nom de classe , nous allons mettre display none afin d'afficher n'importe quelle réaction Mike Element, mais pour utiliser leur fonctionnalité. Alors pour une fois, arrêtez. Ce sera notre gestionnaire lorsque nous aurons l'enregistrement et que nous voulons le télécharger. Donc pour ça, on va créer sur un gestionnaire Plourde. Alors mettons un Plourde et à l'avance, nous le mettrons en service rappel. Donc pour l'instant, laissons le vide comme ça et sur les données, nous n'avons pas besoin de celle-ci, parce que si nous faisons défiler jusqu'à l'utilisation, nous pouvons voir que lorsque les données sont facultatives, appelées quand un ordre de toux de canal est disponible nous n'avons pas besoin de celui-là. Nous n'avons pas besoin de couleur de lancer et de couleur d'arrière-plan parce que nous n'affichons tout simplement pas ce composant que nous devons aussi passer. Je veux dire, tapez sur ce composant pour s'assurer que nous recevons le PM 3. Ancien. Alors passons le type moyen et puis apaisons le MPA audio trois. Ok, bien maintenant, prêt à partir. Donc, d'abord, définissons cela en cliquant. Alors mettons-le ici à la boutique et optimisons-le avec l'utilisation froide à l'avance à nouveau parce que nous allons simplement appeler Said est chargement et nous allons inverser notre valeur Bullen ici. Ok, bien maintenant pour le téléchargement, on va verser la prochaine logique. Il va être corrélé Lee comme à l'intérieur de l'Attachement BT et Moto. Nous devrons donc référencer le stockage afin que nous puissions copier cette logique à partir d'ici que nous la mettrons à l'intérieur. Essayez le bloc de capture ici. On va recevoir cette promesse d'applaudissements. Donc, nous devons le convertir en une fonction de lavabo. Donc vérification de référence de stockage, je d. Prenons aussi chat I d. De l'utilisation Paramus Hook que pour le stockage. Nous devons l'importer depuis ISC Firebase que pour l'enfant pour le nom de fichier qu'on va verser. Pas ce nom de fichier, mais on va verser. Disons audio plutôt que souligner. Et puis ouvrons les données d'interpolation de chaîne maintenant et puis à la fin, nous allons mettre la fille MP trois que pour le fichier blob. Que devons-nous spécifier pour le fichier réel si nous allons réagir ? Mike sur la propriété stop nous donne cet enregistrement de données. Donc, parce que nous avons utilisé javascript, nous n'avons pas de types. Et nous ne pouvons pas vérifier quel type de données nous recevons ici. Mais ce que nous pouvons faire, nous pouvons mettre une fonction directement ici pour obtenir l'intelligence. Nous avons donc reçu ces données ici. Et si je mets Data Dar, je peux avoir du blub ici. Donc, ceci est développé type hors objet que nous pouvons télécharger sur le stockage Firebase. Alors mettons le contrôle de l'argent du chien de données. Nous allons le laisser tel qu'il est maintenant. Nous devons également spécifier le fichier réel que nous allons mettre dans la base de données, pas dans le stockage. Alors attrapons-le d'ici à partir de la pièce jointe, bt et modèle. Je vais copier cette structure d'objet. Ensuite, je vais créer un véritable fichier et ensuite je le placerai comme ça. Donc instantané, données multimédias. Hugh R L Ok, bien. Maintenant, nous devons réellement Onley appeler après un Plourde avec un tableau de fichiers que nous voulons applaudir parce que nous n'avons qu'un seul. Nous pouvons mettre juste un tableau vide et ensuite mettre notre fichier à l'intérieur. Donc maintenant, nous avons une sorte de dans un taux, n'est-ce pas. Donc, pour toutes les erreurs, nous allons mettre alerte Dar erreur message point d'erreur puis pour la zone de dépendances. On va passer après le téléchargement et partager I d. On va passer après le téléchargement et partager I d. En outre, nous devons définir une sorte d'un état de chargement. Alors créons une nouvelle dette viable. Va dire est en train de télécharger Qu'il soit dit est applaudissant. Donc, par défaut, ce sera faux Et nous appellerons cette fonction juste avant un Plourde et mettrons à true. Donc, après applaudir ou peut-être juste avant, nous allons dire, est applaudissant à faux et aussi dans le cas de toute arable aussi appelé ensemble est applaudissant à faux. Donc maintenant pour le groupe d'entrée Bt et nous pouvons passer désactivé Onley quand est le téléchargement. Et aussi, nous devons avertir notre utilisateur lorsque nous faisons l'enregistrement afin qu'il puisse le comprendre . OK, ta voix est enregistrée pour ça. On va trouver un nom de classe conditionnel. Donc, si nous avons enregistré est ing, alors nous allons spécifier n'importe quel clignotement de partenaire. Et c'est le nom de la classe avec l'animation CSS que j'ai définie dans l'une des classes CSS . Donc maintenant, ça a l'air bien et tout le reste semble bien. Maintenant, nous pouvons réellement tester la fonctionnalité. Je ne l'ai pas démarré, alors laissez-moi exécuter l'AB maintenant nous pouvons voir démarrer le serveur de développement. Ok, attendons quelques secondes jusqu'à ce que l'APP soit exécutée. Ok, c'est le chargement. Essayons de l'enregistrer. Donc, si j'appuie sur ce bouton, vous pouvez voir que maintenant, ici j'ai Ces onglet utilise votre appareil photo. On microphone cette icône. Et aussi, si je n'avais pas eu ma permission d'utiliser le microphone, ça me l'aurait demandé. Et maintenant je suis prévenu que d'accord, ma voix est l'enregistrer en ce moment. Donc, quand je clique sur ce bouton une fois de plus, je peux voir que j'ai un nouveau téléchargement de fichier ici. Et si on va dans le stockage de la base de feu plutôt qu'au Tchad quedans notre Tchad, que on peut avoir tous nos dossiers. Et aussi un message audio. Ok, donc c'est ça. Dans la vidéo suivante, nous allons parler de la façon dont nous sommes capables d'afficher ce message audio dans le premier qui affaiblit directement. Écoutez cet ancien message à l'intérieur du navigateur, Mais pour l'instant, allons valider nos changements. Laissez-moi appeler, obtenir à tout, puis qui a commis et nous allons spécifier, option ajoutée, une option pour enregistrer et un mauvais fichiers audio. Très bien, on se voit dans la prochaine. 141. Affichage audio et supprimer le fichier - Partie 5: Hé, là. Dans cette vidéo, nous allons afficher les enregistrements audio des utilisateurs téléchargés. Et aussi, nous allons résoudre un autre problème qui se pose lorsque nous avons commencé à traiter le téléchargement de fichiers. revenons jamais au code et ouvrons l'élément de message l'endroit où nous rendons notre élément. Donc ici, nous vérifions par rapport au temps de fichier de contenu Alors ajoutons une autre déclaration If ici et on va vérifier contre les audios. Donc on va demander un dossier. Le type de contenu inclut l'audio. Donc, si c'est le cas, nous allons retourner un élément audio pour que cette commande puisse utiliser des contrôles. Et aussi pauvre élément source, il va être un élément auto-fermant. La source va être classée, Seigneur, votre L et votre type vont être odio MPA trois. Et si cela n'est pas pris en charge par le navigateur, alors nous allons afficher votre navigateur ne prend pas en charge l'élément audio. D' accord ? Et retirons Odéon d'ici. Et maintenant, nous avons cette année minces éléments médias d'avertissement tels qu'un audio doit être doit avoir une piste pour les légendes. C' est bon, mais on n'a pas de tibias de flic. C' est pourquoi nous devons désactiver cet avertissement. Faisons ça. Sauvegardons et déplacons ce suppresseur. Maintenant, nous pouvons voir que nous avons cette piste pour que nous puissions la jouer. Je peux entendre ma voix pour qu'elle fonctionne réellement et c'est tout pour les messages audio. Il était assez simple en ce moment sur d'autres problèmes qui se posent lorsque nous avons commencé à traiter avec Philip O. Quand était mal ID le dernier message ou l'un des messages avec des fichiers que nous le faisons seulement message à l'intérieur de la base de données. Mais les fichiers du stockage ne sont pas dilués. Ce que je veux dire, c'est que je vais essayer de supprimer cet ancien message. Donc, si je supprime celui que je vais au stockage, je l'actualise. Je peux voir que c'est voler leur pour réparer ça. On doit réparer notre manteau. Donc, revenons aux togs d'index. message intérieur est l'endroit où nous livrons. Notre message est donc que cela est géré fonction de village. Donc, ici, nous avons besoin d'une certaine manière également effectuer delish fichier dans la façon dont portable pour le faire. Donc, à l'intérieur de l'élément de message quand nous appelons, nous allons le trouver. Lorsque nous appelons géré, supprimé, nous passons le message i D. Cependant, nous ne savons pas si ce message a un fichier ou il est juste un message texte. Donc, nous allons aussi mauvais fichier à cette fonction de suppression de handle. Donc maintenant, nous savons que s'il y a un fichier si à l'intérieur, comment jusqu'à ce que le couvercle, nous allons également recevoir le fichier et juste après que nous l'aneth message à l'intérieur base de données. Nous pouvons aussi mettre un autre essai, attraper bloc ici, et nous pouvons faire la prochaine chose. Donc, si nous avons déposé, alors nous allons mettre ce bloc de capture Try ici à l'intérieur, et nous allons d'abord saisir la référence à ce fichier dans l'histoire de Firebase pour qu'on puisse appeler , disons, classé grossier. Nous pouvons appeler le stockage que la référence de votre enfer et est-ce qu'il rentre promesse ou ne sait pas , il semble que ce n'est pas une référence de votre L. Et puis nous allons spécifier la porte du fichier, vous êtes dehors. Ensuite, nous pouvons simplement appeler fichier ref porte aneth donc ça va certainement être une promesse. Et dans le cas de tout autre, nous allons spécifier alerte jamais alerte erreur. Et voici un moment très important à attraper. Imaginons que nous transmettions le message et que cela échoue. Donc, si celui-là échoue. Cela va essayer de supprimer le message. Donc, pour vous assurer que si cela échoue, le code suivant échouera également. Nous devons revenir de ce bloc catch chaque fois que nous avons une erreur. Donc maintenant, nous avons ceci un puits à une fonction attendue aucune valeur de retour. Nous pouvons effectivement supprimer à nouveau l'avertissement oui, Lind pour l'ensemble du fichier. Et maintenant, ça a l'air bien. Donc, nous allons d'abord supprimer manuellement ce message d'odeur que nous l'enregistrons. Et si j'essaie de dilater le dernier message ici, si j'ai dilaté le message a été supprimé. Et si vous regardez à l'intérieur de ma base de données, j'ai deux images. Mais si je me rafraîchis maintenant, je n'en ai qu'un. Donc, tout a été réparé avec succès. Ok, maintenant, engageons nos changements. Prenons tout, puis obtenons des commits. Supposons que les messages audio affichés et corrigent la suppression du fichier lorsque le message est remis. D' accord. Parfait. se voit dans la prochaine. 142. Fiche de chat de groupe par des dates: Hey là dans cette vidéo mobile chat de groupe messages par date, sorte que nous serons en mesure de diviser chat adapter dans les messages liés à la date. Bon, revenons jamais au code et voyons comment nous allons aborder cela. Donc, tout d'abord, nous avons besoin d'une sorte de fonction qui regroupera nos messages par dates. Alors créons un. Ouvrons les aides togs. Et ici en bas, créons une nouvelle fonction qui va nommer groupe acheter Il recevra un tableau comme premier argument, puis il va recevoir la fonction clé de regroupement. Ça va être un dos froid et laissez-moi vous expliquer comment nous allons utiliser cette fille par fonction. Donc on va l'appeler comme ça. Le premier argument, nous allons passer des messages, tableau, puis le regroupement. La fonction clé est un rappel qui recevra un élément de ce tableau. Donc, dans notre élément de message de cas, alors tout ce que nous retournons de ce rappel sera notre clé de regroupement. Donc, dans notre cas, c'est la date. Donc, nous allons tourner le message que j'ai créé à quelque chose comme ça. Ensuite, il y a grandi par, nous retournera un objet où chaque clé va être cette clé de regroupement que nous revenons de ce rappel. Donc, si nous retournons la date qu'il va regrouper les messages américains par date. Donc, disons quelque chose comme nous avons une date comme celle-ci et ensuite nous aurons des messages de tableau liés à cette date et ainsi de suite, et ainsi de suite. Ok, je suppose que c'est clair. Maintenant, créons cette fonction. Laisse-moi rare, papa, et on va utiliser la réduction des points de tableau pour ne pas réduire, recevoir un rappel. Et le deuxième argument est la valeur initiale de l'état. Donc, ce ne sera qu'un objet. Et pour le co back premier argument est l'accumulateur, nous allons utiliser un résultat et puis l'élément actuel de la valeur actuelle va juste à l'élément correct à partir de chaque itération, nous allons retourner le résultat et ensuite nous allons effectuer la prochaine chose d'abord, nous allons verser la clé de regroupement précieux, et nous appellerons la fonction clé de regroupement et nous allons passer un aperçu de l'élément. Donc, cette façon, nous serons en mesure d'accéder à l'élément de message à l'intérieur de ce rappel. Ok, bien. Maintenant, on va vérifier contre la vallée nulle ou la vallée inexistante. Donc, si la propriété de clé de regroupement de résultats n'existe pas, alors nous l'initialiserons comme autrement. Nous recevrons un avertissement ou une erreur si nous essayons d'effectuer quelque chose sur un objet non existant . Donc, nous allons mettre la clé de regroupement de résultats et ensuite nous allons le citer comme un tableau vide. D' accord, alors, si cela existe, alors nous allons mettre le point clé de regroupement des résultats pousser l'élément actuel et c'est tout. Maintenant, nous sommes en mesure de l'utiliser. Ouvrons les messages, indexons les togs, et trouvons l'endroit où nous rendons les messages. Donc, en ce moment, c'est juste cette fonction de carte par ici. Copions en fait et dilatés. Et au lieu de cette fonction de carte, nous allons à nos propres messages de rendu fonctionnels personnalisés. La mort va créer. Donc ici nous avons été const plus grands messages et il va être une fonction, et à l'intérieur de cela va mettre cette carte de message. Mais commentons-le pour l'instant. Et ici, nous appellerons le groupe par Donc, nous allons pauvres groupes const. Ensuite, nous appellerons groupe par. Nous allons passer des messages notre état du premier argument, puis grouper dans la fonction clé afin qu'il reçoive l'élément de message et le groupe de problèmes par dates. Donc, pour spécifier l'élément créé à mais créé l'annonce pour se souvenir, il est juste un horodatage de base de données. Ce n'est pas un objet de date que nous pouvons utiliser ou afficher dans JavaScript. Donc, nous allons le convertir en objet tardif, et puis nous nous conformons à cet objet date avec la chaîne à date. Bon, donc maintenant nous avons des groupes et nous devons créer des éléments que nous allons pousser et afficher à l'intérieur de J 6 à l'intérieur du chien. Donc, nous allons créer des clés d'objet, puis spécifier des groupes et pour chaque méthode. Donc ce qui se passe ici que nous allons boucler chaque date, chaque clé à l'intérieur des groupes objet. Donc on va avoir un rendez-vous ici et pour tous les jours. Tout d'abord, nous allons créer un tableau d'éléments. Alors laissez-le être laissé éléments que nous allons modifier. Et pour ces articles, d'abord, on va pousser notre premier élément. Ce sera un rendez-vous. Élément L I. Donc, nous allons créer un nouveau l I intérieur rebelle date affichée et le nom de classe va être la marge du centre de texte ne serait pas un et pad et aussi nous avons besoin de spécifier la clé, qui va être la date, et il est unique dans ce. Les groupes s'arrangent. D' accord. Maintenant, nous devons également pousser tous les messages liés à cette date particulière afin de pouvoir créer de nouveaux messages. Tous et nous allons utiliser cette fonction de carte ici. Donc, nous allons verser la date des groupes pour accéder à tous les messages liés à cette date particulière que nous sommes en train d'itérer. Donc groupez la carte de points ST et nous allons mapper chaque message à l'élément de message d'ici. Copions-le et supprimons. On n'en a plus besoin, donc on va le cartographier comme ça, et à la toute fin, on va simplement appeler des objets « chat obscurci », puis des messages, accord ? Et c'est en fait ça. Et à la fin de cette fonction, nous allons retourner des objets, et ils seront rendus à l'idiot. Donc, il est dit que les articles ne sont jamais démissionnés. Très bien, alors mettons const, sauvegardons ça et jetons un coup d'oeil. Maintenant, si on navigue, je ne vois aucun message. Permettez-moi d'essayer une syntaxe légèrement différente. Maintenant, si on a raison, on peut avoir Aikens. Ok, alors utilisons-le au lieu de Can Cat. Donc ce que nous faisons ici avec étaler tous nos articles en push. Ils sont donc traités comme des arguments séparés à pousser. Donc, au lieu de passer des messages comme ça, on les a passés comme ça. 12345 Très bien, donc c'est ce que fait cet opérateur de propagation dans ce cas. Ok, donc maintenant nous avons, disons, jeudi 18 juin si je mets bonjour. Maintenant, j'ai Juin 19 donc cela fonctionne réellement. Et maintenant, nous avons ce joli petit regroupement soigné. D' accord, donc c'est tout. Et je suppose qu'on a fini ici. Finissons notre vidéo. Allons verser, prendre tout, puis vous obtenez un peu. Et spécifions les messages groupés par dates pour l'effet. se voit dans la prochaine. 143. Pagination et contrôle de la position Scrolled: Bonjour. Dans cette vidéo, nous allons gérer la pagination à l'intérieur du chat. ce moment, nous chargeons tous les messages de la base de données et ce n'est pas vraiment bon. Donc, dans cette vidéo, nous allons les chiffres et aussi nous allons résoudre ce problème. Lorsque nous actualisons la page ou basculons entre les chats, nous ne faisons pas défiler vers le bas. Allons-y. Donc, la question est de savoir comment vous êtes capable de gérer la pagination dans firebase ? Eh bien, il ya quelques approches et le plus commun est juste que vous re abonner Teoh nouveaux messages de chat Chaque fois que nous chargeons une nouvelle partie, C'est l'approche que nous prenons. Nous pouvons prendre une autre approche Teoh abaisser seulement les vieux messages sur le Seigneur initial, puis souscrire à de nouvelles mises à jour. Cependant, cette approche ne fonctionnera pas car si nous chargeons les anciens messages sur Lee une fois et que nous mettons à jour l'un des messages, il ne sera pas mis à jour en temps réel. Ce n'est donc pas notre cas. Nous voulons mettre à jour tous les messages et ils doivent tous être en temps réel. C' est pour ça que nous allons utiliser la première approche. Donc, naviguons jusqu'à index points gs dans les messages et ici en haut, nous allons d'abord spécifier notre taille pour la page. Que ce soit la taille de la page 15. Maintenant, nous avons besoin de créer resté à l'intérieur de notre composant qui représente notre limite actuelle. Donc, nous allons créer limite et définir limite. Et par défaut, cet état sera égal à la taille de la page. Ok, bien. Maintenant, regardons à l'intérieur. Utilisez le fait où nous récupérons nos messages. Donc, nous avons ce message, ref, qui n'est pas limité à cette utilisation du composant fait ou jours parce qu'il n'utilise aucune valeur interne, donc nous pouvons le déplacer en toute sécurité ici vers le haut. D' accord, bien. Maintenant, nous devrons fonctionner ici pour attirer le message initial et à Seigneur plus de messages lorsque nous cliquerons sur le bouton en haut. Nous allons donc créer une nouvelle fonction juste pour partager la logique. Donc ici, avant d'utiliser le fait que nous créons une nouvelle fonction messages Seigneur et nous l'envelopperons dans l'utilisation Call back à l'avance pour l'optimiser. Et mettons cette logique ici à l'intérieur des messages du Seigneur. Et n'effacez pas cet abonnement. Il est vraiment important de se désabonner du fait de l'utilisateur aussi. Donc maintenant, nous avons cet enfant RG ici comme une dépendance, nous allons éditer. Et chaque fois que vous rechargez des messages, nous nous assurons également que nous nous désabonnions des anciens messages et nous sommes abonnés aux nouvelles mises à jour . Donc ici, juste avant de recevoir nos nouvelles données, on va appeler le message ref dot pour se désabonner des mises à jour précédentes. Bon, maintenant, maintenant, à l'intérieur de ce fait utilisateur, nous allons appeler les messages du Seigneur, et nous allons spécifier à l'intérieur du tableau de dépendances, et nous allons supprimer le chat I d. Parce que à partir de maintenant, ce n'est pas Partir de cet effet d'utilisation. Ok, bien. Maintenant, qu'en est-il de la limite ? Et qu'en est-il de la fonctionnalité Lord More ? allons grande nouvelle fonction à côté des messages du Seigneur que nous appellerons plus bas permet également rapper dans l'utilisation rappel. Et que devrions-nous mettre à l'intérieur ? Nous appellerons simplement les messages du Seigneur avec notre limite que nous avons à l'intérieur de l'État. Donc maintenant, nous devons spécifier les messages du Seigneur et limiter comme dépendances et c'est tout. C' est tout pour cette fonction. Maintenant, à l'intérieur des messages du Seigneur, nous recevons la limite que nous voulons augmenter lorsque nous cliquons sur Lord More. Donc, ici, nous aurons une limite. Et lorsque nous essayons de nouveaux messages pour notre générateur de requêtes, nous pouvons spécifier cette propriété appelée limite à durer. Donc, le nombre de notes de off à inclure dans cette requête et nous allons spécifier la limite ou parce que nous avons déjà limité audible déclaré appelons limite à peur et passons ici. Et au cas où nous n'avons aucune valeur du tout legis pacifier la taille de la page Juste un petit fullback ici . Et chaque fois que nous réduisons une nouvelle partie des messages, nous devons augmenter notre limite actuelle. Droit ? Donc, lorsque nous cliquerons sur ce bouton, notre prochaine limite sera notre limite actuelle plus la taille de la page. Donc ici, nous allons verser la limite définie, et ensuite nous allons faire référence à la taille précédente, plus la taille de page précédente. Ok, maintenant nous devons définir ce fond, et nous devons mettre ce déchargement plus de gestionnaire pour ce fond. Donc ici, en bas, où nous rendons notre balisage, nous allons mettre la logique suivante. Donc, nous devons demander si nous avons des messages et des messages « Don't Length » est supérieur ou égal à notre taille de page Onley. Ensuite, nous allons afficher un autre élément l I à l'intérieur nous allons mettre le bouton et à l'intérieur en bas nous allons verser plus bas. Maintenant, ajoutons quelques noms de classe. Donc, pour cet allié, on va mettre une marge de centre fiscal en haut et en bas. Et aussi pour le clic, nous allons spécifier propre plus bas. Et aussi nous le mettrons avec la couleur verte, pas rouge. Je n'aime pas celle-là. D' accord, bien. Jetons un coup d'oeil à ce qu'on a fait. Si nous ouvrons notre page maintenant, comme moi, actualisez-la encore une fois. Nous pouvons voir maintenant nous avons Onley 15 messages et si je clique sur charger plus, vous pouvez voir que plus de messages ont été chargés. Alors, c'est ça. C' est ce qui se passe. Donc, en ce moment, lorsque nous chargeons notre page initialement, nous avons notre abonnement initial Onley quatre taille de page, qui est actuellement 15. Ensuite, lorsque nous cliquons sur Lord More, cela est lancé avec notre limite actuelle que nous augmentons et il sera porté à 30 et nous nous désabonnerons de ces mises à jour et nous allons nous abonner à de nouvelles mises à jour. C' est donc ce qui se passe en arrière-plan. Bon, maintenant, et notre parchemin ? Comme vous pouvez le voir, il est assez cassé parce que lorsque nous avons abaissé de nouveaux messages. Nous les haricots rampaient au sommet à chaque fois. Ce n'est pas bon, donc nous devons le contrôler d'une manière ou d'une autre. Eh bien, pour cela, nous devons utiliser la référence pour obtenir l'élément réel afin que nous puissions manipuler sa possession de défilement . Pour cela, Créons une nouvelle référence ici. Et il va être, disons, disons, auto réf avec crochet réf usagé. Ok, alors on va passer cette référence à notre élément était toi. Donc, la référence va être auto-référence. Et maintenant, commençons à le manipuler. Donc, tout d'abord, pour notre effet d'utilisation initial, lorsque nous chargeons notre page initialement, nous voulons faire défiler vers le bas, non ? Donc ici, nous allons spécifier note et nous allons référencer le point auto ref courant pour obtenir la référence réelle à notre élément. Et ici, juste après que nous avons chargé nos messages, nous pouvons verser le haut de défilement de noeud n'est pas égal à la hauteur de défilement. Et ce sera le truc de Lloyd. J' ai toujours le problème avec cette approche est que parce que ce Seigneur messages est une opération asynchrone et cela est synchrone afin que cela puisse être exécuté avant que ce Seigneur messages a fait avec sa pensée, il est donc important de le mettre comme n'importe quelle pensée opération pour cela. Nous allons l'envelopper autour du temps défini notre et nous allons spécifier quelque chose comme 200 millisecondes. Ainsi, nous nous assurons que cela est exécuté sur Lee lorsque les messages Lord sont faits et lorsque tous les éléments que nous essayons d'afficher sont affichés sur la page. Bon, alors maintenant jetons un coup d'oeil. Si je rafraîchis la page, je peux voir que je ne pensais pas, mais je fais défiler vers le bas. Oui, je vois ça. Un petit délai de 200 millisecondes. Mais c'est bon, non ? n'y a rien de mal à cela. Cependant, maintenant je fais défiler vers le bas. D' accord ? Notre prochaine approche est de garder cette position de corbeau quand nous cliquons sur Lord More. Donc on n'est pas grattés au sommet. Eh bien, pour cela à l'intérieur du Seigneur, plus en premier lieu. Revenons à nouveau à nos éléments actuels. Donc, la note va être auto-réf courant. Ensuite, avant de cliquer sur Lord More, nous devons connaître la hauteur précédente de notre élément de défilement hors de notre position de défilement. Donc, quand nous avons abaissé de nouveaux éléments, nous obtenons la nouvelle hauteur et ensuite nous pouvons soustraire ces valeurs. Donc, nous allons verser une vieille hauteur précieuse. Et ici, nous allons verser la hauteur de défilement de noeud. Ok, alors, après nos messages, on appellera « Time out » à nouveau pour rendre notre opération asynchrone à nouveau. Avec le temps libre de 200 millisecondes, puis à l'intérieur, nous allons spécifier une nouvelle hauteur, qui ne sera pas de hauteur de défilement. Et puis nous allons spécifier noeud défilement haut égal à la nouvelle hauteur moins l'ancienne hauteur. Bon, maintenant, sauvegardons ça. Supprimons ce rythme et jetons un coup d'oeil. Maintenant, nous faisons défiler vers le bas, et quand je clique sur Lord More, vous pouvez voir que cette position de corbeau est conservée. Ok, donc ça a l'air plutôt bien. Comment vas-tu ? Il y a encore un cas à traiter. Chaque fois que j'écris quelque chose dans le chat, disons bonjour. Vous pouvez voir que je ne fais pas défiler vers le bas. Donc, nous devons réparer ça. Et idéalement, nous voulons en faire quelque chose comme ça. Donc, si nous avons gratté plus de 50% dans notre chat et que nous tapons quelque chose, nous voulons faire défiler vers le bas. Cependant, disons que si nous recherchons quelques vieux messages. Et si nous tapons quelque chose ou que quelqu'un d'autre tape, nous ne voulons pas faire défiler vers le bas. Pour cela, nous devons également définir notre logique Pour cette raison. Ici, en haut, nous allons créer une nouvelle fonction qui nommera certainement défiler vers le bas, et il recevra ce courant auto ref. Donc nous allons mettre une note, et ici nous allons mettre la prochaine logique. Et aussi, nous pouvons spécifier le deuxième argument, qui va être, disons, seuil, qui va être, disons, 30% de par défaut. Ok, donc nous allons calculer le pourcentage de notre position de défilement, et ensuite nous allons retourner la comparaison. Nous allons retourner le taureau en valeur si notre pourcentage que nous définissons ici est supérieur au seuil qui a été pacifié. Ok, donc le pourcentage va avoir la logique suivante. Donc, tout d'abord, nous allons multiplier notre valeur par 100 %. Ensuite, nous allons diviser cette valeur par pas de mineurs de hauteur de défilement, pas de hauteur de client, et cette logique nous donnera le pourcentage. Et comme un dos complet, nous allons fournir seulement zéro. D' accord ? Donc maintenant, nous pouvons utiliser un dysfonctionnement pour détecter si nous avons vraiment besoin de faire défiler vers le bas si nous détestons le seuil. Ok, alors laisse-moi copier ça et allons voir les messages du Seigneur et entendre ce que nous allons faire. Commencez nous pacifier à nouveau. Disons noeud et ensuite nous allons référencer auto Ralf courant sombre et ce qu'il va faire. Nous le mettrons juste après avoir défini des messages. Ensuite, nous allons demander si nous devrions faire défiler vers le bas avec notre noeud actuel et gardons seuil comme 30% Onley. Alors on ne versera pas de parler de parchemin et ensuite pas de hauteur de défilement, d'accord ? Et en fait, tu sais quoi ? Nous pouvons mettre cette note en haut pour la réutiliser. OK, comme ça. Maintenant, jetons un coup d'oeil. Laissez-moi charger plus de messages. Laisse-moi faire défiler vers le haut. Et en ce moment, quand je tape un nouveau message, je ne suis pas roulé vers le bas. Cependant, si je fais défiler plus de 30% et si je tape randonnée, je peux voir que je fais défiler vers le bas. Donc, c'est un gars. C' est ainsi que nous pouvons gérer la pagination. Et c'est ainsi que nous pouvons contrôler notre position de défilement. Ok, je suppose que ce n'était pas trop déroutant parce que pour moi, au premier coup d'œil , ça va aller, alors engageons nos changements. Tirons pour tout obtenir, obtenir commit et disons à lui pagination et contrôle la position de défilement. Parfait. se voit dans la prochaine. 144. Deployment à l'hébergement Firebase: Hey, Pour l'instant, notre application de chat a toutes les fonctionnalités de base implémentées. La seule chose qui manque est vraiment des notifications de temps. Afin de le mettre en œuvre, il faut faire quelques choses pour lancer le projet Ways. Nous allons en parler dans la section suivante et pour finir ces sections sur une bonne note, déployons notre Tchad actuel en utilisant Firebase hébergeant la base ouverte Fire Base que Jason a localisé dans le dossier de la route vers l'objet d'hébergement. Ajoutons pré-déployé hook NPM run built bill Script est défini dans le paquet Jason. Maintenant, il est aussi facile que de taper Firebase déployer à partir du terminal. Cette commande déploie toutes les parties du projet qui ont été détectées dans firebase le Jason . Ceux-ci incluent les règles de base de données et l'hébergement. Nous pourrions également déployer des pièces séparées en exécutant Firebase déploiement, Dash Dash hébergement uniquement après la fin du Commandant, nous pouvons aller à l'hôte dans la section à l'intérieur de Firebase Dashboard. Ici, nous pouvons trouver un euro pour accéder à notre application Bab. Il y en aura deux. Utilisez celui que vous aimez plus les deux fonctionneront. Firebase garde également le suivi des déploiements et nous pouvons revenir à n'importe quel enregistrement de déploiement dans l'historique des versions. Ouvrons l'application pour voir qu'elle fonctionne réellement. Joli. Ça a l'air bien et assez rapide. Cependant, Facebook Logan échouera si quelqu'un d'autre que nous essayera de se connecter pour le corriger. Allons à Google et Time. Facebook pour les décès, Cliquez sur mon abs que sélectionner l'application de chat. Accédez aux paramètres de base pour la politique de confidentialité. Euro Copy site Curole et collé ici que faire défiler vers le bas. Cliquez sur et plate-forme et assurez-vous que vous avez ajouté votre rhapsody. Cliquez sur enregistrer les modifications que d'aller au tableau de bord et a tourné ce qui sur le dessus pour vous assurer qu'il affiche la vie. Et c'est tout. C' était la dernière vidéo de cette section. Dans la section suivante, nous allons parler du backend de cheminée personnalisé avec des fonctions cloud. On se voit là-bas. 145. Plan de projet de Firebase: Bonjour. Cette section est dédiée aux notifications en temps réel et aux fonctions cloud. Les notifications en temps réel sont implémentées avec la messagerie cloud basée sur le feu qui nécessite un retour personnalisé . Et c'est pourquoi nous utilisons des fonctions cloud. Pour que nous puissions continuer, nous devons mettre à jour notre projet de course de feu à l'usine de flammes avec des mises à jour récentes de prix Firebase à partir de maintenant, fonctions appelées nécessitent plan blaze que l'utilisation de certains des services cloud Google qui ne sont pas disponible dans le plan Platt Blaze gratuit est passé. Tu vas faire du moto et ça ne veut pas dire qu'on doit payer. Tous ces services sont donnés avec des généraux vraiment. Prédicateur, croyez-moi avec les quotas donnés, vous ne chaufferez jamais la frontière payante, mais c'est à vous de choisir. S' il vous plaît lire plus sur le plan blaze sur la page de prix de base incendie pour fonctionner au plan de flamme. Allez dans le tableau de bord Firebase, Cliquez sur la mise à niveau en bas et sélectionnez plan de flamme. Si vous n'avez pas encore de source de paiement, Google vous demandera les détails de votre voiture et après cela, il mettra à jour le projet pour vérifier quel plan ? Utilisations de projet de coupe. Regardez juste en bas à gauche. Maintenant, nous sommes tous dit dans la prochaine vidéo, nous allons parler des fonctions cloud et des architectures moins serveur. On se voit là 146. Qu'est-: Hey, parlons moins de serveur. Ça a l'air cool, non ? Pour mieux comprendre ce qu'il est sans serveur. Nous allons re sage comment le serveur normal fonctionne de retour dans les serveurs déployés en cours d'exécution et en attente de connexions. Rien ne va pas ici, mais voici un petit inconvénient. Nous n'avons pas d'utilisateurs, tandis que le serveur continue à Ron et les ressources du consommateur. Pas très bénéfique est qu'il servirait à moins qu'un serveur qui est déployé s'exécute à la demande. Ou il est préférable de dire que le code s'exécute à la demande sur Lee quand c'est nécessaire. Si l'accès de personne dans le décodage, il n'est pas exécuté. La plupart du temps, approche Serverless est présentée. Serveur informel Dernières fonctions. Chaque fonction est déployée séparément et possède son propre contexte d'exécution. Quand sa fonction est déployée, elle a son propre Http, votre l qui est utilisé pour enquêter sur la fonction. Votre L est comme un déclencheur pour exécuter le code. n'y a pas de serveur réel à la fin. Il y a juste du code qui s'exécute à la demande. Sous le capot, toute la magie est alimentée par des conteneurs docker. Un conteneur est un paquet petit comme exalté hors Quoiqu'il soit mis à l'intérieur avec des machines virtuelles, le système d'exploitation entier est aussi heureux avec des conteneurs sur Lee. Le contenu qui est placé à l'intérieur permet d'exécuter plusieurs conteneurs sur un seul système d'exploitation . Chaque fonction déployée, avec tout son code et ses dépendances, est placée dans son propre conteneur qui transmet à la demande lorsque la fonction est déclenchée. Mais les conteneurs doivent également être hébergés et déployés. Samba droit Ceci est contrôlé et géré par le fournisseur de cloud. On n'a pas besoin de s'inquiéter pour ça. Et comme tout est géré pour nous, nous avons pas besoin de nous soucier de la mise à l'échelle et de la maintenance. Les militants déployés seront automatiquement mis à l'échelle en fonction du nombre d'invocations. Maintenant, nous savons que chaque serveur moins de fonction est un morceau de code distinct qui est exécuté sur Lee quand effectivement utilisé une fonction n'est pas conscient d'une autre comment nous sommes capables de partager du code à travers plusieurs fonctions. Par exemple, toutes les fonctions déployées doivent accéder à une variable partagée ou à une autre fonction. Cela dépend et fournisseur de cloud avec le feu. Le code des fonctions Cloud de base est partagé dans la portée globale. Quels sont les inconvénients que le principal est appelé start lorsque le code n'est pas exécuté pendant un certain temps, ce conteneur de fonctions va se mettre en veille. Quand quelqu'un essaie d'accéder au conteneur de code tourne et cela prend un certain temps. C' est ce qu'on appelle le démarrage à froid. Cela dépend de plusieurs facteurs. Par exemple, quelle est la taille du décodage pour cette fonction ? Ou combien de dépendances atteste après l'exécution d'un code, le conteneur reste à l'état chauffé pendant un certain temps et attend les demandes suivantes. Cela signifie que le démarrage à froid n'aura pas lieu. Mais après un certain temps, quand il n'y a pas de demandes du tout, conteneur ira dormir, et la prochaine fois nous verrons le froid. Commencez par le serveur Moins. La tarification est évaluée en fonction du nombre d'invocations et de la durée de chaque exécution souhaitée. Les fonctions cloud Firebase ont des millions d'invocations gratuites par mois, et c'est incroyable. Maintenant, nous savons ce qui sert moins et ce que sont les fonctions cloud. J' espère que ça vous a plu. se voit dans la prochaine. 147. Messagerie Cloud - Comment est tout en lien ?: Bonjour. Parlons de la messagerie cloud Firebase. Qu' est-ce que c'est exactement ? La messagerie cloud nous permet de poncer les notifications en temps réel aux utilisateurs. Si nous sommes sur le site, nous pouvons obtenir une notification pop up de nulle part. Si le site Web et le navigateur sont fermés, nous pouvons obtenir des notifications natives du système d'exploitation sur mobile. Ce sera une notification comme si c'était une véritable application mobile sous le capot, il utilise des navigateurs, Boucher, FBI et le principal inconvénient qu'il a un support limité et les navigateurs et certains systèmes d'exploitation . Ok, laissez-moi vous expliquer le cycle complet de la messagerie cloud Firebase. Ainsi, chaque utilisateur a un jeton unique qui représente l'appareil des utilisateurs. Nous obtenons ce jeton de l'utilisateur et le stockons dans la base de données. Ce jeton ne devrait pas être publiquement disponible ultérieurement. Fire Base utilisera ce jeton pour envoyer une notification à l'appareil des utilisateurs pour recevoir notification sur l'appareil. On va mettre en place un agent de service. Comme vous vous en souvenez. C' est un script intermédiaire qui se trouve à l'intérieur du navigateur. Les travailleurs des colons sont souvent habitués à effectuer certaines tâches de fond. Les notifications en sont un bon exemple. Il interceptera les messages entrants et en utilisant des navigateurs. Bush ap I Il affichera la notification. Pour les faits. Maintenant, vous savez comment ça marche. Dans la vidéo suivante, nous arriverons à la chèvre. Voyez-vous que 148. Storing des jetons périphérique dans la base de données: Hé là, dans cette vidéo, nous allons obtenir le jeton d'appareil des utilisateurs et le stocker dans la base de données. Mais avant de le faire dans la vidéo précédente, lorsque nous avons déployé notre application, nous obtenons cet argent d'hébergement et aussi nous avons modifié le feu basé sur Jésus. Alors tout d'abord, ouvrons et soyons ignorés. Et ajoutons dot firebase fuller pour obtenir ignorer pour nous assurer que nous ne suivons pas ce dossier . D' accord, bien. Maintenant, nous allons valider nos changements et disons, get commit, get commit, Déployer l'application Perfect Maintenant j'ai déjà ouvert la documentation pour la messagerie cloud firebase, et à partir de là, nous avons besoin d'obtenir des informations d'identification Web. Et ce sont une clé d'identification volontaire du serveur d'applications. C' est donc la clé vapid dont nous avons besoin pour configurer Firebase Cloud domestique en premier lieu. Donc, allons au tableau de bord que allons aborder les paramètres, puis à la messagerie cloud à partir d'ici. Sous configuration Web, nous devons générer une nouvelle paire de clés. Donc, cliquez sur ce fond et c'est notre clé vapid que nous allons utiliser. Il est public pour que nous puissions le partager. Je veux dire, ne le partagez pas, mais il est publiquement disponible Maintenant, passons à notre application. En fait, on va le faire. Et puis nous allons Oakland Firebase Doggy en premier lieu. Donc nous allons importer des messages Firebase, puis ici en bas. Nous allons vérifier si elle est supportée par le navigateur, donc nous pouvons anti export const. Messagerie. Alors on va demander si Firebase est morte. La messagerie est prise en charge. Donc si c'est le cas, alors nous allons appeler la messagerie par point d'application pour obtenir l'instance. Sinon, il sera dit de ne pas alors en bas. Nous devons le configurer pour utiliser cette clé vapid que nous avons générée. Demandons donc si nous avons la messagerie prise en charge. Donc si nous avons l'instance, alors nous allons appeler la messagerie, utiliser la clé Vapid publique. Vous pouvez le trouver dans leur documentation. Très bien, alors copions cette clé et collons-la ici. Ok, bien. Et je dois mettre en place un gestionnaire pour nos messages. Alors laissez-moi vous expliquer. messages ou notifications sont disponibles en deux types : les premier plan et les messages d'arrière-plan. Les messages d'arrière-plan sont les messages qui sont traités lorsque notre onglet ou notre navigateur est fermé et que les messages de premier plan sont ceux qui sont visibles lorsque nous faisons défiler le site Web, sorte que les messages de premier plan doivent être traités dans l'application. Les messages d'arrière-plan sont gérés par le service worker. Donc ici, nous allons appeler la messagerie sur le message et pour la connaissance est de le garder tel qu'il est. Données du consulat. Donc, ces abonnements, disons, géreront nos messages de premier plan. Ok, disons avec et maintenant nous allons décoder pour enregistrer l'appareil utilisateur dans la base de données. Alors ouvrons le contexte de profil. Donc, ce n'est pas l'endroit où nous regardons dans notre utilisateur. Donc ici, nous devons le gérer. Et si j'ouvre à nouveau la documentation, je peux voir que je peux copier ce morceau de code pour obtenir le jeton d'enregistrement actuel. Donc, en fait, tu sais quoi ? Laissez-moi copier ceci et collons quelque part ici en bas. Mais d'abord, nous devons nous assurer que la messagerie existe. Donc nous allons vérifier si la messagerie existe, que j'ai importée de la base de feu MISC. Donc si c'est le cas, alors je vais accélérer ce code, et peut-être que tu me laisses le convertir en un index d'attente. Laisse-moi mettre un bloc d'essai ici. Ensuite, je vais verser des messages, obtenir des jetons. Donc, ce sera const Tokcan. Disons que le jeton actuel est égal à attendre la messagerie. Obtenir jeton et convertis en fonction face. Ok, parfait. Ensuite, nous allons vérifier si le jeton actuel existe. Laissez copier tout cela. Donc si ce jeton actuel existe, alors on va faire des choses. Nous n'en avons même pas besoin qu'en cas d'erreur, nous allons afficher à l'intérieur de la console et à notre survenue. Ok, bien. Maintenant, faisons-le. Tout ça. Et nous y voilà. Maintenant, nous devons stocker ce jeton dans la base de données. Pour cela, nous pouvons appeler les moyens de données Dar graph et le lieu ou le chemin que nous allons commencer nos jetons est égal à deux jetons FC m barre oblique I d, puis slash utilisateur i d. Donc, avec ces approches, nous pouvons facilement interroger étouffer dans le dos. Et d'accord, donc ça va être des jetons FC m. Ensuite, nous allons pour le jeton actuel, et comme un enfant, nous allons déverser l'utilisateur de la porte d'objet. I d I d. Off utilisateur actuel. D' accord. Parfait. Maintenant, faisant défiler la documentation vers le bas, je peux voir que le jeton peut également être actualisé, donc nous devons également gérer cela pour cela. Copions ce morceau de code et mettez-le à côté de ce bloc Hedge de grève comme ceci et ce propre jeton actualiser c'est un abonnement. Donc, cela signifie que nous devons nous désabonner à l'avenir pour cela à nouveau. Ici, Anti Chop en toi le fait que Pauvre Joe puisse rafraîchir Je suis sous-marin, ok ? Et on va verser sur jeton ou frais à ce terrible. Et ici en bas quand on se déconnecte, on va vérifier si on blague et se rafraîchit sur le sous-marin, puis on va appeler cette fonction à deux mois et le même mobile faire dans la fonction de nettoyage. Ok, bien. Maintenant, ce que nous devons faire ici, convertissons aussi à n'importe quoi. Fonction. Donc ici, on va mettre un chant, et en fait, la logique sera un peu la même, donc on peut facilement le copier et le placer ici comme ça. Ok, bien. Maintenant, nous sommes prêts à partir, mais parce que nous avons droit à la base de données sur le chemin que nous n'avons pas ajouté aux règles de sécurité, nous devons les modifier légèrement. Alors passons à la base de données, puis passons aux règles. Et ici, ajoutons une nouvelle entrée. Donc, laissez-moi copier l'état du disque comme ceci, alors je vais remplacer le statut par des jetons FC M. Alors on aura une blague. Et je D et mobile permettent Lire jamais. Parce que nous ne voulons permettre à personne d'accéder à nos jetons. Et pour le droit Onley, l'utilisateur, qui est actuellement Sinan est capable de stocker son propre jeton. Bon, donc on va vérifier si la nouvelle valeur de point de données. Donc, si l'utilisateur i d que nous écrivons à ce jeton, je t égale deux de vous. Je suis d' accord. Bien. Maintenant, savourons et ça a l'air bien. Maintenant, passons à notre application. Rafraîchissons. Ok, maintenant parfait. Ouvrons le conseil pour voir si nous n'avons pas d'avertissement. Ok, on obtient l'éditeur True. Était toking, n' ont pas pu enregistrer le service worker par défaut. Ok, donc c'est bien. Et parce que nous n'avons pas encore de technicien, nous obtenons cette entrée. C' est bon, mais cette erreur dit que cela fonctionne. Maintenant, engageons nos changements. Et dans la prochaine vidéo, nous allons mettre en place un travailleur de service. Alors versons, arrivons à tout et vérifions quel genre d'autres à recevoir. Déclaration inattendue du conseil. Ok, c'est bien. Allons nous engager. Et disons éditer la messagerie Firebase et stocker le jeton utilisateur étouffant dans la base de données. Parfait. Rendez-vous dans la prochaine 149. Ajouter des services à des employés: Hé, là. Dans cette vidéo, nous allons continuer à configurer la messagerie cloud Firebase et nous allons mettre en place un technicien . J' ai donc déjà navigué vers la documentation Firebase, puis j'ai choisi les messages reçus. Donc, dans cette section, je peux lire et vous pouvez lire plus sur les messages de premier plan et d'arrière-plan, mais nous sommes intéressés par le fichier de service worker. Donc, n'oublions pas notre code et la première chose que nous allons faire, mais va effectivement attraper les règles que nous avons créées dans la vidéo précédente avec des jetons FC M. Donc, copions tout cela, puis allez aux imbéciles de base de données Jason et Collez tous ici maintenant sur le service worker. Donc, comme vous pouvez le voir, c'est en fait le code du travailleur de service. Appelons le soit-il. Et dans le dossier public, créons un nouveau fichier firebase service de messagerie Worker doggy s. Donc, il doit correspondre à ce nom de fichier. C' est très important parce que c'est le nom qui sera reconnu par la base de feu comme la pourriture . Maintenant, allons coller tout ce que nous avons ici et nous pouvons vraiment le faire. Tous ces commentaires comme ça, alors nous n'avons pas besoin du message. Incroyable. Et aussi, désactivons es lint pour le fichier entier. Ok, bien. Maintenant, pour ces conflits ici, nous devons initialiser notre conflit que nous initialisons dans notre application. Alors ouvrons la base de feu Dodgy. Oui. Et nous allons juste copier cet objet et le mettre ici afin qu'il initialise firebase sdk dans service worker. Et nous devons également nous assurer que la version que nous importons ici doit correspondre à notre version sdk à l'intérieur du paquet Jason. Alors ouvrons ça. Et ici, nous avons 7.15 maintenant espérons dans le travailleur de service, il a 7.15. C' est OK Maintenant, sauvegardons ça. Et je dirige déjà l'ab. Revenons maintenant à l'APP. Laissez-moi le rafraîchir maintenant, Comme vous pouvez le voir à l'intérieur du conseil, je n'ai pas d'avertissements du tout, donc naviguons vers notre base de données. Et comme vous pouvez le voir maintenant j'ai des jetons FC m ici. Si je l'ouvre, j'ai cet utilisateur assez long que j'ai d jeton et que j'ai mon utilisateur i d et c'est en fait avant de valider nos changements parce que nous utilisons un nouveau service worker avec firebase messagerie cloud à l'intérieur. En fait, nous n'avons pas besoin de service worker par créer app de réaction. Donc, ce que j'ai proposé de faire à l'avenir, nous en aurons besoin. L' hôte local est-il précieux ? Donc, copions-le d'ici et mettons-le dans les aides comme ça et exportons d'ici . Maintenant, sauvegardons et supprimons le service, fichier de travail et à l'intérieur après GS ou à l'intérieur des togs d'index. Supprimons ces commentaires. Nous n'en avons plus besoin, et maintenant nous pouvons engager nos changements. Donc encore une fois, nous allons à tout et puis nous engageons. Et disons à lui, travailleur de service sur ce dit Parfait, à la prochaine. 150. Configurer des fonctions Cloud et la version de Node (NVM): Hé, là. Dans cette vidéo, nous allons configurer des fonctions cloud à l'intérieur de notre projet firebase. Allons-y. Revenons au code V. Ouvrons le terminal. Et ici, nous avons seulement besoin de taper base de feu. Vous avez besoin de fonctions. Ensuite, il nous amènera avec quelques questions. Allons frapper. Oui. Ensuite, choisissons Javascript. Puis quatre ans Lind, sélectionnons. Oui, et installons toutes les dépendances. Ok, bien. Si nous regardons à l'intérieur des fonctions, quelques fichiers ont été créés pour nous. Oui, Lynn RC avec un conflit déjà prédéfini. Ne le mortifions pas. Ensuite, nous avons obtenu ignorer Index Dodgy s et emballé Jason, Donc index dot gs dans les fonctions cloud est un point d'entrée des togs d'index. Fichier RealAge pour exporter des fonctions cloud distinctes qui seront déployées séparément. Ok, à l'intérieur du vélo. C' est Jason. Ici, nous pouvons trouver quelques dépendances. Donc oui, Lind et aussi firebase admin et fonctions. Ces deux paquets nous permettent d'accéder à la base de feu à partir du backend et nous pouvons aussi trouver quelques scripts. Définir ici servir à réellement Ron fonctions émulateur dans l'environnement local que nous avons quelque chose appelé Shell et il est firebase shell pour tester nos fonctions et aussi nous avons des journaux et d'autres choses telles que déployer et démarrer pour le script de démarrage . Puisque nous allons tester nos fonctions localement, j'ai proposé à Ron de servir à la place de Shell. Alors mettons-le servir et sauvegardons notre dossier. Et aussi parce que nous allons accéder à notre base de données localement et par base de pompiers. Il est reconnu comme un environnement non fiable. Nous devons fournir une sorte d'authentification ou d'informations d'identification pour le faire fonctionner. Donc, pour cela, nous devons revenir à notre tableau de bord. Ensuite, nous devons aller aux paramètres du projet et aller aux comptes de service à partir d'ici. Nous n'avons pas besoin de baisser la nouvelle clé privée. Alors créons un. Ça nous donnera un dossier Jason. Ouvrons et copions le contenu. Revenons au code. Et ici à l'intérieur des fonctions, créons un nouveau compte de service de fichiers, fait Jason et mettons tout ce que nous avons Koppett. Maintenant, s'il vous plaît assurez-vous d'ajouter ce fichier pour obtenir l'ignorer. C' est très important. Donc, ici, nous ajoutons le compte de service que Jason, donc ce fichier ne doit pas être disponible publiquement. Ce n'est que pour nous, pour le développement local. Ok, bien. Maintenant, si nous ouvrons à nouveau les comptes de service ici, nous pouvons trouver un petit extrait de code, alors copions-le et ouvrons le point d'index Js. Donc, ici, nous avons des fonctions en haut et des fonctions firebase. Mettons-le comme ça. Et nous allons également attrapé l'administrateur et remplacer VARS par constante Good. Maintenant, nous devons spécifier un chemin de compte de service qui est celui-ci, puis le mettre à l'intérieur, admin initialiser quand nous utilisons des fonctions cloud. Avant de pouvoir faire quoi que ce soit, nous devons initialiser l'administrateur firebase comme désactivé et pour le développement local, nous devons l'initialiser comme ça afin d'accéder aux données réelles afin d'accéder à la base de données riel . C' est fondamentalement ça. Cependant, il y a une chose importante pour les fonctions cloud. Si on ouvre le paquet du Jason, on a confiné les moteurs. Nœud huit spécifie. Le fait est que les fonctions cloud firebase sont supportées dans Lee deux versions aucune GS, soit huit ou 10 et récemment ils ont abandonné le support pour la version de nœud huit complètement. Les fonctions cloud firebase sont désormais disponibles sans version SIG. Ted, ça pourrait être un petit problème en ce moment. Nous n'utilisons pas Js version 12 et nous devons gérer nos fonctions cloud avec la note version 10. Pour cela, nous devons basculer entre différentes versions de Jess. Pour cela, nous n'avons pas besoin de réduire les logiciels supplémentaires, qui s'appelle No Version manager. C' est un logiciel qui nous permet de basculer entre différentes versions. Pas de GS dans une seule commande. D' accord, allons à Google. Et puis nous allons juste taper et VM qui Allons à noter le gestionnaire de version sur le get hop. Et ce dépôt est sur lee pour les utilisateurs Linux et Mac OS. Veuillez suivre ce tutoriel et installer et VM sur votre machine. Si vous venez de fenêtres vers le bas, faites défiler vers le bas jusqu'à deux fenêtres partie Et ici nous limitons l'envie M pour les fenêtres, puis cliquez sur le téléchargement. Maintenant, vous allez finir sur cette page, puis cliquez sur N V M. Configurer le fichier zip et puis installer l'envie M. Okay, Après que vous avez envie M installé sur votre machine, allez à votre terminal, puis appelez simplement envy M version ou envier em. Version du tableau de bord. D' accord. Et la version VM après cela afin d'installer Non, juste la version 10. Laissez-moi exécuter ma commande et la liste M. Il listera toutes mes versions sans GS installées localement. Donc, pour les fonctions cloud, nous avons besoin d'une version hors 10e. Alors appelons envy M install, puis 10.20 point un. Après cette version de note, Manager installera et principalement tout pour vous. Vous n'avez pas besoin de vous soucier de quoi que ce soit, puis de basculer entre différentes versions hors tension. Pas de GS affaiblir, il suffit de taper et VM utilisée. Disons 8 16 à. Et maintenant, j'utilise cette version hors note. Et si je tape et VM utilise 10.20 point un maintenant, j'utilise cette version. C' est ça. C' est ainsi que nous pouvons gérer différentes versions hors. Non Gs, s'il vous plaît assurez-vous que celui-ci est installé car sinon, si vous n'avez pas de version 10 localement installée, nous ne serons pas en mesure d'exécuter vos fonctions localement. Bon, maintenant, pour finir cette vidéo, engageons nos changements. Alors oublions tout. Ensuite, obtenez commit et disons, configurez des fonctions cloud avec envie. M parfait. Rendez-vous dans la prochaine 151. Flux de notifications dans notre application - Types de fonctions Cloud: bonjour Dans cette vidéo, je veux expliquer rapidement le flux d'envoi d'une notification. Tout d'abord, dans les données, s'il vous plaît. Pour chaque pièce, il y aura un autre champ appelé utilisateurs FC M. Ce sera dans les idées utilisateur Rafe qui recevront des notifications sur le dos. Et nous allons créer une fonction cloud qui appellera à partir de notre application de chat comme une définition admin deux, ainsi que la demande que nous enverrons à partir du nom puissant et message de notification. Ensuite, en utilisant Crew my D, nous obtiendrons des ID d'utilisateur qui reçoivent des notifications en utilisant leurs idées. Nous allons interroger leurs jetons de périphérique, puis envoyer une notification en utilisant les jetons de's avant commencer. Je veux juste souligner qu'il existe trois types différents de fonctions cloud. Gullible sur demande et les déclencheurs sur demande fonctions ont leur propre euro envoyer dans une demande. L' utilisation de l'euro est le seul moyen d'accéder à la fonction. Appeler un intestin Les fonctions ont également leur propre neurale, mais dans le client firebase comme désintégration, celui que nous utilisons dans le navigateur, il existe une méthode spéciale pour appeler ce type de fonction par son nom, pas par euro et aussi appelable analysent et valident automatiquement les jetons JWT utilisateur. Firebase utilise des jetons JWT pour autoriser les utilisateurs, et nous ne les traitons pas directement. fonctions de déclenchement n'ont pas leur propre neuronal, et ils répondent sur Lee deux événements de document de base de données différents tels que propre création sur mise à jour et possédée Illit. Nous pourrions spécifier que chaque fois qu'un document est créé sur ce chemin, cette fonction cloud s'exécutera toujours. Dans notre cas, nous avons seulement besoin d'un type de fonctions crédules, faciles d'accès et l'utilisateur hors de sa protestation pour nous. Maintenant, tu as mieux idée de ce qu'on va faire. se voit dans la prochaine. 152. Créer une fonction Cloud de FCM: sanctifiée. Dans cette vidéo, nous allons créer notre propre fonction labourée pour envoyer des messages de notification. Allons-y. Tout d'abord, ouvrons ces codes que allons aller aux fonctions, index togs et, peu commun, cette fonction de cloud de fold qui nous trouve déjà assez pour nous. Sauvegardons ce fichier. Ensuite, ouvrons le terminal et naviguons vers le dossier Functions dans les paquets et nous avons NPM exécuter script de démarrage. Alors allons le faire et regardons ce qui va se passer ? Donc, tout d'abord, il ne réduira pas tous les émulateurs nécessaires pour différents services hors cheminée, comme AM un leader pour les fonctions. C' est très bien. Après cela, vous verrez ce genre de message, et il dira que la première fonction http est initialisée et disponible sur ces Ural et nous avons aussi cet hôte local pour 1000 fonctions. Alors copions celui-là. Allons dans le navigateur et ouvrons ce rural pour vérifier ce qui va se passer. C' est comme un tableau de bord où nous contrôlons les services que nous avons développés localement. Donc, pour l'instant, nous n'avons que des fonctions. Suis un leader et il est disponible sur ces ports, et si nous allons aux journaux, nous pouvons le voir. Maintenant, nous avons une fonction http initialisée afin que nous puissions copier cette année. L Et puis nous pouvons accéder à cette fonction. Et de la réponse, nous pouvons voir bonjour de la base de pompiers. C' est ce que nous avons à l'intérieur de cette fonction. Defiant. Alors, c'est ça. C' est ce que fonctionne notre cloud. Mais maintenant, arrêtons l'émulateur. On n'en a pas besoin. Et supprimons aussi ce genre de fonction parce que c'est une fonction à deux fois et nous n'en avons pas besoin. Mais avant de le faire, je veux juste souligner que chaque fonction qui a exporté à partir d'oci indexé oui, est traitée comme une fonction. Donc, ce qu'il va faire à l'intérieur des fonctions. Nous allons créer un nouveau dossier appelé un ser C Inside. Nous allons verser un nouveau fichier FC M doggy s De là, nous allons exporter notre fonction et ensuite nous l'exporterons d'ici. Ok, alors gardons-le tel qu'il est. Peut-être que nous allons nommer cette fonction à l'avance. Disons envoyer FC M. Et pour l'instant, commentons-le. D' accord. Bien. Maintenant à l'intérieur de FC M. Importons les fonctions et admin. Et à partir d'ici, nous allons exporter notre première fonction. Va le nommer. Exportations exportations sable fc M. Donc, nous devons appeler des fonctions. Ensuite, nous devons verser https, et ensuite nous devons mettre sur appel. Donc, cette fonction qui vient par défaut était sur demande type de fonction qu'ils veulent, mais nous allons créer va être sur appel. Ok, donc ceci sur la fonction froide reçoit deux arguments. Donc, si nous cependant, nous pouvons voir les données et les contacts, Donc les données sont ces données que nous transmettons avec la demande et nous pouvons y accéder dans le contexte contient des informations de contexte telles que les informations utilisateur et utilisateur JWT Token. Vas-y. Maintenant. Puisque nous exportons cette fonction à partir du fichier de FC M Dodgy, nous pouvons importer à l'intérieur des togs d'index. Donc ici, nous pouvons taper Const. Laissez-moi taper f equals require que nous allons référencer le dossier source et puis f c M g s. Donc, à partir du dysfonctionnement, nous exportons et FC M Maintenant, nous devons le détruire. Et puis à partir de cet index, on va l'exporter comme ça. Donc, les exportations de sable FC M va être envoyé fonction FC M que nous obtenons à partir du fichier FC M. D' accord. Et nous avons cet avertissement disant attendu une ligne vide. Ok, laisse-moi le dire comme ça. Maintenant, nous devons écrire notre fonction. D' accord, donc tout d'abord, nous devons vérifier si notre utilisateur est présent. Si la personne qui essaie d'accéder à cette fonction est réellement authentifiée, nous avons déjà l'utilisateur analysé et validé par ce type de fonction, qui est coupable. Maintenant, nous devons seulement vérifier si l'utilisateur est réellement analysé. Donc, si l'utilisateur n'est pas analysé, cela signifie que l'utilisateur n'est pas présent. Ok, pour cela, nous pouvons créer une fonction d'aide ici que nous nommerons check if off check. Si authentifiés à l'intérieur de cette fonction, nous allons passer le contexte, et ensuite nous allons l'appeler de notre fonction comme ceci. Vérifie si c'est désactivé et on va passer le contexte. Et à partir de cette vérification si elle est désactivée, nous ferons la prochaine. Si l'authentification par point de contexte, il a hors objet à l'intérieur. Donc, si je verse le contexte et ensuite dar ici confiné. Donc, si ce contexte n'est pas désactivé est indéfini. Donc si on n'a pas d'objet, alors on va lancer de nouvelles fonctions. Dar Https. Erreur Http Donc, c'est Paschall. Disons que la syntaxe qui donnera une erreur pour refuser notre raison sera authentifiée et message sera. Vous devez être connecté. Ok, bien. Ici, nous avons fini. Notre prochaine étape consiste à accéder aux données que nous obtenons de la demande. Il est disponible sous cet objet de données. Par ici. Il est déjà analysé pour nous. Donc, à partir de cet objet, nous pouvons détruire les valeurs suivantes, nous allons poncer le Tchad. J' ai ensuite titre de la salle ou laisse le titre du message. Et ensuite, on va envoyer un message. Ok, bien. Maintenant, nous devons obtenir nos données de chambre en utilisant cette chaise. Ok, donc à partir d'ici, on va avoir un instantané de la chambre. Ok, donc à partir d'ici, donc à partir d'ici, Et maintenant, nous avons besoin d'y accéder. Notre base de données est accessible à partir de l'environnement de serveur en utilisant firebase admin comme désactivé. Donc ici en haut, mettons une nouvelle base de données viable, et ensuite on va appeler la base de données d'administration. L' utilisation de la base de données à partir de l'environnement du serveur est très similaire à la façon dont nous y accédons depuis Ok, donc maintenant on peut appeler la base de données, puis on met rude, et maintenant on doit accéder à partir des données. Donc nous avons passé les chambres que la salle de slash I D. qui va être chat, i d. Dans notre cas, il renvoie la promesse. C' est pour ça qu'on peut mettre de côté ici. Et mettons aussi un évier pour le rendre valide. Donc, après que nous ayons référence, nous appelons une fois et puis nous mauvaise valeur. Maintenant, nous obtenons un instantané de la chambre, puis nous pouvons faire le simple contrôle si le rivage de la chambre existe. Donc si ça n'existe pas, alors on va retourner Faux. D' accord. À partir de cette fonction, il enverra juste une fausse requête au client. Lorsque nous appellerons cette fonction, alors nous devons obtenir des données de chambre pour obtenir un identifiant d'utilisateur. Donc pour ça, allons les données de la salle d'audience et ensuite nous allons enregistrer à partir de la valeur de la porte instantanée. Maintenant, nous devons vérifier si notre utilisateur actuel est un administrateur. Donc, nous pouvons réellement envoyer le message parce que cette fonction peut être appelée par un utilisateur à l'intérieur Tchad. Mais cet utilisateur n'est pas un administrateur, et donc cet utilisateur n'est pas en mesure d'envoyer le message. Ok pour cela, nous devons vérifier contre l'utilisateur admet donc d'abord, Comme vous vous souvenez, tous nos une course dans les travaux sont stockés sont des objets, donc nous devons les transformer en tableaux javascript normaux pour cela à l'intérieur aidants. Nous avons déjà un dysfonctionnement transformé en tableau. Copions-le d'ici et mets-le ici en bas. Maintenant, nous pouvons créer une fonction d'aide pour vérifier si l'utilisateur peut réellement envoyer le message. Nous pouvons à nouveau créer une nouvelle fonction en bas, et nous allons le nommer. Vérifiez si elle est autorisée. Et encore une fois, il recevra le contexte. Et aussi il recevra chat admet. D' accord. Et ici, nous ferons presque la même vérification. Donc, si non, disons Chad, ajouter Mons dog inclut le contexte off, et puis vous i d. Donc, si l'utilisateur qui essaie d'accéder à cette fonction cloud est dans la liste de Chad Adnan. Donc si ce n'est pas le cas, alors encore une fois nous allons envoyer exactement le même message ici. Et peut-être qu'on va dire « accès restreint ». D' accord, bien. Maintenant, nous pouvons appeler cette fonction ici. Vérifiez si autorisé, nous allons passer le contexte à l'intérieur, ainsi que transformer en données de salle de tableau admet. Ok, parfait. Notre prochaine étape consiste à obtenir des idées d'utilisateur réelles qui recevront des notifications. Pour ça. Nous allons mettre un nouveau précieux utilisateurs FC M. Et encore une fois, on va appeler transformation en tableau, et on va mettre les utilisateurs de données de salle FC M. Ok, maintenant nous allons obtenir tous les jetons utilisateur. Pour ça. J' ai proposé de créer à nouveau une fonction d'assistance que nous appellerons les jetons d'utilisateur get. Alors faisons défiler vers le bas. Et ici, nous allons créer une nouvelle fonction, obtenir des jetons utilisateur afin qu'il reçoive l'utilisateur I D. Et il obtiendra tous les jetons utilisateur. Donc, nous allons appeler nos méthodes de données, et nous recevrons des jetons d'utilisateur. Instantané. Ok, donc ça va être une fonction innocente et la logique sera la prochaine. Donc on va appeler la référence de la base de données. Ensuite, nous allons référencer les jetons FC M. Ensuite, nous allons commander par valeur, et nous allons mettre égal à l'utilisateur I d. Et puis pour obtenir de vieux jetons, nous appellerons une seule valeur. Ok, parfait. Et n'oubliez pas de mettre une attente au début. Maintenant, nous avons l'utilisateur jeton snap shirt. Donc, si nous n'avons pas de jetons utilisateur, snap short a Children. Donc, ici, nous vérifions si réellement cet utilisateur particulier a des jetons. Si cet utilisateur n'a pas d'enfants, cela signifie que cet utilisateur n'a pas de jetons. Donc on peut simplement retourner un vide, Eric. Donc, si l'utilisateur a des jetons, alors nous appelons les clés de point d'objet, puis la valeur de point d'instantané de jeton utilisateur. Parce que, comme vous vous en souvenez, nous stockons notre élévation A dans les chemins de fer comme objets. Et en appelant cet objet de clés, nous obtenons les jetons utilisateur réels. Ok, bien. Maintenant, nous pouvons appeler cela get tokens utilisateur de notre fonction cloud et pour papa, parce que nous avons besoin d'obtenir des jetons utilisateur pour plusieurs utilisateurs, nous devons utiliser Promise que tout pour le rendre aussi optimisé que possible. OK pour ça Ici, nous allons créer un nouvel utilisateur précieux. Des jetons, des promesses. Et ce que nous ferons. Nous allons cartographier chaque utilisateur FC M. Nous allons la cartographier. Donc, chaque utilisateur i d va être mappé pour obtenir des jetons utilisateur promis. Et à l'intérieur de celui-ci aura cet utilisateur je d. Ok, bien. Maintenant, nous allons recevoir notre résultat. Ou disons que nous allons recevoir le résultat des jetons utilisateur et que nous allons appeler, attendre promesse. Tous les jetons utilisateur ne promettent pas, mais la chose est que la promesse que tous nous renvoie un tableau de résultats comme ça et nos jetons utilisateur promesses, donc chaque get user tokens nous renvoie un tableau hors jetons utilisateur. Donc, de cette façon, nous finirons avec un tableau imbriqué comme ça. Donc, pour le premier utilisateur, nous aurons ces jetons. Donc, pour la seconde, nous pouvons les obtenir et ainsi de suite. Donc pour éviter ça, nous devons aplatir notre Eric. Pour cela, nous pouvons appeler la méthode de réduction de points disponible sur une course et aplatir la zone. D' accord. Pour cela, nous allons appeler le résultat des jetons utilisateur puis réduit, donc il recevra une fonction de rappel. Et le deuxième argument est la valeur initiale. Donc le puits initial va être un tableau vide. Et cette utilisation de la doctrine en premier est la valeur de l'accumulateur, qui va être, disons, accumulé, Filkins. Et le second va être la valeur actuelle, qui est des jetons utilisateur. Donc, cette fonction sera exécutée pour chaque jeton utilisateur pour chaque élément. OK, et ici nous allons simplement fusionner. Ces deux effacent à l'aide de l'opérateur de propagation. Donc nous allons appeler des jetons d'accumulateur, plus des jetons d'utilisateur. Donc, de cette façon, nous allons finir avec un plat et un tableau où chaque jeton comme est une valeur normale . Ok, vas-y maintenant. Continuons, alors nous allons vérifier si la longueur des points de jetons est égale à zéro qui reviendra de cette fonction parce que nous n'avons pas de jetons à envoyer deux. Et comment la question est que nous avons des jetons, comment nous sommes capables d'envoyer nos messages pour que nous puissions naviguer à partir de sa documentation. Donc c'est celui que j'ai des vidéos précédentes. Mais si je vais à l'environnement de serveur sur la gauche et ensuite construit des requêtes envoyées ici, vous pouvez trouver plusieurs façons. Comment puis-je envoyer un message pour spécifier l'appareil ? Cependant, nous avons besoin d'un seul qui est envoyé des messages à plusieurs appareils parce que nous avons plusieurs jetons et nous avons un message à envoyer. Laisse-moi juste copier le message, en fait, et je vais le mettre ici, et je vais l'appeler message F c M. Donc, j'étais les données ne ressembleront pas à ceci parce que chaque message peut également avoir une structure différente . Il peut avoir ce type d'objet avec sujet de données et les jetons ont jamais Ceci est Onley pour les notifications personnalisées. Nous n'avons besoin de rien de coutume. Nous avons besoin d'une notification normale pour cela. Nous devons modifier légèrement cet objet. Donc, au lieu de données, nous allons mauvais objet de notification à l'intérieur. Et cet objet de notification a deux clés, qui est le titre et aussi le corps, qui est le message de notification réel. Donc pour le corps, nous allons voir le message pacify que nous recevons de l'objet de données à l'intérieur de cette fonction cloud. Alors mettons un message. Et pour le titre, nous pouvons verser notre titre personnalisé, qui va être intitulé que nous avons envoyé avec des demandes et aussi le nom de la chambre. Ok, alors on va pauvre titre de chambre. Alors mettons le titre, puis à partir du nom de la porte de données. Donc, de cette façon, nous aurons le titre et le nom à côté de lui. Mais mettons peut-être le nom de la chambre dans le parent facilite donc il semble plus esthétique. Ok, vas-y. Maintenant, jetons un coup d'oeil sur la façon dont nous pouvons envoyer ça. Nous pouvons utiliser la messagerie admin point fait, ladite multidiffusion, puis message. Ok, bien. Donc, nous devons utiliser la messagerie par point admin. Créons disponible ici appelé Messagerie sur. Appelons la messagerie d'administrateur. D' accord. Parfait. Maintenant, nous pouvons réellement copier ce code. Permettez-moi de copier seulement la première ligne parce qu'on n'utilisera pas les promesses au Texas. Nous allons utiliser une réflexion loin. Laisse-moi appeler la messagerie d'administration const. Je vais le remplacer par la messagerie, puis envoyer du multi cast et nous allons envoyer un message FC M, et nous allons le mettre dans un véritable, qui appelé Batch répond, et ensuite nous attendrons cette commande. Ok, bien. Maintenant, le fait est que les jetons peuvent être invalides ou les jetons peuvent expirer parce que, comme vous vous en souvenez, le jeton de déclin peut être actualisé. Ainsi, lorsque le jeton est actualisé, le jeton précédent n'est plus valide. C' est donc le cas lorsque nous avons échoué les jetons. Donc, nous pouvons réellement utiliser cet extrait de code pour détecter quels jetons échouent, puis nous pouvons les livrer à partir de la base de données. Laissez-moi copier cet extrait de code, et je peux l'appeler comme ceci, donc nous aurons beaucoup de réponses et nous vérifions si beaucoup répond. Le nombre d'échecs est supérieur à zéro que pour chaque réponse de scones beurrés. Nous regardons les réponses et nous vérifions si nos réponses ont échoué. C' est donc le cas. Nous avons tous les jetons échoués poussés à ce taux de jetons échoué. Cependant, nous voulons faire quelque chose avec eux. C' est vrai ? Nous voulons également effacer notre base de données. Pour cela, tirons ces jetons échoués ici vers le haut, et nous ferons la prochaine chose. Nous allons donc mettre à jour nos jetons échoués. Avec cette poussée à l'intérieur, nous allons enlever cette serrure consul. Et maintenant que nous avons tous les jetons échoués, nous pouvons réellement appeler nos méthodes de données jusqu'à ce que tous ces jetons ici à la fin, nous allons créer un nouveau tableau de promesses que nous allons exécuter avec un point de promesse tout suite parce que nous pouvons jusqu'à ce qu'il plusieurs jetons de la base de données. Pour cela, nous pouvons créer supprimer des promesses précieuses. Et nous allons cartographier tous les jetons échoués à promettre donc jetons échoué carte de points. Ensuite, nous aurons un jeton, et nous allons appeler le projet de point de base de données. Ensuite, on va appeler le FC M Jokinen que Tokcan, puis on a enlevé la porte. Ok, parfait. Donc, de cette façon, nous allons finir avec un rayon off, supprimer les promesses, et à la toute fin de notre fonction cloud, nous pouvons appeler promesse de retour pensée tout et nous allons lui verser des promesses, puis au cas où hors de toute erreur, nous pouvons utiliser réellement dot catch Syntex ici au lieu d'un think wait. Parce que c'est notre dernière opération et il semble plus lisible dans ce cas. Donc, dans le cas d'un autre, nous allons retourner le message de point d'erreur. Ok, parfait. Alors, c'est ça. C' est notre fonction, et c'est ainsi que nous allons la gérer. Je suppose que c'est tout pour cette vidéo. Et dans la prochaine vidéo, nous allons commencer à mettre à jour notre client. Nous allons tester cette fonction et ce que j'ai proposé de faire. Comme vous pouvez le voir dans les fichiers. Ici, nous vous avons I d Bach. Ajoutons ce fichier pour être ignoré. Vous je ou peut-être que nous allons ajouter tous les fichiers de look pour être ignoré. On n'en a pas besoin. Ok, cool. Et nous avons cet avertissement disant que devrait revenir à valeur. Ok, peut-être que nous pouvons mettre à jour notre peluches oui pour que nous puissions mettre un rendement cohérent et cohérent allait être nul. D' accord. Et on dirait qu'on a déjà quelque part ici. Mettons-le à zéro. Et nous allons le livrer ici pour éviter ce genre d'avertissement à l'intérieur de notre dossier et aussi pour l'Islam , Darcy, parce que nous avons plusieurs fichiers dans notre projet. Un dans le dossier racine et un ici. Nous voulons également nous assurer que nous ajoutons l'option route égale deux. Vrai. Donc maintenant, il est reconnu par décodage. Ok, parfait. Donc pour l'instant, nous avons fini. Engageons nos changements. Donc, ne revenons jamais au dossier racine. Ensuite, appelons, obtenez tout et puis obtenez commit et disons éditer la fonction cloud pour envoyer des messages FC M . Parfait. se voit dans la prochaine. 153. Correction des erreurs de fonction Cloud: Hé, là. Dans la vidéo précédente, lorsque nous avons créé la fonction FC M Cloud envoyé, j'ai fait quelques erreurs d'orthographe que je veux corriger dans cette vidéo. La première erreur sous-tend les données de la pièce. Nous voulons obtenir des données à partir de la valeur du point d'instantané de la pièce, alors corrigeons-le. Teoh chambre instantané valeur point, puis la deuxième erreur est à l'intérieur des utilisateurs de demi-cm. Nous voulons transformer nos données des utilisateurs DAR FC M au lieu de l'utilisateur FC M. Ensuite, si nous faisons défiler vers le bas jusqu'à FC un objet de message ici. Nous avons utilisé des jetons d'enregistrement, et cette erreur provient du rythme de copie de la documentation Firebase. Donc, retirez-le et mettons des jetons et le même mobile font à l'intérieur des jetons d'échec Ne poussez pas parce que nous voulons nous assurer que nous obtenons des jetons de nos jetons, un viol. Alors, si nous faisons défiler vers le bas, le tout dernier sera jamais. Vous devez être connecté et c'est tout. Tout le reste a l'air bien. Maintenant. Sauvegardons le fichier et validons nos modifications. Oublions tout, puis commettons et disons corriger les erreurs d'orthographe. PDG parfait dans le prochain 154. Envoi et afficher des notifications à l'aide de fonctions Cloud: Hé, là. Dans cette vidéo, nous allons travailler avec des clients et nous allons créer une fenêtre de modèle à partir de laquelle nous allons envoyer une requête à notre fonction cloud puis envoyer une notification à Absi. Um, les utilisateurs. Allons-y, revenons au code B. Et d'abord, ouvrons le feu Base Duchy s et importons le paquet de fonctions. Donc, en haut, je vais verser des fonctions de barre oblique Firebase d'importation. Maintenant, saluons une nouvelle instance. Donc, exportez les fonctions const app dar fonctions. Et quand il a ouvert, Parenti dit que vous pouvez voir une région ici. La chose avec les fonctions cloud qu'ils sont disponibles dans plusieurs régions par défaut. Ils sont disponibles dans la région U. S Est. Pour les utilisateurs européens, ce n'est pas génial. C' est pourquoi nous devons changer la région de notre fonction. Pour cela, naviguons vers FC M Dodgy s à l'endroit où nous créons cette fonction. Et à l'intérieur de cette définition, ajoutons une autre chaîne à partir d'une région et à l'intérieur de la bulle spécifié que cette fonction fonctionnera sur la région Europe Ouest trois. Vous pouvez spécifier la région que vous souhaitez. Ok, donc Europe Ouest 3 Et maintenant, quand nous initialisons cette instance, nous devons passer Europe Ouest 3 pour qu'elle fonctionne. Et aussi lorsque nous allons utiliser cette instance de fonctions à l'intérieur de notre client, il essaiera d'accéder à la fonction de cloud rial qui est déjà déployée. Mais pour le développement local, ce n'est pas bon. C' est pourquoi nous devons ici au bas de la vérification Si nous sommes actuellement à l'intérieur du développement local alors nous allons utiliser des fonctions. Amma plus tard que nous courons avec MP Enron, commencer à l'intérieur du dossier Functions. Donc ici, si nous allons vérifier si est hôte local et est hôte local précédemment dans les vidéos Nous l'avons exporté à partir d'ici nous avons extrait Ceci est l'hôte local précieux à partir du fichier de travail de service créé par Creek React app et maintenant nous allons l'utiliser. Ok , l'hôte local aussi. Importons ça. Donc si c'est le cas, alors on va dire des fonctions, utiliser des fonctions. EMLeader et nous devons spécifier l'Europe pour cela. Allons dans le dossier Functions à l'intérieur de notre terminal. Et là, nous allons Jive et PM Ron commencer et voyons la sortie. D' accord. Comme vous pouvez le voir, notre émulateur de fonctions fonctionne sur l'hôte local 5001. Nous devons donc spécifier ici http que l'hôte local et 5001. Bon maintenant, nous sommes tous prêts avec notre s délabrés. Maintenant, créons le Moto réel. Alors allons à la fenêtre de chat Top. Et dans ce dossier, nous allons créer n'importe quel fichier que nous nommerons envoyé FC M Bt dans Moto gs. Et en fait, nous allons copier et coller le code de Nous allons naviguer pour créer la salle Beat et Moto Donc nous allons appeler être tout ça et le placer ici. Maintenant, commençons à remplacer les choses. Donc, tout d'abord, nous allons le renommer pour envoyer FC M Bt et modèle et utilisons réellement ce composant à l'intérieur des togs d' index à l'intérieur du dossier supérieur. Donc ici, au lieu de cela à faire, nous allons demander si notre utilisateur est administrateur, alors s'il vous plaît nous montrer. Envoyer FC M Bt et Moto. D' accord, bien. Maintenant, commençons à remplacer le composant. D' abord, nous allons vérifier notre mobile pour notre formulaire, donc nous n'aurons pas de nom et de description. Nous aurons le titre et le message que nous enverrons à notre fonction cloud donc titre et message et est nécessaire. On va dire que le titre est requis et que le corps du message est requis. Ok, bien. Maintenant, nous allons supprimer cette importation que notre formulaire initial va être intitulé et message maintenant nous allons importer utiliser l'état motile à nouveau. Bon, donc nous avons la forme. La valeur est en train de charger pour lui. Rugueux sur soumettre. Ok, on va le changer un peu. Donc, en fait, supprimons cette partie et gardez-la comme ça. Maintenant, ici, ici, à l'intérieur de Js 6. On va enlever ça, Steve complètement. Nous allons supprimer ce nom de classe, et nous le laisserons comme fragment de réaction. Donc, pour le bouton, nous allons spécifier l'apparence hors primaire et la taille va être très petite que ce sera pas un composant de bloc et une couleur. Gardez-le la couleur par défaut. Donc, pour que je puisse, on va préciser que je me suis conformé. Cast et nous dirons message de diffusion au lieu de envoyé FC M. Soyons un peu plus créatif. Donc pour le modèle, c'est bon. Changeons le titre pour envoyer la notification des utilisateurs de la salle Teoh que pour ce formulaire. Il semble bien pour le groupe de formulaires. On va le changer. Teoh Titre nom de contrôle de formulaire va être titre et les espaces réservés vont être entrer le titre du message que quatre description. On va le changer en message à nouveau. Il va être un élément de zone de texte de notre nom va être message. Ce nom doit correspondre à notre clé d'état, qui est le titre et le message. Bon, donc s'il vous plaît, titulaire doit être quelque chose comme et le message de notification. Ok, bien. Et pour ce bouton en bas. Donc apparence, primaire sur clic sur le bloc soumettre. Ok, ça a l'air bien. Maintenant, nous allons seulement changer le texte pour publier un message comme ça. Ok, bien. Maintenant, jetons un coup d'oeil au sommet. Nous avons une alerte inutile et aussi une importation Firebase nécessaire. Disons avec Revenons au Tchad. Et maintenant nous avons cette fenêtre morale, alors entrez un titre et un message. Bon, maintenant définissons la fonctionnalité. Alors, que va-t-il se passer sur Soumettre ? Nous devons envoyer une demande à notre fonction cloud. Et comme vous vous en souvenez, notre fonction cloud est une fonction appelable, et nous utilisons des fonctions comme désactivées. C' est pourquoi ça va être si facile à faire. Alors mettons le bloc d'essai kitsch ici. Mettons de côté est le chargement vers le haut comme ça donc à l'intérieur du bloc kitsch banal, nous allons faire la prochaine chose d'abord, nous allons créer n'importe quel FC M envoyé précieux et ensuite nous allons appeler les fonctions désactivées que nous importons de Firebase Dodgy s , alors on appellera https crédule. Et ici, nous devons spécifier le nom de la fonction que nous voulons appeler, donc c'est très important. Donc, à l'intérieur des togs d'index, nous exportons envoyer la fonction de nuage FC M. C' est son nom. Bon, alors copions-le. Et ici, nous allons spécifier que nous allons appeler la fonction FC M Cloud envoyé. Cette méthode https crédule, nous renvoie et vous fonction que nous avons besoin d'appeler afin d'envoyer effectivement une demande à la fonction cloud. Très bien, ce n'est pas la demande elle-même. Donc, en ce moment, nous devons appeler ou invoquer ate sable FC M avec des données que nous voulons passer à la fonction cloud. Et puis ces données seront disponibles ici sous ces données disponibles. Donc, ce que nous allons faire, nous allons appeler un poids que envoyé FC M. Et à l'intérieur, nous allons passer le chat I d. Comme vous vous souvenez, nous avons besoin de recevoir le titre et le message du Tchad I d. Donc, idée de chet, on doit d'abord l'avoir. Alors mettons ici et le top char i. D. Hughes programmes. OK, bien. Donc, nous avons vérifié I d et aussi nous avons besoin d'envoyer le titre et le message, qui est notre valeur de formulaire. Donc, nous pouvons simplement le répandre comme ceci à l'intérieur de cet objet, et maintenant il va envoyer la requête. Donc, à la fin, nous aurons dit est de charger ces bagatelles. Ensuite, nous appellerons la valeur de forme sat à la valeur initiale. Donc initiale pour et aussi on va fermer cette vitre moteur. Donc, en cas d'alerte ou de toute autre alerte, nous allons appeler alerte plutôt qu'à notre message et ensuite jamais ancrer avec l'idée Non. Sept secondes. Et aussi en cas de succès, nous allons spécifier des informations d'alerte et nous dirons notification. Le haricot a bien envoyé ? Ça a l'air génial. Maintenant, regardons, comme je peux le voir ici, je dois le déplacer vers le haut. Bon, naviguons. Allons au message de diffusion. Spécifions quelque chose de super et publions. Le message et la notification ont été envoyés. Maintenant, jetons un coup d'oeil. Si nous ouvrons notre terminal, nous pouvons voir qu'à l'intérieur de notre terminal droit où nous exécutons la fonction cloud, nous pouvons voir que l'exécution commence terminée, donc cela fonctionne réellement. Jetons un coup d'oeil à l'intérieur de notre conseil. On ne voit rien. Et peut-être essayons de l'envoyer encore une fois pour voir ce qui va se passer. Et ouvrons le robinet réseau. Alors j'ai dit le message. Ensuite, vous pouvez voir que la demande est envoyée à Host Chat local. Web up Europe était trois Sand FC um, ont jamais je vois que le résultat est faux. Et c'est parce que, comme vous vous en souvenez, à l'intérieur de notre fonction cloud, nous vérifions par rapport aux données de salle des utilisateurs FC M. Mais en ce moment, dans notre base de données, si nous ouvrons nos chambres, nous n'avons pas encore d'utilisateurs FC M. On doit le changer. Donc, naviguons pour créer la salle Bt et Moto et entendre ce que nous allons spécifier. Donc, pour les admets, nous allons utiliser aussi l'utilisateur actuel votre i d. Mais aussi, nous allons spécifier les utilisateurs FC um. Le premier administrateur. Le créateur de cette salle recevra également une notification par défaut. Alors copions-le comme ça. Disons que nous sommes et maintenant nous devons modifier le groupe existant, mais que nous allons d'abord copier notre utilisateur i d. à partir d'ici. Ensuite, nous allons cliquer sur ce signe plus et disons les utilisateurs FC M. Encore une fois, signe plus. Ajoutons notre propre utilisateur. Je d Et puis pour la valeur. Allons pour la vérité. Ensuite, nous ajoutons cette valeur. Maintenant, essayons de sabler le message une fois de plus, donc je vais dire quelque chose d'idiot. D' accord ? La notification a été envoyée. Si j'ai ouvert mon consul maintenant, je peux voir que je reçois un nouveau journal de consul, qui vient de Firebase Dodgy s. Et si j'ouvre ce fichier, je peux voir qu'il vient de ce message sur le message. Donc j'ai de la notification, j'ai corps et titre. Maintenant, la seule chose que je dois faire ici est d'afficher cette notification dans un environnement plus convivial . Attendez. Eh bien, ce sera assez facile à faire avec un toast ou un composant de notification qui vient de notre costume. Ce qu'on va faire, on va importer la notification en tant que toast de notre costume. Pourquoi ? J' utilise ici. Notification a un toast sur non notification car la notification est également disponible en tant qu' objet global de fenêtre à l'intérieur du navigateur. Donc ça peut être déroutant et on pourrait juste faire quelque chose. Donc juste pour nous assurer que nous utilisons un composant personnalisé, nous l'avons nommé dosé. Donc ici à l'intérieur sur le message. On va verser quelque chose comme, comme vous vous souvenez, on a une notification. Objet à l'intérieur, donc nous pouvons le détruire d'ici. Notification. Et puis nous appellerons à nouveau Nous détruirons Chur cette fois du titre et du corps de la notification . Maintenant, nous avons ces deux clés et nous allons appeler porte toast dans quatre. Ensuite, nous allons verser la description du titre et la description va être corps et vieux, donc la durée zéro. Donc, ce qu'il va faire, il sera cour et vous composant un composant de notification de notre joint avec ce titre avec ce corps, qui est la description. Gardez que nous avons besoin de passer par cette information, puis la durée est définie à zéro, sorte qu'elle ne se refermera jamais par elle-même. Nous devons aller manuellement et fermer cette notification. Bon, alors maintenant savourons et jetons un coup d'oeil. Donc, si je mets quelque chose comme un bas et alors c'est corps et publié nouveau message Maintenant, j'ai cette notification et c'est tout. Cependant, il y a une chose de plus cool à cela. Si je clique sur quelque chose comme ce message publié et quand je clique sur ce bouton , puis basculer rapidement entre les robinets. Maintenant, je vais recevoir cette notification. Plutôt cool, non ? Donc c'est ça. Et c'est comme ça que ça va marcher. Et tous les utilisateurs qui sont abonnés à ces messages diffusés les recevront sur leurs appareils. Soit il s'agit d'un PC, d'un appareil mobile ou de tout autre appareil à utiliser. Mais c'est ce que nous allons gérer dans la prochaine vidéo. Pour l'instant, on a fini ici. Engageons nos changements. Ouvrons notre terminal. Voici une bonne chose. Il nous donne un avertissement firebase disant que l'utilisation d'un index non spécifié. Donc, ajoutons réellement, et vous indexez à nos règles de base de données. Alors ouvrons ça. Et, comme vous pouvez le voir, envisagez d'ajouter un index sur la valeur aux jetons FC M. Allons donc aux jetons FC M. Ensuite, on va ajouter l'index sur. Donc, copions de quelque part et mettez-le ici et Index sur va être une valeur de point. OK, alors maintenant publions ces modifications. Copions-les tous. Naviguons vers les règles de base de données, Jason, et remplacons-les comme ceci. Ok, regarde, a marqué. Maintenant, engageons nos changements. Enfin. Laisse-moi tout arrêter, puis je vais tout mettre et ensuite m'engager. Et puis je dirai, gérer FC M de l'usine appelée fonction cloud et envoyé FC M Perfect. se voit dans la prochaine. 155. Gérer des utilisateurs FCM: bonjour. Dans cette vidéo, nous allons créer une nouvelle fenêtre de modèle. Jamais demandera aux utilisateurs s'ils veulent recevoir des notifications ou non. Allons-y. Revenons au code et sous Chat Window Top dossier. Créons un nouveau fichier. Demandez FC M Bt et modèle. Allons remplir ce composant. Il sera couvert de l'acte Frackman. Et comme déclencheur, on va verser le bouton Aiken pour Aiken. Nous allons spécifier que je peux composant et pour je peux le composant citera. Je peux nommer un podcast. Ce que je peux Bouton aura aussi la taille du collier bleu va être petit et aussi il va être un cercle. Sauvons ça. Naviguons vers Index Duchy Oui, l'intérieur du dossier supérieur Et nous allons utiliser ce composant à l'intérieur de cette barre d'outils bouton juste avant une plage de Detroit et Robert. Demandons peu FC M Beach à Moto. Disons attendre et jetons un coup d'oeil Maintenant, Comme vous pouvez le voir, j'ai cette marque cassée en haut, et c'est parce que si nous ouvrons salle d'édition Beach intro Burr étaient vers le haut dans l'élément dif. Enlevez-le et continuons de réagir fragment. Maintenant, si on jette un coup d'oeil. Tout est bien aligné. Parfait. Maintenant, continuons à construire notre demander FC et battu et Moto. Alors définissons une fenêtre de motel par ici. A l'intérieur, nous aurons l'en-tête mortel que le corps et le pied de page. Permettez-moi de les préciser tous. Donc, à l'intérieur de Heather, nous aurons un titre de point mortel et les gens disent pas de vacances de thé. Autorisation. Ok, bien. Maintenant, afin d'afficher quelque chose à l'intérieur du corps, nous devons savoir si notre utilisateur actuel reçoit déjà des messages FC M. Pour cela, nous devons verser une autre valeur dans notre contexte. Naviguons jusqu'à Chad Togs. Donc c'est Page où nous avons passé quelques données contextuelles sur notre salle actuelle. Ici, nous pouvons obtenir nos utilisateurs FC M, Donc, nous allons pauvres utilisateurs FC M précieux. Ensuite, nous appellerons transformation en tableau que les utilisateurs actuels FC M de la salle. Maintenant, nous avons besoin de notre Bullen. Donc, nous allons créer est réception FC M et nous allons demander si le tableau des agresseurs FC inclut l'utilisateur actuel américain . Ton passé damnable. Ceci reçoit FC et Bullen à notre courant à partir du contexte. Maintenant, nous allons sauver et à l'intérieur demander FC M Entre Moto, nous allons obtenir est de recevoir FC M de l'utilisation actuelle crochet de salle. Ok, parfait. Mais pour le sélecteur, spécifions que la valeur reçoit FC M Good. Maintenant, pour le modèle, nous avons besoin d'utiliser l'état mortel. Donc, nous allons utiliser ce crochet d'état de modèle et vous obtiendrez, comme toujours, est ouvert, fermé et ouvert. Donc, pour la fenêtre mortelle, nous allons spécifier la propriété qui va être ouverte sur cache. Tu vas être proche. Et aussi, nous allons spécifier d'autres accessoires que nous n'avons pas utilisés auparavant tels que la taille. Spécifions extra petit et aussi la toile de fond va être statique. Bon, maintenant, versons notre rendu conditionnel à l'intérieur par Mais avant, laissez-moi rapidement résoudre ce problème et ici aussi et nous n'avons pas besoin de celui-là. Donc, à l'intérieur du pied de page pour éviter cette ligne rouge pour un délicieux bouton de mise avec du texte haut et à l'intérieur du corps mettra rendu conditionnel. Donc on va demander s'il reçoit FC M. Ensuite, on va mettre un élément diff avec le nom de la classe hors centre du texte. Et à l'intérieur de ce Dave, nous allons mettre que je viens avec le nom de la classe hors texte vert et la marge inférieure trois, donc je peux nommer va être cercle de vérification et la taille va être cinq fois grande. Et à côté de cela, je peux Nous fournirons le titre H six avec du texte. Vous êtes abonné à diffuser des messages envoyés par l'annonce Mons hors de cette salle. D' accord, bien. Maintenant, si nous ne sommes pas abonnés aux messages, alors nous allons afficher un autre live à nouveau avec le nom de la classe hors centre de texte cette fois affichera une autre icône avec la classe. Nom hors texte Bleu et marge inférieure trois également. Donc je peux nommer va être interrogé. Cercle et taille à nouveau cinq fois grand. Maintenant, à côté de cette Aiken à nouveau, h six titre. Et vous voulez vous abonner à mes messages envoyés par des annonces en dehors de cette salle ? Ok, bien. A côté de ce rendu conditionnel, on va verser un autre texte. Alors mettons la balise p et la classe. Nom va être la marge top deux, et nous dirons à recevoir des notifications, assurez-vous que vous n'autorisez pas les vacances dans votre navigateur. D' accord, bien. Savourez et jetons un coup d'oeil. Donc, avant que nous puissions le faire, versons sur le gestionnaire de clic pour le bouton Aiken. Ouvrons et jetons un coup d'oeil. Ok, donc si je clique sur ce bouton maintenant j'ai des notifications. Permission ? Vous êtes abonné pour recevoir des notifications. Assurez-vous d'autoriser les notifications dans votre navigateur. En outre, ce serait bien si nous avions une sorte de valeur qui indique si nous avons la permission ou non. Parce que si nous ouvrons cette information latérale ici, nous avons limité différentes autorisations, telles que la localisation, microphone et les notifications. Donc, si cela est réglé pour bloquer, nous ne serons pas en mesure de recevoir quoi que ce soit. C' est pourquoi il est bon d'afficher ici. Mais que la permission est accordée n'étaient pas pour cela. Mettons-le à côté de cet indicateur d'autorisation de balise P. Donc, nous allons dire la permission. Ensuite, nous allons arranger les deux-points et puis mettre le rendu conditionnel. Donc, nous allons mettre la notification et la notification est l'objet global à l'intérieur de la fenêtre dans le navigateur. Si je, cependant, vous pouvez voir que ce sont des notifications ap I Donc, si la permission de point de notification est égale à deux grognements, alors je vais afficher un élément filé qui dira grognement et mettons un nom de classe hors Texte vert. Sinon, si nous n'avons pas la permission, nous allons afficher span avec le texte de nuit et le nom de classe sera lu texte. Parfait. Mais maintenant je peux le sauver parce qu'il semble que j'ai mieux quelque part. Bon, on pourrait ce Pitak jusqu'à la fin comme ça. Ok, ça a l'air bien. Maintenant, jetons un oeil. Si j'ouvre cette fenêtre maintenant, j'ai la permission avant. Il semble aller maintenant nous devons définir notre fonctionnalité. Donc pied de page intérieur. Mettons d'abord un bouton de fermeture. Alors laissez-moi faire un recapitalisé et sur clic va être proche. Et juste avant ce bouton, nous allons mettre nos boutons principaux pour la fonctionnalité. Donc on va demander si notre utilisateur reçoit le FC M. , puis on va mettre le bouton avec le texte. J' ai changé d'avis parce que, comme vous vous souvenez, nous avons cette question. Voulez-vous vous abonner aux messages pour la couleur ? Nous allons spécifier vert et pour unclipped, nous allons créer sur la fonction d'annulation juste dans un instant . Sinon, si nous ne recevons aucune notification, nous vous donnerons un autre bouton. Mais SMS Oui, je veux m'abonner. D' accord. Pour déclipser nous verserons sur sauf et pour une couleur. Nous travaillerons aussi en vert. Bon, sauvegardons ça. Et maintenant, définissons d'abord nos fonctions. Allons-y. Annuler le. Annuler et ici nous allons référencer notre base de données. Mettons donc la base de données que nous importons à partir du fichier firebase que la référence. Et les gens spécifient chambres, slash salle I D ou chat I D que nous obtenons de l'utilisation Paramus Hook. Donc chat i d. Il a reçu de l'utilisation perms. Déplaçons cette importation vers le haut que nous allons référencer les utilisateurs FC M et pour enfant, qui est hors utilisateur actuel. Soyons importants de l'utilisateur actuel que je ne supprime pas. Nous allons simplement supprimer cet objet de notre base de données. Bien. Maintenant, définissons la deuxième fonction, qui est sur sauf et la nationalité différente va être assez similaire licious. Copie ça, Nipper. Et au lieu d'enlever cet enfant, on va le mettre à la vérité. D' accord ? Parfait. Maintenant, nous allons réellement tester. Alors ouvrons notre mobile et nous allons cliquer sur J'ai changé d'avis et maintenant vous pouvez voir cette conditionnalité entrer dans les travaux. Et si nous regardons à l'intérieur de la base de données, allez dans les chambres Maintenant, nous n'avons pas d'utilisateurs FC M. Si je clique sur oui, je le fais. Maintenant, nous avons des utilisateurs FC M avec mon utilisateur i d aperçu, Mais pour le rendre un peu plus convivial. Définissons une autre couleur pour notre bouton Aiken. Donc, nous allons dire apparence. Si notre utilisateur reçoit FC M, alors nous verserons l'apparence par défaut. Sinon, nous mettrons fantôme et regardons ce qui va se passer. Donc si je dis ce que maintenant j'ai cette couleur bleue ici avec l'apparence normale. Bon, donc si je change d'avis maintenant, j'ai cette apparence fantôme sans la couleur à l'intérieur du fond. Ok, bien. Donc c'est ça. C' est ainsi que nous pouvons gérer nos utilisateurs, mais ils veulent s'abonner ou non. Donc, s'ils ne s'abonnent pas, cela signifie qu'ils ne recevront aucune notification qui sont envoyés par cette forme morale. Bon, donc je suppose que c'est tout pour cette vidéo. Et c'est le moment pour nous d'engager nos changements. Ouvrons notre terminal, puis allons à Dar et puis nous nous engageons. Nous sommes un homme d'âge FC M utilisateurs avec le demander FC M vtm Moto parfait pour terminer ce voyage. Allons Bush tout en ligne pour se lever avec. Obtenez le rassemblement d'origine Bush une fois qu'il est fini. Courir, déployer Firebase et profiter de notre application de chat en ligne. Je suis heureux de dire que nous avons fini avec ce projet. Nous avons mis en œuvre tout ce que nous voulions. Les notifications en temps réel, les rôles d'administrateur, la présence de l'utilisateur. Nous avons tout en place. Il y aura quelques vidéos supplémentaires sur le concept de réaction que nous n'avons pas couvert dans les trois projets. Néanmoins, j'espère que ce fut une expérience précieuse pour nous deux. Et j'espère que ce cours vous donnera ce que vous êtes venu pour. Merci pour ça. Temps et patience. À la prochaine fois. 156. Les caractéristiques clés de React: Hey, dans cette section la plupart, nous allons couvrir les fonctionnalités de réaction que presque toutes les applications de réaction régulières de production ont . Mais nous n'avons pas eu la chance de les utiliser dans nos projets. Tout ce qui sera couvert ici va être appliqué à notre application de chat de projet final pour nous aider avec le code double référence officielle de la documentation de réaction. Je vous recommande fortement de le lire vous-même pour mieux comprendre comment réagir fonctionne. se voit dans la vidéo suivante. 157. React Ports: sanctifié. Notre première vidéo va porter sur la réaction. Portails et portails est juste un moyen Teoh. Rendez quelque chose avec réagir à l'extérieur hors def avec des fruits idéaux. Ce que je veux dire, si nous ouvrons notre application de chat et si nous inspectons nos éléments, nous savons que tous nos éléments, tous nos composants, notre application passe sous ce dif avec l'idée a bien écrit, Cependant, Jetons un coup d'oeil lorsque nous ouvrons une fenêtre de modèle où elle sera rendue. Donc, si j'ai ouvert ça à travers huit nouvelles salles de chat, vous pouvez le voir ici en bas. J' ai ce dialogue de rôle def, et si je l'ouvre et si je l'inspecte, vous pouvez voir qu'en fait, mon nouveau modèle Chatham est rendu à l'extérieur de cette route. C' est donc pour cela que les portails sont utilisés. Ceci est utile pour quelque chose comme les fenêtres de modèle, les info-bulles ou les survols. Je ne sais pas quoi que ce soit qui doit être loué en dehors du traitement de composant principal. Ceci est très utile lorsque nous traitons avec la propriété CSS de l'index Z. Donc, ne revenons jamais à la documentation et regardons à travers des exemples ici, vous pouvez lire mots que je viens de dire que vous avez jamais en regardant cet exemple, il pourrait être trop compliqué de comprendre ce qui se passe. Donc, au lieu de copier , de tracer , le motile de classe de la documentation, ouvrons notre code. J' ai déjà l'Iran l'application et d'autres composants. Créons un nouveau modèle de fichier. Créons un nouveau composant. Et ici, au lieu de renvoyer ce Dave à partir de la documentation, nous pouvons voir que nous sommes capables d'utiliser la méthode de réaction, ne pas créer de portail. Donc, au lieu de ce def, revenons. Créer un portail et il sera automatiquement importé pour nous. Et si j'ouvre des fêtes, comme je peux voir qu'ici, j'ai des enfants et puis élément Ok, conteneur. Donc, pour les Enfants, nous mettrons des Enfants qui passeront à cette composante mortelle. Donc ici, je vais détruire vos enfants. Et puis je vais le passer pour créer Porto que notre conteneur. Doit être un autre div qui a du mal à définir dans l'index html. Donc ici, nous avons déjà ce différent avec l'idée Satu Road. Maintenant, créons un autre jour si ce sera un conteneur pour nos fenêtres de modèle. D' accord, donc ici nous allons créer Dave et moi, on sera modèle route. Sauvegardons et à l'intérieur des togs du modèle. Si nous ouvrons la documentation, nous pouvons l'obtenir en utilisant le document. Obtenir l'élément par i. D. Alors copions celui-ci. Mettons-le ici en haut et pour créer portail comme un second argument, nous allons passer route morale. Ok, parfait. Maintenant, sauvegardons ça. Et il dit que la réaction est déclarée. Jamais utilisé. Ok, alors peut-être qu'on va l'enlever. Maintenant, ouvrons. Peut-être la page de signature. Et ici, rendons cet accueil pour discuter. Laissons leur visite si à l'intérieur de notre fenêtre de modèle. Donc nous allons mettre le modèle importé de notre dossier que nous avons créé, pas de notre costume. Supprimons donc cette importation, et je veux l'importer de notre fichier. D' accord. On dirait qu'il importe de notre costume. Importons-le manuellement à partir du modèle de composants. Parfait. Donc, à l'intérieur de ce modèle, nous allons mettre notre def avec le centre de texte. Maintenant, si nous ne revenons jamais à notre application Si nous nous déconnectons maintenant, vous pouvez voir cet accueil. Chad est situé et en bas Et si je vais aux éléments et si j'inspecte mon arbre stupide ici en bas, je peux voir la route mortelle. Et à l'intérieur de cette route modèle, nous avons limité notre accueil à la chaise sous le centre de texte. C' est donc un Ceci est utilisé dans vos bibliothèques d'yeux comme notre CLR pour les fenêtres de modèles et pour les conseils d'outils . Par exemple, si nous devions créer, ils réagissent application sans utiliser la bibliothèque tear I et nous avons dû implémenter la fenêtre motile. Très probablement, nous utiliserions des portails réactifs parce qu'ils sont rendus à l'extérieur de notre principal traitement confiant. Vous pouvez trouver Onley plus pratique quand vous y entrez sur un exemple du monde réel. C' est bien si vous ne comprenez pas complètement. Mais croyez-moi, c'est le concept clé que vous devez au moins connaître. D' accord. Merci. se voit dans la prochaine. 158. Les limites d'erreur: Hé, là. Dans cette vidéo, nous allons parler de ses arbres à chignon. Revenons à la cour et ouvrons la page de connexion ici. Que va-t-il se passer si nous disons, jeter une erreur à l'intérieur de ce composant ? Laissons pauvre lancer une nouvelle erreur. Quelque chose de mauvais est arrivé Maintenant, disons quoi et jetons un oeil. Si je rafraîchis la peinture, nous pouvons voir que nous avons un jamais et quelque chose de mal s'est passé. Et la chose est que ces entrer est sur attrapé. Cela signifie qu'il est appelé par réaction, mais pas par nous, et finalement réagir sera la quantité de l'arbre compétent entier, ce qui est vraiment mauvais si nous avons une production prête par application pour empêcher que nous ayons meilleurs arbres à chignon qui sont des limites sont des composants qui attrapent tous ces types de lettres et l'affichage à fullback Vous I, par exemple, un message que ces paginés plantés. Veuillez le rafraîchir. Donc, si nous ouvrons la documentation, nous avons limité un exemple officiel comment créer un composant d'arbre de chignon de réponse simple. Et pour la plupart des cas, cela suffit. À moins que vous ayez une journalisation des erreurs vraiment sophistiquée ou que je ne sais rien de ce que j' proposé de faire, je veux aller à une démo en direct ? Ensuite, je veux que vous ouvrez cet exemple et à partir de là je vais copier ceci. Entrez Bunge re classe. Laisse-moi copier tout ça. Ensuite, je vais ouvrir le décodage et puis à l'intérieur des composants, je vais vous créer un fichier jamais Bun gery. Et à l'intérieur, je vais mettre ce composant basé sur la classe. Et ne soyez pas effrayant à propos de ce composant qu'il est basé sur la classe. Je vais vous expliquer tout ce qui se passe ici. Alors laissez-moi importer, réagir de réagir. Et aussi, nous avons beaucoup d'avertissements de longueur oui. Désactivons tous. Je vais juste cliquer sur le correctif rapide et désactivé pour le fichier entier. La même chose que je ferai ici. Maintenant, sauvegardons ça. Et ce qui se passe ici à l'intérieur du constructeur que nous définissons dans votre état, qui est un objet avec des informations sur jamais et erreur que d'utiliser un acte compétent Catch, hook de cycle de vie ou un événement de cycle de vie. Nous attrapons toute erreur qui se produit à l'intérieur de ce composant, d'accord ? Ou à ses enfants. Lorsque nous avons une erreur, nous mettons à jour cet état, puis à l'intérieur de la méthode de rendu. Si nous avons une erreur dans notre état, qui est joué le fullback ey. Et sinon, si tout va bien, nous rendons simplement partout ses enfants. Ok, assez simple. Maintenant, pour utiliser cet éditeur, nous devons envelopper notre arbre entier à l'intérieur de cette lettre. Bunbury. Alors ouvrons Abdel Gs. Et ici, je vais pour toujours grouper nous composant que nous avons créé. Laisse-moi sauver tout ça. Ensuite, je vais revenir à mon application. Je vais rafraîchir l'ampli et maintenant j'ai encore cet avertissement de réaction. C' est parce que nous sommes en bateau de développement. Cependant, si je le ferme maintenant, au lieu de signer la page, j'ai ce quelque chose de mauvais message avec les détails à l'intérieur. Et si j'ouvre mon autre arbre de chignon, je peux voir qu'en cas d'erreur, c'est exactement ce que je suis en train de rendre et il peut être personnalisé biais. C' est ainsi que nous pouvons attraper n'importe quel autre dans le Y dans chaque application prête à la production . C' est un must. La chose cool à propos de nos limites que nous pouvons créer plusieurs composants. Par exemple, ce moment, nous mettons l'arbre Herman mondial. Si une erreur à l'intérieur de l'arbre compétent sera produite, elle sera capturée par cette limite de lettre et au lieu de n'importe quel composant. Il affichera ce message avec quelque chose lorsqu'il est ivre. Disons que nous avons beaucoup de composants et le bouton ou écrasé, sinon barre écrasée. Nous ne voulons pas tout supprimer correctement pour ces situations. Nous pouvons mettre plusieurs autres limites, exemple, par composant ou par page. Donc, pour la page de signature, je peux tirer son propre arbre de chignon d'entrée comme ça. Ensuite, je peux créer un autre composant avec un autre marché pour toujours. Et puis je peux frotter une autre page autour d'une autre à son chignon. Donc de cette façon, si une erreur est produite à l'intérieur de la page d'accueil, il sera attrapé par ces autres chignon DRI, puis le U Y. qui est répertorié dans cet arbre de chignon lettre sera affiché. La question est pourquoi ? Et s'est bien passé. Les évers peuvent être produits par n'importe quoi. Cela peut être n'importe quelle erreur à l'intérieur du code que nous n'avons pas contrôlé ou nous l'évitons simplement. Ou peut-être qu'il peut être un réseau jamais, par exemple, si quelque chose a besoin d'être accès en ligne. Mais hors de nulle part, Internet est tombé et le composant n'a pas réussi à rendre de cette façon il sera mis en cage par entrer arbre chignon et il est très important de comprendre que ce genre d'erreurs ne sera pas attrapé par jamais. Les arbres de chignon à ses arbres de chignon attrapent d'autres Onley liés rendu Teoh. Maintenant, je suppose que nous avions besoin d'une sorte de meilleur Bunbury dans notre application de chat. Je suppose que c'est le bon moment pour engager nos changements. Alors déversons ce trône. Votre compagnie aérienne à l'intérieur de la signature et mettons un arbre de chignon mondial jamais pour notre application de chat et engageons nos changements. Alors je vais verser. Laisse-moi redémarrer le terminal. Je vais mettre, obtenir à tout et puis obtenir engagement et puis ajouté meilleur arbre de chignon. Parfait. J' espère que c'était complet et pas trop compliqué. se voit dans la prochaine. 159. Splitting de code: Hey là dans cette bulle vidéo, parler de la division de code en mode réaction, fractionnement est étroitement couplé avec le chargement paresseux en réaction, tué, fractionnement des moyens de charge paresseux composants, dépendances ou peut-être même CSS fichiers. Si nous lisons la documentation, nous pouvons voir cette section de regroupement où il est dit que chaque fois que nous construisons une application, nous avons le fichier JavaScript final. Et en effet, si nous allons regarder à l'intérieur de notre projet et que nous allons au dernier script statique et jaloux construit ici, nous limitons quelques travaux, bons fichiers. Et comme vous pouvez le voir, ils sont magnifiés et en même temps ils sont assez grands. C' est là que va notre logique. Mais avec le chargement laser, nous sommes en mesure de créer plus de morceaux de notre application. Et de cette façon, nous pouvons poser une charge nos morceaux JavaScript sur Lee quand ils sont nécessaires. Par exemple, si vous regardez à l'intérieur de notre application, nous n'avons fondamentalement pas besoin de la page de connexion en ce moment. On a besoin d'Onley quand on est non autorisé, non  ? Donc, il serait logique de paresseux signe de chargement et composant de page. Donc, si nous allons à la documentation et si nous faisons défiler vers le bas jusqu'à l'exemple réel avec réaction, réaction paresseuse Lisi est une technique à l'intérieur réagir aux composants de charge paresseux. Nous pouvons utiliser cet exemple pour charger paresseux notre page de connexion. Copions cette ligne de code que je vais naviguer à Abla GS Place où nous avons rendu le composant de signature ici. Je vais payer cet autre composant et je le remplacerai par Sinan. Et puis je copierai passe pour me connecter à la page. Et puis je vais réellement importer paresseux aussi de réagir au lieu d'utiliser de l'encre comme ça. Et aussi j'ai besoin d'importer des suspects comme nous pouvons le voir à partir de la documentation, parce que quand nous paresseux , bas , dim Ojul, cela pourrait prendre quelques secondes ou quelques millisecondes pour charger ce module. Et pendant qu'il est chargé pour éviter la chair, nous pourrions utiliser un peu de fullback. Vous j'ai quelque chose comme le chargement. C' est pourquoi nous devons toujours fournir le suspense. Laisse-moi le copier, et mon prédicateur manque. Alors laissez-moi l'annuler et a réellement démarré l'application. Peut-être que ça marchera. Ok, donc je vais verser des suspects que je me connecterais à la page et je vais le mettre comme ça maintenant je peux déjeuner mon application à nouveau et me laisser la sauvegarder et maintenant nous devons utiliser une connexion comme ça avec des suspects et nous allons supprimer l'ancienne importation désactiver la page de connexion. Maintenant, si je l'enregistre, j'ai aussi besoin d'importer du suspense. Maintenant, si je dis où et si je retourne à la cour si je rafraîchis l'application si je clique sur inspecter et si j'ai ouvert le robinet réseau, laissez-moi me déconnecter et faire attention. Quel fichier sera chargé ? Donc, si je clique sur ce bouton, vous avez vu ce petit scintillement avec déf de chargement que nous avons mis comme un retour complet ici pendant que cette chute vous revient. Je montrais qu'on avait chargé le morceau de notre manteau. Et si nous l'ouvrons ici, nous limitons nos États-Unis ou voyons la signature des pages. Donc, c'est ce que cela signifie de coder notre application. Si vous créez une application très volumineuse, probablement lorsque quelqu'un lance votre site Web pour la première fois, plupart de vos composants ne sont probablement pas nécessaires. Cette technique est vraiment importante à comprendre. Et un bon exemple serait juste d'ouvrir le côté rap Twitter et de voir que partout quand vous venez de charger le site, vous pouvez voir les spinners qu'ils utilisent paresseux chargement beaucoup afin qu'ils chargent paresseux tous les composants pour réduire la taille initiale du paquet parce que c'est vraiment important. Si je rafraîchis l'application, vous pouvez voir que beaucoup de fichiers ont été chargés ici, comme un morceau principal, et nous voulons garder le Chunk principal aussi petit que possible parce que le Seigneur initial hors du site compte. Bon, donc c'est à propos du chargement laser ? J' espère que c'était complet. Maintenant, nous allons réellement valider nos modifications à l'application de chat. Alors versons, allons à Dar et ensuite nous engageons. Ajouter paresseux flottant PDG parfait dans le prochain. 160. Conclusion: Bonjour. Maintenant, vous connaissez toutes les choses modernes nécessaires pour créer une grande application de réaction prête à la production. Donnez-lui un peu plus de pratique et vous allez certainement rassembler tout ce que nous avons couvert . Voici une tâche pour vous. Consultez la documentation de réaction et comptez sur des sujets que vous n'avez pas entendus pendant le cours . Il y a beaucoup de détails subtils qui sont invisibles au premier verre. Assurez-vous de comprendre pourquoi vous utilisez cette technique. Pour l'instant, nous avons fini avec cette section. se voit dans la prochaine. 161. Résumé - Connaissance que vous avez acquises: Bonjour, Tu as très bien fait. Vous construisez trois projets réactifs distincts de complexité différente. Vous pouvez dire fièrement que vous avez une expérience de développement de réaction. Résumons maintenant ce que vous avez appris sur ce cours. Je vais tout scinder dans son propre contexte. Les tribunaux ont commencé par des choses plus générales où vous avez examiné différents types de rendu de sites Web . Est-ce que AP yeux compte tenu des exemples du monde réel de votre équipement, pas GS et des cours de crash JavaScript modernes et ensuite vous préparer à commencer à travailler avec réagir sur notre premier projet. Tick tack pour vous apprendre à connaître d'abord les composants React, les sondes, les styles, ST Dynamic, vous I et le développement de Flow. En général, vous avez créé un projet de réaction simple qui démontre des bases solides. Avec le box-office, vous avez évolué vers une application de réaction plus complexe en travaillant avec un P I externe et en gérant des scénarios primitifs connus . À l'aide de trois cuisiniers AC, vous apprenez le concept de foules dynamiques et de données à distance, alors comment optimiser et analyser les composants réactifs, CIA dit dans GS ou les composants stylés ne sont pas étrangers pour vous à partir de maintenant. À la fin de ce projet, vous avez une application de réaction typique qui nécessite plus complet re accusé de réception Dans la dernière application de chat de projet. Vous apprenez à connaître la base de feu en premier lieu. Vous avez fait un excellent travail dans la gestion de l'état global avec contexte. AP I Vous rencontrez des situations confuses et non primitives qui nécessitent une compréhension avancée de la réaction. Gérer les styles vous-même pas toujours souhaitable. C' est pourquoi maintenant vous comprenez la signification de vos composants Y, bibliothèques, utilisateurs, états et pages privées sont des choses normales pour vous en ce moment. Et réagir hameçons est votre arme principale. Plusieurs s reculent bien sûr. Payez moins avec un minimum d'effort. À la fin de la discussion, vous créez une application Web prête à la production avec des technologies à jour. Il y avait aussi une petite salle hors des concepts de réaction où nous les avons examinés séparément et appliqués à notre projet final. Après tout cela, vous devriez être sûr de travailler avec réaction et son système écologique. Il y aura toujours ce sentiment que votre connaissance ne suffit pas. Et c'est très bien. Chaque développeur a ce sens. n'y a pas de limite à la perfection. Ce sont les choses que vous avez apprises dans ce cours. Rendez-vous la prochaine fois 162. Vos mouvements futurs: Bonjour. Parlons de vos prochaines étapes après le discours. n'y a pas de feuille de route pour les développeurs Web, mais voici mes suggestions et recommandations. Tout d'abord, apprenez dactylographié. C' est un langage construit sur JavaScript. Il apporte le système de type au projet, et à la fin de la journée, il augmentera la fiabilité du code. Google quatre React articles tapés et commencer par ceux-ci intégrés dans un projet de réaction simple pour comprendre pourquoi il est incroyable. Ensuite, jetez un oeil à re canards. Vous connaissez déjà l'utilisation. Reducer Hook Read Acts est une bibliothèque de gestion d'état globale qui utilise la même approche que réducteur utilisé. Il a une courbe d'apprentissage, mais avec des crochets de réaction et redox à enfant, Redox est devenu plus complet. Beaucoup de tutoriels et la facilité forcée Redox, mais la plupart du temps, vous n'en avez pas besoin. En même temps, ce sera vraiment une bonne pratique d'augmenter votre valeur en tant que développeur. Google pour tout article sur la réduction moderne avec trois canards boîte à outils. Si vous voulez grandir en tant que développeur réactif, vous devez certainement commencer à regarder vers la prochaine GS et Gatsby. Ces deux cadres sont construits sur le dessus de la réaction, et ils sont tous les deux destinés au rendu côté serveur. Système écologique incroyable, bons tutoriels. Ils ont tout pour vous donner le développement aussi confortable que possible et vous forcer à construire un A p I sans GS, aucune connaissance Jess n'est requise partout, que ce soit un backend JavaScript ou juste un script d'arrière-plan. Trouvez un article sur la façon de configurer express GS et aucun GS. Faites-le vous-même qui a augmenté cette connaissance en faisant plus de pratique à la fin de la journée. Apprenez-en plus sur les tests lors de vos modifications. Pour décoder, il est important de ne rien casser. C' est pourquoi les tests existent avec des outils modernes. Les tests sont très simplifiés et agréables. Le test est important, mais plus important encore, c'est de tester sur Lee ce qui doit réellement être testé. Google Pour tout article lié à la plaisanterie ou des tests de réaction enzymatique. En savoir plus sur la sécurité des applications Web, en particulier sur les jetons Jason Webb, les cookies et le stockage local. Protéger le backend est également une chose, mais pour cela commencer à abaisser les togs, aucune base de données SQL telle que Mongo, DB ou firebase n'est facile, mais ils aiment les requêtes et les structures puissantes lors de la construction. Et non, elle est revenue et a judicieusement décider de la DB. Demandez à vos bases de données sont plus préférables à grande échelle pose robe. Demandez vous L et Mongo db sont très populaires de nos jours. Plus d'attention est également accordée à la greffe ul. Une fois que vous vous sentez à l'aise avec pas d'échecs et de repos AP yeux commencent à penser à greffe. Vous aurez Il est plus flexible quand il y a beaucoup de demandes avec la forme de données dynamique Warren Cloud Computing et le développement hors enveloppe à l'aide des services cloud, il ne changera pas la pile de développement sous-jacente, par exemple, Réagissez et notez GS, mais il vous donnera des services qui vous permettent de déployer et de gérer l'APP. déploiement sans serveur ou le stockage dans le cloud sont des exemples de services cloud. Jetez un oeil aux fournisseurs de cloud populaires et choisissez un. Rendez tout automatisé avec une intégration continue et continue la livraison. La livraison lui permet d'automatiser le processus de déploiement. Par exemple, lorsque vous poussez une nouvelle modification et que vous vous levez, l'application sera déployée automatiquement continue. L' intégration va avant la livraison continue. Il définit fondamentalement le modèle hors nouveau code Push au code principal. Ce sujet n'est pas si facile à comprendre. Alors n'hésitez pas à lire n'importe quel article et avoir beaucoup de questions. Ce sont mes recommandations. N' hésitez pas à choisir votre propre direction. À la prochaine fois